/* Mensara public site, homepage system. The approved 3d homepage <style> block, ported verbatim
   from review/mensara-design-v3/option-3d-stage-thread.html (final build handoff, 2026-10-02); it is
   the source of truth for the shared tokens, header, footer and thread. Rails-only additions live in
   site/site.css. Loaded only by layouts/site.html.erb on the homepage. */

/* Option 3d: The stage and the thread.
   3c's white page, aubergine stages, stamps and seal, joined by 3a's gold thread.
   The thread is plain CSS boxes and lines, so it is fully drawn without JS. */
:root{
  --white:#FFFFFF;
  --lav:#F4F1FA;
  --lav-line:#E3DDEF;
  --ink:#1B1726;
  --ink-2:#4A4458;
  --ink-3:#5E5870;
  --line:#E6E2EE;
  --line-strong:#CEC7DC;
  --aub:#2A2440;
  --aub-band:#221D36;
  --aub-2:#3A3258;
  --aub-line:#4D4470;
  --on-dark:#F5F2EC;
  --on-dark-2:#CFC7E6;
  --gold-lt:#E2C58A;
  --foil:#C9A86A;
  --foil-2:#D9BC7E;
  --gold:#C88935;         /* presence dot and the thread */
  --gold-hi:#E7AE55;      /* the bead, and a tap while it is in use */
  --gold-ink:#8A5A14;
  --ember:#D98324;
  --ember-hover:#E3913A;
  --ok-ink:#1B6234; --add-bg:#E7F4EA;
  --del-ink:#8E2A1B; --del-bg:#F9E9E5;
  --display:"Familjen Grotesk", "Instrument Sans", system-ui, sans-serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --r-stage:6px;
  --shadow:0 1px 2px rgba(27,23,38,.06), 0 8px 20px -14px rgba(27,23,38,.22);

  /* thread geometry */
  --off:22px;                         /* thread distance from the content edge */
  --R:10px;                           /* thread corner radius, tightened to sit with 6px stages */
  --sp:clamp(14px,2.2vw,26px);        /* stage padding */
  --tin:20px;                         /* hero: thread inset inside the stage */
  --hpl:44px;                         /* hero stage: left padding beside the thread */
  --cl:calc(50% - min(50%, 600px) + var(--gutter));   /* content left, in a full-width box */
  --hcl:calc(50% - min(50%, 600px) + var(--gutter));  /* header content left (the header keeps its gutter) */
  --xr:calc(50% + min(50%, 600px) - var(--gutter) + var(--off));
  --xl:calc(var(--cl) - var(--off));
  --cp:clamp(14px,3vw,40px);          /* convergence stage side padding */
  --wp:clamp(18px,3vw,36px);          /* worked case padding */
  --fp:clamp(20px,3vw,34px);          /* form padding */
  --brandw:97px;                      /* wordmark width, corrected by JS */
}
@media (max-width:900px){
  :root{
    --off:17px;
    --cl:calc(var(--gutter) + 14px);
    --xl:calc(var(--cl) - var(--off));
  }
}
@media (max-width:600px){ :root{ --brandw:86px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{position:relative;margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:600px){body{font-size:17px;font-variation-settings:"wdth" 86}}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.03em;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(31px,3.7vw,48px)}
h3{font-size:21px;letter-spacing:-0.01em;line-height:1.25}
code,.mono{font-family:var(--mono);font-size:max(14px,.84em);letter-spacing:-0.01em;font-variation-settings:normal}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:900px){.wrap{padding-left:var(--cl)}.site-header .wrap{padding-left:var(--gutter)}}
.nw{white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.stage :focus-visible{outline-color:var(--gold-lt)}

.hl{color:var(--gold-ink);background:linear-gradient(var(--foil),var(--foil)) no-repeat 0 92%/100% .09em;padding-bottom:.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:4px;font:650 17px/1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s, border-color .15s, transform .15s}
.btn-primary{background:var(--ember);color:var(--ink)}
.btn-primary:hover{background:var(--ember-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:16px}

/* ---------- header: a full-width aubergine band. The thread leaves its gold dot and drops into the white page ---------- */
.site-header{--bar:76px;--t2:0px;position:sticky;top:0;z-index:50;background:var(--aub);color:var(--on-dark);transition:box-shadow .2s}
.no-js .site-header{position:relative}
.site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--gold-lt)}
.site-header .bar{display:flex;align-items:center;gap:24px;height:var(--bar)}
.site-header.is-condensed{--bar:60px;box-shadow:0 1px 0 var(--aub-line)}
.brand{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font:700 26px/1 var(--display);letter-spacing:-0.035em;color:var(--on-dark)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block;transform:translateY(5px)}
/* the first stretch of the thread: from the logo's dot to the band's lower edge */
.site-header .dot{position:relative}
.site-header .dot::after{content:"";position:absolute;left:3.5px;top:9px;width:2px;height:calc(var(--bar) / 2 - 9.5px + var(--t2) + 3px);background:var(--gold);pointer-events:none}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav > a:not(.btn), .menu > summary{display:inline-flex;align-items:center;min-height:44px;font:500 16px/1 var(--sans);color:var(--on-dark);text-decoration:none;padding:0 10px;cursor:pointer;list-style:none;text-decoration-thickness:2px;text-underline-offset:7px}
.nav > a:not(.btn):hover, .menu > summary:hover, .menu[open] > summary{color:var(--gold-lt);text-decoration-line:underline;text-decoration-color:var(--gold)}
.menu{position:relative}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{content:"";display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:9px}
.menu-panel{position:absolute;top:calc(100% + 12px);left:-8px;width:320px;background:var(--aub-band);color:var(--on-dark);border:1px solid var(--aub-line);border-radius:4px;box-shadow:0 14px 30px -18px rgba(0,0,0,.55);padding:10px}
.menu-panel a{display:block;padding:10px 12px;border-radius:3px;text-decoration:none;color:var(--on-dark)}
.menu-panel a:hover{background:var(--aub-2)}
.menu-panel strong{display:block;font-weight:600;font-size:16px}
.menu-panel .group{font-size:14px;font-weight:600;color:var(--on-dark-2);padding:10px 12px 4px;border-top:1px solid var(--aub-line);margin-top:6px}
.nav .surface{margin-left:14px}
.nav .btn{margin-left:14px}
.mobile-menu{display:none;margin-left:auto}
@media (max-width:900px){
  .site-header{--bar:64px;--t2:0px}
  .site-header .bar{gap:10px}
  .site-header.is-condensed{--bar:56px}
  .nav{display:none}
  .mobile-menu{display:flex;align-items:center;gap:6px}
}
.mobile-menu details > summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:var(--on-dark)}
.mobile-menu details > summary::-webkit-details-marker{display:none}
.mobile-menu details > summary svg{width:22px;height:22px}
.mobile-menu details > summary:hover,.mobile-menu details[open] > summary{color:var(--gold-lt)}
.mobile-menu details[open] .burger-lines{display:none}
.mobile-menu details:not([open]) .burger-x{display:none}
.mobile-menu .sheet{position:absolute;left:0;right:0;top:100%;background:var(--aub);color:var(--on-dark);border-top:1px solid var(--aub-line);border-bottom:1px solid var(--aub-line);padding:4px var(--gutter) 20px}
.mobile-menu .sheet a:not(.btn){display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--aub-line);text-decoration:none;font-weight:500;font-size:17px;color:var(--on-dark)}
.mobile-menu .sheet a.sub{padding-left:16px;color:var(--on-dark-2);font-weight:400;font-size:16px}
.mobile-menu .sheet .btn{width:100%;margin-top:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Human | Machine: on every page, in the header and the footer ---------- */
/* thin control: 30px visible, with an invisible 44px hit area above and below each segment */
.surface{display:inline-flex;align-items:stretch;flex:none;border:1.5px solid #A99FCE;border-radius:4px}
.seg{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 10px;font:600 14px/1 var(--sans);color:var(--on-dark-2);text-decoration:none;white-space:nowrap}
.seg::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
.seg:first-child{border-radius:2.5px 0 0 2.5px}
.seg:last-child{border-radius:0 2.5px 2.5px 0}
.seg + .seg{border-left:1px solid #A99FCE}
.seg:hover{color:var(--on-dark);background:var(--aub-2)}
.seg[aria-pressed="true"]{background:var(--on-dark);color:var(--aub)}
.seg[aria-pressed="true"]:hover{background:var(--on-dark)}
.seg:focus-visible{outline-offset:2px}
@media (max-width:370px){.seg{padding:0 8px}}

/* ================= THE THREAD ================= */
/* lead-in: out of the logo's dot, down, and left into the margin */
.lead{position:absolute;left:0;top:0;width:100%;height:0;z-index:49;pointer-events:none;
  --dx:calc(var(--hcl) + var(--brandw) + 11.5px); --hh:76px; --yh:100px; --xm:var(--xl)}
@media (max-width:900px){.lead{--hh:64px; --yh:84px}}
.ld-b{position:absolute;left:calc(var(--dx) - var(--R));top:var(--hh);width:calc(var(--R) + 1px);height:calc(var(--yh) - var(--hh) + 1px);border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);border-bottom-right-radius:var(--R)}
.ld-a{position:absolute;left:calc(var(--xm) - 1px);top:calc(var(--yh) - 1px);width:calc(var(--dx) - var(--R) - var(--xm) + 1px);height:130px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);border-top-left-radius:var(--R)}

/* one line down the margin of every section */
.thr{position:relative}
.thr::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--xr) - 1px);width:2px;background:var(--gold);pointer-events:none}
@media (max-width:900px){.thr::before{left:calc(var(--xl) - 1px)}}

