@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url("/fonts/archivo-narrow.woff2") format("woff2-variations");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --stock:#0B0B0C;
  --stock-2:#131316;
  --stock-3:#08080a;
  --edge:#26262b;
  --edge-soft:#1a1a1e;
  --ink:#EDE9E3;
  --ink-2:#9C978E;
  --ink-3:#66625C;
  --amber:#FF7A18;
  --amber-dim:#b25510;
  --disp:"Archivo Narrow","Archivo Narrow Fallback",Arial Narrow,system-ui,sans-serif;
  --text:"Archivo",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,4vw,64px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--stock);color:var(--ink);
  font-family:var(--text);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
code{font-family:var(--mono);font-size:.88em;color:var(--amber);background:rgba(255,122,24,.08);padding:.1em .35em}
s{color:var(--ink-3);text-decoration-thickness:1px}
::selection{background:var(--amber);color:var(--stock)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--amber);color:#000;padding:8px 14px}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
main>section{scroll-margin-top:76px}

/* ── sprocket strip ───────────────────────────────────────────────── */
.sprockets{
  height:16px;width:100%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 9px, var(--edge) 9px 20px, transparent 20px 29px) center/auto 7px no-repeat,
    var(--stock-3);
  border-top:1px solid var(--edge-soft);border-bottom:1px solid var(--edge-soft);
}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3,.disp{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;line-height:.98;margin:0;
}
h1{font-size:clamp(2.6rem,7.2vw,6.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.0}
h3{font-size:1.22rem;line-height:1.12}
.amber{color:var(--amber)}

.slate{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.15rem;overflow:hidden;
}
@media (max-width:520px){.slate{font-size:.64rem;letter-spacing:.12em}}
.slate::after{content:"";flex:1;height:1px;background:var(--edge);max-width:140px}

.lede,.section-lede{font-size:1.16rem;line-height:1.62;color:var(--ink-2)}
.section-lede{max-width:58ch;margin:1.2rem 0 0}
.section-head{max-width:62ch;padding-bottom:2.8rem}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding:.9em 1.4em;
  border:1px solid transparent;text-decoration:none;
  transition:background .14s,color .14s,border-color .14s;
}
.btn-primary{background:var(--amber);color:#120901;border-color:var(--amber)}
.btn-primary:hover{background:#ff9040;border-color:#ff9040}
.btn-ghost{border-color:var(--edge);color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-sm{padding:.62em 1em;font-size:.72rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}
.cta-sub{font-size:.85rem;color:var(--ink-3);margin:1rem 0 0}
.cta-sub a{color:var(--amber)}

/* ── masthead ─────────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:40;background:rgba(11,11,12,.95);border-bottom:1px solid var(--edge)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-width:0}
.mark{width:22px;height:22px;flex:none}
.brand-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em;white-space:nowrap}
.brand-by{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.masthead-nav{display:flex;align-items:center;gap:1.5rem}
.masthead-nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.masthead-nav a:hover{color:var(--amber)}
.masthead-nav .btn{color:#120901}
@media (max-width:960px){.brand-by,.masthead-nav a:not(.btn){display:none}}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.36fr) minmax(0,.64fr);
  grid-template-areas:"head frame" "body frame";grid-template-rows:auto 1fr;
  gap:0 clamp(2rem,5vw,4.5rem);align-items:start;
}
.hero-head{grid-area:head}
.hero-body{grid-area:body}
.hero-frame{grid-area:frame;margin:0;position:sticky;top:92px}
h1{margin-bottom:1.7rem}
.lede{max-width:50ch;margin:0}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:2.9rem 0 0;border-top:1px solid var(--edge)}
.specs div{padding:1rem 1.1rem 1rem 0;border-bottom:1px solid var(--edge)}
.specs dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.specs dd{margin:.35rem 0 0;font-family:var(--mono);font-size:.85rem;color:var(--ink)}

/* film frame around 9:16 video */
.gate{position:relative;padding:0 13px;background:var(--stock-3);border:1px solid var(--edge)}
.gate::before,.gate::after{
  content:"";position:absolute;top:0;bottom:0;width:13px;
  background:repeating-linear-gradient(180deg,transparent 0 9px,var(--edge) 9px 20px,transparent 20px 29px);
  background-size:6px auto;background-position:center;background-repeat:repeat-y;
}
.gate::before{left:0}
.gate::after{right:0}
.phone{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden}
.phone>video,.phone>img{width:100%;height:100%;object-fit:cover}
.hero-frame figcaption{font-family:var(--mono);font-size:.71rem;line-height:1.55;color:var(--ink-3);margin-top:.9rem;letter-spacing:.02em}
.hero-frame figcaption em{font-style:normal;color:var(--ink-2)}
.hero-frame figcaption a{color:var(--amber)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "frame" "body";grid-template-rows:auto}
  .hero-frame{position:static;max-width:330px;margin:.6rem 0 2.3rem}
  .lede{font-size:1.06rem}
}

/* ── render column ────────────────────────────────────────────────── */
.pipeline{padding:clamp(3.4rem,7vw,6rem) 0;background:var(--stock-2)}
.col-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.col-sticky{position:sticky;top:92px}
.stage-frame{max-width:326px}

.st{position:absolute;inset:0;padding:1.6rem 1.4rem 3.2rem;display:flex;flex-direction:column;
  justify-content:center;gap:1rem;opacity:0;visibility:hidden;transition:opacity .35s ease}
.st.is-on{opacity:1;visibility:visible}
.st>img,.st>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
.st-tag{position:absolute;left:1.4rem;bottom:1.15rem;z-index:2;font-family:var(--mono);
  font-size:.63rem;letter-spacing:.09em;color:var(--amber);background:rgba(0,0,0,.78);padding:.3rem .5rem}
.st-script{font-family:var(--mono);font-size:.86rem;line-height:1.7;color:var(--ink-2);margin:0}
.st-scenes{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.st-scenes li{font-family:var(--mono);font-size:.75rem;line-height:1.45;color:var(--ink-2);
  border-left:1px solid var(--edge);padding-left:.75rem}
.st-scenes b{display:block;color:var(--amber);font-size:.62rem;letter-spacing:.12em;margin-bottom:.18rem}
.st-cap{font-family:var(--disp);text-transform:uppercase;font-size:1.6rem;font-weight:700;
  line-height:1.1;text-align:center;margin:0;color:var(--ink-3)}
.st-cap .on{color:var(--amber)}
.wave{height:80px;background:repeating-linear-gradient(90deg,var(--amber) 0 2px,transparent 2px 7px);
  -webkit-mask-image:radial-gradient(ellipse 52% 100% at 50% 50%,#000 8%,transparent 78%);
  mask-image:radial-gradient(ellipse 52% 100% at 50% 50%,#000 8%,transparent 78%)}

.readout{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3)}
.readout .tc{color:var(--amber);font-weight:500}
.stage-meter{position:relative;height:3px;background:var(--edge);margin-top:.6rem}
.stage-meter-fill{position:absolute;left:0;top:0;height:100%;width:16.6%;background:var(--amber);transition:width .4s ease}

.stages{list-style:none;margin:0;padding:0}
.stage{display:grid;grid-template-columns:3.6rem 1fr;gap:0 1.3rem;padding:2.2rem 0;
  border-top:1px solid var(--edge);opacity:.38;transition:opacity .3s ease}
.stage:last-child{border-bottom:1px solid var(--edge)}
.stage.is-on{opacity:1}
.stage-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber);padding-top:.3rem}
.stage p{font-size:1.04rem;line-height:1.6;color:var(--ink-2);margin:.6rem 0 0;grid-column:2;max-width:54ch}

@media (max-width:900px){
  .col-grid{grid-template-columns:1fr}
  .col-sticky{position:static;margin-bottom:2.5rem}
  .stage-frame{max-width:300px}
  .stage{opacity:1;grid-template-columns:2.8rem 1fr}
}

/* ── contact sheet ────────────────────────────────────────────────── */
.reels{padding:clamp(3.4rem,7vw,6rem) 0}
.sheet{
  border:1px solid var(--edge);background:var(--stock-3);
  padding:clamp(.9rem,1.8vw,1.5rem);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);list-style:none;margin:0;
}
@media (min-width:960px){.sheet{grid-template-columns:repeat(4,1fr)}}
.cell{position:relative}
.cell-media{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;border:1px solid var(--edge-soft)}
.cell-media img,.cell-media video{width:100%;height:100%;object-fit:cover}
.cell-no{
  position:absolute;top:.45rem;left:.5rem;z-index:2;font-family:var(--mono);font-weight:500;
  font-size:.68rem;letter-spacing:.1em;color:var(--amber);background:rgba(0,0,0,.6);padding:.15rem .38rem;
}
.cell-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.78) 100%);
  display:flex;align-items:flex-end;justify-content:space-between;padding:.7rem;
  color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.cell-play:hover{background:linear-gradient(180deg,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%)}
