/* ═════════════════════════════════════════════════════════
   TOKENS
   ═════════════════════════════════════════════════════════ */
:root{
  --paper:#f4f0e8;
  --paper-hi:#fbf8f2;
  --paper-2:#efe9de;
  --ink:#16150f;
  --ink-2:#57524a;
  --ink-3:#6f6859;
  --line:rgba(22,21,15,.13);
  --line-2:rgba(22,21,15,.075);
  --card:#e8e2d5;
  --dark:#141208;
  --dark-2:#1e1b11;
  --accent:#c2603a;          /* fills, rules, dots. non-text only */
  --accent-tx:#a54e2b;       /* accent as TEXT on paper (5.0:1 AA) */
  --accent-dk:#e08a5f;       /* accent as TEXT on the dark bands */
  --accent-fill:#a94f2a;     /* accent behind white text (5.5:1 AA) */
  --amber:#d98a4a;
  --sage:#4a6b57;

  --sans:'General Sans',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',monospace;
  --serif:'Instrument Serif',Georgia,serif;

  --gut:clamp(20px,4.4vw,52px);
  --max:1280px;
  --wide:1520px;
  /* one vertical scale for the whole site. Before this every section invented
     its own clamp, which is why the rhythm read as uneven. */
  --sec:clamp(84px,10.5vw,152px);      /* standard beat between sections */
  --sec-lg:clamp(104px,12.5vw,180px);  /* a full stop before a statement */
  --sec-sm:clamp(56px,6.8vw,98px);     /* a tighter beat inside a run */
  --sec-xs:clamp(40px,5vw,66px);       /* a thin band */
  /* the lens card width, and the edge fade that has to be able to cover a
     whole one of them. A row of cards clipped by a section is always going to
     cut the last card somewhere; the fade is what decides whether that reads
     as a peek or as a rendering fault. */
  --lens-w:clamp(238px,23vw,306px);
  --lens-fade:calc(var(--lens-w) + clamp(12px,1.5vw,20px));

  --sh-sm:0 1px 2px rgba(22,21,15,.05),0 4px 10px -4px rgba(22,21,15,.10);
  --sh-md:0 1px 1px rgba(22,21,15,.04),0 4px 8px -3px rgba(22,21,15,.06),0 14px 24px -10px rgba(22,21,15,.12);
  --sh-lg:0 2.8px 2.2px rgba(22,21,15,.026),0 6.7px 5.3px rgba(22,21,15,.036),0 12.5px 10px rgba(22,21,15,.045),0 22.3px 17.9px rgba(22,21,15,.055),0 41.8px 33.4px rgba(22,21,15,.066),0 90px 72px rgba(22,21,15,.10);
  /* faux-UI elevation: the hairline ring lives in the shadow, so no 1px border + wide blur */
  --sh-ui:0 0 0 1px rgba(22,21,15,.07),0 1px 1px -.5px rgba(22,21,15,.05),0 3px 3px -1.5px rgba(22,21,15,.05),
          0 6px 6px -3px rgba(22,21,15,.05),0 12px 12px -6px rgba(22,21,15,.05),0 24px 24px -12px rgba(22,21,15,.06);
  --sh-in:0 0 0 1px rgba(22,21,15,.06);
  --box:clamp(50px,5.2vw,64px);   /* spine node size, drives rail alignment */
  --box-top:30px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* no scroll-behavior:smooth here on purpose: it fights Lenis and the two of them
   together produce exactly the stutter this page was showing */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px;border-radius:3px}

/* ── living warm light: a drifting wash, then grain ─────── */
/* the gradients are already soft, so no CSS blur filter: blurring a fixed layer
   that also animates makes the compositor redraw it on every frame */
#wash{
  position:fixed;inset:-25vh 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 22%,rgba(194,96,58,.13),transparent 68%),
    radial-gradient(42% 34% at 84% 38%,rgba(217,138,74,.12),transparent 70%),
    radial-gradient(46% 32% at 46% 84%,rgba(194,96,58,.09),transparent 72%);
  will-change:transform;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 52% at 50% -10%,rgba(255,252,246,.92),rgba(255,252,246,0) 60%);
}
/* plain opacity, not mix-blend-mode: a full-viewport fixed blend layer forces the
   browser to recomposite the whole page on every scroll frame */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap.w{max-width:var(--wide)}
section{position:relative;z-index:1}
main{position:relative;z-index:1}

/* section-anchored glow. Driven by a class toggle and a CSS transition rather
   than a scrubbed tween: fifteen sections x two scrub triggers meant thirty
   blurred, section-sized layers recalculating on every scroll frame. */
.gl{position:absolute;inset:-14% 0;z-index:-1;pointer-events:none;opacity:0;
    transition:opacity 1.1s cubic-bezier(.22,1,.36,1);
    background:radial-gradient(46% 42% at 50% 46%,rgba(194,96,58,.16),transparent 70%)}
.gl.on{opacity:1}

/* cursor-following warm bloom, for panels and cards */
.bloom{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(194,96,58,.14),transparent 68%)}
:hover>.bloom{opacity:1}

/* ─────────── type ─────────── */
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;line-height:1.25}
em,.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h1{font-weight:600;font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.036em}
h2{font-weight:600;font-size:clamp(30px,4.5vw,58px);line-height:1.02;letter-spacing:-.033em}
h3{font-weight:600;font-size:clamp(24px,2.9vw,38px);line-height:1.06;letter-spacing:-.028em}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent-tx);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}

/* ─────────── cursor ─────────── */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;border-radius:100px;transform:translate(-50%,-50%);opacity:0}
.cur{width:36px;height:36px;border:1px solid rgba(22,21,15,.42);display:flex;align-items:center;justify-content:center}
.cur .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:0;white-space:nowrap;color:var(--ink)}
.cur-dot{width:5px;height:5px;background:var(--ink)}
body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:none}

/* ─────────── nav ─────────── */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--gut);border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,padding .45s ease;
}
nav.top.scr{background:rgba(244,240,232,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-color:var(--line-2);padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px;letter-spacing:-.035em}
.brand .mark{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink);position:relative;flex:none}
.brand .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.brand .tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--ink-3);box-shadow:var(--sh-in);border-radius:100px;padding:4px 8px;text-transform:uppercase}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--ink-2);font-size:15px;position:relative;padding:2px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:6px}
/* scroll progress hairline under the nav */
#prog{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;z-index:71;
  background:linear-gradient(90deg,var(--amber),var(--accent));pointer-events:none}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;padding:12px 22px;border-radius:100px;
  overflow:hidden;white-space:nowrap;will-change:transform;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}
.btn-dark{background:var(--ink);color:var(--paper-hi)}
.btn-dark .sh{position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);pointer-events:none}
.btn-dark:hover .sh{left:140%;transition:left .8s cubic-bezier(.22,1,.36,1)}
.btn-ghost{color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:0 0 0 1px var(--ink);background:rgba(255,255,255,.45)}
.btn .ar{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.btn:hover .ar{transform:translateX(3px)}
nav .btn-ghost{box-shadow:none;padding:12px 14px;color:var(--ink-2)}
nav .btn-ghost:hover{color:var(--ink);background:transparent}

/* ═════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════ */
.hero{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(104px,11vw,134px) 0 var(--sec-sm);position:relative;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,253,249,.72);
  box-shadow:var(--sh-in);border-radius:100px;padding:8px 16px 8px 13px;backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.eyebrow .d::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1px var(--accent);opacity:.4;animation:pulse 2.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
h1.hero-h{margin:clamp(20px,2.4vw,32px) auto 0;max-width:min(22ch,100%)}
h1.hero-h .l2{color:var(--ink-2)}
h1.hero-h em{font-size:1.05em;line-height:.9;color:var(--accent-tx)}
.hero .prod{max-width:58ch;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--ink-2);margin:clamp(18px,2vw,26px) auto 0}
.hero .prod b{font-weight:600;color:var(--ink)}
.sizzle{margin:clamp(16px,1.8vw,22px) auto 0;font-weight:600;font-size:clamp(18px,2vw,25px);letter-spacing:-.028em}
.sizzle .ser{color:var(--accent-tx)}
.hero-cta{display:flex;gap:11px;justify-content:center;align-items:center;margin-top:clamp(18px,2.1vw,25px);flex-wrap:wrap}
.clarity{
  margin-top:clamp(14px,1.7vw,22px);display:flex;gap:clamp(14px,2.2vw,30px);justify-content:center;flex-wrap:wrap;
  color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.clarity span{display:inline-flex;align-items:center;gap:8px}
.clarity span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7;flex:none}

/* floating reference cards, real work drifting around the promise */
/* Inset from the top so the drifting work clears the nav, and bounded at the
   bottom so the field ends above the product window instead of sliding under it. */
.floats{position:absolute;left:0;right:0;top:clamp(84px,9vw,116px);
  height:clamp(430px,52vh,600px);z-index:0;pointer-events:none}
.float{position:absolute;pointer-events:auto;will-change:transform;opacity:0}
.fin{position:relative;background:#fdfbf6;padding:6px 6px 5px;border-radius:9px;box-shadow:var(--sh-md);
     transition:box-shadow .5s cubic-bezier(.22,1,.36,1)}
.float:hover .fin{box-shadow:var(--sh-lg)}
.fin .pic{position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(140deg,#e9e3d6,#d7cfbd);width:100%;height:100%}
.fin .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.fin .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 2px 1px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fin .cap b{font-weight:400;color:var(--accent-tx)}
.float.f1{top:6%;left:1.5%}   .float.f1 .pic{width:146px;height:98px}
.float.f2{top:6%;left:13%}     .float.f2 .pic{width:92px;height:120px}
.float.f3{top:5.5%;right:13%}  .float.f3 .pic{width:112px;height:76px}
.float.f4{top:6%;right:1.5%}  .float.f4 .pic{width:140px;height:96px}
.float.f5{top:43%;left:1%}   .float.f5 .pic{width:100px;height:130px}
.float.f6{top:42%;right:1%}    .float.f6 .pic{width:108px;height:138px}
.float.f7{top:88%;left:7%}     .float.f7 .pic{width:124px;height:84px}
.float.f8{top:87%;right:6%}  .float.f8 .pic{width:96px;height:124px}

/* the inner-top pair sits closest to the headline column; below this width the
   three-line hero grows into their space, so they step out entirely */
@media(max-width:1560px){ .float.f2,.float.f3{display:none} }
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ink-3);margin-top:clamp(32px,4vw,54px)}
.scroll-cue .rail{width:1px;height:34px;background:linear-gradient(var(--line),transparent);position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;top:-34px;left:0;width:1px;height:34px;background:var(--accent);animation:cue 2.4s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(68px)}}