/* a snippet hangs off the thread: a short line with a knot where it meets the thread */
.hook{position:absolute;height:2px;background:var(--gold);pointer-events:none;z-index:0}
.hook::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold);right:-4px}
.hook.l::after{right:auto;left:-4px}
.hook.ring::before{content:"";position:absolute;top:-4px;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--gold)}
.hook.l.ring::before{left:auto;right:-5px}
.hook-m{display:none}
@media (max-width:900px){.hook-d{display:none}.hook-m{display:block}}

/* ---------- stages ---------- */
.stage{position:relative;background:var(--aub);color:var(--on-dark);border-radius:var(--r-stage);padding:var(--sp)}
.stage::before{content:"";position:absolute;top:0;left:clamp(22px,3vw,36px);width:64px;height:4px;border-radius:0 0 4px 4px;background:var(--foil)}
.stage-label{display:inline-flex;align-items:center;gap:9px;font:650 15px/1.2 var(--sans);color:var(--gold-lt)}
.stage-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(44px,4.4vw,60px) 0 clamp(56px,7vw,96px)}
/* clip the hero's thread pieces to the hero, starting at the lead-in's turn so no stub shows above it */
@media (min-width:901px){.hero{clip-path:inset(calc(100px - 76px) 0 0 0)}}
@media (max-width:900px){.hero{padding-top:44px}.hero-line{top:20px}}
.hero-line{display:none}
@media (max-width:900px){.hero-line{display:block;position:absolute;top:20px;bottom:0;left:calc(var(--xl) - 1px);width:2px;background:var(--gold);pointer-events:none}}
.kicker{font-size:16px;font-weight:600;color:var(--gold-ink);margin:0 0 18px;display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;background:var(--foil)}
@media (max-width:900px){.kicker::before{display:none}}
.hero h1{font-size:clamp(42px,6vw,78px);letter-spacing:-0.045em;line-height:.98;max-width:13.5em}
.hero-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(22px,2.6vw,34px)}
.lead-p{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:33em;line-height:1.55;margin:0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.note{font-size:16px;color:var(--ink-3);max-width:30em;margin:0}
@media (max-width:900px){.hero-row{grid-template-columns:1fr}}
.hero .stage{margin-top:clamp(40px,4.6vw,60px)}

/* the hero stage: the thread enters through the top, runs down beside the windows,
   turns under them as the shared memory, and leaves through the right wall */
.demo{padding-left:var(--hpl)}
.demo::before{left:calc(var(--tin) - 15px);width:30px}
.t-in{position:absolute;left:0;bottom:100%;width:0;height:0;pointer-events:none}
.t-in .v{position:absolute;left:calc(-1 * var(--off) - 1px);bottom:32px;width:2px;height:1400px;background:var(--gold)}
.t-in .c{position:absolute;left:calc(-1 * var(--off) - 1px);bottom:0;width:calc(var(--off) + var(--tin) + 2px);height:32px;max-width:none;overflow:visible}
.t-in .c path{fill:none;stroke:var(--gold);stroke-width:2}
.upper{position:relative}
.trunk{position:absolute;pointer-events:none;left:calc(var(--tin) - var(--hpl) - 1px);top:calc(-1 * var(--sp));bottom:-1px;right:calc(-1 * (var(--sp) + var(--off) - var(--R)));border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);border-bottom-left-radius:var(--R)}
.exit{position:absolute;pointer-events:none;top:calc(100% - 1px);left:calc(100% + var(--sp) + var(--off) - var(--R));width:calc(var(--R) + 1px);height:1400px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);border-top-right-radius:var(--R)}
@media (max-width:900px){
  .demo{padding-left:var(--sp)}
  .demo::before{left:clamp(22px,3vw,36px);width:64px}
  .t-in,.trunk,.exit{display:none}
}

