/* idem UNIVERSAL · site/css/site.css · V5 — "the machine wakes up" (20 Sep 2026, branch phase-4-design)
   One grid. One card. Five keys. Red acts, green runs. The page starts red (standby) and ends green (running); the visitor
   switches it by holding the final key. Direction: design/idem-home-v5-preview.html · buttons: design/idem-buttons.html ·
   the method page: design/idem-method.html · the contract: design/V5-PORT-SPEC.md.
   css/legacy.css loads BEFORE this file and carries the components the other pages still use (the chat door, the tiles,
   the pricing tiers, the legal typography, the phone menu). Everything visual is decided here.
   Gradients are used on purpose (light is drawn with them); check.mjs's old ban was lifted for v5. Pure black is never written; masks use the keyword black. */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/newsreader-400.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/newsreader-400i.woff2') format('woff2')}

@property --a  { syntax:'<angle>';  inherits:false; initial-value:0deg }
@property --k  { syntax:'<number>'; inherits:true;  initial-value:0 }
@property --fx { syntax:'<length>'; inherits:true;  initial-value:-999px }
@property --fy { syntax:'<length>'; inherits:true;  initial-value:-999px }
@property --sw { syntax:'<percentage>'; inherits:false; initial-value:-30% }

:root{
  --bg:#0a0c10; --fg:#f5f6f3; --mut:#9096a0; --dim:#7d838d; --txt:var(--fg); --txt-2:#c9ccd2;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.15);
  --sur:rgba(255,255,255,.028); --sur2:rgba(255,255,255,.05);
  --red:#e10600; --redg:rgba(225,6,0,.5); --green:#22c55e; --greeng:rgba(34,197,94,.5); --sol:#3fa665; --metal:#e0e0e0;
  --seat1:#ff5a4e; --seat2:#f2b632; --seat3:#2fd3b5; --seat4:#7f9cff; --seat5:#c58cff;
  --k:0; --state:var(--red);
  --wrap:1200px; --r:22px; --rs:14px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html.done{ --k:1 }
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;scroll-behavior:auto}
/* 21 Oct 2026 (Leonard, on his phone: "when I pressed the Next button for the survey, at any press a blue showed in the
   button"): that blue is the phone browser's own tap highlight. The hold keys and the ball already turned it off; every
   other button and link showed it. Off for the whole page (it is inherited); each button keeps its own press look. */
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:transparent;color:var(--fg);font:400 16px/1.55 Outfit,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,video{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main{position:relative}

/* ---------- the sky and the field: what moves in the background (one layer under the page) ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky .r,.sky .g{position:absolute;left:50%;top:-420px;width:1600px;height:900px;transform:translateX(-50%);border-radius:50%;filter:blur(90px);transition:opacity .2s linear}
.sky .r{background:radial-gradient(closest-side,rgba(225,6,0,.30),rgba(225,6,0,.07) 55%,transparent 72%);opacity:calc(1 - var(--k))}
.sky .g{background:radial-gradient(closest-side,rgba(34,197,94,.24),rgba(34,197,94,.06) 55%,transparent 72%);opacity:var(--k)}
.sky .b{position:absolute;top:22vh;width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.03),transparent 70%)}
.sky .b.l{left:-18vw;animation:bladeL 4s ease both} .sky .b.rt{right:-18vw;animation:bladeR 4s ease both}
.sky .b::after{content:"";position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,transparent 60%);border-radius:8px;filter:blur(2px)}
#field{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.sky .grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes bladeL{0%{opacity:0;rotate:55deg}70%,to{opacity:1;rotate:0deg}}
@keyframes bladeR{0%{opacity:0;rotate:305deg}70%,to{opacity:1;rotate:1turn}}

/* ---------- the meter: a 2 px line of state at the very top ---------- */
.meter{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;pointer-events:none;background:rgba(255,255,255,.04)}
.meter i{position:absolute;left:0;top:0;height:100%;width:calc(var(--k)*100%);background:var(--red);box-shadow:0 0 12px 1px rgba(225,6,0,.5)}
.meter b{position:absolute;left:0;top:0;height:100%;width:calc(var(--k)*100%);background:var(--green);opacity:var(--k);box-shadow:0 0 12px 1px rgba(34,197,94,.55)}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,12,16,.6);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:background .45s,border-color .45s}
.hdr .wrap{height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.mark .iu{width:28px;height:28px;color:var(--fg);flex:none}
.mark .wordmark{display:inline-flex;align-items:baseline;gap:7px}
.wm-a{font-weight:600} .wm-b{font-weight:400;letter-spacing:.3em;font-size:12px;color:var(--mut)} .wm-c{display:none}
.nav{display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--sur);justify-self:center;transition:background .45s,border-color .45s}
.nav a{padding:8px 14px;border-radius:999px;font-size:14px;color:#d5d8dd;transition:background .25s,color .25s}
.nav a:hover,.nav a.on{background:var(--sur2);color:var(--fg)}
.hdr .right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.menu-btn{display:none}
html.scrolled .hdr{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
html.scrolled .nav,html.scrolled .lkeys{background:rgba(10,12,16,.72);backdrop-filter:blur(14px);border-color:var(--line2)}

/* ---------- the keys ---------- */
/* 0 · the plain pill, the red pill (the door's Send, "Try it here") */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.02);color:var(--fg);font-size:16px;font-weight:500;white-space:nowrap;transition:background .3s,border-color .3s,transform .2s}
.btn:hover{background:var(--sur2);border-color:rgba(255,255,255,.24)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,255,255,.02)}
.btn.hot{background:var(--red);border-color:var(--red);color:#fff}
.btn.hot:hover{background:#ff1a12;border-color:#ff1a12}
.btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px}
/* 1 · the key CTA "Book a call": matte, a rim light travelling, the mark in a well, three chevrons; it leans towards the mouse (js) */
.btn.hot.kcta{--dot:var(--red);position:relative;isolation:isolate;gap:13px;height:56px;padding:0 24px 0 9px;border:0;color:var(--fg);
  background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.6),0 14px 30px -12px rgba(0,0,0,.8);
  transition:box-shadow .5s var(--ease),transform .25s cubic-bezier(.2,.8,.2,1)}
