@font-face{font-family:'Anybody';font-style:normal;font-weight:900;font-display:swap;src:url(../assets/fonts/anybody-900.woff2) format('woff2')}
@font-face{font-family:'Anybody';font-style:italic;font-weight:900;font-display:swap;src:url(../assets/fonts/anybody-italic-900.woff2) format('woff2')}
@font-face{font-family:'Anybody';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/anybody-italic-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 500;font-display:swap;src:url(../assets/fonts/archivo-400.woff2) format('woff2')}

:root{
  /* colour — cinematic studio: near-black base, electric violet, faint signal glow, camera-red REC */
  --bg:#07070a; --bg-2:#0b0b10; --surface-1:#111117; --surface-2:#16161d;
  --text:#f4f2ee; --text-mute:#9a9aa6; --text-dim:#63636e;
  --accent:#7c3aed; --accent-hi:#9b6bff; --accent-lo:#5b21b6; --signal:#c8b6ff;
  --live:#ff2d55;
  --hairline:rgba(255,255,255,.09); --hairline-hi:rgba(255,255,255,.20);
  --violet-glow:rgba(124,58,237,.55);

  /* type — Anybody (expressive display) · Archivo (body + the mono/timecode voice) */
  --font-display:'Anybody',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'Archivo',ui-monospace,'SF Mono',Menlo,monospace;
  --ls-display:-.025em; --ls-body:0; --ls-mono:.14em;
  --step--1:clamp(.78rem,.75rem + .13vw,.86rem);
  --step-0:clamp(1rem,.97rem + .13vw,1.13rem);
  --step-1:clamp(1.13rem,1.05rem + .32vw,1.41rem);
  --step-2:clamp(1.31rem,1.15rem + .65vw,1.8rem);
  --step-3:clamp(1.55rem,1.20rem + 1.30vw,2.4rem);
  --step-4:clamp(1.75rem,1.20rem + 1.95vw,3rem);
  --step-5:clamp(2rem,1.10rem + 3.1vw,4.3rem);
  --step-6:clamp(2.6rem,1.1rem + 5.6vw,5.6rem);

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --gap:1.1rem;
  --sec-pad:clamp(5.5rem,13vh,9rem);
  --radius:14px; --radius-sm:8px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-micro:160ms; --dur-ui:320ms; --dur-reveal:820ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:400;font-size:var(--step-0);line-height:1.62;letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
h1,h2,h3,.beat-h,.tier-name{font-family:var(--font-display);font-weight:900;font-stretch:78%;
  text-transform:uppercase;line-height:.86;letter-spacing:var(--ls-display);margin-left:-.03em}
em{font-family:var(--font-display);font-style:italic;font-stretch:74%;font-weight:inherit;
  color:var(--signal)}
.rise-i{font-style:normal}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:2px}
section[id]{scroll-margin-top:5rem}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* shared mono voice */
.eyebrow,.nav a,.chip,.hud-rec,.hud-tc,.ba-index,.gal-count,.fromcap,
.beat-n,.tier-tag,.tier-amt,.tier-per,.pricing-fine,.foot-chapters a,.ticker,.dock-label,
.drawer-kicker,.hero-stats dt,.hero-stats dd,.boot-mark,.boot-tc,.boot-cap{
  font-family:var(--font-mono)}

.skip{position:fixed;top:.7rem;left:.7rem;z-index:400;background:var(--surface-1);color:var(--text);
  padding:.8rem 1.1rem;border:1px solid var(--hairline-hi);border-radius:8px;font-size:var(--step--1);
  transform:translateY(-250%)}
.skip:focus-visible{transform:none}

/* ============ atmosphere — grain + violet mesh + progress + cursor ============ */
.grain{position:fixed;inset:-60%;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}20%{transform:translate(-8%,2%)}
  30%{transform:translate(4%,-6%)}40%{transform:translate(-2%,6%)}50%{transform:translate(-9%,-2%)}
  60%{transform:translate(6%,3%)}70%{transform:translate(-4%,8%)}80%{transform:translate(3%,-3%)}
  90%{transform:translate(-6%,-6%)}100%{transform:translate(0,0)}}