.stage-head{display:flex;align-items:center;gap:14px 20px;padding:6px 4px 16px;flex-wrap:wrap}
.steps{display:flex;gap:10px;flex:1 1 420px;list-style:none;margin:0;padding:0}
.steps li{flex:1;font-size:14px;line-height:1.3;color:var(--on-dark-2)}
.steps li::before{content:"";display:block;height:3px;border-radius:2px;background:var(--aub-line);margin-bottom:7px;background-image:linear-gradient(var(--foil),var(--foil));background-repeat:no-repeat;background-size:var(--p,100%) 100%;transition:background-size .5s ease}
.steps li.current{color:var(--on-dark);font-weight:600}
.controls{display:flex;gap:8px;margin-left:auto}
.ctl{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:4px;border:1.5px solid var(--aub-line);background:transparent;font:600 14px/1 var(--sans);color:var(--on-dark);cursor:pointer}
.ctl:hover{border-color:var(--gold-lt)}
.ctl svg{width:12px;height:12px}
.no-js .controls{display:none}

.relay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lane{position:relative;display:flex;flex-direction:column;min-width:0}
.lane .win{flex:1}
/* each window's rail drops onto the thread */
.rail{position:relative;display:block;width:2px;height:24px;margin:0 auto;background:var(--gold);transition:background-color .25s, width .25s}
.rail::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);transition:background-color .25s, transform .25s}
.lane.lit .rail{background:var(--gold-hi);width:4px}
.lane.lit .rail::after{background:var(--gold-hi);transform:scale(1.35)}
.tap{display:none}
@media (max-width:900px){
  .relay{grid-template-columns:1fr;gap:14px}
  .rail{display:none}
  .tap{display:block;position:absolute;top:21px;right:100%;width:calc(var(--sp) + var(--off));height:2px;background:var(--gold);transition:background-color .25s, height .25s, margin .25s}
  .tap::after{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
  .lane.lit .tap{background:var(--gold-hi);height:4px;margin-top:-1px}
}

.win{background:var(--white);color:var(--ink);border-radius:4px;overflow:hidden;box-shadow:0 0 0 0 transparent;transition:box-shadow .3s}
.win.active{box-shadow:0 0 0 2px var(--foil)}
.win-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FBFAFE}
.who{font-size:14px;font-weight:650;line-height:1.2}
.who span{font-weight:400;color:var(--ink-3)}
.tool-name{margin-left:auto;font:650 14px/1 var(--display);letter-spacing:-0.01em;color:var(--ink)}
.win-body{padding:14px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.msg-user{align-self:flex-end;max-width:90%;background:var(--aub);color:var(--on-dark);padding:9px 13px;border-radius:10px 10px 3px 10px}
.tool{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.tool code{color:var(--ink);font-size:14px;background:var(--lav);padding:2px 6px;border-radius:3px}
.tool .ic{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--add-bg)}
.tool .ic::after{content:"";width:6px;height:3.5px;border-left:1.6px solid var(--ok-ink);border-bottom:1.6px solid var(--ok-ink);transform:translateY(-1px) rotate(-45deg)}
.tool.pending .ic{background:transparent;border:2px solid var(--line-strong);border-top-color:var(--aub);animation:spin .8s linear infinite}
.tool.pending .ic::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.source{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 6px;align-self:flex-start;font-size:14px;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:4px 8px}
.source code{color:var(--ink);font-size:14px}

/* ---------- stamps ---------- */
.stamp{--r:-3deg;display:inline-flex;align-items:center;gap:7px;font:700 14px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;padding:8px 11px 7px;border-radius:7px;white-space:nowrap;transform:rotate(var(--r));transform-origin:50% 60%}
.stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.stamp.held{--r:-4deg;background:var(--aub);color:var(--gold-lt);box-shadow:inset 0 0 0 3px var(--aub), inset 0 0 0 4px var(--gold-lt)}
.stamp.approved{--r:3deg;background:var(--foil-2);color:var(--aub);box-shadow:inset 0 0 0 3px var(--foil-2), inset 0 0 0 4px var(--aub)}
.stamp.refused{--r:-2deg;background:var(--white);color:var(--del-ink);box-shadow:inset 0 0 0 1.5px var(--del-ink), inset 0 0 0 3.5px var(--white), inset 0 0 0 4.5px var(--del-ink)}
.stamp.proposed{--r:-1.5deg;background:var(--white);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.stamp.pressed{animation:press .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes press{
  0%{opacity:0;transform:translateY(-16px) scale(1.7) rotate(calc(var(--r) - 9deg))}
  55%{opacity:1;transform:translateY(0) scale(.93) rotate(var(--r))}
  78%{transform:scale(1.03) rotate(var(--r))}
  100%{opacity:1;transform:scale(1) rotate(var(--r))}
}

/* ---------- the shared-memory record: it hangs from the thread ---------- */
.record{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px 16px;align-items:center;margin-top:18px;background:var(--aub-band);border:1px solid var(--aub-line);border-radius:4px;padding:12px 18px 12px 12px}
.record::before{content:"";position:absolute;left:41px;top:-19px;width:2px;height:32px;background:var(--gold)}
.record::after{content:"";position:absolute;left:38px;top:-23px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
@media (max-width:900px){
  .record{margin-top:14px}
  .record::before{left:calc(-1 * (var(--sp) + var(--off)));top:41px;width:calc(var(--sp) + var(--off) + 12px);height:2px}
  .record::after{left:calc(-1 * (var(--sp) + var(--off)) - 4px);top:38px}
}
.seal{position:relative;width:60px;height:60px;flex:none;grid-row:1 / span 2;align-self:start;z-index:1}
.seal svg.art{position:absolute;inset:0;width:100%;height:100%}
.seal-num{position:absolute;left:0;right:0;top:50%;height:22px;margin-top:-11px;overflow:hidden}
.seal-num .roll{display:flex;flex-direction:column;transform:translateY(-22px);transition:transform .55s cubic-bezier(.3,1.45,.5,1)}
.seal-num b{display:grid;place-items:center;height:22px}
.seal-num .sdot{width:8px;height:8px;border-radius:50%;background:var(--aub)}
.seal-num svg{width:20px;height:20px}
.seal[data-v="0"] .roll{transform:translateY(0)}
.seal.tick{animation:sealpress .6s cubic-bezier(.2,.8,.3,1)}
@keyframes sealpress{0%{transform:none}30%{transform:rotate(-14deg) scale(1.14)}62%{transform:rotate(5deg) scale(.95)}100%{transform:none}}
.rec-top{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;min-width:0}
.rec-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.rec-lbl{font:650 14px/1.2 var(--sans);color:var(--gold-lt)}
.rec-path{font-size:15px;color:var(--on-dark)}
.rec-act{color:var(--on-dark-2);font-size:15px;margin-left:auto}
@media (max-width:1100px){.rec-act{margin-left:0;width:100%}}
/* swaps keep their widest state's space, so nothing jumps while the demo runs */
.swap{display:inline-grid}
.swap > *{grid-area:1/1;visibility:hidden}
.swap > .on{visibility:visible}
.pill{font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:7px 11px 6px;white-space:nowrap;justify-self:start}
.pill.cur{color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--aub-line)}
.pill.prop{color:var(--on-dark-2);box-shadow:inset 0 0 0 1.5px var(--on-dark-2)}
.pill.held{color:var(--gold-lt);box-shadow:inset 0 0 0 1.5px var(--gold-lt)}
.pill.ok{color:var(--aub);background:var(--foil-2)}
.rec-change{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;border-top:1px solid var(--aub-line);padding-top:12px}
.chip{font-family:var(--mono);font-size:14px;line-height:1.3;padding:5px 9px;border-radius:3px}
.chip.del{background:var(--del-bg);color:var(--del-ink)}
.chip.add{background:var(--add-bg);color:var(--ok-ink)}
.rec-change .stamps{display:flex;flex-wrap:wrap;gap:10px 12px;margin-left:auto}
@media (max-width:1100px){.rec-change .stamps{margin-left:0}}
@media (max-width:560px){.seal{grid-row:1}.rec-change{grid-column:1 / -1}.record{gap:10px 12px;padding-right:12px}.pill{letter-spacing:.03em;padding:6px 9px 5px}}
.rec-change.thud{animation:thud .32s ease}
@keyframes thud{0%{transform:none}35%{transform:translateY(2px) scale(.997)}100%{transform:none}}

.bead{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold-hi);border:2px solid var(--aub);z-index:6;pointer-events:none;opacity:0}

/* typed and streamed text: a hidden copy reserves the final size so nothing jumps */
.tw{display:grid}
.tw > span{grid-area:1/1}
.tw .ghost{visibility:hidden}
.demo.resetting *{transition:none !important}
.demo.playing [data-show]:not(.on){opacity:0;transform:translateY(6px);pointer-events:none}
.demo.playing [data-show]{transition:opacity .4s ease, transform .4s ease}
.demo.playing [data-stamp]:not(.on){visibility:hidden}

/* ---------- sections ---------- */
section{scroll-margin-top:72px}
.section{padding:clamp(64px,8vw,112px) 0}
.section.tight{padding:clamp(52px,6vw,84px) 0}
.band{background:var(--lav)}
.eyebrow{font:600 16px/1.3 var(--sans);color:var(--gold-ink);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--foil)}
.prose{max-width:34em}
.prose p{color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* problem */
.problem-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.problem h2{font-size:clamp(29px,3.2vw,42px);line-height:1.08}
.cs{border-top:2px solid var(--ink)}
.cs > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--line-strong);align-items:baseline}
.cs strong{font:700 24px/1.2 var(--display);letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
.cs strong::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translateY(-1px);flex:none}
.cs p{margin:0;color:var(--ink-2)}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr}}
@media (max-width:1100px){.cs > div{grid-template-columns:1fr}}
@media (max-width:900px){.how-steps,.benefits,.cs,.start-steps,.facts{max-width:36em}}

