/* VideoSpark landing page. Tokens follow VidFarm's reskin theme (src/reskin/theme.ts). */
:root{
  --ink:#171717;--n-800:#262626;--n-700:#404040;--n-600:#525252;--n-500:#737373;--n-300:#d4d4d4;--n-200:#ededed;--n-100:#f5f5f5;--n-50:#fbfbfb;--white:#fff;
  --gold:#ffc738;--gold-hover:#f0c44a;--gold-700:#a16207;--gold-tint:#fff5e4;--gold-tint2:#ffedc8;
  --display:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;--serif:"Instrument Serif",Georgia,serif;
  --r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-full:999px;
  --shadow-card:0 1px 2px #0000000d,0 12px 32px -16px #0000001f;--shadow-lift:0 2px 4px #0000000f,0 32px 64px -32px #00000040;
  --ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(16px,4vw,40px);--sec-y:clamp(72px,10vw,144px);
  /* z-index scale */
  --z-stage:0;--z-content:1;--z-nav:40;--z-skip:50;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--n-50);color:var(--n-700);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-64px;z-index:var(--z-skip);padding:10px 16px;background:var(--ink);color:var(--white);border-radius:var(--r-lg)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.03em}
h1{font-weight:800;font-size:clamp(46px,7.4vw,104px);line-height:.98;letter-spacing:-.045em}
h2{font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1.03;letter-spacing:-.04em}
h3{font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.015em}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.display{font-size:clamp(40px,6.4vw,88px)}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--n-600)}
.eyebrow{font:700 12.5px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-500);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow .num{display:inline-grid;place-items:center;height:24px;min-width:32px;padding-inline:8px;background:var(--gold);color:var(--ink);border-radius:var(--r-full);font-size:11.5px;letter-spacing:.02em}
.eyebrow-gold{color:var(--gold)}
.fine{font-size:13px;color:var(--n-500);margin-top:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r-full);font:700 15.5px/1 var(--display);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s,border-color .2s;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 24px -10px #e0a80099}
.btn-gold:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--n-800);transform:translateY(-1px)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--n-300)}
.btn-ghost:hover{border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);transition:background-color .25s,box-shadow .25s}
.nav[data-solid="true"]{background:rgba(255,255,255,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--n-200)}
.nav-in{max-width:1200px;margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:800 19px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.brand-mark{width:32px;height:32px}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:10px 14px;border-radius:var(--r-full);font-size:14.5px;font-weight:500;text-decoration:none;color:var(--n-600);transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--ink);background:var(--n-100)}
@media(max-width:940px){.nav-links{display:none}}

