/* Who They Name · public site stylesheet. Served from /site.css (CSP: no inline <style>). */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* paper + ink */
  --bg:#EFEDE8;
  --panel:#F2F0EB;
  --cell:#E7E5E0;
  --rule:#26261F;
  --hair:#BDB9AE;
  --ink:#1A1A17;
  --ink-solid:#131311;
  --on-dark:#F4F2ED;
  --body:#4E4E47;
  --muted:#67665F;
  --soft:#5A5952;
  --chev:#57574F;
  --plus:#D6D0C3;
  /* the only two hues on the page, both ink-adjacent */
  --sig:#2F6F4F;
  --alert:#A8452F;

  --font:"Figtree","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --hairline:1px;
  --bracket:7px;
  --px:28px;   /* page side padding  */
  --pt:24px;   /* page top padding   */
  --pb:23px;   /* page bottom padding*/

  /* Sheet unit. 1u === 1px on a 1440x1160 reference canvas, and the
     first screen rescales itself so the whole composition always fits. */
  --u:clamp(.60px, min(.069444vw, .0862vh), 1.34px);

  --hatch:repeating-linear-gradient(-45deg,
          var(--rule) 0 1.15px, transparent 1.15px 6.3px);

  --expo:cubic-bezier(.16,1,.30,1);
  --soft-ease:cubic-bezier(.22,.61,.24,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:clamp(14px,1.1111vw,19px)}
body{
  margin:0;padding:var(--pt) var(--px) var(--pb);
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
ul{list-style:none;margin:0;padding:0}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--on-dark);padding:8px 12px;font-size:13px;text-decoration:none}
.skip:focus{left:8px}
#main:focus{outline:0}
/* The landmark sits inside the viewport-height sheet and must pass its flex
   height down to the hero, or the product mock has no stage to stand on. */
#main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   FRAME — the whole document is one ruled specimen sheet.
   The frame owns only the top and bottom rules; every band owns
   its own side rules so the hatch can break them.
   ============================================================ */
.frame{
  border-top:var(--hairline) solid var(--rule);
  border-bottom:var(--hairline) solid var(--rule);
  background:var(--panel);
  overflow:hidden;
}
.sides{border-left:var(--hairline) solid var(--rule);border-right:var(--hairline) solid var(--rule)}
.hatch{height:calc(25 * var(--u));min-height:20px;background-image:var(--hatch);
  border-bottom:var(--hairline) solid var(--rule);flex:0 0 auto}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:2.0625rem;min-width:7.1875rem;padding:0 1.125rem;border-radius:0;
  font-size:.8125rem;letter-spacing:-.025em;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .08s ease;
}
/* Pressed: the button sinks one pixel. No shadow ever lifts it, so this is the
   whole of its depth. */