/* what it is */
.what-split{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
@media (max-width:900px){.what-split{grid-template-columns:1fr}}
.facts{margin:28px 0 0;padding:0}
.facts > div{padding:16px 0;border-top:1px solid var(--line-strong)}
.facts dt{font-weight:650;margin-bottom:4px}
.facts dd{margin:0;color:var(--ink-2)}
.rec-stage{padding-top:clamp(22px,2.6vw,30px)}
.rec-stage .stage-label{position:relative;margin:0 0 14px 4px}
.rec-stage .stage-label .hook-m{top:50%;margin-top:-1px;right:100%;width:calc(var(--sp) + 4px + var(--off))}
.browser{display:grid;grid-template-columns:172px minmax(0,1fr);gap:14px;align-items:start}
.tree ul{list-style:none;margin:0;padding:0}
.tree li{padding:6px 10px;border-radius:3px;display:flex;align-items:center;gap:8px;color:var(--on-dark-2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree li.dir{color:var(--on-dark);font-weight:600;margin-top:6px}
.tree li.dir:first-child{margin-top:0}
.tree li.file{padding-left:28px;font-family:var(--mono)}
.tree li.sel{background:var(--aub-2);color:var(--on-dark);box-shadow:inset 3px 0 0 var(--foil)}
.tree .fold{width:12px;height:10px;border-radius:2px;background:var(--aub-line);flex:none}
.doc{position:relative;background:var(--white);color:var(--ink);border-radius:4px;padding:20px 20px 18px;font-size:15px;line-height:1.5;display:flex;flex-direction:column;gap:12px}
.doc .path{font-family:var(--mono);font-size:14px;color:var(--ink-3);padding-right:70px}
.doc h4{margin:0;font:700 24px/1.15 var(--display);letter-spacing:-0.02em;padding-right:70px}
.doc p{margin:0;color:var(--ink-2)}
.doc .seal{position:absolute;top:-14px;right:16px;width:66px;height:66px}
.doc .hook-d{top:18px;left:calc(100% - 49px);right:calc(-1 * (var(--sp) + var(--off)))}
.meta{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;border-top:1px solid var(--line);padding-top:12px;margin:4px 0 0;align-items:center}
.meta dt{color:var(--ink-3)}
.meta dd{margin:0;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
@media (max-width:560px){
  .browser{grid-template-columns:1fr}
  .tree ul{display:flex;flex-wrap:wrap;gap:4px}
  .tree li.dir{display:none}
  .tree li.file{padding-left:10px}
}

/* how you use it */
.how-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.how-steps li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:4px 14px;padding:18px 0;border-top:1px solid var(--line-strong)}
.how-steps li:first-child{border-top:2px solid var(--ink)}
.how-steps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:4px;background:var(--aub);color:var(--gold-lt);display:grid;place-items:center;font:700 17px/1 var(--display)}
.how-steps strong{font-weight:650}
.how-steps p{margin:0;color:var(--ink-2)}

/* the convergence: three tools, one gold memory node, and the node is a knot on the page's thread */
.converge{margin-top:clamp(40px,5vw,64px);padding:clamp(26px,3.4vw,44px) var(--cp) clamp(24px,3vw,36px)}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.mark{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px}
.wm{font:700 clamp(23px,4.2vw,50px)/1 var(--display);letter-spacing:-0.04em;color:var(--on-dark)}
.mark .pp{font-size:15px;line-height:1.35;color:var(--on-dark-2)}
.mark .pp b{color:var(--on-dark);font-weight:600}
.mark .port{width:10px;height:10px;border-radius:50%;border:2px solid var(--gold);background:var(--gold);margin-top:8px}
.lines{width:100%;height:clamp(84px,11vw,140px);overflow:visible}
.lines path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.core{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--aub), 0 0 0 7px var(--foil)}
.node .hook-d{top:14px;left:50%;right:calc(-1 * (var(--cp) + var(--off)))}
.node .hook-m{top:14px;right:50%;left:calc(-1 * (var(--cp) + var(--off)))}
.node b{display:block;font:700 clamp(21px,2.2vw,28px)/1.1 var(--display);letter-spacing:-0.025em;color:var(--on-dark);margin-top:6px}
.node .node-sub{font-size:15px;color:var(--on-dark-2)}
.node code{color:var(--gold-lt);font-size:14px}
.converge.armed .mark{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.converge.armed .mark:nth-child(2){transition-delay:.12s}
.converge.armed .mark:nth-child(3){transition-delay:.24s}
.converge.armed .node .hook-d{clip-path:inset(0 0 0 100%);transition:clip-path .6s cubic-bezier(.5,0,.3,1) .35s}
.converge.armed .node .hook-m{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.5,0,.3,1) .35s}
.converge.armed .core{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .95s}
.converge.armed .lines{clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.5,0,.3,1) 1.2s}
.converge.armed .port{background:var(--aub);transition:background-color .3s ease 2.05s}
.converge.armed .node b,.converge.armed .node-sub{opacity:0;transition:opacity .5s ease 1.5s}
.converge.armed.in .mark{opacity:1;transform:none}
.converge.armed.in .node .hook-d,.converge.armed.in .node .hook-m{clip-path:inset(0)}
.converge.armed.in .core{transform:none}
.converge.armed.in .lines{clip-path:inset(0)}
.converge.armed.in .port{background:var(--gold)}
.converge.armed.in .node b,.converge.armed.in .node-sub{opacity:1}
@media (max-width:560px){
  .mark .pp .role{display:block}
  .mark .pp .sep{display:none}
}

