/* ─────────────────────────────────────────────────────────────────────────
   site.css · Griffen's page devices, on our design system.

   What this file is NOT any more: site.css opened with 119 lines that
   reimplemented mi-system.css under new names. Six tokens meant exactly the
   same thing with a different spelling (--ink for --dark, --t-45 for --t-38,
   --d-90/60/45 for --dt-90/55/35, --band for --s-band), and the type scale,
   the bands, the buttons, the nav and the footer were all second copies.
   Two systems that agree today and cannot be merged tomorrow.

   All of that is deleted. mi-system.css loads first and provides it. What
   survives below is the part that was genuinely new: the pinned explainers,
   the hero stage, the ledger, the comparison panes. Those are hers and they
   are good, so they stay, drawing from our palette instead of a copy of it.

   The aliases below exist so her 195 device classes keep working without
   being rewritten one at a time. They point at our tokens, which means a
   change to the ladder in mi-system.css now reaches this file too. That is
   the whole point.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* the six renames, pointed home */
  --ink:var(--dark);
  --t-45:var(--t-38);
  --d-90:var(--dt-90); --d-60:var(--dt-55); --d-45:var(--dt-35);
  --band:var(--s-band);

  /* genuinely new, so they are kept rather than aliased */
  --lime-2:#CFEF52;
  --line-2:rgba(10,10,10,.22);
  --navh:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* The measure, for any .in.

   mi-system.css writes this as .s > .in, a DIRECT child selector, because
   every section in our markup is .s and holds its .in one level down. Four
   of her sections are "ph hero" with no .s on them at all, and the story
   section on Your data is a bare <section>, so the selector never matched
   and those headings sat flush against the window edge with no measure.
   Her own rule was a plain .in, which is what this restores. Ours still
   applies on top inside a band and sets the same two things. */
.in{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}

/* Her reset carried overflow-x:hidden on the body and ours does not, so it
   went out with the duplicated base layer. Kept as a guard: several of these
   devices are absolutely positioned past the measure on purpose. */
body{overflow-x:hidden}

/* Her bands were .on-lime / .on-ink / .on-paper2. Ours are .s--lime /
   .s--dark / .s--paper, and .s--paper already grounds on --paper-2, so the
   mapping is one to one. The HTML carries our names now; these two lines
   cover the descendant rules further down this file that still say .on-ink. */
.s--dark{--btn-shadow:var(--lime)}
.s--lime,.s--paper{--btn-shadow:var(--dark)}

/* The mark, at the keyline weight. Her .mark was right: fill, ink edge,
   stroke-width 170, paint-order stroke. It is .mi-mark in our system, and the
   only thing it needed was a fixed height for the nav and footer lockup,
   plus the two tokens she dropped so it can invert on a dark band. */
.logo .mi-mark{height:24px;vertical-align:baseline}
.s--dark{--mark-fill:var(--lime);--mark-edge:var(--dark)}


/* ── reveal (visible by default; JS hides only what is below the fold) ── */
.js [data-reveal].pre{opacity:0;transform:translateY(22px)}
[data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-par]{will-change:transform}

/* ═══ HOME ═══════════════════════════════════════ */
.hero{position:relative;overflow:hidden}
.hero .in{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero .d1{font-size:clamp(40px,4.7vw,68px)}
.hero h1 .em{display:inline-block;font-size:.84em;margin-top:.08em;white-space:nowrap}
.hero .pill,.ph .pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:7px 12px;border-radius:3px}
.hero .pill i,.ph .pill i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}

/* hero visual: sources feeding your record */
.hv{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;min-width:0}
.srcs{display:flex;flex-direction:column;gap:14px}
.src{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r);
  padding:10px 14px 10px 10px;font-weight:700;font-size:14px;white-space:nowrap;position:relative;z-index:2}
.src .ic{width:30px;height:30px;border-radius:5px;background:var(--ink);display:grid;place-items:center;flex:0 0 30px}
.src .ic svg{width:16px;height:16px;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.src.ping{animation:ping .5s var(--ease)}
@keyframes ping{40%{transform:translateX(4px)}}
.ledger{background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);
  min-width:0;position:relative;z-index:2;overflow:hidden}
.ledger-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--ink);
  background:var(--ink);color:#fff}
.ledger-h .lbl{color:var(--lime)}
.ledger-h .ct{font-family:var(--mono);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--d-60)}
.ledger ol{list-style:none;height:248px;overflow:hidden}
.row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center;
  padding:0 16px;height:49.6px;border-bottom:1px solid var(--line);font-size:13.5px;transition:background 1.2s ease}
.row.new{background:var(--lime);transition:none}
.row .t{font-family:var(--mono);font-size:10.5px;color:var(--t-45);font-variant-numeric:tabular-nums}
.row .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:3px;padding:3px 0;text-align:center}
.row .w{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .w b{font-weight:600}
.ledger-f{display:flex;gap:6px;padding:10px 16px;border-top:1.5px solid var(--ink);background:var(--paper-2)}
.ledger-f span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:3px;padding:5px 9px;background:#fff}
.ledger-f em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--t-45);align-self:center}
.pkt{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:2px;background:var(--ink);
  z-index:3;pointer-events:none;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .2s}
.pkt::after{content:'';position:absolute;inset:3px;background:var(--lime);border-radius:1px}

.g{display:block;height:7px;border-radius:2px;background:rgba(10,10,10,.18);width:100%}
/* The vertical rule on the side of this callout is the banned device: a
   coloured or inked bar down the left of a block is the single clearest
   tell, and the rule does not care that this one is ink rather than lime.
   A hairline above it says the same thing (it is a note, set apart) using a
   device the system already owns, the one .inst uses. */
.notai-call{font-size:16px;line-height:1.5;max-width:46ch;color:var(--t-90)}
.notai-call b{font-family:var(--display);font-weight:900;font-size:1.15em;letter-spacing:-.02em}
/* MI is not AI band */
.notai .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.notai h2 .x{position:relative;white-space:nowrap}
.flow{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr;align-items:center}
.node{border:1.5px solid var(--dline);border-radius:var(--r);padding:18px 18px 16px;min-height:118px;display:flex;flex-direction:column;
  gap:8px;transition:border-color .4s,background .4s,color .4s}
.node .lbl{color:var(--d-45)}
.node b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.node small{font-size:13px;color:var(--d-60);line-height:1.4}
.node.lit{border-color:#fff}
.node.gate.lit{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.node.gate.lit .lbl,.node.gate.lit small{color:rgba(10,10,10,.7)}
.node.nopt{border-style:dashed}
.node.nopt.lit{border-color:var(--d-60)}
.tag{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:3px;padding:4px 7px}
.tag.noai{background:var(--lime);color:var(--ink)}
.tag.dim{border:1px solid var(--dline);color:var(--d-60)}
.conn{height:2px;background:var(--dline);position:relative;margin-inline:8px}
.conn i{position:absolute;inset:0;background:var(--lime);transform-origin:left;transform:scaleX(var(--f,0))}
.conn.dash{background:repeating-linear-gradient(90deg,var(--dline) 0 6px,transparent 6px 12px)}
.conn.dash i{background:repeating-linear-gradient(90deg,var(--d-60) 0 6px,transparent 6px 12px)}

/* six things */
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);margin-top:clamp(36px,4vw,56px)}
.six li{list-style:none;padding:26px 24px 30px 0;border-bottom:1px solid var(--line-2);display:flex;gap:18px;align-items:baseline;
  transition:background .25s,padding .25s}
.six li:hover{background:var(--lime);padding-left:14px}
.six .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--t-45)}
.six b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,25px);letter-spacing:-.03em;line-height:1.15}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}

/* questions */
.qs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.qs-h{position:sticky;top:calc(var(--navh) + 48px)}
.qcards{display:flex;flex-direction:column;gap:28px}
.qcard{background:#fff;border:1.5px solid var(--ink);border-radius:var(--r);display:grid;
  grid-template-columns:minmax(0,1fr) 210px;overflow:hidden}