/* one slow-breathing violet mesh — atmosphere, never flat void */
.mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 6%,rgba(124,58,237,.16),transparent 70%),
    radial-gradient(50% 45% at 8% 42%,rgba(91,33,182,.12),transparent 70%),
    radial-gradient(55% 40% at 60% 100%,rgba(155,107,255,.08),transparent 70%);
  animation:meshshift 22s ease-in-out infinite alternate}
@keyframes meshshift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2%,0) scale(1.06)}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi),var(--signal));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}

.cursor{position:fixed;top:0;left:0;z-index:300;pointer-events:none;transform:translate(-50%,-50%);
  width:34px;height:34px;border:1px solid var(--hairline-hi);border-radius:50%;opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s ease,border-color .3s ease,background .3s ease}
.cursor .cursor-dot{position:absolute;inset:0;margin:auto;width:5px;height:5px;border-radius:50%;background:var(--text)}
.cursor.on{opacity:1}
.cursor.big{width:66px;height:66px;border-color:var(--accent-hi);background:rgba(124,58,237,.10)}
.cursor.big .cursor-dot{opacity:0}
@media (hover:hover) and (pointer:fine){:root{cursor:none} a,button,summary,.gal-track{cursor:none}}
@media (hover:none){.cursor{display:none}}

/* film-frame corner ticks — the viewfinder motif, reused on every media frame */
.frame-c{position:absolute;width:14px;height:14px;z-index:3;pointer-events:none;opacity:.5;
  border-color:var(--signal);transition:opacity var(--dur-ui) var(--ease)}
.frame-c.tl{top:8px;left:8px;border-top:1.5px solid;border-left:1.5px solid}
.frame-c.tr{top:8px;right:8px;border-top:1.5px solid;border-right:1.5px solid}
.frame-c.bl{bottom:8px;left:8px;border-bottom:1.5px solid;border-left:1.5px solid}
.frame-c.br{bottom:8px;right:8px;border-bottom:1.5px solid;border-right:1.5px solid}

/* ============ header ============ */
.site-head{position:sticky;top:0;z-index:60;
  transition:transform var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.site-head::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;transition:border-color var(--dur-ui) var(--ease);pointer-events:none}
.site-head.scrolled{background:rgba(7,7,10,.72);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.site-head.scrolled::after{border-bottom-color:var(--hairline)}
.site-head.head-hidden{transform:translateY(-100%)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);height:60px}
.brand{display:inline-flex;align-items:center;min-height:44px;gap:.6rem;font-size:1.08rem;letter-spacing:-.01em;color:var(--text)}
.brand svg{height:21px;width:auto;flex:none;color:var(--accent-hi);filter:drop-shadow(0 0 8px rgba(124,58,237,.6))}
.brand b{font-weight:500;color:var(--signal)}
.nav{display:none}
.nav a{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-mute);transition:color var(--dur-micro) var(--ease)}
.nav a b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--text-dim);
  transition:color var(--dur-micro) var(--ease)}
.nav a.active{color:var(--text)}
.nav a.active b{color:var(--accent-hi)}
.nav-cta{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:var(--step--1);color:var(--text);
  padding:.55rem 1.15rem;border:1px solid var(--hairline-hi);border-radius:999px;overflow:hidden;
  transition:border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}

/* ============ POP-UP SIDE — dock rail + drawer ============ */
.dock{position:fixed;right:0;top:50%;z-index:70;transform:translateY(-50%);
  display:none;align-items:center;gap:.6rem;
  padding:.85rem 1.05rem;border:1px solid var(--hairline-hi);border-right:none;
  border-radius:12px 0 0 12px;background:rgba(17,17,23,.7);color:var(--text);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  writing-mode:vertical-rl;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
  transition:transform var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.dock-dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,45,85,.6);
  animation:recpulse 2s ease-out infinite;writing-mode:horizontal-tb}