/* worked case */
.worked{position:relative;margin-top:clamp(40px,5vw,64px);background:var(--white);border:1px solid var(--lav-line);border-radius:4px;padding:var(--wp)}
.worked h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-0.025em;margin-bottom:22px}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.versus{grid-template-columns:1fr}}
.vcol h4{margin:0 0 10px;font:600 15px/1.3 var(--sans);color:var(--ink-3)}
.vcol h4 b{color:var(--ink)}
.vcol .win{border:1px solid var(--line);overflow:visible}
.vcol.with .win{position:relative;border-color:var(--foil)}
.vcol.with .hook-d{top:30px;left:100%;width:calc(var(--wp) + 1px + var(--off))}
.vcol.with .hook-m{top:30px;right:100%;width:calc(var(--wp) + 1px + var(--off))}
.vcol.without .msg-agent{color:var(--ink-2)}
.flow{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line);max-width:860px}
.flow li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 20px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--ink-2)}
.flow li:last-child{border-bottom:0;padding-bottom:0}
.flow li p{margin:0;max-width:33em}
.flow li .stamp{justify-self:start;margin-top:2px}
.flow li b{color:var(--ink);font-weight:650}
@media (max-width:600px){.flow li{grid-template-columns:1fr}}

/* what changes */
.benefits{margin-top:26px;max-width:34em}
.benefits > div{padding:20px 0;border-top:1px solid var(--line-strong)}
.benefits > div:first-child{border-top:2px solid var(--ink)}
.benefits strong{display:block;font:700 22px/1.25 var(--display);letter-spacing:-0.02em;margin-bottom:6px}
.benefits p{margin:0;color:var(--ink-2)}
.log{background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);margin-top:clamp(0px,6vw,88px)}
@media (max-width:900px){.log{margin-top:0}}
.log-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--lav);border-bottom:1px solid var(--lav-line);font:650 15px/1.2 var(--sans);border-radius:4px 4px 0 0}
.log-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.row{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;align-items:center}
.row:last-child{border-bottom:0}
.row code{font-size:14px;color:var(--ink)}
.row .by{grid-column:1;color:var(--ink-3);font-size:15px}
.row .stamp{grid-row:span 2;align-self:center}
.row .hook-d{top:50%;margin-top:-1px;left:100%;width:calc(1px + var(--off))}
.row .hook-m{top:50%;margin-top:-1px;right:100%;width:calc(1px + var(--off))}
.motion .log.reveal .row .stamp{opacity:0}
.motion .log.reveal.in .row .stamp{animation:press .5s cubic-bezier(.2,.8,.3,1) both}
.motion .log.reveal.in .row:nth-child(3) .stamp{animation-delay:.25s}
.motion .log.reveal.in .row:nth-child(4) .stamp{animation-delay:.5s}
.motion .log.reveal.in .row:nth-child(5) .stamp{animation-delay:.75s}