.cell-play .pl{display:flex;align-items:center;gap:.4rem;font-weight:500;color:var(--amber)}
.cell-play .pl::before{content:"";width:0;height:0;border-left:8px solid var(--amber);
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.cell-sound{position:absolute;right:.5rem;bottom:.5rem;z-index:3;background:rgba(0,0,0,.8);
  color:var(--ink);border:1px solid var(--edge);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.32rem .5rem;cursor:pointer}
.cell-sound:hover{border-color:var(--amber);color:var(--amber)}
.cell h3{margin:.75rem 0 0;font-size:.94rem;line-height:1.15}
.cell-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-3);margin:.4rem 0 0}
.cell-link{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--amber);display:inline-block;margin-top:.45rem}
.cell-more{display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  border:1px dashed var(--edge);padding:1.3rem}
.cell-more p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.cell-more a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--amber)}
.edge-code{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.28em;color:var(--ink-3);
  margin-top:.8rem;text-transform:uppercase;
}

/* ── walkthrough (youtube) ────────────────────────────────────────── */
.walk{padding:clamp(3.4rem,7vw,6rem) 0;background:var(--stock-2)}
.reel-strip{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media (min-width:900px){.reel-strip{grid-template-columns:repeat(3,1fr)}}
.clip{background:var(--stock);padding:0}
.clip-shot{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer;
  border:0;padding:0;width:100%;display:block}
.clip-shot img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.clip-shot:hover img{transform:scale(1.02)}
.clip-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.35) 0 22%,transparent 45%);pointer-events:none}
.clip-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-badge{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.1em;color:#120901;background:var(--amber);padding:.2rem .45rem}
.clip-tri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:19px solid var(--ink);border-top:12px solid transparent;
  border-bottom:12px solid transparent;filter:drop-shadow(0 0 10px rgba(0,0,0,.7))}