.dock-arrow{writing-mode:horizontal-tb;color:var(--accent-hi);transform:rotate(-90deg);transition:transform var(--dur-ui) var(--ease)}
.dock-arrow svg{width:15px;height:15px}
.dock.hide{transform:translateY(-50%) translateX(110%)}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,45,85,.55)}70%{box-shadow:0 0 0 9px rgba(255,45,85,0)}100%{box-shadow:0 0 0 0 rgba(255,45,85,0)}}

.drawer-scrim{position:fixed;inset:0;z-index:190;background:rgba(4,4,6,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity var(--dur-ui) var(--ease)}
.drawer-scrim.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(440px,92vw);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));border-left:1px solid var(--hairline-hi);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform var(--dur-ui) var(--ease);overflow-y:auto}
.drawer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 40% at 100% 0,rgba(124,58,237,.18),transparent 70%)}
.drawer.show{transform:none}
.drawer-inner{position:relative;padding:clamp(1.6rem,4vw,2.4rem)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.drawer-kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.16em;color:var(--text-mute)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 0 rgba(255,45,85,.6);animation:recpulse 2s ease-out infinite}
.drawer-x{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--hairline);color:var(--text-mute);transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.drawer-x svg{width:16px;height:16px}
.drawer-x:hover{color:var(--text);border-color:var(--hairline-hi)}
.drawer-title{font-size:var(--step-4);margin-bottom:1rem}
.drawer-sub{color:var(--text-mute);font-size:var(--step-0);max-width:36ch;margin-bottom:1.8rem}
.drawer-steps{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:2rem}
.drawer-steps li{display:flex;gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--hairline);
  color:var(--text);font-size:var(--step-0)}
.drawer-steps li:last-child{border-bottom:1px solid var(--hairline)}
.drawer-steps li span{font-family:var(--font-mono);font-size:var(--step--1);color:var(--accent-hi);
  letter-spacing:var(--ls-mono);flex:none}
.drawer-cta{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem}
.drawer-cta .btn{width:100%}
.drawer-fine{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;color:var(--text-dim);text-align:center}

/* ============ buttons ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;
  font-size:var(--step-0);line-height:1;padding:.9rem 1.6rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;overflow:hidden;
  transition:transform var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
.btn svg{width:15px;height:15px;transition:transform var(--dur-ui) var(--ease)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 30px -8px rgba(124,58,237,.7)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--hairline-hi);color:var(--text);background:rgba(255,255,255,.02)}

/* ============ hero ============ */
.hero{position:relative;padding-top:1.6rem;padding-bottom:0;overflow:hidden}
.hero-glow{position:absolute;top:20%;right:-30%;width:82vw;height:82vw;max-width:520px;max-height:520px;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 62%);filter:blur(18px);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;padding-block:clamp(2rem,5vh,3.5rem) clamp(2.5rem,5vh,3.5rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--text-mute);margin-bottom:1.4rem}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-hi);flex:none;
  box-shadow:0 0 8px var(--accent-hi)}
.hero h1{font-size:var(--step-6);overflow-wrap:break-word}
.hl{display:block}.hl-i{display:block}
.has-anim .hl-i{transform:translateY(28px);animation:hlrise .8s var(--ease) forwards}
.has-anim .hl:nth-child(1) .hl-i{animation-delay:.52s}
.has-anim .hl:nth-child(2) .hl-i{animation-delay:.62s}
.has-anim .hl:nth-child(3) .hl-i{animation-delay:.72s}
@keyframes hlrise{to{transform:translateY(0)}}
.hero .sub{font-size:var(--step-1);color:var(--text-mute);max-width:46ch;margin-top:1.4rem;line-height:1.5}
.cta-row{display:flex;gap:.8rem;margin-top:1.9rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(1.5rem,5vw,3rem);margin-top:2.4rem;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;gap:.25rem}
.hero-stats dt{font-family:var(--font-display);font-weight:900;font-stretch:78%;font-size:var(--step-3);
  color:var(--text);letter-spacing:-.02em;line-height:1}
.hero-stats dd{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}