.qcard .txt{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.qcard h3{font-family:var(--display);font-weight:900;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.04em;line-height:1.06}
.qcard p{font-size:15.5px;color:var(--t-60);max-width:42ch}
.qcard .tlink{margin-top:6px}
/* Same banned side bar. It was already flipping to a top rule under 760px,
   so the mobile treatment was the right one all along. */
.mini{background:var(--paper-2);border-top:1.5px solid var(--ink);padding:22px 18px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.mini .lbl{font-size:9.5px;margin-bottom:4px}
.mbar{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center;font-size:11px;color:var(--t-60)}
.mbar i{display:block;height:10px;background:var(--ink);border-radius:2px;transform-origin:left;transform:scaleX(.04);
  transition:transform 1s var(--ease)}
.mbar.rep i{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.in-view .mbar i{transform:scaleX(var(--w))}
.in-view .mbar:nth-child(3) i{transition-delay:.12s}.in-view .mbar:nth-child(4) i{transition-delay:.24s}.in-view .mbar:nth-child(5) i{transition-delay:.36s}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;padding:6px 8px;border-radius:3px;
  background:#fff;border:1px solid var(--line-2);position:relative;overflow:hidden}
.mrow s{text-decoration:none;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mrow.held s{color:var(--red-ink)}
.mrow.held::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(10,10,10,.13) 0 4px,transparent 4px 8px);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .3s}
.in-view .mrow.held::after{transform:scaleX(1)}
.in-view .mrow.held:nth-of-type(4)::after{transition-delay:.55s}
.mline{height:8px;border-radius:2px;background:rgba(10,10,10,.13);transition:background .5s,transform .7s var(--ease)}
.mline.pick{transition-delay:.3s}
.in-view .mline.pick{background:var(--ink);transform:translateX(10px)}
.mto{font-family:var(--mono);font-size:10px;font-weight:700;margin-top:4px;opacity:.2;transition:opacity .5s .8s}
.in-view .mto{opacity:1}

/* start options */
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4vw,56px)}
/* These were divs that lifted on hover and went nowhere, then they were
   links wrapping the whole card. Adrian's call: the card is not the target,
   a button inside it is. A whole card as one hit area gives no edge to aim
   at and swallows any text selection inside it. The button carries the
   matching ?want= so the form arrives with that option already ticked. */
.opts .opt{border:1.5px solid var(--ink);border-radius:var(--r);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;
  background:#fff;transition:transform .15s,box-shadow .15s}
.opts .opt:hover{transform:none;box-shadow:none}
.opts .opt:focus-within{box-shadow:4px 4px 0 var(--ink)}
/* The button sits on the floor of the card whatever the copy above it does,
   so three cards of different text lengths still line their buttons up. */
.opts .opt .opt-cta{margin-top:auto;align-self:flex-start}
.opts .opt p{margin-bottom:18px}
.opts .opt .ic{width:52px;height:52px;border-radius:var(--r);background:var(--lime);border:1.5px solid var(--ink);display:grid;place-items:center;margin-bottom:8px}
.opts .opt .ic svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opts .opt p{font-size:15.5px;color:var(--t-60)}
.cta-band{text-align:center}
.cta-band .in{display:flex;flex-direction:column;align-items:center;gap:30px}

/* ═══ STORY (pinned explainer) ═══════════════════ */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px)}
.steps{display:flex;flex-direction:column}
.step{min-height:96svh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:8vh;
  transition:opacity .4s}
.js .story .step:not(.active){opacity:.38}
.step-n{display:flex;align-items:center;gap:12px}
.step-n b{font-family:var(--mono);font-size:12px;font-weight:700;border:1.5px solid var(--ink);border-radius:3px;padding:5px 8px;
  transition:background .3s}
.step.active .step-n b{background:var(--lime)}
.step-n span{flex:1;height:1.5px;background:var(--line-2);position:relative;overflow:hidden}
.step-n span i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.step h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.045em;line-height:1.04}
.step h4{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-top:8px}
.step p{color:var(--t-60);max-width:48ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);
  border-radius:3px;padding:6px 10px;background:#fff}
.srclist{display:grid;gap:10px;margin-top:4px}
.srclist div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;border-top:1px solid var(--line-2);padding-top:10px;font-size:15px;color:var(--t-60)}
.srclist b{color:var(--ink);font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.stage-wrap{position:sticky;top:calc(var(--navh) + 4svh);height:calc(100svh - var(--navh) - 8svh);align-self:start;
  display:grid;place-items:center}
.stage-box{width:100%;height:100%;position:relative;overflow:hidden}
.stage{width:560px;height:520px;position:absolute;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%) scale(.5)}
.frame{position:absolute;inset:0;background:#fff;border:2px solid var(--ink);border-radius:8px;box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.frame-h{height:42px;border-bottom:1.5px solid var(--ink);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--ink);color:#fff}
.frame-h .mark{height:15px;fill:var(--lime);stroke:var(--ink)}
.frame-h .lbl{color:#fff;font-size:10px}
.frame-h .ex{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-45);
  border:1px solid var(--dline);padding:3px 6px;border-radius:3px}
.dots{display:flex;gap:5px;margin-left:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--dline);transition:background .3s}
.dots i.on{background:var(--lime)}
.scn{position:absolute;inset:42px 0 0 0;padding:20px;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.scn.show{opacity:1;visibility:visible;transition:opacity .45s ease}
.scn .lbl{font-size:9.5px}
.cap{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;gap:12px;align-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--t-60);border-top:1px solid var(--line-2);padding-top:12px}
.cap b{color:var(--ink);font-variant-numeric:tabular-nums}

/* scene 1: capture */
.dev{border:1.5px dashed var(--line-2);border-radius:8px;padding:14px;margin-top:8px}
.dev-h{display:flex;justify-content:space-between;margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border:1.5px solid var(--line-2);border-radius:var(--r);height:118px;padding:12px;display:flex;flex-direction:column;gap:6px;
  color:var(--t-45);transition:all .45s var(--ease);position:relative;background:#fff}
.tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:13px;font-weight:700;margin-top:auto}
.tile s{text-decoration:none;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tile.on{border-color:var(--ink);background:var(--lime);color:var(--ink);transform:translateY(-3px);box-shadow:3px 3px 0 var(--ink)}
.tile.on s::before{content:'● '}
.tile.blank{border-style:dashed;color:rgba(10,10,10,.3)}
.tile.blank .g{margin-top:auto}
.tile b{font-size:13px}
/* scene 2: records */
.raw{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px;min-height:56px;align-content:flex-start}
.ev{width:74px;font-family:var(--mono);font-size:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:5px 10px;color:var(--t-60);
  transition:opacity .35s,transform .35s var(--ease)}
.ev.gone{opacity:.4;text-decoration:line-through;background:transparent}
.tbl{border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden}
.tbl-h,.tr{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0 12px;align-items:center}
.tbl-h{height:30px;background:var(--lime);border-bottom:1.5px solid var(--ink);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tr{height:33px;border-bottom:1px solid var(--line);font-size:12px;opacity:0;transform:translateX(-12px);transition:opacity .35s,transform .45s var(--ease),background .4s}
.tr:last-child{border-bottom:0}
.tr.on{opacity:1;transform:none}
.tr .t{font-family:var(--mono);font-size:10px;color:var(--t-45)}
.tr .o{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.tr.hit{background:var(--lime)}
.tabs{display:flex;gap:6px;margin-top:12px}
.tabs span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--line-2);
  border-radius:3px;padding:6px 10px;color:var(--t-45);transition:all .3s}
.tabs span.on{border-color:var(--ink);background:var(--ink);color:var(--lime)}
.json{position:absolute;right:20px;bottom:54px;width:300px;background:var(--ink);color:#E8E8DF;border-radius:var(--r);padding:12px 14px;
  font-family:var(--mono);font-size:10px;line-height:1.75;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease);
  box-shadow:6px 6px 0 var(--lime)}
.json.on{opacity:1;transform:none}
.json .k{color:var(--lime)}
.json .jl{display:grid;grid-template-columns:70px 1fr;gap:10px;padding-left:16px;margin-block:6px}
.json .g{background:rgba(255,255,255,.28)}
.json .g.k{background:var(--lime)}
.tr .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.json .h{color:var(--d-45);font-size:9px;letter-spacing:.12em;margin-bottom:4px}
/* scene 3: see the work */
.pane{border:1.5px solid var(--ink);border-radius:var(--r);padding:12px 14px}
.pane + .pane{margin-top:12px}
.pane-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bar{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center;font-size:12px;height:26px}
.bar i{display:block;height:12px;background:var(--ink);border-radius:2px;transform-origin:left;transform:scaleX(0)}
.bar .v{font-family:var(--mono);font-size:10px;text-align:right;color:var(--t-60);font-variant-numeric:tabular-nums}
.bar.rep i{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.rep-tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;background:var(--ink);color:var(--lime);border-radius:3px;
  padding:2px 6px;margin-left:6px;opacity:0;transition:opacity .3s}