/* ═════════════════════════════════════════════════════════
   SHARED FAUX-UI SHELL
   ═════════════════════════════════════════════════════════ */
.ui{position:relative;background:var(--paper-hi);border-radius:16px;box-shadow:var(--sh-ui);overflow:hidden}
.ui-bar{height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;
  box-shadow:inset 0 -1px 0 var(--line-2);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);position:relative;z-index:4}
.ui-bar .dots{display:flex;gap:5px}
.ui-bar .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.ui-bar .dots i:first-child{background:rgba(194,96,58,.45)}
.ui-bar .live{display:inline-flex;align-items:center;gap:7px;color:var(--accent-tx)}
/* a static marker, not a pulse: these are mockups, so a throbbing dot would be
   pretending to be live data it does not have */
.ui-bar .live i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.ui-body{padding:16px;position:relative;z-index:2}
/* spans are used for tiles throughout, so they must be blockified explicitly:
   aspect-ratio has no effect on an inline box and the tile collapses to nothing */
.tile{display:block;position:relative;border-radius:7px;overflow:hidden;background:linear-gradient(140deg,#e9e3d6,#d8d0bd)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lbl.dim{opacity:.62}
.lbl.acc{color:var(--accent-tx)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:100px;background:var(--paper-2);
  box-shadow:var(--sh-in);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  transition:background .5s ease,box-shadow .5s ease,color .5s ease}
.pill.on{background:rgba(194,96,58,.11);box-shadow:0 0 0 1px rgba(194,96,58,.34);color:var(--accent-tx)}

/* section shell shared by every product surface */
.surf{padding-bottom:var(--sec);position:relative}
.surf-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:20px;color:var(--ink-3)}
.surf-head .rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left}
.surf-head .idx{color:var(--accent-tx)}
.surf-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,4.8vw,76px);
  align-items:center;padding:clamp(34px,4.2vw,58px) 0 0}
.surf.rev .surf-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.surf.rev .surf-body .screen{order:-1}
.surf .copy h3{margin:0 0 16px}
.surf .copy p{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.surf .copy .sub{margin-top:12px;font-size:15px;color:var(--ink-3)}
.surf .say{margin-top:clamp(20px,2.4vw,28px);display:inline-flex;align-items:center;gap:13px;
  font-size:clamp(17px,1.6vw,20px);font-weight:600;letter-spacing:-.025em}
.surf .say::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

/* ═════════════════════════════════════════════════════════
   THE UNDERSTANDING AGENT · the hero product window
   ═════════════════════════════════════════════════════════ */
/* No perspective here on purpose. The window used to scrub rotateX inside a
   perspective, which foreshortens the box: its rendered height changed on every
   frame (15 distinct heights measured across one scroll), so every glyph inside
   was resampled continuously. That was the jitter. It now moves by translation
   only, and owns its stacking context so it never interleaves with the floats. */
.agent-stage{width:100%;max-width:var(--wide);margin:clamp(18px,2.2vw,30px) auto 0;padding:0 var(--gut);
  position:relative;z-index:5;isolation:isolate}
.agent{will-change:transform}
.agent-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr) minmax(0,.94fr);
  min-height:clamp(360px,38vw,478px);text-align:left}
.pane{padding:15px 16px;display:flex;flex-direction:column;gap:12px;position:relative;min-width:0}
.pane+.pane{box-shadow:inset 1px 0 0 var(--line-2)}
.pane-h{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* left · the conversation */
.chat{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;overflow:hidden}
.msg{max-width:92%;font-size:13.5px;line-height:1.45;border-radius:12px;padding:9px 12px;position:relative}
.msg.a{align-self:flex-start;background:var(--paper-2);box-shadow:var(--sh-in);color:var(--ink-2);border-bottom-left-radius:4px}
.msg.u{align-self:flex-end;background:var(--ink);color:#f6f2ea;border-bottom-right-radius:4px}
.msg .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin-bottom:4px}
.msg.u .who{color:var(--amber);opacity:.85}
.typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;background:var(--paper-2);
  box-shadow:var(--sh-in);border-radius:12px;border-bottom-left-radius:4px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.45;display:block;
  animation:tdot 1.35s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:.9}}
.voice{display:flex;align-items:center;gap:11px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:100px;padding:8px 14px 8px 9px}
.mic{width:28px;height:28px;border-radius:50%;background:var(--accent-fill);flex:none;display:flex;
  align-items:center;justify-content:center;position:relative}
.mic svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.7}
.mic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--accent);
  opacity:.5;animation:pulse 2.4s cubic-bezier(.22,1,.36,1) infinite}
.wave{flex:1;display:flex;align-items:center;gap:2.5px;height:20px;min-width:0}
.wave i{flex:1;max-width:4px;min-height:3px;height:22%;border-radius:2px;background:var(--accent);opacity:.55;display:block;
  transform-origin:center;will-change:transform}

/* centre · show it */
.drop{flex:1;position:relative;border-radius:12px;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line-2);padding:12px;overflow:hidden}
.drop::after{content:"";position:absolute;inset:8px;border-radius:9px;border:1.4px dashed rgba(194,96,58,.28);
  pointer-events:none;opacity:.9}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:2}
.dref{position:relative;border-radius:7px;overflow:hidden;aspect-ratio:3/4;background:var(--card);
  box-shadow:0 3px 10px -4px rgba(22,21,15,.35),0 0 0 1px rgba(22,21,15,.05)}
.dref img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dref figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;
  background:linear-gradient(transparent,rgba(12,10,6,.82));color:#f3ede2;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;line-height:1.3}
.dref.fly{position:absolute;left:50%;top:14px;width:calc((100% - 40px)/3);margin-left:-16%;z-index:6}
.drop-note{margin-top:9px;display:flex;align-items:center;gap:7px;position:relative;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.drop-note i{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
/* what it pulled out of the frames you dropped, written as you drop them */
.extract{margin-top:11px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:2}
.extract .ex{display:flex;align-items:baseline;gap:9px;font-size:12px;line-height:1.4;color:var(--ink-2);opacity:0}
.extract .ex b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-tx);font-weight:400;flex:none;width:52px}
.drop-cta{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  background:rgba(251,248,242,.9);border-radius:100px;padding:6px 12px;box-shadow:var(--sh-in);white-space:nowrap}

/* right · the living library */
.lib{flex:1;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.lib-grp{opacity:0}
.lib-grp+.lib-grp{padding-top:10px;box-shadow:inset 0 1px 0 var(--line-2)}
.lib-grp .lbl{display:block;margin-bottom:7px}
.sw{display:flex;gap:4px}
.sw i{flex:1;height:20px;border-radius:4px;display:block;box-shadow:var(--sh-in)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips .pill{font-size:10px;padding:4px 9px}
.rules{display:flex;flex-direction:column;gap:6px}
.rule-l{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.rule-l b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-tx);flex:none;padding-top:2px;width:38px}
.rule-l.no b{color:var(--ink-3)}
.lib-count{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-top:10px;box-shadow:inset 0 1px 0 var(--line-2)}
.lib-count .n{font-weight:600;font-size:22px;letter-spacing:-.03em}
.lib-count .n b{color:var(--accent-tx);font-weight:600}

/* the caption strip under the window */
.agent-foot{max-width:var(--wide);margin:14px auto 0;padding:0 var(--gut);display:flex;
  align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}

/* ═════════════════════════════════════════════════════════
   CAPSTONE PUNCH
   ═════════════════════════════════════════════════════════ */
.punch{padding:var(--sec) 0;text-align:center;position:relative}
.punch p{font-weight:600;font-size:clamp(28px,4.6vw,60px);line-height:1.04;letter-spacing:-.036em;max-width:22ch;margin:0 auto}
.punch .ser{color:var(--accent-tx)}
.punch .rule{width:1px;height:clamp(40px,5vw,64px);background:linear-gradient(var(--line),transparent);margin:0 auto clamp(26px,3vw,40px)}

/* ═════════════════════════════════════════════════════════
   MANIFESTO / THE ENEMY
   ═════════════════════════════════════════════════════════ */
.manifesto{padding:var(--sec) 0;text-align:center;position:relative}
.manifesto p{font-weight:600;font-size:clamp(28px,4.6vw,60px);line-height:1.05;letter-spacing:-.036em;max-width:22ch;margin:22px auto 0}
.manifesto p .dim{color:var(--ink-3)}
.enemy{position:relative;padding:var(--sec-xs) 0;box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2)}
.enemy .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(20px,4vw,60px);align-items:center}
.enemy p{font-size:clamp(18px,2vw,25px);line-height:1.34;letter-spacing:-.026em;font-weight:500}
.enemy p .dim{color:var(--ink-3)}

/* ═════════════════════════════════════════════════════════
   THE SPINE
   ═════════════════════════════════════════════════════════ */
.ov{padding:var(--sec) 0 var(--sec-sm);position:relative}
.ov .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:20px}
.ov .head h2{max-width:17ch}
.ov .head p{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:40ch;
  box-shadow:inset 0 1px 0 var(--line-2);padding-top:18px}
.pipe{margin-top:clamp(34px,4.4vw,58px)}
.pipe-stage{position:relative;height:calc(var(--box-top) + var(--box) + 82px);padding-top:var(--box-top)}
.pipe-rail{position:absolute;left:10%;right:10%;top:calc(var(--box-top) + var(--box)/2);height:1px;background:var(--line)}
.pipe-fill{position:absolute;left:0;top:0;height:1px;width:0;background:linear-gradient(90deg,var(--amber),var(--accent));display:block}
/* above .pipe-work on purpose: the piece of work travels the rail and passes
   BEHIND each station, instead of covering it as it goes by */
.pipe-nodes{position:absolute;inset:var(--box-top) 0 0;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;z-index:6}
.node{display:flex;flex-direction:column;align-items:center;gap:11px;position:relative}
.node .box{
  width:var(--box);height:var(--box);border-radius:14px;background:var(--paper-hi);
  box-shadow:var(--sh-sm),var(--sh-in);display:flex;align-items:center;justify-content:center;
  transition:box-shadow .55s ease,background .55s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.node.soon .box{background:var(--paper);box-shadow:none;border:1.4px dashed var(--line)}
.node svg{width:22px;height:22px;stroke:var(--ink-2);fill:none;stroke-width:1.4;transition:stroke .55s ease}
.node .nm{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);transition:color .55s ease}
.node .st{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-tx);opacity:0;transition:opacity .5s ease}
/* active state is a crisp accent ring plus neutral elevation, never a coloured halo */
.node.on .box{background:#fff;transform:translateY(-3px);
  box-shadow:0 0 0 1.4px var(--accent),0 10px 22px -12px rgba(22,21,15,.34)}
