@import url("/assets/marketing/home-studio-workflow.css");
@import url("/assets/marketing/home-studio-results.css");

/* ReelFlock homepage. */
body.home-studio {
  --rs-ink:#17213b; --rs-copy:#57647a; --rs-muted:#768196;
  --rs-night:#111b38; --rs-stage:#192648; --rs-white:#fff;
  --rs-blue:#3d5dff; --rs-cyan:#00c7ff; --rs-violet:#8e23ff;
  --rs-line:#dce3ef; --rs-paper:#fbfcff; --rs-tint:#edf2ff;
  --rs-font:Inter,"PingFang SC","Noto Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  margin:0; background:var(--rs-paper); color:var(--rs-ink);
  font:400 16px/1.65 var(--rs-font); -webkit-font-smoothing:antialiased;
}
body.home-studio.rs-modal-open { overflow:hidden; }
.rs-home { background:var(--rs-paper); color:var(--rs-ink); font-family:var(--rs-font); font-synthesis:none; }
.rs-home *,.rs-home *::before,.rs-home *::after { box-sizing:border-box; }
:where(.rs-home) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote) { margin:0; padding:0; }
:where(.rs-home) :where(ul,ol) { list-style:none; }
.rs-home :is(h1,h2,h3,h4) { color:var(--rs-ink); font-family:var(--rs-font); font-weight:600; }
.rs-home h2 { font-size:clamp(30px,3.1vw,44px); line-height:1.3; letter-spacing:-.035em; text-wrap:balance; }
.rs-home h3 { font-size:24px; line-height:1.4; letter-spacing:-.025em; }
.rs-home p { color:var(--rs-copy); }
.rs-home img { display:block; max-width:100%; }
.rs-home a { color:inherit; }
.rs-home svg { width:20px; height:20px; flex-shrink:0; }
.rs-home button { font-family:inherit; }
.rs-home :is(section,[id]) { scroll-margin-top:98px; }
.rs-home :is(a,button,summary,video,[tabindex]):focus-visible { outline:3px solid var(--rs-blue); outline-offset:5px; }
.rs-home :is(.rs-hero,.rs-demo,.rs-film-dialog) :is(a,button,video,[tabindex]):focus-visible { outline-color:var(--rs-cyan); }
.rs-wrap { width:min(calc(100% - 80px),1200px); margin-inline:auto; }
.rs-home .rs-kicker { color:var(--rs-blue); font-size:12px; font-weight:600; line-height:1.5; letter-spacing:.08em; }
.rs-heading { max-width:830px; margin:0 auto 40px; text-align:center; }
.rs-heading .rs-kicker { margin-bottom:14px; }
.rs-heading>p:last-child:not(.rs-kicker) { max-width:660px; margin:18px auto 0; font-size:15px; line-height:1.8; }
.rs-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:13px 24px; border:1px solid transparent; border-radius:7px; font-size:14px; font-weight:600; line-height:1.5; text-decoration:none; transition:background 160ms ease,border-color 160ms ease; }
.rs-home .rs-btn-primary { background:var(--rs-blue); color:#fff; }
.rs-home .rs-btn-primary:hover { background:#2d49dd; }
.rs-home .rs-btn-outline { border-color:#cbd5e6; background:transparent; color:var(--rs-ink); }
.rs-home .rs-btn-outline:hover { border-color:var(--rs-blue); background:#f0f3ff; }

/* The headline and the real walkthrough share the first screen. */
.rs-hero { padding:80px 0 34px; background:var(--rs-night); text-align:left; }
.rs-hero>.rs-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:46px 52px; max-width:1200px; }
.rs-hero-copy { min-width:0; }
.rs-hero .rs-kicker { color:#76ddff; }
.rs-hero h1 { max-width:580px; margin:20px 0 0; color:#f8faff; font-size:50px; font-weight:600; line-height:1.3; letter-spacing:-.045em; text-wrap:balance; }
.rs-hero h1>span { display:block; }
.rs-home[lang="en"] .rs-hero h1 { font-size:54px; line-height:1.13; letter-spacing:-.05em; }
.rs-hero h1 .rs-gradient-text { color:#79c4ff; background:linear-gradient(100deg,#68dcff 18%,#7b9aff 60%,#bc92ff 88%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.rs-home .rs-lead { max-width:540px; margin:24px 0 0; color:#bdc9e0; font-size:15px; line-height:1.85; }
.rs-actions { display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:13px; margin-top:29px; }
.rs-hero .rs-btn-primary { background:var(--rs-blue); }
.rs-hero .rs-btn-outline { color:#eef3ff; border-color:#6b7899; background:#ffffff04; }
.rs-hero .rs-btn-outline:hover { background:#ffffff0d; border-color:#c0cbe4; }
.rs-home .rs-trial { margin-top:13px; color:#8e9dbb; font-size:12px; }
.rs-platforms { grid-column:1/-1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:15px 30px; margin-top:0; padding-top:28px; border-top:1px solid #2c3b5b; color:#a4b1cd; font-size:12px; }
.rs-platforms ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:17px 29px; }
.rs-platforms li { display:inline-flex; align-items:center; gap:8px; color:#d4dded; font-size:12px; font-weight:500; white-space:nowrap; }
.rs-platform-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; color:#96b8ee; }
.rs-platform-mark :is(img,svg) { width:22px; height:22px; object-fit:contain; }
.rs-film-dialog { width:min(1000px,calc(100vw - 48px)); max-height:90dvh; padding:0; overflow:auto; border:1px solid #536183; border-radius:10px; background:#131f3b; color:#eef4ff; box-shadow:0 30px 100px #04091880; }
.rs-film-dialog::backdrop { background:#040918c9; backdrop-filter:blur(6px); }
.rs-film-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px 12px 20px; }
.rs-film-heading>strong { font-size:14px; font-weight:500; }
.rs-film-close { display:grid; place-items:center; width:40px; height:40px; border:1px solid #4e5e7f; border-radius:5px; background:#1d2c4c; color:#fff; cursor:pointer; }
.rs-film-close:hover { background:#34466c; }
.rs-film-dialog video { display:block; width:100%; max-height:calc(90dvh - 120px); aspect-ratio:16 / 9; background:#050a15; }
.rs-home .rs-film-dialog>p { padding:13px 20px 17px; color:#9eafcf; font-size:11px; }

/* A portfolio of public videos, clearly separate from product illustrations. */

/* Four plans, with their original prices and entitlements. */
.rs-pricing { padding:78px 0 72px; background:#edf2ff; border-top:1px solid #dee6fb; }
.rs-pricing .rs-heading { margin-bottom:37px; }
.rs-plans { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; }
.rs-plan { min-width:0; display:flex; flex-direction:column; padding:26px 23px 23px; border:1px solid #d6dfef; border-radius:8px; background:#fff; }
.rs-plan.is-recommended { border-color:var(--rs-blue); box-shadow:inset 0 3px 0 var(--rs-blue); }
.rs-plan-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; min-height:30px; margin-bottom:7px; }
.rs-plan-top>h3 { font-size:21px; }
.rs-plan-top>span { padding:3px 7px; background:#edf1ff; border-radius:3px; color:var(--rs-blue); font-size:10px; line-height:1.5; }
.rs-home .rs-plan-tag { min-height:40px; color:var(--rs-muted); font-size:12px; line-height:1.6; }
.rs-home .rs-price { display:flex; align-items:baseline; gap:5px; margin-top:20px; color:var(--rs-ink); line-height:1.15; }
.rs-price>strong { font-size:39px; font-weight:600; letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
.rs-price>span { color:var(--rs-muted); font-size:12px; white-space:nowrap; }
.rs-home .rs-annual { min-height:39px; margin-top:10px; color:var(--rs-muted); font-size:11px; line-height:1.6; }
.rs-plan>ul { display:grid; gap:11px; margin:18px 0 25px; padding-top:20px; border-top:1px solid var(--rs-line); }
.rs-plan>ul>li { display:flex; align-items:flex-start; gap:8px; color:var(--rs-copy); font-size:12px; line-height:1.65; }
.rs-plan>ul>li>svg { width:15px; height:15px; margin-top:2px; color:var(--rs-blue); }
.rs-plan>.rs-btn { width:100%; margin-top:auto; min-height:47px; padding-inline:10px; font-size:13px; }
.rs-pricing-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:25px; }
.rs-pricing-foot>a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--rs-blue); font-size:13px; text-decoration:none; }
.rs-pricing-foot>a:hover { text-decoration:underline; }
.rs-pricing-foot>a>svg { width:16px; height:16px; }
.rs-pricing-foot>span { color:var(--rs-muted); font-size:12px; }

/* The shared dark header lives in site-header.css for every marketing page. */
body.home-studio .footer a:focus-visible { outline:3px solid var(--rs-blue); outline-offset:4px; }
body.home-studio .footer { border-top:1px solid var(--rs-line); background:#fff; color:var(--rs-copy); padding-top:62px; }
body.home-studio .footer::before,body.home-studio .footer::after { content:none; }
body.home-studio .footer>.container { width:min(calc(100% - 80px),1200px); }
body.home-studio .footer :is(a,h3,h3 a),body.home-studio .footer-identity { color:var(--rs-ink); font-family:var(--rs-font); }
body.home-studio .footer-identity { font-size:25px; font-weight:600; letter-spacing:-.04em; gap:10px; }
body.home-studio .footer-logo { width:43px; height:30px; object-fit:contain; }
body.home-studio :is(.footer-links a,.footer-secondary-link,.footer-bottom,.footer-meta,.footer p,.footer-link-static) { color:var(--rs-copy); }
body.home-studio .footer a:hover { color:var(--rs-blue); }
body.home-studio .footer-language-badge { color:var(--rs-copy); border-color:var(--rs-line); }
body.home-studio .footer-model-link .model-nav-icon--mono { filter:none; }
body.home-studio .footer-bottom { border-color:var(--rs-line); }
body.home-studio .footer-wordmark { display:none; }
body.home-studio .footer:has(.footer-wordmark) { padding-bottom:32px; }

/* Leave enough room for both halves without creating a second hero. */
@media (min-width:1200px) {
  .rs-hero { padding:76px 0 34px; }
  .rs-hero .rs-btn { min-height:48px; padding-block:12px; }
}
@media (min-width:1024px) and (max-width:1240px) {
  .rs-hero>.rs-wrap { column-gap:32px; }
  .rs-hero h1 { font-size:42px; }
  .rs-home[lang="en"] .rs-hero h1 { font-size:46px; }
  .rs-plan { padding-inline:17px; }
  .rs-price>strong { font-size:35px; }
}
@media (max-width:1023px) {
  .rs-home h2 { font-size:34px; }
  .rs-hero { padding-top:52px; }
  .rs-hero>.rs-wrap { grid-template-columns:minmax(0,1fr); gap:32px; max-width:640px; }
  .rs-hero h1 { font-size:48px; }
  .rs-home[lang="en"] .rs-hero h1 { font-size:54px; }
  .rs-plans { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}

@media (max-width:700px) {
  .rs-wrap { width:calc(100% - 40px); }
  .rs-home :is(section,[id]) { scroll-margin-top:86px; }
  .rs-home h2 { font-size:29px; }
  .rs-home .rs-kicker { font-size:10px; letter-spacing:.055em; }
  .rs-heading { margin-bottom:27px; }
  .rs-heading .rs-kicker { margin-bottom:11px; }
  .rs-heading>p:last-child:not(.rs-kicker) { margin-top:14px; font-size:13px; }
  .rs-hero { padding:42px 0 28px; }
  .rs-hero h1 { margin-top:20px; font-size:36px; line-height:1.28; }
  .rs-home[lang="en"] .rs-hero h1 { font-size:42px; line-height:1.15; }
  .rs-home .rs-lead { margin-top:20px; font-size:13px; line-height:1.85; }
  .rs-actions { gap:10px; margin-top:24px; }
  .rs-btn { min-height:47px; padding:11px 18px; font-size:13px; }
  .rs-home .rs-trial { margin-top:12px; font-size:10px; }
  .rs-platforms { flex-direction:column; gap:12px; margin-top:0; padding-top:23px; font-size:10px; }
  .rs-platforms ul { gap:12px 14px; }
  .rs-platforms li { gap:5px; font-size:10px; }
  .rs-platform-mark { flex-basis:18px; width:18px; height:18px; }
  .rs-platform-mark :is(img,svg) { width:18px; height:18px; }
  .rs-film-dialog { width:calc(100vw - 24px); border-radius:7px; }
  .rs-film-heading { gap:12px; padding:9px 10px 9px 14px; }
  .rs-film-heading>strong { font-size:12px; }
  .rs-film-close { width:38px; height:38px; }
  .rs-home .rs-film-dialog>p { padding:10px 14px 14px; font-size:10px; }
  .rs-pricing { padding:48px 0 43px; }
  .rs-pricing .rs-heading { margin-bottom:28px; }
  .rs-plans { grid-template-columns:1fr; gap:16px; }
  .rs-plan { padding:23px; }
  .rs-plan-top { margin-bottom:5px; }
  .rs-plan-top>h3 { font-size:22px; }
  .rs-home .rs-plan-tag { min-height:0; font-size:12px; }
  .rs-home .rs-price { margin-top:18px; }
  .rs-price>strong { font-size:41px; }
  .rs-home .rs-annual { min-height:0; margin-top:9px; font-size:11px; }
  .rs-plan>ul { margin:20px 0 23px; padding-top:18px; gap:10px; }
  .rs-plan>ul>li { font-size:12px; }
  .rs-pricing-foot { align-items:flex-start; flex-direction:column; gap:7px; margin-top:19px; }
  .rs-pricing-foot>span { font-size:11px; }
  body.home-studio .footer>.container { width:calc(100% - 40px); }
  body.home-studio .footer { padding-top:42px; }
  body.home-studio .footer-main { gap:30px; }
  body.home-studio .footer-identity { font-size:23px; }
  body.home-studio .footer-bottom { margin-top:30px; }
}
@media (max-width:380px) {
  .rs-wrap { width:calc(100% - 32px); }
  .rs-hero h1 { font-size:32px; }
  .rs-home[lang="en"] .rs-hero h1 { font-size:38px; }
  .rs-platforms ul { display:grid; grid-template-columns:repeat(2,max-content); gap:12px 26px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(body.home-studio) { scroll-behavior:auto; }
  body.home-studio *,body.home-studio *::before,body.home-studio *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* A complete 16:9 demo preview, beside the headline on desktop. */
.rs-demo-inline { min-width:0; width:100%; margin:0; }
.rs-film-open { display:block; width:100%; overflow:hidden; padding:0; border:1px solid #506082; border-radius:14px; background:#1c2a47; color:#edf3ff; text-align:left; cursor:pointer; box-shadow:0 20px 60px #050d272e; }
.rs-film-open:hover { border-color:#a3b7f3; }
.rs-demo-topline { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.rs-demo-topline>span { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.rs-demo-topline img { width:24px; height:17px; }
.rs-demo-topline small { color:#a8b8d6; font-size:9px; letter-spacing:.1em; }
.rs-demo-thumbnail { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:#f4f5f8; }
.rs-demo-thumbnail>img { width:100%; height:100%; object-fit:contain; }
.rs-demo-thumbnail::after { position:absolute; inset:0; background:#14213c18; pointer-events:none; content:""; }
.rs-demo-play { position:absolute; z-index:1; left:50%; top:50%; display:grid; place-items:center; width:68px; height:68px; border:1px solid #ffffff66; border-radius:50%; background:#152449eb; box-shadow:0 6px 24px #0b173a38; transform:translate(-50%,-50%); transition:background 160ms ease,transform 160ms ease; }
.rs-film-open:hover .rs-demo-play { background:#3d5dff; transform:translate(-50%,-50%) scale(1.06); }
.rs-demo-play svg { width:26px; height:26px; margin-left:4px; color:#fff; }
.rs-demo-duration { position:absolute; z-index:1; bottom:12px; right:14px; padding:2px 7px; border-radius:4px; background:#111b38e6; color:#fff; font-size:11px; font-variant-numeric:tabular-nums; }
.rs-demo-copy { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; }
.rs-demo-copy strong { color:#eef3ff; font-size:14px; font-weight:500; }
.rs-demo-copy>svg { width:19px; height:19px; color:#b5c6f1; }
@media (max-width:700px) {
  .rs-film-open { border-radius:10px; }
  .rs-demo-topline { padding:11px 14px; }
  .rs-demo-topline>span { font-size:12px; }
  .rs-demo-play { width:52px; height:52px; }
  .rs-demo-play svg { width:22px; height:22px; }
  .rs-demo-copy { padding:13px 14px; }
  .rs-demo-copy strong { font-size:12px; }
}

/* Official partner badge, in the hero kicker and the closing card. */
.rs-hero .rs-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; color:#9fb0d0; letter-spacing:.02em; }
.rs-home .rs-partner { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border:1px solid #3a4c74; border-radius:999px; background:#1a2850; color:#eef3ff; font-size:12px; font-weight:600; letter-spacing:0; }
.rs-home .rs-partner svg { width:14px; height:14px; color:#fff; }

/* Closing call to action after pricing. */
.rs-faq { padding:16px 0 88px; background:#edf2ff; }
/* site-chrome.js sets html[data-signed-in]; signed-in visitors get a way back into the workspace instead of demo/trial CTAs. */
html[data-signed-in="true"] .rs-home [data-guest-only],html:not([data-signed-in="true"]) .rs-home [data-member-only] { display:none!important; }
/* website.css styles #faq as a grey bordered band; the homepage FAQ continues the pricing tint. */
body.home-studio #faq.rs-faq { border-block:0; background:#edf2ff; color:var(--rs-ink); }
body.home-studio #faq.rs-faq h2 { color:var(--rs-ink); }
.rs-faq-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px 64px; align-items:start; }
.rs-faq-list { border-top:1px solid #d3dcf3; }
.rs-faq-item { border-bottom:1px solid #d3dcf3; }
.rs-faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:16px 0; color:var(--rs-ink); font-size:16px; font-weight:600; line-height:1.5; list-style:none; cursor:pointer; }
.rs-faq-item summary::-webkit-details-marker { display:none; }
.rs-faq-item summary::after,.rs-faq-item[open] summary::after { content:none; }
.rs-faq-item summary svg { width:18px; height:18px; color:var(--rs-muted); transition:transform .2s ease; }
.rs-faq-item[open] summary svg { transform:rotate(180deg); }
.rs-home .rs-faq-item p { max-width:680px; padding:0 40px 20px 0; font-size:14.5px; line-height:1.8; }
.rs-faq-item a { color:var(--rs-blue); }
@media (max-width:1023px) { .rs-faq-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  .rs-faq { padding:8px 0 56px; }
  .rs-faq-item summary { font-size:15px; }
  .rs-home .rs-faq-item p { padding-right:0; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .rs-faq-item summary svg { transition:none; } }
.rs-close { padding:0 0 88px; background:#edf2ff; }
.rs-close-card { position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px 56px; overflow:hidden; padding:52px 56px; border-radius:24px; isolation:isolate;
  background:radial-gradient(60% 120% at 0% 0%,rgba(0,199,255,.45),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(142,35,255,.55),transparent 62%),linear-gradient(120deg,#1c2d78,#2a3fd6 55%,#4b2bc4); }
.rs-close-card h2 { color:#fff!important; font-size:clamp(28px,2.8vw,38px); line-height:1.3; }
.rs-home .rs-close-card p:not(.rs-partner) { max-width:600px; margin-top:14px; color:#d9e2ff; font-size:14.5px; line-height:1.8; text-wrap:pretty; }
.rs-home .rs-close-partner { margin-bottom:18px; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); }
.rs-close-card .rs-actions { flex-shrink:0; margin-top:0; }
.rs-home .rs-btn-light { background:#fff; color:#1b2a6b; }
.rs-home .rs-btn-light:hover { background:#eef2ff; }
.rs-home .rs-btn-ghost { border-color:rgba(255,255,255,.45); color:#fff; }
.rs-home .rs-btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.rs-close-card .rs-btn:focus-visible { outline-color:#fff; }
@media (max-width:1000px) {
  .rs-close-card { flex-direction:column; align-items:flex-start; padding:40px 32px; }
}
@media (max-width:700px) {
  .rs-close { padding-bottom:48px; }
  .rs-close-card { padding:32px 22px; border-radius:18px; }
  .rs-home .rs-close-card p:not(.rs-partner) { font-size:13px; }
  .rs-close-card .rs-actions { width:100%; }
  .rs-close-card .rs-btn { flex:1; }
  .rs-partner { font-size:11px; }
  /* Four plans as a 2×2 grid, so they can be compared on one screen. */
  .rs-plans { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .rs-plan { padding:16px 14px 14px; }
  .rs-plan-top>h3 { font-size:17px; }
  .rs-plan-top>span { font-size:9px; padding:2px 5px; }
  .rs-home .rs-plan-tag { min-height:34px; font-size:11px; line-height:1.5; }
  .rs-home .rs-price { margin-top:10px; gap:3px; }
  .rs-price>strong { font-size:27px; }
  .rs-price>span { font-size:10px; }
  .rs-home .rs-annual { margin-top:5px; font-size:10px; }
  .rs-plan>ul { gap:6px; margin:12px 0 14px; padding-top:12px; }
  .rs-plan>ul>li { gap:5px; font-size:11px; line-height:1.5; }
  .rs-plan>ul>li>svg { width:13px; height:13px; }
  .rs-plan>.rs-btn { min-height:40px; padding-inline:6px; font-size:12px; gap:5px; }
  .rs-plan>.rs-btn svg { width:15px; height:15px; }
}