.kcta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--a),rgba(255,255,255,.06) 0deg,rgba(255,255,255,.5) 55deg,var(--dot) 80deg,rgba(255,255,255,.5) 105deg,rgba(255,255,255,.06) 160deg,rgba(255,255,255,.06) 360deg);
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;animation:rim 10s linear infinite;transition:opacity .5s}
.kcta::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 55%)}
@keyframes rim{to{--a:360deg}}
.kcta:hover::before,.kcta:focus-visible::before{opacity:1;animation-duration:3s}
.btn.hot.kcta:hover,.btn.hot.kcta:focus-visible{outline:0;background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.6),0 18px 34px -12px rgba(0,0,0,.85),0 0 36px rgba(225,6,0,.22)}
.btn.hot.kcta:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 6px 16px -10px rgba(0,0,0,.8)}
.kcta .well{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#262a32,#0b0d11 74%);box-shadow:inset 0 2px 5px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05)}
.kcta .well .iu{width:20px;height:20px;color:#e9eae6}
.kcta .label{transition:transform .25s}
.kcta .chev{display:inline-flex;gap:3px;margin-left:2px}
.kcta .chev i{width:7px;height:7px;border-top:1.5px solid #d9dbe0;border-right:1.5px solid #d9dbe0;transform:rotate(45deg);opacity:.3;transition:transform .4s var(--ease),opacity .4s}
.kcta:hover .chev i:nth-child(1){transform:translateX(2px) rotate(45deg);opacity:.55}
.kcta:hover .chev i:nth-child(2){transform:translateX(4px) rotate(45deg);opacity:.8}
.kcta:hover .chev i:nth-child(3){transform:translateX(6px) rotate(45deg);opacity:1}
.btn.hot.kcta.sm{height:44px;font-size:14px;gap:10px;padding:0 16px 0 5px} .kcta.sm .well{width:34px;height:34px} .kcta.sm .well .iu{width:18px;height:18px}
.kcta.ok{--dot:var(--green)}
/* 2 · the assistant key: a soft cap on a plate, a slim light, a two-millimetre press */
.plate{display:inline-grid;place-items:center;padding:12px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 60px -30px rgba(0,0,0,.9)}
.key{--dot:var(--red);position:relative;width:172px;height:96px;border-radius:22px;border:0;display:grid;place-items:center;
  background:linear-gradient(165deg,#22262e 0%,#161a21 55%,#12151b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.5),0 4px 0 -1px #0b0d12,0 22px 40px -14px rgba(0,0,0,.9);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.key::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%)}
.key .iu{width:54px;height:54px;color:#e3e4e0;filter:drop-shadow(0 1px 0 rgba(255,255,255,.1)) drop-shadow(0 -1px 0 rgba(0,0,0,.5))}
.key .l{position:absolute;left:50%;bottom:10px;width:30px;height:3px;margin-left:-15px;border-radius:2px;background:var(--dot);filter:drop-shadow(0 0 6px var(--dot));animation:breathe 2.2s ease-in-out infinite;transition:width .3s,margin .3s}
.key:hover{transform:translateY(-1px)}
.key:active,.key.on{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 2px 8px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.5),0 1px 0 -1px #0b0d12,0 10px 20px -12px rgba(0,0,0,.9)}
.key.on{--dot:var(--green)} .key.on .l{animation:none;width:44px;margin-left:-22px}
.keyset{display:inline-flex;flex-direction:column;align-items:center}
.keylbl{margin-top:20px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mut);transition:color .4s}
.keylbl.on{color:var(--green)}
/* 3 · the "i" key */
.ik{display:contents} .h2row .ipanel{flex-basis:100%;width:100%}
.ikey{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);vertical-align:middle;margin-left:12px;background:linear-gradient(165deg,#22262e,#13161c);color:#c9ccd2;font-weight:600;font-size:12px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 0 -1px #0b0d12,0 8px 14px -8px rgba(0,0,0,.8);transition:transform .2s,box-shadow .2s,color .2s}
.ikey:hover{transform:translateY(-1px)}
.ikey[aria-expanded="true"]{transform:translateY(1px);box-shadow:inset 0 1px 4px rgba(0,0,0,.5);color:var(--green);border-color:rgba(34,197,94,.4)}
.ipanel{display:block;position:relative;margin:18px auto 0;max-width:720px;text-align:left;border-radius:var(--r);border:1px solid var(--line);background:rgba(10,12,16,.85);padding:22px 48px 22px 26px;font-size:15px;color:#c9ccd2}
.ipanel[hidden]{display:none}
.ipanel p{margin:0 0 10px} .ipanel .more{display:inline-block}
.ipanel .acard{display:flex;gap:18px;align-items:flex-start} .ipanel .acard img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line2);flex:none}
.iclose{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--mut);font-size:16px;line-height:1}
/* 4 · the language switch: three letters on one track, a soft thumb glides to the chosen one */
.lkeys{--i:0;position:relative;display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background .45s,border-color .45s}
.lkeys .thumb{position:absolute;top:3px;left:3px;width:40px;height:28px;border-radius:999px;background:linear-gradient(170deg,#2a2e37,#181b22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px -2px rgba(0,0,0,.8);transform:translateX(calc(var(--i)*40px));transition:transform .5s cubic-bezier(.3,1.35,.4,1)}
.lkeys .thumb::after{content:"";position:absolute;left:50%;bottom:4px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--green);filter:drop-shadow(0 0 4px var(--green))}
.lkey{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:28px;border:0;background:transparent;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--mut);transition:color .3s}
.lkey:hover{color:#d5d8dd} .lkey.on{color:var(--fg)}
/* 5 · the hold-to-start key (design/idem-buttons.html, 01): press and hold, the outline draws red → green, then it clicks down */
.hold{position:relative;width:220px;height:230px;display:grid;place-items:center;perspective:700px;margin:0 auto}
.hold .hbase{position:absolute;left:50%;top:50%;width:176px;height:176px;margin:-80px 0 0 -88px;border-radius:44px;background:linear-gradient(180deg,#07080b,#10131a);box-shadow:inset 0 10px 22px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.05);transform:rotateX(18deg)}
.key3{--dot:var(--red);--dg:var(--redg);--rx:18deg;--ry:0deg;--lift:18px;position:relative;width:150px;height:150px;padding:0;border:0;background:none;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0) translateY(calc(-1 * var(--lift)));transition:transform .18s cubic-bezier(.3,.7,.3,1);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.key3 .side{position:absolute;inset:0;border-radius:32px;transform:translateY(var(--lift));background:linear-gradient(180deg,#171a20,#08090c);box-shadow:0 22px 34px rgba(0,0,0,.75),0 0 0 1px #06070a}
.key3 .side::before{content:"";position:absolute;left:0;right:0;top:50%;bottom:0;border-radius:0 0 32px 32px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.03))}
.key3 .face{position:absolute;inset:0;border-radius:32px;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 10%,#363a41 0%,#212429 45%,#16191e 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 6px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);transition:box-shadow .3s}
.key3 .face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 40%)}
.key3 svg.edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.etrack{fill:none;stroke:#0b0d12;stroke-width:5;filter:drop-shadow(0 1px 0 rgba(255,255,255,.06))}
.eprog{fill:none;stroke:#e10600;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor)}
.key3 .glyph{width:64px;height:64px;overflow:visible;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.key3 .gl{fill:none;stroke:#dfe2df;stroke-width:12} .key3 .gb{fill:#dfe2df}
.key3 .d{fill:var(--dot);filter:drop-shadow(0 0 5px var(--dot)) drop-shadow(0 0 14px var(--dg));transition:fill .3s}
.key3.down{--lift:3px}
.key3.on{--dot:var(--green);--dg:var(--greeng);--lift:3px}
.key3.on .face{box-shadow:inset 0 2px 0 rgba(255,255,255,.1),inset 0 -3px 6px rgba(0,0,0,.55),0 0 50px rgba(34,197,94,.25)}
/* 6 · the reading light (02): the mark, bottom right; its dot fills red → green as you read; click = back to top */
.rl{position:fixed;right:18px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:0;background:linear-gradient(180deg,#1c2026,#101318);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #262b31,0 10px 24px rgba(0,0,0,.6);opacity:0;transform:translateY(12px) scale(.9);transition:opacity .4s,transform .4s,box-shadow .3s;pointer-events:none}
.rl.show{opacity:1;transform:none;pointer-events:auto}
.rl:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #3a4046,0 0 30px rgba(255,255,255,.08)}
.rl svg{width:34px;height:34px;overflow:visible}
.rl .gl{fill:none;stroke:#d8dbd8;stroke-width:12} .rl .gb{fill:#d8dbd8} .rl .dbase{fill:#2a2f36} .rl .dfill{fill:var(--red)}
.rl .ring{fill:none;stroke-width:3.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50px 48px;transform-box:view-box}
.rl .rt{stroke:#232830} .rl .rp{stroke-dasharray:283;stroke-dashoffset:283}
/* 7 · the LED key (04): Next / Send on the form, "Run a job through" on /method */
.nx{position:relative;padding:0;border:0;border-radius:22px;background:none;transform:translateY(-6px);transition:transform .14s cubic-bezier(.3,.7,.3,1)}
.nx::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateY(6px);background:linear-gradient(180deg,#14171c,#07080b);box-shadow:0 14px 26px rgba(0,0,0,.7),0 0 0 1px #05060a}
.nx:active{transform:translateY(-1px)}
.nxface{position:relative;display:flex;flex-direction:column;gap:10px;min-width:230px;padding:14px 20px 13px;border-radius:inherit;overflow:hidden;color:var(--fg);
  background:radial-gradient(120% 140% at 50% 120%,rgba(225,6,0,.35),transparent 60%),linear-gradient(180deg,#2a2e35,#181b21 55%,#121418);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),inset 0 -2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);transition:background .5s,box-shadow .4s}
.nxface::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .9s cubic-bezier(.2,.8,.2,1)}
.nx:hover .nxface::after{left:120%}
.nx:hover .nxface{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),inset 0 -2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(225,6,0,.45),0 0 34px rgba(225,6,0,.35)}
.nxtop{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:17px;font-weight:500;letter-spacing:.01em;text-align:left}
.nxc{display:inline-flex;gap:2px}
.nxc i{width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);opacity:.2;animation:chv 1.4s infinite}
.nxc i:nth-child(2){animation-delay:.15s} .nxc i:nth-child(3){animation-delay:.3s}
@keyframes chv{35%{opacity:1}}
.leds{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.leds i{height:4px;border-radius:2px;background:#0b0d12;box-shadow:inset 0 1px 1px rgba(0,0,0,.8);transition:background .35s,box-shadow .35s}
.leds i.on{background:var(--c);box-shadow:0 0 8px var(--c)}
.leds i.now{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.nx.done .nxface{background:radial-gradient(120% 140% at 50% 120%,rgba(34,197,94,.4),transparent 60%),linear-gradient(180deg,#2a2e35,#181b21 55%,#121418)}
.nx.done:hover .nxface{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),inset 0 -2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(34,197,94,.5),0 0 34px rgba(34,197,94,.35)}
.nx.done .nxc{display:none}
.nx[disabled]{opacity:.7;cursor:default}
/* 8 · the answer chips (04): a chosen answer pops and gets a green dot; Other… opens into a box */
.qchips{display:flex;flex-wrap:wrap;gap:9px}
.qchip{position:relative;padding:11px 17px;border-radius:999px;border:1px solid #272b31;background:#11141a;color:#d5d8dd;font-size:15px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .25s,background .25s,padding .25s}
.qchip[aria-pressed="true"]{transform:scale(1.04);border-color:#e9ece9;background:#181b21;color:#fff;padding-left:30px}
.qchip::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--greeng);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.qchip[aria-pressed="true"]::before{transform:scale(1)}
.qchip:hover{border-color:#3a4046}
.qother{position:relative;display:inline-flex}
.qin{display:none;width:220px;padding:11px 17px 11px 30px;border-radius:999px;border:1px solid #e9ece9;background:#181b21;color:var(--fg);font:inherit;font-size:15px;outline:none;background-image:radial-gradient(circle at 17px 50%,var(--green) 0 4px,transparent 5px);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.qin:placeholder-shown{background-image:radial-gradient(circle at 17px 50%,#3a4046 0 4px,transparent 5px)}
.qin::placeholder{color:#6c7278}
.qother.open .qochip{display:none} .qother.open .qin{display:block;animation:grow .25s cubic-bezier(.3,1.4,.5,1)}
@keyframes grow{from{width:90px;opacity:.4}}

/* ---------- the one card ---------- */
.card{--tint:rgba(255,255,255,.07);position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--sur);padding:28px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .35s,transform .5s var(--ease)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 45% at 50% 0%,var(--tint),transparent 70%);opacity:.8}
.card:hover{border-color:var(--line2)}
.card>*{position:relative}
.card h3{margin:0 0 8px;font-size:22px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.card h3 .ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.3);flex:none}
.card h3 .ico .i{width:16px;height:16px;fill:none;stroke:#c9ccd2;stroke-width:1.6}
.card p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
.card .n{font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:10px}
.card .more{display:inline-block;margin-top:14px}
.card .from{margin-top:12px;color:var(--fg);font-weight:500}
.card .ex{margin-top:12px;font-size:14px;color:#c9ccd2}
.card ul.lines{margin:12px 0 0;padding-left:18px;color:#c9ccd2} .card ul.lines li{margin:4px 0}
.card.t-red{--tint:rgba(225,6,0,.22)} .card.t-green{--tint:rgba(34,197,94,.18)}
.tag{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.3);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--red);transition:background .6s} html.done .tag i{background:var(--green)}
a.more{color:var(--fg);border-bottom:1px solid var(--line2);padding-bottom:1px;transition:border-color .3s} a.more:hover{border-color:var(--fg)}

/* ---------- sections, the one rhythm (every page) ---------- */
section{padding:128px 0}
section.hero{padding:0}
.head,.sec-head{text-align:center;max-width:760px;margin:0 auto 56px}
.sec-head .more{display:inline-block;margin-top:16px}
.kick,.kicker{display:block;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
h1{margin:0;font-size:clamp(44px,6.4vw,78px);line-height:1.02;font-weight:500;letter-spacing:-.028em;color:#fff}
h2{margin:0;font-size:clamp(34px,4.2vw,52px);line-height:1.06;font-weight:500;letter-spacing:-.024em;color:#fff}
h3{font-weight:500}
.lead,p.sub{margin:20px auto 0;max-width:640px;color:var(--mut);font-size:19px;line-height:1.55}
.h2row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.grid{display:grid;gap:24px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr);gap:20px} .g5{grid-template-columns:repeat(5,1fr);gap:16px}
.grid.tight{gap:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
ul.lines{margin:0;padding-left:20px;color:#c9ccd2;line-height:1.7}
.small{font-size:13px} .mut{color:var(--dim)}
.acc{color:var(--red);transition:color .6s} html.done .acc{color:var(--green)}
.disc{max-width:640px;margin:18px auto 0;font-size:14px}
/* the pricing tiers (all pages): the legacy rules, on the v5 card */
.tier{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--sur);padding:26px 26px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tier .kicker{margin-bottom:12px;font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--fg)} /* 15 Oct 2026 (plan S1-06): the tier name reads as a name, 14 px normal case, not an 11 px spaced-capital label */ .tier .price{font-size:40px;font-weight:500;letter-spacing:-.03em;color:#fff;line-height:1} .tier .unit{color:var(--mut);font-size:14px;margin:6px 0 14px} .tier p{margin:0;color:var(--mut);font-size:15px;line-height:1.55} .tier .pay{margin-top:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tiers,.tiers-row{display:grid;gap:20px} .tiers.n5,.tiers-row.g5{grid-template-columns:repeat(5,1fr)} .tiers.n4,.tiers-row.g4{grid-template-columns:repeat(4,1fr)} .tiers.n3,.tiers-row.g3{grid-template-columns:repeat(3,1fr)}
/* reveal: fade-up, .6 s, 100 px, again on the way back (AOS as merge.rocks runs it) */
/* 15 Oct 2026 (plan S1-07): transform only, never opacity 0, so a one-shot picture, a link preview or a crawler sees every section */
.rv{transform:translate3d(0,100px,0);transition:transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* ---------- the sub-page hero: centred, the whole width ---------- */
.hero .wrap{text-align:center;max-width:900px;padding-top:96px;padding-bottom:24px}
.hero .btns{margin-top:36px}
.legal-hero .wrap{max-width:760px}
/* ---------- the home hero: the entrance, then the mark with no box around it ---------- */
.hero-main .wrap{padding-top:0}
@keyframes heroText{0%{scale:.7;transform:translateY(30px);opacity:0;filter:blur(8px)}70%,to{scale:1;transform:none;opacity:1;filter:blur(0)}}
@keyframes screenIn{0%{opacity:0;transform:translateY(-24px) scale(.92)}to{opacity:1;transform:none}}
.hero-main h1,.hero-main .lead,.hero-main .btns{animation:heroText 4s ease both}
.hero-main h1{animation-delay:.6s} .hero-main .lead{animation-delay:.72s} .hero-main .btns{animation-delay:.84s}
/* Leonard, 7 Oct 2026: "Our solution." in green; the site's own green was "too vivid", so it is its own green, --sol.
   8 Oct 2026: the soft green #95e4b2 was not it either: "a more dark green, or the green that is in the background …
   a bit more darker not darker but -- yet not at it is now". --sol is #3fa665 now: HIS pick, number 3 of the picture
   preview/choices-2026-10-08/greens.png ("the green 3-- lets try"). The same day the word idem in "Put idem to work."
   left the green: "as the idem in the logo video -- a sort of more grey … just to be differentiated from the other
   words -- but not green". It is --metal, #e0e0e0: HIS pick, number 1 of preview/choices-2026-10-08/greys.png, the
   tone of the word idem in the logo film's last frame (first built as #b4b7bc, Claude's pick; he chose 1). */
.hero-main h1 .sol{color:var(--sol)}
/* 15 Oct 2026 (plan S1-04, pick D2a): the home first screen as a landing. The slogan is the small line above (its green
   kept), the H1 names the product and the buyer (first sentence white, second grey), the two buttons as on 17 Sep, then
   the real product picture: the Ask idem box answering a visitor on this site. The logo film lives on /about/. */
/* 19 Oct 2026 (Leonard: the logo film back on the home hero, "the title should remain as it was"): the landing's top space,
   its smaller H1 and its narrower lead apply only to a hero WITHOUT the logo film, so the hero with it is the live one. */
.hero-main .wrap:not(:has(.screen)){padding-top:clamp(56px,7vw,96px);max-width:1180px}
.hero-main .hk{margin:0 0 18px;font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.3;color:#fff;animation:heroText 4s ease both;animation-delay:.5s}
.hero-main .hk .sol{color:var(--sol)}
.hero-main .wrap:not(:has(.screen)) h1{font-size:clamp(34px,4.3vw,62px);line-height:1.06;text-wrap:balance}
.hero-main h1 .h1a{display:block;color:#fff}
.hero-main h1 .h1b{display:block;color:rgba(245,246,243,.58)}
/* 18 Oct 2026 (Leonard: "keep the Your problem, Our Solution as the title"): the slogan is the H1 again, as on the live
   site, drawn through solH1() with its coloured word; the product line moves under it, first sentence white, second grey. */
.hero-main .hl{margin:20px auto 0;max-width:820px;font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.01em;line-height:1.28;text-wrap:balance;animation:heroText 4s ease both;animation-delay:.5s}
.hero-main .hl .h1a{display:block;color:#fff}
.hero-main .hl .h1b{display:block;color:rgba(245,246,243,.58)}
.hero-main .wrap:not(:has(.screen)) .lead{max-width:680px}
.hero-still{margin:56px auto 0;width:min(380px,100%);animation:heroText 4s ease both;animation-delay:.96s}
.hero-still img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.hero-still figcaption{margin-top:14px;font-size:13px;color:var(--mut)} .hero-still figcaption .more{margin-left:6px} .hs-open{display:block;border-radius:var(--r)} .hs-open:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.about-film{padding:0 0 24px} .about-film .screen{margin:-24px auto -40px}
/* 15 Oct 2026 (plan S1-05): the method film plays in place of the hero picture, wide, on a click; the pill is not red. */
.hero-still{position:relative}
.hs-play{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border:0;border-radius:999px;background:rgba(245,246,243,.94);color:#0a0c10;font:500 14px/1 Outfit,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.hs-play svg{width:14px;height:14px;fill:currentColor}
.hs-play small{font-size:12px;color:#5b6070;font-weight:400}
.hs-play:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.hero-still.playing{width:min(1000px,100%)}
.hero-still.playing .hs-open,.hero-still.playing .hs-play,.hero-still.playing figcaption{display:none}
.hs-film video{display:block;width:100%;height:auto;border-radius:var(--r);background:#0a0c10;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
/* 18 Oct 2026 (Leonard): the ad film plays in the hero by itself, silent, while on screen; one sound button */
.hero-film{position:relative;margin:56px auto 0;width:min(1000px,100%);animation:heroText 4s ease both;animation-delay:.96s}
.hf-box{position:relative}
.hf-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.hf-sound{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border:0;border-radius:999px;background:rgba(10,12,16,.82);color:#f5f6f3;font:500 14px/1 Outfit,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hf-sound svg{width:16px;height:16px;fill:currentColor}
.hf-sound .hf-w{opacity:.35} .hf-sound[aria-pressed="true"] .hf-w{opacity:1}
.hf-sound:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.hero-film figcaption{margin-top:14px;font-size:13px;color:var(--mut)} .hero-film figcaption .more{margin-left:6px}
@media (max-width:700px){.hf-sound{position:static;margin:10px 0 0 auto;display:flex;width:max-content;padding:8px 12px 8px 10px;font-size:13px;background:rgba(245,246,243,.08);box-shadow:inset 0 0 0 1px rgba(245,246,243,.16)}} /* under the film on a phone: it never covers the DEMO tag or a caption */
.screen{position:relative;max-width:1000px;margin:-48px auto -96px}
.screen video{width:100%;aspect-ratio:16/9;object-fit:cover;mix-blend-mode:screen;cursor:pointer;animation:screenIn 1.6s ease .1s both}
@supports not (mix-blend-mode:screen){.screen video{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,black 40%,transparent 74%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,black 40%,transparent 74%)}}
/* the film has no edge (Leonard, 7 Oct 2026: "you can see the line between the video, just down … as like is within the page
   itself"). Its pieces fly in from outside the picture, and the screen blend hides black only, so in the first 3 seconds a
   bright piece at an edge was cut by a straight line (measured on the film: up to 200 of 255 on the bottom edge). The film
   now fades to nothing toward its four edges. The middle, where the mark ends, is untouched. The round mask above stays
   for a browser with no blend mode. */
@supports (mix-blend-mode:screen){.screen video{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 1.5%,rgba(0,0,0,.4) 7%,black 15%,black 70%,rgba(0,0,0,.6) 81%,rgba(0,0,0,.2) 91%,transparent 97.5%,transparent 100%),linear-gradient(to right,transparent 0%,transparent 1%,rgba(0,0,0,.45) 6%,black 13%,black 87%,rgba(0,0,0,.45) 94%,transparent 99%,transparent 100%);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 1.5%,rgba(0,0,0,.4) 7%,black 15%,black 70%,rgba(0,0,0,.6) 81%,rgba(0,0,0,.2) 91%,transparent 97.5%,transparent 100%),linear-gradient(to right,transparent 0%,transparent 1%,rgba(0,0,0,.45) 6%,black 13%,black 87%,rgba(0,0,0,.45) 94%,transparent 99%,transparent 100%);
  mask-composite:intersect;mask-repeat:no-repeat}}
/* the assistant key under the hero */
.launch{padding:24px 0 110px;text-align:center}
.ldoors{display:none;margin:30px auto 0;max-width:720px;gap:14px;grid-template-columns:1fr 1fr} .ldoors.open{display:grid}
.ldoor{display:flex;align-items:center;gap:14px;padding:18px 20px;text-align:left;border-radius:18px;border:1px solid var(--line);background:var(--sur);transition:border-color .3s,background .3s}
.ldoor:hover{border-color:var(--line2);background:var(--sur2)}
.ldoor .iu{width:26px;height:26px;color:var(--fg);flex:none} .ldoor b{display:block;font-weight:500;font-size:15px} .ldoor span{font-size:13px;color:var(--mut)}
/* the third door and the voice panel (SITE-PLAN D16, phase 3, 21 Sep 2026). The ring fills green as the five minutes run
   down (stroke-dashoffset set by js/motion.js each second); when time is up it turns red and the carry-on line appears.
   With motion off the ring still steps once a second, without the tween. While the door is open the reading light hides,
   so the widget's own bubble has the bottom-right corner to itself. */
.ldoors.three{grid-template-columns:repeat(3,1fr);max-width:960px}
button.ldoor{font:inherit;color:var(--fg);cursor:pointer;width:100%;-webkit-appearance:none;appearance:none}
.vdoor{margin:22px auto 0;max-width:720px;padding:26px 24px 20px;border-radius:22px;border:1px solid var(--line);background:var(--sur);text-align:center}
.vdoor .vdisc{margin:0 0 18px;font-size:15px;color:var(--fg)}
.vring{position:relative;width:160px;height:160px;margin:0 auto} .vring svg{width:160px;height:160px;transform:rotate(-90deg)}
.vring circle{fill:none;stroke-width:6} .vring .track{stroke:rgba(255,255,255,.1)}
.vring .prog{stroke:var(--green);stroke-linecap:round;stroke-dasharray:439.8;stroke-dashoffset:439.8;transition:stroke-dashoffset .9s linear;filter:drop-shadow(0 0 6px var(--greeng))}
.vdoor.over .vring .prog{stroke:var(--red);filter:drop-shadow(0 0 6px var(--redg))}
.vring .vtime{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
.vmount{margin:14px auto 0}
.vdoor .vlive,.vdoor .vcarry{margin:16px 0 0;font-size:15px;color:var(--fg)} .vdoor .vpriv{margin:18px 0 0;font-size:13px;color:var(--mut)}
html.voice .rl{display:none}
@media (prefers-reduced-motion: reduce){.vring .prog{transition:none}}

/* ---------- three doors · the fan ---------- */
.fan{--f:0;perspective:1600px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;transform-style:preserve-3d}
.fan .card{--ry:0deg;--tz:0px;min-height:320px;display:flex;flex-direction:column;transform:rotateY(var(--ry)) translateZ(var(--tz));backface-visibility:hidden}
.fan .card:nth-child(1){--ry:calc((24deg - var(--f)*14deg));--tz:-60px}
.fan .card:nth-child(3){--ry:calc((-24deg + var(--f)*14deg));--tz:-60px}
.fan .card:hover{--ry:0deg;--tz:24px;border-color:var(--line2)}
.fan .card h3{display:block}
.fan .card .foot{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut)}
.fan .card .foot a{color:var(--fg);border:0;display:inline-flex;align-items:center;gap:6px}
.fan .card .foot a::after{content:"→";transition:transform .3s} .fan .card .foot a:hover::after{transform:translateX(3px)}
.fan .card .pv{margin:-28px -28px 20px;height:150px;border-bottom:1px solid var(--line);background:#07080b;display:grid;place-items:center;overflow:hidden} .fan .card .pv img{width:100%;height:100%;object-fit:cover;object-position:top}
.fan .card .pv .chat{width:82%;font-size:12px;line-height:1.5;color:#c9ccd2}
.fan .card .pv .chat div{padding:8px 12px;border-radius:12px;margin:6px 0;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.fan .card .pv .chat div.u{margin-left:22%;background:rgba(255,255,255,.08)}
.fan .card .pv .chat table{width:100%;border-collapse:collapse;font-size:11px} .fan .card .pv .chat td{padding:4px 6px;border-top:1px solid var(--line)}

/* ---------- how we work: three nodes on a rail, the rail behind the nodes ---------- */
.rail{--p:0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.rail::before{content:"";position:absolute;left:16.67%;right:16.67%;top:23px;height:1px;background:var(--line);z-index:0}
.rail::after{content:"";position:absolute;left:16.67%;top:22px;height:2px;width:calc(66.66% * var(--p));border-radius:2px;background:linear-gradient(90deg,var(--red),var(--green));z-index:0;opacity:.9}
.step{position:relative;z-index:1;text-align:center;padding-top:64px}
.step .n{position:absolute;left:50%;top:0;width:46px;height:46px;margin-left:-23px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:500;background:linear-gradient(165deg,#1f232b,#0f1218);border:1px solid var(--line2);box-shadow:0 10px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.step:nth-child(1) .n{border-color:rgba(225,6,0,.5)} .step:nth-child(3) .n{border-color:rgba(34,197,94,.5)}
.step h3{margin:0 0 8px;font-size:22px} .step p{margin:0;color:var(--mut);font-size:15px}
.rail-more{text-align:center;margin-top:44px}

/* ---------- our work: the ring ---------- */
.stage{--W:min(560px,78vw);--n:8;--rk:1.2071;--R:calc(var(--W)*var(--rk));--rot:0deg;position:relative;height:calc(var(--W)*.72);perspective:1900px;perspective-origin:50% 42%;margin-top:24px;touch-action:pan-y}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(-1*var(--R))) rotateY(var(--rot))}
.pane{position:absolute;left:50%;top:50%;width:var(--W);height:calc(var(--W)*.625);margin:calc(var(--W)*-.3125) 0 0 calc(var(--W)*-.5);transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--R));border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#0b0d12;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);backface-visibility:hidden;transition:filter .2s linear}
.pane img{width:100%;height:100%;object-fit:cover;object-position:top}
.pane .cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-size:14px;font-weight:500}
.pane .cap .tag{height:24px;padding:0 9px;background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.18);color:#cfd2d7}
.stage .hint{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* ---------- what it does: the row of jobs, turning as you scroll ---------- */
.jobs{position:relative;margin-top:16px;overflow:hidden;padding:30px 0 40px}
.jtrack{display:flex;gap:22px;padding:0 24px;perspective:1400px;transform-style:preserve-3d;will-change:transform}
.job{--ry:-9deg;--rz:-1.2deg;--tint:#3a1210;--ink:#ff8a80;flex:0 0 250px;height:400px;border-radius:26px;padding:26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(165deg,var(--tint) 0%,#0e1116 62%,#0b0d12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 70px -30px rgba(0,0,0,.9);transform:rotateY(var(--ry)) rotateZ(var(--rz));transition:transform .55s var(--ease),border-color .3s}
.job:nth-child(even){--ry:8deg;--rz:1.2deg}
.job:hover{transform:rotateY(0) rotateZ(0) translateY(-10px);border-color:rgba(255,255,255,.2)}
.job::before{content:"";position:absolute;left:-30%;top:22%;width:120%;height:80%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 30%,transparent),transparent 70%);filter:blur(10px);pointer-events:none}
.job .no{font-size:11px;letter-spacing:.3em;color:var(--ink);text-transform:uppercase}
.job h3{margin:auto 0 10px;font-size:24px;line-height:1.12;letter-spacing:-.01em;color:#fff}
.job p{margin:0;font-size:14px;line-height:1.5;color:#b7bcc5}
.job .tag{margin-top:18px;align-self:flex-start;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.12);color:#d3d6db}
/* the picture: the assistant's own look, cropped small and dark, the same frame on all eight (job-shots.mjs).
   The dot means something here: green = the job is finished, red = it waits for you (the two `.wait` cards). */
.job .shot{flex:none;margin:-26px -24px 16px;height:150px;position:relative;z-index:1;background:#07080b;border-bottom:1px solid rgba(255,255,255,.08)}
.job .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.job .tag i{background:var(--green)} .job.wait .tag i{background:var(--red)}
.job.j1{--tint:#3d1412;--ink:#ff8f86} .job.j2{--tint:#0f3323;--ink:#7de8a6} .job.j3{--tint:#15213f;--ink:#8fb3ff} .job.j4{--tint:#3c2a0e;--ink:#ffcf7a}
.job.j5{--tint:#2f1440;--ink:#d69cff} .job.j6{--tint:#0d3236;--ink:#7ae1e8} .job.j7{--tint:#3a2412;--ink:#ffb27a} .job.j8{--tint:#1d2230;--ink:#c4ccdd}

/* ---------- the book: five pages, turned by the scroll; the stage stays put while they turn ---------- */
.book-s{height:520vh;padding:0}
.bookstage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;perspective:2000px}
.bookstage .head{margin-bottom:34px}
.book{--o:0;position:relative;width:min(720px,88vw);aspect-ratio:1.5;margin:0 auto;transform-style:preserve-3d;transform:rotateX(6deg) translateX(calc((1 - var(--o))*25%));transition:transform .1s linear}
.base,.leaf{position:absolute;top:0;bottom:0;left:50%;width:50%}
.page{padding:44px 38px 40px;color:#d9dcd7;border:1px solid var(--line);font-family:var(--serif);font-size:17px;line-height:1.6}
.base{border-radius:2px 14px 14px 2px;background:linear-gradient(90deg,#12161d,#0f1218);box-shadow:inset 20px 0 30px -24px rgba(0,0,0,.9);z-index:0}
.leaf{--t:0;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(calc(var(--t)*-180deg));transition:transform .1s linear}
.leaf .f,.leaf .b{position:absolute;inset:0;backface-visibility:hidden}
.leaf .f{border-radius:2px 14px 14px 2px;background:linear-gradient(90deg,#12161d,#0f1218);box-shadow:inset 20px 0 30px -24px rgba(0,0,0,.9)}
.leaf .b{transform:rotateY(180deg);border-radius:14px 2px 2px 14px;background:linear-gradient(270deg,#12161d,#0f1218);box-shadow:inset -20px 0 30px -24px rgba(0,0,0,.9)}
.leaf.cover{top:-6px;bottom:-6px;width:calc(50% + 6px)}
.leaf.cover .f{border-radius:2px 16px 16px 2px;background:linear-gradient(160deg,#1e222a,#0f1218);border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);font-family:Outfit,system-ui,sans-serif}
.leaf.cover .f .iu{width:64px;height:64px;color:#e3e4e0} .leaf.cover .f b{font-weight:600;font-size:26px;color:#fff} .leaf.cover .f b i{font-style:normal;font-weight:400;letter-spacing:.3em;font-size:13px;margin-left:8px;color:var(--mut)} .leaf.cover .f span{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.leaf.cover .b{border-radius:16px 2px 2px 16px}
/* the typography of a book: running head, chapter opener with a rule, a drop cap, justified text, a centred folio */
.page .rh{position:absolute;top:16px;left:0;right:0;text-align:center;font:400 10px/1 Outfit,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.pk{display:block;text-align:center;font:500 11px/1 Outfit,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.page .rule{width:28px;height:1px;background:rgba(255,255,255,.25);margin:14px auto 18px}
.page h3{margin:0 0 18px;text-align:center;font:500 34px/1.1 var(--serif);color:#fff;letter-spacing:-.005em}
.page p{margin:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.page .f p:first-of-type::first-letter,.leaf .f.page p:first-of-type::first-letter{float:left;font-size:3.4em;line-height:.8;padding:.06em .08em 0 0;color:#fff;font-weight:500}
.page .pn{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:var(--dim)}
.page .big{display:block;font:italic 400 120px/1 var(--serif);color:rgba(255,255,255,.08);letter-spacing:-.02em;margin-top:6px}
.page .bt{display:block;margin-top:10px;font:400 20px/1.3 var(--serif);color:#e6e7e3}
.page.title{display:flex;flex-direction:column;justify-content:center} .page.title h3{font-size:36px;margin:12px 0 10px} .page.title p{text-align:center}
.base.last{display:flex;flex-direction:column;gap:18px}
.who-l{display:flex;align-items:center;gap:14px;font-family:Outfit,system-ui,sans-serif} .who-l img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line2)} .who-l span{display:flex;flex-direction:column} .who-l b{font-size:18px;font-weight:500;color:#fff} .who-l em{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.base .quote{margin:0;text-align:left;font:italic 400 20px/1.45 var(--serif);color:#e6e7e3}
.base .sig{width:150px;height:auto;align-self:flex-start;filter:invert(1) brightness(1.1);mix-blend-mode:screen;opacity:.9}
.base .start{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--fg);color:#0a0c10;font:500 15px/1 Outfit,system-ui,sans-serif;box-shadow:0 0 26px rgba(255,255,255,.18);transition:box-shadow .3s,transform .15s}
.base .start i{font-style:normal;transition:transform .3s} .base .start:hover{box-shadow:0 0 40px rgba(255,255,255,.3)} .base .start:hover i{transform:translateX(3px)} .base .start:active{transform:translateY(1px)}

/* ---------- pricing on the home page ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto}
.plan{padding:0;overflow:visible}
.plan .band{height:40px;display:grid;place-items:center;border-radius:var(--r) var(--r) 0 0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff;background:var(--red);opacity:0;transition:background .6s}
.plan.hi{border-color:rgba(225,6,0,.55)} .plan.hi .band{opacity:1} html.done .plan.hi{border-color:rgba(34,197,94,.55)} html.done .plan.hi .band{background:var(--green)}
.plan .in{padding:26px 30px 30px}
.plan .in>h3{font-size:18px;margin:0 0 14px}
.plan .pr{display:flex;align-items:baseline;gap:8px;margin-bottom:22px} .plan .pr b{font-size:44px;font-weight:500;letter-spacing:-.03em;color:#fff} .plan .pr span{color:var(--mut);font-size:15px}
.plan .btn{width:100%;height:52px;font-size:15px}
.plan p{margin-top:18px}
.strip{max-width:1000px;margin:24px auto 0;padding:22px 28px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
.strip p{margin:0;color:#c9ccd2;font-size:15px} .strip b{display:block;color:var(--fg);font-size:19px;font-weight:500;margin-bottom:4px}
.plans-more{text-align:center;margin-top:28px}

/* ---------- the final key, then let's begin with the nine questions ---------- */
.final{text-align:center;padding:120px 0 40px}
.final .kick{margin-bottom:18px} .final h2{margin-bottom:34px} .final h2 .bw{font-weight:700;color:var(--metal)}
.hint{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-top:8px;transition:color .4s} .hint.on{color:var(--green)}
.begin{padding:60px 0 140px}
.begin .g2{grid-template-columns:.8fr 1.2fr;align-items:start;gap:60px}
.begin .side{position:sticky;top:110px}
.begin h2{font-size:clamp(40px,5vw,64px);animation:flick 4s ease-in-out infinite}
@keyframes flick{0%{opacity:.2;filter:brightness(1)}25%{opacity:.7;filter:brightness(.98)}50%{opacity:1;filter:brightness(.95)}75%{opacity:.7;filter:brightness(.99)}to{opacity:.2;filter:brightness(1)}}
html.done .begin h2{animation:none;opacity:1}
.path{position:relative;margin-top:44px;height:380px}
.path svg{position:absolute;left:0;top:0;width:440px;height:380px;overflow:visible}
.path svg path{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .2s,stroke .8s}
html.done .path svg path{stroke:rgba(34,197,94,.5)} .path.in svg path{stroke-dashoffset:0}
.node{position:absolute;display:flex;align-items:flex-start;gap:18px;width:250px}
.node .n{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:500;color:#fff;background:linear-gradient(165deg,#1b1f27,#0d1015);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(34,197,94,0),0 10px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);transition:box-shadow .8s,border-color .8s}
.node.a .n{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(225,6,0,.16),0 0 24px rgba(225,6,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
html.done .node.a .n{box-shadow:0 0 0 3px rgba(34,197,94,.16),0 0 24px rgba(34,197,94,.45),inset 0 1px 0 rgba(255,255,255,.1)}
/* The light that runs 1 → 2 → 3 after Send (Leonard, 7 Oct 2026: "like a snake … in real time … ends with 3 lit, as first was the 1").
   js/motion.js sets .run1, .at2, .run2, .at3 on #path, in that order, after the engine says ok, and only then. Each piece of the
   line has a trail that stays lit and a short head that runs. A number the light has left keeps a green ring (passed);
   the last one stays lit. With motion off the same steps happen with no moving head (the reduced-motion block). On a phone there is no line: the numbers step. */
#path path.run{stroke:var(--green);stroke-linecap:round;transition:none;opacity:0}
#path path.trail{stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:1}
#path path.head{stroke:#d6ffe4;stroke-width:3;stroke-dasharray:var(--hl) 1;stroke-dashoffset:var(--hl);filter:drop-shadow(0 0 4px var(--green)) drop-shadow(0 0 12px var(--green))}
#path path.s1{--hl:.17} #path path.s2{--hl:.27}
#path.run1 path.trail.s1{animation:runTrail 1.3s linear forwards} #path.run1 path.head.s1{animation:runHead 1.3s linear forwards}
#path.run2 path.trail.s2{animation:runTrail .9s linear forwards} #path.run2 path.head.s2{animation:runHead .9s linear forwards}
@keyframes runTrail{0%{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes runHead{0%{opacity:1;stroke-dashoffset:var(--hl)}94%{opacity:1}to{opacity:0;stroke-dashoffset:-1}}
#path.at2 .node.b .n,#path.at3 .node.c .n{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(34,197,94,.16),0 0 24px rgba(34,197,94,.45),inset 0 1px 0 rgba(255,255,255,.1)}
#path.run1 .node.a .n,#path.run2 .node.b .n{border-color:rgba(34,197,94,.55);box-shadow:0 0 0 3px rgba(34,197,94,0),0 10px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.node p{margin:11px 0 0;color:var(--mut);font-size:16px;line-height:1.5} .node p b{color:var(--fg);font-weight:500}
.node.a{left:0;top:0} .node.b{left:170px;top:118px} .node.c{left:0;top:260px;width:286px;flex-direction:row-reverse} .node.c p{text-align:right;text-wrap:balance}
.form{padding:32px 36px 28px} .wiz{min-height:460px;display:flex;flex-direction:column}
.wtop{display:flex;align-items:center;gap:18px;margin-bottom:28px;font-size:12px;letter-spacing:.22em;color:var(--dim)} .wtop b{color:var(--fg);font-weight:500}
.wprog{flex:1;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden} .wprog i{display:block;height:100%;width:11%;background:linear-gradient(90deg,var(--red),var(--green));transition:width .5s var(--ease)}
.wsteps{flex:1}
.q{display:none;animation:qin .5s var(--ease) both} .q.on{display:block}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 21 Oct 2026 (Leonard, on his phone: "once I press an answer, next, it moves down and up, based on the length of the
   buttons … fit, not to move the survey"): the nine questions stand in one grid cell and only the one on screen is
   visible. The box is as tall as the tallest question in this language at this width, all the time: the answers always
   start at the same place, Next never moves, nothing under the box moves. The others are visibility:hidden (no tap, no
   focus, not read aloud). The fade-in still plays each time a question comes on. */
.wsteps{display:grid;align-content:start}
.wsteps>.q{grid-area:1/1;display:block;visibility:hidden;animation:none}
.wsteps>.q.on{visibility:visible;animation:qin .5s var(--ease) both}
.q h3{margin:0 0 22px;font-size:26px;line-height:1.2;letter-spacing:-.012em;color:#fff} .q h3 em{display:block;font-style:normal;font-size:13px;color:var(--dim);font-weight:400;margin-top:6px;letter-spacing:0}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid var(--line2);background:transparent;color:var(--fg);font:inherit;font-size:17px;padding:10px 0;outline:0;transition:border-color .3s;resize:vertical;border-radius:0}
.form input:focus,.form textarea:focus{border-color:rgba(255,255,255,.5)}
.form .qin{width:220px;border:1px solid #e9ece9;border-radius:999px;padding:11px 17px 11px 30px;font-size:15px}
.who{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px} .who label{display:block} .who label span{display:block;font-size:13px;color:var(--mut);margin-bottom:2px}
.wnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.btn.sm{height:46px;padding:0 20px;font-size:14px}
.wq{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:14px;text-align:right}
.form .fine{font-size:13px;color:var(--dim);margin:18px 0 0;line-height:1.5} .form .fine a{color:#c9ccd2;border-bottom:1px solid var(--line2)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- the closing band on the other pages ---------- */
.cta-band{text-align:center;padding:120px 0}
.cta-band h2{max-width:760px;margin:0 auto}
.cta-band .btns{margin-top:36px}

/* ---------- the method page (design/idem-method.html) ---------- */
.method{padding:40px 0 120px}
.method .sub{margin:0 auto 18px}
.pick{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.pick>span{font-size:16px;color:#cfd4d0}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pc{padding:11px 18px;border-radius:999px;border:1px solid #272b31;background:#11141a;color:#d5d8dd;font-size:15.5px;transition:border-color .25s,background .25s,transform .2s}
.pc:hover{border-color:#3a4046}
.pc[aria-pressed="true"]{border-color:var(--green);background:rgba(34,197,94,.08);color:#fff;box-shadow:0 0 18px -6px var(--greeng)}
.bench{margin-top:46px;border:1px solid var(--line);border-radius:26px;background:var(--sur);padding:26px 26px 22px}
.bench .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.bench .lbl b{font-weight:500;font-size:18px} .bench .lbl span{color:var(--mut);font-size:14px}
.seats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}
.seat{border-radius:18px;padding:16px 12px 14px;text-align:center;border:1px solid transparent;transition:border-color .4s,background .4s,opacity .4s;opacity:.45}
.seat.on{opacity:1;border-color:#2a2f36;background:#12151b}
.seat .who{width:40px;height:40px;margin:0 auto 10px;position:relative;display:block}
.seat .who i{position:absolute;left:50%;border-radius:50%;background:var(--c);transform:translateX(-50%)}
.seat .who i:first-child{top:0;width:16px;height:16px}
.seat .who i:last-child{bottom:0;width:32px;height:18px;border-radius:16px 16px 6px 6px}
.seat.on .who i{box-shadow:0 0 16px var(--c)}
.seat .no{font-size:11px;letter-spacing:.2em;color:var(--dim)}
.seat b{display:block;font-weight:500;font-size:16px;margin-top:2px}
.seat small{display:block;color:var(--mut);font-size:13px;line-height:1.35;margin-top:6px}
.mgrid{display:grid;grid-template-columns:1.25fr .95fr;gap:28px;margin-top:28px;align-items:start}
.row{display:grid;grid-template-columns:1fr 230px;align-items:center;gap:0}
.phase{display:flex;align-items:baseline;gap:12px;margin:14px 0 2px;padding-left:64px}
.phase:first-of-type{margin-top:0}
.phase b{font-weight:500;font-size:22px;letter-spacing:-.02em}
.phase span{font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.lane{display:flex;align-items:center;gap:10px;padding-left:6px;min-height:40px;opacity:.55;transition:opacity .4s}
.lane .arr{flex:none;width:34px;height:2px;position:relative;background:linear-gradient(90deg,var(--c,#555),transparent)}
.lane .arr::before{content:"";position:absolute;left:-1px;top:-4px;width:8px;height:8px;border-left:2px solid var(--c,#555);border-bottom:2px solid var(--c,#555);transform:rotate(45deg)}
.lane .av{display:flex}
.lane .av i{width:22px;height:22px;border-radius:50%;position:relative;margin-left:-5px;background:#0c0f14;border:2px solid #0c0f14}
.lane .av i:first-child{margin-left:0}
.lane .av i::before{content:"";position:absolute;left:50%;top:2px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--c)}
.lane .av i::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:7px;margin-left:-7px;border-radius:7px 7px 2px 2px;background:var(--c)}
.lane span{font-size:14px;color:#c9cec9;line-height:1.2;white-space:nowrap}
.lane.on,.lane.hit{opacity:1}
.lane.hit .arr{background:linear-gradient(90deg,var(--c),rgba(255,255,255,.08))}
.lane.hit .arr::after{content:"";position:absolute;top:-3px;right:0;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c),0 0 20px var(--c);animation:shoot .7s ease-in infinite}
@keyframes shoot{0%{right:0;opacity:0}20%{opacity:1}100%{right:calc(100% - 4px);opacity:1}}
.lane.hit .av i{animation:bob .7s ease-in-out infinite}
.lane.hit .av i:nth-child(2){animation-delay:.08s}.lane.hit .av i:nth-child(3){animation-delay:.16s}.lane.hit .av i:nth-child(4){animation-delay:.24s}.lane.hit .av i:nth-child(5){animation-delay:.32s}
@keyframes bob{50%{transform:translateY(-4px)}}
.lane.hit .av i::before,.lane.hit .av i::after{box-shadow:0 0 10px var(--c),0 0 18px var(--c)}
.lane.on .av i::before,.lane.on .av i::after{box-shadow:0 0 8px var(--c)}
.seat.hit{opacity:1;border-color:var(--c);background:#13171d;animation:seatp .7s ease-in-out infinite}
@keyframes seatp{50%{box-shadow:0 0 26px -6px var(--c)}}
.pipe{position:relative;display:flex;flex-direction:column;gap:10px}
/* the grey line and its red → green fill now run inside each column: .rows::before and .rows .fillline (21 Sep 2026) */
.st{position:relative;display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--sur);color:var(--fg);text-align:left;width:100%;transition:border-color .35s,background .35s,transform .35s}
.st:hover{border-color:#2a2f36}
.st.gate{border-style:dashed}
.st .ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:#12151b;border:1px solid #20252c;position:relative;z-index:1;transition:background .35s,border-color .35s}
.st .ic svg{width:20px;height:20px;fill:none;stroke:#9aa1a8;stroke-width:1.6;transition:stroke .35s}
.st b{font-weight:500;font-size:18px;display:block}
.st .nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.st .nm small{font-size:13.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st .tag{margin-left:auto;height:auto;border:0;background:none;padding:0;font-size:11px;letter-spacing:.08em;color:var(--dim)}
.st.sel{border-color:#dfe3df;background:#12151b;transform:translateX(6px)}
.st.passed .ic{border-color:rgba(34,197,94,.45)} .st.passed .ic svg{stroke:var(--green)}
.st.gate.wait .ic{border-color:rgba(225,6,0,.5)} .st.gate.wait .ic svg{stroke:var(--red)}
.st.gate.passed{border-color:rgba(34,197,94,.35)}
.st.review{border-color:var(--rc,#e10600)!important;box-shadow:0 0 0 1px var(--rc,#e10600),0 0 30px -6px var(--rc,#e10600)}
.detail{position:sticky;top:96px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#0f1218,#0a0d12);padding:32px;min-height:360px;display:flex;flex-direction:column}
.detail .k{font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.detail h3{font-weight:500;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;margin:10px 0 12px;color:#fff}
.detail p{color:#c3c8c4;font-size:18px;line-height:1.55;margin:0}
.ex{margin-top:20px;border-radius:16px;background:#0a0d12;border:1px solid #1d2229;padding:16px 18px}
.ex span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.ex p{white-space:pre-line;margin:8px 0 0;font-size:16px;color:#dfe3df;line-height:1.55}
.detail .state{margin-top:auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pill{font-size:12px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;color:var(--mut)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--dim));box-shadow:0 0 8px var(--c,transparent)}
.run .nxface{min-width:250px}

/* ---------- footer: the wordmark lit green, the line in the middle ---------- */
footer{position:relative;border-top:1px solid var(--line);padding:72px 0 0;overflow:hidden}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:24px;padding-bottom:64px}
.fcols .h{margin:0 0 14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);font-weight:500}
.fcols ul{list-style:none;margin:0;padding:0} .fcols li{margin:8px 0}
.fcols a{font-size:15px;color:#c9ccd2} .fcols a:hover{color:var(--fg)}
.fcols .mark{margin-bottom:12px} .fcols .fline{color:var(--mut);font-size:14px;max-width:280px;margin:0}
.fm{position:relative;text-align:center;font-weight:600;font-size:clamp(58px,13.6vw,214px);line-height:.86;letter-spacing:-.035em;user-select:none;margin:0;height:.8em;overflow:hidden;cursor:default}
.fm .o,.fm .l,.fm .s{position:absolute;left:0;right:0;top:0;white-space:nowrap}
.fm .o{color:rgba(255,255,255,.14);-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14)}
.fm .s{color:var(--green);opacity:.35;-webkit-mask:linear-gradient(90deg,transparent calc(var(--sw) - 28%),black var(--sw),transparent calc(var(--sw) + 28%));mask:linear-gradient(90deg,transparent calc(var(--sw) - 28%),black var(--sw),transparent calc(var(--sw) + 28%));animation:sweep 9s linear infinite}
.fm .l{color:var(--green);-webkit-mask:radial-gradient(460px 460px at var(--fx) var(--fy),black 0%,rgba(0,0,0,.55) 30%,transparent 68%);mask:radial-gradient(460px 460px at var(--fx) var(--fy),black 0%,rgba(0,0,0,.55) 30%,transparent 68%);filter:drop-shadow(0 0 24px rgba(34,197,94,.35))}
.fm i{font-style:normal;font-weight:400;letter-spacing:.06em;font-size:.72em;margin-left:.22em}
@keyframes sweep{from{--sw:-30%}to{--sw:130%}}
.fbot{display:flex;justify-content:center;align-items:center;text-align:center;gap:20px;padding:22px 0 26px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.fbot p{margin:0}
.fbot .status{display:none;align-items:center;gap:8px} .fbot .status i{width:7px;height:7px;border-radius:50%;background:var(--green)} html.status-live .fbot .status{display:inline-flex}

/* ---------- phone ---------- */
@media (max-width:1024px){.fcols{grid-template-columns:1fr 1fr 1fr}.fcols>div:first-child{grid-column:1/-1}.g4{grid-template-columns:1fr 1fr}.tiers.n5,.tiers-row.g5,.tiers.n4,.tiers-row.g4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  section{padding:88px 0} section.hero{padding:0} .hero .wrap{padding-top:64px}
  .hdr .wrap{grid-template-columns:auto 1fr auto;height:64px} .nav{display:none} .hdr .right .kcta{display:none}
  .menu-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent} .menu-btn .i{width:20px;height:20px;fill:none;stroke:var(--fg);stroke-width:1.6}
  .g2,.g3,.g4,.g5,.plans,.steps,.begin .g2,.who,.tiers,.tiers-row{grid-template-columns:1fr}
  .fan{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 24px 12px;margin:0 -24px;perspective:none}
  .fan .card{flex:0 0 84%;scroll-snap-align:center;--ry:0deg!important;--tz:0px!important}
  .rail{grid-template-columns:1fr;gap:36px} .rail::before,.rail::after{display:none}
  .stage{--W:min(300px,84vw)}
  .jobs{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px} .jtrack{transform:none!important;perspective:none} .job{scroll-snap-align:center;transform:none!important;flex-basis:230px;height:372px} .job .shot{height:138px}
  .ldoors,.ldoors.three{grid-template-columns:1fr;max-width:none} .vdoor{padding:20px 16px 16px}
  .strip{grid-template-columns:1fr}
  .book{width:92vw;aspect-ratio:.95} .page{padding:34px 14px 30px;font-size:13px} .page h3{font-size:20px;margin:0 0 10px} .page .big{font-size:64px} .page .bt{font-size:14px} .base.last{gap:12px} .who-l img{width:48px;height:48px} .who-l b{font-size:15px} .base .quote{font-size:14px} .base .sig{width:110px} .base .start{height:38px;padding:0 14px;font-size:13px} .bookstage .head{margin-bottom:18px} .bookstage .lead{display:none}
  .begin .side{position:static} .begin .g2{gap:40px} .path{height:auto;margin-top:28px} .path svg{display:none} .node{position:static;width:auto;margin-bottom:20px} .node.c{flex-direction:row;width:auto} .node.c p{text-align:left}
  .form{padding:26px 22px 24px} .wiz{min-height:0}
  .mgrid{grid-template-columns:1fr} .seats{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;scrollbar-width:none} .row{grid-template-columns:1fr} .lane{padding-left:64px;min-height:0;margin:6px 0 4px} .lane:empty{display:none} .lane .arr{width:16px;transform:rotate(90deg);margin:0 4px} .detail{position:static}
  .fcols{grid-template-columns:1fr 1fr}
  .fm .l{display:none} .fm .s{opacity:.6}
  /* 21 Oct 2026 (Leonard: on the phone it "doesn't become green as if I press and move"): a finger on the word shows the
     light under it (js/motion.js sets .fm-touch and --fx/--fy); the circle is the computer's, scaled to the phone's word */
  .fm.fm-touch .l{display:block;-webkit-mask:radial-gradient(2.2em 2.2em at var(--fx) var(--fy),black 0%,rgba(0,0,0,.55) 30%,transparent 68%);mask:radial-gradient(2.2em 2.2em at var(--fx) var(--fy),black 0%,rgba(0,0,0,.55) 30%,transparent 68%)}
  .rl{right:12px;bottom:12px}
}

/* ---------- motion off: the finished state, still ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero-main .hk,.hero-main .hl,.hero-main h1,.hero-main .lead,.hero-main .btns,.hero-still,.screen video,.begin h2,.sky .b{opacity:1!important;transform:none!important;filter:none!important;rotate:none!important;scale:1!important}
  /* the book is not left standing open at its last page here: it turns with the scroll like everywhere else (Leonard, 23 Sep 2026) */
  .fan .card{--ry:0deg!important} .rail{--p:1} .path svg path{stroke-dashoffset:0} .jtrack{transform:none!important} #field{display:none}
  #path.run1 path.trail.s1,#path.run2 path.trail.s2{opacity:1;stroke-dashoffset:0}
}

/* ---------- the 1 → 2 → 3 on a phone (21 Oct 2026, Leonard: "the 1-2-3 doesn't work" on the phone) ----------
   The computer draws its line in the SVG. A phone stacks the three numbers, so the SVG is hidden and there was no line at
   all. Here 1 and 2 each get a piece of line from under their circle down to the next circle: a grey track that draws
   itself when the path comes into view (.in, like the computer's), and the green light that runs down it after Send
   (.run1, .run2: the same classes and times as the computer). 3 stays lit at the end (.at3, the rule above). With motion
   off the same steps happen, each piece lit at once (the last lines). The computer is not touched (max-width 860). */
@media (max-width:860px){
  .path .node.a,.path .node.b,.path .node.c{position:relative;left:auto;top:auto}
  .path .node.a::before,.path .node.b::before,.path .node.a::after,.path .node.b::after{content:"";position:absolute;left:22px;top:52px;width:2px;border-radius:999px;pointer-events:none}
  .path .node.a::before,.path .node.b::before{bottom:-14px;background:rgba(255,255,255,.2);transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease) .2s,background .8s}
  .path.in .node.a::before,.path.in .node.b::before{transform:scaleY(1)}
  html.done .path .node.a::before,html.done .path .node.b::before{background:rgba(34,197,94,.5)}
  .path .node.a::after,.path .node.b::after{height:0;opacity:0;background:linear-gradient(180deg,var(--green) calc(100% - 10px),#d6ffe4);box-shadow:0 0 6px rgba(34,197,94,.55)}
  #path.run1 .node.a::after{animation:runDown 1.3s linear forwards} #path.run2 .node.b::after{animation:runDown .9s linear forwards}
  #path.at2 .node.a::after,#path.at3 .node.b::after{height:calc(100% - 38px);opacity:1;background:var(--green)}
}
@keyframes runDown{0%{opacity:1;height:0}to{opacity:1;height:calc(100% - 38px)}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  #path.run1 .node.a::after,#path.run2 .node.b::after{height:calc(100% - 38px);opacity:1}
}

/* ---------- phone, second pass (20 Sep 2026): the header fits 390 px, the ring and the job row stay inside the page ---------- */
@media (max-width:860px){
  .hdr .wrap{gap:8px} .hdr .mark .wm-b{display:none} .hdr .right{gap:10px}
  .lkey{width:34px} .lkeys .thumb{width:34px;transform:translateX(calc(var(--i)*34px))}
  #jobs-s .jobs{margin:0;padding-left:24px} #work,#jobs-s,.book-s{overflow-x:clip} .stage{overflow:hidden}
  .fm{font-size:clamp(40px,13.6vw,214px)}
}

/* ---------- the sub-page sections: the heading block is centred like every other head on the site (20 Sep 2026) ---------- */
section > .wrap > .kicker,section > .wrap > h2,section > .wrap > .h2row,section > .wrap > p.sub{text-align:center}
section > .wrap > p.sub{margin:20px auto 48px}
section > .wrap > h2:not(:has(+ p.sub)){margin-bottom:48px}
section > .wrap > .h2row{margin-bottom:48px}
@media (max-width:860px){#method{overflow-x:clip} section > .wrap > p.sub,section > .wrap > h2:not(:has(+ p.sub)),section > .wrap > .h2row{margin-bottom:32px}}

/* ---------- the line icons (the icon sheet) keep their size everywhere; the phone hero keeps the title off the emblem ---------- */
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}
@media (max-width:860px){.screen{margin:-16px auto -28px}}

/* ---------- v5 fixes, evening (20 Sep 2026): the grids are grids on their own; "Let's begin" sits beside the form ---------- */
.g2,.g3,.g4,.g5{display:grid;gap:24px}
.begin .side .lead{margin:14px 0 0;text-align:left}
.fan .card .pv .chat div{text-align:left}
.card .n + h3{margin-top:0}

/* ---------- the detector's three real findings (20 Sep 2026, evening) ---------- */
.btn.hot:hover{background:#c40500;border-color:#c40500}                                    /* white on the darker red reads 5.2:1 */
.btn.hot.kcta:hover{background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);border-color:transparent}
.wq{text-transform:none;letter-spacing:.04em;font-size:12px}                               /* a status line, not a label */
.detail h2.dt{font-weight:500;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;margin:10px 0 12px;color:#fff;line-height:1.06}

/* ---------- the evening pass 2 (20 Sep 2026): the book set like a book · the hold key in both places · the plan checklist · one button family ---------- */
.page{padding:60px 36px 44px;text-align:center}
.page .big{display:block;font:italic 400 92px/1 var(--serif);color:rgba(255,255,255,.10);letter-spacing:-.02em;margin:0}
.page .rule{margin:16px auto 20px}
.page h3{font:500 28px/1.15 var(--serif);margin:0 0 14px;letter-spacing:-.005em;color:#fff}
.page p{text-align:center;hyphens:manual;-webkit-hyphens:manual;font-size:17px;line-height:1.55;color:#d9dcd7;max-width:26ch;margin:0 auto}
.page .f p:first-of-type::first-letter,.leaf .f.page p:first-of-type::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit;font-weight:inherit}
.leaf .b.page{display:flex;flex-direction:column;justify-content:center;align-items:center}
.page .bt{margin-top:12px;font-size:21px}
.page.title h3{font-size:32px}
.base.last{padding-top:60px;text-align:left} .base .quote{hyphens:manual;-webkit-hyphens:manual;text-align:left;max-width:none;margin:0}
.hold.hold-sm{width:180px;height:190px}
.hold-sm .hbase{width:140px;height:140px;margin:-64px 0 0 -70px;border-radius:36px}
.hold-sm .key3{width:118px;height:118px} .hold-sm .key3 .side,.hold-sm .key3 .face{border-radius:26px} .hold-sm .key3 .glyph{width:50px;height:50px}
.launch .hint{margin-top:2px}
.plan hr{border:0;border-top:1px solid var(--line);margin:26px 0 18px}
.plan ul{list-style:none;margin:0;padding:0;font-size:15px;color:#c9ccd2;text-align:left}
.plan li{position:relative;padding:6px 0 6px 26px} .plan li::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:5px;border-left:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:rotate(-45deg)}
.plan li.h{color:var(--fg);font-weight:500} .plan li.h::before{border-color:var(--red)} html.done .plan li.h::before{border-color:var(--green)}
/* one button family: every red action on the site is the matte key with the red rim light (the mark only on Book a call) */
.btn.hot,.door .btn.hot,.menu .btn.hot{--dot:var(--red);position:relative;isolation:isolate;border:0;color:var(--fg);background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.6),0 14px 30px -12px rgba(0,0,0,.8);transition:box-shadow .5s var(--ease),transform .25s cubic-bezier(.2,.8,.2,1)}
.btn.hot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;background:conic-gradient(from var(--a),rgba(255,255,255,.06) 0deg,rgba(255,255,255,.5) 55deg,var(--dot) 80deg,rgba(255,255,255,.5) 105deg,rgba(255,255,255,.06) 160deg,rgba(255,255,255,.06) 360deg);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;animation:rim 10s linear infinite;transition:opacity .5s}
.btn.hot:hover,.btn.hot:focus-visible,.door .btn.hot:hover{background:linear-gradient(170deg,#1d2027 0%,#13161c 60%,#0f1217 100%);border-color:transparent;outline:0;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.6),0 18px 34px -12px rgba(0,0,0,.85),0 0 36px rgba(225,6,0,.22)}
.btn.hot:hover::before,.btn.hot:focus-visible::before{opacity:1;animation-duration:3s}
.btn.hot:active{transform:translateY(1px)}

/* ---------- the last gaps (20 Sep 2026, evening): the plain list, the road on /trust keeps the v5 card look ---------- */
ul.plain{list-style:none;margin:0;padding:0} ul.plain li{margin:6px 0}
.road{border-radius:var(--r);border:1px solid var(--line);background:var(--sur)}

/* the 3 days (SITE-PLAN D18, 21 Sep 2026): the start form on /assistant — one e-mail, one unticked box, a plain key */
.trial{max-width:560px;margin-top:var(--s5)} .trial label{display:block;margin-bottom:20px} .trial label span{display:block;font-size:13px;color:var(--mut);margin-bottom:2px}
.trial .tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer} .trial .tick input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--green);border:0} .trial .tick span{font-size:15px;color:var(--fg);margin:0}
.trial .btns{margin-top:4px} .trial .tnote{font-size:15px;color:var(--fg);margin:16px 0 0;min-height:1.2em} .trial .tnote .btn{margin-left:8px} .trial.sent .btns{display:none} .trial.sent input{color:var(--mut)}
/* "Back shortly — leave your email." (D19): the box under the chat while the model key has no credit */
.door form.back{display:flex;gap:10px;align-items:center;margin:10px 0 4px} .door form.back input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--fg);font:inherit;font-size:15px;padding:9px 16px;outline:0} .door form.back input:focus{border-color:rgba(255,255,255,.5)}

/* ---------- the method in three columns (Leonard, 21 Sep 2026, decision 7): Call | Build | Run ----------
   js/method.js builds one .col per phase. On a computer the three stand side by side and the detail sits under them, so the
   whole circuit fits one screen; on a phone they stack, as before. Each column has its own red → green line. */
.col{display:flex;flex-direction:column;min-width:0}
.col .phase{margin:0 0 14px;padding:0 0 12px 2px;border-bottom:1px solid var(--line)}
.rows{position:relative;display:flex;flex-direction:column;gap:10px}
.rows::before{content:"";position:absolute;left:37px;top:30px;bottom:30px;width:2px;background:#1a1f26}
.rows .fillline{position:absolute;left:37px;top:30px;width:2px;height:0;background:linear-gradient(var(--red),var(--green));transition:height .6s cubic-bezier(.2,.8,.2,1)}
.col .row{grid-template-columns:1fr}
.col .lane{padding-left:64px;min-height:0;margin:6px 0 0} .col .lane:empty{display:none} .col .lane .arr{width:16px;transform:rotate(90deg);margin:0 4px}
@media (min-width:861px){
  .mgrid{grid-template-columns:1fr}
  .pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
  .detail{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:36px;min-height:0;align-items:start}
  .detail .k{grid-column:1;grid-row:1} .detail .dt{grid-column:1;grid-row:2} .detail #dp{grid-column:1;grid-row:3}
  .detail .ex{grid-column:2;grid-row:1 / 5;margin-top:0} .detail .state{grid-column:2;grid-row:5;margin-top:0;padding-top:18px}
}
@media (max-width:860px){.pipe{gap:28px}}

/* ---------- the eight job cards, centred (Leonard, 21 Sep 2026, decision 6) ----------
   The row is as wide as its cards and centred in the band. When it fits the screen it stands still in the middle; when it
   is wider, js/motion.js slides it from its left edge to its right edge, centred halfway (it used to start 60 px in and
   leave the free space on the right). */
.jtrack{width:max-content;margin:0 auto}
@media (prefers-reduced-motion:reduce){.jobs{overflow-x:auto}}

/* ---------- the book, four chapters (21 Sep 2026, decision 1 of handoff 2026-09-21e; previewed as preview/book-card.html) ----------
   Every chapter is a spread: the left page opens it, the next right page explains it. The first right page is About;
   the last right page is "Done." with the green dot of a finished job. The folios are gone. */
.leaf .b.page.open{justify-content:center}
.open .ck{display:block;font:500 11px/1 Outfit,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.open .num{display:block;font:italic 400 104px/1 var(--serif);color:#f2efe6;letter-spacing:-.02em}
.open .rule{margin:18px auto 20px}
.open h3{font:500 28px/1.18 var(--serif);color:#fff;max-width:14ch;margin:0 auto}
.leaf .f.page.txt{display:flex;flex-direction:column;justify-content:center;align-items:center}
.txt p{font:400 20px/1.55 var(--serif);color:#e6e7e3;text-align:left;max-width:22ch;margin:0}
.leaf .f.page.about{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.about .ph{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line2)}
.about .nm{display:flex;flex-direction:column;align-items:center;font-family:Outfit,system-ui,sans-serif}
.about .nm b{font-size:17px;font-weight:500;color:#fff}
.about .nm em{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.about .quote{margin:6px 0 0;max-width:22ch;text-align:center;font:italic 400 19px/1.45 var(--serif);color:#e6e7e3}
.about .sig{width:140px;height:auto;filter:invert(1) brightness(1.1);mix-blend-mode:screen;opacity:.9}
.base.page.end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.end .done{display:flex;align-items:center;gap:14px;margin:0;max-width:none;font:500 56px/1 var(--serif);color:#fff}
.end .done i{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--greeng)}
.end .start{margin-top:0;align-self:center} .end .kcta{margin-top:26px;align-self:center;font-family:Outfit,system-ui,sans-serif;max-width:100%}
.open h3,.txt p,.about .quote,.page.title h3{text-wrap:pretty}
@media (max-width:860px){
  .end .kcta{margin-top:10px} .end .kcta .chev{display:none} .end .btn.hot.kcta.sm{height:auto;min-height:44px;padding:5px 14px 5px 5px;white-space:normal;font-size:13px;line-height:1.2;text-align:left} .end .kcta .well{flex:none}
  .page .rh{display:none} .page.title h3{font-size:20px} .page.title .pk{font-size:9px;letter-spacing:.2em}
  .open .ck{font-size:9px;margin-bottom:8px} .open .num{font-size:56px} .open .rule{margin:10px auto 12px} .open h3{font-size:17px}
  .txt p{font-size:14px}
  .leaf .f.page.about{gap:8px} .about .ph{width:52px;height:52px} .about .nm b{font-size:13px} .about .nm em{font-size:9px;letter-spacing:.2em}
  .about .quote{font-size:13px} .about .sig{width:92px}
  .end .done{font-size:30px;gap:8px} .end .done i{width:8px;height:8px}
}

/* ---------- the phone fix (22 Sep 2026): the closed book starts centred on a phone ----------
   Desktop keeps its closed cover right of centre (+25%). On a 390 px phone that put the cover 88 px past the right edge
   (STATE.md A52), so here the closed book shifts the other way: the cover sits in the middle, and the spread centres as it opens. */
@media (max-width:860px){.book{transform:rotateX(6deg) translateX(calc((1 - var(--o))*-25%))}}

/* the play key over the intro (23 Sep 2026): hidden while the film runs, shown only when the browser refuses to start it
   by itself — an iPhone in Low Power Mode blocks every autoplay, and then one tap starts it. */
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(10,12,16,.72);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.vplay[hidden]{display:none}
.vplay svg{width:26px;height:26px;fill:currentColor;stroke:none;margin-left:3px}

/* ---------- the cards read (27 Sep 2026, Leonard: "not structured, the worst for reading") ----------
   The step number is a small pill, not a spaced-out "0 1". Card text is the light grey, one size up. The questions on
   /book are a real list; the consent sentence under it is a small note. The Starter card starts at the same height as
   Business, so the names, prices and keys line up side by side. */
.card>.n{display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--fg);margin-bottom:18px;font-variant-numeric:tabular-nums}
.card h3{line-height:1.25;text-wrap:balance}
.card p{color:var(--txt-2);font-size:16px;line-height:1.6}
.after-steps .card h3{font-size:20px;margin-bottom:14px}
.card ul.qs{list-style:none;margin:0;padding:0}
.card ul.qs li{position:relative;padding:10px 0 10px 18px;border-top:1px solid var(--line);color:var(--txt-2);font-size:15px;line-height:1.45}
.card ul.qs li:first-child{border-top:0;padding-top:2px}
.card ul.qs li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:999px;background:var(--red)}
.card ul.qs li:first-child::before{top:10px}
.card p.note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--mut)}
#trust .card h3{font-size:20px;line-height:1.35;margin:0}
@media (min-width:861px){.plan:not(.hi) .in{padding-top:66px}}

/* ---------- the card rule (1 Oct 2026, Leonard: "text wrapping badly, uneven heights, labels and links colliding") ----------
   Measured on every card of every launch page, EN/RO/IT, at 1920/1440/1280/1024/768/390. Six faults, six rules:
   1. A label and a link never share a row. The foot of a card is a stack: the label, then the link under it.
   2. A price card is never narrower than it can read. 5 across from 1180, 4 across from 1025, 3 across from 861;
      under that 2 across, and 1 across on a phone. (The old phone rule lost to a more specific one: 3 cards of 98 px.)
   3. Cards that stand in one row share one row grid: name, price, unit, text, small line. A name on two lines moves the
      price of every card in the row, not of one card.
   4. A price is one line. "from" is a small word above the number; a long price in words is one size down.
   5. A sentence is never set in spaced capitals. Spaced capitals are for a label of one to three words.
   6. Nothing sticks out of its card and no text is cut by its edge. */
/* 1 · the door cards */
.fan .card .foot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
.fan .card .foot .tag{flex:none;white-space:nowrap}
.fan .card .foot a{display:inline;text-wrap:balance}
.fan .card .foot a::after{content:"\00a0→";display:inline;position:relative;left:0;transition:left .3s}
.fan .card .foot a:hover::after{transform:none;left:3px}
/* 6 · the small chat inside a door card starts at the top and fades out at the bottom, so no line is cut in half */
.fan .card .pv:has(.chat){place-items:start center;-webkit-mask-image:linear-gradient(#fff calc(100% - 36px),transparent);mask-image:linear-gradient(#fff calc(100% - 36px),transparent)}
.fan .card .pv .chat{margin-top:12px}
/* 2 · the price rows: columns by width (same specificity as the rules they replace, later in the file) */
.tiers-row.g3,.tiers-row.g4,.tiers-row.g5{grid-template-columns:1fr}
@media (min-width:600px){.tiers-row.g4,.tiers-row.g5{grid-template-columns:1fr 1fr} .tiers-row.g4>.tier:last-child:nth-child(odd),.tiers-row.g5>.tier:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:861px){.tiers-row.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1025px){.tiers-row.g4{grid-template-columns:repeat(4,1fr)} .tiers-row.g4>.tier:last-child:nth-child(odd){grid-column:auto}}
@media (min-width:1180px){.tiers-row.g5{grid-template-columns:repeat(5,1fr)} .tiers-row.g5>.tier:last-child:nth-child(odd){grid-column:auto}}
/* 3 · one row grid for the cards of a row, wherever the cards stand two or more across. The five lines of a card sit on
   five shared rows, so the space between two rows of cards is a margin under each card, not a gap of the grid. */
@media (min-width:600px){.tiers-row.g4,.tiers-row.g5{row-gap:0;margin-bottom:-24px} .tiers-row.g4>.tier,.tiers-row.g5>.tier{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-bottom:24px} .tiers-row.g4>.tier>.price,.tiers-row.g5>.tier>.price{align-self:end}}
@media (min-width:861px){.tiers-row.g3{row-gap:0;margin-bottom:-24px} .tiers-row.g3>.tier{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-bottom:24px} .tiers-row.g3>.tier>.price{align-self:end}}
.tiers-row>.tier{min-width:0;min-height:0}
.tiers-row>.tier>.kicker{grid-row:1;margin:0 0 12px;text-wrap:balance}
.tiers-row>.tier>.price{grid-row:2;margin:0}
.tiers-row>.tier>.unit{grid-row:3} .tiers-row>.tier>p{grid-row:4} .tiers-row>.tier>.pay{grid-row:5}
/* a card with no text under its price has no line under it either (the line belongs to the text) */
.tier>p:empty{display:none}
/* 4 · the price */
.tier .price{white-space:nowrap}
.tier .price small{display:block;font-size:13px;font-weight:400;letter-spacing:.02em;line-height:1.2;color:var(--mut);margin:0 0 6px}
.tier .price.long{white-space:normal;text-wrap:balance;font-size:26px;line-height:1.12;letter-spacing:-.02em}
.g5 .tier .price.long{font-size:22px}
/* 5 · the small line under a price card is a sentence */
.tier .pay{text-transform:none;letter-spacing:.01em;font-size:12.5px;line-height:1.5;color:var(--mut)}
/* the job cards: a heading never leaves one short word alone on its last line; a word with a hyphen stays whole (build.mjs) */
.job h3{text-wrap:balance}
.nb{white-space:nowrap}
/* 6 · a link inside a sentence is part of the sentence (the small print of the two forms: "… Privacy" took the 14 px top
   margin of a link that stands alone under a card's text, which pushed the last line of the sentence down) */
.card .fine .more{margin-top:0}
/* 6 · the form on a phone: the Next key takes the room that is left, it does not push out of the card */
@media (max-width:860px){.wnav .nx{flex:1 1 0;min-width:0} .wnav .nxface{min-width:0}}

/* ---------- "We upgrade your site" · the front office wakes up (Leonard, 1 Oct 2026) ----------
   One section, twice: short on the home page (four parts on a line, one link), whole on /services/websites.
   A part (.up-live) stands by: red dot, its small picture dim. When it comes into view it goes live (.on, js/motion.js):
   green dot, the picture plays. In a row the parts wake one after the other. The line beside the label fills
   red → green and counts what runs (--up, 0 … 1). When all of them run, the one-price strip turns green (.upg.all).
   Red acts, green runs. The pictures are drawn here, in CSS; there is no image and no third party.
   The card rule holds: the cards of a row share one row grid, nothing leaves its card, a label is one line. */
.upg .up-start{max-width:1000px;margin:0 auto}
.upg .up-rule{display:flex;align-items:center;gap:16px;margin:72px 0 24px}
.upg .up-rule .kicker{margin:0;white-space:nowrap}
.upg .up-meter,.upg .up-line{position:relative;flex:1 1 0;min-width:24px;height:1px;background:var(--line)}
.upg .up-meter::after{content:"";position:absolute;left:0;top:-.5px;height:2px;border-radius:2px;width:calc(100% * var(--up,0));background:linear-gradient(90deg,var(--red),var(--green));transition:width .7s var(--ease)}
.upg .up-run{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.upg .up-run i{width:6px;height:6px;border-radius:50%;background:var(--red);transition:background .5s,box-shadow .5s}
.upg .up-run b{font-weight:500;color:var(--fg)}
.upg.all .up-run i{background:var(--green);box-shadow:0 0 10px var(--greeng)}
/* a part: standby → live */
.up-live{transition:border-color .5s,box-shadow .5s,transform .5s var(--ease)}
.up-live.on{border-color:rgba(34,197,94,.26)}
.up-live.rst *,.up-live.rst *::before,.up-live.rst *::after{transition:none!important}
.up-live h3 .ico{transition:border-color .5s} .up-live h3 .ico .i{transition:stroke .5s}
.up-live.on h3 .ico{border-color:rgba(34,197,94,.45)} .up-live.on h3 .ico .i{stroke:var(--green)}
.up-inc.on{border-color:rgba(34,197,94,.5);box-shadow:0 24px 60px -34px rgba(34,197,94,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.tag.up-badge{height:24px;padding:0 10px;border-color:transparent;background:var(--green);color:#06210f;font-weight:600;letter-spacing:.14em;white-space:nowrap;opacity:.4;transform:scale(.94);transition:opacity .5s .25s,transform .5s var(--ease) .25s}
.up-live.on .up-badge{opacity:1;transform:none}
/* the four parts: columns by width, one row grid for the cards of a row (picture, number, name, text) */
.upg .up-offer{grid-template-columns:1fr;gap:20px}
.upg .up-offer>.card{padding:22px;min-width:0}
@media (min-width:600px){.upg .up-offer{grid-template-columns:1fr 1fr;row-gap:0;margin-bottom:-20px} .upg .up-offer>.card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;margin-bottom:20px}}
@media (min-width:1025px){.upg .up-offer{grid-template-columns:repeat(4,1fr)}}
.up-offer .card h3{display:block;margin:0 0 8px}
.up-no{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;margin:0 0 12px}
.card .up-no .n{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;letter-spacing:.14em;color:var(--mut);font-variant-numeric:tabular-nums}
.up-no .n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);transition:background .5s,box-shadow .5s}
.up-live.on .up-no .n::before{background:var(--green);box-shadow:0 0 10px var(--greeng)}
/* the small pictures */
.upg .pv{position:relative;display:block;height:148px;margin:0 0 18px;padding:14px;border-radius:var(--rs);border:1px solid var(--line);background:#07080b;overflow:hidden}
.upg .pv .u-l{display:block;height:7px;margin:0 0 9px;border-radius:4px;background:rgba(255,255,255,.16);transform-origin:left;transform:scaleX(.2);opacity:.4;transition:transform .6s var(--ease),opacity .4s}
.upg .pv .u-l1{width:62%;height:9px;background:rgba(255,255,255,.3)} .upg .pv .u-l2{width:84%} .upg .pv .u-l3{width:52%}
.on .pv .u-l{transform:none;opacity:1} .on .pv .u-l2{transition-delay:.12s} .on .pv .u-l3{transition-delay:.24s}
.m-site .u-bar{display:flex;gap:4px;margin:0 0 14px} .m-site .u-bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)}
.m-site .u-go{display:block;width:66px;height:22px;margin-top:16px;border-radius:999px;background:var(--fg);opacity:0;transform:scale(.6);transform-origin:left;transition:opacity .35s,transform .45s var(--ease)}
.on .m-site .u-go{opacity:1;transform:none;transition-delay:.5s}
.upg .pv.m-cal{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:6px}
.m-cal i,.m-cal b{border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.05);transition:background .45s,border-color .45s,color .3s,transform .45s var(--ease)}
.m-cal b{display:grid;place-items:center;font-size:11px;font-weight:600;color:transparent}
.on .m-cal .u-g{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.45);transition-delay:.7s} .on .m-cal .u-g ~ .u-g{transition-delay:.95s}
.on .m-cal b{background:var(--fg);border-color:var(--fg);color:#0a0c10;transform:scale(1.07);transition-delay:.3s}
.upg .pv.m-chat{display:flex;flex-direction:column;justify-content:center;padding:12px}
.m-chat .u-q,.m-chat .u-a{max-width:92%;padding:5px 9px;border-radius:11px;font-size:10.5px;line-height:1.35;transition:opacity .4s,transform .45s var(--ease)}
.m-chat .u-q{align-self:flex-start;background:rgba(255,255,255,.09);color:var(--txt-2);opacity:.35}
.m-chat .u-a{align-self:flex-end;margin-top:7px;background:var(--fg);color:#0a0c10;font-weight:500;opacity:0;transform:translateY(8px)}
.m-chat .u-t{align-self:flex-end;display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:9.5px;color:var(--mut);opacity:0;transition:opacity .4s}
.m-chat .u-t i{width:5px;height:5px;border-radius:50%;background:var(--green)}
.on .m-chat .u-q{opacity:1} .on .m-chat .u-a{opacity:1;transform:none;transition-delay:.5s} .on .m-chat .u-t{opacity:1;transition-delay:1s}
.m-note .u-nt{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;border:1px solid var(--line2);background:#14171d;opacity:0;transform:translateY(60%);transition:opacity .4s .35s,transform .55s var(--ease) .35s}
.m-note .u-nt svg.i{width:24px;height:24px;padding:4px;border-radius:7px;background:rgba(34,197,94,.14);stroke:var(--green)}
.m-note .u-nt b{display:block;font-size:11px;font-weight:600;line-height:1.3;color:var(--fg)} .m-note .u-nt small{display:block;margin-top:1px;font-size:9.5px;line-height:1.3;color:var(--mut)}
.on .m-note .u-nt{opacity:1;transform:none}
/* the three that also run, and the two ways in: the name and the text of a row stand on shared lines */
.upg .up-small>.card{padding:22px 24px}
.upg .up-small .card h3,.upg .up-start .card h3{font-size:19px}
@media (min-width:861px){.upg .up-small,.upg .up-start{row-gap:0} .upg .up-small>.card,.upg .up-start>.card{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}}
/* the one-price strip: it turns green when everything above runs */
.upg .up-close{max-width:none;margin-top:56px;transition:border-color .6s,box-shadow .6s}
.upg.all .up-close{border-color:rgba(34,197,94,.42);box-shadow:0 24px 60px -36px rgba(34,197,94,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.upg .up-close .kcta{justify-self:start}
.upg .up-again{margin:18px 0 0;text-align:center}
/* the home page: four parts on one line, the line fills as they wake */
.up-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:980px;margin:0 auto}
.upg .up-row>.up-meter{position:absolute;left:12.5%;right:12.5%;top:28px;height:1px}
.card.up-mini{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;text-align:center}
.card.up-mini::before{display:none}
.card.up-mini h3{display:block;margin:0;font-size:17px;line-height:1.3}
.up-mini .ico{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;border:1px solid var(--line2);background:#12151b;color:var(--txt-2);transition:border-color .5s,color .5s,box-shadow .5s,transform .5s var(--ease)}
.up-mini .ico::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--bg);box-sizing:content-box;transition:background .5s}
.up-mini .ico .i{width:22px;height:22px}
.up-mini.on .ico{border-color:rgba(34,197,94,.55);color:var(--green);box-shadow:0 0 28px -6px var(--greeng);transform:translateY(-3px)}
.up-mini.on .ico::after{background:var(--green)}
.up-more{margin:40px 0 0;text-align:center} .up-more a::after{content:"\00a0→"}
@media (max-width:700px){.up-row{grid-template-columns:1fr 1fr;row-gap:30px} .upg .up-row>.up-meter{display:none} .upg .up-rule{margin-top:56px}}

/* ---------- /about: the text beside the photo is Leonard's own message (Leonard, 1 Oct 2026: "as a message from me", in italic) ----------
   A quote, in the same italic serif as his line in the book on the home page. The small line under it is his voice too. */
.prose .msg{margin:0;padding:0}
.prose .msg p{max-width:34em;font:italic 400 24px/1.5 var(--serif);color:#e6e7e3;text-wrap:pretty}
.prose .langs{font:italic 400 18px/1.5 var(--serif)}
@media (max-width:560px){.prose .msg p{font-size:20px} .prose .langs{font-size:16px}}
/* the phone: one column, the photo first. Until 1 Oct 2026 the grid kept its 300 px photo column on a phone, so the text
   column was 0 px wide and the story stood one word per line (found on the live site, 390 px). */
@media (max-width:900px){.story-grid{grid-template-columns:minmax(0,1fr);gap:32px} .story-grid .portrait{order:-1}}

/* ---------- the contact ball (14 Oct 2026) ----------
   Built from preview/ball-2026-10-13/ball.html, the ball Leonard looked at on 13 Oct and approved as it is (STATE.md A155,
   B-14 Oct (a)). One round glass ball at the bottom of the window: the glass 56 px, its box 66 px and 24 px from the
   bottom. A press opens a track with five doors; the ball slides to the door under the pointer; the label above says the
   door's name and one line. Markup: site-build/templates.mjs (ball). Script: js/motion.js. Words: content/<lang>.json (ball).
   Every value below is the preview's but two. Left out: the preview's own bar, its two "place" buttons and the place on the
   right they switched to. One spelling differs: the mask's colour is the word black, as in the footer's masks above
   (check.mjs refuses the three-digit form in this file); it is the same colour.
   14 Oct 2026, Leonard: "it should stay on the left, and be red". The ball stands 24 px from the left edge (the track
   opens to the right, the label starts over the ball), and the glass is red, with a red ring at every point of the page
   (it no longer turns green at the end). */
.cb{--bs:#e10600;--tx:0px;position:fixed;z-index:2147483000;bottom:calc(24px + var(--kb,0px));left:24px;font:400 13px/1.3 Outfit,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#f5f6f3;-webkit-tap-highlight-color:transparent}
.cb *{box-sizing:border-box}
.cb-track{position:relative;box-sizing:content-box;height:56px;width:56px;padding:4px;border-radius:33px;border:1px solid transparent;transition:width .42s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,box-shadow .3s}
.cb.open .cb-track{width:296px;background:rgba(16,19,25,.78);border-color:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 16px 44px rgba(0,0,0,.6)}
.cb-doors{position:absolute;inset:4px;display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s}
.cb.open .cb-doors{opacity:1;pointer-events:auto;transition-delay:.14s}
.cb-door{flex:none;width:56px;height:56px;border-radius:50%;border:0;padding:0;background:transparent;color:rgba(245,246,243,.7);cursor:pointer;display:grid;place-items:center;transition:color .2s}
.cb-door:hover,.cb-door:focus-visible{color:#fff;outline:none}
.cb-door svg,.cb-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-door.on svg{opacity:0}
.cb-door.soon{color:rgba(245,246,243,.38)}
.cb-thumb{position:absolute;z-index:2;top:4px;left:4px;width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#f5f6f3;display:grid;place-items:center;transform:translateX(var(--tx));transition:transform .42s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.42),rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 52%),radial-gradient(circle at 50% 58%,#e10600 0%,#c20500 62%,#7e0300 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 -10px 16px -8px rgba(60,0,0,.55),0 0 26px -6px var(--bs),0 8px 24px rgba(0,0,0,.55)}
.cb-thumb:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cb-thumb::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--bs),transparent 28%,transparent 72%,var(--bs));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),black calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),black calc(100% - 2px));animation:cbspin 7s linear infinite;pointer-events:none}
@keyframes cbspin{to{transform:rotate(1turn)}}
.cb-mark,.cb-ico{grid-area:1/1;display:grid;place-items:center;transition:opacity .25s,transform .35s}
.cb-mark svg{width:28px;height:28px;display:block}
.cb-ico{opacity:0;transform:scale(.7)}
.cb.open .cb-mark{opacity:0;transform:scale(.7)}
.cb.open .cb-ico{opacity:1;transform:none}
.cb-label{position:absolute;bottom:calc(100% + 12px);left:0;transform:translateY(6px);white-space:nowrap;padding:8px 12px;border-radius:12px;background:rgba(16,19,25,.9);border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s;text-align:left}
.cb.open .cb-label{opacity:1;transform:none;transition-delay:.16s}
.cb-label b{display:block;font-weight:500;font-size:14px;line-height:20px;color:#f5f6f3}
.cb-label span{display:block;font-size:12px;line-height:16px;color:#9096a0}
@media (prefers-reduced-motion:reduce){.cb-thumb::before{animation:none}.cb-track,.cb-thumb{transition:none}}

/* What the real pages asked for and the preview did not have (measured 14 Oct 2026, EN, RO, IT):
   1 · the end of a page. The ball stood on the footer's last line at every width. On a page with the ball that line now
       stops 22 px above the ball's box, the same air it has above itself (24 + 66 + 22). The legal pages have no ball. */
.cb~footer .fbot{padding-bottom:112px}
/* 2 · a narrow window. The open track reached the Back to top button (28 px over at 390, 43 px at 360). Up to 480 px that
       button steps back while the track is open; from 481 px there are 17 px or more between them. */
@media (max-width:480px){.cb.open~.rl.show{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}}
/* 3 · the voice door is open. The ball hides, as the reading light does, so the call box has the bottom of the window. */
html.voice .cb{display:none}
/* 4 · the phone menu is open. It fills the window, and at 360 px the ball stood on its second button. The ball hides
       until the menu closes. */
.menu.open~.cb{display:none}
/* 5 · a very narrow phone (14 Oct 2026, measured at 320 px). The open track is 306 px wide; 24 px from the left edge its
       last door ran 5 px out of a 320 px window. Up to 340 px the ball stands 8 px from the edge, and the AI notice keeps
       its 10 px beside it (8 + 66 + 10) and its panel still starts at the ball's left edge (84 - 76). */
@media (max-width:340px){.cb{left:8px} body .dscl-root.dscl-bl{left:84px}}

/* ---------- the greeting and the AI notice (14 Oct 2026) ----------
   Leonard: "a pop up -- short sentence like Hi -- I am here to help -- from the bot assistant" and "we want to add the
   disclosura ai on this site in some way". Markup and the reasons: site-build/templates.mjs (above ball). Script:
   js/motion.js (the ball's block).
   The greeting: a bubble over the closed ball, its tail on the ball's centre (33 px into the box: 1 border + 4 padding + 28).
   It goes when the ball opens. Words: `ball.hi`.
   The AI notice: the Disclosura widget's own badge, with its own look (it is the product a client's site gets). Only its
   place is ours: beside the ball, centred on the ball's height (the box's middle is 24 + 33 = 57 px from the bottom; the
   badge is 34 px high), 10 px right of the box (24 + 66 + 10). It hides when the ball opens (the open track runs under it),
   in a voice call and under the phone menu, as the ball does. */
.cb-hi{position:absolute;bottom:calc(100% + 14px);left:0;display:flex;align-items:flex-start;width:max-content;max-width:min(280px,calc(100vw - 48px));padding:4px;border-radius:14px;background:#101319;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cb-hi::after{content:"";position:absolute;left:27px;bottom:-6px;width:10px;height:10px;background:#101319;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);transform:rotate(45deg)}
.cb-hi[hidden],.cb.open .cb-hi{display:none}
.cb-hi.in{opacity:1;transform:none}
.cb-hi-t{flex:1;border:0;background:none;padding:7px 6px 7px 10px;text-align:left;font:500 14px/20px Outfit,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#f5f6f3;cursor:pointer}
.cb-hi-t span{display:block}
.cb-hi-t span+span{color:#c9ccd1;font-weight:400}
.cb-hi-t:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:10px}
.cb-hi-x{flex:none;width:28px;height:28px;margin:3px 0 0;border:0;border-radius:50%;padding:0;background:none;color:#9096a0;cursor:pointer;display:grid;place-items:center}
.cb-hi-x:hover,.cb-hi-x:focus-visible{color:#fff;background:rgba(255,255,255,.08);outline:none}
.cb-hi-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.cb-hi{transition:none}}
body .dscl-root.dscl-bl{left:100px;bottom:40px}
/* its panel (290 px) starts at the ball's left edge, as the greeting and the label do: from the badge it ran 30 px out of a
   360 px window */
body .dscl-root.dscl-bl .dscl-panel{left:-76px}
.cb.open~.dscl-root,.menu.open~.dscl-root,html.voice .dscl-root{visibility:hidden}

/* ---------- Ask idem (14 Oct 2026) ----------
   Leonard: "an AI assistant chat that one can ask like: hi, what are idem's prices? poliecies-- all infos from the site".
   Markup and the reasons: site-build/templates.mjs (askBox). Script: js/motion.js (the ball's block). Engine: engine/ask.php.
   It opens from the greeting, over the ball, where the greeting stood: the same left edge, the same 14 px above the ball's
   box, so its bottom is 24 + 66 + 14 = 104 px from the window's bottom. Its height stops 16 px under the window's top.
   One spacing scale (4 · 8 · 12 · 16) and the ball's type (14/20 for words, 12/16 for small lines). Red acts: the send
   button is the one red thing in it. 16 px in the field, so a phone does not zoom into it. */
.ask{position:absolute;bottom:calc(100% + 14px);left:0;display:flex;flex-direction:column;width:min(380px,calc(100vw - 48px));max-height:min(540px,calc(100vh - 120px));max-height:min(540px,calc(100dvh - 120px));border-radius:16px;background:#101319;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 44px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.ask[hidden]{display:none}
.ask.in{opacity:1;transform:none}
/* The phone's keyboard (14 Oct 2026, Leonard: "assure that the mobile version works"): while the box is open, js/motion.js
   lifts the ball by the part of the window the keyboard covers (--kb, on .cb) and gives the box the height that is left
   (--vvh, with the class fit), so its top, the field and the send button stay in view. While the keyboard is up (.cb.kb)
   the ball and the AI notice step aside and the box stands 8 px over the keyboard with 16 px over its top: a phone held
   sideways has about 220 px left over its keyboard, too little for the ball's 104 px under the box. The ball comes back
   with the keyboard's going. */
.ask.fit{max-height:min(540px,calc(var(--vvh) - 120px))}
.cb.kb .cb-track{visibility:hidden}
.cb.kb .ask{bottom:-16px}
.cb.kb .ask.fit{max-height:min(540px,calc(var(--vvh) - 24px))}
.cb.kb .ask-log{min-height:0}
.cb.kb~.dscl-root{visibility:hidden}
.cb.asking .cb-hi,.cb.asking .cb-label{display:none}
.ask button,.ask input{font-family:inherit}
.ask-h{flex:none;display:flex;align-items:center;gap:8px;padding:12px 8px 12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.ask-h b{font-weight:500;font-size:15px;line-height:20px;color:#f5f6f3}
.ask-h i{font-style:normal;font-size:11px;line-height:16px;letter-spacing:.06em;padding:0 6px;border-radius:6px;border:1px solid rgba(255,255,255,.22);color:#c9ccd1}
.ask-x{flex:none;margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;padding:0;background:none;color:#9096a0;cursor:pointer;display:grid;place-items:center}
.ask-x:hover,.ask-x:focus-visible{color:#fff;background:rgba(255,255,255,.08);outline:none}
.ask-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ask-log{flex:1 1 auto;min-height:48px;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px}
.ask-m{margin:0;max-width:92%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere}
.ask-m.bot{align-self:flex-start;background:rgba(255,255,255,.06);color:#f5f6f3;border-top-left-radius:4px}
.ask-m.me{align-self:flex-end;background:#2a2f3a;color:#f5f6f3;border-top-right-radius:4px}
.ask-m.wait{color:#9096a0;animation:askwait 1.4s ease-in-out infinite}
@keyframes askwait{50%{opacity:.45}}
.ask-more{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px;white-space:normal}
.ask-more span{font-size:12px;line-height:16px;color:#9096a0}
.ask-more a{color:#f5f6f3;text-decoration:underline;text-underline-offset:3px}
.ask-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;white-space:normal}
.ask-go a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:18px;border:1px solid rgba(255,255,255,.24);color:#f5f6f3;text-decoration:none;font-size:13px;line-height:16px}
.ask-go a:hover,.ask-go a:focus-visible{border-color:#fff;outline:none}
/* the three questions stand inside the log, under the first message, and scroll with it (14 Oct 2026): below the log they
   took up to 84 px of a box that a phone held sideways has 270 px for, and the field ran out under the box */
.ask-chips{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.ask-chips[hidden]{display:none}
.ask-chips button{border:1px solid rgba(255,255,255,.22);background:none;color:#f5f6f3;border-radius:16px;padding:6px 12px;font-size:13px;line-height:18px;cursor:pointer;text-align:left}
.ask-chips button:hover,.ask-chips button:focus-visible{border-color:#fff;outline:none}
.ask-f{flex:none;display:flex;gap:8px;padding:12px 12px 8px 16px;border-top:1px solid rgba(255,255,255,.1)}
.ask-f input{flex:1;min-width:0;height:40px;border-radius:20px;border:1px solid rgba(255,255,255,.18);background:#0a0c10;color:#f5f6f3;padding:0 14px;font-size:16px;line-height:20px}
.ask-f input::placeholder{color:#7d838d}
.ask-f input:focus{outline:none;border-color:#fff}
.ask-f button{flex:none;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:#e10600;color:#fff;display:grid;place-items:center;cursor:pointer}
.ask-f button:disabled{opacity:.5;cursor:default}
.ask-f button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ask-f button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ask-note{flex:none;margin:0;padding:0 16px 12px;font-size:11px;line-height:16px;color:#7d838d}
@media (prefers-reduced-motion:reduce){.ask{transition:none}.ask-m.wait{animation:none}}
.ask-demo{display:block;margin-top:8px;color:#f5f6f3;text-decoration:underline;text-underline-offset:3px}

/* ---------- the bot and the green ball (14 Oct 2026) ----------
   Leonard: "have the idem logo look like grok bot that moves its eyes where the mouse goes -- just one eye ... the green
   and red", "the ball once pressed should become green", then "the 'eye' shoud be where the is the '.' from idem". The
   ball's mark is the logo itself (templates.mjs, BALL_MARK); its dot is the eye. 38 px (was 28) so the eye reads: the dot is
   7 px. Red ball, green dot while it waits; green ball, red dot once pressed or while the chat is open: red acts, green
   runs. The dot and its pupil move by js/motion.js (style.transform, in the SVG's own units). */
.cb-mark svg.bot{width:38px;height:38px}
.bot-eye{transform-box:fill-box;transform-origin:center;transition:transform .09s ease-in}
.bot-eye.blink{transform:scaleY(.1)}
.bot-iris,.bot-pupil{transition:transform .14s ease-out}
.bot-ir{fill:#22c55e;transition:fill .3s}
.cb.asking .bot-ir{fill:#e10600}
.cb.open,.cb.asking{--bs:#22c55e}
.cb.open .cb-thumb,.cb.asking .cb-thumb{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.42),rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 52%),radial-gradient(circle at 50% 58%,#22c55e 0%,#16a34a 62%,#0a5226 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 -10px 16px -8px rgba(0,50,15,.55),0 0 26px -6px var(--bs),0 8px 24px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.bot-eye,.bot-iris,.bot-pupil,.bot-ir{transition:none}}