/* who it's for: these questions land on a person, so they are deliberately off the thread */
.who-h{font-size:clamp(27px,3vw,38px);line-height:1.12;max-width:22em}
.pings{display:flex;flex-direction:column;gap:12px}
.ping{display:grid;grid-template-columns:38px 1fr;gap:12px;background:var(--white);border:1px solid var(--lav-line);border-radius:4px;padding:14px 16px;font-size:16px;line-height:1.45}
.ping:nth-child(2){margin-left:clamp(0px,4vw,48px)}
.ping:nth-child(3){margin-left:clamp(0px,2vw,24px)}
.ping .av{width:38px;height:38px;border-radius:4px;background:var(--aub);color:var(--gold-lt);display:grid;place-items:center;font:700 15px/1 var(--display)}
.ping b{font-weight:650}
.ping .t{color:var(--ink-3);font-weight:400;margin-left:6px;font-size:14px}
.notfor{margin-top:20px;padding-left:16px;border-left:3px solid var(--foil)}

/* proof */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.quotes:has(> :only-child){max-width:900px}
.quote-card{margin:0;display:flex;flex-direction:column;gap:26px;padding-top:26px;border-top:2px solid var(--ink);position:relative}
.quote-card::before{content:"\201C";position:absolute;top:-6px;right:0;font:700 120px/1 var(--display);color:var(--foil)}
.quote-card blockquote{margin:0;font:600 clamp(23px,2.5vw,32px)/1.3 var(--display);letter-spacing:-0.02em;color:var(--ink);padding-right:clamp(0px,6vw,80px)}
.quote-card figcaption{display:grid;grid-template-columns:52px minmax(0,33em);gap:16px;align-items:start;font-size:17px;color:var(--ink-2);line-height:1.5}
.quote-card figcaption .av{width:52px;height:52px;border-radius:4px;background:var(--aub);color:var(--gold-lt);display:grid;place-items:center;font:700 17px/1 var(--display)}
.quote-card figcaption b{color:var(--ink);font-weight:650}