@keyframes reveal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.has-anim .reveal{opacity:0;animation:reveal-in var(--dur-reveal) var(--ease) forwards}

/* live monitor wrapper */
.monitor{position:relative;margin-top:2rem;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--surface-1);padding:10px;overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8),inset 0 0 60px rgba(124,58,237,.05)}
.monitor-hud{display:flex;align-items:center;justify-content:space-between;padding:.35rem .55rem .7rem}
.hud-rec{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute)}
.hud-tc{font-size:.66rem;letter-spacing:.14em;color:var(--accent-hi);font-variant-numeric:tabular-nums}

/* ============ hero marquee ============ */
.marquee{position:relative;overflow:hidden;border-radius:var(--radius-sm)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--surface-1),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--surface-1),transparent)}
.mq-rtrack{display:flex;width:max-content;will-change:transform;animation:drift-x var(--durx,54s) linear infinite}
.mq-rtrack .tile{flex:none;width:132px;margin-right:.7rem}
@keyframes drift-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq-col{overflow:hidden}
.mq-track{display:flex;flex-direction:column;will-change:transform;animation:drift var(--dur,70s) linear infinite}
.mq-track .tile{margin-bottom:var(--gap)}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.mq-static{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);grid-column:1/-1;width:100%}

.tile{position:relative;aspect-ratio:9/16;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--hairline);background:var(--surface-2)}
.tile img,.tile video{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;top:.5rem;left:.5rem;z-index:2;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);
  background:rgba(7,7,10,.62);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.24rem .5rem;border-radius:6px}

/* ============ ticker ============ */
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:clamp(2rem,5vh,3rem);padding:.85rem 0;background:rgba(11,11,16,.5)}
.ticker-track{display:flex;align-items:center;gap:1.6rem;width:max-content;will-change:transform;
  animation:drift-x 46s linear infinite}
.ticker span{font-size:var(--step-2);font-family:var(--font-display);font-weight:900;font-stretch:78%;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--text-dim);line-height:1}
.ticker i{color:var(--accent-hi);font-style:normal;font-size:.9rem}

/* ============ section heads ============ */
.sec-head{max-width:46rem}
.sec-head .eyebrow{margin-bottom:1.4rem}
.sec-head h2{font-size:var(--step-5);text-wrap:balance;max-width:16ch}
.sec-head .lede{font-size:var(--step-1);color:var(--text-mute);margin-top:1.5rem;max-width:54ch;line-height:1.5}

/* ============ PROOF gallery ============ */
.work{padding-block:var(--sec-pad)}
.gal{margin-top:clamp(2rem,5vh,3.25rem)}
.gal-track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.25rem}
.gal-track::-webkit-scrollbar{display:none}
.gslide{flex:0 0 auto;width:calc(100% - 2.6rem);scroll-snap-align:start}
.gal-ui{display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem}
.gal-count{font-size:var(--step--1);letter-spacing:var(--ls-mono);color:var(--text-mute);font-variant-numeric:tabular-nums}
.gal-arrows{display:none;gap:.55rem}
.gal-btn{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:999px;
  border:1px solid var(--hairline);background:transparent;color:var(--text);cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),opacity var(--dur-micro) var(--ease)}
.gal-btn svg{width:16px;height:16px}
.gal-btn[disabled]{opacity:.3;pointer-events:none}
.pair{display:flex;flex-direction:column}
.ba-index{order:1;display:inline-flex;align-items:center;gap:.55rem;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--text-mute);font-variant-numeric:tabular-nums;
  margin-bottom:.9rem;align-self:flex-start}
.ba-index::before{content:"";width:22px;height:1px;background:var(--accent-hi);flex:none}
.ba-index.rise::before{display:none}
.ba-index.rise>i.rise-i{display:inline-flex;align-items:center;gap:.55rem}
.ba-index.rise>i.rise-i::before{content:"";width:22px;height:1px;background:var(--accent-hi);flex:none}
.pair-after{order:2;position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline);background:var(--surface-2)}
.pair-after img,.pair-after video{width:100%;height:100%;object-fit:cover}
.fromrow{order:3;display:flex;align-items:center;gap:.9rem;margin-top:1.2rem}
.ba-before{flex:none;width:92px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;
  border:1px solid var(--hairline);background:var(--surface-2)}