.rep-tag.on{opacity:1}
.fld{display:flex;justify-content:space-between;align-items:center;height:31px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:12px;
  position:relative;overflow:hidden;background:#fff}
.fld + .fld{margin-top:6px}
.fld s{text-decoration:none;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.fld.sent s{color:var(--ink)}
.fld.held s{color:var(--red-ink)}
.fld .stripe{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(10,10,10,.14) 0 5px,transparent 5px 10px);
  transform-origin:left;transform:scaleX(0)}
.fld span{position:relative;z-index:1}
.xbtn{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);
  border-radius:3px;padding:4px 8px;transition:all .3s}
.xbtn.on{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
/* scene 4: your terms */
.outs{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.fmt{display:flex;flex-direction:column;gap:6px}
.targets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tgt{border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px 10px;font-size:12px;font-weight:700;color:var(--t-45);text-align:center;transition:all .4s var(--ease)}
.tgt.on{border-color:var(--ink);color:var(--ink);background:var(--paper-2);box-shadow:3px 3px 0 var(--ink)}
.share{display:grid;grid-template-columns:1fr 54px 150px;gap:0;align-items:center;margin-top:8px}
.doc{border:1.5px solid var(--ink);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:7px;background:#fff;position:relative}
.dl{height:8px;border-radius:2px;background:rgba(10,10,10,.16);transition:opacity .4s,background .4s,transform .5s var(--ease)}
.doc.cut .dl{opacity:.25}
.doc.cut .dl.keep{opacity:1;background:var(--ink)}
.arrow{text-align:center;font-family:var(--mono);font-size:16px}
.aibox{border:1.5px dashed var(--ink);border-radius:var(--r);padding:12px;min-height:150px;display:flex;flex-direction:column;gap:7px}
.aibox .dl{background:var(--ink);transform:scaleX(0);transform-origin:left}
.meter{margin-top:14px}
.meter-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--t-60);margin-bottom:6px}
.meter-t{height:14px;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.meter-t i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(1)}

/* privacy diagram */
.stage .pv{position:absolute;inset:42px 0 0 0;padding:20px}
.pv-dev{position:absolute;left:20px;top:20px;width:236px;bottom:96px;border:1.5px solid var(--ink);border-radius:8px;padding:12px;background:var(--paper-2)}
.pv-ai{position:absolute;right:20px;top:20px;width:196px;bottom:96px;border:1.5px dashed var(--ink);border-radius:8px;padding:12px;transition:background .4s,opacity .4s}
.pv-ai.closed{opacity:.5}
.pv-ai .terms{position:absolute;left:12px;right:12px;bottom:12px;font-family:var(--mono);font-size:9px;line-height:1.55;color:var(--t-60);opacity:0;transition:opacity .4s}
.pv-ai .terms.on{opacity:1}
.pgate{position:absolute;left:272px;top:60px;width:56px;bottom:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.pgate .post{width:4px;flex:1;background:var(--ink);border-radius:2px;transition:background .3s}
.pgate .lock{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;background:#fff;transition:background .3s}
.pgate .lock svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pgate.open .lock{background:var(--lime)}
.pgate.open .post{background:repeating-linear-gradient(var(--ink) 0 6px,transparent 6px 12px)}
.rec{position:absolute;left:32px;width:212px;height:38px;border:1.5px solid var(--ink);border-radius:5px;background:#fff;display:flex;align-items:center;
  gap:9px;padding:0 10px;font-size:12px;font-weight:600;transition:transform .2s linear,background .3s;overflow:hidden;z-index:2}
.rec .cb{width:14px;height:14px;border:1.5px solid var(--ink);border-radius:3px;flex:0 0 14px;display:grid;place-items:center;transition:background .3s}
.rec.pick .cb{background:var(--ink)}
.rec.pick .cb::after{content:'';width:6px;height:3px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg) translate(1px,-1px)}
.rec .stripe{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(10,10,10,.14) 0 5px,transparent 5px 10px);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}
.rec.held .stripe{transform:scaleX(1)}
.rec.moved{background:var(--lime)}
.rec span{position:relative}
.rec em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);opacity:0;position:relative;transition:opacity .3s}
.rec.held em{opacity:1}
.log{position:absolute;left:20px;right:20px;bottom:16px;height:66px;border:2px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:14px;padding:0 16px;transform:translateY(24px);opacity:0;transition:transform .5s var(--ease),opacity .4s;z-index:3}
.log.on{transform:none;opacity:1}
.log .lbl{color:var(--lime)}
.log b{font-family:var(--display);font-size:15px;font-weight:800}
.log .xbtn{margin-left:auto;border-color:var(--lime);color:var(--lime)}
.log .chip.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.log .chip.off{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.pv-note{position:absolute;left:20px;right:20px;bottom:16px;height:66px;display:flex;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--t-60);
  border-top:1px solid var(--line-2);transition:opacity .3s}