/* The 3-D story. Chapters take up normal flow; the sticky stage sits behind them. */
.story{position:relative;background:radial-gradient(1200px 700px at 78% 8%,var(--gold-tint) 0%,transparent 70%),linear-gradient(180deg,var(--n-50),var(--n-50))}
.stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:var(--z-stage);pointer-events:none;overflow:hidden;background:radial-gradient(760px 620px at 76% 48%,var(--gold-tint2) 0%,transparent 72%)}
.stage canvas{width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.stage canvas[data-ready]{opacity:1}
.ch{position:relative;z-index:var(--z-content);min-height:125svh;display:flex;flex-direction:column;justify-content:center;padding-block:96px}
.ch .wrap{width:100%}
.ch-hero{min-height:112svh;justify-content:flex-start;padding-top:clamp(120px,19vh,190px)}
.ch-hero .wrap>*{max-width:640px}
.ch-hero .lede{margin-top:24px;max-width:520px}
.hero-logos{display:flex;flex-wrap:wrap;gap:20px;margin-top:40px;font:600 14px/1 var(--display);color:var(--n-600)}
.hero-logos li{display:flex;align-items:center;gap:8px}
.hero-logos img{border-radius:6px;object-fit:contain}
.ch-card>*{max-width:460px}
.ch-card h2{font-size:clamp(30px,3.6vw,46px)}
.ch-card>p:not(.eyebrow){margin-top:18px;color:var(--n-600);font-size:17px}
.ch-card .ticks{margin-top:22px}
.ch-center{text-align:center;display:flex;flex-direction:column;align-items:center}
.ch-center .eyebrow{justify-content:center}
.ch-center .lede{max-width:600px;margin-top:22px}
.ch-center .cta-row{justify-content:center}
.ch-end{min-height:150svh;justify-content:flex-start;padding-top:18svh}
.ch-fallback{display:none}
.no-3d .stage{display:none}
.no-3d .ch{min-height:0;padding-block:64px}
.no-3d .ch-end{padding-top:64px}
.no-3d .ch-fallback{display:block;width:min(100% - 2*var(--gutter),960px);margin:32px auto 0;border-radius:var(--r-xl);box-shadow:var(--shadow-lift)}

@media(max-width:820px){
  /* Phones: screens at the top of the stage, copy in a card below them. */
  .ch{min-height:130svh;justify-content:flex-end;padding-block:0 12svh}
  .ch-hero{min-height:118svh;justify-content:flex-start;padding-top:96px}
  .ch-hero .lede{margin-top:16px}
  .hero-logos{display:none}
  .ch-card{background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:22px;margin-inline:var(--gutter);width:auto!important;border-radius:var(--r-2xl);box-shadow:var(--shadow-card)}
  .ch-card>*{max-width:none}
  .ch-card>p:not(.eyebrow){font-size:16px;margin-top:12px}
  .ch-card .ticks{margin-top:14px}
  .ch-end{min-height:130svh;justify-content:flex-start;padding-top:9svh}
}

.ticks{display:grid;gap:10px;font-size:15px;color:var(--n-700)}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:var(--gold-tint2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a16207' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 8.500 2.500 2.500 4.500-5.500'/%3E%3C/svg%3E") center/100% no-repeat}
.ticks-gold{color:#e5e5e5}
.ticks-gold li::before{background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 8.500 2.500 2.500 4.500-5.500'/%3E%3C/svg%3E")}

.band{position:relative;z-index:var(--z-content);padding-block:22px;background:var(--ink);overflow:hidden}
.marquee-in{display:flex;width:max-content;gap:48px;animation:slide 44s linear infinite}
.marquee-in span{font:700 clamp(18px,2vw,24px)/1 var(--display);letter-spacing:-.02em;color:var(--white);white-space:nowrap}
.marquee-in span:nth-child(3n+1){color:var(--gold)}
@keyframes slide{to{transform:translateX(calc(-50% - 24px))}}

.sec{position:relative;z-index:var(--z-content);padding-block:var(--sec-y);background:var(--n-50)}
.sec-tint{background:linear-gradient(180deg,var(--white),var(--gold-tint) 130%)}
.sec-ink{background:var(--ink);color:#d4d4d4}
.sec-ink h2,.sec-ink h3{color:var(--white)}
.sec-ink .lede{color:#a3a3a3}
.two{display:grid;gap:40px}
.two .lede+p{margin-top:18px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:72px}}

.quotes{display:grid;gap:16px;margin-top:64px}
@media(min-width:900px){.quotes{grid-template-columns:1.1fr 1.1fr .8fr}}
.quote{padding:28px;background:var(--white);border:1px solid var(--n-200);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.quote blockquote{font:600 clamp(18px,1.700vw,21px)/1.35 var(--display);letter-spacing:-.015em;color:var(--ink)}
.quote figcaption{font-size:13.5px;color:var(--n-500)}
.quote-gold{background:var(--gold);border-color:var(--gold)}
.quote-gold blockquote{font-size:clamp(26px,2.800vw,36px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.quote-gold figcaption{color:#5c3c00}

.svc-grid{display:grid;gap:16px;margin-top:56px}
@media(min-width:720px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-wide{grid-column:1/-1}}
.svc{padding:28px;background:var(--white);border:1px solid var(--n-200);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.svc h3{margin-top:18px;font-size:22px}
.svc>p,.svc-text>p{margin:8px 0 18px;color:var(--n-600)}
.svc-logo{width:28px;height:28px;object-fit:contain;border-radius:7px}
.svc-ico{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.700;stroke-linecap:round;stroke-linejoin:round}
.svc-cta{background:var(--gold);border-color:var(--gold);display:flex;flex-direction:column;align-items:flex-start}
.svc-cta h3{margin-top:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.svc-cta p{color:#3f2d00;margin-bottom:auto;padding-bottom:20px}
.svc-wide{display:grid;gap:28px;grid-column:1/-1;padding:clamp(24px,3vw,40px);overflow:hidden}
@media(min-width:900px){.svc-wide{grid-template-columns:.8fr 1.2fr;align-items:center}}
.shot{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--n-200);background:var(--white);box-shadow:var(--shadow-card)}
.shot img{width:100%}
.shot figcaption{padding:12px 16px;font-size:13.5px;color:var(--n-600);border-top:1px solid var(--n-200)}

.combo-lede{margin-top:20px}
.combo{display:grid;gap:20px;margin-top:40px}
@media(min-width:900px){.combo{grid-template-columns:.75fr 1.25fr;gap:32px;align-items:stretch}}
.combo-picks{display:grid;gap:12px;align-content:start}
.pick{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:14px 18px;border-radius:var(--r-xl);border:1.500px solid var(--n-200);background:var(--white);cursor:pointer;text-align:left;font:inherit;color:var(--n-500);transition:border-color .2s,background-color .2s,color .2s,transform .2s var(--ease);touch-action:manipulation}
.pick:hover{border-color:var(--n-300)}
.pick:active{transform:scale(.985)}
.pick img{width:24px;height:24px;object-fit:contain;border-radius:6px;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.pick span{display:grid;flex:1}
.pick b{font:700 17px/1.2 var(--display);letter-spacing:-.015em}
.pick small{font-size:13px}
.pick::after{content:"";width:22px;height:22px;border-radius:50%;border:1.500px solid var(--n-300);flex:none;transition:background-color .2s,border-color .2s}
.pick[aria-pressed="true"]{border-color:var(--ink);background:var(--gold-tint);color:var(--ink)}
.pick[aria-pressed="true"] img{filter:none;opacity:1}
.pick[aria-pressed="true"]::after{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171717' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 8.500 2.500 2.500 4.500-5.500'/%3E%3C/svg%3E") center/70% no-repeat;border-color:var(--gold)}
.combo-out{padding:clamp(24px,3vw,40px);background:var(--white);border:1px solid var(--n-200);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);min-height:400px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.combo-out h3{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em}
.combo-out .ticks{margin-bottom:auto;padding-bottom:18px}
.combo-tag{font:700 12px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--gold-700)}
.combo-out>*{animation:swap .35s var(--ease) both}
.combo-out[data-empty="true"] .btn{display:none}
@keyframes swap{from{opacity:0;transform:translateY(6px)}}

.method-lede,.stack-lede{max-width:640px;margin-top:20px}
.timeline{display:grid;gap:0;margin-top:56px;counter-reset:s}
@media(min-width:900px){.timeline{grid-template-columns:repeat(4,1fr)}}
.timeline li{padding:24px 24px 24px 0;border-top:1px solid #404040;position:relative}
.timeline li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.when{font:700 12.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.timeline h3{margin:14px 0 8px}
.timeline p{font-size:15px;color:#a3a3a3}

.tabs{margin-top:40px}
.tab-list{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;background:var(--n-100);border-radius:var(--r-full)}
.tab-list button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;background:transparent;border-radius:var(--r-full);font:700 15px/1 var(--display);color:var(--n-600);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.tab-list img{width:20px;height:20px;object-fit:contain;border-radius:5px}
.tab-list button[aria-selected="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px #0000001f}
.tab-panel{margin-top:24px;animation:swap .4s var(--ease) both}
.bento{display:grid;gap:16px}
@media(min-width:900px){.bento{grid-template-columns:1.5fr 1fr}.bento-a{grid-row:span 2}.bento-a img{height:calc(100% - 46px);object-fit:cover;object-position:top left}}

.demo{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.demo{grid-template-columns:minmax(0,360px) 1fr;gap:88px}}
.demo-phone{max-width:340px;margin-inline:auto;padding:10px;background:var(--ink);border-radius:36px;box-shadow:var(--shadow-lift)}
.demo-phone video{width:100%;aspect-ratio:9/16;border-radius:27px;background:#000}
.demo .lede{margin-top:20px}.demo .lede+p{margin-top:14px}

.wont{display:grid;gap:0}
.wont li{padding:22px 0;border-top:1px solid var(--n-200)}
.wont li:last-child{border-bottom:1px solid var(--n-200)}
.wont p{margin-top:6px;color:var(--n-600)}
.founder{margin-top:36px;padding:20px 22px;background:var(--gold-tint);border-radius:var(--r-xl);max-width:440px}
.founder-name{font:800 18px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.founder-role{margin-top:6px;font-size:14.5px;color:var(--n-700)}

.plans{display:grid;gap:16px;margin-top:56px}
@media(min-width:900px){.plans{grid-template-columns:1fr 1fr}}
.plan{padding:clamp(24px,3vw,40px);background:var(--white);border:1px solid var(--n-200);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.plan h3{font-size:30px;font-weight:800;letter-spacing:-.03em}
.plan-kind{font:700 12px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--gold-700)}
.plan-rows{align-self:stretch;margin-top:10px}
.plan-rows li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding:14px 0;border-top:1px solid var(--n-200)}
.plan-rows span{display:flex;align-items:center;gap:10px;font:700 16px/1 var(--display);color:var(--ink)}
.plan-rows img{width:20px;height:20px;object-fit:contain;border-radius:5px}
.plan-rows a{font-size:14.5px;font-weight:500;text-underline-offset:3px}
.plan-ink{background:var(--ink);border-color:var(--ink);color:#d4d4d4}
.plan-ink h3{color:var(--white)}
.plan-ink .plan-kind{color:var(--gold)}
.plan-ink .ticks{margin:10px 0 20px}

.faq-wrap{display:grid;gap:40px}
@media(min-width:900px){.faq-wrap{grid-template-columns:.8fr 1.2fr;gap:72px}}
.faq details{border-top:1px solid var(--n-200)}
.faq details:last-child{border-bottom:1px solid var(--n-200)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;font:700 17.5px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--display);color:var(--n-500);transition:transform .25s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 32px 20px 0;color:var(--n-600)}

.final{position:relative;z-index:var(--z-content);padding-block:clamp(96px,14vw,200px);background:radial-gradient(900px 500px at 50% 110%,var(--gold-tint2),transparent 70%),var(--white);border-top:1px solid var(--n-200)}
.foot{background:var(--white);border-top:1px solid var(--n-200);padding-block:36px;font-size:14px;color:var(--n-600)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.foot-brand{font:800 17px/1 var(--display);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.foot a{text-underline-offset:3px;padding-block:6px}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-in{animation:none;flex-wrap:wrap;width:auto;gap:16px 32px;justify-content:center;padding-inline:var(--gutter)}
  .marquee-in span:nth-child(n+10){display:none}
  .btn,.svc,.pick,.combo-out>*,.tab-panel{transition:none;animation:none}
}