.node.on.soon .box{background:var(--paper);border-color:rgba(194,96,58,.5);box-shadow:none}
.node.on svg{stroke:var(--accent-tx)}
.node.on .nm{color:var(--ink)}
.node.on .st{opacity:1}
.pipe-work{
  position:absolute;top:calc(var(--box-top) + var(--box)/2);left:10%;width:52px;height:40px;margin:-20px 0 0 -26px;border-radius:6px;
  overflow:hidden;background:var(--card);box-shadow:0 6px 18px -6px rgba(22,21,15,.4),0 0 0 3px rgba(251,248,242,.92);z-index:4
}
.pipe-work img{width:100%;height:100%;object-fit:cover}
.pipe-trail{position:absolute;top:calc(var(--box-top) + var(--box)/2);left:10%;height:3px;width:0;margin-top:-1.5px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(217,138,74,.6));z-index:3;filter:blur(1px)}
.pipe-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;color:var(--ink-3)}

/* ═════════════════════════════════════════════════════════
   HORIZONTAL REELS (reused from the portfolio, warm identity)
   ═════════════════════════════════════════════════════════ */
.reel-sec{position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0 var(--sec)}
.reel-sec.pin{padding-bottom:clamp(30px,3.6vw,54px)}
.reel-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;
  padding-bottom:clamp(18px,2.2vw,30px);box-shadow:inset 0 -1px 0 var(--line)}
.reel{display:flex;gap:clamp(10px,1.3vw,20px);padding:clamp(22px,2.8vw,40px) var(--gut) 0;will-change:transform}
.rl{flex:none;width:clamp(160px,16vw,236px);position:relative;display:block}
.rl .ph{display:block;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(140deg,#e9e3d6,#d8d0bd);
  aspect-ratio:3/4;box-shadow:var(--sh-in);transition:box-shadow .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rl .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl:hover .ph{box-shadow:0 0 0 1px rgba(194,96,58,.7),0 18px 34px -18px rgba(22,21,15,.5);transform:translateY(-7px)}
.rl .cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.rl .cap b{color:var(--accent-tx);font-weight:400}
.rl .ttl{display:block;padding-top:5px;font-size:14px;line-height:1.28;letter-spacing:-.012em;color:var(--ink)}
.reel-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(20px,2.6vw,34px) var(--gut) 0;color:var(--ink-3)}
.reel-prog{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;margin:22px var(--gut) 0}
.reel-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--accent))}

/* ═════════════════════════════════════════════════════════
   1 · YOUR CREATIVE LANGUAGE (the browsable library)
   ═════════════════════════════════════════════════════════ */
.cl-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:13px}
.cl-wall{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}
.cl-wall .tile{aspect-ratio:4/3}
.cl-panel{display:flex;flex-direction:column;gap:12px}
.meter{display:flex;flex-direction:column;gap:6px}
.meter .seg{display:flex;gap:3px}
.meter .seg i{width:100%;height:5px;border-radius:2px;background:var(--paper-2);box-shadow:var(--sh-in);display:block;transition:background .45s ease}
.meter .seg i.f{background:var(--accent)}
.edit{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);box-shadow:var(--sh-in);border-radius:100px;padding:4px 9px}

/* ═════════════════════════════════════════════════════════
   3 · CARRY IT TO YOUR TOOLS
   ═════════════════════════════════════════════════════════ */