/* ═══ PRIVACY / START / ABOUT ═══════════════════ */
section.ph{padding-block:clamp(72px,10vw,140px) clamp(64px,8vw,112px)}
section.ph > .in{display:flex;flex-direction:column;gap:26px;position:relative;z-index:1}
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px;counter-reset:c}
.check{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.check .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--t-45)}
.check b{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.025em}
.check p{font-size:14.5px;color:var(--t-60)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.path{border:2px solid var(--ink);border-radius:var(--r);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:#fff}
.path.team{background:var(--ink);color:#fff;--btn-shadow:var(--lime)}
.path.team p{color:var(--d-60)}
.path.team .btn{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.path p{color:var(--t-60);max-width:40ch}
.path .lbl{margin-bottom:-4px}
.path.team .lbl{color:var(--lime)}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;
  font-family:var(--display);font-weight:800;font-size:clamp(19px,2vw,23px);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px;height:30px;flex:0 0 30px;border:1.5px solid var(--ink);border-radius:50%;position:relative;transition:background .2s,transform .3s var(--ease)}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{background:var(--lime);transform:rotate(45deg)}
.faq summary:hover i{background:var(--lime)}
.faq .a{padding:0 0 24px;color:var(--t-60);max-width:62ch}
.faq .a b{color:var(--ink)}
.big-quote{font-family:var(--display);font-weight:900;font-size:clamp(34px,5.4vw,72px);letter-spacing:-.05em;line-height:1}
.about-body{display:flex;flex-direction:column;gap:18px}
.about-body p{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--d-60);max-width:52ch}
.about-body p b{color:#fff}

/* ── responsive ─────────────────────────────────── */
@media (max-width:980px){
  .hero-grid,.notai .top,.qs,.split{grid-template-columns:minmax(0,1fr)}
  .qs-h{position:static}
  .six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:minmax(0,1fr)}
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story{grid-template-columns:minmax(0,1fr);gap:0}
  .stage-wrap{order:-1;top:var(--navh);height:min(50svh,440px);z-index:5;background:var(--paper);
    border-bottom:1px solid var(--line-2);margin-inline:calc(var(--gutter) * -1);padding:14px var(--gutter)}
  .step{min-height:78svh;padding-block:6vh 10vh}
  .js .story .step:not(.active){opacity:.3}
  .flow{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 32px auto 32px auto 32px auto}
  .conn{width:2px;height:auto;margin:6px 0 6px 28px;align-self:stretch}
  .conn i{transform-origin:top;transform:scaleY(var(--f,0))}
  .conn.dash{background:repeating-linear-gradient(180deg,var(--dline) 0 6px,transparent 6px 12px)}
  .conn.dash i{background:repeating-linear-gradient(180deg,var(--d-60) 0 6px,transparent 6px 12px)}
  .node{min-height:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .hv{grid-template-columns:minmax(0,1fr);gap:22px}
  .srcs{flex-direction:row;flex-wrap:wrap;gap:8px}
  .src{font-size:12.5px;padding:7px 10px 7px 7px}
  .src .ic{width:24px;height:24px;flex-basis:24px}
  .row{grid-template-columns:104px minmax(0,1fr);padding:0 12px;font-size:12.5px}
  .six{grid-template-columns:minmax(0,1fr)}
  .qcard{grid-template-columns:minmax(0,1fr)}

  .checks,.paths{grid-template-columns:minmax(0,1fr)}
  .srclist div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ledger-f em{display:none}
  .foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  [data-par]{transform:none!important}
}

/* ═══ v3 additions ═══════════════════════════════ */
.tg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:3px;padding:3px 6px;text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink)}
.tg.sh{background:#fff;color:var(--ink)}
.tg.cr{background:var(--lime);color:var(--ink)}
.tg.hb{background:transparent;color:var(--red-ink);border-color:var(--red-ink)}
@keyframes hin{from{opacity:0;transform:translateY(10px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes flash{0%,100%{background:#fff}30%{background:var(--lime)}}
@keyframes wipe{from{transform:scaleX(0)}}
@keyframes litup{from{background:rgba(10,10,10,.12);border-color:transparent}}
@keyframes knob{from{left:15px}}
@keyframes tgoff{from{background:var(--ink)}}
@keyframes fadein{from{opacity:0}}

/* hero: six things */
.hero-stage{position:relative;width:100%;aspect-ratio:540/452;max-width:640px;justify-self:end}
.hero-stage .stage-box{position:absolute;inset:0}
.hstage{width:540px;height:452px}
.frame-h .hnum{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--lime)}
.frame-h .htitle{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em;color:#fff}
.segs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:10px 18px;border-bottom:1.5px solid var(--ink);background:var(--paper-2)}
.seg{height:10px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;cursor:pointer;position:relative;overflow:hidden;padding:0}
.seg i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.seg.done i{transform:scaleX(1)}
.seg.on i{animation:segrun var(--dur,5.2s) linear both}
.seg.on.paused i{animation-play-state:paused}
@keyframes segrun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.seg:hover{background:var(--lime)}
/* COLLISION. mi-system.css:315 also defines .hp, as a visually-hidden
   utility: left:-9999px, width:1px, height:1px, overflow:hidden. Her .hp is
   the hero panel and does not set width, height or overflow, so ours won
   those three and the panel rendered at 35x32 with the contents clipped.
   Reset explicitly here. The permanent fix is to rename the utility in
   mi-system.css, because a two-letter class name is going to keep doing
   this. Seven other names are shared across the two files today. */
/* SCOPED, and this one matters. mi-system.css:321 uses .hp as its
   visually-hidden utility, and signup.html:146 is a honeypot field wearing
   it: <input name="company" class="hp" aria-hidden="true">. Unscoped, the
   resets below turned that trap into a visible 375px text box on the form.
   A human fills it, the submission is scored as spam, and the signup is
   lost silently. Found by the mobile sweep, not by anything throwing. */
.hstage .hp{position:absolute;left:0;right:0;top:74px;bottom:0;padding:18px 20px;
  width:auto;height:auto;overflow:visible}
.hstage .hp .lbl{font-size:9.5px;display:block;margin-bottom:10px}
.hstage .hp.play [style*="--d"]{animation:hin .55s var(--ease) var(--d) both}
.hstage .hp-cap{display:grid;grid-template-columns:150px 1fr;gap:18px;height:100%}
.kinds{display:flex;flex-direction:column;gap:10px;padding-top:24px}
.kind{display:flex;align-items:center;gap:9px;border:1.5px solid var(--ink);border-radius:var(--r);padding:9px 10px;font-size:13px;font-weight:700;background:#fff}
.kind svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hstage .hp.play .kind{animation:flash 1s ease var(--d) both}
.hrecs{display:flex;flex-direction:column;gap:8px}
.hrec{border:1.5px solid var(--ink);border-radius:var(--r);padding:9px 12px;background:#fff;display:flex;flex-direction:column;gap:1px;box-shadow:3px 3px 0 var(--ink)}
.hrec b{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.hrec span{font-size:14px;font-weight:600}
.hbars{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.hbar{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.hbar i{display:block;height:18px;border-radius:3px;background:var(--ink);transform-origin:left;transform:scaleX(var(--w))}
.hbar.rep i{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hbar em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--lime);border-radius:3px;padding:2px 6px;margin-left:6px}
.hstage .hp.play .hbar i{animation:grow .9s var(--ease) var(--d) both}
.hstage .hp.play .hbar em{animation:fadein .4s ease var(--d) both}
.convs{display:flex;flex-direction:column;gap:10px}
.conv{border:1.5px solid var(--ink);border-radius:var(--r);padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff}
.conv b{width:100%;font-size:14px}
.hpriv{display:grid;grid-template-columns:1fr 60px 150px;align-items:center;height:100%}
.hcomp{border:2px solid var(--ink);border-radius:8px;height:250px;padding:14px;position:relative;background:var(--paper-2)}
.stack{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.stack i{display:block;height:24px;border:1.5px solid var(--ink);border-radius:4px;background:#fff linear-gradient(90deg,rgba(10,10,10,.18),rgba(10,10,10,.18)) 10px 50%/45% 6px no-repeat}
.hlock{position:absolute;right:12px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);display:grid;place-items:center}
.hlock svg,.hcloud svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hcut{height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);position:relative}
.hcut span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--red-ink);color:var(--red-ink);font-size:11px;display:grid;place-items:center}
.hstage .hp.play .hcut span{animation:hin .4s var(--ease) var(--d) both}
.hcloud{border:1.5px dashed var(--line-2);border-radius:8px;padding:16px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;color:var(--t-60)}
.hcloud svg{width:26px;height:26px;stroke:var(--t-45)}
.hcloud b{color:var(--ink);font-size:13px}
.hcloud span{font-size:12px}
.rcard{border:2px solid var(--ink);border-radius:var(--r);background:#fff;max-width:380px;margin:4px auto 0}
.rcard-h{padding:12px 14px;border-bottom:1.5px solid var(--ink);display:flex;flex-direction:column;gap:1px;background:var(--paper-2)}
.rcard-h b{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.rcard-h span{font-size:14px;font-weight:600}
.frow,.crow{display:flex;justify-content:space-between;align-items:center;padding:0 14px;height:42px;border-bottom:1px solid var(--line);font-size:13px;position:relative}
.frow:last-child,.crow:last-child{border-bottom:0}
.tog{width:32px;height:18px;border-radius:9px;background:var(--ink);position:relative;flex:0 0 32px;display:block;transition:background .3s}
.tog::after{content:'';position:absolute;top:2px;left:16px;width:14px;height:14px;border-radius:50%;background:var(--lime);transition:left .3s var(--ease),background .3s}
.frow.off .tog,.crow.off .tog{background:rgba(10,10,10,.18)}
.frow.off .tog::after,.crow.off .tog::after{left:2px;background:#fff}
.frow.off span,.crow.off span{color:var(--t-45);text-decoration:line-through}
.hstage .hp.play .frow.off .tog{animation:tgoff .01s linear var(--d) both}
.hstage .hp.play .frow.off .tog::after{animation:knob .3s var(--ease) var(--d) both}
.tgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:10px}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;margin-bottom:22px}
.legend i{width:16px;height:12px;border-radius:2px;background:var(--lime);border:1.5px solid var(--ink)}
.tgrid i{height:26px;border-radius:3px;background:rgba(10,10,10,.12);border:1.5px solid transparent}
.tgrid i.rel{background:var(--lime);border-color:var(--ink)}
.hstage .hp.play .tgrid i.rel{animation:litup .3s ease .9s both}
.cmp,.cmp2{display:flex;flex-direction:column;gap:12px}
.cmp-r{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}
.cmp-r i{display:block;height:16px;border-radius:3px;transform-origin:left}
.cmp-r i.full{background:var(--ink)}
.cmp-r i.small{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink);transform:scaleX(.14)}
.hstage .hp.play .cmp-r i.full{animation:grow 1.1s var(--ease) var(--d) both}
.hstage .hp.play .cmp-r i.small{animation:fadein .4s ease var(--d) both}

/* flow band */
.flow{margin-top:28px}
@media (min-width:981px){.flow{grid-template-rows:auto auto;row-gap:14px}}
.brk{grid-row:1;border-top:2px solid var(--lime);padding-top:10px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);position:relative}
.brk::before,.brk::after{content:'';position:absolute;top:-2px;width:2px;height:10px;background:var(--lime)}
.brk::before{left:0}.brk::after{right:0}
.brk.b-mi{grid-column:1 / 4}
.brk.b-ai{grid-column:5 / 8;border-top-style:dashed;border-top-color:var(--d-60);color:var(--d-60)}
.brk.b-ai::before,.brk.b-ai::after{background:var(--d-60)}
.flow .node,.flow .conn{grid-row:2}
.node small{font-size:13.5px}
@media (max-width:980px){
  .brk{display:none}
  .flow .node,.flow .conn{grid-row:auto}
  .hero-stage{justify-self:stretch;max-width:none}
}

/* home minis */
.msearch{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:6px 8px;font-size:11.5px;font-weight:600}
.msearch svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2.2}
.mhit{display:flex;align-items:baseline;gap:8px;font-size:11px;color:var(--t-60)}
.mhit b{font-family:var(--display);font-size:20px;font-weight:900;color:var(--ink);min-width:26px;font-variant-numeric:tabular-nums}
.mtags{display:flex;gap:6px}
.mline.red{position:relative;overflow:hidden}
.mline.red::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(179,36,26,.45) 0 3px,transparent 3px 6px);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .5s}
.in-view .mline.red::after{transform:scaleX(1)}

/* how: records */
.scn .tbl-h,.scn .tr{grid-template-columns:minmax(0,1fr) 112px}
.scn .tr{height:38px;font-size:13px}
.tr .rt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .rt b{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.tr .k{justify-self:start;border:1.5px solid var(--ink);border-radius:3px;padding:2px 6px;background:#fff}
.tabs span{min-width:0}
.anl{position:absolute;right:20px;bottom:64px;display:flex;gap:16px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 16px;
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .45s var(--ease);box-shadow:6px 6px 0 var(--lime);font-size:12px}
.anl.on{opacity:1;transform:none}
.anl .lbl{color:var(--lime);margin:0}
.anl b{font-family:var(--display);font-size:20px;color:var(--lime);margin-right:3px}
.fld .tg{position:relative;z-index:1}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.use{border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;min-height:150px;color:var(--t-45);transition:all .45s var(--ease)}
.use svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.use b{font-size:13px;line-height:1.25}
.use.on{border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff}
.u-al,.u-ef{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.u-al i{height:6px;border-radius:2px;background:currentColor;opacity:.35;width:60%;transition:width .6s var(--ease)}
.use.on .u-al i{width:100%;opacity:1}
.u-ch{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:auto}
.u-ch i{flex:1;background:currentColor;opacity:.35;height:calc(var(--h)*100%);border-radius:2px 2px 0 0}
.use.on .u-ch i{opacity:1}
.use.on .u-ch i:nth-child(3){background:var(--red-ink)}
.u-ef i{height:8px;border-radius:2px;background:currentColor;opacity:.35}
.u-ef i:first-child{width:100%}.u-ef i:last-child{width:100%;transition:width .7s var(--ease)}
.use.on .u-ef i{opacity:1}
.use.on .u-ef i:last-child{width:45%;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* how: cost */
.cost .cbox{position:absolute;top:20px;height:250px;border-radius:8px;padding:12px 14px}
.cmi{left:20px;width:306px;border:2px solid var(--ink);background:var(--paper-2)}
.cai{right:20px;width:180px;border:2px dashed var(--ink)}
.noai{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:3px;padding:3px 6px;background:#fff;transition:background .3s}
.noai.on{background:var(--lime)}
.cgrid{display:grid;grid-template-columns:repeat(6,38px);gap:8px;margin-top:16px}
.cgrid i{height:30px;border-radius:3px;background:#fff;border:1.5px solid var(--line-2);transition:background .3s,border-color .3s,opacity .3s}
.cgrid.scan i{opacity:.45}
.cgrid i.rel{background:var(--lime);border-color:var(--ink);opacity:1}
.fly{position:absolute;width:38px;height:30px;border-radius:3px;background:var(--lime);border:1.5px solid var(--ink);z-index:3}
.scn .q{position:absolute;top:118px;left:390px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--lime);border-radius:12px;padding:6px 10px;z-index:4}
.cmp2{position:absolute;left:20px;right:20px;top:296px}
.cmp2 .cmp-r i.full{transform:scaleX(0)}
.cmp2 .cmp-r i.small{transform:scaleX(0)}

/* privacy: local */
.loc{position:relative;height:100%}
.comp{position:absolute;left:0;top:0;width:370px;height:420px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-2);padding:14px}
.comp-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.comp-l svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2}
.ins{position:absolute;left:14px;top:62px;display:flex;flex-direction:column;gap:12px}
.in4{display:flex;align-items:center;gap:8px;width:118px;border:1.5px solid var(--line-2);border-radius:var(--r);padding:9px 10px;font-size:12.5px;font-weight:700;background:#fff;color:var(--t-45);transition:all .35s}
.in4 svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in4.on{border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.lmid{position:absolute;left:150px;top:150px;width:60px;height:60px}
.lmark{position:absolute;inset:0;border-radius:50%;background:var(--ink);display:grid;place-items:center;z-index:2}
.lmark .mark{height:22px;fill:var(--lime);stroke:var(--ink)}
.pipe{position:absolute;top:29px;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(var(--f,0))}
.pipe{left:-18px;width:18px}
.pipe.out{left:60px;width:18px}
.rfold{position:absolute;left:228px;top:56px;width:124px;height:300px;border:2px solid var(--ink);border-radius:8px;background:#fff;padding:10px}
.rfold .lbl{font-size:9px}
.rstack{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rstack i{display:block;height:24px;border-radius:4px;background:var(--lime) linear-gradient(90deg,rgba(10,10,10,.3),rgba(10,10,10,.3)) 8px 50%/55% 5px no-repeat;border:1.5px solid var(--ink);animation:hin .4s var(--ease) both}
.nolink{position:absolute;left:372px;top:200px;width:36px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px)}
.nolink span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--red-ink);color:var(--red-ink);font-size:11px;display:grid;place-items:center}
.cloud{position:absolute;right:0;top:120px;width:110px;border:1.5px dashed var(--line-2);border-radius:8px;padding:12px 10px;display:flex;flex-direction:column;gap:5px;color:var(--t-60);font-size:11px;line-height:1.3}
.cloud svg{width:24px;height:24px;fill:none;stroke:var(--t-45);stroke-width:2}
.cloud > b{color:var(--ink);font-size:12.5px}
.cloud .zero b{font-family:var(--display);font-size:22px;color:var(--ink)}

/* privacy: controls */
.ctl{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:0;margin-top:6px}
.ccard{border:2px solid var(--ink);border-radius:var(--r);background:#fff;overflow:hidden}
.ccard.cshare{border-style:dashed}
.ccard-h{padding:10px 12px;border-bottom:1.5px solid var(--ink);background:var(--paper-2);display:flex;flex-direction:column;gap:3px}
.ccard-h .lbl{font-size:9px}
.ccard-h b{font-size:12px}
.crow{height:46px;padding:0 12px;font-size:12.5px}
.srow{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12.5px;position:relative;overflow:hidden}
.srow:last-child{border-bottom:0}
.srow > span:first-child{width:86px;flex:none}
.srow em{display:none;font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink);margin-left:auto}
.srow.off .g{background:repeating-linear-gradient(115deg,rgba(179,36,26,.4) 0 3px,transparent 3px 6px)}
.srow.off em{display:inline}
.carrow{text-align:center;font-family:var(--mono)}

/* privacy: relevant records */
.relv{display:grid;grid-template-columns:118px minmax(0,1fr) 136px;gap:14px;height:340px}
.r-ai,.r-mi,.r-out{border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}
.r-ai{border:2px dashed var(--ink)}
.r-mi{border:2px solid var(--ink);background:var(--paper-2)}
.r-out{border:2px dashed var(--ink)}
.r-ai .lbl,.r-mi .lbl,.r-out .lbl{font-size:9px}
.bubble{background:var(--ink);color:#fff;border-radius:8px 8px 8px 2px;padding:10px;font-size:12px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.bubble.on{opacity:1;transform:none}
.rlist{display:flex;flex-direction:column;gap:6px}
.ri{font-size:11px;font-weight:600;background:#fff;border:1.5px solid var(--line-2);border-radius:4px;padding:7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .35s}
.rlist.scan .ri{opacity:.4}
.rlist .ri.rel{opacity:1;background:var(--lime);border-color:var(--ink)}
.olist{display:flex;flex-direction:column;gap:6px}
.oi{font-size:11px;font-weight:600;background:var(--lime);border:1.5px solid var(--ink);border-radius:4px;padding:7px 8px;display:flex;align-items:center;gap:6px;
  opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .45s var(--ease)}
.oi.on{opacity:1;transform:none}
.oi i{margin-left:auto;width:26px;height:8px;border-radius:2px;background:repeating-linear-gradient(115deg,rgba(179,36,26,.55) 0 3px,transparent 3px 6px)}
.rlog{position:absolute;left:20px;right:20px;bottom:18px;height:54px;border:2px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px;
  font-size:12.5px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s var(--ease)}
.rlog.on{opacity:1;transform:none}
.rlog b{font-family:var(--display);font-weight:800;font-size:14px}
.rlog span{color:var(--d-60)}
.rlog .xbtn{margin-left:auto;border-color:var(--lime);color:var(--ink)}

/* privacy: audit */
.srch{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:var(--r);padding:11px 14px;font-size:15px;font-weight:600;height:46px}
.srch svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2.2;flex:none}
.caret{width:2px;height:18px;background:var(--ink);animation:blink 1s step-end infinite}
.hits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.hit{border:1.5px solid var(--ink);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--t-60)}
.hit b{font-family:var(--display);font-size:32px;font-weight:900;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.hit:first-child{background:var(--lime)}
.alist{display:flex;flex-direction:column;gap:7px}
.ai-r{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line-2);border-radius:4px;padding:7px 10px;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.ai-r.on{opacity:1;transform:none}
.ai-r b{margin-right:auto;font-weight:600}

/* stage size for both stories */
.scn .bar{grid-template-columns:170px minmax(0,1fr)}
.story .stage{height:540px}

/* multi-page: anchors land below the sticky nav */
[id]{scroll-margin-top:calc(var(--navh) + 24px)}

/* The hairline under the nav goes. On lime against lime it is not doing
   separation work, it is just a line, and Adrian is clearing lines off this
   page. The nav still reads as a bar because it is a different ground once
   the page scrolls under it. */
.nav{border-bottom:0}

/* ── the nav ─────────────────────────────────────────────────────────────
   The row of labels stays on a wide screen and collapses to the burger at
   1020px, which is hers. What does not stay is Martian Mono: six uppercase
   mono labels across the top read as a terminal readout, and the nav is the
   one place on the site where the brand speaks before the content does.
   Archivo at 13.5px and .04em tracking is what mi-system.css already uses
   for these, for the same reason. Mono needs air between letters to be
   legible and a grotesk does not, so the tracking comes down and the size
   goes up as it crosses over.

   Her markup is untouched: site.js:11 grabs #burger with no null check and
   the hero stage dies with it, so this is written against .burger and
   .links.open rather than our .nav-toggle and data-open.
   ──────────────────────────────────────────────────────────────────────── */
/* No min-height here, and that is deliberate. --navh is MEASURED from this
   element by site.js. Feeding it back in as a min-height made the nav its
   own input: measure 77, set --navh to 77, min-height pushes the padded box
   to 85, measure 85, and so on. The nav grew about 60px a second and the
   page grew with it. --navh is an output of this element and never an
   input to it. The height comes from the mark and the padding. */
/* mi-system.css:1379 puts a top border on whatever follows the active link.
   That is a row divider, correct in the stacked panel and wrong on a
   horizontal row, where it draws a stray rule above one label. It is global
   there, so it has to be cancelled here and re-added inside the panel query.
   Seventh rule in this file that is correct for the markup it was written
   against and wrong once the markup changed. */
.nav .in{display:flex;align-items:center;gap:24px;
  padding-top:26px;padding-bottom:20px}
/* mi-system.css section 34 makes .nav .links a floating panel at EVERY
   width: absolute, anchored right, with a background, a border, a radius, a
   blur and a drop shadow. Same specificity as this rule, so this one wins
   only the properties it actually names. Overriding display alone left a
   floating translucent card that happened to be flex. Every property that
   block sets has to be put back by hand, which is the same trap .hp fell
   into further up this file. */
.nav .links{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:26px;
  margin-left:auto;position:static;inset:auto;min-width:0;padding:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none}
/* display:inline-block, not flex. mi-system sets display:flex on these for
   the stacked panel, which turns each run of label text into its own
   anonymous flex item: "How", the mark and "works" spread across the pill
   instead of reading as one phrase. */
.nav .links a{display:inline-block;width:auto;text-align:left;
  justify-content:flex-start;border-radius:0;
  font-family:var(--display);font-weight:700;font-size:13.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--t-60);
  text-decoration:none;padding:5px 0;white-space:nowrap;
  border-bottom:1.5px solid transparent}
.nav .links a:hover{color:var(--dark)}
/* The current page is a pill, Adrian's call on 4 October. The underline it
   replaced was four pixels of information on a 13.5px mono label, and the
   panel's own .on rule fills the whole row with ink, which reads as a
   redaction bar once the links sit in a horizontal row. Every property that
   rule sets has to be named here to be changed. */
.nav .links a.on{position:relative;background:#FFFFFF;color:var(--dark);
  border-radius:100px;padding:7px 11px;border:1px solid var(--dark);
  --mark-fill:#FFFFFF;--mark-edge:var(--dark)}
/* The pill carries the grain too. A flat white lozenge on a grained lime
   band is the only thing on the page without texture, which is exactly how
   it reads: pasted on. Same warm noise as a dark band, at a much lower
   opacity, because it only has to stop the white being flat. */
.nav .links a.on::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:var(--grain-warm);background-size:120px 120px;
  opacity:.34;pointer-events:none;z-index:0}
.nav .links a.on > *,.nav .links a.on{z-index:1}

/* The mark sits inside two of the labels, so it reads as the brand rather
   than as the word MI set in a grotesk. 1.85em against a 13.5px label is
   25px, which is close to cap height once the keyline is accounted for. */
/* display:inline-block is load bearing. mi-system sets img,svg{display:block}
   globally, and a block level svg inside an inline link gets its own line
   box: the label blew apart into "HOW ... MI ... WORKS" across the pill and
   the whole row wrapped to two lines.

   The size is measured, not chosen. At 1.5em the painted glyph was 17.3px
   against a 9.4px cap height, so it overshot the cap by 3px and the baseline
   by 4.7px. Adrian read that as too high three times; it was too big, and
   bulging out of the line in both directions reads as sticking up.

   0.9em puts the painted glyph at about 1.1x cap height, which is the normal
   optical overshoot for a mark set in a line of type. The vertical-align
   follows from it rather than being guessed:

     painted height = element height x (glyph + stroke) / viewBox
                    = element x (1158 + 170) / 1554.3  = element x 0.854
     the glyph is centred in its viewBox, 198 units clear top and bottom,
     so the painted centre IS the element box centre
     align so that centre lands on the cap centre:
     offset = (element height - cap height) / 2, in em
            = (0.9 x 13.5 - 9.4) / (2 x 13.5) = 0.10em

   Change the height and this number changes with it. */
.nav .links .navmi{display:inline-block;height:0.9em;width:auto;
  vertical-align:-0.10em;margin:0 .22em;flex:none}
.nav .btn{white-space:nowrap}
.burger{display:none}

@media (max-width:1020px){
  /* Below here the row would wrap into two lines and push the mark around,
     so it becomes the panel instead. */
  .burger{display:flex;margin-left:auto;background:transparent;
    border:1px solid rgba(10,10,10,.28);border-radius:5px;padding:9px;
    cursor:pointer;flex-direction:column;gap:4px}
  .burger span{display:block;width:17px;height:2px;background:var(--dark);border-radius:2px}
  .nav .btn--sm{order:2;margin-left:auto}
  .burger{order:3;margin-left:10px}

  .nav .links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;background:var(--lime);
    border-bottom:1px solid rgba(10,10,10,.16);padding:8px var(--gutter) 18px}
  .nav .links.open{display:flex}
  .nav .links a{font-size:16px;letter-spacing:.02em;padding:14px 12px;
    border-bottom:1px solid rgba(10,10,10,.1)}
  /* The current page takes the whole row in ink and inverts, rather than
     wearing an underline. Four pixels of underline on a stacked panel is
     not enough to find yourself by. */
  .nav .links a.on{background:var(--dark);color:var(--lime);
    border-bottom-color:transparent;--mark-fill:var(--lime);--mark-edge:var(--dark)}
  .nav .links a.on + a{border-top:1px solid rgba(10,10,10,.1)}
}
@media (max-width:560px){
  /* The button is the thing to protect, so the mark gives up the room. */
  .nav .logo .mi-mark{height:38px}
}

/* ── the footer ──────────────────────────────────────────────────────────
   Her footer links sit in a <nav>, not in .links, so mi-system's
   .foot .links a{text-decoration:none} never matched them and they fell
   back to the browser's underline. The lockup was the only part Adrian
   wanted to keep. */
.foot nav a{text-decoration:none;border-bottom:1px solid transparent}
.foot nav a:hover{text-decoration:none;border-bottom-color:currentColor}
.foot .logo{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.foot .logo .mi-mark{height:26px}
.foot .logo b{font-family:var(--display);font-weight:900;font-size:16px;
  letter-spacing:-.035em;white-space:nowrap;text-decoration:none}
.foot .logo sup{font-size:8px;font-weight:800}

/* A lime highlight on a lime band is invisible, so mi-system inverts it to
   ink. In a headline that reads as a redaction bar, which is the opposite of
   what a highlighter means. White keeps the gesture and stays legible. */
.s--lime .hl{background:#FFFFFF;color:var(--dark)}

/* ── three steps ─────────────────────────────────────────────────────────
   Adrian: "number this section it should be very simple like oh its 3
   steps". The numbers are real information here, so they get to be a list.
   They sit on the lime ground with an ink disc, which is the same marker
   .nlist already uses, rather than inventing a second one. */
.steps3{list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;max-width:60ch}
/* The copy lives in its own div. Without it the trailing sentence is a third
   grid item, which wraps onto a second row and lands in the 30px number
   column: one word per line all the way down. */
.steps3 li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;
  align-items:start;font-size:16px;line-height:1.5;color:var(--t-60)}
.steps3 li > div{min-width:0}
.steps3 b{color:var(--t-90);font-weight:700}
.steps3 .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--dark);color:var(--lime);font-family:var(--display);font-weight:900;
  font-size:14px;line-height:1;align-self:start;position:relative;top:-2px}
.s--dark .steps3 .n{background:var(--lime);color:var(--dark)}
.s--dark .steps3 li{color:var(--d-60)}
.s--dark .steps3 b{color:var(--d-90)}

/* The hero keeps a flat lime ground. Adrian, 4 October: grain everywhere
   else, not here. The band below it is where the texture starts, which also
   gives the fade between them something to do. */
/* Flat lime, but NOT flat black. Adrian's rule is that a dark band always
   carries the grain, and this rule was written for the lime hero and
   silently took it off the dark one on Your data too. */
.hero:not(.s--dark)::before,section.ph:not(.s--dark)::before{display:none}

/* ── collisions with shop.css ────────────────────────────────────────────
   Support now loads this file for the shared header, and four of these
   class names already meant something else on that page: .pv is a bio
   field value, .ph is a photo header, .opt is a product option, .pill is a
   badge. Scoping each of these to the markup it was written for, rather
   than renaming shop's, because this file is the newcomer on that page.
   .hp further up this file hit the same wall against mi-system. Four
   two-letter class names across three stylesheets is the real problem, and
   it belongs in the design-system work. */

/* ── the header lockup ───────────────────────────────────────────────────
   Option E, Adrian's pick on 4 October: the mark, a hairline, then the name
   in the display face. Mono was the other candidate and it is wrong here,
   because mono is the label face on this site (.lbl, status chips, table
   heads) and the company name is not a label on anything.

   align-items:center, not flex-start. mi-system aligns the lockup to the top
   because for most of this year it was a mark and a floating trademark with
   nothing to centre against. With a name beside it the mark has a thing to
   sit level with, and Adrian asked for exactly that. */
.nav .logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
/* The nudge is derived, not guessed. align-items:center lines up element
   BOXES; what the eye lines up is the wordmark's cap band against the
   mark's painted mass. Measured: cap centre 40.1, mark box centre 41.0, so
   the mark sits 0.9px low and -1px closes it.

   The earlier 2px nudge was wrong in the other direction and made it 2.9px
   low. I added it because Adrian said the mark read high and I treated that
   as a position problem. It is a SIZE problem: the painted mark is 39.3px
   against a 12.3px cap, so it stands 3.2x the height of the letters beside
   it and clears the cap line by 10.6px. Moving it cannot fix that, and
   moving it down made the lockup sit crooked instead. */
.nav .logo .mi-mark{height:39px;position:relative;top:0}
.nav .logo .lkn{font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.025em;white-space:nowrap;line-height:1}
.nav .logo .lkn sup{font-family:var(--display);font-weight:800;font-size:8px;
  margin-top:0;vertical-align:super}

/* More air between the page titles, also his call. 26 was tight once the
   labels carry an inline mark. */
.nav .links{gap:34px}

/* Below 1100 there is not room for a wordmark, five labels and a button on
   one row. The wordmark is the part that goes, because the mark is still
   there and nothing is actually lost: the header just gets quieter. Dropping
   a nav item instead would be a bigger decision than a header tweak. */
/* The row is 359px now instead of 702, so the wordmark only has to stand
   down where the burger takes over. */
@media (max-width:1020px){
  .nav .logo .lkn{display:none}
  .nav .logo{gap:2px}
}

/* ── a pill per label ────────────────────────────────────────────────────
   Adrian, 4 October: every title in a pill outlined in its own text colour,
   and the current page filled white. The outline gives the row a rhythm the
   bare labels did not have, and the fill makes "where am I" a solid shape
   rather than a change of colour. */
/* flex:none is the fix for the overlap, not the padding. Default flex-shrink
   is 1, so when the row ran 31px short the browser squashed every pill. The
   two carrying an inline mark could not shrink their mark, so their text
   broke out through the pill border instead, which is what read as pills
   overlapping. They refuse to shrink now, so a row that does not fit
   overflows visibly rather than looking like a rendering fault.
   Padding comes down to buy back the 31px. This is a stopgap: five labels
   plus a wordmark plus a button is one item too many for the row, and that
   is a structure decision rather than a CSS one. */
.nav .links a{flex:none;border:1px solid currentColor;border-radius:100px;
  padding:7px 11px;line-height:1}
.nav .links a:hover{color:var(--dark);border-color:var(--dark)}
/* border, not border-color. The .on rule further up still carried border:0
   from when the pill had no outline, so setting only the colour left the
   width at zero and the current page was the one pill with no edge. The
   obsolete .on + a{border-top:0} cancel went at the same time: every pill
   now draws all four sides, so mi-system's panel divider is overridden
   wholesale rather than switched off. */
.nav .links a.on{flex:none;background:#FFFFFF;color:var(--dark);border:1px solid var(--dark)}
.nav .links{gap:12px}

/* ── the nav, cut to fit ─────────────────────────────────────────────────
   Adrian asked twice and I answered with a recommendation both times instead
   of doing it. Three cuts:

   Home goes. The mark is the home link on every site there is, so the label
   was spending a slot on a convention people already know.

   Your data & privacy folds in with Why MI matters. They are both the
   argument, and a visitor does not experience them as two questions. Why MI
   matters keeps the label because it is the question they actually have.
   /your-data still exists and still works; it is linked from inside the
   argument rather than from the top of every page. Merging the two pages
   properly is a content job and is not done here.

   Support becomes a bag. The word reads as customer support, which is the
   wrong expectation for a merch store, so the icon is more accurate as well
   as smaller.

   Two labels and an icon. The row had needed 702px in 671; it needs about
   380 now, so the wordmark no longer has to hide at 1100. */
.nav .links .navshop{display:inline-flex;align-items:center;justify-content:center;
  padding:7px 10px}
.nav .links .navshop svg{width:19px;height:19px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.nav .links .navshop.on svg{stroke:var(--dark)}

/* The mark sits 3px lower than its own centre. Every measurement says it is
   already centred: painted centre 40.0 against a row centre of 40.0, and the
   glyph's centre of mass is only 1.05 percent of its height below its bbox
   centre, which is 0.4px at this size. Adrian has said it reads high four
   times. His eye is the instrument that matters for a logo, so this is his
   number and not a derivation. If it changes size, re-ask rather than
   re-deriving. */
/* The header mark is the cropped #mkt now, so its element box IS the painted
   glyph and align-items:center centres the thing you can see rather than a
   box with 197 units of nothing above and below it. 39px keeps it the same
   painted size it was at 46px in the padded box. No nudge: anything added
   here is a correction to a correction. */

/* ── the footer ──────────────────────────────────────────────────────────
   The links were in a <nav> with no display or gap set, so mi-system's
   .foot .links rule never reached them and they ran together as one line of
   words. 28px across, 14 down when they wrap.

   The wordmark is gone from the lockup and the mark repeats across the top
   of the footer instead, Adrian's idea on 4 October: a border pattern rather
   than a second signature. A <pattern> rather than N copies of the mark, so
   it tiles to any width without the markup knowing how wide the page is.
   preserveAspectRatio:none lets the band stretch while the tile inside it
   does not, which is what keeps the marks the same size at every width. */
/* Stacked on purpose rather than wrapped by accident. Seven links come to
   992px and the content track is 1040 after gutters, so the mark and the
   links were never going to share a row at this measure. Making it a column
   means it reads the same at every width instead of snapping at one. */
.foot nav{display:flex;flex-wrap:wrap;gap:14px 28px}
.foot nav a{white-space:nowrap}

/* The same mark, copied across. Not a faded silhouette: white fill, ink
   keyline, paint-order stroke, exactly what .mi-mark does, so the band is
   the real logo repeated rather than a watermark of it.

   No rules. The band had a border under it and mi-system puts one over the
   whole footer, so it was sitting between two hairlines. Both off. */
.markband{width:100%;height:46px;overflow:hidden;line-height:0}
.markband svg{display:block;width:100%;height:46px}
.markband use{fill:#FFFFFF;stroke:var(--dark);stroke-width:170;
  stroke-linejoin:round;paint-order:stroke}
.foot{border-top:0}
.foot .in{padding-top:var(--s-4);padding-bottom:var(--s-4);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.foot .logo .mi-mark{height:30px}
@media (max-width:760px){
  .foot nav{gap:12px 22px}
  .markband,.markband svg{height:34px}
}

/* The hero headline holds two lines at 1280 and breaks to three below it,
   which is where Adrian saw it. 4.7vw was sized for the old hero before the
   stage took the right half of the grid. */
.hero .d1{font-size:clamp(34px,3.7vw,54px)}

/* ── buttons ─────────────────────────────────────────────────────────────
   Adrian, 6 October: no black buttons anywhere. White fill, ink copy, ink
   shadow. The shadow is what makes it read as a key to press, so it stays;
   the fill is what was making it a black slab, so that goes. */
/* Two classes, because mi-system has .s--lime .btn{background:var(--dark)}
   and a bare .btn here loses to it. The hero is a lime band, so the one
   button Adrian was actually looking at was the one still painting black. */
.btn,.s--lime .btn,.s--paper .btn{background:#FFFFFF;color:var(--dark);
  border-color:var(--dark);box-shadow:5px 5px 0 var(--dark)}
.btn:hover{box-shadow:3px 3px 0 var(--dark)}
.btn:active{box-shadow:0 0 0 var(--dark)}
.btn--sm{box-shadow:3px 3px 0 var(--dark)}
.btn--sm:hover{box-shadow:2px 2px 0 var(--dark)}
.btn--sm:active{box-shadow:0 0 0 var(--dark)}
.nav .btn{background:#FFFFFF;color:var(--dark);border-color:var(--dark)}
.s--dark .btn{background:#FFFFFF;color:var(--dark);border-color:#FFFFFF;
  box-shadow:5px 5px 0 var(--lime)}
.s--dark .btn--sm{box-shadow:3px 3px 0 var(--lime)}
.btn--ghost{background:transparent;color:var(--dark);border-color:var(--dark)}
.s--dark .btn--ghost{background:transparent;color:#FFFFFF;border-color:#FFFFFF}

/* ── the hero list ───────────────────────────────────────────────────────
   Three promises the engine can actually keep today, which is the whole
   point of writing them as a list rather than a sentence: a sentence can
   hide a claim nothing supports, a numbered line cannot.

   "See how work gets done" came out. The home screen it would describe has
   five commands and none of them are wired (wiring.json, 9 Sep), so it was
   the one line on the page with nothing behind it. Adrian spotted that it
   felt wrong before anybody checked. */
.lede--intro{max-width:none;white-space:nowrap;color:var(--t-90);margin-bottom:0}
/* var(--s-3) above the list on top of the lede's own bottom margin was two
   gaps stacked, which is the space Adrian called awkward. One gap now. */
.herolist{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;max-width:52ch}
.herolist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;
  align-items:start;font-size:15px;line-height:1.45;color:var(--t-60)}
/* The explanation drops below its own bold lead rather than running on from
   it, so the three leads read as a list on their own. */
.herolist b{display:block;font-size:16.5px;margin-bottom:2px}
.herolist li > div{min-width:0}
.herolist b{color:var(--t-90);font-weight:700}
.herolist .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--dark);color:var(--lime);font-family:var(--display);font-weight:900;
  font-size:12.5px;line-height:1;position:relative;top:-1px}
@media (max-width:760px){.lede--intro{white-space:normal}}

/* ── the three circles ───────────────────────────────────────────────────
   Adrian's: the discs that used to be the whole site hero, back as a peek
   near the top of Your data, then one band each that opens up as you reach
   it. They are three jobs, not three features, which is why they are discs
   and not cards. A card would file them as a feature list.

   Each band carries its own honest state, because the three are not in the
   same place: Comply is 67 of 67 on the desktop app, Audit's verifier passes
   17 of 17 with no screen calling it, and Leverage is the consequence of the
   other two rather than a thing to buy. Saying that on the page is cheaper
   than being asked in a call. */
.pods{display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin:0}
.pods--peek{justify-content:flex-end}
.pod{text-align:center;width:clamp(104px,11vw,128px);text-decoration:none;color:inherit}
.pod .disc{width:clamp(86px,9vw,108px);height:clamp(86px,9vw,108px);border-radius:50%;
  background:#FFFFFF;border:2.5px solid var(--dark);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:4px 5px 0 var(--dark);transition:transform .18s ease,box-shadow .18s ease}
.pod:nth-child(1) .disc{transform:rotate(-4deg)}
.pod:nth-child(2) .disc{transform:rotate(2.5deg)}
.pod:nth-child(3) .disc{transform:rotate(-2deg)}
.pod:hover .disc,.pod:focus-visible .disc{transform:rotate(0deg) translate(-2px,-2px);
  box-shadow:7px 8px 0 var(--dark)}
.pod .disc svg{width:23px;height:23px;stroke:var(--dark);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.pod .nm{font-family:var(--display);font-weight:900;font-size:clamp(14px,1.6vw,17px);
  letter-spacing:-.03em;color:var(--dark);line-height:1}
.pod .doing{display:block;margin-top:11px;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:-.01em;color:var(--t-60)}
.threeup .t-split{align-items:center}

/* The band version. Same disc, bigger, and it grows in as the band arrives
   rather than sitting there finished, which is the expand Adrian described.
   Held at its finished size for anyone on reduced motion. */
.podband{scroll-margin-top:110px}
.podbig{text-align:center}
.podbig .disc{width:clamp(132px,15vw,186px);height:clamp(132px,15vw,186px);border-radius:50%;
  background:#FFFFFF;border:3px solid var(--dark);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  box-shadow:6px 7px 0 var(--dark);
  transform:scale(.82);opacity:0;transition:transform .6s var(--ease),opacity .5s ease}
.podband.lit .podbig .disc{transform:scale(1);opacity:1}
.podbig .disc svg{width:36px;height:36px;stroke:var(--dark);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.podbig .nm{font-family:var(--display);font-weight:900;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:-.035em;color:var(--dark);line-height:1}
.podbig .doing{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-60)}
.podeg{margin-top:var(--s-3);font-family:var(--mono);font-size:12px;line-height:1.7;
  color:var(--t-90);border-top:2px solid var(--dark);padding-top:var(--s-2);max-width:48ch}
.podnote{margin-top:var(--s-3);font-size:13.5px;line-height:1.55;color:var(--t-60);max-width:52ch}
.chip{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:4px;
  margin-right:10px;border:1px solid currentColor;white-space:nowrap}
.chip--proven{color:var(--good,#2F6B1E)}
.chip--building{color:var(--orange-ink)}
.chip--outcome{color:var(--t-38)}
@media(prefers-reduced-motion:reduce){
  .podbig .disc{transform:none;opacity:1;transition:none}
}
@media(max-width:860px){
  .pods--peek{justify-content:flex-start;margin-top:var(--s-4)}
  .podbig{margin-bottom:var(--s-4)}
}

/* ── MI set inside a line of type ────────────────────────────────────────
   Adrian wants the mark wherever MI is named in copy. Sized by the method
   that finally worked in the nav, not by eye:

     painted height = element x (glyph 1158 + stroke 170) / viewBox 1554.3
                    = element x 0.854
     the glyph is centred in its viewBox, so painted centre = box centre
     target 1.1x the cap height of the text it sits in
     Inter cap is about .72em, so element = 1.1 x .72 / .854 = 0.93em
     align so the box centre lands on the cap centre:
     offset = (element - cap) / 2 = (0.93 - 0.72) / 2 = 0.105em

   display:inline-block matters: mi-system sets img,svg{display:block} and a
   block svg inside a sentence takes its own line box. */
/* margin:0, because the mark replaces a word and the spaces either side of
   it are already in the sentence. .1em each side on top of those read as a
   gap wide enough to look like a mistake. */
/* #mkt is the mark cropped to its own ink. The padded #mk box carried 226
   units of dead space each side and 197 top and bottom, which is why the
   mark looked small and sat up in the corner at this size: most of the box
   was nothing. Cropped, the element box IS the painted glyph, so the sums
   get simpler and the alignment gets exact.

     cap height of Inter at this size measures 0.706em
     target 1.1x cap, and painted = element now, so element = 0.78em
     offset so the box centre lands on the cap centre:
     (0.78 - 0.706) / 2 = 0.037em */
.mi-inline{display:inline-block;height:0.78em;width:auto;
  vertical-align:-0.037em;margin:0;position:relative;top:0}
.s--dark .mi-inline{--mark-fill:var(--lime);--mark-edge:var(--dark)}