.clip-shot:hover .clip-tri{border-left-color:var(--amber)}
.clip-body{padding:.85rem 1rem 1.1rem}
.clip-body h3{font-size:.95rem;line-height:1.15}
.clip-body p{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;color:var(--ink-3);margin:.4rem 0 0}

/* ── app shot ─────────────────────────────────────────────────────── */
.app{padding:clamp(3.4rem,7vw,6rem) 0}
.app-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.app-text p{font-size:1.06rem;line-height:1.62;color:var(--ink-2);max-width:50ch}
.app-text h2{margin-bottom:1.4rem}
.app-shot{margin:0}
.app-shot img{border:1px solid var(--edge);width:100%;height:auto}
.app-shot figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);margin-top:.75rem}
@media (max-width:900px){.app-grid{grid-template-columns:1fr}}

/* ── limits ───────────────────────────────────────────────────────── */
.limits{padding:clamp(3.4rem,7vw,6rem) 0;background:var(--stock-2)}
.limit-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.limit-list li{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:1.5rem;
  padding:1.8rem 0;border-bottom:1px solid var(--edge)}
.limit-list h3{color:var(--amber)}
.limit-list p{font-size:1.03rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:58ch}
@media (max-width:780px){.limit-list li{grid-template-columns:1fr;gap:.6rem}}

/* ── quote ────────────────────────────────────────────────────────── */
.quote-band{padding:clamp(3.4rem,7vw,5.5rem) 0}
.quote-band blockquote{margin:0;max-width:68ch;border-left:3px solid var(--amber);padding-left:clamp(1.2rem,3vw,2.2rem)}
.quote-band p{font-size:clamp(1.15rem,2.2vw,1.48rem);line-height:1.5;color:var(--ink);margin:0}
.quote-band footer{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:baseline}
.q-name{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.05rem}
.q-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ── price ────────────────────────────────────────────────────────── */
.price{padding:clamp(3.4rem,7vw,6rem) 0;background:var(--stock-2)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.tier{background:var(--stock);padding:1.7rem 1.5rem 1.8rem;display:flex;flex-direction:column}
.tier-mark{background:var(--stock-3);border-top:3px solid var(--amber)}
.tier h3{font-size:1.06rem}
.tier-price{font-family:var(--disp);font-size:2.6rem;font-weight:700;margin:.6rem 0 .95rem;line-height:1}
.tier-price s{font-family:var(--mono);font-size:.82rem;font-weight:400;margin-left:.5rem}
.tier-what{font-size:.99rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.6rem;flex:1}
.tier .btn{align-self:flex-start}
.refund{font-size:1rem;color:var(--ink-2);max-width:62ch;margin:2.1rem 0 0}

/* ── faq ──────────────────────────────────────────────────────────── */
.faq{padding:clamp(3.4rem,7vw,6rem) 0}
.faq-list{margin:0;border-top:1px solid var(--edge)}
.faq-list>div{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:1.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--edge)}
.faq-list dt{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.02rem;line-height:1.15}
.faq-list dd{font-size:1.02rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:58ch}
@media (max-width:780px){.faq-list>div{grid-template-columns:1fr;gap:.55rem}}

/* ── close + footer ───────────────────────────────────────────────── */
.close{padding:clamp(3.6rem,8vw,6.5rem) 0;background:var(--stock-2)}
.close-in{border-left:3px solid var(--amber);padding-left:clamp(1.2rem,3vw,2.2rem)}
.close h2{max-width:16ch}
.foot{border-top:1px solid var(--edge);padding:1.9rem 0}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.07em;color:var(--ink-3);margin:0}
.foot-brand .mark{width:18px;height:18px}
.foot-nav{display:flex;gap:1.4rem}
.foot-nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none}
.foot-nav a:hover{color:var(--amber)}

@media (prefers-reduced-motion:reduce){.st,.stage,.stage-meter-fill{transition:none}}