/* get started: the form hangs off the thread, and the thread carries on into the footer */
.start-steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:s}
.start-steps li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:2px 14px;padding:18px 0;border-top:1px solid var(--line-strong)}
.start-steps li:first-child{border-top:2px solid var(--ink)}
.start-steps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:4px;background:var(--aub);color:var(--gold-lt);display:grid;place-items:center;font:700 17px/1 var(--display)}
.start-steps p{margin:0;color:var(--ink-2)}
.form{position:relative;background:var(--white);border:1px solid var(--lav-line);border-radius:4px;padding:var(--fp);display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.form h3{font-size:28px;letter-spacing:-0.025em}
.form .hook-d{top:calc(var(--fp) + 14px);left:100%;width:calc(1px + var(--off))}
.form .hook-m{top:calc(var(--fp) + 14px);right:100%;width:calc(1px + var(--off))}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:16px;font-weight:600}
.field input,.field select{font:400 17px/1.3 var(--sans);color:var(--ink);background:var(--white);border:1.5px solid #8C84A0;border-radius:4px;padding:12px 14px;min-height:50px;width:100%}
.field input:focus,.field select:focus{outline:3px solid var(--foil);outline-offset:0;border-color:var(--ink)}
.form .btn{width:100%}
.form-status{font-size:15px;color:var(--ok-ink);margin:0;min-height:1.4em}
.privacy{font-size:15px;line-height:1.5;color:var(--ink-3);margin:-6px 0 0}
.privacy a{color:var(--ink);text-underline-offset:2px}

/* footer: a full-bleed aubergine band that matches the header. The thread ends in its gold dot. */
.site-footer{position:relative;background:var(--aub);color:var(--on-dark);padding:72px 0 36px;
  --fch:30px; --fdx:calc(var(--cl) + var(--brandw) + 11.5px); --fdy:90px}
.site-footer .dot{position:relative;z-index:1}
.ft-a,.ft-b{position:absolute;pointer-events:none;border:0 solid var(--gold)}
.ft-a{top:0;left:calc(var(--fdx) + var(--R));width:calc(var(--xr) - var(--fdx) - var(--R) + 1px);height:calc(var(--fch) + 1px);border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:var(--R)}
.ft-b{left:calc(var(--fdx) - 1px);top:calc(var(--fch) - 1px);width:calc(var(--R) + 1px);height:calc(var(--fdy) - var(--fch) + 1px);border-left-width:2px;border-top-width:2px;border-top-left-radius:var(--R)}
@media (max-width:900px){
  .site-footer{padding-top:64px;--fdy:82px}
  .ft-a{left:calc(var(--xl) - 1px);width:calc(var(--fdx) - var(--R) - var(--xl) + 1px);border-right-width:0;border-left-width:2px;border-bottom-right-radius:0;border-bottom-left-radius:var(--R)}
  .ft-b{left:calc(var(--fdx) - var(--R));border-left-width:0;border-right-width:2px;border-top-left-radius:0;border-top-right-radius:var(--R)}
}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:start}
.f-line{margin:16px 0 0;color:var(--on-dark-2);font-size:17px;line-height:1.5;max-width:30em}
.f-links{display:flex;gap:16px 64px}
.f-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.f-links a{color:var(--on-dark);text-decoration:none;font-size:16px;line-height:1.4}
.f-links a:hover{text-decoration:underline;text-decoration-color:var(--foil);text-underline-offset:3px}
.f-base{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;border-top:1px solid var(--aub-2);padding-top:24px;margin-top:24px}
.f-copy{margin:0;color:var(--on-dark-2);font-size:15px}
@media (max-width:760px){.f-grid{grid-template-columns:1fr}.f-links{flex-wrap:wrap;gap:16px 44px}.f-base{margin-top:8px}}

