/* ==========================================================================
   Deskman Studio — home page
   Structure, spacing and motion follow the reference capture. Type is a
   Neue-Montreal-alike (Onest from Google Fonts) so the page needs no licensed
   font to render; if you buy PP Neue Montreal, add it to --font and it takes
   over with no other change.
   ========================================================================== */
:root{
  --paper:#F4F4F4; --white:#fff;
  --ink:#1D1B1B; --ink-2:#141313; --ink-3:#232020;
  --muted:#6B6767; --line:#E2E2E2; --line-2:#D2D2D2; --grey:#EAEAEA;
  --electric:#A1FF62; --violet:#6840FF; --coral:#F84131;

  --font:"PP Neue Montreal","Neue Montreal","Onest",-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --script:"Caveat",cursive;

  /* ---- spacing scale -------------------------------------------------
     Every gap, every piece of padding and every section rhythm on this page
     is one of these. The root font-size here is the browser default 16px, so
     .5rem is exactly 8px and each step is a whole multiple of it — which is
     what keeps the vertical rhythm reading the same on a phone and on a
     desktop, where only the step chosen changes, never the grid. Type-bound
     padding (em) and the artwork mocks are deliberately outside it. */
  --sp-8:.5rem;  --sp-16:1rem;  --sp-24:1.5rem; --sp-32:2rem;
  --sp-40:2.5rem; --sp-48:3rem; --sp-56:3.5rem; --sp-64:4rem;
  --sp-80:5rem;  --sp-96:6rem;  --sp-128:8rem;  --sp-144:9rem;

  --pad:var(--sp-24);           /* page gutter */
  --maxw:88rem;                 /* content container */
  --nav-h:3.5rem;               /* 56 */
  --nav-top:var(--sp-16); --ticker-h:var(--sp-16); --ticker-gap:var(--sp-8);
  --r-sm:.5rem; --r-md:1rem; --r-lg:1.6rem; --r-pill:999px;
  --ease:cubic-bezier(.62,.05,0,1);
  --sect:var(--sp-144);         /* vertical rhythm between sections */
}
@media (max-width:900px){ :root{ --sect:var(--sp-80); --pad:var(--sp-16); } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-weight:400; font-size:17px; line-height:1.5;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.035em; line-height:1.02; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--electric); color:var(--ink); }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  min-width:0; }
/* long single words shouldn't be able to widen a column past the screen */
p,h1,h2,h3,h4,a,li{ overflow-wrap:break-word; }
.center{ text-align:center; }
.mono{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.script{ font-family:var(--script); font-weight:600; font-size:1.35rem; line-height:1.15;
  letter-spacing:0; color:var(--coral); }
.script.g{ color:var(--electric); }

/* the faint plumb line that runs the length of the light sections */
.rule{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.rule::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); }

/* ---------- reveal ----------------------------------------------------------
   Content is visible by default. JS opts in to the animation only once it has
   proven it runs, and a 2.5s inline watchdog clears it regardless — so a
   deferred or missing script can never leave the page blank. */