.carry{position:relative}
.carry-top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.profile{background:var(--paper-2);border-radius:12px;box-shadow:var(--sh-in);padding:12px 14px;min-width:0}
.profile .nm{display:block;font-size:14px;font-weight:600;letter-spacing:-.018em;white-space:nowrap}
.fingerprint{display:flex;gap:3px;align-items:flex-end;height:22px;margin-top:8px}
.fingerprint i{width:4px;background:var(--accent);opacity:.55;border-radius:1.5px;display:block;height:0}
.wires{position:relative;height:96px}
.wires svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:var(--line);stroke-width:1.2}
.wires path.hot{stroke:url(#wireGrad);stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:0}
.tool-col{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool{background:var(--paper-hi);border-radius:10px;box-shadow:var(--sh-sm),var(--sh-in);padding:10px 11px;
  display:flex;flex-direction:column;gap:7px;transition:box-shadow .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.tool svg{width:17px;height:17px;stroke:var(--ink-3);fill:none;stroke-width:1.4;transition:stroke .5s ease}
.tool .t{font-size:12.5px;font-weight:500;letter-spacing:-.012em;line-height:1.25}
.tool.on{transform:translateY(-3px);box-shadow:0 0 0 1.4px var(--accent),0 12px 24px -14px rgba(22,21,15,.32)}
.tool.on svg{stroke:var(--accent-tx)}
.ba{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba-col .lbl{display:block;margin-bottom:8px}
.ba-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ba-row .tile{aspect-ratio:3/4}
/* the "without you" column is deliberately inert: a flat, characterless surface
   with a single dash, because that is exactly what generic output feels like */
.ba-col.generic .tile{background:#dcd7cd}
.ba-col.generic .tile::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;
  margin:0 0 0 -8px;background:rgba(22,21,15,.2)}

/* ═════════════════════════════════════════════════════════
   4 · REFINE YOUR THINKING
   ═════════════════════════════════════════════════════════ */
.conv{display:flex;flex-direction:column;gap:10px}
.conv .msg{max-width:88%;font-size:13.5px}
.verdict{margin-top:4px;background:rgba(194,96,58,.09);box-shadow:0 0 0 1px rgba(194,96,58,.26);
  border-radius:11px;padding:12px 13px;opacity:0}
.verdict .lbl{display:block;margin-bottom:6px}
.verdict p{font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:500;letter-spacing:-.014em}

/* ═════════════════════════════════════════════════════════
   5 · YOUR CREATIVE FINGERPRINT
   ═════════════════════════════════════════════════════════ */
.fp{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.fp-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:clamp(130px,14vw,178px)}
.fp-thumbs .tile{aspect-ratio:1/1}
.fp-body{min-width:0}
.fp-name{font-size:clamp(19px,2vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.fp-name .ser{color:var(--accent-tx)}
.fp-sub{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.fp-traits{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fp-sig{margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 var(--line-2);display:flex;
  align-items:flex-end;gap:3px;height:56px}
.fp-sig i{flex:1;max-width:9px;background:linear-gradient(var(--amber),var(--accent));opacity:.75;
  border-radius:2px;display:block;height:0}
.fp-foot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.copy-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;background:var(--ink);color:var(--paper-hi);
  border-radius:100px;padding:7px 12px;transition:background .4s ease,color .4s ease}
.copy-link.done{background:rgba(194,96,58,.14);color:var(--accent-tx)}

/* ═════════════════════════════════════════════════════════
   THE COMPACT QUARTET (features 6 to 9)
   ═════════════════════════════════════════════════════════ */
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.9vw,24px);
  padding-top:clamp(30px,3.8vw,50px)}
.qc{position:relative;display:flex;flex-direction:column}
.qc .ui{flex:1;display:flex;flex-direction:column}
.qc .ui-body{flex:1;display:flex;flex-direction:column;gap:10px;min-height:clamp(158px,15vw,190px)}
.qc-copy{padding-top:15px}
.qc-copy h4{font-size:clamp(18px,1.8vw,23px);font-weight:600;letter-spacing:-.026em;line-height:1.14}
.qc-copy p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:8px;max-width:44ch}
/* brief */
.brief{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center}
.brief .bl{height:7px;border-radius:4px;background:var(--paper-2);box-shadow:var(--sh-in);width:0;display:block}
.brief .bl.h{height:12px;background:rgba(194,96,58,.35);box-shadow:none}
.brief .src{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
/* research */
.res{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.res-col .lbl{display:block;margin-bottom:7px}
.res-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.res-row .tile{aspect-ratio:1/1}
.res-col.grey .tile{background:linear-gradient(150deg,#dcd7cd,#cec8bc)}
/* lenses */
.lens-sw{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:center}
.lens-row{display:flex;align-items:center;gap:10px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:9px;padding:9px 11px;transition:background .5s ease,box-shadow .5s ease}
/* the palette chip is a real component, not something three other components
   each happen to define. The scoped rules below stay as overrides. */
.sw-mini{display:flex;gap:2px;flex:none}
.sw-mini i{width:9px;height:9px;border-radius:2px;display:block}
.lens-row .sw-mini{display:flex;gap:2px;flex:none}
.lens-row .sw-mini i{width:9px;height:9px;border-radius:2px;display:block}
.lens-row .t{flex:1;font-size:13px;font-weight:500;letter-spacing:-.012em}
.lens-row .st{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);opacity:0}
.lens-row.on{background:rgba(194,96,58,.1);box-shadow:0 0 0 1px rgba(194,96,58,.3)}
.lens-row.on .st{opacity:1;color:var(--accent-tx)}
/* import */
.imp{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
.imp-src{display:flex;flex-wrap:wrap;gap:6px}
.imp-flow{position:relative;height:34px}
.imp-flow .ln{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.imp-flow .dot{position:absolute;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:0}
.imp-into{display:flex;align-items:center;gap:9px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:9px;padding:9px 11px}
.imp-into .n{font-weight:600;font-size:15px;letter-spacing:-.02em;color:var(--accent-tx)}

/* ═════════════════════════════════════════════════════════
   BEACHHEAD
   ═════════════════════════════════════════════════════════ */
.beach{padding:var(--sec) 0;text-align:center;position:relative;
  box-shadow:inset 0 1px 0 var(--line-2)}
.beach h2{max-width:17ch;margin:20px auto 0}
.beach p{max-width:56ch;margin:clamp(18px,2vw,26px) auto 0;font-size:clamp(16px,1.4vw,18.5px);
  line-height:1.6;color:var(--ink-2)}
.beach .who{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:clamp(24px,3vw,36px)}

/* ═════════════════════════════════════════════════════════
   THE HORIZON (dark band)
   ═════════════════════════════════════════════════════════ */
.horizon{background:var(--dark);color:#e9e3d5;padding:var(--sec) 0;position:relative;overflow:hidden}
.horizon::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 22% 8%,rgba(217,138,74,.16),transparent 66%),
             radial-gradient(50% 40% at 88% 82%,rgba(194,96,58,.14),transparent 70%)}
.horizon::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E")}
.horizon .wrap{position:relative;z-index:2}
.horizon .kicker{color:var(--accent-dk)}
.horizon h2{max-width:15ch;margin-top:20px}
.horizon .lede{max-width:50ch;margin-top:clamp(16px,1.8vw,24px);color:rgba(233,227,213,.68);
  font-size:clamp(16px,1.4vw,18.5px);line-height:1.6}
.hz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(40px,5vw,72px);
  background:rgba(233,227,213,.12)}
.hz{background:var(--dark);padding:clamp(20px,2.3vw,30px) clamp(16px,1.8vw,24px);position:relative;
  min-height:clamp(180px,17vw,214px);display:flex;flex-direction:column;
  transition:background .55s ease}
.hz:hover{background:var(--dark-2)}
.hz .n{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--accent-dk)}
.hz h3{margin-top:auto;font-size:clamp(17px,1.65vw,21px);font-weight:600;letter-spacing:-.026em;line-height:1.15;
  color:#f2ece0}
.hz p{margin-top:9px;font-size:13.5px;line-height:1.5;color:rgba(233,227,213,.6)}
.hz .glowline{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hz:hover .glowline{transform:scaleX(1)}
.hz-foot{margin-top:clamp(30px,3.6vw,46px);display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:rgba(233,227,213,.5)}

/* ═════════════════════════════════════════════════════════
   DIRECTOR BEAT
   ═════════════════════════════════════════════════════════ */
.dir{padding:var(--sec) 0;text-align:center;position:relative}
.dir h2{font-size:clamp(31px,5.2vw,66px);letter-spacing:-.036em;line-height:1.02;max-width:19ch;margin:22px auto 0}
.dir h2 .l2{color:var(--ink-3)}
.dir .body{max-width:60ch;margin:clamp(24px,3vw,36px) auto 0;font-size:clamp(16px,1.4vw,18.5px);line-height:1.62;color:var(--ink-2)}
.dir .kick{margin-top:clamp(28px,3.4vw,44px);font-weight:600;font-size:clamp(18px,2.1vw,27px);letter-spacing:-.03em}
.dir .kick .hi{color:var(--accent-tx)}
.dir .traits{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(26px,3.2vw,40px)}

/* ═════════════════════════════════════════════════════════
   CTA + FOOTER + MARQUEE
   ═════════════════════════════════════════════════════════ */
.marq{box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2);padding:clamp(20px,2.4vw,30px) 0;
  overflow:hidden;background:rgba(255,253,249,.4)}
.marq .track{display:flex;gap:clamp(26px,3.4vw,46px);white-space:nowrap;width:max-content;will-change:transform}
.marq .item{display:flex;align-items:center;gap:clamp(26px,3.4vw,46px);font-size:clamp(21px,2.5vw,34px);
  font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.marq .item .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.75;flex:none}
.marq .lead{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:400}

.cta{padding:var(--sec-lg) 0 var(--sec-sm);text-align:center;position:relative}
.cta h2{font-size:clamp(36px,6.2vw,84px);letter-spacing:-.04em;margin-top:22px}
.cta .sub{max-width:48ch;margin:22px auto 0;font-size:17px;color:var(--ink-2)}
.capstone{margin-top:clamp(44px,5.6vw,72px);padding-top:clamp(32px,4vw,46px);box-shadow:inset 0 1px 0 var(--line-2);
  font-weight:600;font-size:clamp(21px,2.8vw,36px);letter-spacing:-.032em}
.capstone .ser{color:var(--accent-tx)}
footer{padding:34px var(--gut) 46px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;box-shadow:inset 0 1px 0 var(--line-2);color:var(--ink-3)}
footer .brand{color:var(--ink-2);font-size:18px}
footer .brand .mark{border-color:var(--ink-3)}
footer .fl{display:flex;gap:22px;flex-wrap:wrap}
footer .fl a{color:var(--ink-3);transition:color .3s}
footer .fl a:hover{color:var(--ink)}
footer .fnote{font-size:13.5px;color:var(--ink-3);letter-spacing:-.005em}

/* ═════════════════════════════════════════════════════════
   HOW IT WORKS · the real mechanic, stated before the vision
   ═════════════════════════════════════════════════════════ */
.how{padding:var(--sec) 0 0;position:relative}
.how .head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-top:20px}
.how .head h2{max-width:19ch}
.how .head p{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:44ch;
  box-shadow:inset 0 1px 0 var(--line-2);padding-top:18px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.9vw,26px);
  margin-top:clamp(32px,4vw,54px)}
.step{display:flex;flex-direction:column;min-width:0}
.step .n{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-tx)}
.step h3{font-size:clamp(18px,1.85vw,24px);margin:12px 0 11px;line-height:1.12}
.step p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.step .ui{margin-top:clamp(22px,2.6vw,34px)}
.step .ui-body{min-height:clamp(150px,14.5vw,182px);display:flex;flex-direction:column;gap:14px}

/* 01 · capture */
.src-row{display:flex;flex-wrap:wrap;gap:5px}
.src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto}
.src-grid .tile{aspect-ratio:1/1}
/* 02 · understand */
.prof-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.prof-name b{font-size:14px;font-weight:600;letter-spacing:-.018em}
.prof-list{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.prof-row{display:flex;align-items:center;gap:8px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:8px;padding:7px 9px;font-size:12.5px;letter-spacing:-.01em}
.prof-row .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.prof-row.on .dot{background:var(--accent)}
.prof-row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 03 · carry */
.carry-list{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.carry-row{display:flex;align-items:center;gap:9px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:8px;padding:7px 9px;transition:background .5s ease,box-shadow .5s ease}
.carry-row .t{flex:1;min-width:0;font-size:12.5px;font-weight:500;letter-spacing:-.012em;white-space:nowrap}
.carry-row.on{background:rgba(194,96,58,.1);box-shadow:0 0 0 1px rgba(194,96,58,.3)}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;flex:none;
  border-radius:100px;padding:3px 8px;color:var(--ink-3);box-shadow:var(--sh-in)}
.carry-row.on .badge{color:var(--accent-tx);box-shadow:0 0 0 1px rgba(194,96,58,.3)}

/* the proof strip: the profile, and the two places it is already live */
.proof{margin-top:clamp(20px,2.4vw,30px);display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  flex-wrap:wrap;background:var(--paper-hi);box-shadow:var(--sh-ui);border-radius:14px;
  padding:clamp(13px,1.6vw,18px) clamp(15px,1.9vw,22px);position:relative}
.proof .lbl{flex:none}
.proof .pchips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:180px}
.proof .arw{flex:none;width:26px;height:1px;background:var(--accent);position:relative}
.proof .arw::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg)}
.proof .now{flex:none;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;letter-spacing:-.014em}
.proof .now i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* the tools reel: text plates, same reel mechanics as the imagery reels */
.trl{flex:none;display:flex;align-items:center;gap:12px;background:var(--paper-hi);box-shadow:var(--sh-ui);
  border-radius:12px;padding:13px 18px;white-space:nowrap;
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.trl:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(194,96,58,.5),0 16px 30px -18px rgba(22,21,15,.45)}
.trl .nm{font-size:15.5px;font-weight:600;letter-spacing:-.022em}
.trl .via{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.trl.more{background:transparent;box-shadow:0 0 0 1px var(--line);color:var(--ink-3)}

/* the bridge from what ships to what it becomes */
.bridge{padding:clamp(56px,7vw,104px) 0;text-align:center;position:relative;
  box-shadow:inset 0 1px 0 var(--line-2)}
.bridge p{font-weight:600;font-size:clamp(24px,3.6vw,46px);line-height:1.06;letter-spacing:-.034em;
  max-width:20ch;margin:18px auto 0}
.bridge p .dim{color:var(--ink-3)}

/* the flattening, shown rather than described: real work converging to the mean */
.converge{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(5px,.7vw,9px);
  margin-top:clamp(26px,3.2vw,40px)}
.converge .tile{aspect-ratio:3/4}
.converge .tile i{position:absolute;inset:0;z-index:2;display:block;background:#ded9cf;opacity:var(--f,0)}
.converge .tile.flat{background:#ded9cf}
.converge .tile.flat::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;
  margin-left:-7px;background:rgba(22,21,15,.16)}
.converge-cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:14px;color:var(--ink-3)}

/* ═════════════════════════════════════════════════════════
   CHAPTERS · the process, made legible while you scroll
   ═════════════════════════════════════════════════════════ */
.chapter{padding:var(--sec-sm) 0 clamp(26px,3.2vw,46px);position:relative}
.chapter .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end}
.chapter h2{font-size:clamp(29px,4vw,52px);max-width:14ch}
.chapter h2 .st{color:var(--accent-tx)}
.chapter .what{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:46ch;
  box-shadow:inset 0 1px 0 var(--line-2);padding-top:18px}
.mini-spine{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(18px,2.2vw,28px)}
.mini-spine b,.mini-spine a{font-weight:400;display:inline-flex;align-items:center;gap:7px;transition:color .5s ease}
.mini-spine b::before,.mini-spine a::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1px var(--line);
  flex:none;transition:background .5s ease,box-shadow .5s ease}
.mini-spine b.on{color:var(--accent-tx)}
.mini-spine b.on::before{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mini-spine b.soon{opacity:.55}
.mini-spine b.soon::before{box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px rgba(255,255,255,.9)}
/* the spine already looks like an index, so it may as well be one. This is the
   only route between product surfaces on a phone, where the nav collapses. */
.mini-spine a{color:inherit}
.mini-spine a:hover{color:var(--ink)}
.mini-spine a:hover::before{box-shadow:0 0 0 1px var(--accent-tx)}
.mini-spine .sep{width:14px;height:1px;background:var(--line);flex:none}

/* ═════════════════════════════════════════════════════════
   STRATA · itturae drifting past, as a breath between chapters
   ═════════════════════════════════════════════════════════ */
.strata{position:relative;overflow:hidden;padding:clamp(34px,4.4vw,64px) 0;
  box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2)}
.strata-row{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;padding:0 var(--gut);will-change:transform}
.strata-row+.strata-row{margin-top:clamp(10px,1.4vw,18px)}
.strata-row .st{flex:none;width:clamp(122px,12.5vw,186px);border-radius:8px;overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--sh-in);position:relative;background:var(--card)}
.strata-row .st img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strata::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(244,240,232,0) 16%,rgba(244,240,232,0) 84%,var(--paper) 100%)}
.strata-cap{position:absolute;left:0;right:0;top:50%;z-index:3;text-align:center;transform:translateY(-50%);pointer-events:none}
.strata-cap span{display:inline-block;background:rgba(249,246,240,.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-radius:100px;padding:11px 22px;box-shadow:var(--sh-in),var(--sh-sm);
  font-weight:600;font-size:clamp(15px,1.7vw,22px);letter-spacing:-.026em;max-width:calc(100% - 2*var(--gut))}
.strata-cap .ser{color:var(--accent-tx)}

/* ═════════════════════════════════════════════════════════
   THE ARC · one real project, completing as you scroll
   ═════════════════════════════════════════════════════════ */
.arc-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.7vw,20px);padding-top:28px}
.arc-line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.arc-line i{position:absolute;left:0;top:0;height:1px;width:0;display:block;
  background:linear-gradient(90deg,var(--amber),var(--accent))}
