/* ============================================================
   extra.design — ALT landing (variant B).
   Layout language borrowed from the rainfrog school:
   monospace body, tight-tracked bold display, pill controls,
   paper / night alternation, deliverable-shaped previews.
   Brand marks stay ours: acid star, green script, EXTRA DESIGN.
   Zero remote assets — every visual is generated locally.
   ============================================================ */

:root{
  --paper:#e6e6e6;
  --paper2:#dcdcdc;
  --card:#fff;
  --night:#0a0a0a;
  --night2:#151515;
  --night3:#1e1e1e;
  --ink:#0a0a0a;
  --ink2:#3d3d3d;
  --ink-dim:#6e6e6e;
  --lit:#f2f2f0;
  --lit-dim:#8f8f8a;
  --lit-dim2:#5f5f5b;
  --edge:#cfcfcf;
  --edge-n:#2a2a2a;
  --acid:#eaff3a;
  --green:#23d18b;

  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"SF Mono","Menlo","Consolas","Liberation Mono",monospace;
  --f-script:"Figma Hand","Shantell Sans","Bradley Hand","Marker Felt",cursive;

  --r-pill:99px;
  --r-card:22px;
  --r-sm:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-mono);font-size:15px;line-height:1.62;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.shell{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.shell-narrow{max-width:860px}

/* ---------- type ---------- */
.dsp{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;
  line-height:.98;color:inherit;
}
h1.dsp{font-size:clamp(2.3rem,5.6vw,4.5rem)}
h2.dsp{font-size:clamp(1.9rem,4vw,3.1rem)}
h3.dsp{font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:-.03em}
.script{font-family:var(--f-script);font-weight:700;letter-spacing:-.01em;color:var(--green)}

.badge{
  display:inline-block;font-family:var(--f-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:var(--r-pill);
  padding:.5rem 1.1rem;color:var(--ink-dim);background:rgba(255,255,255,.5);
}
.lede{font-size:.95rem;color:var(--ink2);line-height:1.7;max-width:44rem}
.lede b{color:var(--ink);font-weight:600}

/* night inversion */
.night{background:var(--night);color:var(--lit)}
.night .lede{color:var(--lit-dim)}
.night .lede b{color:var(--lit)}
.night .badge{border-color:var(--edge-n);color:var(--lit-dim);background:rgba(255,255,255,.03)}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  padding:.85rem 1.7rem;border-radius:var(--r-pill);
  border:1px solid transparent;transition:all .16s ease;white-space:nowrap;
}
.pill-dark{background:var(--night);color:var(--lit)}
.pill-dark:hover{background:#242424;transform:translateY(-1px)}
.pill-light{background:#fff;color:var(--ink)}
.pill-light:hover{background:#f6f6f6;transform:translateY(-1px)}
.pill-line{border-color:var(--ink);color:var(--ink)}
.pill-line:hover{background:rgba(0,0,0,.05)}
.night .pill-line{border-color:#3a3a3a;color:var(--lit)}
.night .pill-line:hover{background:rgba(255,255,255,.06)}
.pill-acid{background:var(--acid);color:#111;font-weight:700}
.pill-acid:hover{background:#f3ff72;transform:translateY(-1px)}
.pill-sm{font-size:.78rem;padding:.55rem 1.1rem}

/* ---------- floating header ---------- */
.hdr{
  position:fixed;top:1.1rem;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 1.4rem;pointer-events:none;
}
.hdr > *{pointer-events:auto}
.hdr-brand{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#fff;border-radius:var(--r-pill);padding:.75rem 1.5rem;
  box-shadow:0 6px 22px rgba(0,0,0,.14);
}
/* nav sits in a pill of its own, optically centred on the viewport
   rather than between the two side pills — their widths differ */
.hdr-nav{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.5rem;
  background:#fff;border-radius:var(--r-pill);padding:.85rem 1.7rem;
  box-shadow:0 6px 22px rgba(0,0,0,.14);
}
.hdr-nav a{font-size:.82rem;color:var(--ink-dim);transition:color .12s;white-space:nowrap}
.hdr-nav a:hover{color:var(--ink)}
.hdr-right{
  display:flex;align-items:center;gap:.4rem;
  background:#fff;border-radius:var(--r-pill);padding:.42rem;
  box-shadow:0 6px 22px rgba(0,0,0,.14);
}

/* brand lockup */
.brandmark{display:inline-flex;align-items:center;gap:.16rem;white-space:nowrap}
.brandmark .w{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;
  font-size:1.08rem;color:var(--ink);text-transform:uppercase;
}
.brandmark .st{position:relative;display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;flex:none}
.brandmark .st svg{width:100%;height:100%;fill:var(--acid);display:block}
.brandmark .st i{
  position:absolute;font-family:var(--f-script);font-style:normal;font-weight:700;
  font-size:.38rem;color:#111;letter-spacing:-.02em;
}
.night .brandmark .w,.ftr .brandmark .w{color:var(--lit)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:84vh;display:grid;place-items:center;padding:9rem 0 5rem;text-align:center}
.hero-in{position:relative;z-index:2;max-width:54rem;margin:0 auto}
.hero-kicker{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:1.8rem;
}
/* both lines carry the same weight — the marker script from variant A
   does not belong in this system, the only brand accent here is the star */
.hero h1{margin-bottom:1.9rem}
/* monospace runs much wider than the proportional face variant A uses,
   so this needs more column and balanced wrapping or it drops orphans */
.hero-sub{
  font-size:clamp(.9rem,1.4vw,1.02rem);color:var(--ink2);line-height:1.8;
  max-width:47rem;margin:0 auto;text-wrap:balance;
}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:.7rem;justify-content:center;margin-top:2.3rem;flex-wrap:wrap}
/* a scroll cue has to sit on the bottom edge of the first screen — the 4.6rem
   offset was clearance for the variant switch that used to live down here */
.hero-scroll{
  position:absolute;bottom:2.2rem;left:0;right:0;z-index:2;text-align:center;
  font-size:.78rem;color:var(--ink-dim);letter-spacing:.06em;
}
.hero-scroll span{display:inline-block;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
/* on a short viewport it would crowd the buttons instead of pointing past them */
@media (max-height:660px){ .hero-scroll{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-scroll span{animation:none} }

/* ---------- sections ---------- */
.sec{padding:6rem 0;position:relative}
.sec-head{margin-bottom:2.8rem}
.sec-head.is-center{text-align:center;max-width:44rem;margin-inline:auto}
.sec-head .badge{margin-bottom:1.3rem}
.sec-head h2{margin-bottom:1.1rem}
.sec-head.is-center .lede{margin-inline:auto}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap}

/* ---------- pipeline gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem}
.gal-item{
  position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;
  background:#fff;aspect-ratio:3/4;transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.gal-item:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.16)}
.gal-item svg{display:block;width:100%;height:100%}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .7rem;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color:#fff;font-size:.7rem;letter-spacing:-.005em;
}
.gal-cap b{display:block;font-weight:600}
.gal-cap span{color:rgba(255,255,255,.6);font-size:.62rem}
.gal-hint{
  position:absolute;top:.6rem;left:.6rem;font-size:.56rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:#111;border-radius:var(--r-pill);padding:.24rem .6rem;
  opacity:0;transition:opacity .16s;
}
.gal-item:hover .gal-hint{opacity:1}

/* ---------- library cards (creative OS) ---------- */
.libs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lib{
  background:var(--night2);border:1px solid var(--edge-n);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .16s, transform .16s;
}
.lib:hover{border-color:#3d3d3d;transform:translateY(-4px)}
.lib-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.lib-art svg{display:block;width:100%;height:100%}
.lib-type{
  position:absolute;top:.7rem;left:.7rem;font-size:.55rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  background:rgba(10,10,10,.72);backdrop-filter:blur(6px);
  color:var(--acid);border-radius:var(--r-pill);padding:.3rem .65rem;
}
.lib-in{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.lib-in h3{color:var(--lit)}
.lib-in p{font-size:.8rem;color:var(--lit-dim);line-height:1.6;flex:1}
.lib-swap{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.68rem;color:var(--lit-dim2);border:1px solid var(--edge-n);
  border-radius:var(--r-pill);padding:.5rem .9rem;margin-top:.3rem;
}
.lib-swap i{font-style:normal;color:var(--acid)}

/* ---------- preset templates ---------- */
.tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tpl{
  background:#fff;border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 8px 26px rgba(0,0,0,.08);
  transition:transform .16s, box-shadow .16s;
}
.tpl:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.14)}
.tpl-art{aspect-ratio:16/10;overflow:hidden;position:relative;background:#111}
.tpl-art svg{display:block;width:100%;height:100%}
.tpl-shot,.tpl-graph{position:absolute;inset:0;display:block}
/* the graph is the whole pitch — show it the moment the card is touched */
.tpl-graph{
  opacity:0;background:rgba(8,8,8,.9);backdrop-filter:blur(2px);
  transition:opacity .22s ease;
}
.tpl:hover .tpl-graph,.tpl:focus-visible .tpl-graph{opacity:1}
.tpl-lbl{
  position:absolute;z-index:2;top:.7rem;left:.7rem;font-size:.55rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  background:#fff;color:#111;border-radius:var(--r-pill);padding:.3rem .65rem;
}
.tpl-in{padding:1.3rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.tpl-in p{font-size:.8rem;color:var(--ink-dim);line-height:1.65;flex:1}

.tpl-nodes{display:flex;flex-wrap:wrap;gap:.3rem}
.tpl-nodes span{
  font-size:.6rem;letter-spacing:-.005em;color:var(--ink2);
  background:var(--paper);border-radius:var(--r-pill);padding:.28rem .6rem;
}
.tpl:hover .tpl-nodes span{background:var(--paper2)}

/* the spec needs the full width — the hover already reveals the graph,
   so a "open the graph" label here would only be repeating itself */
.tpl-out{border-top:1px solid var(--edge);padding-top:.85rem;margin-top:.15rem}
.tpl-out span{
  display:block;font-size:.63rem;color:var(--ink-dim);letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tpl:hover .tpl-out span{color:var(--ink2)}

/* Ten cards in a three-column grid leave a two-slot hole on the last row.
   The question a catalogue ends on fills it exactly. It takes the card's full
   height on purpose — heading at the top, action at the foot — and stays an
   outlined panel rather than a white card, so nobody counts it as an eleventh
   template. */
.tpl-more{
  grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;
  gap:1.6rem;padding:2.2rem 2.4rem;border:1px solid var(--edge);
  border-radius:var(--r-card);background:rgba(255,255,255,.42);
}
.tpl-more h3.dsp{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.tpl-more p{font-size:.85rem;color:var(--ink-dim);line-height:1.7;margin-top:.75rem;max-width:30rem}
.tpl-more .pill{align-self:flex-start;flex:none}

/* ---------- background transitions ----------
   Not a grey cross-fade: a tall, defocused colour wash. Paper dissolves into
   a green haze, the haze sinks into black, and section content sits over the
   dark end of it — so the seam has depth instead of being a straight edge. */
:root{--fade:clamp(240px,34vw,500px)}
.sec.night,.final.night{position:relative;isolation:isolate}
/* content starts ~72% down the wash, where it is already dark enough to
   carry light type; the haze stays visible behind the heading */
.sec.night{padding-block:calc(var(--fade) * .72 + 2rem)}
.sec.night::before,.sec.night::after{
  content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;height:calc(var(--fade) + 2px);
}
/* every seam gets its own hue pair, drawn from the same generative palette the
   artwork uses — so the washes vary down the page without going off-brand */
.sec.night,.final.night{--w1:35,209,139;--w2:234,255,58}
#canvas{--w1:167,139,250;--w2:191,227,255}
#control{--w1:255,122,69;--w2:255,209,102}
#pricing{--w1:191,227,255;--w2:45,212,191}
.final.night{--w1:240,106,168;--w2:234,255,58}

.sec.night::before{
  top:-1px;
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(230,230,230,.99) 8%,
      rgba(230,230,230,.94) 18%, rgba(230,230,230,.82) 28%, rgba(230,230,230,.62) 38%,
      rgba(230,230,230,.4) 49%, rgba(230,230,230,.2) 61%, rgba(230,230,230,.07) 74%,
      rgba(230,230,230,.01) 86%, rgba(230,230,230,0) 100%),
    linear-gradient(to top, var(--night) 0%, rgba(10,10,10,.94) 16%,
      rgba(10,10,10,.74) 32%, rgba(10,10,10,.44) 50%, rgba(10,10,10,.18) 68%,
      rgba(10,10,10,.04) 84%, rgba(10,10,10,0) 100%),
    radial-gradient(160% 78% at 50% 46%, rgba(var(--w1),.5) 0%,
      rgba(var(--w1),.2) 42%, rgba(var(--w1),.05) 64%, rgba(var(--w1),0) 80%),
    radial-gradient(95% 55% at 20% 62%, rgba(var(--w2),.14), rgba(var(--w2),0) 68%),
    var(--night);
}
.sec.night::after{
  bottom:-1px;
  background:
    linear-gradient(to top, var(--paper) 0%, rgba(230,230,230,.99) 8%,
      rgba(230,230,230,.94) 18%, rgba(230,230,230,.82) 28%, rgba(230,230,230,.62) 38%,
      rgba(230,230,230,.4) 49%, rgba(230,230,230,.2) 61%, rgba(230,230,230,.07) 74%,
      rgba(230,230,230,.01) 86%, rgba(230,230,230,0) 100%),
    linear-gradient(to bottom, var(--night) 0%, rgba(10,10,10,.94) 16%,
      rgba(10,10,10,.74) 32%, rgba(10,10,10,.44) 50%, rgba(10,10,10,.18) 68%,
      rgba(10,10,10,.04) 84%, rgba(10,10,10,0) 100%),
    radial-gradient(160% 78% at 50% 54%, rgba(var(--w1),.5) 0%,
      rgba(var(--w1),.2) 42%, rgba(var(--w1),.05) 64%, rgba(var(--w1),0) 80%),
    radial-gradient(95% 55% at 78% 38%, rgba(var(--w2),.14), rgba(var(--w2),0) 68%),
    var(--night);
}
.night:has(+ .night)::after,.night + .night::before{display:none}
.sec.night > .shell{position:relative;z-index:2}
.final.night{padding-top:calc(var(--fade) * .72 + 2rem)}
.final.night::before{
  content:"";position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;
  height:var(--fade);
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(230,230,230,.88) 12%,
      rgba(230,230,230,.52) 28%, rgba(230,230,230,.18) 43%, rgba(230,230,230,0) 58%),
    linear-gradient(to top, var(--night) 0%, rgba(10,10,10,.92) 20%,
      rgba(10,10,10,.58) 40%, rgba(10,10,10,.2) 60%, rgba(10,10,10,0) 80%),
    radial-gradient(160% 78% at 50% 46%, rgba(var(--w1),.5) 0%,
      rgba(var(--w1),.2) 42%, rgba(var(--w1),.05) 64%, rgba(var(--w1),0) 80%),
    radial-gradient(95% 55% at 20% 62%, rgba(var(--w2),.14), rgba(var(--w2),0) 68%);
}
.final-in{z-index:3}

/* ---------- stat strip ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--edge);
}
.stat b{
  display:block;font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;color:var(--ink);margin-bottom:.7rem;
}
.stat span{font-size:.78rem;color:var(--ink-dim);line-height:1.6}
.stats-note{margin-top:1.5rem;font-size:.68rem;color:var(--ink-dim);line-height:1.65;max-width:46rem}

/* ---------- canvas ---------- */
.canvas{
  position:relative;border-radius:var(--r-card);
  background:
    radial-gradient(rgba(255,255,255,.055) 1.1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg,#181818,#101010);
  border:1px solid var(--edge-n);
  box-shadow:0 40px 110px rgba(0,0,0,.6);
  min-height:430px;padding:2rem;
  display:grid;grid-template-columns:.9fr 1.1fr 1.1fr .9fr;grid-template-rows:1fr 1fr;
  gap:1.2rem 2.6rem;align-items:center;
}
.canvas-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.canvas-wires path{fill:none;stroke:#4a4a46;stroke-width:1.5}
.cn{
  position:relative;z-index:2;background:#1c1c1c;border:1px solid #333;
  border-radius:var(--r-sm);overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.5);
}
#cnBrief{grid-column:1;grid-row:1/3}
#cnImage{grid-column:2;grid-row:1/3}
#cnVideo{grid-column:3;grid-row:1}
#cnSet{grid-column:3;grid-row:2}
#cnOut{grid-column:4;grid-row:1/3}
.cn-head{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.55rem .8rem;border-bottom:1px solid #2c2c2c;
  font-size:.58rem;font-weight:700;letter-spacing:.12em;color:#d8d8d2;
}
.cn-head em{font-style:normal;font-weight:400;color:var(--lit-dim2);letter-spacing:0}
.cn-head em.is-acid{color:var(--acid)}
.cn-head em.is-warm{color:#ff9a6b}
.cn p{padding:.8rem .85rem;font-size:.72rem;color:var(--lit-dim);line-height:1.6}
.cn-art svg{display:block;width:100%;height:auto}
.cn-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:2px}
.cn-row span{display:block;border-radius:6px;overflow:hidden}
.cn-row svg{display:block;width:100%;height:auto}
.cn-foot{
  padding:.45rem .8rem;border-top:1px solid #2c2c2c;
  font-size:.56rem;color:var(--green);letter-spacing:.06em;
}
.cn-line{padding:.6rem .85rem .1rem!important;color:var(--lit)!important;font-weight:600}
.cn-line.dim{color:var(--lit-dim2)!important;font-weight:400;padding-top:.15rem!important;padding-bottom:.8rem!important}
.cn-chip{
  position:absolute;z-index:3;font-size:.58rem;color:#d8d8d2;
  background:#242424;border:1px solid #383838;border-radius:var(--r-pill);
  padding:.35rem .75rem;box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.models{margin-top:2.4rem;text-align:center}
.models-t{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lit-dim2)}
.models-row{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.models-row i{
  font-style:normal;font-size:.7rem;color:var(--lit-dim);
  border:1px solid var(--edge-n);border-radius:var(--r-pill);padding:.4rem .9rem;
}

/* ---------- marketplace ---------- */
.mkt{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.mk{
  background:#fff;border-radius:var(--r-card);padding:1.3rem 1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 8px 26px rgba(0,0,0,.08);transition:transform .16s, box-shadow .16s;
}
.mk:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.14)}
.mk p{font-size:.8rem;color:var(--ink-dim);line-height:1.65;flex:1}
.mk-art{margin-bottom:.5rem}
.mk-casts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mk-casts span{display:block;border-radius:10px;overflow:hidden}
.mk-casts svg{display:block;width:100%;height:auto}
.mk-styles{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mk-styles span{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden}
.mk-styles svg{display:block;width:100%;height:100%}
.mk-tool{display:flex;flex-direction:column;gap:.5rem}
.mk-row{
  display:flex;justify-content:space-between;gap:1rem;font-size:.68rem;color:var(--ink-dim);
  background:var(--paper);border-radius:10px;padding:.6rem .85rem;
}
.mk-row em{font-style:normal}
.mk-row i{font-style:normal;color:var(--ink)}
.mk-run{
  text-align:center;background:var(--acid);color:#111;font-weight:700;
  border-radius:10px;padding:.62rem;font-size:.78rem;
}
.mk-num{
  font-size:.63rem;color:var(--ink-dim);
  border-top:1px solid var(--edge);padding-top:.8rem;
}

/* ---------- field notes ---------- */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.note{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);
  overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.08);
  transition:transform .16s, box-shadow .16s;
}
.note:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.14)}
.note-art{aspect-ratio:16/9;overflow:hidden;background:#111}
.note-art svg{display:block;width:100%;height:100%}
.note-in{padding:1.2rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.note-meta{
  display:flex;align-items:center;gap:.5rem;
  font-size:.6rem;letter-spacing:.06em;color:var(--ink-dim);
}
.note-tag{
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#0a6b45;
  background:rgba(35,209,139,.14);border-radius:var(--r-pill);padding:.24rem .6rem;
}
.note-tag.is-teardown{color:#8a3b12;background:rgba(255,122,69,.15)}
.note-tag.is-guide{color:#1f4b7a;background:rgba(191,227,255,.4)}
.note-in p{font-size:.8rem;color:var(--ink-dim);line-height:1.65;flex:1}

/* ---------- guarantees ----------
   The number alone is trivia; it only means something sitting under the
   claim it backs. Number, claim, mechanism — in that order. */
.guars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.7rem;margin-top:1rem}
.guar{border-top:1px solid var(--edge-n);padding-top:1.3rem}
.guar b{
  display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--acid);margin-bottom:.95rem;
}
.guar b em{
  font-family:var(--f-mono);font-style:normal;font-size:.6rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lit-dim2);
}
.guar h3{
  font-size:.98rem;font-weight:600;letter-spacing:-.015em;
  color:var(--lit);margin-bottom:.5rem;
}
.guar p{font-size:.8rem;color:var(--lit-dim);line-height:1.65}

/* ---------- portal mock ---------- */
.portal{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
.pui{
  background:#fff;border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.16);
}
.pui-bar{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;background:var(--paper2)}
.pui-dot{width:9px;height:9px;border-radius:50%;background:#bbb;flex:none}
.pui-url{
  flex:1;text-align:center;font-size:.66rem;color:var(--ink-dim);
  background:#fff;border-radius:var(--r-pill);padding:.28rem .9rem;margin-left:.6rem;
}
.pui-url b{color:var(--ink);font-weight:600}
.pui-body{padding:1.2rem}
.pui-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.pui-logo{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  background:var(--acid);color:#111;border-radius:var(--r-pill);padding:.35rem .75rem;
}
.pui-budget{font-size:.62rem;color:var(--ink-dim)}
.pui-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.pui-grid span{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden}
.pui-grid svg{display:block;width:100%;height:100%}
.pui-rows{display:flex;flex-direction:column;gap:.4rem}
.pui-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.7rem;background:var(--paper);border-radius:var(--r-pill);padding:.55rem 1rem;
}
.pui-row i{font-style:normal;color:var(--ink-dim)}
.pui-row i.ok{color:#0f8f5e;font-weight:600}
.pui-row i.wait{color:#a07f00;font-weight:600}
.pts{display:flex;flex-direction:column;gap:1.1rem}
.pt{display:flex;gap:.9rem;align-items:flex-start}
.pt-n{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--night);color:var(--acid);
  display:grid;place-items:center;font-size:.62rem;font-weight:700;
}
.pt h3{font-size:.95rem;font-weight:600;margin-bottom:.25rem;letter-spacing:-.01em}
.pt p{font-size:.82rem;color:var(--ink-dim);line-height:1.65}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.price{
  background:var(--night2);border:1px solid var(--edge-n);border-radius:var(--r-card);
  padding:1.8rem 1.7rem;display:flex;flex-direction:column;gap:.8rem;position:relative;
}
.price-hot{border-color:var(--acid);background:var(--night3)}
.price-tag{
  position:absolute;top:-.65rem;left:1.6rem;font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--acid);color:#111;border-radius:var(--r-pill);padding:.28rem .7rem;
}
.price-name{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lit-dim)}
.price-num{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;
  font-size:2.6rem;line-height:1;color:var(--lit);
}
.price-num span{font-family:var(--f-mono);font-size:.75rem;font-weight:400;letter-spacing:-.01em;color:var(--lit-dim)}
.price p{font-size:.82rem;color:var(--lit-dim);line-height:1.65;flex:1}
.price .pill{margin-top:.6rem;width:100%}

/* comparison strip */
.cmp{
  margin-bottom:2rem;background:var(--night2);border:1px solid var(--edge-n);
  border-radius:var(--r-card);overflow:hidden;
}
.cmp-scroll{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:620px}
.cmp th,.cmp td{padding:.8rem 1.1rem;text-align:right;border-bottom:1px solid var(--edge-n)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--lit-dim)}
.cmp thead th{
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lit-dim2);background:#000;
}
.cmp thead th:first-child{color:var(--lit);text-transform:none;letter-spacing:-.01em;font-size:.82rem}
.cmp td{color:var(--lit-dim)}
.cmp .us{color:var(--lit);background:rgba(234,255,58,.05)}
.cmp thead .us{color:var(--acid);background:rgba(234,255,58,.09)}
.cmp tbody tr:last-child td{border-bottom:none;font-weight:700;background:#000;color:var(--lit)}
.cmp tbody tr:last-child td.us{color:var(--acid);background:rgba(234,255,58,.1)}
.cmp-note{padding:.9rem 1.1rem;font-size:.66rem;color:var(--lit-dim2);line-height:1.6;border-top:1px solid var(--edge-n)}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:.6rem;margin-top:2rem}
.faq-item{background:#fff;border-radius:var(--r-card);overflow:hidden;transition:box-shadow .16s}
.faq-item:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;
  text-align:left;font-size:.95rem;font-weight:600;letter-spacing:-.015em;padding:1.35rem 1.7rem;
}
.faq-q span{font-size:1.3rem;font-weight:300;color:var(--ink-dim);transition:transform .22s;flex:none}
.faq-item.is-open .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.is-open .faq-a{max-height:420px}
.faq-a p{padding:0 1.7rem 1.5rem;font-size:.86rem;color:var(--ink-dim);line-height:1.72}
.faq-a p b{color:var(--ink);font-weight:600}

/* ---------- final ---------- */
.final{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.final-in{position:relative;z-index:2;max-width:44rem;padding:5rem 1.5rem}
.final h2{margin:1.3rem 0 1.2rem}
.final .lede{margin-inline:auto}
.final-cta{display:flex;gap:.7rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap}
.final-fine{margin-top:1.4rem;font-size:.72rem;color:var(--lit-dim2)}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:var(--lit);padding:3.4rem 0 2.4rem;border-top:1px solid var(--edge-n)}
.ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem}
.ftr-tag{font-size:.85rem;color:var(--lit-dim);max-width:22rem;margin-top:1rem;line-height:1.7}
.ftr-col b{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lit-dim2);margin-bottom:1rem;
}
.ftr-col a{display:block;font-size:.85rem;color:var(--lit-dim);padding:.24rem 0;transition:color .12s}
.ftr-col a:hover{color:var(--acid)}
.ftr-base{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--edge-n);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.66rem;color:var(--lit-dim2);
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
/* the centred nav pill needs clear air on both sides — drop it before it
   collides with the brand and CTA pills, not at the usual mobile breakpoint */
@media (max-width:1260px){
  .hdr-nav{display:none}
}
@media (max-width:1020px){
  .gal{grid-template-columns:repeat(3,1fr)}
  /* three template columns start clipping the spec line here — step to two
     rather than holding three until the phone breakpoint */
  .notes,.tpls{grid-template-columns:1fr 1fr}
  .libs{grid-template-columns:1fr 1fr}
  .guars,.stats{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .canvas{grid-template-columns:1fr 1fr;grid-template-rows:auto;min-height:0;gap:1rem}
  #cnBrief,#cnImage,#cnVideo,#cnSet,#cnOut{grid-column:auto;grid-row:auto}
  .canvas-wires,.cn-chip{display:none}
}
@media (max-width:900px){
  .hdr-right .pill-light{display:none}
  .mkt{grid-template-columns:1fr}
  .portal{grid-template-columns:1fr;gap:1.8rem}
  .prices{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr}
  .sec{padding:4.4rem 0}
}
/* one column earlier than this and a card is 850px wide with a 480px image
   on top of it — a card that size stops reading as a card */
@media (max-width:700px){
  .notes,.tpls{grid-template-columns:1fr}
  /* span 2 in a single-column grid would conjure a second column */
  .tpl-more{grid-column:auto;padding:1.8rem 1.6rem;gap:1.3rem}
}
@media (max-width:600px){
  .gal{grid-template-columns:1fr 1fr}
  .libs,.guars,.stats{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr}
  .hero{min-height:88vh;padding:8rem 0 4rem}
  .hero-cta .pill,.final-cta .pill{width:100%}
}

/* ---------- community band ----------
   Pre-launch, so this states a mechanism and an invitation and deliberately
   carries no head-count — an invented number here would undo the honesty
   the rest of the page is built on. */
.joinus{
  display:grid;grid-template-columns:1.4fr .6fr;gap:2.2rem;align-items:center;
  margin-top:1.1rem;padding:1.7rem 1.9rem;
  border:1px solid var(--edge);border-radius:var(--r-card);background:rgba(255,255,255,.42);
}
.joinus-t{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.7rem;
}
.joinus h3.dsp{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.6rem}
.joinus p{font-size:.85rem;color:var(--ink-dim);line-height:1.75;max-width:38rem}
.joinus p + p{margin-top:.85rem}
.joinus p i{font-style:italic}
.joinus p b{color:var(--ink2);font-weight:700}
.joinus-cta{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.joinus-cta .pill{white-space:nowrap}
.joinus-fine{font-size:.66rem;color:var(--ink-dim);line-height:1.6}
@media (max-width:900px){ .joinus{grid-template-columns:1fr;gap:1.6rem;align-items:start} }