html.js .rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .rv.in{ opacity:1; transform:none; }
html.shown .rv{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:2.9rem; padding-inline:1.5rem; border-radius:var(--r-pill);
  font-size:1rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn:hover{ transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:#000; }
.btn-lime{ background:var(--electric); color:var(--ink); }
.btn-violet{ background:var(--violet); color:#fff; }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:none; }
.btn-sq{ border-radius:var(--r-sm); }
.btn-sm{ height:2.35rem; font-size:.94rem; padding-inline:1rem; }

/* NAV, TICKER, MEGA MENU, admin-bar offset and anchor scroll-margin all moved
   to assets/css/nav.css, which loads on every page. They used to be defined
   here AND again in main.css with different class names, which is why the
   header looked different on the home page than on the interior pages.
   The --nav-top / --nav-h / --ticker-gap / --ticker-h tokens above stay: this
   stylesheet still uses them to pad the hero clear of the fixed header. They
   must keep summing to nav.css's --dskn-block (96px). */

/* ==========================================================================
   1 — HERO
   ========================================================================== */
.hero{ position:relative; overflow:hidden;
  padding-top:calc(var(--nav-top) + var(--nav-h) + var(--ticker-gap) + var(--ticker-h) + 4.5rem); }
.hero .wrap{ position:relative; z-index:2; }
.h1{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 .22em;
  max-width:min(96vw,1640px); margin:0 auto 1.5rem;
  font-size:clamp(2.5rem,6.1vw,6.1rem); line-height:1.02; letter-spacing:-.04em; font-weight:500; }
.h1 .w,.h1 .gl{ display:inline-block; overflow:clip; padding-bottom:.12em; margin-bottom:-.12em; }
.h1 .w>i,.h1 .gl>i{ display:block; font-style:normal; }
.h1 .gl{ color:var(--violet); font-size:.8em; }
html.js .h1 .w>i, html.js .h1 .gl>i{ transform:translateY(105%); }
html.js.ready .h1 .w>i, html.js.ready .h1 .gl>i{ transform:none;
  transition:transform .85s var(--ease); }
html.shown .h1 .w>i, html.shown .h1 .gl>i{ transform:none !important; }
.hero-sub{ max-width:44ch; margin:0 auto; color:var(--ink); font-size:1.06rem; line-height:1.72;
  text-align:center; }
.chip{ display:inline-block; padding:.12em .55em; margin-inline:.05em; background:var(--grey);
  border-radius:.45rem; white-space:nowrap; }

/* --- arc marquee ---
   Ships as a plain wrapped row; JS measures it and bends it onto a circle.

   The ring hangs directly off the sub-line: the script parks the topmost card
   three pixels under the strip's top edge, so the only breathing room between
   copy and cards is this margin. Anything larger reopens the dead band the
   hero used to carry. */
.arc{ position:relative; margin-top:1rem; }
.arc-track{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; padding-inline:var(--pad); }

/* The strip is shorter than the ring is tall — that is the point, the fan is
   meant to run off the bottom. Cropping it with overflow alone left a ruled
   edge straight across the cards, which read as a rendering fault rather than
   as depth. The mask does the same crop but dissolves the last fifth of it, so
   a card sinks out of the hero instead of being sliced by it. Browsers without
   mask support fall back to the hard crop, which is what shipped before. */
.arc.on{ height:var(--arc-h,22rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 var(--arc-fade,74%),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 var(--arc-fade,74%),transparent 100%); }
.arc.on .arc-track{ display:block; height:0; padding:0; }
.arc.on .arc-i{ position:absolute; left:50%; top:0; will-change:transform,opacity; }
.arc.on .arc-i::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:.8rem;
  margin-top:1.5rem; background:var(--line-2); }
/* margin:0 is load-bearing, not tidying. .card is a <figure>, and the UA sheet
   gives it "1em 40px" — so each ring item was 80px wider and 32px taller than
   the card the script measured, which padded the no-JS row and threw off every
   hit area on the ring. */
.card{ width:22rem; flex:0 0 auto; margin:0; background:var(--ink-2); border-radius:.85rem;
  padding:.5rem .5rem 0;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.55); }
.card .scr{ aspect-ratio:16/10; border-radius:.5rem; overflow:hidden; background:var(--white);
  color:var(--ink); padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.card .cap{ padding:1rem .5rem 1rem; font-size:.92rem; font-weight:400; color:#E8E5E5; }
.card.t-lime .scr{ background:var(--electric); }
.card.t-violet .scr{ background:var(--violet); color:#fff; }
.card.t-ink .scr{ background:var(--ink-3); color:var(--paper); }
.card.t-olive .scr{ background:#3F4A3C; color:#EFEFE9; }

/* A card whose screen is a clip. The padding and flex layout that position the
   CSS stand-in would letterbox the video, so the modifier clears both and lets
   the media fill the rounded rectangle edge to edge. The poster carries the
   first frame, which is what shows on the cards the script has paused — so a
   paused card still reads as artwork rather than as a black hole. */
.card .scr.is-video{ padding:0; display:block; position:relative; background:var(--ink-3); }
.card .scr.is-video > video,
.card .scr.is-video > img{ width:100%; height:100%; object-fit:cover; display:block; }
.sk{ display:block; height:.5rem; border-radius:3px; background:currentColor; opacity:.15; }
.sk.s{ width:52%; } .sk.a{ background:var(--violet); opacity:1; width:64%; }
.card.t-violet .sk.a{ background:var(--electric); }
.big{ font-size:1.55rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; }
.big.sm{ font-size:1.15rem; }
.num{ font-size:2.6rem; font-weight:600; letter-spacing:-.04em; margin-top:auto; }
.dots{ display:flex; gap:4px; }
.dots i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.25; }
.gridm{ display:grid; grid-template-columns:repeat(6,1fr); gap:.3rem; flex:1; }
.gridm i{ background:currentColor; opacity:.11; border-radius:2px; }
.chart{ display:flex; align-items:flex-end; gap:.32rem; flex:1; }
.chart i{ flex:1; background:currentColor; opacity:.2; border-radius:2px 2px 0 0; }
.chart i:last-child{ background:var(--violet); opacity:1; }

/* ==========================================================================
   2 — INTRO paragraph
   ========================================================================== */
.intro{ position:relative; padding:2rem 0 0; }
.intro p{ max-width:22ch; margin-inline:auto; text-align:center;
  font-size:clamp(1.45rem,2.5vw,2.05rem); line-height:1.24; letter-spacing:-.03em; font-weight:400; }

/* ==========================================================================
   3 — PLAY REEL
   ========================================================================== */
.reel{ position:relative; padding:4.5rem 0 3rem; }
.reel-in{ position:relative; display:flex; align-items:center; justify-content:center; gap:1rem; }
.reel-word{ font-size:clamp(2.2rem,5vw,4.2rem); font-weight:400; letter-spacing:-.04em;
  color:#C9C6C6; user-select:none; }
.reel-thumb{ position:relative; width:min(17rem,42vw); aspect-ratio:16/9; border-radius:.4rem;
  overflow:hidden; background:#9E9B9B; cursor:pointer; flex:0 0 auto;
  transition:transform .5s var(--ease); }
.reel-thumb:hover{ transform:scale(1.04); }
.reel-thumb .bar{ position:absolute; left:0; right:0; bottom:0; display:flex;
  justify-content:space-between; padding:.5rem .5rem; color:#fff; font-size:.85rem;
  background:linear-gradient(transparent,rgba(0,0,0,.35)); }
.reel-thumb .mock{ position:absolute; inset:0; display:grid;
  grid-template-columns:22% 1fr 26%; gap:3px; padding:3px; }
.reel-thumb .mock i{ background:rgba(255,255,255,.5); border-radius:2px; }
.reel-thumb .mock i:nth-child(2){ background:rgba(120,90,70,.85); }
/* dashed ring behind the reel */
.ring{ position:absolute; left:50%; top:50%; width:34rem; height:34rem; margin:-17rem 0 0 -17rem;
  border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(var(--line-2) 0deg 0.35deg, transparent .35deg 3deg);
  -webkit-mask:radial-gradient(circle, transparent 0 49%, #000 49% 50%, transparent 50%);
          mask:radial-gradient(circle, transparent 0 49%, #000 49% 50%, transparent 50%); }
.reel .script{ position:absolute; left:58%; top:76%; }
.reel .script svg{ display:block; margin:0 auto .1rem; }

.joinrow{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:5rem; font-size:.98rem; }
.avs{ display:flex; }
.avs span{ width:26px; height:26px; border-radius:50%; margin-left:-8px;
  border:2px solid var(--paper); background:var(--line-2); display:block; }
.avs span:first-child{ margin-left:0; }
.avs span:nth-child(1){ background:#8E7B6B; } .avs span:nth-child(2){ background:#5A5F6B; }
.avs span:nth-child(3){ background:#7A6A55; } .avs span:nth-child(4){ background:#4A4A4A; }

/* ==========================================================================
   4 — FOUNDER + UPDATES pair  (arc scroll transition)

   The right panel is a drum. Every card sits on the surface of a large
   cylinder whose axis is horizontal and buried behind the screen, so the
   whole stack rotates: the active card leaves over the top on an arc while
   the next one swings up from below, tilting as it goes. The left portrait
   rides the same rotation on a wider radius, so the two halves stay in step
   without moving at the same visual speed.

   Everything is transform + opacity only — no layout is touched per frame.
   ========================================================================== */
.pair{ margin-top:2.5rem; display:grid; grid-template-columns:1fr 1.55fr; gap:1rem;
  align-items:stretch; }

/* ---------- left: the studio card ---------------------------------------- */
.founder{ position:relative; background:var(--violet); color:#fff; border-radius:var(--r-md);
  padding:2rem; min-height:31rem; display:flex; flex-direction:column; overflow:hidden; }
.founder > *{ position:relative; z-index:3; }
.founder .script{ color:#fff; opacity:.9; }
.founder h3{ font-size:3.2rem; font-weight:500; letter-spacing:-.04em; margin-top:.1rem; }
.founder .sur{ font-size:1.15rem; opacity:.9; }

/* status line — "We ship · You grow · On time" with a live green dot */
.founder .fstatus{ margin-top:.6rem; display:flex; align-items:center; gap:.5rem;
  font-size:.92rem; opacity:.92; }
.founder .fstatus .dot{ width:.5rem; height:.5rem; border-radius:50%;
  background:var(--electric); box-shadow:0 0 0 4px rgba(200,255,77,.18); flex:0 0 auto; }

/* dark pool that gathers behind the actions */
.founder .glow{ position:absolute; left:50%; bottom:-4rem; z-index:1;
  width:20rem; height:20rem; margin-left:-10rem; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(10,6,40,.85) 0 30%, rgba(10,6,40,.45) 46%, transparent 68%); }

/* dotted radar halo radiating around the arrow */
.founder .dial{ position:absolute; left:50%; top:auto; bottom:.5rem; z-index:2;
  width:23rem; height:23rem; margin-left:-11.5rem; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.72) 0 1.1px, transparent 1.1px 10.5px);
  -webkit-mask:
    repeating-conic-gradient(from 0deg, #000 0 1.4deg, transparent 1.4deg 4.6deg),
    radial-gradient(circle at 50% 50%, transparent 0 30%, #000 42% 70%, transparent 84%);
  -webkit-mask-composite:source-in;
          mask:
    repeating-conic-gradient(from 0deg, #000 0 1.4deg, transparent 1.4deg 4.6deg),
    radial-gradient(circle at 50% 50%, transparent 0 30%, #000 42% 70%, transparent 84%);
          mask-composite:intersect; }

/* stacked actions: round arrow above the white pill */
.founder .factions{ margin-top:auto; display:flex; flex-direction:column;
  align-items:center; gap:1rem; }
.founder .fgo{ width:3.4rem; height:3.4rem; border-radius:50%; background:#0d0a1f;
  color:var(--electric); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12); text-decoration:none;
  transition:transform .18s ease, background .18s ease; }
.founder .fgo:hover{ transform:translateY(-2px); background:#161233; }
.founder .fgo svg{ width:1.25rem; height:1.25rem; }
.founder .btn{ align-self:center; }

/* ---------- right: latest work drum -------------------------------------- */
.updates{ position:relative; background:var(--ink-2); color:var(--paper);
  border-radius:50% / 22%; padding:2.5rem 2rem 2rem; min-height:31rem;
  display:flex; flex-direction:column; align-items:center; }
.updates .ttl{ text-align:center; line-height:1.3; margin-bottom:1rem; }
.updates .ttl b{ display:block; color:var(--electric); font-weight:500; }

.upstage{ position:relative; width:100%; flex:1 1 auto; min-height:15rem;
  perspective:1200px; perspective-origin:50% 50%;
  overflow:hidden; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.upstage.on{ cursor:grab; }
.upstage.on.grab{ cursor:grabbing; }
.upstage:focus-visible{ outline:2px solid var(--electric); outline-offset:-2px; border-radius:1rem; }
.upstage::before,.upstage::after{ content:""; position:absolute; left:0; right:0; height:22%;
  z-index:2; pointer-events:none; }
.upstage::before{ top:0; background:linear-gradient(var(--ink-2) 12%, rgba(20,19,19,0) 100%); }
.upstage::after{ bottom:0; background:linear-gradient(rgba(20,19,19,0) 0%, var(--ink-2) 88%); }
.updrum{ display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:1; }
.upstage.on .updrum{ display:block; position:absolute; inset:0; transform-style:preserve-3d; }

.upcard{ width:min(34rem,86%); background:var(--electric); color:var(--ink);
  border-radius:.35rem; padding:1rem; display:grid; grid-template-columns:1fr 15rem; gap:1rem; }
.upstage.on .upcard{ position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); transform-style:preserve-3d;
  backface-visibility:hidden; will-change:transform,opacity; }
/* reduced motion: no drum, just a clean cross-fade */
.upstage.flat .upcard{ transition:opacity .35s var(--ease); }

.upcard .tags{ display:flex; gap:.5rem; margin-bottom:1.5rem; }
.tagpill{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:.25em .5em;
  border-radius:3px; background:var(--ink); color:var(--electric); }
.tagpill.inv{ background:var(--ink); color:#fff; }
.upcard h4{ font-size:1.35rem; font-weight:500; letter-spacing:-.03em; }
.upcard .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; margin-top:1rem; }
.upcard .shot{ background:var(--tone,#8A6E5A); border-radius:2px; position:relative;
  overflow:hidden; min-height:8.5rem; }
.upcard .shot::after{ content:""; position:absolute; left:-10%; right:-10%; bottom:-60%;
  height:120%; background:var(--tone-2,#D8D6D4); border-radius:50% 50% 0 0; }
.updates .script{ margin-top:auto; text-align:center; padding-top:1rem; }

/* pointer companion — reads out the direction the drum will turn */
.upcursor{ position:absolute; left:0; top:0; width:3rem; height:3rem; margin:-1.5rem 0 0 -1.5rem; /* the negative margin is half the size, so both move together */
  z-index:7; pointer-events:none; will-change:transform; }
.upcursor .ring{ width:100%; height:100%; border-radius:50%; background:var(--paper);
  color:var(--ink); display:grid; place-items:center; opacity:0; transform:scale(.4);
  transition:transform .4s var(--ease), opacity .28s var(--ease); }
.upcursor .ring svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.upstage.hot .upcursor .ring{ opacity:1; transform:scale(1); }
.upstage.up .upcursor .ring svg{ transform:rotate(180deg); }
@media (hover:none),(pointer:coarse){ .upcursor{ display:none; } }

/* index rail + tap controls */
.upnav{ position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.updots{ display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.updot{ display:block; padding:.32rem .3rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.updot::before{ content:""; display:block; width:14px; height:1.5px; background:#5A5656;
  transition:width .45s var(--ease), height .45s var(--ease), background .45s var(--ease); }
.updot[aria-selected="true"]::before{ width:22px; background:var(--paper); }
.uparrow{ display:none; width:2.1rem; height:2.1rem; border-radius:50%;
  align-items:center; justify-content:center; color:var(--paper);
  border:1px solid rgba(255,255,255,.24);
  transition:background .25s var(--ease), opacity .25s var(--ease); }
.uparrow svg{ width:13px; height:13px; }
.uparrow:hover{ background:rgba(255,255,255,.1); }
.uparrow[disabled]{ opacity:.28; cursor:default; }
@media (hover:none),(pointer:coarse){ .uparrow{ display:inline-flex; } }

/* ==========================================================================
   5 — THE STUDIO (big heading + app shot on an ellipse)
   ========================================================================== */
.platform{ position:relative; padding:var(--sect) 0 0; text-align:center; overflow:hidden; }
.h2{ font-size:clamp(2.6rem,7vw,6.4rem); font-weight:400; letter-spacing:-.045em; line-height:1; }
.platform .hd{ position:relative; display:inline-block; }
.platform .hd .script{ position:absolute; right:-6.5rem; top:-.5rem; white-space:nowrap; }
.lead{ max-width:52ch; margin:1.5rem auto 0; font-size:1.02rem; line-height:1.55; color:var(--ink); }
.ellipse{ position:relative; margin-top:3.5rem; }
.ellipse::before{ content:""; position:absolute; left:50%; top:2.5rem; width:150%; padding-bottom:110%;
  transform:translateX(-50%); background:var(--grey); border-radius:50%; z-index:0; }
.appshot{ position:relative; z-index:1; max-width:74rem; margin-inline:auto;
  border-radius:.7rem; overflow:hidden; background:var(--ink-2); color:var(--paper);
  display:grid; grid-template-columns:15rem 1fr; text-align:left; min-height:26rem;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.5); }
.appshot .side{ background:#171515; padding:1rem; border-right:1px solid rgba(255,255,255,.07); }
.appshot .side .lg{ font-weight:700; letter-spacing:-.04em; margin-bottom:1.5rem; }
.appshot .side a{ display:flex; gap:.5rem; padding:.5rem .5rem; border-radius:5px;
  font-size:.88rem; color:#B7B3B3; }
.appshot .side a b{ color:#6E6A6A; font-weight:400; font-size:.8rem; min-width:1rem; }
.appshot .side a.on{ background:#262323; color:#fff; }
.appshot .main{ padding:1.5rem; display:flex; flex-direction:column; }
.appshot .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.appshot .search{ background:#262323; border-radius:var(--r-pill); padding:.5rem 1rem;
  font-size:.85rem; color:#8E8A8A; width:14rem; }
.appshot .welcome{ text-align:center; }
.appshot .welcome small{ font-size:.85rem; color:#B7B3B3; }
.appshot .welcome h4{ font-size:2.6rem; font-weight:500; letter-spacing:-.035em; margin:.5rem 0 1.5rem; }
.appshot .sbar{ margin:0 auto 2rem; width:min(20rem,70%); background:#262323;
  border-radius:var(--r-pill); padding:.5rem 1rem; font-size:.88rem; color:#8E8A8A; }
.appshot .tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.appshot .tile{ background:#201E1E; border-radius:.4rem; overflow:hidden; }
.appshot .tile .im{ aspect-ratio:16/10; }
.appshot .tile p{ padding:.5rem .5rem; font-size:.82rem; color:#CFCBCB; }
.platform .after{ margin-top:3rem; }
.platform .after p{ font-size:1.15rem; line-height:1.45; max-width:34ch; margin:0 auto 1.5rem; }

/* ==========================================================================
   6 — TOOLKIT tabs + arc carousel

   The cards ride the top of a very large circle — about ten card-widths in
   radius — so the one in the middle stands upright and its neighbours lean
   away and sink along the arc. Radius is derived from the card, never
   hard-coded, so the same geometry holds from a phone to a 4K monitor.
   ========================================================================== */
.toolkit{ position:relative; padding:var(--sect) 0 0; text-align:center; overflow:hidden; }
.toolkit .h2{ max-width:16ch; margin-inline:auto; }
.toolkit .sub{ margin-top:1.5rem; font-size:1rem; }
.tabs{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:2rem; }
.tab{ padding:.5rem 1rem; border-radius:var(--r-pill); background:var(--grey);
  font-size:.97rem; transition:background .3s var(--ease), color .3s var(--ease); }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--paper); }

.fan{ position:relative; margin-top:3.5rem; height:34rem;
  /* the reference card is near-square; below ~1130px the width floors out and
     a square card can no longer hold its own copy, so it goes portrait */
  --fw:clamp(15.5rem,33vw,38rem); --fh:max(calc(var(--fw) * 1.02),24rem);
  touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
/* Only once the script has taken over. A drag on a mouse begins with a
   mousedown, which is also how a text selection and a native link-drag begin —
   so the browser starts one of those before we can tell a drag from a click,
   and from that moment the pointer stream belongs to it, not to us. That is
   what left the card copy highlighted mid-swipe and killed the motion. Left
   selectable in the no-JS fallback, where the cards are a plain stacked
   column and there is nothing to drag. */
.fan.on{ cursor:grab; -webkit-user-select:none; user-select:none; }
.fan.on.grab{ cursor:grabbing; }
.fan.on a,.fan.on img,.fan.on .fcard{ -webkit-user-drag:none; }
.fan:focus-visible{ outline:2px solid var(--violet); outline-offset:8px; border-radius:1.2rem; }

/* the dashed line the cards sit on is the same circle they travel */
.fguide{ position:absolute; left:50%; top:0; border-radius:50%;
  border-top:1.5px dashed var(--line-2); pointer-events:none; }

/* will-change is transform only, and `contain` keeps each card's internal
   layout and paint work to itself.

   It listed opacity too, which promoted every card on the ring to its own
   compositor layer for the whole life of the page — up to 28 of them, each a
   full-size rotated card with a heading, body copy and an artwork block, and
   all of it held in GPU memory on a phone that has little to spare. Opacity
   only ever changes on the two cards straddling the wrap seam, so it does not
   need a permanent layer; transform genuinely changes every frame, so it
   does. */
.fcard{ position:absolute; left:50%; top:0; width:var(--fw); height:var(--fh);
  border-radius:var(--r-md); padding:1.5rem 1.5rem 1.5rem;
  display:flex; flex-direction:column; text-align:center; overflow:hidden;
  transform:translate(-50%,-50%); will-change:transform;
  contain:layout style;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.45); }
.fan:not(.on) .fcard{ position:relative; left:auto; transform:none; margin:0 auto 1rem; }
.fan:not(.on) .fcard ~ .fcard{ display:none; }

.fcard .kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  background:rgba(0,0,0,.12); border-radius:3px; padding:.28em .5em; align-self:center; }
.fcard .star{ font-size:1.7rem; margin:1.5rem 0 .5rem; }
.fcard h3{ font-size:clamp(1.7rem,calc(var(--fw) * .105),2.9rem);
  font-weight:500; letter-spacing:-.04em; }
.fcard p{ margin-top:.5rem; font-size:.95rem; line-height:1.4; max-width:26ch; margin-inline:auto; }
/* the artwork panel — a small CSS-drawn hint of the work behind each service */
.fcard .art{ margin-top:1.5rem; flex:1 1 auto; min-height:6rem; border-radius:.5rem;
  background:rgba(0,0,0,.22); position:relative; overflow:hidden; }
.fcard.c-lime .art{ background:rgba(0,0,0,.14); }
.art-in{ position:absolute; inset:9% 9% 27%; display:flex; gap:5%; }
.art-in i{ display:block; background:currentColor; opacity:.22; border-radius:2px; }

/* Web — a browser frame. Tints come from colour-mix, not opacity, so the
   content lines inside the window stay crisp instead of compounding away. */
.art-web{ flex-direction:column; }
.art-web .bar{ height:14%; border-radius:3px 3px 0 0; background:rgba(255,255,255,.3);
  display:flex; align-items:center; gap:5px; padding-inline:7px; }
.art-web .bar b{ width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,.45); flex:none; }
.art-web .body{ flex:1; border-radius:0 0 3px 3px; background:rgba(255,255,255,.11);
  display:flex; flex-direction:column; gap:7%; padding:8%; }
.art-web .body i{ height:9%; opacity:.42; }
.c-lime .art-web .bar{ background:rgba(0,0,0,.28); }
.c-lime .art-web .bar b{ background:rgba(255,255,255,.7); }
.c-lime .art-web .body{ background:rgba(0,0,0,.1); }
.art-web .body i:nth-child(1){ width:64%; height:15%; }
.art-web .body i:nth-child(2){ width:88%; }
.art-web .body i:nth-child(3){ width:74%; }

/* Branding — swatches under a type specimen */
.art-brand{ flex-direction:column; align-items:center; justify-content:center; gap:8%; }
.art-brand .aa{ font-size:clamp(1.6rem,calc(var(--fw) * .09),2.6rem); font-weight:500;
  letter-spacing:-.05em; opacity:.9; line-height:1; }
.art-brand .sw{ display:flex; gap:6px; }
.art-brand .sw i{ width:clamp(16px,calc(var(--fw) * .052),30px); aspect-ratio:1;
  border-radius:50%; opacity:1; }

/* SEO — a climbing bar chart */
.art-seo{ align-items:flex-end; justify-content:center; gap:6%; }
.art-seo i{ width:11%; opacity:.32; border-radius:2px 2px 0 0; }
.art-seo i:nth-child(1){ height:26%; }
.art-seo i:nth-child(2){ height:41%; }
.art-seo i:nth-child(3){ height:35%; }
.art-seo i:nth-child(4){ height:62%; }
.art-seo i:nth-child(5){ height:84%; opacity:.62; }

/* Care — a steady list of green checks */
.art-care{ flex-direction:column; justify-content:center; gap:9%; }
.art-care span{ display:flex; align-items:center; gap:8px; }
.art-care span b{ width:clamp(9px,calc(var(--fw) * .03),16px); aspect-ratio:1; border-radius:50%;
  background:var(--electric); flex:none; }
.art-care span i{ height:7px; flex:1; opacity:.3; }
.art-care span:nth-child(2) i{ max-width:76%; }
.art-care span:nth-child(3) i{ max-width:58%; opacity:.18; }
.art-care span:nth-child(3) b{ background:currentColor; opacity:.3; }
.fcard .btn{ position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); }
.fcard.c-dark{ background:var(--ink-2); color:var(--paper); }
.fcard.c-violet{ background:var(--violet); color:#fff; }
.fcard.c-lime{ background:var(--electric); color:var(--ink); }
.fcard.c-coral{ background:var(--coral); color:#fff; }
.fcard.c-dark .kicker{ background:rgba(255,255,255,.13); }
.fcard.c-coral .kicker{ background:rgba(255,255,255,.16); }

/* drag cue — always on, so the control is visible before anyone touches it.
   The lag on the transform is deliberate: it trails the cursor rather than
   tracking it, which reads as a physical handle instead of a second pointer. */
.fdrag{ position:absolute; left:0; top:0; z-index:120; pointer-events:none; opacity:0;
  will-change:transform,opacity; transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
.fan.hot .fdrag, .fan.grab .fdrag{ opacity:1; }
.fdrag .cue{ position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.5rem; }
.fdrag .cue b{ width:3.3rem; height:3.3rem; border-radius:50%; flex:none;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; transition:transform .35s var(--ease); }
.fdrag .cue i{ font-style:normal; font-size:1.35rem; line-height:1; color:var(--ink); }
.fdrag .cue i.l{ animation:cueL 2.6s var(--ease) infinite; }
.fdrag .cue i.r{ animation:cueR 2.6s var(--ease) infinite; }
.fan.grab .fdrag .cue b{ transform:scale(.86); }
.fan.grab .fdrag .cue i{ opacity:0; }
@keyframes cueL{ 0%,100%{ transform:translateX(0); opacity:.45 } 45%{ transform:translateX(-5px); opacity:1 } }
@keyframes cueR{ 0%,100%{ transform:translateX(0); opacity:.45 } 45%{ transform:translateX(5px); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .fdrag .cue i{ animation:none; opacity:.7 } }

/* ==========================================================================
   7 — LEVEL UP + feature rows
   ========================================================================== */
.why{ position:relative; padding:var(--sect) 0 0; }
.why-top{ display:grid; grid-template-columns:auto auto 1fr; gap:2rem; align-items:start; }
.stamp{ font-family:var(--mono); font-size:8.5px; line-height:1.5; letter-spacing:.04em; }
.stamp .lg{ font-size:2.1rem; font-weight:700; letter-spacing:-.05em; font-family:var(--font); }
.why h2{ font-size:clamp(2rem,4.3vw,3.85rem); font-weight:400; letter-spacing:-.04em; line-height:1.08; }
.why .script{ margin-top:.5rem; }
.rows{ margin-top:4.5rem; margin-left:auto; width:min(58rem,100%); }
.row{ display:grid; grid-template-columns:1fr 1.55fr; gap:2rem;
  padding:2rem 0 2.5rem; border-top:1px solid var(--line); }
.row h4{ font-size:1.08rem; font-weight:500; letter-spacing:-.01em; }
.row p{ font-size:1rem; line-height:1.5; }

/* ==========================================================================
   8 — TRUSTED BY
   ========================================================================== */
.trust{ position:relative; padding:3.5rem 0 var(--sect); }
.trust .hd{ display:flex; align-items:center; gap:1rem; width:min(58rem,100%); margin-left:auto; }
.trust .hd::before,.trust .hd::after{ content:""; flex:1; height:1px; background:var(--line); }
.trust .hd span{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.trust .hd b{ background:var(--grey); padding:.2em .45em; border-radius:3px; font-weight:400; }
.logos{ margin-top:2.5rem; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.logos-tk{ display:flex; gap:5rem; white-space:nowrap; animation:mq 34s linear infinite; width:max-content; }
.logos-tk span{ font-size:1.5rem; font-weight:700; letter-spacing:-.04em; color:#2B2828; opacity:.85; }

/* ==========================================================================
   9 — GLOBE + testimonial
   ========================================================================== */
.voices{ position:relative; padding-bottom:var(--sect); }
.voices-in{ display:grid; grid-template-columns:.72fr 1.6fr; gap:1rem; align-items:stretch; }
.voices-in > *{ min-width:0; }
.globe{ position:relative; background:var(--ink-2); color:var(--paper); border-radius:50% / 26%;
  min-height:34rem; display:flex; flex-direction:column; align-items:center; padding:2rem 1.5rem; }
.globe .ttl{ text-align:center; line-height:1.3; }
.globe .ttl b{ display:block; color:var(--electric); font-weight:500; }
.globe .sphere{ position:relative; width:min(20rem,74%); aspect-ratio:1; margin:auto;
  border-radius:50%; background:#2A2727; overflow:hidden; }
.globe .sphere::before{ content:""; position:absolute; inset:8%; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.4) 0deg .4deg, transparent .4deg 3.2deg);
  -webkit-mask:radial-gradient(circle, transparent 0 47%, #000 47% 50%, transparent 50%);
          mask:radial-gradient(circle, transparent 0 47%, #000 47% 50%, transparent 50%); }
.globe .sphere i{ position:absolute; left:52%; top:46%; width:9%; height:20%;
  background:var(--electric); border-radius:40% 40% 50% 50%; transform:rotate(6deg); }
.globe .script{ text-align:center; }
.tpanel{ min-width:0; background:var(--grey); border-radius:var(--r-md); padding:2.5rem;
  display:flex; align-items:center; position:relative; }
.tcard{ background:var(--violet); color:#fff; border-radius:.8rem; padding:2.5rem; width:100%; }
.tcard h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; letter-spacing:-.03em; line-height:1.15; }
.tcard .body{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; margin-top:2rem;
  align-items:start; }
.tcard .body > *{ min-width:0; }
.tcard .who .pic{ width:66px; height:66px; border-radius:50%; background:#2B2440; }
.tcard .who .nm{ font-family:var(--script); font-size:1.3rem; margin-top:.5rem; }
.tcard .who .role{ display:inline-block; margin-top:.5rem; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:9px; letter-spacing:.07em; padding:.28em .5em; }
.tcard .body p{ font-size:1rem; line-height:1.5; }
.tnav{ position:absolute; right:1.1rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.5rem; }
.tnav i{ width:14px; height:2px; background:var(--line-2); display:block; }
.tnav i.on{ background:var(--violet); width:20px; }

/* ==========================================================================
   10 — PRICING (dark)
   ========================================================================== */
.pricing{ background:var(--ink-2); color:var(--paper); padding:3rem 0 var(--sect); text-align:center; }
.pricing .stampline{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:#8C8888;
  line-height:1.7; margin-bottom:5rem; }
.pricing .stampline b{ background:#2E2B2B; padding:.15em .4em; border-radius:2px; font-weight:400; }
.pricing .h2{ max-width:14ch; margin-inline:auto; }
.toggle{ display:inline-flex; background:#2A2727; border-radius:var(--r-pill); padding:.28rem;
  margin-top:2rem; position:relative; }
.toggle button{ padding:.55rem 1.4rem; border-radius:var(--r-pill); font-size:.98rem;
  color:#CFCBCB; transition:.3s var(--ease); }
.toggle button[aria-pressed="true"]{ background:var(--paper); color:var(--ink); }
.tgwrap{ display:inline-flex; align-items:center; gap:1rem; margin-top:2rem; }
.tgwrap .script{ position:relative; top:.3rem; }
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:3.5rem;
  text-align:left; max-width:72rem; margin-inline:auto; }
.plan{ border-radius:var(--r-md); padding:2rem; position:relative; min-height:26rem;
  display:flex; flex-direction:column; }
.plan.solo{ background:var(--violet); color:#fff; }
.plan.team{ background:var(--paper); color:var(--ink); }
.plan .who{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; padding:.28em .5em;
  border-radius:3px; background:rgba(255,255,255,.18); align-self:flex-start; }
.plan.team .who{ background:var(--grey); }
.plan h3{ font-size:3.2rem; font-weight:500; letter-spacing:-.04em; margin:2.5rem 0 1.5rem; }
.plan .price{ font-size:2rem; font-weight:500; letter-spacing:-.04em; }
.plan .price em{ font-style:normal; opacity:.55; }
.plan .per{ font-size:.95rem; margin-top:.5rem; }
.plan .btn{ width:100%; margin-top:1.5rem; border-radius:.35rem; }
.plan hr{ border:0; border-top:1px solid rgba(255,255,255,.25); margin:2rem 0 1.5rem; }
.plan.team hr{ border-top-color:var(--line-2); }
.plan .cnt{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; }
.plan .cnt b{ background:var(--ink); color:#fff; font-family:var(--mono); font-size:10px;
  padding:.25em .45em; border-radius:2px; font-weight:400; }
.plan.team .cnt b{ background:var(--violet); }
.plan .all{ margin-top:1.5rem; font-size:.95rem; text-decoration:underline; text-underline-offset:3px; }
.plan .note{ position:absolute; right:1.6rem; top:1.4rem; }

/* ==========================================================================
   11 — SHOWCASE coverflow
   ========================================================================== */
.showcase{ background:var(--ink-2); color:var(--paper); padding:0 0 var(--sect); position:relative;
  overflow:hidden; }
.sc-words{ display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(2.2rem,6vw,5.4rem); font-weight:400; letter-spacing:-.045em; position:relative; }
.sc-words .script{ position:absolute; left:56%; top:105%; }
.stage{ position:relative; height:34rem; margin-top:4rem; }
.slide{ position:absolute; left:50%; top:50%; width:min(40rem,74vw); aspect-ratio:16/10.4;
  border-radius:.4rem; overflow:hidden; background:var(--white);
  transition:transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
  will-change:transform; }
.slide .art{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:3.4rem; font-weight:700; color:var(--ink); }
.slide .bar{ position:absolute; left:0; right:0; bottom:0; height:2.6rem; background:var(--electric);
  color:var(--ink); display:flex; align-items:center; justify-content:space-between;
  padding:0 1rem; font-size:.92rem; opacity:0; transition:opacity .5s var(--ease); }
.slide.on{ z-index:5; box-shadow:0 0 0 4px var(--electric), 0 40px 80px -40px #000; }
.slide.on .bar{ opacity:1; }
.sc-tags{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.sc-tags span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; background:#2A2727;
  padding:.3em .5em; border-radius:3px; color:#CFCBCB; }
.sc-cta{ display:flex; justify-content:center; margin-top:2.5rem; }

/* ==========================================================================
   12 — FINAL CTA
   ========================================================================== */
.final{ padding:var(--sect) 0 4rem; }
.final-in{ display:grid; grid-template-columns:1fr 1.15fr; gap:1rem; }
.blob{ position:relative; background:var(--ink-2); color:#fff; border-radius:50% / 30%;
  min-height:31rem; display:grid; place-items:center; overflow:hidden; text-align:center; }
.blob .stack{ font-size:3.2rem; font-weight:500; letter-spacing:-.04em; line-height:1.05; opacity:.95; }
.blob .dial{ position:absolute; left:50%; top:50%; width:14rem; height:14rem; margin:-7rem 0 0 -7rem;
  border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.5) 0deg .4deg, transparent .4deg 4deg);
  -webkit-mask:radial-gradient(circle, transparent 0 46%, #000 46% 50%, transparent 50%);
          mask:radial-gradient(circle, transparent 0 46%, #000 46% 50%, transparent 50%); }
.blob .script{ position:absolute; bottom:2.2rem; left:0; right:0; }
.cta-card{ background:var(--violet); color:#fff; border-radius:var(--r-md); padding:2.5rem;
  display:flex; flex-direction:column; }
.cta-card .joinrow{ margin:0 0 auto; justify-content:flex-start; font-size:.95rem; }
.cta-card .avs span{ border-color:var(--violet); }
.cta-card h2{ font-size:clamp(2.6rem,5.4vw,4.6rem); font-weight:500; letter-spacing:-.04em; line-height:1.02; }
.cta-card p{ margin-top:1rem; font-size:1rem; }
.cta-card .go{ display:flex; gap:.5rem; margin-top:2.5rem; flex-wrap:wrap; }

/* ==========================================================================
   13 — FOOTER
   ========================================================================== */
footer{ padding-top:1rem; }
.foot-top{ display:grid; grid-template-columns:1.3fr repeat(3,.65fr); gap:2rem;
  padding-bottom:3rem; }
.foot-top > *{ min-width:0; }
.foot-top h4{ font-size:1.15rem; font-weight:500; margin-bottom:1.5rem; }
.foot-top a{ display:block; padding:.5rem 0; font-size:1rem; }
.foot-top a:hover{ text-decoration:underline; text-underline-offset:3px; }
.nlform{ display:flex; gap:.5rem; flex-wrap:wrap; }
.nlform input{ flex:1 1 12rem; min-width:0; height:3rem; padding:0 1rem; border:0;
  background:var(--grey); border-radius:.35rem; font:inherit; max-width:100%; }
.nlrow{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.nlrow .dot{ flex:none; }
.nlrow .dot{ width:26px; height:26px; border-radius:50%; background:var(--line-2); }
.nlrow u{ text-underline-offset:3px; }
.nlrow .btn{ margin-left:auto; }
.foot-actions{ display:flex; align-items:center; gap:.5rem; margin-top:2.5rem; flex-wrap:wrap; }
.foot-actions .soc{ display:flex; gap:.5rem; margin-left:1rem; }
@media (max-width:420px){ .foot-actions .soc{ margin-left:0; } }
.foot-actions .soc a{ width:34px; height:34px; border-radius:50%; background:var(--grey);
  display:grid; place-items:center; font-size:.85rem; }
.btn-coral{ background:var(--coral); color:#fff; }
.wordmark{ overflow:hidden; }
.wordmark span{ display:block; white-space:nowrap; font-size:clamp(6rem,20vw,17rem);
  font-weight:700; letter-spacing:-.05em; line-height:.8; color:var(--ink);
  will-change:transform; }
.legal{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem 0 1.5rem; flex-wrap:wrap; }
.legal .pills{ display:flex; gap:.5rem; }
.legal .pills a, .legal .by b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  background:var(--ink); color:var(--paper); padding:.32em .5em; border-radius:3px; }
.legal .by b{ background:var(--violet); margin-left:.25rem; font-weight:400; }
.legal .mid{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--muted); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  /* the fan stops descending before the strip does at this width */
  :root{ --arc-h:20.5rem; }
  .pair,.voices-in,.final-in{ grid-template-columns:1fr; }
  .why-top{ grid-template-columns:1fr; }
  .rows{ width:100%; }
  .trust .hd{ width:100%; }
  .appshot{ grid-template-columns:1fr; }
  .appshot .side{ display:none; }
}
@media (max-width:900px){
  :root{ --arc-h:17rem; }
  .arc{ margin-top:1rem; }
  .intro{ padding-top:1.5rem; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-top > *:first-child{ grid-column:1 / -1; }
  .card{ width:17rem; }
  .plans{ grid-template-columns:1fr; }
  .fcard{ padding:1.5rem 1rem 1rem; }
  .fcard p{ font-size:.9rem; }
  .reel-in .script{ left:auto; right:0; top:86%; }
  .upcard{ grid-template-columns:1fr 9.5rem; }
  .upcard .tags{ margin-bottom:1rem; }
  .upcard .shot{ min-height:6.5rem; }
  .upstage{ min-height:13.5rem; }
  .founder .dial{ width:20rem; height:20rem; margin-left:-10rem; }
  .founder .glow{ width:17rem; height:17rem; margin-left:-8.5rem; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  :root{ --pad:1rem; }
  :root{ --arc-h:14rem; }
  .arc{ margin-top:.5rem; }
  .card{ width:13.5rem; }
  .card .scr{ padding:.5rem; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:1.5rem; }
  .cta-card{ padding:1.5rem; }
  .tpanel{ padding:1.5rem; }
  /* at this width a display line has to be allowed to break mid-word,
     otherwise one long word sets the whole page's minimum width */
  h1,h2,h3,h4{ overflow-wrap:anywhere; }
  .tcard{ padding:1.5rem; }
  .tcard .body{ grid-template-columns:1fr; gap:1rem; }
  .tcard .who{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  .tcard .who .nm,.tcard .who .role{ margin-top:0; }
  /* newsletter and the contact block each take a full row so the email
     address isn't forced to break across two lines */
  .foot-top > *:first-child,
  .foot-top > *:last-child{ grid-column:1 / -1; }
  .row{ grid-template-columns:1fr; gap:.5rem; }
  /* the two words wrap around the thumbnail instead of stacking into a
     column, so the line still reads "Play — Reel" and the script has a
     clear row of its own beneath it */
  .reel-in{ flex-wrap:wrap; gap:.5rem 1rem; }
  .reel-thumb{ order:3; flex:0 0 100%; width:min(20rem,78vw); margin-inline:auto; }
  .reel-in .script{ order:4; position:static; flex:0 0 100%; text-align:center;
    margin-top:.5rem; }
  .ring{ display:none; }
  .joinrow{ flex-wrap:wrap; text-align:center; font-size:.95rem; }
  .stage{ height:22rem; }
  .founder{ padding:1.5rem; }
  /* the status line is the longest fixed string in this card — let it wrap
     and shrink a touch rather than clip on a narrow phone */
  .founder .fstatus{ font-size:clamp(.78rem,3.4vw,.92rem); flex-wrap:wrap; }
  .updates{ min-height:36rem; padding:2rem 1rem 2rem; }
  .upcard{ grid-template-columns:1fr; padding:1rem; width:88%; }
  .upcard h4{ font-size:1.2rem; }
  .upcard .tags{ margin-bottom:1rem; }
  .upcard .k{ margin-top:.5rem; }
  .upcard .shot{ min-height:4.75rem; }
  .upstage{ min-height:17rem; }
  /* the index rail drops below the drum — on a narrow panel a side rail would
     sit on top of the card */
  .upnav{ position:static; transform:none; flex-direction:row; gap:1rem;
    margin-top:1rem; }
  .updots{ flex-direction:row; gap:.15rem; }
  .updot{ padding:.45rem .3rem; }
  .updot::before{ width:1.5px; height:14px; }
  .updot[aria-selected="true"]::before{ width:1.5px; height:22px; }
  .uparrow{ width:2.4rem; height:2.4rem; }
}

/* ==========================================================================
   WORDPRESS INTEGRATION
   Everything above this line is the design as captured. Everything below it
   exists only because the page now renders inside WordPress: the admin bar,
   the block-editor alignment classes, screen-reader text and print.
   Keeping the two apart means a future design update can replace the block
   above wholesale without losing any of this.
   ========================================================================== */

/* Admin-bar offset and anchor scroll-margin now live in assets/css/nav.css,
   alongside the fixed nav whose height they are compensating for. */

/* --- accessibility ---------------------------------------------------------
   WordPress core markup and our skip link both expect .screen-reader-text. */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; width:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:.6rem; left:.6rem; z-index:200; clip-path:none;
  width:auto; height:auto; margin:0; padding:.7rem 1.1rem;
  background:var(--ink); color:var(--paper); border-radius:var(--r-sm);
}

/* --- editor alignment classes ---------------------------------------------
   Only relevant if the client ever drops a block into a home-page section,
   but cheap insurance against a stray float breaking the grid. */
.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ margin-inline:auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-family:var(--mono); font-size:11px; color:var(--muted); }

/* --- footer signup ---------------------------------------------------------
   The comp drew the consent control as a plain grey circle. It is a real
   checkbox here, styled to match exactly in its unchecked state so the design
   is unchanged, with a checked state added because the comp never had one.
   .foot-top a is display:block for the link columns, which would push the
   privacy link onto its own line inside the consent row — reset it. */
.nlrow input.dot{
  -webkit-appearance:none; appearance:none; margin:0; padding:0; cursor:pointer;
  border:0; transition:background .2s var(--ease);
}
.nlrow input.dot:checked{
  background:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:14px 14px; background-position:center; background-repeat:no-repeat;
}
.nlrow label{ cursor:pointer; }
.nlrow a{ display:inline; padding:0; }
.nlmsg{ margin-top:1rem; font-size:.95rem; }
.nlmsg.ok{ color:#2C6E3F; }
.nlmsg.bad{ color:var(--coral); }

/* --- print -----------------------------------------------------------------
   The page is a scroll experience; on paper it should read as a document.
   Drop the fixed chrome, the decorative rings and the drums, and let the
   revealed content be unconditionally visible. */
@media print{
  .navshell,.mega,.arc,.rule,.reel .ring,.upcursor,.upnav,.fdrag,.fguide,
  .sphere,.dial,.glow,.stamp,.logos,.stage,.sc-tags,footer .wordmark{ display:none !important; }
  html.js .rv,.rv{ opacity:1 !important; transform:none !important; }
  html.js .h1 .w>i,html.js .h1 .gl>i{ transform:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  section{ break-inside:avoid; padding-block:1rem !important; }
}

/* ==========================================================================
   PRICING — three "starting point" containers (no fixed prices)
   --------------------------------------------------------------------------
   Replaces the old two-card + Monthly/Per-project toggle. Each container says
   what is included and links to the contact form; the quote follows a scoping
   call. Built entirely from the existing home-page tokens so it sits on the
   dark pricing band exactly like the rest of the section.
   ========================================================================== */
.pricing .price-sub{ max-width:56ch; margin:1.25rem auto 0; color:var(--paper);
  opacity:.72; font-size:1.02rem; line-height:1.6; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
  margin-top:3rem; text-align:left; align-items:stretch; }
.tier{ background:var(--paper); color:var(--ink); border-radius:var(--r-md);
  padding:2rem 1.75rem; display:flex; flex-direction:column; min-height:24rem;
  position:relative; }
.tier.feat{ background:var(--violet); color:#fff; }
.t-badge{ align-self:flex-start; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; background:var(--grey);
  color:var(--ink); padding:.35em .6em; border-radius:var(--r-pill); }
.tier.feat .t-badge{ background:rgba(255,255,255,.22); color:#fff; }
.t-name{ font-size:1.9rem; font-weight:500; letter-spacing:-.03em;
  margin:1.25rem 0 .5rem; line-height:1.05; }
.t-for{ font-size:.98rem; line-height:1.5; opacity:.82; margin:0 0 1.4rem; }
.t-feat{ list-style:none; margin:0 0 1.75rem; padding:0; display:flex;
  flex-direction:column; gap:.65rem; font-size:.96rem; }
.t-feat li{ position:relative; padding-left:1.5rem; line-height:1.4; }
.t-feat li::before{ content:"\2713"; position:absolute; left:0; top:0;
  font-weight:700; color:var(--violet); }
.tier.feat .t-feat li::before{ color:var(--electric); }
.t-cta{ width:100%; margin-top:auto; justify-content:center; border-radius:.4rem; }
.tier.feat .t-cta.btn-violet{ background:#fff; color:var(--violet); }
.pricing .price-foot{ margin:2.25rem auto 0; max-width:48ch; color:var(--paper);
  opacity:.68; font-size:.95rem; line-height:1.5; }
.pricing .sc-cta{ margin-top:1.75rem; }

@media (max-width:900px){
  .tiers{ grid-template-columns:1fr; max-width:30rem; margin-inline:auto; }
}

/* ==========================================================================
   TOUCH TARGET & MOBILE SAFEGUARDS  (appended — home page)
   --------------------------------------------------------------------------
   Home buttons sit at 2.9rem (~49px) which is already a comfortable tap size;
   only the small variant (.btn-sm, ~40px) falls under the ~44px touch minimum
   from WCAG 2.5.5 / Apple / Google. Gated behind pointer:coarse so the mouse
   design is unchanged. On very small screens the final-CTA button pair stacks
   full width so each is easy to hit.
   ========================================================================== */
@media (pointer:coarse){
  .btn-sm{ min-height:44px; }
  a.btn, button.btn{ min-height:44px; }
}
@media (max-width:480px){
  .cta-card .go{ flex-direction:column; align-items:stretch; }
  .cta-card .go .btn{ width:100%; }
}
/* Belt-and-braces: nothing on the home page should cause sideways scroll. */
@media (max-width:640px){
  html, body{ overflow-x:hidden; }
}