.arc-line i::after{content:"";position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2.5px var(--paper)}
.arc-step{position:relative;opacity:0}
.arc-step::before{content:"";position:absolute;top:-31px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--line);transition:background .5s ease,box-shadow .5s ease}
.arc-step.lit::before{background:var(--accent);transform:scale(1.25)}
/* set as a label, not as body copy: uppercase at 11px, so it matches every other
   mono label in the system and reads as furniture rather than a sentence */
.arc-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);transition:color .5s ease}
.arc-step.lit .n{color:var(--accent-tx)}
.arc-step h4{font-size:clamp(16px,1.55vw,20px);font-weight:600;letter-spacing:-.025em;margin:9px 0 5px;line-height:1.22}
.arc-step p{font-size:13px;line-height:1.5;color:var(--ink-3)}
.artifact{margin-top:14px;height:clamp(94px,9.4vw,116px);border-radius:10px;background:var(--paper-hi);
  box-shadow:var(--sh-sm),var(--sh-in);padding:9px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.artifact .word{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.45vw,19px);
  color:var(--ink-2);text-align:center;line-height:1.2}
.artifact .mini{display:grid;gap:4px;flex:1}
.artifact .mini.g3{grid-template-columns:repeat(3,1fr)}
.artifact .mini.g4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.artifact .mini .tile{border-radius:4px}
.artifact .skill{flex:1;border-radius:6px;background:var(--paper-2);box-shadow:var(--sh-in);
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px 9px}
.artifact .skill i{height:4px;border-radius:2px;background:var(--line);display:block}
.artifact .skill i:first-child{width:52%;height:6px;background:rgba(194,96,58,.45)}
.artifact .skill i:nth-child(3){width:74%}
.artifact .browser{flex:1;border-radius:5px;background:var(--paper-2);box-shadow:var(--sh-in);display:flex;flex-direction:column;overflow:hidden}
.artifact .browser .bb{height:10px;display:flex;align-items:center;gap:3px;padding:0 5px;box-shadow:inset 0 -1px 0 var(--line-2)}
.artifact .browser .bb i{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}
.artifact .browser .bc{flex:1;padding:6px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.artifact .browser .bc i{height:3px;border-radius:2px;background:var(--line);display:block}
.artifact .browser .bc i:first-child{width:56%;height:6px;background:rgba(194,96,58,.42)}
.artifact .browser .bc i:nth-child(3){width:72%}

/* the skill export card, inside the carry panel */
.skillcard{margin-top:12px;display:flex;align-items:center;gap:11px;background:var(--paper-2);
  box-shadow:var(--sh-in);border-radius:10px;padding:10px 12px}
.skillcard .ic{width:26px;height:26px;border-radius:7px;flex:none;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.skillcard .ic svg{width:13px;height:13px;stroke:var(--amber);fill:none;stroke-width:1.7}
.skillcard .t{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.skillcard .t b{color:var(--ink);font-weight:600}

/* reveal base */
.rv{opacity:0}
.msk{display:inline-block;overflow:hidden;vertical-align:top;
  /* the clip box has to reach past the baseline or descenders (g, y, p) get
     sheared off. The negative margin gives the space back so line spacing,
     and the distance the word travels on reveal, are both unchanged. */
  padding-bottom:.24em;margin-bottom:-.24em}
/* deliberately no will-change on split words or parallax layers: the manifesto
   alone splits into ~50 spans, and permanently promoting every one of them (plus
   every parallax layer) put well over a hundred composited layers on the page */
.msk>span{display:inline-block}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */
@media(max-width:1200px){
  .agent-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .pane-lib{grid-column:1/-1;box-shadow:inset 0 1px 0 var(--line-2)}
  .lib{flex-direction:row;flex-wrap:wrap;gap:14px 22px}
  .lib-grp{flex:1;min-width:170px}
  .lib-grp+.lib-grp{padding-top:0;box-shadow:none}
  .lib-count{width:100%;margin-top:0}
  .hz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px){
  .ov .head,.enemy .row{grid-template-columns:1fr;gap:22px}
  .ov .head p{max-width:52ch}
  .float.f2,.float.f3{display:none}
  .cl-grid{grid-template-columns:1fr}
  .quad{grid-template-columns:1fr}
}
@media(max-width:900px){
  body{font-size:16px}
  body.cursor-on{cursor:auto}.cur,.cur-dot{display:none}
  .nav-links,nav .btn-ghost{display:none}
  .brand .tag{display:none}
  nav .btn-dark{padding:10px 17px;font-size:13.5px}
  .hero{padding:104px 0 64px}
  .floats{position:static;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
          gap:14px;order:2;margin-top:clamp(30px,5vw,44px);padding:0 var(--gut)}
  .float{position:static!important;top:auto;left:auto;right:auto;bottom:auto}
  .float .pic{width:84px!important;height:108px!important}
  .float.f2,.float.f3,.float.f5,.float.f6,.float.f7{display:none}
  /* the hero is a flex column here, so every child needs an explicit order or it
     defaults to 0 and jumps ahead of the ordered ones */
  .hero .wrap{order:1}
  .agent-stage{order:3;perspective:none}
  .agent-foot{order:4}
  .scroll-cue{order:5;display:none}
  .clarity{gap:9px 16px;flex-direction:column;align-items:center}
  .agent-grid{grid-template-columns:1fr;min-height:0}
  .pane+.pane{box-shadow:inset 0 1px 0 var(--line-2)}
  .pane-lib{grid-column:auto}
  .lib{flex-direction:column}
  .chat{min-height:220px}
  .drop{min-height:210px}
  .surf-body{grid-template-columns:1fr!important;gap:26px;padding-top:24px}
  .surf.rev .surf-body .screen{order:0}
  .surf .copy p{max-width:none}
  .pipe-stage{height:auto;padding-top:0}
  .pipe-rail,.pipe-work,.pipe-trail{display:none}
  .pipe-nodes{position:static;grid-template-columns:1fr 1fr;gap:24px 12px}
  .carry-top{grid-template-columns:1fr;gap:12px}
  .wires{display:none}
  .ba,.res{grid-template-columns:1fr}
  .fp{grid-template-columns:1fr}
  .fp-thumbs{width:100%;grid-template-columns:repeat(4,1fr)}
  .how .head{grid-template-columns:1fr;gap:20px;align-items:start}
  .how .head p{max-width:none}
  .steps{grid-template-columns:1fr;gap:30px}
  .step .ui-body{min-height:0}
  .proof{flex-direction:column;align-items:flex-start;gap:12px}
  .proof .arw{transform:rotate(90deg);margin-left:10px}
  .converge{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chapter .row{grid-template-columns:1fr;gap:20px;align-items:start}
  .chapter .what{max-width:none}
  .mini-spine{gap:7px}
  .mini-spine .sep{width:9px}
  /* the connector reads as a row; stacked, each step takes its own rule instead */
  .arc-track{grid-template-columns:1fr 1fr;row-gap:32px;padding-top:0}
  .arc-line{display:none}
  .arc-step::before{display:none}
  .arc-step{box-shadow:inset 0 1px 0 var(--line);padding-top:18px}
  footer{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(max-width:640px){
  .hz-grid{grid-template-columns:1fr}
  .hz{min-height:0}
}
@media(max-width:520px){
  .marq .item{font-size:20px;gap:22px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .float .pic{width:72px!important;height:92px!important}
  .pipe-nodes{grid-template-columns:1fr;gap:11px}
  .node{flex-direction:row;gap:14px;justify-content:flex-start}
  .node .box{--box:44px}
  .node svg{width:18px;height:18px}
  .tool-col{grid-template-columns:1fr 1fr}
  .dgrid{gap:6px}
  .arc-track{grid-template-columns:1fr;row-gap:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv,.float,.lib-grp,.verdict,.msg,.arc-step,.extract .ex{opacity:1!important}
  .scroll-cue .rail::after{display:none}
  .strata{overflow-x:auto}
}

/* ═════════════════════════════════════════════════════════
   MARKETPLACE · lenses to share, sell or rent
   Two surfaces share this: the teaser beat on the home page and
   the marketplace tab. Same components, different density.
   ═════════════════════════════════════════════════════════ */
.mkt{padding:var(--sec) 0 var(--sec-sm);position:relative}
.mkt .head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-top:20px}
.mkt .head h2{max-width:14ch}
.mkt .head p{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:46ch;
  box-shadow:inset 0 1px 0 var(--line-2);padding-top:18px}

/* the filter rail. Static by design, but it has to look operable. */
.filters{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);flex-wrap:wrap;
  margin-top:clamp(26px,3.2vw,40px);padding-bottom:clamp(16px,2vw,24px);
  box-shadow:inset 0 -1px 0 var(--line-2)}
.filters .grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filters .grp>.lbl{margin-right:3px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;
  background:var(--paper-2);box-shadow:var(--sh-in);font-size:13px;letter-spacing:-.012em;
  color:var(--ink-2);cursor:pointer;
  transition:background .4s ease,box-shadow .4s ease,color .4s ease}
.fchip:hover{background:rgba(255,255,255,.6)}
.fchip.on{background:var(--ink);color:var(--paper-hi);box-shadow:none}
.fchip .sw-mini{display:flex;gap:2px;flex:none}
.fchip .sw-mini i{width:8px;height:8px;border-radius:2px;display:block}
.filters .count{margin-left:auto;color:var(--ink-3)}

/* the lens card, the unit of the whole marketplace */
.lens-card{flex:none;width:var(--lens-w);background:var(--paper-hi);border-radius:14px;
  box-shadow:var(--sh-ui);overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.lens-card:hover{transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(194,96,58,.45),0 22px 40px -22px rgba(22,21,15,.5)}
.lens-card .thumbs{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;aspect-ratio:16/10;background:var(--card)}
.lens-card .thumbs .tile{border-radius:0}
.lens-card .thumbs .tile:first-child{grid-row:1/3}
.lens-card .body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.lens-card .who{display:flex;align-items:center;gap:9px}
.lens-card .av{width:26px;height:26px;border-radius:50%;flex:none;background:var(--card);
  overflow:hidden;position:relative;box-shadow:var(--sh-in)}
.lens-card .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lens-card .nm{font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.2}
.lens-card .by{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.lens-card .verified{width:13px;height:13px;flex:none;border-radius:50%;background:var(--accent-fill);
  display:flex;align-items:center;justify-content:center}
.lens-card .verified svg{width:7px;height:7px;stroke:#fff;fill:none;stroke-width:3}
.lens-card .sw{gap:3px}
.lens-card .sw i{height:14px;border-radius:3px}
.lens-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding-top:11px;box-shadow:inset 0 1px 0 var(--line-2)}
.lens-card .price{font-size:13.5px;font-weight:600;letter-spacing:-.016em}
.lens-card .price s{font-weight:400;color:var(--ink-3);margin-right:5px}
.lens-card .use{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper-hi);border-radius:100px;padding:7px 12px;white-space:nowrap;
  transition:background .4s ease}
.lens-card:hover .use{background:var(--accent-fill)}
.lens-card .tag{position:absolute;top:10px;left:10px;z-index:3;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(251,248,242,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:100px;padding:5px 10px;color:var(--ink-2);box-shadow:var(--sh-in)}
.lens-card.flag{box-shadow:0 0 0 1.4px var(--accent),var(--sh-ui)}
.lens-card.flag .tag{background:var(--accent-fill);color:#fff;box-shadow:none}

/* the wall reuses the reel rails so it inherits the same scroll motion */
.wall{display:flex;gap:clamp(12px,1.5vw,20px);padding:clamp(24px,3vw,40px) var(--gut) 0;will-change:transform}

/* the featured lens: one creator, opened up */
.feature{margin-top:clamp(40px,5vw,72px)}
.feat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3.4vw,52px);
  align-items:start;padding-top:clamp(26px,3.2vw,42px)}
.feat-who{display:flex;align-items:center;gap:13px}
.feat-who .av{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;position:relative;
  background:var(--card);box-shadow:var(--sh-in)}
.feat-who .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-who h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.feat-eye{margin-top:clamp(16px,2vw,24px);font-size:clamp(17px,1.6vw,21px);line-height:1.4;
  letter-spacing:-.022em;color:var(--ink)}
.feat-eye .ser{color:var(--accent-tx)}
.feat-note{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.feat-refs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:clamp(18px,2.2vw,26px)}
.feat-refs .tile{aspect-ratio:3/4}
/* the exports: this is the part that has to read as real, not as vapour */
.exports{display:flex;flex-direction:column;gap:7px}
.export{display:flex;align-items:center;gap:11px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:10px;padding:11px 13px;transition:background .5s ease,box-shadow .5s ease}
.export .ic{width:28px;height:28px;border-radius:8px;flex:none;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.export .ic svg{width:14px;height:14px;stroke:var(--amber);fill:none;stroke-width:1.7}
.export .t{flex:1;min-width:0}
.export .t b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.016em}
.export .t span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.export.on{background:rgba(194,96,58,.09);box-shadow:0 0 0 1px rgba(194,96,58,.28)}

/* two-sided value: the whole point of a marketplace stated in one strip */
.sided{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.9vw,24px);
  margin-top:clamp(40px,5vw,72px)}
.side{background:var(--paper-hi);border-radius:16px;box-shadow:var(--sh-ui);
  padding:clamp(20px,2.4vw,30px);position:relative;overflow:hidden}
.side .n{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-tx)}
.side h3{font-size:clamp(19px,2vw,26px);margin:11px 0 9px;line-height:1.14}
.side p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.side ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.side li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.side li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:7px}

/* the home-page teaser: same cards, one tight beat, then out to the tab */
.mkt-teaser{padding:var(--sec) 0 var(--sec);position:relative}
.mkt-teaser .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);
  align-items:end}
.mkt-teaser h2{max-width:15ch}
.mkt-teaser p{color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:48ch;margin-top:16px}
.teaser-wall{display:flex;gap:clamp(12px,1.5vw,20px);padding:clamp(24px,3vw,38px) var(--gut) 0;
  will-change:transform}

@media(max-width:1080px){
  .mkt .head,.feat-grid,.sided,.mkt-teaser .row{grid-template-columns:1fr;gap:22px;align-items:start}
  .mkt .head p,.mkt-teaser p{max-width:none}
}
@media(max-width:900px){
  .filters{gap:8px}
  .filters .count{margin-left:0;width:100%}
  .lens-card{width:clamp(220px,72vw,268px)}
  :root{--lens-w:clamp(220px,72vw,268px)}
  .feat-refs{grid-template-columns:repeat(4,1fr)}
}

/* the teaser row is a peek: it fades out at the edge rather than being cut off,
   and the CTA carries the action instead of a scrub */
.mkt-teaser{overflow:hidden}
.teaser-wall{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.teaser-wall::-webkit-scrollbar{display:none}
/* The shell is static and hugs the card row, so the fade covers the cards and
   nothing else. It is as wide as a whole card, which is what stops a partial
   card ever ending in a hard edge, and it stays clear for the first 40% so it
   reads as a card receding rather than a curtain across the row. */
.wall-shell{position:relative}
.wall-shell::after{content:"";position:absolute;right:0;top:0;bottom:0;width:var(--lens-fade);
  z-index:4;pointer-events:none;
  /* The ramp is late and steep on purpose. A fade wide enough to swallow a
     sliced card will always overlap the card before it, so it stays clear
     across the first half and does its work in the last third: gentle on a
     whole card sitting at the edge, decisive on a cut one. */
  background:linear-gradient(90deg,rgba(244,240,232,0) 0%,rgba(244,240,232,0) 52%,rgba(244,240,232,.42) 74%,var(--paper) 96%)}
.mkt{overflow:hidden}

/* ═════════════════════════════════════════════════════════
   AGENT RUN · what a fleet of agents makes, in your voice
   The point of this panel is the generation step: the lens is
   served to the generator, so automated output is still yours.
   ═════════════════════════════════════════════════════════ */
.agentrun{display:flex;flex-direction:column;gap:6px}
.arow{display:flex;align-items:center;gap:10px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:9px;padding:9px 11px;transition:background .5s ease,box-shadow .5s ease}
.arow .tick{width:16px;height:16px;border-radius:50%;flex:none;background:var(--line);
  display:flex;align-items:center;justify-content:center;transition:background .5s ease}
.arow .tick svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:opacity .4s ease}
.arow.done .tick{background:var(--accent-fill)}
.arow.done .tick svg{opacity:1}
.arow .t{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.012em}
.arow .via{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.arow.gen{background:rgba(194,96,58,.09);box-shadow:0 0 0 1px rgba(194,96,58,.3);
  flex-wrap:wrap;row-gap:0}
.arow.gen .via{color:var(--accent-tx)}
.genout{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%;margin-top:9px}
.genout .tile{aspect-ratio:1/1;opacity:0}
.genout .tile.grey{background:#dcd7cd}
.genout .tile.grey::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;
  margin-left:-6px;background:rgba(22,21,15,.18)}
.gen-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.gen-cmp .lbl{display:block;margin-bottom:6px}

/* which page you are on, stated in the nav. Without this the tabs give no
   sense of place, and on a sub-page there is no visible route back home. */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;background:var(--accent)}

/* ═════════════════════════════════════════════════════════
   BETA STATUS · the indicator carries its own hierarchy:
   filled pill (what stage) > state (when) > sub (what that means)
   ═════════════════════════════════════════════════════════ */
.eyebrow.beta{gap:0;padding:5px 16px 5px 5px}
.pill-beta{display:inline-flex;align-items:center;gap:7px;background:var(--accent-fill);color:#fff;
  border-radius:100px;padding:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;flex:none}
.pill-beta i{width:6px;height:6px;border-radius:50%;background:#fff;flex:none;position:relative}
.pill-beta i::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.85);opacity:.5;
  animation:pulse 2.6s cubic-bezier(.22,1,.36,1) infinite}
.beta-state{color:var(--ink);margin-left:13px}
.beta-sub{color:var(--ink-3);margin-left:11px;padding-left:11px;box-shadow:inset 1px 0 0 var(--line)}
.devnote{margin:clamp(12px,1.4vw,17px) auto 0;max-width:52ch;font-size:14px;line-height:1.5;
  color:var(--ink-3);letter-spacing:-.005em}
/* keeps a short tail from orphaning onto a line of its own */
.nb{white-space:nowrap}
@media(max-width:640px){
  .eyebrow.beta{flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 14px 8px 6px}
  .beta-state{margin-left:8px}
  .beta-sub{margin-left:0;padding-left:0;box-shadow:none;width:100%;text-align:center}
}

/* the same install treatment as the marketplace, sized for the narrow step column:
   the point is that you can see WHAT lands in each tool, not just that it connects */
.exports.compact .export{padding:9px 10px;gap:9px;align-items:flex-start}
.exports.compact .export .ic{width:24px;height:24px;border-radius:7px;margin-top:1px}
.exports.compact .export .ic svg{width:12px;height:12px}
.exports.compact .export .t b{font-size:13px;line-height:1.25}
.exports.compact .export .t span{font-size:12.5px;margin-top:2px;line-height:1.35}

/* ═════════════════════════════════════════════════════════
   THE PILLARS · four named parts, two up. Wider than the old
   three-across steps, so each panel can carry real detail.
   ═════════════════════════════════════════════════════════ */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5.4vw,88px);margin-top:clamp(52px,6.4vw,92px)}