.ba-before img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.85)}
.fromcap{font-size:.68rem;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-mute);line-height:1.55}
.ba-line{order:4;font-size:var(--step-2);font-weight:400;line-height:1.35;letter-spacing:-.01em;
  margin-top:1.2rem;max-width:34ch;text-wrap:balance}

/* ============ range grid — editorial masonry of moving tiles ============ */
.range{padding-block:var(--sec-pad) clamp(3.5rem,8vh,5rem)}
.range-grid{margin-top:clamp(2rem,5vh,3.5rem);display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.rtile{position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline);background:var(--surface-2)}
.rtile img,.rtile video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rtile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,7,10,.55));opacity:.85;transition:opacity var(--dur-ui) var(--ease)}
.range-grid.pre .rtile{opacity:0;transform:translateY(18px)}
.range-grid.pre .rtile.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}

/* ============ reel bar ============ */
.reel{position:relative;overflow:hidden;margin-block:clamp(4rem,9vh,6.5rem)}
.reel-track{display:flex;width:max-content;will-change:transform;animation:reeldrift var(--reeldur,64s) linear infinite}
.reel-tile{flex:0 0 auto;width:min(210px,46vw);aspect-ratio:9/16;margin-right:.6rem;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--hairline);background:var(--surface-2)}
.reel-tile img,.reel-tile video{width:100%;height:100%;object-fit:cover}
@keyframes reeldrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.reel::before,.reel::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

/* ============ how ============ */
.how{padding-block:var(--sec-pad)}
.how-list{margin-top:clamp(2rem,5vh,3.25rem);display:flex;flex-direction:column;gap:0}
.beat{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.4rem;
  padding-block:clamp(1.7rem,4vh,2.4rem);align-items:baseline}
.beat-rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline)}
.beat:last-child{border-bottom:1px solid var(--hairline)}
.beat-n{font-size:.8rem;letter-spacing:var(--ls-mono);color:var(--accent-hi);font-variant-numeric:tabular-nums}
.beat-h{font-size:var(--step-3)}
.beat-p{grid-column:2;color:var(--text-mute);font-size:var(--step-0);max-width:52ch;line-height:1.6}

/* ============ pricing ============ */
.pricing{padding-block:var(--sec-pad)}
.tiers{margin-top:clamp(2rem,5vh,3.25rem);display:flex;flex-direction:column;gap:1rem}
.tier{position:relative;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-1);
  padding:clamp(1.6rem,5vw,2.2rem);display:flex;flex-direction:column;gap:1rem;overflow:hidden}
.tier-hero{border-color:rgba(124,58,237,.5)}
.tier-hero::before,.tier-pop::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 0 0,rgba(124,58,237,.12),transparent 65%)}
.tier-tag{font-size:.7rem;letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--accent-hi);position:relative}
.tier-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 1rem;position:relative}
.tier-name{font-size:var(--step-2)}
.tier-price{font-variant-numeric:tabular-nums;white-space:nowrap;position:relative}
.tier-amt{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--step-3);letter-spacing:var(--ls-display)}
.tier-amt.rise{display:inline-block;vertical-align:bottom}
.tier-hero .tier-amt{color:var(--accent-hi)}
.tier-per{color:var(--text-mute);font-size:.72rem;letter-spacing:var(--ls-mono);text-transform:uppercase}
.tier-what{color:var(--text-mute);font-size:var(--step-0);line-height:1.55;max-width:42ch;position:relative}
.tier-note{margin-top:auto;padding-top:1rem;border-top:1px solid var(--hairline);font-size:var(--step--1);color:var(--text-mute);line-height:1.5;position:relative}
.tier-cta{align-self:flex-start;margin-top:auto;position:relative}
.tier-lead{border-color:rgba(124,58,237,.4)}
.tier-pop{border-color:rgba(124,58,237,.5)}
.pricing-fine{margin-top:1.2rem;font-size:.72rem;letter-spacing:.06em;color:var(--text-mute);line-height:1.6;max-width:70ch}
.faq{margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{font-family:var(--font-body);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem 0;transition:color .2s ease}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";font-weight:400;font-size:1.5em;line-height:1;color:var(--text-mute);transition:color .2s ease,transform .2s ease}
.faq-item[open] .faq-q{color:var(--accent-hi)}
.faq-item[open] .faq-q::after{content:"\2013";color:var(--accent-hi)}
.faq-a{color:var(--text-mute);font-size:var(--step-0);line-height:1.6;max-width:62ch;margin:0 0 1.2rem}
.pricing-note{margin-top:clamp(1.6rem,4vh,2.4rem);color:var(--text-mute);font-size:var(--step--1);max-width:60ch;line-height:1.6}
.pricing-note a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline-hi);display:inline-block;padding-block:.7rem}