/* ---------- the machine surface: the same page as clean Markdown ---------- */
#machine{display:none}
.machine #human{display:none}
.machine #machine{display:block}
.machine .lead,.machine .site-header .dot::after,.machine .ft-a,.machine .ft-b{display:none}
.mv{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px)}
.mv-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;max-width:832px}
.mv-note{margin:0;font-size:17px;color:var(--ink-2)}
.mv-actions{display:flex;align-items:center;gap:14px}
.copy-status{font-size:15px;color:var(--ok-ink);min-width:4em}
.mv-doc{margin:22px 0 0;max-width:calc(80ch + 66px);font:400 16px/1.65 var(--mono);color:var(--ink);background:#FBFAFE;border:1px solid var(--lav-line);border-radius:4px;padding:32px;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:600px){.mv-doc{font-size:15px;padding:20px 16px}}

@media (max-width:560px){
  .win-body{padding:12px}
  .row{grid-template-columns:1fr}
  .row .stamp{grid-row:auto;justify-self:start;order:-1}
  .brand{font-size:23px}
  .how-steps li,.start-steps li{grid-template-columns:34px 1fr;gap:4px 10px}
  .how-steps li::before,.start-steps li::before{width:30px;height:30px;font-size:15px}
  .quote-card figcaption{grid-template-columns:1fr}
  .quote-card::before{font-size:88px;top:-2px}
  .quote-card blockquote{padding-right:54px}
  .site-footer nav{margin-left:0}
}
/* scroll reveal: content is visible by default; JS opts in only with motion allowed */
.motion .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.motion .reveal.in{opacity:1;transform:none}
.motion .reveal .hook-d{clip-path:inset(0 0 0 100%);transition:clip-path .55s cubic-bezier(.5,0,.3,1) .35s}
.motion .reveal .hook-m{clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.5,0,.3,1) .35s}
.motion .reveal.in .hook-d,.motion .reveal.in .hook-m{clip-path:inset(0)}
/* while the arrival plays, the hero thread waits to be drawn */
.intro .site-header .dot::after,.intro .lead > span,.intro .t-in .v,.intro .t-in .c,.intro .trunk,.intro .exit,.intro .rail,.intro .hero-line,.intro .tap{visibility:hidden}
.intro .record::before,.intro .record::after,.intro .rail::after,.intro .tap::after{visibility:hidden}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}