.pillars .step p{max-width:44ch}

/* 01 · the linked folder: the way in for people who will not change tools */
.folder{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);box-shadow:var(--sh-in);border-radius:8px;padding:8px 11px}
.folder svg{width:15px;height:15px;stroke:var(--accent-tx);fill:none;stroke-width:1.5;flex:none}
.files{display:flex;flex-direction:column;gap:7px}
.file{display:flex;align-items:center;gap:10px;background:var(--paper-hi);box-shadow:var(--sh-in);
  border-radius:8px;padding:8px 10px;font-size:13px;letter-spacing:-.012em;color:var(--ink-2);
  transition:background .5s ease,box-shadow .5s ease}
.file b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);
  flex:none;width:38px;font-weight:400}
.file.on{background:rgba(194,96,58,.09);box-shadow:0 0 0 1px rgba(194,96,58,.26)}
.file.on b{color:var(--accent-tx)}

/* 02 · the style catalog, with strength that visibly grows */
.styles{display:flex;flex-direction:column;gap:6px}
.style-row{display:flex;align-items:center;gap:10px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:8px;padding:9px 11px;opacity:0}
.style-row .sw-mini{display:flex;gap:2px;flex:none}
.style-row .sw-mini i{width:9px;height:9px;border-radius:2px;display:block}
.style-row .t{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.style-row .str{flex:none;width:clamp(38px,5vw,64px);height:4px;border-radius:2px;
  background:var(--line-2);overflow:hidden}
.style-row .str i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* 03 · studio: what it gives back before any AI tool is involved */
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rec{display:block;opacity:0}
.rec .tile{aspect-ratio:4/3}
.rec .why{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-tx);line-height:1.3}
.iters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.it{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper-2);box-shadow:var(--sh-in);border-radius:6px;
  padding:5px 8px;flex:none;transition:background .5s ease,color .5s ease,box-shadow .5s ease}