/* ============ footer ============ */
.site-foot{position:relative;border-top:1px solid var(--hairline);margin-top:var(--sec-pad);
  padding-block:clamp(2.5rem,6vh,4rem);padding-bottom:calc(clamp(2.5rem,6vh,4rem) + env(safe-area-inset-bottom))}
.foot-chapters{display:flex;flex-direction:column;gap:.1rem;margin-bottom:clamp(1.6rem,4vh,2.4rem);
  padding-bottom:clamp(1.4rem,3vh,2rem);border-bottom:1px solid var(--hairline)}
.foot-chapters a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute);transition:color var(--dur-micro) var(--ease)}
.foot-chapters a b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.foot-inner{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.foot-brand{font-size:1.1rem;letter-spacing:-.01em;color:var(--text)}
.foot-brand b{font-weight:500;color:var(--signal)}
.foot-line{color:var(--text-mute);font-size:var(--step-0);max-width:48ch;line-height:1.6}
.foot-line a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline-hi);display:inline-block;padding-block:.7rem}
.foot-cta{align-self:stretch;justify-content:center}

/* ================= DESKTOP ================= */
@media (min-width:761px){
  .head-inner{height:76px}
  .brand svg{height:23px}
  .nav{display:flex;align-items:center;gap:clamp(1.2rem,2.2vw,2rem)}
  .site-head.head-hidden{transform:none}
  .dock{display:inline-flex}

  .hero{padding-top:clamp(2rem,5vh,3.5rem)}
  .hero-glow{top:-6%;right:-8%;width:48vw;height:48vw;max-width:720px;max-height:720px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:center;min-height:min(82dvh,820px)}
  .eyebrow{margin-bottom:2rem}
  .hero h1{font-size:min(4.9rem,6.6vw - .3rem)}
  .hero .sub{max-width:50ch;margin-top:1.8rem}
  .cta-row{margin-top:2.4rem;gap:.9rem}
  .hero-stats{margin-top:3rem}

  .monitor{margin-top:0;height:min(82dvh,820px);display:flex;flex-direction:column}
  .monitor-feed{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
  .monitor-feed::before,.monitor-feed::after{top:0;bottom:auto;left:0;right:0;width:auto;height:13%}
  .monitor-feed.marquee::before{background:linear-gradient(180deg,var(--surface-1),transparent)}
  .monitor-feed.marquee::after{top:auto;bottom:0;background:linear-gradient(0deg,var(--surface-1),transparent)}

  .gal{margin-top:clamp(2.5rem,6vh,4rem)}
  .gal-track{gap:clamp(1.5rem,3vw,2.5rem)}
  .gslide{width:100%}
  .gal-ui{margin-top:1.6rem}
  .gal-arrows{display:flex}
  .pair{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;
    column-gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
  .pair-after{order:0;grid-column:1;grid-row:1/6;width:auto;height:min(64vh,580px)}
  .ba-index{order:0;grid-column:2;grid-row:2;margin-bottom:0}
  .ba-line{order:0;grid-column:2;grid-row:3;max-width:26ch;margin-top:1rem}
  .fromrow{order:0;grid-column:2;grid-row:4;margin-top:1.4rem}
  .ba-before{width:110px}

  /* range → editorial 4-col rhythm; two tiles span 2 rows for a magazine feel */
  .range-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1rem}
  .rtile{aspect-ratio:auto}
  .rtile:nth-child(1),.rtile:nth-child(6){grid-row:span 2}
  .rtile.in:nth-child(4n+2){transition-delay:70ms}
  .rtile.in:nth-child(4n+3){transition-delay:130ms}
  .rtile.in:nth-child(4n+4){transition-delay:190ms}

  .beat{grid-template-columns:auto minmax(0,26ch) 1fr;gap:1.2rem 2.4rem;align-items:baseline}
  .beat-p{grid-column:3;grid-row:1}
  .tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:1.25rem;max-width:940px}
  .tier{flex:none;min-height:100%}

  .foot-chapters{flex-direction:row;gap:2rem}
  .foot-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:2.5rem}
  .foot-line{flex:1;max-width:52ch}
  .foot-cta{align-self:auto;flex:none}
}