.btn:active{transform:translateY(1px)}
.btn.lg{height:2.375rem;min-width:8.3125rem;padding:0 1.375rem;font-size:.875rem;letter-spacing:-.032em}
.solid{background:var(--ink-solid);color:var(--on-dark)}
.solid:hover{background:#2C2C27}
.ghost{position:relative;color:var(--ink);border:var(--hairline) solid var(--hair);background:transparent}
.ghost:hover{background:rgba(26,26,23,.045);border-color:var(--hair)}
/* four registration marks: one bordered box, masked to its corners */
.ghost::before{
  content:"";position:absolute;inset:calc(-1 * var(--hairline));pointer-events:none;
  border:var(--hairline) solid var(--rule);
  -webkit-mask-image:
    linear-gradient(90deg,#000 0 var(--bracket),transparent var(--bracket) calc(100% - var(--bracket)),#000 calc(100% - var(--bracket)) 100%),
    linear-gradient(180deg,#000 0 var(--bracket),transparent var(--bracket) calc(100% - var(--bracket)),#000 calc(100% - var(--bracket)) 100%);
  mask-image:
    linear-gradient(90deg,#000 0 var(--bracket),transparent var(--bracket) calc(100% - var(--bracket)),#000 calc(100% - var(--bracket)) 100%),
    linear-gradient(180deg,#000 0 var(--bracket),transparent var(--bracket) calc(100% - var(--bracket)),#000 calc(100% - var(--bracket)) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* ============================================================
   SHEET — first screen, locked to the viewport
   ============================================================ */
.sheet{
  height:calc(100svh - var(--pt) - var(--pb));
  min-height:520px;
  display:flex;flex-direction:column;overflow:hidden;
}

/* --- header ------------------------------------------------ */
.hdr{
  position:relative;flex:0 0 auto;
  height:calc(73 * var(--u));min-height:54px;
  display:flex;align-items:center;gap:calc(20 * var(--u));
  padding:0 calc(16 * var(--u));
  border-bottom:var(--hairline) solid var(--rule);
}
.brand{display:inline-flex;align-items:center;gap:.5rem}
.mark{width:1.9375rem;height:1.9375rem;color:var(--ink);flex:0 0 auto}
/* The second quotation mark lands a beat after the first, once, at load. */
.js-anim .hdr .mark polygon:nth-child(2){animation:mark-in .5s var(--soft-ease) .6s both}
@keyframes mark-in{from{opacity:0}to{opacity:1}}
/* Three words, not one: the wordmark never wraps, and the tracking that suited
   a five-letter word is loosened so the two word-spaces stay open. Same rule as
   app/src/styles/shell.css and the email layout. */
.brandname{font-size:1rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.nav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:calc(24 * var(--u));white-space:nowrap;
}
.nav a{position:relative;font-size:.8125rem;letter-spacing:-.015em;color:#1B1B18;transition:color .18s ease}
/* The hover draws a hairline under the word, left to right, and takes it
   away the same way. The sheet underlines; it does not fade. */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--expo)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.actions{margin-left:auto;display:flex;align-items:center;gap:.375rem}

/* burger */
.burger{display:none;width:2.125rem;height:2.125rem;position:relative;flex:0 0 auto}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:50%;top:50%;width:1.0625rem;height:1px;
  background:var(--ink);transform:translate(-50%,-50%);
  transition:transform .28s var(--soft-ease),opacity .18s ease;
}
.burger::before{transform:translate(-50%,calc(-50% - 5px))}
.burger::after{transform:translate(-50%,calc(-50% + 5px))}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}

.drawer{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--panel);
  border-bottom:var(--hairline) solid var(--rule);
  padding:.75rem 1rem 1.125rem;
}
.drawer.is-open{display:block}
.drawer a{display:block;padding:.6875rem .25rem;font-size:1rem;letter-spacing:-.02em;
  border-bottom:var(--hairline) solid rgba(38,38,31,.14)}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:.875rem;width:100%}
.drawer .btn + .btn{margin-top:.5rem}

/* --- hero -------------------------------------------------- */
.hero{
  position:relative;flex:1 1 auto;min-height:0;isolation:isolate;
  display:flex;flex-direction:column;
  border-bottom:var(--hairline) solid var(--rule);
  overflow:hidden;
}
/* plus texture, fading in only across the lower half */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 6.1v6.8M6.1 9.5h6.8' stroke='%23D6D0C3' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 46%,rgba(0,0,0,.32) 60%,rgba(0,0,0,.78) 74%,#000 86%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 46%,rgba(0,0,0,.32) 60%,rgba(0,0,0,.78) 74%,#000 86%,#000 100%);
}
.lead{flex:9 0 0;min-height:calc(24 * var(--u))}
.gutter{flex:7.5 0 0;min-height:calc(18 * var(--u))}
.copy{position:relative;z-index:2;padding:0 calc(26 * var(--u));text-align:center;flex:0 0 auto}

h1{
  font-size:max(26px, calc(56 * var(--u)));
  line-height:1.10;letter-spacing:-.032em;font-weight:400;
}
.ln{display:block;overflow:hidden;padding:0 .14em .2em;margin:0 -.14em -.2em}
.ln-i{display:block}
.dim{color:var(--muted)}

.sub{
  margin:calc(9 * var(--u)) auto 0;
  max-width:min(29rem, calc(470 * var(--u)));
  font-size:max(12.5px, calc(14.6 * var(--u)));
  line-height:1.36;letter-spacing:-.018em;color:var(--body);
}
.cta-row{margin-top:calc(19 * var(--u));display:flex;justify-content:center;gap:.4375rem;position:relative;z-index:2}

/* --- product mock ------------------------------------------
   The dashboard as the app draws it today: the frame (sidebar with the
   icon set, top bar with the scan button), the three figures and the
   reading under them, the matrix with its set groups, the trend and the
   alerts. Every length is in --e, one 942nd of the mock's width, so the
   composition scales as a whole. Invented figures, and it says so. */
.stage{
  flex:83.5 1 0;min-height:0;position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;container-type:size;
}
.app{
  width:68.2%;aspect-ratio:942 / 439.4;
  container-type:inline-size;
  --e:calc(100cqw / 942);
  background:var(--panel);
  border:1px solid var(--hair);border-bottom:0;
  border-radius:7px 7px 0 0;overflow:hidden;
  box-shadow:0 2px 10px rgba(30,28,22,.05), 0 14px 44px rgba(30,28,22,.07);
  flex:0 0 auto;
  --surface:#FBFBFA;--surface-2:#F5F5F3;--line:#E4E2DC;--line-2:#EDECE8;--row-you:#F4F3EF;--cell-sel:#E9E9E6;
}
@supports (width: 1cqh){
  .app{width:min(68.2cqw, calc(100cqh * 2.14406))}
}
.app *{font-synthesis-weight:none}

.app-chrome{
  height:calc(48.6 * var(--e));display:flex;align-items:center;
  padding-left:calc(24.8 * var(--e));gap:calc(7.1 * var(--e));
  border-bottom:1px solid var(--hair);position:relative;
}
.dot{width:calc(16.8 * var(--e));height:calc(16.8 * var(--e));border-radius:50%;flex:0 0 auto}
/* The three window buttons, in the colours a real window has. This is a picture
   of a browser, not a part of the sheet: it is the one place on the page where a
   colour outside the palette is correct, and the only circles the page draws. */
.d1{background:#EC6A5E}
.d2{background:#F4BF4F}
.d3{background:#61C554}
.app-url{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:calc(9.4 * var(--e));color:var(--muted);letter-spacing:.02em;
}
.app-body{height:calc(100% - (48.6 * var(--e)));display:flex;min-height:0}

/* sidebar */
.tree{width:calc(168 * var(--e));flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface-2);border-right:1px solid var(--hair);min-height:0;overflow:hidden}
.tr{display:flex;align-items:center;gap:calc(6 * var(--e));height:calc(16.6 * var(--e));padding:0 calc(12 * var(--e));font-size:calc(9 * var(--e));letter-spacing:-.005em;color:var(--body);white-space:nowrap;flex:0 0 auto}
.tr.brand{height:calc(26 * var(--e));border-bottom:1px solid var(--hair);color:var(--ink);font-weight:500;font-size:calc(10.4 * var(--e));letter-spacing:-.03em;margin-bottom:calc(3 * var(--e))}
.tr.brand .mk{width:calc(10 * var(--e));height:calc(10 * var(--e));color:var(--ink)}
.tr.lbl{font-family:var(--mono);font-size:calc(7.4 * var(--e));color:var(--muted);letter-spacing:.16em;text-transform:uppercase;height:calc(15 * var(--e));align-items:flex-end;padding-bottom:calc(3 * var(--e));margin-top:calc(2 * var(--e))}
.tr.ws{font-size:calc(9.4 * var(--e));color:var(--ink);height:calc(15 * var(--e));margin-bottom:calc(3 * var(--e))}
.tr .ic{width:calc(9.5 * var(--e));height:calc(9.5 * var(--e));flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;color:var(--muted)}
.tr.sel{background:var(--cell-sel);color:var(--ink);box-shadow:inset calc(2 * var(--e)) 0 0 var(--ink)}
.tr.sel .ic{color:var(--ink)}
.tr.foot{margin-top:auto;justify-content:space-between;border-top:1px solid var(--line);height:calc(22 * var(--e));font-size:calc(8 * var(--e));color:var(--soft)}
.pill{font-family:var(--mono);font-size:calc(6.8 * var(--e));letter-spacing:.12em;text-transform:uppercase;padding:calc(1.5 * var(--e)) calc(4 * var(--e));background:var(--ink);color:var(--on-dark)}

/* main column */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--bg);min-height:0}
.app-head{height:calc(34 * var(--e));flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 calc(14 * var(--e));border-bottom:1px solid var(--hair);background:var(--panel)}
.ah-l{min-width:0}
.ah-eyebrow{font-family:var(--mono);font-size:calc(7.4 * var(--e));line-height:calc(11 * var(--e));color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.ah-title{font-size:calc(10.4 * var(--e));line-height:calc(13 * var(--e));color:var(--ink);letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-r{display:flex;align-items:center;gap:calc(10 * var(--e));flex:0 0 auto}
.ah-run{position:relative;font-family:var(--mono);font-size:calc(7.2 * var(--e));color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ar-live{position:absolute;right:0;top:0;opacity:0;color:var(--sig)}
.ah-btn{height:calc(17 * var(--e));padding:0 calc(8 * var(--e));display:inline-flex;align-items:center;background:var(--ink-solid);color:var(--on-dark);font-size:calc(8.2 * var(--e));letter-spacing:-.02em}

.pg{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(7 * var(--e));padding:calc(9 * var(--e)) calc(14 * var(--e)) 0}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;flex:0 0 auto}
.pg-title{font-size:calc(14.5 * var(--e));line-height:1.1;letter-spacing:-.032em;color:var(--ink);margin-top:calc(2 * var(--e))}
.pg-meta{font-size:calc(7.6 * var(--e));color:var(--soft)}

.ins{border:1px solid var(--rule);background:var(--surface);flex:0 0 auto}
.stats{display:flex;border-bottom:1px solid var(--line)}
.st{flex:1 1 0;padding:calc(7 * var(--e)) calc(12 * var(--e)) calc(6 * var(--e));border-right:1px solid var(--line);min-width:0}
.st:last-child{border-right:0}
.st-k{font-family:var(--mono);font-size:calc(7 * var(--e));letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.st-v{font-size:calc(17 * var(--e));line-height:calc(20 * var(--e));letter-spacing:-.04em;color:var(--ink);margin-top:calc(2 * var(--e))}
.st-v.bad{color:var(--alert)}
.st-s{font-family:var(--mono);font-size:calc(7.2 * var(--e));color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reading{display:flex;flex-direction:column;gap:calc(2.5 * var(--e));padding:calc(5 * var(--e)) calc(12 * var(--e)) calc(6 * var(--e));background:var(--surface-2);font-size:calc(8.2 * var(--e));line-height:1.35;color:var(--body);letter-spacing:-.01em}
.reading span{display:flex;gap:calc(6 * var(--e));align-items:baseline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reading span:first-child{color:var(--ink)}
.reading i{width:calc(4 * var(--e));height:calc(4 * var(--e));background:var(--hair);flex:0 0 auto;transform:translateY(calc(-1 * var(--e)))}
.reading span:first-child i{background:var(--ink)}

.pg-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:calc(7 * var(--e));flex:1 1 auto;min-height:0;align-items:start}
.mxp,.pnl{border:1px solid var(--rule);background:var(--surface)}
.mxp{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ph{display:flex;justify-content:space-between;align-items:flex-end;padding:calc(6 * var(--e)) calc(12 * var(--e)) calc(5 * var(--e));border-bottom:1px solid var(--line)}
.ph-t{font-size:calc(9.4 * var(--e));letter-spacing:-.02em;color:var(--ink);font-weight:500;line-height:1.2}
.ph .lnk{font-size:calc(7.6 * var(--e));color:var(--soft)}

.mx{position:relative;overflow:hidden;flex:0 0 auto}
.mx-row{display:grid;grid-template-columns:1fr repeat(5, calc(28 * var(--e)));align-items:center;height:calc(15 * var(--e));padding:0 calc(8 * var(--e)) 0 calc(12 * var(--e));border-bottom:1px solid var(--line-2)}
.mx-row.head{height:calc(14 * var(--e));border-bottom:1px solid var(--line)}
.mx-row.head .mx-p{font-family:var(--mono);font-size:calc(7 * var(--e));letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.mx-row.head .mx-c .em{width:calc(8.6 * var(--e));height:calc(8.6 * var(--e));fill:currentColor;color:var(--soft)}
.mx-set{display:flex;justify-content:space-between;align-items:center;height:calc(15 * var(--e));padding:0 calc(12 * var(--e));background:var(--surface-2);border-bottom:1px solid var(--line);font-size:calc(8.4 * var(--e));color:var(--ink);letter-spacing:-.01em}
.mx-set b{font-family:var(--mono);font-size:calc(6.8 * var(--e));letter-spacing:.1em;color:var(--muted);text-transform:uppercase;font-weight:400}
.mx-p{font-family:var(--mono);font-size:calc(8.4 * var(--e));color:var(--body);letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:calc(10 * var(--e))}
.mx-c{justify-self:center;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:calc(7.8 * var(--e));color:var(--soft)}
.mx-c.hit{width:calc(11.5 * var(--e));height:calc(11.5 * var(--e));background:#1A1A17;color:#F4F2ED;font-size:calc(7.2 * var(--e))}
.mx-row.you{background:var(--row-you)}
.mx-row.you .mx-p{color:var(--ink)}
/* One row tall, the product's walking hatch. It lies still until the mock
   goes live (site.js adds .live once the entrance has played). */
.mx-sweep{position:absolute;left:0;right:0;top:calc(14 * var(--e));height:calc(15 * var(--e));pointer-events:none;
  background-color:var(--cell);background-image:var(--hatch);background-size:8.91px 8.91px;opacity:0}

/* ── the mock scans itself ──────────────────────────────────
   A 14-second loop, started by site.js after the entrance: the sweep walks
   the nine rows in five seconds, each row brightens as it is asked, the
   three chips land with their rows, the header says SCANNING, then the whole
   frame rests. Reduced motion never gets the .live class, and the rule at
   the end of the file stops the loops anyway. Figures never change: the
   illustration stays the illustration. Rows carry --i inline, in order. */
.live .mx-sweep{animation:mock-sweep 14s linear infinite}
.live .mx-row:not(.head),.live .mx-set{animation:mock-row 14s linear infinite;animation-delay:calc(var(--i,0) * .6s)}
.live .mx-c.hit{animation:mock-chip 14s var(--soft-ease) infinite;animation-delay:calc(var(--i,0) * .6s + .12s)}
.live .ar-idle{animation:mock-idle 14s linear infinite}
.live .ar-live{animation:mock-live 14s linear infinite}
@keyframes mock-sweep{0%{transform:translateY(0);opacity:.55}36%{transform:translateY(calc(8 * 15 * var(--e)));opacity:.55}37%,100%{transform:translateY(calc(8 * 15 * var(--e)));opacity:0}}
@keyframes mock-row{0%{opacity:.4}3%,90%{opacity:1}97%,100%{opacity:.4}}
@keyframes mock-chip{0%{opacity:0;transform:scale(.55)}3%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.55)}}
@keyframes mock-idle{0%,37%{opacity:0}41%,100%{opacity:1}}
@keyframes mock-live{0%,37%{opacity:1}41%,100%{opacity:0}}

.sov{flex:0 0 auto;border-top:1px solid var(--line);padding:calc(6 * var(--e)) calc(12 * var(--e)) calc(7 * var(--e))}
.sov-k{font-family:var(--mono);font-size:calc(7 * var(--e));letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.sov-bar{display:flex;height:calc(8 * var(--e));margin-top:calc(5 * var(--e));gap:calc(1.5 * var(--e))}
.sov-bar i{display:block;height:100%;transform-origin:left}
.js-anim .sov-bar i{transform:scaleX(0)}
.sov-key{display:flex;gap:calc(11 * var(--e));margin-top:calc(5 * var(--e));
  font-family:var(--mono);font-size:calc(7.2 * var(--e));color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.sov-key b{font-weight:400;color:var(--ink)}
.sov-key .me{color:var(--alert)}

/* side panels */
.side{display:flex;flex-direction:column;gap:calc(7 * var(--e));min-height:0;min-width:0}
.pnl{padding:calc(6 * var(--e)) calc(12 * var(--e)) calc(7 * var(--e))}
.spark{display:block;width:100%;height:calc(30 * var(--e));margin-top:calc(6 * var(--e))}
.spark .axis{stroke:var(--line);stroke-width:1}
.spark polyline{fill:none;vector-effect:non-scaling-stroke}
.spark .rival{stroke:#8A8A83;stroke-width:1}
.spark .you{stroke:var(--ink);stroke-width:1.5}
.spark .end{fill:var(--ink)}
.spark-key{display:flex;gap:calc(10 * var(--e));margin-top:calc(4 * var(--e));font-family:var(--mono);font-size:calc(7 * var(--e));color:var(--soft);letter-spacing:.02em;white-space:nowrap}
.spark-key i{display:inline-block;width:calc(10 * var(--e));height:0;border-top:1.5px solid var(--ink);vertical-align:middle;margin-right:calc(4 * var(--e))}
.spark-key i.k-rival{border-top:1px solid #8A8A83}
.al{display:grid;grid-template-columns:calc(5 * var(--e)) 1fr auto;gap:calc(6 * var(--e));align-items:start;padding:calc(5 * var(--e)) 0;border-bottom:1px solid var(--line-2);font-size:calc(7.8 * var(--e));line-height:1.35;color:var(--body);letter-spacing:-.01em}
.al:last-child{border-bottom:0;padding-bottom:0}
.al i{width:calc(5 * var(--e));height:calc(5 * var(--e));background:var(--alert);margin-top:calc(2.5 * var(--e))}
.al i.read{background:var(--hair)}
.al .when{font-family:var(--mono);font-size:calc(6.6 * var(--e));letter-spacing:.08em;color:var(--muted);text-transform:uppercase;white-space:nowrap;margin-top:calc(1 * var(--e))}

/* --- engine strip ------------------------------------------ */
.strip{
  flex:0 0 auto;height:calc(94 * var(--u));min-height:64px;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.strip .sc{display:flex;align-items:center;justify-content:center;gap:.5625rem;padding:0 .625rem;
  border-left:var(--hairline) solid var(--rule);min-width:0;transition:background-color .2s ease}
.strip .sc:hover{background:rgba(255,255,255,.4)}
.strip .eng{transition:transform .3s var(--expo)}
.strip .sc:hover .eng{transform:translateY(-2px)}
.strip .sc:hover span{color:var(--ink)}
.strip .sc:first-child{border-left:0}
/* Marque du moteur : même encre que le texte de la page, jamais la couleur de la marque,
   sinon cinq palettes étrangères débarquent sur une feuille en deux teintes. */
.strip .eng{width:1.25rem;height:1.25rem;flex:0 0 auto;color:var(--ink);fill:currentColor}
/* Correction optique : à taille égale une scintillation ajourée paraît plus petite
   qu'un G plein. On compense au dessin, pas à la boîte. */
.strip .eng-gemini{width:1.4375rem;height:1.4375rem}
.strip .eng-google{width:1.125rem;height:1.125rem}
.strip .eng-claude{width:1.3125rem;height:1.3125rem}
.strip .sc span{font-size:.9375rem;letter-spacing:-.028em;color:var(--soft);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Only the first two engines (ChatGPT, Claude) have a provider key today. The three
   still rolling out keep their place in the strip but are drawn in the sheet's muted
   grey, so nothing on the page reads as a measurement we do not make. The caption
   under the strip names them; keep both in step with LIVE_ENGINE_IDS. No new hue. */
.strip .sc:nth-child(n+3) .eng,
.strip .sc:nth-child(n+3) span{color:var(--muted)}

/* ============================================================
   SCROLLING SECTIONS
   ============================================================ */
.sec{background:var(--panel)}
.sec + .sec{border-top:var(--hairline) solid var(--rule)}
.wrap{padding:3.5rem 2rem 2.25rem}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h2{font-size:clamp(1.75rem,2.35vw,2.25rem);line-height:1.13;letter-spacing:-.033em;font-weight:400;margin-top:.75rem;max-width:22ch}
.lede{margin-top:.875rem;max-width:46ch;font-size:.9375rem;line-height:1.5;letter-spacing:-.015em;color:var(--body)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}

.grid{display:grid;border-top:var(--hairline) solid var(--rule)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.cellbox{position:relative;padding:1.625rem 1.375rem 1.875rem;border-left:var(--hairline) solid var(--rule);transition:background-color .2s ease}
/* On hover a 2px rule draws itself along the top edge, over the grid's
   hairline, and the mono number turns to ink. Nothing lifts, nothing glows. */
.cellbox::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--expo)}
.cellbox:hover::before{transform:scaleX(1)}
.cellbox:hover{background:rgba(255,255,255,.35)}
.cellbox .num{transition:color .25s ease}
.cellbox:hover .num{color:var(--ink)}
.cellbox:first-child{border-left:0}
.g3 .cellbox:nth-child(3n+1),.g4 .cellbox:nth-child(4n+1){border-left:0}
.g3 .cellbox:nth-child(n+4),.g4 .cellbox:nth-child(n+5){border-top:var(--hairline) solid var(--rule)}
.num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--muted)}
h3{font-size:1.0625rem;line-height:1.24;letter-spacing:-.028em;font-weight:400;margin-top:.875rem}
.cellbox p{margin-top:.5rem;font-size:.8125rem;line-height:1.52;letter-spacing:-.008em;color:var(--body)}

/* --- agencies band ----------------------------------------- */
.agency{display:grid;grid-template-columns:1.15fr 1fr;border-top:var(--hairline) solid var(--rule)}
.agency-l{padding:2.25rem 2rem 2.5rem;border-right:var(--hairline) solid var(--rule)}
.agency-r{display:flex;flex-direction:column}
.arow{padding:1.125rem 1.75rem;border-bottom:var(--hairline) solid var(--rule);flex:1 1 0;display:flex;flex-direction:column;justify-content:center}
.arow:last-child{border-bottom:0}
.arow{transition:background-color .2s ease}
.arow:hover{background:rgba(255,255,255,.35)}
.arow b{font-weight:400;font-size:.9375rem;letter-spacing:-.025em}
.arow span{font-size:.8125rem;line-height:1.5;color:var(--body);margin-top:.1875rem}

/* --- pricing ------------------------------------------------ */
.toggle{display:inline-flex;border:var(--hairline) solid var(--rule);flex:0 0 auto}
.toggle button{padding:.5rem .9375rem;font-size:.75rem;letter-spacing:-.01em;color:var(--body);transition:background-color .18s ease,color .18s ease}
.toggle button + button{border-left:var(--hairline) solid var(--rule)}
.toggle button[aria-pressed="true"]{background:var(--ink-solid);color:var(--on-dark)}
.toggle .save{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;margin-left:.375rem;opacity:.7}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--hairline) solid var(--rule)}
.tier{display:flex;flex-direction:column;border-left:var(--hairline) solid var(--rule);position:relative;transition:background-color .2s ease}
.tier:hover{background:rgba(255,255,255,.35)}
.tier:first-child{border-left:0}
.tier-head{background:var(--cell);border-bottom:var(--hairline) solid var(--rule);padding:1rem 1.25rem .9375rem;min-height:5.5rem}
.tier.is-pick .tier-head{background:var(--ink-solid);color:var(--on-dark)}
.tier-name{font-size:1rem;letter-spacing:-.028em;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pick{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;padding:.1875rem .375rem;border:1px solid currentColor}
.price{margin-top:.5rem;display:flex;align-items:baseline;gap:.3125rem}
.amount{font-size:1.75rem;line-height:1;letter-spacing:-.04em}
.per{font-size:.75rem;letter-spacing:-.01em;opacity:.7}
.billed{margin-top:.1875rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;opacity:.72;min-height:.9rem}
.tier-body{padding:1.125rem 1.25rem 1.375rem;flex:1 1 auto;display:flex;flex-direction:column}
.tier-for{font-size:.8125rem;line-height:1.5;color:var(--body);letter-spacing:-.008em}
.feats{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto}
.feats li{font-size:.8125rem;line-height:1.38;letter-spacing:-.008em;padding-left:.9375rem;position:relative;color:var(--ink)}
.feats li::before{content:"";position:absolute;left:0;top:.5rem;width:.375rem;height:1px;background:var(--rule)}
.tier .btn{margin-top:1.25rem;width:100%}
.fineprint{padding:1rem 2rem 1.5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;color:var(--muted);border-top:var(--hairline) solid var(--rule)}
.fineprint a{color:inherit;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;transition:color .18s ease}
.fineprint a:hover{color:var(--ink)}

/* --- faq ---------------------------------------------------- */
.faq{border-top:var(--hairline) solid var(--rule)}
.faq details{border-bottom:var(--hairline) solid var(--rule)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1875rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  font-size:1rem;letter-spacing:-.026em;transition:background-color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(38,38,31,.035)}
.faq .sign{position:relative;width:.75rem;height:.75rem;flex:0 0 auto}
.faq .sign::before,.faq .sign::after{content:"";position:absolute;background:var(--ink);transition:transform .24s var(--soft-ease)}
.faq .sign::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.faq .sign::after{top:0;left:50%;height:100%;width:1px;transform:translateX(-50%)}
.faq details[open] .sign::after{transform:translateX(-50%) scaleY(0)}
.faq .ans{padding:0 2rem 1.5rem;max-width:62ch;font-size:.875rem;line-height:1.6;letter-spacing:-.01em;color:var(--body)}
.faq details[open] .ans{animation:faq-in .34s var(--soft-ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- reading lens --------------------------------------------
   One custom property per word, written by site.js while the pointer is
   near: the word goes to ink and grows by four and a half hundredths. The
   transition smooths the steps between frames; nothing here runs on its own. */
.rw{display:inline-block;transform-origin:50% 62%;transition:transform .16s var(--soft-ease),color .16s ease}
/* Only a lit word carries a transform: at rest the two thousand spans are
   plain inline blocks, not two thousand paint layers. */
.rw.lit{transform:scale(calc(1 + .045 * var(--w, 0)));color:color-mix(in oklab, currentColor, var(--ink) calc(var(--w, 0) * 100%))}

/* --- closing cta -------------------------------------------- */
/* Two panels flank the copy from 1180px up, in the room the 46rem column
   leaves on each side; motion.js draws the marks in them, the engine's name
   under each. Below that width they are not drawn at all, so the text is
   never crowded. The field canvas sits behind everything. */
#scan{position:relative;overflow:hidden}
/* The still plus texture, for touch screens, reduced motion and the instant
   before motion.js runs; has-field hides it once the canvas draws the same. */
#scan::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 6.1v6.8M6.1 9.5h6.8' stroke='%23D6D0C3' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:19px 19px}
#scan.has-field::before{display:none}
#scan .close{position:relative;z-index:2}
.motion{position:absolute;top:0;height:100%;width:min(440px, calc((100% - 46rem) / 2));display:none;pointer-events:none;z-index:1}
.motion-l{left:0}
.motion-r{right:0}
/* height:100% and not top/bottom alone: a canvas is a replaced element and keeps its intrinsic 300x150 otherwise. */
.motion canvas{position:absolute;inset:0;width:100%;height:100%}
.motion-label{position:absolute;left:0;right:0;bottom:17%;text-align:center;font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:opacity .45s var(--soft-ease),transform .45s var(--soft-ease)}
.motion-label.is-out{opacity:0;transform:translateY(4px)}
@media (min-width:1180px){.motion{display:block}}
/* The live plus texture. It draws exactly what the still texture paints, so
   the swap is invisible; `has-field` is set by motion.js once the canvas has
   taken over, and hides the CSS version underneath. */
/* Three planes in the hero: the printed range at the back, the paper's plus
   ruling over it, the copy and the product frame on top. */
.clouds{position:absolute;left:0;top:0;width:100%;height:48%;z-index:0;pointer-events:none}
.ridge{position:absolute;left:0;top:22%;width:100%;height:78%;z-index:1;pointer-events:none}
/* Where the illustration is printed, it IS the hero's texture: the paper's
   plus ruling would otherwise print light crosses over the near-solid masses,
   which reads as dirt on the plate. The ruling and its live version come back
   below 1040px, where the illustration does not fit. */
@media (min-width:1041px){.hero::before,.dotfield-hero{display:none}}
.dotfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* The hero canvas covers only the band its fade can fill: half the pixels to clear and to keep. */
.dotfield-hero{top:46%;height:54%}
.hero.has-field::before{display:none}
.close{padding:3.75rem 2rem 3.5rem;text-align:center}
.close h2{margin:.75rem auto 0;max-width:18ch;font-size:clamp(2rem,3.2vw,2.875rem)}
.close .lede{margin:.9375rem auto 0;max-width:42ch}
.scanform{margin:1.5rem auto 0;display:flex;gap:.375rem;max-width:40rem;width:100%}
.scanform input{
  flex:1 1 auto;min-width:0;height:2.375rem;padding:0 .875rem;
  background:#FAF9F6;border:var(--hairline) solid var(--hair);border-radius:0;
  font-family:var(--font);font-size:.875rem;letter-spacing:-.02em;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.scanform input::placeholder{color:var(--muted)}
/* The page's only conversion form gets the same focus weight as every field in the
   app: the border darkens AND a 1px ring is laid over it, so focus is not the same
   weight as the error state. box-shadow does not affect layout, so nothing reflows. */
.scanform input:focus{outline:none;border-color:var(--rule);box-shadow:0 0 0 1px var(--rule)}
.scanform input[aria-invalid="true"]{border-color:var(--alert)}
.scanform input[aria-invalid="true"]:focus{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert)}
.scanform .btn{flex:0 0 auto}
.scanform .btn[disabled]{opacity:.55;cursor:progress}
.note{margin-top:.75rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--muted)}
.done{margin:0 auto;max-width:36rem;font-size:.9375rem;line-height:1.5;letter-spacing:-.02em;color:var(--sig)}
.done a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;color:var(--ink)}
.done a:hover{opacity:.6}
.err{margin:.75rem auto 0;max-width:36rem;font-size:.8125rem;line-height:1.5;letter-spacing:-.01em;color:var(--alert)}
.err[hidden]{display:none}

/* ============================================================
   NOT FOUND — 404.html
   The same frame as the home page, one sheet, the plus texture and the
   two registration marks of the auth sheet around the message.
   ============================================================ */
.nf-frame{min-height:calc(100svh - var(--pt) - var(--pb));display:flex;flex-direction:column}
.nf{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:4.5rem 2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M9.5 6.1v6.8M6.1 9.5h6.8' stroke='%23D6D0C3' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:19px 19px}
.nf.has-field{background-image:none}
.nf-sheet{position:relative;z-index:1;max-width:40rem;width:100%;padding:2.75rem 2.5rem 2.5rem;background:var(--panel);border:var(--hairline) solid var(--rule);text-align:center}
.nf-sheet::before{content:"";position:absolute;inset:-7px;pointer-events:none;border:var(--hairline) solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,#000 0 12px,transparent 12px calc(100% - 12px),#000 calc(100% - 12px) 100%),linear-gradient(180deg,#000 0 12px,transparent 12px calc(100% - 12px),#000 calc(100% - 12px) 100%);
  mask-image:linear-gradient(90deg,#000 0 12px,transparent 12px calc(100% - 12px),#000 calc(100% - 12px) 100%),linear-gradient(180deg,#000 0 12px,transparent 12px calc(100% - 12px),#000 calc(100% - 12px) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.nf-code{display:flex;align-items:center;justify-content:center;gap:.875rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nf-rule{display:inline-block;width:2rem;height:1px;background:var(--rule)}
.nf-title{margin-top:1rem;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.033em;font-weight:400}
.nf-lede{margin:1rem auto 0;max-width:40ch}
.nf-actions{margin-top:1.75rem;display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.nf-note{margin-top:1.5rem;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.nf-note a{color:var(--soft);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.nf-note a:hover{color:var(--ink)}
@media (max-width:680px){
  .nf{padding:2.5rem 1rem}
  .nf-sheet{padding:2rem 1.25rem 1.75rem}
  .nf-sheet::before{inset:-5px}
  .nf-actions .btn.lg{flex:1 1 100%}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{display:grid;grid-template-columns:1.334fr 1fr 1fr 1fr;background:var(--panel)}
.fbrand{padding:2.5rem 1.75rem 1.75rem;border-right:var(--hairline) solid var(--rule);display:flex;flex-direction:column}
.flock{display:flex;align-items:center;gap:.5rem}
.flock .mark{width:1.625rem;height:1.625rem}
.flock span{font-size:1.3125rem;font-weight:500;letter-spacing:-.03em}
.fcopy{margin-top:.5rem;max-width:24ch;font-size:.875rem;line-height:1.45;letter-spacing:-.02em;color:var(--soft)}
.fmeta{margin-top:auto;padding-top:2.25rem;font-family:var(--mono);font-size:.6875rem;line-height:1.7;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fmeta a{text-transform:none;letter-spacing:.02em;color:var(--soft);transition:color .18s ease}
.fmeta a:hover{color:var(--ink)}
.fcol{display:flex;flex-direction:column}
.fcol:not(:last-child){border-right:var(--hairline) solid var(--rule)}
.fhead{height:4rem;display:flex;align-items:center;justify-content:center;background:var(--cell);
  border-bottom:var(--hairline) solid var(--rule);font-size:1.125rem;font-weight:500;letter-spacing:-.028em}
.fcol li{flex:1 1 auto;display:flex;min-height:3.25rem}
.fcol li:not(:last-child){border-bottom:var(--hairline) solid var(--rule)}
.fcol li a{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;
  font-size:.9375rem;font-weight:500;letter-spacing:-.028em;text-align:center;
  transition:background-color .18s ease}
.fcol li a:hover{background:rgba(38,38,31,.05)}

.bottom{height:2.8125rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 1.75rem;font-size:.875rem;font-weight:500;letter-spacing:-.028em;background:var(--panel)}

/* ============================================================
   STICKY DOCK
   ============================================================ */
.dock{
  position:fixed;left:var(--px);right:var(--px);top:0;z-index:60;
  height:3.125rem;display:flex;align-items:center;gap:1rem;padding:0 1rem;
  background:rgba(242,240,235,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:var(--hairline) solid var(--rule);
  border-left:var(--hairline) solid var(--rule);border-right:var(--hairline) solid var(--rule);
  transform:translateY(-101%);transition:transform .34s var(--soft-ease);
}
.dock.is-on{transform:none}
/* One pixel of ink along the dock's lower edge, as long as the page has been
   read. site.js writes --p on scroll; there is no other progress indicator. */
.dock-progress{position:absolute;left:-1px;right:-1px;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.dock .brand{margin-right:auto}
.dock .mark{width:1.5rem;height:1.5rem}
.dock .brandname{font-size:.9375rem}
.dock-links{display:flex;gap:1.125rem;margin-right:.5rem}
.dock-links a{font-size:.8125rem;letter-spacing:-.015em;color:var(--body)}
.dock-links a:hover{color:var(--ink)}

/* ============================================================
   SCROLL — the hatch bands slide with the page
   Scroll-driven, so it costs no script and nothing runs when the
   page is still. Ten periods of the hatch over the whole document.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .frame .hatch{animation:hatch-drift linear both;animation-timeline:scroll(root)}
  }
}
@keyframes hatch-drift{from{background-position:0 0}to{background-position:-89.1px 0}}

/* ============================================================
   ENTRANCE
   ============================================================ */
.js-anim .ln-i{transform:translateY(130%)}
.js-anim .brand,
.js-anim .nav a,
.js-anim .actions > *,
.js-anim .sub,
.js-anim .cta-row > *,
.js-anim .app,
.js-anim .dot,
.js-anim .ah-l > *,
.js-anim .ah-r > *,
.js-anim .tr,
.js-anim .st,
.js-anim .mx-row,
.js-anim .mx-set,
.js-anim .pg-head,
.js-anim .ins,
.js-anim .pnl,
.js-anim .sov{opacity:0}

.js [data-rise]{opacity:0;transform:translateY(10px)}
.js.rise-all [data-rise]{opacity:1;transform:none}
.js [data-rise].in{
  opacity:1;transform:none;
  transition:opacity .72s var(--soft-ease), transform .72s var(--soft-ease);
  transition-delay:calc(var(--i,0) * 65ms);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js [data-rise]{opacity:1;transform:none}
  /* An infinite loop cut to .01ms would flicker: the mock's loops are removed
     outright and the frame shows its settled state. */
  .live .mx-sweep,.live .mx-row,.live .mx-c.hit,.live .ar-idle,.live .ar-live,.frame .hatch{animation:none !important}
  .mx-sweep{opacity:0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .wrap{padding:3rem 1.5rem 2rem}
  .cellbox{padding:1.375rem 1.125rem 1.625rem}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g4 .cellbox:nth-child(4n+1){border-left:var(--hairline) solid var(--rule)}
  .g4 .cellbox:nth-child(2n+1){border-left:0}
  .g4 .cellbox:nth-child(n+3){border-top:var(--hairline) solid var(--rule)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tier:nth-child(2n+1){border-left:0}
  .tier:nth-child(n+3){border-top:var(--hairline) solid var(--rule)}
  .app{width:78%}
  @supports (width: 1cqh){ .app{width:min(78cqw, calc(100cqh * 2.14406))} }
}

@media (max-width:1040px){
  :root{--px:22px;--pt:20px;--pb:19px}
  .nav{display:none}
  .burger{display:block}
  /* No side margins left to fill: the plates would be a handful of stray dots
     beside the copy, which reads as dirt rather than as a photograph. */
  .ridge,.clouds{display:none}
  .hdr{height:60px;min-height:60px;padding:0 14px}
  .hatch{height:24px;min-height:24px}
  .strip{height:auto;min-height:0;grid-template-columns:repeat(3,1fr)}
  .strip .sc{height:58px;border-top:var(--hairline) solid var(--rule)}
  .strip .sc:nth-child(-n+3){border-top:0}
  .strip .sc:nth-child(3n+1){border-left:0}
  /* 5 cellules sur 3 colonnes laissent la dernière ligne à moitié vide : la
     cinquième s'étale sur la place restante (idem à 2 colonnes plus bas). */
  .strip .sc:last-child{grid-column:span 2}
  h1{font-size:clamp(30px, calc(20px + 3.1vw), 50px)}
  .sub{font-size:clamp(13.5px,1.6vw,16px);max-width:min(30rem,86%)}
  .btn.lg{height:2.75rem;min-width:9rem}
  .lead{flex-grow:26}
  .gutter{flex-grow:13}
  .sheet{min-height:0;height:auto;min-height:calc(100svh - var(--pt) - var(--pb))}
  .hero{min-height:56svh}
  .agency{grid-template-columns:1fr}
  .agency-l{border-right:0;border-bottom:var(--hairline) solid var(--rule)}
  .dock{left:var(--px);right:var(--px)}
  .dock-links{display:none}
}

@media (max-width:860px){
  .footer{grid-template-columns:repeat(3,1fr)}
  .fbrand{grid-column:1 / -1;border-right:0;border-bottom:var(--hairline) solid var(--rule);padding:2rem 1.5rem}
  .fmeta{padding-top:1.75rem}
  h2{max-width:26ch}
}

@media (max-width:680px){
  :root{--px:14px;--pt:14px;--pb:14px;--bracket:6px}
  body{padding-left:max(var(--px), env(safe-area-inset-left));padding-right:max(var(--px), env(safe-area-inset-right))}
  .wrap{padding:2.5rem 1.125rem 1.75rem}
  .g4,.g3{grid-template-columns:1fr}
  .g4 .cellbox,.g3 .cellbox{border-left:0;border-top:var(--hairline) solid var(--rule)}
  .g4 .cellbox:first-child,.g3 .cellbox:first-child{border-top:0}
  .tiers{grid-template-columns:1fr}
  .tier{border-left:0}
  .tier:nth-child(n+2){border-top:var(--hairline) solid var(--rule)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip .sc{height:52px}
  .strip .sc:nth-child(-n+2){border-top:0}
  .strip .sc:nth-child(3n+1){border-left:var(--hairline) solid var(--rule)}
  .strip .sc:nth-child(2n+1){border-left:0}
  .strip .sc:nth-child(3){border-top:var(--hairline) solid var(--rule)}
  .strip .sc{gap:.4375rem;padding:0 .5rem}
  .strip .eng{width:1.0625rem;height:1.0625rem}
  .strip .eng-gemini{width:1.25rem;height:1.25rem}
  .strip .eng-google{width:.9375rem;height:.9375rem}
  .strip .eng-claude{width:1.125rem;height:1.125rem}
  .strip .sc span{font-size:.875rem}
  h1{font-size:clamp(23px, 6.5vw, 34px)}
  .cta-row{flex-direction:row;gap:.375rem}
  .btn.lg{min-width:0;flex:1 1 0;padding:0 .75rem;font-size:.8125rem}
  /* The mock is the one frame that explains the product, and on a phone it cannot
     fit inside 100svh: .app-body is 100% - 90.4e while .stats (58e) and .sov (52e)
     are fixed, so .mx absorbs every shortfall and collapsed to 0px at 375x667.
     .sheet is already released from the viewport lock here (height:auto above), so
     give the stage a real floor tied to the mock's own width and let the first
     screen run a little past the fold, which doubles as a scroll affordance.
     50px = 2*14px body padding + 2px .sides hairlines + 2*10px stage padding. */
  .stage{padding:0 10px;min-height:calc((100vw - 50px) * 0.70)}
  .app{width:100%;aspect-ratio:auto;height:100%;--e:calc(100cqw / 430)}
  @supports (width: 1cqh){ .app{width:100%} }
  .app-url{display:none}
  .tree{display:none}
  .side,.pg-meta,.reading span:nth-child(2),.ah-run{display:none}
  .pg-grid{grid-template-columns:1fr}
  .st:nth-child(3){display:none}
  /* Keep all five engine columns. Everything in the mock is scaled by --e, so five
     columns at 38e (190e + 24e of padding) leave more room for the prompt than the
     desktop layout does, and the three marks still sit in the columns the header
     names: 3 hits over 10 x 5 = 50 cells is the 6% the stat above claims. Hiding a
     column would leave a highlighted row with nothing highlighted on it. */
  .mx-row{grid-template-columns:1fr repeat(5, calc(30 * var(--e)));padding:0 calc(8 * var(--e)) 0 calc(12 * var(--e))}
  /* The frame shows the top of the matrix; rows past the eighth would only ever be
     clipped, so they are not drawn at all. */
  .mx-row:nth-child(n+8),.mx-set:nth-of-type(n+7){display:none}
  /* Never hide a legend entry while its bar segment stays drawn: the five entries are
     scaled by the same --e as the bar, so a tighter gap fits all five. */
  .sov-key{white-space:nowrap;overflow:hidden;gap:calc(8 * var(--e))}
  .faq summary{padding:1rem 1.125rem;font-size:.9375rem;gap:1rem}
  .faq .ans{padding:0 1.125rem 1.25rem}
  .close{padding:2.75rem 1.125rem 2.5rem}
  .scanform{flex-direction:column}
  .scanform .btn{width:100%;flex:0 0 auto;height:2.75rem}
  .err{font-size:.75rem}
  .fhead{height:3rem;font-size:1rem}
  .fcol li{flex:1 1 0;min-height:2.75rem}
  .fcol li a{font-size:.8125rem;padding:.25rem .5rem;line-height:1.2}
  .bottom{height:auto;flex-direction:column;align-items:flex-start;gap:.125rem;padding:.75rem 1.125rem;font-size:.75rem}
  .fineprint{padding:.875rem 1.125rem 1.25rem;font-size:.625rem}
}

@media (max-width:400px){
  .actions .ghost{display:none}
  .strip{grid-template-columns:repeat(2,1fr)}
}