.it.on{background:var(--accent-fill);color:#fff;box-shadow:none}
.itnote{font-size:12.5px;color:var(--ink-3);letter-spacing:-.008em;margin-left:4px}

@media(max-width:1080px){ .pillars{grid-template-columns:1fr;gap:34px} }
@media(max-width:520px){
  .recs{grid-template-columns:1fr 1fr}
  .rec:last-child{display:none}
  .itnote{margin-left:0;width:100%;margin-top:4px}
}

/* the turn between the mechanic (steps 1-2) and the payoff (step 3).
   Spans the grid so the two halves of the story read as two halves. */
.pillars .turn{grid-column:1/-1;padding-top:clamp(14px,2vw,26px);
  box-shadow:inset 0 1px 0 var(--line-2);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.8vw,44px);align-items:baseline}
.pillars .turn h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1;
  margin-top:12px;grid-column:1}
.pillars .turn .kicker{grid-column:1;grid-row:1}
.pillars .turn p{grid-column:2;grid-row:1/3;align-self:end;color:var(--ink-2);
  font-size:16.5px;line-height:1.6;padding-bottom:4px}
@media(max-width:1080px){
  .pillars .turn{grid-template-columns:1fr;gap:8px}
  .pillars .turn h3,.pillars .turn .kicker,.pillars .turn p{grid-column:1;grid-row:auto}
}

/* every value on the home page opens the part of the product that delivers it,
   so nobody mistakes the overview for the whole thing */
.see{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-tx);padding-bottom:3px;box-shadow:inset 0 -1px 0 rgba(165,78,43,.35);
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),gap .45s cubic-bezier(.22,1,.36,1)}
.see svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.see:hover{gap:12px;box-shadow:inset 0 -1px 0 var(--accent-tx)}

/* ── a lens is never finished: the same style, four reads apart ── */
.sharpen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4.4vw,72px);align-items:center;padding:clamp(46px,5.6vw,84px) 0 0}
.sharpen h3{margin:16px 0 14px}
.sharpen p{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.growth{display:flex;flex-direction:column;gap:9px}
.grow-row{display:flex;align-items:center;gap:14px;opacity:0}
.grow-row .when{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);flex:none;width:74px}
.grow-row .bar{flex:1;height:7px;border-radius:4px;background:var(--paper-2);
  box-shadow:var(--sh-in);overflow:hidden}
.grow-row .bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--amber),var(--accent))}
.grow-row .val{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent-tx);
  flex:none;width:22px;text-align:right}

/* ── the profile is a real object in the platform, not an abstraction ── */
.profcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,30px);background:var(--paper-hi);border-radius:14px;
  box-shadow:var(--sh-ui);padding:15px 18px}
.pc-mark{width:38px;height:38px;border-radius:11px;flex:none;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.pc-mark svg{width:19px;height:19px;stroke:var(--amber);fill:none;stroke-width:1.5}
.pc-t{display:flex;flex-direction:column;gap:7px;flex:none}
.pc-t b{font-size:14px;font-weight:600;letter-spacing:-.018em}
.pc-t .sw{gap:3px}
.pc-t .sw i{width:22px;height:13px;border-radius:3px}
.pc-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-meta b{color:var(--accent-tx);font-weight:400}
.pc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}

@media(max-width:1080px){ .sharpen{grid-template-columns:1fr;gap:26px} }