/* keep the range editorial grid from collapsing on tall content */
@media (min-width:761px){
  .range-grid{min-height:640px}
}

/* ================= hover ================= */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--text)}
  .nav a:hover b{color:var(--accent-hi)}
  .foot-chapters a:hover{color:var(--text)}
  .nav-cta:hover{border-color:var(--accent-hi);background:rgba(124,58,237,.12);color:#fff}
  .btn-primary:hover{transform:translateY(-2px);background:var(--accent-hi);box-shadow:0 12px 44px -10px rgba(124,58,237,.85)}
  .btn-primary:hover svg{transform:translateX(3px)}
  .btn-ghost:hover{border-color:var(--accent-hi);color:#fff;background:rgba(124,58,237,.1)}
  .gal-btn:hover{border-color:var(--accent-hi);background:rgba(124,58,237,.1)}
  .dock:hover{border-color:var(--accent-hi);background:rgba(124,58,237,.14)}
  .dock:hover .dock-arrow{transform:rotate(-90deg) translateX(3px)}
  .rtile:hover img,.rtile:hover video{transform:scale(1.05)}
  .rtile:hover::after{opacity:.4}
  .rtile:hover .frame-c,.pair-after:hover .frame-c{opacity:1}
  .faq-item:hover .faq-q{color:var(--text)}
}

/* ================= craft layer ================= */
.has-anim .rise{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.has-anim .rise>.rise-i{display:block;will-change:transform}
.has-anim .wipe{clip-path:inset(100% 0 0 0)}

/* boot / preloader */
.preload{position:fixed;inset:0;z-index:250;background:var(--bg);display:grid;place-items:center;will-change:transform}
.boot{display:flex;flex-direction:column;align-items:center;gap:1.1rem;width:min(340px,74vw);text-align:center}
.boot-mark{font-family:var(--font-display);font-weight:900;font-stretch:78%;text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.4rem);letter-spacing:-.02em;color:var(--text)}
.boot-mark b{color:var(--accent-hi)}
.boot-tc{font-size:clamp(2rem,10vw,3.2rem);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--signal)}
.boot-bar{position:relative;width:100%;height:2px;background:var(--hairline);overflow:hidden}
.boot-bar::after{content:"";position:absolute;inset:0;width:var(--bw,0%);
  background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi),var(--signal))}
.boot-cap{font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--text-dim)}
.boot-dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mq-track,.mq-rtrack,.reel-track,.ticker-track,.grain,.mesh,.dock-dot,.rec-dot{animation:none}
  .reveal,.hl-i{opacity:1;transform:none;animation:none}
  .range-grid.pre .rtile{opacity:1;transform:none}
  .preload{display:none}
  .rise{overflow:visible}
  .wipe{clip-path:none}
}

@media (min-width:761px){
  .pair .ba-line{min-height:3.2em}
}
@media (max-width:760px){
  .drawer{width:100vw}
}