/* ── a studio working under one shared lens ── */
.seats{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.seat{display:flex;align-items:center;gap:10px;background:var(--paper-2);box-shadow:var(--sh-in);
  border-radius:9px;padding:9px 11px;opacity:0}
.seat .ini{width:28px;height:28px;border-radius:50%;flex:none;background:var(--ink);color:var(--paper-hi);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em}
.seat .sn{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .sr{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
@media(max-width:520px){ .seats{grid-template-columns:1fr} }

/* the home page's forward-looking beat: dark band, three cards, then out to the
   product page. Short on purpose so the overview never turns into a manifesto. */
.horizon .lede{max-width:52ch;margin-top:clamp(14px,1.6vw,20px);color:rgba(233,227,213,.68);
  font-size:clamp(16px,1.4vw,18.5px);line-height:1.6}
#whatsnext .hz-grid{margin-top:clamp(34px,4.2vw,58px)}
/* three across, but only where three fit. This was an inline style, which
   outranked the responsive rules and left the cards three abreast at 390px with
   one word per line. */
.hz-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){ .hz-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:620px){ .hz-grid.three{grid-template-columns:1fr} }

/* each product section says which part of the tool it performs, so the spine
   verbs and the concrete section names describe the same thing */
.does{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-left:auto;padding-left:14px;
  box-shadow:inset 1px 0 0 var(--line);white-space:nowrap}
@media(max-width:900px){ .does{margin-left:0;padding-left:0;box-shadow:none;width:100%;margin-top:6px} }

/* ══════════════════════════════════════════════════════════
   PRODUCT DROPDOWN
   The product is several surfaces now, so the nav has to name
   them. CSS only, on hover and focus-within, so it works with
   JavaScript off and keyboard-only. Tapping the parent still
   goes to the product page, which is the mobile behaviour.
   ══════════════════════════════════════════════════════════ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:6px}
.nav-item .chev{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .4s cubic-bezier(.22,1,.36,1);opacity:.6}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:translateY(1px) rotate(180deg)}

.navdrop{
  position:absolute;top:100%;left:-18px;z-index:60;
  /* the gap between the link and the panel is padding on the panel itself, so a
     diagonal mouse move never crosses dead space and closes it */
  padding-top:16px;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s .34s;
}
.nav-item:hover .navdrop,.nav-item:focus-within .navdrop{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.navdrop-in{
  width:334px;padding:10px;border-radius:16px;background:rgba(252,250,245,.92);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(22,21,15,.06);
  display:flex;flex-direction:column;gap:1px}
.navdrop a{
  display:block;padding:10px 13px;border-radius:10px;
  transition:background .3s ease;color:var(--ink)}
.navdrop a::after{content:none}
.navdrop a:hover,.navdrop a:focus-visible{background:var(--paper-2)}
.navdrop a b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.navdrop a span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.navdrop a.acc b{color:var(--accent-tx)}
.navdrop .navdrop-sep{height:1px;background:var(--line);margin:6px 13px}

/* ══════════════════════════════════════════════════════════
   CRAFT · the standard, next to the taste
   ══════════════════════════════════════════════════════════ */
.crafts{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
.craft{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border-radius:12px;
  background:var(--paper-hi);box-shadow:var(--sh-sm),var(--sh-in);opacity:0;transform:translateY(12px)}
.craft.on{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.craft .ic{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(194,96,58,.12);box-shadow:inset 0 0 0 1px rgba(194,96,58,.22)}
.craft .ic svg{width:16px;height:16px;stroke:var(--accent-tx);fill:none;stroke-width:1.6}
.craft b{display:block;font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.3}
.craft span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}

/* the beat that makes Craft a product and not a slogan: one half of a profile
   can be tested by a machine, the other half never can */
.gate{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch}
.gate-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.gate-rule{width:1px;background:var(--line);align-self:stretch}
.chk{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:9px;
  background:var(--paper-2);box-shadow:var(--sh-in);font-size:13px;line-height:1.4;color:var(--ink-2);
  opacity:0;transform:translateY(8px)}
.chk.on{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.chk i{width:15px;height:15px;border-radius:50%;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center}
.chk i svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.6}
.chk.pass i{background:#4a6b57}
.chk.fail i{background:var(--accent)}
.chk.fail{box-shadow:inset 0 0 0 1px rgba(194,96,58,.32)}
.gate .chips{gap:7px}
.gate-note{margin-top:auto;padding-top:11px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
@media(max-width:760px){
  .gate{grid-template-columns:1fr;gap:16px}
  .gate-rule{width:auto;height:1px}
}

/* ══════════════════════════════════════════════════════════
   THE TREE · root lens, grafted branches, leaf agents
   The one new visual. Root at the top, a rail, five grafted
   branches, one specialised agent hanging off each, and every
   agent carrying the root's colours so the inheritance is the
   thing you see rather than the thing you read.
   ══════════════════════════════════════════════════════════ */
.tree{display:flex;flex-direction:column;align-items:center}
.tree .root{display:inline-flex;align-items:center;gap:13px;padding:13px 20px 13px 15px;border-radius:100px;
  background:var(--paper-hi);box-shadow:var(--sh-md),var(--sh-in);opacity:0;transform:translateY(10px)}
.tree .root.on{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.tree .root .sw-mini{flex:none}
.tree .root .rt{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.tree .root .rs{display:block;margin-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

/* the trunk and the rail both draw rather than appear */
.tree .trunk{width:1px;background:var(--line);height:0;margin-top:2px}
.tree.on .trunk{height:30px;transition:height .5s cubic-bezier(.22,1,.36,1) .35s}

.tree .fan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:12px}
.tree .lb{display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:stretch;position:relative;padding-top:27px;min-width:0}
/* the horizontal rail is drawn per branch so it survives any column count */
.tree .lb::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);
  transform:scaleX(0);transition:transform .55s cubic-bezier(.22,1,.36,1) .5s}
.tree.on .lb::before{transform:scaleX(1)}
.tree .lb:first-child::before{left:50%}
.tree .lb:last-child::before{right:50%}
.tree .lb::after{content:"";position:absolute;top:0;left:50%;width:1px;height:0;background:var(--line)}
.tree.on .lb::after{height:27px;transition:height .4s cubic-bezier(.22,1,.36,1) .78s}

.tree .graft{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;padding:10px 11px;border-radius:10px;
  background:var(--paper-2);box-shadow:var(--sh-in);
  font-size:12.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--ink-2);
  opacity:0;transform:translateY(9px) scale(.97)}
.tree .graft.on{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.tree .graft em{display:block;margin-top:3px;font-family:var(--mono);font-style:normal;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400}

.tree .stem{width:1px;height:0;background:var(--line);margin:0 auto}
.tree .lb.on .stem{height:20px;transition:height .35s cubic-bezier(.22,1,.36,1) .1s}

.tree .agent{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;
  padding:11px 10px;border-radius:11px;background:var(--paper-hi);box-shadow:var(--sh-sm),var(--sh-in);
  opacity:0;transform:translateY(10px)}
.tree .agent.on{opacity:1;transform:none;transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1)}
/* every agent wears the root palette, which is the whole point of the diagram */
.tree .agent .sw-mini i{width:9px;height:9px}
.tree .agent .an{font-size:12px;font-weight:600;letter-spacing:-.012em;line-height:1.25;text-align:center}
.tree .agent .ar{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-tx)}

.tree .foot{margin-top:26px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.tree .foot .d{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

@media(max-width:900px){
  /* Read top to bottom instead of left to right. The agent sits under its own
     branch rather than beside it: side by side, the two chips split one phone
     width and the agent's label ran off the panel. */
  .tree{align-items:stretch}
  .tree .root{align-self:flex-start}
  .tree .trunk{margin-left:11px}
  .tree .fan{grid-template-columns:1fr;gap:0;padding-left:22px;position:relative}
  .tree .fan::before{content:"";position:absolute;left:0;top:0;bottom:38px;width:1px;background:var(--line)}
  .tree .lb{display:flex;flex-direction:column;align-items:stretch;padding:0 0 14px 0}
  .tree .lb::before{top:24px;left:-22px;right:auto;width:22px;transform-origin:left}
  .tree .lb:first-child::before,.tree .lb:last-child::before{left:-22px;right:auto}
  .tree .lb::after{content:none}
  .tree .graft{width:auto;text-align:left;align-items:flex-start}
  .tree .stem{margin:0 0 0 20px}
  .tree .lb.on .stem{height:13px}
  .tree .agent{flex-direction:row;width:auto;justify-content:flex-start;gap:9px;padding:9px 12px}
  .tree .agent .an{text-align:left}
  .tree .foot{margin-top:18px}
}


/* ══════════════════════════════════════════════════════════
   PRODUCT SURFACE INDEX
   The top of the product page used to be a headline, one
   paragraph and a stale five-item spine, which left the fold
   mostly empty and did not match the six surfaces below it.
   This is the same list the nav dropdown shows, as the page's
   own table of contents.
   ══════════════════════════════════════════════════════════ */
.surfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:clamp(30px,3.6vw,46px)}
.surf-card{display:flex;flex-direction:column;gap:9px;padding:20px 21px 18px;border-radius:14px;
  background:var(--paper-hi);box-shadow:var(--sh-sm),var(--sh-in);position:relative;
  opacity:0;transform:translateY(14px);color:var(--ink)}
.surf-card.on{opacity:1;transform:none;
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.surf-card:hover{box-shadow:var(--sh-md),0 0 0 1px rgba(194,96,58,.28)}
.surf-card .sc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.surf-card .sc-n{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--ink-3)}
.surf-card .sc-v{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-tx);padding:3px 8px;border-radius:100px;background:rgba(194,96,58,.1)}
.surf-card h3{font-size:19px;font-weight:600;letter-spacing:-.028em;line-height:1.2}
.surf-card p{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.surf-card .sc-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tx);
  transition:gap .45s cubic-bezier(.22,1,.36,1)}
.surf-card:hover .sc-go{gap:11px}
.surf-card .sc-go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
@media(max-width:900px){ .surfaces{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .surfaces{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════
   THE SAME LENS AT TWO SCALES
   The section promises one lens holding a project, then a
   fleet, then a studio. So the beat has to show scale rather
   than a single fan-out: one lens on the left, two scales
   stacked on the right, joined by one spine. The solo row is
   already in the family because one person does not drift;
   only the fleet clashes, then resolves. Nothing is an image.
   ══════════════════════════════════════════════════════════ */
.fan-out{margin-top:clamp(30px,3.6vw,46px);padding:clamp(18px,2.2vw,26px);
  border-radius:16px;background:rgba(255,250,242,.035);
  box-shadow:0 0 0 1px rgba(236,229,215,.10);position:relative;z-index:2}
.fo-title{display:block;margin:0 0 clamp(14px,1.8vw,20px);font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(236,229,215,.38)}

/* One column, so the rail actually runs from the lens through both scales.
   Side by side, the rail sat under the chip on the far left while the stubs
   sat 400px to the right, and the two read as unrelated marks. */
.fo-grid{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.fo-lens{display:inline-flex;align-items:center;gap:11px;flex:none;margin-left:0;padding:11px 15px;border-radius:100px;
  background:rgba(255,250,242,.07);box-shadow:0 0 0 1px rgba(236,229,215,.18);
  transition:box-shadow .6s ease,background .6s ease}
.fan-out.lit .fo-lens{box-shadow:0 0 0 1.4px var(--accent-dk),0 10px 22px -14px rgba(0,0,0,.6);
  background:rgba(217,138,74,.1)}
.fo-lens .sw-mini i{width:8px;height:8px}
.fo-lens-t{display:block;min-width:0}
.fo-lens .t{display:block;font-weight:600;font-size:13px;font-weight:600;letter-spacing:-.018em;color:#f2ece0;line-height:1.25}
.fo-lens .by{display:block;margin-top:2px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(236,229,215,.45)}
/* the spine says "the same one", which is the whole argument of the section */
/* the rail: one line from the lens down past both scales */
.fo-spine{position:absolute;left:0;top:0;bottom:22px;width:1px;background:rgba(236,229,215,.16)}
.fo-spine i{position:absolute;inset:0;display:block;background:linear-gradient(180deg,var(--amber),var(--accent-dk));
  transform:scaleY(0);transform-origin:center top;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.fan-out.lit .fo-spine i{transform:scaleY(1)}

.fo-scales{position:relative;align-self:stretch;display:flex;flex-direction:column;
  gap:clamp(16px,2vw,24px);min-width:0;margin-left:26px;padding-top:clamp(14px,1.8vw,20px)}
.fo-scale{display:flex;flex-direction:column;gap:9px;min-width:0;position:relative;
  padding-left:clamp(16px,2vw,26px)}
/* the elbow off the rail into each scale */
.fo-scale::before{content:"";position:absolute;left:0;top:11px;width:clamp(10px,1.6vw,18px);height:1px;
  background:rgba(236,229,215,.16);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1) .55s}
.fan-out.lit .fo-scale::before{transform:scaleX(1)}
.fo-scale-h{margin:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.fo-scale-h b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:#f2ece0}
.fo-scale-h span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(236,229,215,.4)}

.fo-outs{display:flex;gap:clamp(8px,1.1vw,14px);min-width:0}
.fo-agent{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:10px 8px 11px;border-radius:12px;background:rgba(255,250,242,.03);
  box-shadow:0 0 0 1px rgba(236,229,215,.08);transition:box-shadow .6s ease}
.fan-out.lit .fo-agent{box-shadow:0 0 0 1px rgba(217,138,74,.22)}
/* the solo row is one person, so it takes the width of two agents and no more */
.fo-agent.solo{flex:0 1 clamp(200px,32%,300px);align-items:flex-start;padding:10px 12px 11px}
.fo-agent .nm{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(236,229,215,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* the fallbacks matter: an unset stop makes the whole gradient invalid and the
   swatch renders as nothing at all */
.fo-out{width:100%;height:clamp(28px,3.1vw,38px);border-radius:7px;display:block;
  background:linear-gradient(150deg,var(--a,#2b2419),var(--b,#a54e2b));
  transition:background 1.1s cubic-bezier(.22,1,.36,1)}

/* one person never drifts, so the solo output is in the family from the start */
.fo-agent.solo .fo-out{--a:#2b2419;--b:#a54e2b}
/* the fleet does drift, which is the setup. These live here rather than inline
   because an inline custom property outranks the stylesheet and the resolve
   below would never land. */
[data-scale="fleet"] .fo-agent:nth-child(1) .fo-out{--a:#1d2a3a;--b:#4a6b8a}
[data-scale="fleet"] .fo-agent:nth-child(2) .fo-out{--a:#2b1a2e;--b:#7a4a86}
[data-scale="fleet"] .fo-agent:nth-child(3) .fo-out{--a:#1c2b26;--b:#4a8a6b}
[data-scale="fleet"] .fo-agent:nth-child(4) .fo-out{--a:#3a3a1c;--b:#8a9a4a}
[data-scale="fleet"] .fo-agent:nth-child(5) .fo-out{--a:#2a2a3a;--b:#6a6a8a}
/* and resolves into the same family the designer was already working in */
.fan-out.lit [data-scale="fleet"] .fo-agent:nth-child(1) .fo-out{--a:#2b2419;--b:#a54e2b}
.fan-out.lit [data-scale="fleet"] .fo-agent:nth-child(2) .fo-out{--a:#3a2e1e;--b:#c07040}
.fan-out.lit [data-scale="fleet"] .fo-agent:nth-child(3) .fo-out{--a:#8a4a2b;--b:#d98a4a}
.fan-out.lit [data-scale="fleet"] .fo-agent:nth-child(4) .fo-out{--a:#4a3a24;--b:#b06438}
.fan-out.lit [data-scale="fleet"] .fo-agent:nth-child(5) .fo-out{--a:#7a3f24;--b:#d9a978}

.fo-cap{margin:clamp(14px,1.8vw,20px) 0 0;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(236,229,215,.42);transition:color .6s ease}
.fan-out.lit .fo-cap{color:rgba(236,229,215,.6)}
.fo-cap i{width:5px;height:5px;border-radius:50%;background:rgba(236,229,215,.3);flex:none;
  transition:background .6s ease}
.fan-out.lit .fo-cap i{background:var(--accent-dk)}

@media(max-width:820px){
  /* the rail pulls in and the outputs get the width back */
  .fo-scales{margin-left:14px;gap:16px}
  .fo-scale{padding-left:14px}
  .fo-agent.solo{flex:1}
  .fo-outs{gap:7px}
  .fo-agent{padding:9px 5px 10px;gap:7px}
  .fo-agent .nm{font-size:8.5px;letter-spacing:.06em}
}

/* nothing moves: the resolved state is the state */
@media(prefers-reduced-motion:reduce){
  .fo-out,.fo-spine i,.fo-lens,.fo-agent,.fo-cap,.fo-cap i,.fo-scale::before{transition:none}
}