/* nuai.co.za — the shell (WP-SITE-EVERY-INDUSTRY · S8, 29 Oct 2026). Generated pages load the four faces from Google Fonts, then this.
   His brief (🧑 D-605 · D-606 · D-633): white first with a dark-mode button; the landing page's play — the icons' palette, Inter Tight over Inter,
   Caveat handwriting, the marker, the drawn underline, the brush stroke — and MORE of it: taped screenshots, sticky notes, rubber stamps,
   doodles, dot-grid and paper grain, dark-green statement bands for contrast. Layout: one 1180px column, full-width bands, each band its own
   texture; the apps as a tile board; an app page as a hero, its screen taped to the page, then the notes around it.
   Pages: never hand-edit — docs/WP-SITE-EVERY-INDUSTRY/s8_site/build.js writes them. */
:root{
  /* the icons' own four (D-605) + two added for the play (D-633) */
  --green:#3fae7c; --gold:#f2b33d; --coral:#f2704e; --sky:#3aa6dd; --berry:#d24f8c; --grape:#7b61d1;
  /* the same hues deep enough to be text */
  --green-ink:#1d7a50; --gold-ink:#8a5a00; --coral-ink:#b43f1d; --sky-ink:#1b6f9c; --berry-ink:#a32c66; --grape-ink:#5a3fb3;
  --paper:#ffffff; --paper-2:#faf7f0; --paper-3:#f3efe4;
  --ink:#15231d; --ink-2:#4a5852; --ink-3:#76837c; --line:#e5e0d4; --dot:#d9d3c4;
  --forest:#10362a; --forest-2:#174636; --on-forest:#f4efe2; --on-forest-2:#bccdc2;
  --icon-ink:#173f33;
  --mark-yellow:#ffd45e; --mark-mint:#a6e8c9; --mark-pink:#ffbfd6; --mark-sky:#b4e0f7;
  --note:#fff0a3; --note-ink:#3a3000; --tape:rgba(242,179,61,.55); --tape-2:rgba(58,166,221,.42);
  --shadow:rgba(21,35,29,.14); --shadow-2:rgba(21,35,29,.08);
  --grain: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 .08  0 0 0 0 .14  0 0 0 0 .11  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.07'/></svg>");
  --display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;
  --wide:1180px;
  color-scheme:light;
}
/* the site opens white for every visitor (🧑 D-605); dark only when the visitor presses the button. The page sets its OWN attribute,
   data-site-theme (🧑 S8c, FR-1235): claude.ai's preview window sets data-theme from the viewer's own setting on every page it opens, and the
   site turned dark on each new page after he chose day — measured with S8C-MEASURE.js --viewer. */
:root[data-site-theme="dark"]{
  --green-ink:#62d29b; --gold-ink:#f6c65f; --coral-ink:#ff9273; --sky-ink:#71c6f0; --berry-ink:#f27db3; --grape-ink:#ad95f2;
  --paper:#0e1713; --paper-2:#131e19; --paper-3:#18251f;
  --ink:#eef1ea; --ink-2:#adbab2; --ink-3:#7f8d86; --line:#26342d; --dot:#2a3a32;
  /* the statement bands KEEP their deep green at night (🧑 29 Oct, FR-1233 — S8's cream bands "look still day mode"): the page around them
     darkens, the band stays the brand's green, a hairline marks its edges (below) */
  --icon-ink:#f4f1ea;
  --mark-yellow:rgba(255,212,94,.42); --mark-mint:rgba(98,210,155,.34); --mark-pink:rgba(242,125,179,.34); --mark-sky:rgba(113,198,240,.34);
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.3);
  --grain: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 .95  0 0 0 .45 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.08'/></svg>");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%;display:block}
a{color:var(--green-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--coral-ink)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
p{margin:0}
ul{margin:0}
.wrap{max-width:var(--wide);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the drawn marks (every one hand-made here, never a picture) ---------- */
.hl,.ul,.brush,.circ{position:relative;display:inline-block;isolation:isolate;white-space:nowrap}
.hl-mark{position:absolute;left:-5%;width:110%;bottom:.04em;height:.8em;z-index:-1;fill:var(--mark-yellow)}
.hl.mint .hl-mark{fill:var(--mark-mint)} .hl.pink .hl-mark{fill:var(--mark-pink)} .hl.sky .hl-mark{fill:var(--mark-sky)}
.ul-mark{position:absolute;left:0;width:100%;bottom:-.32em;height:.42em;fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round}
.ul.coral .ul-mark{stroke:var(--coral)} .ul.sky .ul-mark{stroke:var(--sky)} .ul.gold .ul-mark{stroke:var(--gold)}
.brush-mark{position:absolute;left:-3%;width:106%;bottom:-.62em;height:.74em;fill:var(--coral);overflow:visible}
.brush-mark .bristle{fill:none;stroke:var(--paper);stroke-width:1.2;stroke-linecap:round;opacity:.85}
.circ-mark{position:absolute;left:-12%;top:-22%;width:124%;height:144%;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;z-index:-1;overflow:visible}
.draw path{stroke-dasharray:1;stroke-dashoffset:0}
/* 🧑 D-637 (S8b): the drawn marks draw themselves ONCE, as they come into view. `rv-on` is set in the page's head only where the browser has
   the observer and the visitor has not asked for less motion (and taken off again if site.js never runs) — without it every mark is simply drawn. */
.rv-on .draw path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s .12s cubic-bezier(.6,.1,.3,1)}
.rv-on .draw.in path,.rv-on .in .draw path{stroke-dashoffset:0}
.rv-on .hl .hl-mark{transform:scaleX(0);transform-origin:left center;transition:transform .7s .1s cubic-bezier(.6,.1,.3,1)}
.rv-on .hl.in .hl-mark{transform:scaleX(1)}
.rv-on .brush .brush-mark{clip-path:inset(0 100% 0 0);transition:clip-path .65s .2s cubic-bezier(.6,.1,.3,1)}
.rv-on .brush.in .brush-mark{clip-path:inset(0 0 0 0)}
.hand{font-family:var(--hand);font-weight:700;line-height:1.05;letter-spacing:0}
.doodle{display:inline-flex;align-items:flex-start;gap:6px;font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.5vw,28px);line-height:1.02;color:var(--green-ink);transform:rotate(-3deg);text-align:left}
.doodle svg{width:46px;height:40px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.spark{position:absolute;width:26px;height:26px;pointer-events:none;fill:var(--gold)}
.squig{display:block;width:120px;height:14px;fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);padding:13px 20px;border-radius:999px;border:2px solid var(--ink);color:var(--ink);background:var(--paper);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--sky);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sky)}
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--gold)}
.btn.primary:hover{color:var(--paper);box-shadow:5px 5px 0 var(--gold)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1.5px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;min-height:68px;padding-block:8px}
.brand{display:inline-flex;align-items:baseline;gap:0;font:800 27px/1 var(--display);letter-spacing:-.04em;color:var(--ink);text-decoration:none;position:relative}
.brand:hover{color:var(--ink)}
.brand b{font-weight:800;color:var(--green-ink)}
/* 🧑 29 Oct: the sparkle IS the dot of the i (the logo, and "business" in the headline) — a dotless ı with the gold sparkle where its dot was */
.idot{position:relative;display:inline-block}
/* placed by MEASURE (S8-IDOT.js, both fonts, both sizes — his close-up 29 Oct: "still a little missalighen"): the real dot's centre sits at
   57.5–61.6% of the ı's box (the tight letter-spacing narrows the box on its right) and 0.165–0.185em below its top; the stem starts at
   0.32–0.36em. The sparkle (its points reach 0.4375 of its height from its centre) is centred there at 0.3em tall, so its point clears the stem
   the way a dot does — S8-IDOT.js --verify measures the gap and the centring on the built page. */
.idot .spark{position:absolute;left:59%;top:.01em;width:.3em;height:.3em;transform:translateX(-50%);fill:var(--gold)}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{font:500 15px/1 var(--sans);color:var(--ink-2);text-decoration:none;padding:10px 11px;border-radius:999px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--paper-3)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.mode{display:inline-flex;align-items:center;gap:7px;font:500 14px/1 var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer}
.mode:hover{border-color:var(--ink-3)}
.mode svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode .moon{display:inline} .mode .sun{display:none}
:root[data-site-theme="dark"] .mode .moon{display:none} :root[data-site-theme="dark"] .mode .sun{display:inline}
.top .btn{padding:10px 16px;font-size:14px}
/* 🧑 S8c (FR-1242 · D-645): the bar slides away on the way down and is back on the way up (site.js); a day's stamped card rises with it */
.top{transition:transform .22s ease}
.top.top-off{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.top{transition:none}}
.menu-btn{display:none;font:600 14px/1 var(--sans);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer}
.m-nav{border-top:1.5px solid var(--line);padding-block:10px 16px;display:grid;gap:2px}
.m-nav[hidden]{display:none}
@media (min-width:1061px){.m-nav{display:none}}
.m-nav a{font:600 18px/1.2 var(--display);color:var(--ink);text-decoration:none;padding:11px 4px;border-bottom:1px dashed var(--line)}
@media (max-width:1060px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:560px){.top .btn{display:none}.mode .mode-txt{display:none}.mode{padding:9px 10px}}

/* ---------- bands (each its own texture) ---------- */
.band{position:relative;padding-block:clamp(56px,8vw,104px)}
.band.grain{background:var(--paper) var(--grain)}
.band.cream{background:var(--paper-2) var(--grain)}
.band.dots{background-color:var(--paper);background-image:radial-gradient(circle,var(--dot) 1.15px,transparent 1.5px);background-size:22px 22px}
.band.forest{--accent-on:var(--gold);background:var(--forest) var(--grain);color:var(--on-forest)}
:root[data-site-theme="dark"] .band.forest{box-shadow:inset 0 1px 0 rgba(244,239,226,.07),inset 0 -1px 0 rgba(244,239,226,.07)}
.band.forest h2,.band.forest h3{color:var(--on-forest)}
.band.forest a:not(.btn){color:var(--on-forest)}
.band.forest .eyebrow{color:var(--on-forest-2)}
.band.forest::after{content:"";position:absolute;right:0;top:0;width:min(46vw,420px);height:min(46vw,420px);pointer-events:none;opacity:.22;
  background-image:radial-gradient(circle,var(--gold) 2.2px,transparent 2.6px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 70%)}
.band-head{display:grid;gap:12px;max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.band-head.center{margin-inline:auto;text-align:center;justify-items:center}
.band-head h2{font-size:clamp(32px,4.6vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.035em}
.band-head p{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:62ch}
.band.forest .band-head p{color:var(--on-forest-2)}
.aside-note{font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1;color:var(--coral-ink);display:inline-block;transform:rotate(-4deg)}
/* 🧑 S8c (FR-1236): the board's note in two lines, the pick-one line back above the five on the way, the drawn arrow on its right pointing down
   to the board (the hero's "Start with one app." arrow, turned to face the other way) */
.aside-note.two{display:inline-flex;align-items:flex-end;gap:2px;text-align:left;line-height:1.05;margin-top:6px}
.aside-note.two svg{width:54px;height:47px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1) translateY(16px)}

/* ---------- the home's hero ---------- */
.hero{position:relative;padding-block:clamp(48px,7vw,92px) clamp(40px,6vw,72px);text-align:center;overflow:hidden}
.hero-in{position:relative;display:grid;justify-items:center;gap:14px}
.made{display:inline-flex;align-items:center;gap:9px;font:500 14px/1.3 var(--sans);color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line);border-radius:999px;padding:6px 15px 6px 12px;margin-bottom:6px}
.made-dots{display:inline-flex;gap:3px}
.made-dots i{display:block;width:8px;height:8px;border-radius:50%}
.made-dots i:nth-child(1){background:var(--green)}.made-dots i:nth-child(2){background:var(--gold)}.made-dots i:nth-child(3){background:var(--coral)}
.hero .l1{font:800 clamp(40px,6vw,76px)/1.02 var(--display);letter-spacing:-.045em;color:var(--ink)}
.hero .l2{font:500 clamp(21px,3vw,34px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink-2);margin-top:4px}
.hero .l3{font:700 clamp(19px,2.5vw,28px)/1.2 var(--display);letter-spacing:-.02em;color:var(--green-ink);margin-bottom:12px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px}
.hero .doodle{margin-top:10px}
/* two small sparkles stay; the six app stickers left on his word (29 Oct: "a little busy") */
.hero .sp-2{right:27%;top:36%;width:18px;height:18px;fill:var(--sky)} .hero .sp-3{left:22%;top:70%;width:16px;height:16px;fill:var(--coral)}
@media (max-width:900px){.hero .sp-2,.hero .sp-3{display:none}}

/* ---------- the app board ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.fchip{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 15px;cursor:pointer}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--fam,var(--ink-3))}
.fchip:hover{border-color:var(--ink-3)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:26px 10px}
.tile{display:grid;justify-items:center;align-content:start;gap:9px;text-decoration:none;color:var(--ink);padding:8px 4px 10px;border-radius:18px;transition:background .15s ease}
.tile:hover{color:var(--ink);background:color-mix(in srgb,var(--paper-3) 70%,transparent)}
.tile .ico{width:68px;height:68px;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.tile:hover .ico{transform:translateY(-4px) rotate(-5deg)}
.ico svg{width:100%;height:100%;color:var(--icon-ink);display:block}
.tile-name{font:600 14px/1.25 var(--sans);text-align:center}
.tile[hidden]{display:none}
.stamp{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:4px 7px 3px;border:1.5px solid currentColor;border-radius:4px;color:var(--gold-ink);transform:rotate(-4deg);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.stamp.soon{color:var(--sky-ink);background:color-mix(in srgb,var(--sky) 12%,transparent);transform:rotate(3deg)}
.stamp.planned{color:var(--berry-ink);background:color-mix(in srgb,var(--berry) 10%,transparent);transform:rotate(-2deg)}
.stamp.live{color:var(--green-ink);background:color-mix(in srgb,var(--green) 12%,transparent)}
.board-note{display:flex;gap:10px;align-items:flex-start;justify-content:center;margin-top:30px;font-size:15px;color:var(--ink-2);text-align:center}
.board-note svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--sky-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ten industries: two rows of five, never eight and an orphan two */
@media (min-width:700px){.ind-tiles{grid-template-columns:repeat(5,minmax(0,1fr));max-width:820px;margin-inline:auto}}
/* 🧑 29 Oct: the dots only on the industries strip, fading out toward the middle so they sit on its outer edges (the board stays plain) */
.band.edge-dots{background:var(--paper);overflow:hidden}
.band.edge-dots::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot) 1.3px,transparent 1.7px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 50%,transparent 52%,#000 100%);mask-image:radial-gradient(ellipse 72% 66% at 50% 50%,transparent 52%,#000 100%)}
.band.edge-dots > .wrap{position:relative}
@media (max-width:560px){.tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:20px 6px}.tile .ico{width:58px;height:58px}.tile-name{font-size:13px}}
@media (prefers-reduced-motion:reduce){.tile .ico,.btn{transition:none}.tile:hover .ico{transform:none}}

/* ---------- taped screenshots, polaroids, sticky notes ---------- */
.shot{position:relative;margin:0;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 22px 46px -18px var(--shadow),0 2px 0 var(--shadow-2);transform:rotate(var(--tilt,-1deg))}
.shot .frame-bar{display:flex;gap:6px;padding:2px 4px 10px}
.shot .frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.shot .frame-bar i:nth-child(1){background:var(--coral)}.shot .frame-bar i:nth-child(2){background:var(--gold)}.shot .frame-bar i:nth-child(3){background:var(--green)}
.shot img{width:100%;height:auto;border-radius:6px;background:var(--paper-3)}
.shot .night{display:none}
/* a picture with no night version (the shop window has no night look) stays up at night */
:root[data-site-theme="dark"] .shot.has-night .day{display:none}
:root[data-site-theme="dark"] .shot.has-night .night{display:block}
.tape{position:absolute;width:120px;height:30px;background:var(--tape);top:-14px;left:50%;margin-left:-60px;transform:rotate(-3deg);
  clip-path:polygon(2% 10%,8% 0,15% 12%,23% 2%,31% 10%,40% 0,50% 9%,60% 1%,70% 11%,80% 2%,90% 10%,98% 0,100% 90%,93% 100%,84% 88%,75% 99%,65% 90%,55% 100%,45% 89%,35% 99%,25% 90%,15% 100%,6% 90%,0 100%)}
.tape.sky{background:var(--tape-2);transform:rotate(4deg)}
.tape.left{left:16%} .tape.right{left:auto;right:6%;margin-left:0}
.shot figcaption{font-family:var(--hand);font-weight:700;font-size:22px;line-height:1.1;color:var(--ink-2);padding:12px 6px 2px;display:flex;gap:8px;align-items:flex-end}
.shot figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.note{position:relative;background:var(--note);color:var(--note-ink);padding:22px 22px 24px;border-radius:3px;box-shadow:0 14px 26px -12px rgba(0,0,0,.35),inset 0 -14px 18px -16px rgba(0,0,0,.2);transform:rotate(var(--tilt,1.6deg))}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;margin-left:-46px;background:rgba(255,255,255,.55);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.note h3{font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--note-ink);opacity:.75;margin-bottom:10px}
.note p{font-family:var(--hand);font-weight:700;font-size:clamp(23px,2.3vw,27px);line-height:1.15}
.card{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;display:grid;gap:8px}
.card h3{font-size:18px;font-weight:700;display:flex;gap:10px;align-items:center}
.card h3 svg{width:22px;height:22px;fill:none;stroke:var(--sky-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--ink-2)}
.ticks{list-style:none;padding:0;display:grid;gap:13px}
.ticks li{position:relative;padding-left:38px;font-size:17px;line-height:1.5}
.ticks li svg{position:absolute;left:0;top:-1px;width:28px;height:28px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ticks.soft li svg{stroke:var(--gold)}
.ticks.not li svg{stroke:var(--ink-3)}

/* ---------- the home's beats ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:880px){.split{grid-template-columns:minmax(0,1fr)}.split.flip > :first-child{order:0}}
.loop{position:relative;width:100%;max-width:560px;margin-inline:auto}
.loop svg{width:100%;height:auto;overflow:visible}
.loop .station{font-family:var(--hand);font-weight:700}
.loop-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill-link{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);text-decoration:none;padding:10px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent)}
.pill-link .ico{width:26px;height:26px}
.band.forest .pill-link{color:var(--on-forest)}
.collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,52px) clamp(22px,3vw,40px)}
.collage .shot{transition:transform .2s ease}
.collage a{text-decoration:none;color:inherit;display:block}
.collage a:hover .shot{transform:rotate(0) translateY(-4px)}
@media (max-width:700px){.collage{grid-template-columns:minmax(0,1fr)}}
.facts{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;text-align:center}
.facts .fact{font:800 clamp(34px,4.6vw,56px)/1 var(--display);letter-spacing:-.04em}
.facts .fact small{display:block;font:500 14px/1.3 var(--sans);letter-spacing:0;color:var(--ink-2);margin-top:6px}
.records-strip{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;font-size:17px}
.records-strip svg{width:26px;height:26px;fill:none;stroke:var(--green-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the closing band ---------- */
.talk{display:grid;gap:16px;justify-items:center;text-align:center}
.talk .big{font-family:var(--hand);font-weight:700;font-size:clamp(64px,10vw,124px);line-height:.9;color:var(--accent-on);transform:rotate(-4deg)}
.talk p{font:600 clamp(19px,2.2vw,24px)/1.35 var(--display);max-width:34ch}
.talk .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:8px}
.band.forest .btn{border-color:var(--on-forest);color:var(--on-forest);background:transparent;box-shadow:3px 3px 0 var(--coral)}
.band.forest .btn.primary{background:var(--on-forest);color:var(--forest);box-shadow:3px 3px 0 var(--gold)}
.wa{font:600 16px/1.3 var(--mono);color:var(--on-forest);user-select:all}

/* ---------- an app's page ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 14px/1 var(--sans);color:var(--ink-3);margin-bottom:26px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--coral-ink)}
.crumbs .fam{display:inline-flex;align-items:center;gap:7px}
.crumbs .fam i{width:9px;height:9px;border-radius:50%;background:var(--fam,var(--ink-3))}
.app-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center}
.app-hero .ico{width:clamp(88px,11vw,124px);height:clamp(88px,11vw,124px);filter:drop-shadow(0 10px 16px var(--shadow-2));transform:rotate(-6deg)}
.app-hero h1{font:800 clamp(44px,7vw,84px)/.98 var(--display);letter-spacing:-.045em}
.app-hero .promise{font:500 clamp(20px,2.4vw,27px)/1.3 var(--display);letter-spacing:-.015em;color:var(--ink-2);max-width:40ch;margin-top:12px}
.app-hero .meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:16px}
.app-hero .meta .hand{font-size:24px;color:var(--coral-ink);transform:rotate(-2deg)}
@media (max-width:560px){.app-hero{grid-template-columns:minmax(0,1fr)}}
.app-screen{margin-top:clamp(36px,5vw,56px)}
.app-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(48px,6vw,72px);align-items:start}
.app-body h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.app-side{display:grid;gap:30px;padding-top:6px}
@media (max-width:860px){.app-body{grid-template-columns:minmax(0,1fr)}}
.later{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin-top:clamp(40px,5vw,56px)}
.later .card{background:var(--paper-2);border-style:dashed}
.later > .card:only-child{max-width:680px}
.sketch{position:relative;border:2px dashed var(--line);border-radius:18px;padding:clamp(28px,5vw,56px);display:grid;justify-items:center;gap:14px;text-align:center;background-color:var(--paper-2);background-image:radial-gradient(circle,var(--dot) 1.15px,transparent 1.5px);background-size:20px 20px}
.sketch .ico{width:120px;height:120px;transform:rotate(-4deg)}
.sketch p{font-family:var(--hand);font-weight:700;font-size:clamp(25px,2.8vw,32px);line-height:1.1;color:var(--ink-2);max-width:28ch}
.works{margin-top:clamp(52px,6vw,76px)}
.works h2{font-size:clamp(24px,2.8vw,30px);font-weight:800;letter-spacing:-.03em;margin-bottom:22px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:2px dashed var(--line)}
.pager a{display:grid;gap:4px;text-decoration:none;color:var(--ink);padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper)}
.pager a:hover{border-color:var(--ink-3);color:var(--ink)}
.pager a.next{text-align:right}
.pager small{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.pager a.next small{justify-content:flex-end}
/* 🧑 S8c (FR-1241): drawn arrows on Previous and Next, in the site's hand; they lean the way they go on a hover */
.pager .pa{width:40px;height:19px;flex-shrink:0;fill:none;stroke:var(--coral-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.pager .prev .pa{transform:scaleX(-1)}
.pager .next:hover .pa{transform:translateX(3px)}
.pager .prev:hover .pa{transform:scaleX(-1) translateX(3px)}
@media (prefers-reduced-motion:reduce){.pager .pa{transition:none}}
.pager b{font:700 18px/1.2 var(--display)}

/* ---------- a page not rebuilt yet (the preview only) ---------- */
.soon-page{min-height:46vh;display:grid;place-items:center;text-align:center}

/* ---------- the footer ---------- */
.foot{background:var(--paper-2) var(--grain);border-top:1.5px solid var(--line);padding-block:44px 54px;font-size:14px;color:var(--ink-2)}
.foot-in{display:grid;gap:22px}
.foot-top{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot nav a{color:var(--ink-2);text-decoration:none;font-weight:500}
.foot nav a:hover{color:var(--coral-ink)}
.foot .co{font:500 12.5px/1.6 var(--mono);color:var(--ink-3)}

/* =====================================================================================================================================
   S8b (29 Oct 2026) — the rest of the site. 🧑 D-634 a day at the business + a card stamped at each stop · D-635 each industry on its own
   paper (the page's top band only) · D-636 the four pages as paper objects: the accountant's green pad, the file with tabs, the polaroid,
   the postcard · D-637 the marks draw themselves as they come into view. Physical objects (the cards, the slip, the polaroid) stay paper
   at night, dimmed a little; the bands around them follow the dark button.
   ===================================================================================================================================== */
:root{--g-ink:var(--ink);--g-ink-2:var(--ink-2);--g-ink-3:var(--ink-3);--g-line:var(--line);--ind:var(--green);
  --ink-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2 0 0 0 2.25'/></filter><rect width='90' height='90' filter='url(%23n)'/></svg>")}
main{--ind-ink:color-mix(in srgb,var(--ind) 72%,var(--ink))}
/* a band on its own paper re-points the ink tokens for its words; a screenshot, a note or a card on it keeps the page's own */
.band.paper{overflow:hidden;color:var(--ink)}
.band.paper .shot,.band.paper .note,.band.paper .card{--ink:var(--g-ink);--ink-2:var(--g-ink-2);--ink-3:var(--g-ink-3);--line:var(--g-line)}
/* trades — blueprint: white with blue grid lines by day, deep navy at night */
.paper-blueprint{--ink:#0f3150;--ink-2:#2c5476;--ink-3:#4f7595;--line:rgba(46,130,196,.32);--bp-minor:rgba(58,150,215,.12);--bp-major:rgba(58,150,215,.3);
  background-color:#f3f9fd;background-image:linear-gradient(var(--bp-major) 1.2px,transparent 1.2px),linear-gradient(90deg,var(--bp-major) 1.2px,transparent 1.2px),linear-gradient(var(--bp-minor) 1px,transparent 1px),linear-gradient(90deg,var(--bp-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
:root[data-site-theme="dark"] .paper-blueprint{--ink:#eaf4fc;--ink-2:#b3cde4;--ink-3:#86a7c4;--line:rgba(160,205,240,.28);--bp-minor:rgba(160,205,240,.09);--bp-major:rgba(160,205,240,.22);background-color:#0c2843}
.titleblock{position:absolute;right:max(20px,calc(50% - 570px));bottom:22px;display:grid;grid-template-columns:auto auto;border:1.5px solid var(--ink-3);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:color-mix(in srgb,var(--paper) 55%,transparent)}
.titleblock span{padding:6px 9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3)}
.titleblock span:nth-child(2n){border-right:0} .titleblock span:nth-last-child(-n+2){border-bottom:0}
/* the gym — a chalkboard in both modes, with its wooden ledge and a stick of chalk */
.paper-chalk{--ink:#f5f3ea;--ink-2:#d3dad4;--ink-3:#a8b4ad;--line:rgba(255,255,255,.22);--green-ink:#a3e8c3;--coral-ink:#ffb8a3;--gold-ink:#ffe28c;--sky-ink:#aadcf6;--berry-ink:#ffadd0;
  background-color:#24322d;background-image:radial-gradient(ellipse 55% 45% at 16% 28%,rgba(255,255,255,.075),transparent 70%),radial-gradient(ellipse 45% 40% at 84% 74%,rgba(255,255,255,.055),transparent 70%),var(--chalk-dust);
  --chalk-dust:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 -.18'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  box-shadow:inset 0 -14px 0 #8a5c34,inset 0 -16px 0 #6b4424}
:root[data-site-theme="dark"] .paper-chalk{background-color:#19231f}
.paper-chalk h1,.paper-chalk .hand,.paper-chalk .promise-hand{text-shadow:0 0 1.5px rgba(255,255,255,.35)}
.paper-chalk::after{content:"";position:absolute;right:12%;bottom:13px;width:46px;height:9px;border-radius:5px;background:linear-gradient(#fff,#e7e5dc);box-shadow:0 1px 1px rgba(0,0,0,.35);rotate:-3deg}
/* the bottle store — brown kraft, like the bottle bag, with the bag's serrated edge */
.paper-kraft{--ink:#2b1c0c;--ink-2:#4d371d;--ink-3:#6c5332;--line:rgba(70,45,15,.26);--green-ink:#0f5a37;--coral-ink:#8f2c10;--gold-ink:#5e3c00;--sky-ink:#0f4f73;
  background-color:#cfa978;background-image:var(--kraft-fibre),repeating-linear-gradient(93deg,rgba(90,58,22,.032) 0 1px,transparent 1px 7px),repeating-linear-gradient(87deg,rgba(255,240,210,.05) 0 2px,transparent 2px 13px);
  --kraft-fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.5 .9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .9 -.25'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x}
:root[data-site-theme="dark"] .paper-kraft{--ink:#f4e6cd;--ink-2:#dac5a2;--ink-3:#b59c77;--line:rgba(244,230,205,.2);--green-ink:#62d29b;--coral-ink:#ff9273;--gold-ink:#f6c65f;--sky-ink:#71c6f0;background-color:#3b2b1a}
/* the vape shop — a pegboard, like the shop's own wall, with the 18+ tag on its hook */
.paper-peg{--ink:#1e1731;--ink-2:#463c5f;--ink-3:#6b6386;--line:rgba(40,28,70,.2);background-color:#eeecf2;
  background-image:radial-gradient(circle at 50% 44%,rgba(32,22,55,.22) 0 2.5px,rgba(32,22,55,.07) 2.9px,transparent 3.8px),radial-gradient(circle at 50% 60%,rgba(255,255,255,.6) 0 2.4px,transparent 3.4px);background-size:36px 36px}
:root[data-site-theme="dark"] .paper-peg{--ink:#efeaf9;--ink-2:#c4bbd8;--ink-3:#9b92b2;--line:rgba(239,234,249,.2);background-color:#1d1928;
  background-image:radial-gradient(circle at 50% 44%,rgba(0,0,0,.55) 0 2.5px,rgba(0,0,0,.2) 2.9px,transparent 3.8px),radial-gradient(circle at 50% 60%,rgba(255,255,255,.06) 0 2.4px,transparent 3.4px);background-size:36px 36px}
.hangtag{position:absolute;right:max(24px,calc(50% - 560px));top:30px;width:74px;padding:18px 0 12px;text-align:center;background:#fff7e0;color:#3a2a00;border-radius:6px 6px 12px 12px;font:800 22px/1 var(--display);letter-spacing:-.02em;rotate:8deg;transform-origin:50% -14px;box-shadow:0 10px 16px -8px rgba(0,0,0,.35)}
.hangtag::before{content:"";position:absolute;top:7px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#1d1928;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.hangtag::after{content:"";position:absolute;top:-16px;left:50%;width:2px;height:24px;margin-left:-1px;background:#8d8a96}
.hangtag small{display:block;font:700 9px/1.2 var(--mono);letter-spacing:.12em;margin-top:5px}
@media (max-width:900px){.titleblock,.hangtag{display:none}}

/* ---------- an industry page's top band ---------- */
.ind-hero{padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,92px)}
.ind-hero .crumbs a{color:var(--ink-2)}
.ind-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:900px){.ind-hero-in{grid-template-columns:minmax(0,1fr)}}
.ind-kind{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.2 var(--sans);color:var(--ink);background:color-mix(in srgb,var(--paper) 72%,transparent);border:1.5px solid var(--line);border-radius:999px;padding:5px 15px 5px 5px}
.ind-kind .ico{width:34px;height:34px}
.paper-chalk .ind-kind{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.28)}
.ind-hero h1{font:800 clamp(38px,5.2vw,64px)/1.03 var(--display);letter-spacing:-.04em;margin-top:18px}
.ind-hero .lede{font:500 clamp(18px,1.8vw,20px)/1.5 var(--sans);color:var(--ink-2);margin-top:16px;max-width:52ch}
.promise-hand{display:flex;gap:8px;align-items:flex-start;font:700 clamp(23px,2.5vw,29px)/1.06 var(--hand);color:var(--ind-ink);margin-top:20px;transform:rotate(-1.6deg)}
.promise-hand svg{width:42px;height:34px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1) rotate(-12deg)}
.paper-chalk .promise-hand{color:var(--gold-ink)} .paper-kraft .promise-hand{color:var(--sky-ink)}
.ind-hero .meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:20px}
.ind-hero .meta .hand{font-size:22px;color:var(--ink-2)}

/* ---------- a day at the business (🧑 D-634) ---------- */
.day{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,60px);align-items:start}
.day-path{--p:1;--col-time:96px;--col-dot:24px;--gap:16px;list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,6vw,84px);position:relative}
.day-path::before,.day-path::after{content:"";position:absolute;top:16px;bottom:16px;left:calc(var(--col-time) + var(--gap) + var(--col-dot) / 2 - 1.5px);width:3px;border-radius:3px}
.day-path::before{background:repeating-linear-gradient(var(--line) 0 9px,transparent 9px 16px)}
/* the line follows the reader down the day (site.js sets --p; without it the line is whole) */
.day-path::after{background:var(--ind);transform-origin:top;transform:scaleY(var(--p))}
.day-stop{display:grid;grid-template-columns:var(--col-time) var(--col-dot) minmax(0,1fr);column-gap:var(--gap);grid-template-areas:"time dot what";position:relative;z-index:1}
.day-time{grid-area:time;font:700 clamp(25px,2.4vw,31px)/1 var(--hand);color:var(--ind-ink);text-align:right;transform:rotate(-4deg);padding-top:1px}
.day-dot{grid-area:dot;width:var(--col-dot);height:var(--col-dot);border-radius:50%;background:var(--ind);border:4px solid var(--paper);box-shadow:0 0 0 2.5px var(--ind);margin-top:3px;transition:background .25s ease,scale .35s cubic-bezier(.3,1.8,.5,1)}
.rv-on .day-stop:not(.reached) .day-dot{background:var(--paper);scale:.82}
.day-what{grid-area:what;min-width:0}
.day-what h3{font:800 clamp(23px,2.4vw,30px)/1.1 var(--display);letter-spacing:-.025em}
.day-what p{color:var(--ink-2);margin-top:8px;max-width:58ch}
.day-what .shot{margin-top:22px}
@media (max-width:640px){
  .day-path{--col-time:0px;--gap:14px}
  .day-path::before,.day-path::after{left:calc(var(--col-dot) / 2 - 1.5px)}
  .day-stop{grid-template-columns:var(--col-dot) minmax(0,1fr);grid-template-areas:"dot time" "dot what"}
  .day-time{text-align:left;transform:rotate(-2deg);margin-bottom:8px}
}
.day-card{position:sticky;top:98px;align-self:start;transition:top .22s ease}
@media (min-width:901px){.bar-off .day-card{top:24px}}
@media (prefers-reduced-motion:reduce){.day-card{transition:none}}
@media (max-width:900px){.day{grid-template-columns:minmax(0,1fr)}.day-card{position:relative;top:auto;justify-self:center;width:min(100%,340px);margin-top:4px}}
.day-card.thump > *{animation:thump .34s ease}
@keyframes thump{30%{translate:0 4px}65%{translate:0 -1px}}
.day-card .card-note{font:700 21px/1.1 var(--hand);color:var(--ink-2);text-align:center;margin-top:16px;transform:rotate(-2deg)}
/* the rubber stamp's ink: a worn impression (the mask), a thump as it lands */
.ink{display:inline-block;font:800 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;padding:5px 6px 4px;border:2px solid currentColor;border-radius:4px;rotate:-6deg;color:var(--ink-c,#b43f1d);
  -webkit-mask-image:var(--ink-grain);mask-image:var(--ink-grain);transition:opacity .1s ease,scale .34s cubic-bezier(.2,1.7,.4,1),rotate .34s ease}
.rv-on [data-slot]:not(.got) .ink{opacity:0;scale:2.1;rotate:-18deg}
/* trades — the job card on its hook */
.job-card{position:relative;rotate:1.6deg;background-color:#f5e6bd;color:#3b2f12;border-radius:6px;padding:32px 18px 18px;box-shadow:0 18px 36px -16px rgba(0,0,0,.38),0 2px 0 rgba(0,0,0,.06);background-image:repeating-linear-gradient(transparent 0 43px,rgba(120,90,30,.14) 43px 44px)}
.job-card::before{content:"";position:absolute;top:11px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.jc-head{font:700 13px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;text-align:center}
.jc-biz{font:700 23px/1.05 var(--hand);text-align:center;margin-top:7px;color:#6b4e12}
.jc-rows{list-style:none;padding:0;margin:14px 0 0;display:grid}
.jc-rows li{display:grid;grid-template-columns:minmax(0,1fr) 98px;align-items:center;gap:8px;min-height:44px;border-top:1.5px dashed rgba(120,90,30,.34);font:600 14px/1.25 var(--sans)}
.jc-box{height:34px;border:1.5px dashed rgba(120,90,30,.38);border-radius:5px;display:grid;place-items:center}
.jc-rows li:nth-child(1) .ink{--ink-c:#b43f1d}.jc-rows li:nth-child(2) .ink{--ink-c:#1b6f9c;rotate:4deg}.jc-rows li:nth-child(3) .ink{--ink-c:#1d7a50}
.jc-rows li:nth-child(4) .ink{--ink-c:#8a5a00;rotate:3deg}.jc-rows li:nth-child(5) .ink{--ink-c:#a32c66}.jc-rows li:nth-child(6) .ink{--ink-c:#5a3fb3;rotate:5deg}
/* the gym — the member card, hole-punched at each stop */
.member-card{position:relative;overflow:hidden;rotate:-2deg;border-radius:18px;padding:20px 18px 16px;color:#fff;background:linear-gradient(135deg,#19b6a6,#0c7f73 58%,#075a51);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.member-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% -12%,rgba(255,255,255,.3),transparent 46%)}
.mc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mc-club{font:800 16px/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.mc-kind{font:600 10.5px/1 var(--mono);letter-spacing:.26em;opacity:.85;margin-top:7px}
.mc-hand{font:700 23px/1 var(--hand);margin-top:14px;color:#ffe08a}
.mc-qr{width:64px;height:64px;flex-shrink:0;background:#fff;border-radius:9px;padding:6px}
.mc-qr svg{width:100%;height:100%;display:block;fill:#c98a10}
.mc-punch{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;text-align:center}
.mc-hole{display:block;width:26px;height:26px;margin:0 auto;border-radius:50%;background:var(--paper);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);transition:scale .3s cubic-bezier(.3,1.8,.5,1)}
.rv-on [data-slot]:not(.got) .mc-hole{background:transparent;box-shadow:none;border:2px dashed rgba(255,255,255,.6);scale:.86}
.mc-lab{display:block;font:700 9px/1 var(--mono);letter-spacing:.06em;margin-top:6px;opacity:.92}
/* the bottle store — a till slip that prints a line at each stop */
.day-card.slip{filter:drop-shadow(0 14px 16px rgba(0,0,0,.2))}
.till-slip{rotate:1.2deg;background:#fffdf6;color:#222;font:500 12.5px/1.55 var(--mono);padding:24px 18px 28px;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x}
.ts-head{text-align:center;font-weight:700;letter-spacing:.08em}
.ts-sub{text-align:center;color:#555;margin-top:2px}
.ts-rule{border:0;border-top:1.5px dashed #999;margin:12px 0}
.ts-lines{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.ts-lines li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px;transition:clip-path .6s steps(20),opacity .1s}
.rv-on .ts-lines [data-slot]:not(.got){clip-path:inset(0 100% 0 0);opacity:.0}
.ts-foot{text-align:center;font-weight:700;letter-spacing:.06em}
.ts-bars{display:block;width:76%;height:34px;margin:12px auto 0;fill:#222}
/* the vape shop — a loyalty card, a stamp at each stop */
.loyal-card{position:relative;rotate:-1.4deg;border-radius:16px;padding:20px 18px 16px;color:#fff;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
  background-color:#6a48b3;background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.7px),linear-gradient(145deg,#8b67d6,#57399a);background-size:14px 14px,100% 100%}
.lc-shop{font:800 16px/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.lc-title{font:700 25px/1 var(--hand);margin-top:7px;color:#ffe08a}
.lc-spots{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center}
.lc-spot{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;border-radius:50%;border:2px dashed rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.lc-spot svg{width:30px;height:30px;fill:var(--gold);transition:opacity .1s,scale .34s cubic-bezier(.2,1.7,.4,1),rotate .34s}
.rv-on [data-slot]:not(.got) .lc-spot svg{opacity:0;scale:2.1;rotate:-30deg}
.lc-lab{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.07em;margin-top:7px}
:root[data-site-theme="dark"] .job-card,:root[data-site-theme="dark"] .till-slip,:root[data-site-theme="dark"] .polaroid,:root[data-site-theme="dark"] .postcard .pc-stamp{filter:brightness(.9)}

/* ---------- the rest of an industry page ---------- */
.trade-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.trade-body h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
@media (max-width:860px){.trade-body{grid-template-columns:minmax(0,1fr)}}
.verdict{position:relative;border:2px solid var(--ink);border-radius:18px;padding:clamp(22px,3vw,32px);background:var(--paper);box-shadow:5px 5px 0 var(--ind)}
.verdict h3{font:700 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.verdict p{font:600 clamp(18px,1.9vw,21px)/1.4 var(--display);margin-top:10px;max-width:46ch}
.verdict .ink{position:absolute;right:16px;top:-16px;font-size:13px;padding:7px 9px 6px;--ink-c:var(--green-ink);background:var(--paper);rotate:7deg}
.verdict .hand{display:block;font-size:25px;color:var(--coral-ink);margin-top:12px;transform:rotate(-1.5deg)}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 6px}
.tiles.small .tile .ico{width:56px;height:56px}
.door{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:center;text-align:center;font-size:15px;color:var(--ink-2);padding-top:22px;border-top:2px dashed var(--line);margin-top:clamp(40px,5vw,56px)}
.door a{font:700 16px/1.3 var(--display)}

/* ---------- For accountants — the green analysis pad (🧑 D-636) ---------- */
.paper-pad{--m:max(8px,calc(50% - 594px));--ink:#173322;--ink-2:#3a5946;--ink-3:#5c7a66;--line:rgba(46,125,70,.3);--rule:rgba(46,125,70,.17);--col:rgba(46,125,70,.2);--margin:rgba(209,74,74,.5);background-color:#eef6e8;
  background-image:linear-gradient(90deg,transparent calc(var(--m) - 5px),var(--margin) calc(var(--m) - 5px) calc(var(--m) - 4px),transparent calc(var(--m) - 4px) calc(var(--m) - 1px),var(--margin) calc(var(--m) - 1px) var(--m),transparent var(--m)),
    repeating-linear-gradient(90deg,transparent 0 79px,var(--col) 79px 80px),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px)}
:root[data-site-theme="dark"] .paper-pad{--ink:#e3f1e6;--ink-2:#b0cab8;--ink-3:#86a291;--line:rgba(150,215,170,.24);--rule:rgba(150,215,170,.09);--col:rgba(150,215,170,.11);--margin:rgba(255,130,130,.32);background-color:#0f241a}
.pad-hero .band-head h1{font:800 clamp(40px,5.6vw,68px)/1.02 var(--display);letter-spacing:-.04em;padding-bottom:.14em}
.pad-hero .row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:8px}
.pad-hero .hand{font-size:23px;color:var(--ink-2);transform:rotate(-2deg)}
.ledger{width:100%;border-collapse:collapse;font-size:16px}
.ledger caption{text-align:left;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px}
.ledger th{font:700 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:2px solid var(--line)}
.ledger td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.ledger td:first-child{font:700 23px/1.12 var(--hand);color:var(--ink)}
.ledger .ans{font:700 13.5px/1.35 var(--mono);color:var(--green-ink)}
@media (max-width:700px){.ledger thead{display:none}.ledger tr,.ledger td{display:block}.ledger tr{padding:10px 0;border-bottom:1px solid var(--line)}.ledger td{border:0;padding:3px 0}}
/* 🧑 S8c (FR-1239 · D-646): "The numbers" as six cards — the figure big, what it counts under it, the detail in small type; three across, two on a phone */
.figs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.figs li{display:grid;align-content:start;gap:6px;border:1.5px solid var(--line);border-radius:16px;padding:18px 20px 20px;background:var(--paper);min-width:0}
.figs b{font:800 clamp(36px,4.4vw,54px)/1 var(--display);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.figs b::after{content:"";display:block;width:44px;height:4px;border-radius:3px;background:var(--gold);margin-top:10px}
.figs li:nth-child(3n+2) b::after{background:var(--green)}
.figs li:nth-child(3n) b::after{background:var(--coral)}
.figs span{font:600 16px/1.3 var(--sans);color:var(--ink)}
.figs small{font:500 12.5px/1.4 var(--mono);color:var(--ink-3)}
@media (max-width:720px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.figs li{padding:14px 14px 16px}.figs span{font-size:15px}}
.cards4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;margin-top:28px}
.cards4 .card{align-content:start}
.prose{display:grid;gap:14px;max-width:68ch;color:var(--ink-2);font-size:17.5px}
.prose b{color:var(--ink)}

/* ---------- Your records — one file, with tabs (🧑 D-636) ---------- */
.folder{--fold:#f1d996;--fold-2:#e2c26f;--fold-ink:#3a2c08;position:relative;margin-top:clamp(18px,3vw,30px)}
:root[data-site-theme="dark"] .folder{--fold:#4a3d1d;--fold-2:#3a3016;--fold-ink:#f4e8c6}
.folder-tabs{display:flex;flex-wrap:wrap;gap:4px;padding-left:16px;position:relative;z-index:2}
.folder-tab{font:700 14px/1 var(--sans);color:var(--fold-ink);background:var(--fold-2);border:0;border-radius:12px 12px 0 0;padding:12px 15px 11px;cursor:pointer;opacity:.86}
.folder-tab:hover{opacity:1}
.folder-tab[aria-selected="true"]{background:var(--fold);opacity:1;padding-bottom:14px;margin-bottom:-3px}
.folder-body{position:relative;background:var(--fold);border-radius:4px 18px 18px 18px;padding:clamp(16px,3vw,34px);box-shadow:0 26px 50px -26px rgba(0,0,0,.45)}
.folder-panel{position:relative;background:var(--paper);border-radius:4px;padding:clamp(24px,3.4vw,44px);box-shadow:0 2px 0 rgba(0,0,0,.05),0 12px 26px -16px rgba(0,0,0,.35);rotate:-.35deg}
.folder-panel + .folder-panel{margin-top:22px}
.tabs-on .folder-panel:not(.on){display:none}
.tabs-on .folder-panel + .folder-panel{margin-top:0}
.folder-panel .clip{position:absolute;top:-18px;right:42px;width:24px;height:62px;fill:none;stroke:#8f99a3;stroke-width:2.6;stroke-linecap:round}
.folder-panel h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.06;max-width:22ch}
.folder-panel .eyebrow{margin-bottom:10px}
.folder-panel .prose{margin-top:14px}
.facts-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.fact-chip{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--paper-2)}
.fact-chip b{font:700 15px/1.2 var(--display);grid-column:2}
.fact-chip span{font:500 12.5px/1.3 var(--mono);color:var(--ink-3);grid-column:2}
/* 🧑 S8c (FR-1240): the app's own icons on the fact boxes and the readers' cards, in gold as on the 8 Oct site */
svg.sico{width:22px;height:22px;fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fact-chip .sico{grid-row:1 / span 2;grid-column:1}
.card h3 .sico{stroke:var(--gold-ink)}
@media (max-width:560px){.folder-tabs{padding-left:6px}.folder-tab{font-size:13px;padding:10px 11px 9px}}
.register{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line)}
.register th{font:700 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 16px;background:var(--paper-3)}
.register td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.register td:first-child{color:var(--ink);font-weight:600;width:42%}
.register .stamp{white-space:nowrap}
@media (max-width:760px){.register thead{display:none}.register tr,.register td{display:block;width:auto!important}.register td{border:0;padding:4px 16px}.register tr{border-top:1px solid var(--line);padding:10px 0}}

/* ---------- About — the polaroid, and the road drawn as one line (🧑 D-636) ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:860px){.about-hero{grid-template-columns:minmax(0,1fr)}}
.polaroid{position:relative;margin:0 auto;max-width:360px;background:#fff;padding:14px 14px 20px;border-radius:3px;box-shadow:0 24px 44px -20px rgba(0,0,0,.5);rotate:-3deg}
.polaroid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.polaroid figcaption{font:700 27px/1.05 var(--hand);color:#262626;text-align:center;padding-top:14px}
.polaroid figcaption small{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#777;margin-top:4px}
.polaroid .tape{top:-15px}
.about-hero h1{font:800 clamp(38px,5.2vw,64px)/1.03 var(--display);letter-spacing:-.04em}
/* the road: one drawn line through five stops (the stops' dots are in the drawing; on a phone a dashed line down the side instead) */
.road{position:relative;margin-top:clamp(20px,3vw,34px)}
.road-line{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round}
.road ol{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.road li{position:relative;text-align:center}
.road-dot{display:none}
.road b{display:block;font:700 27px/1.05 var(--hand);color:var(--ink)}
.road p{font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:6px}
@media (max-width:860px){.road-line{display:none}.road ol{grid-template-columns:minmax(0,1fr);gap:24px;padding-left:34px;border-left:3px dashed var(--line);margin-left:11px}
  .road li{text-align:left}.road-dot{display:block;position:absolute;left:-47px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:5px solid var(--rd,var(--coral))}}
.stance{max-width:560px;margin:0 auto}
.stance p{font-size:clamp(30px,3.6vw,42px)}
.stance-prose{margin:36px auto 0}
.about-hero .lede{font:500 clamp(18px,1.8vw,20px)/1.5 var(--sans);color:var(--ink-2);margin-top:16px;max-width:54ch}
/* the small pieces the four pages share */
.band-head .page-h1{font-size:clamp(38px,5.4vw,66px);font-weight:800;line-height:1.03;letter-spacing:-.04em}
.board-note.left{justify-content:flex-start;text-align:left}
.band.forest .ticks li svg{stroke:var(--gold)}
.talk h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.talk .small-print{font:500 15px/1.5 var(--sans);color:var(--on-forest-2);max-width:none}
.pad-note{max-width:680px;margin:44px auto 0}
.soon-row{margin-top:clamp(30px,4vw,44px)}
.nowrap{white-space:nowrap}
.soon-row h2{font-size:clamp(20px,2.2vw,24px);color:var(--ink-2)}
/* the home: NuAi on your phone (🧑 D-640 — the August site's home-screen picture, the icon installed from the browser) */
.phone-wrap{position:relative;display:grid;justify-items:center}
.phone{margin:0;width:min(270px,70vw);padding:11px;border-radius:40px;background:#161a19;box-shadow:0 30px 60px -26px rgba(0,0,0,.55),inset 0 0 0 2px #3b413f;rotate:4deg}
.phone img{width:100%;height:auto;border-radius:30px}
.phone-note{position:absolute;right:calc(50% + 96px);top:96px;display:flex;align-items:flex-start;gap:4px;font:700 28px/1 var(--hand);color:var(--coral-ink);rotate:-5deg;white-space:nowrap}
.phone-note svg{width:50px;height:38px;margin-top:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 🧑 S8c (29 Oct, his idea): "Your website" — one site of each kind on a phone, held like a hand of cards: the bottoms close together, the tops
   spread, the front card in the middle; dealt out of a stack as they come into view (the reveal), simply fanned for less motion. A phone's
   width (≈2.5 cards) takes a narrower spread. */
.fan{margin:0;position:relative;--cw:clamp(138px,19vw,232px);--spread:1;padding-top:8px}
.fan-hand{position:relative;height:calc(var(--cw) * 2.167 + 64px)}
.fan-card{position:absolute;left:50%;bottom:0;width:var(--cw);z-index:var(--z);transform-origin:50% 135%;
  transform:translateX(calc(-50% + var(--x) * var(--spread))) rotate(calc(var(--r) * var(--spread)));transition:transform .8s var(--d) cubic-bezier(.2,.8,.2,1)}
.rv-on .fan:not(.in) .fan-card{transform:translateX(-50%) rotate(0deg)}
.fan-phone{padding:7px;border-radius:26px;background:#161a19;box-shadow:0 26px 44px -22px rgba(0,0,0,.6),inset 0 0 0 2px #3b413f}
:root[data-site-theme="dark"] .fan-phone{box-shadow:0 26px 44px -22px rgba(0,0,0,.8),inset 0 0 0 2px #3b413f,0 0 0 1px rgba(255,255,255,.1)}
.fan-url{display:flex;align-items:center;justify-content:center;gap:4px;margin:1px 4px 6px;padding:4px 7px;border-radius:999px;background:#2b3230;color:#e9ede9;font:500 9.5px/1.25 var(--mono);letter-spacing:-.01em;white-space:nowrap}
.fan-host{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fan-url svg{width:10px;height:10px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fan-phone img{width:100%;height:auto;border-radius:19px}
@media (hover:hover){.fan-card:hover{z-index:5;transform:translateX(calc(-50% + var(--x) * var(--spread))) rotate(calc(var(--r) * var(--spread))) translateY(-16px)}}
.fan-note{position:absolute;z-index:6;top:0;right:calc(50% + var(--cw) * 1.22);display:flex;align-items:flex-start;gap:4px;margin:0;font:700 27px/1 var(--hand);color:var(--coral-ink);rotate:-4deg;white-space:nowrap}
.fan-note svg{width:44px;height:34px;margin-top:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fan figcaption{font:700 22px/1.15 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;justify-content:center;max-width:62ch;margin:26px auto 0;text-align:left}
.fan figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.fan-note{position:static;justify-content:center;margin:0 auto 14px;rotate:-2deg}.fan-note svg{transform:rotate(80deg);margin-top:4px}}
@media (max-width:560px){.fan{--cw:min(138px,35vw);--spread:.64}.fan-url{font-size:8.5px;padding:3px 6px;margin-inline:3px}.fan-note{font-size:24px}.fan figcaption{font-size:20px}}
@media (prefers-reduced-motion:reduce){.fan-card{transition:none}}
@media (max-width:640px){.phone-note{display:none}}
.stance{max-width:640px;margin:0 auto}
/* ---------- S10b (31 Oct 2026, 🧑 D-700 – D-714) ---------- */
.fig-note{margin-top:16px;font:500 13.5px/1.45 var(--mono);color:var(--on-forest-2)}
.band.forest .ticks{margin-top:22px}
/* the stamp v2 (D-705): its own colours on every part, so a parent's svg rule (the records strip's) never empties it */
.kstamp{display:block;width:100%;height:auto;overflow:visible}
.kstamp .ks-ring,.kstamp .ks-shield{fill:none;stroke:var(--green)}
.kstamp .ks-words{fill:var(--green-ink);stroke:none;font-family:var(--mono);font-weight:700;letter-spacing:.06em}
.kstamp .ks-dot{fill:var(--green-ink);stroke:none}
.kstamp .ks-brand{fill:var(--green-ink);stroke:none;font-family:var(--display);font-weight:800}
/* 🧑 S10b part 2 (FR-1320): "try making the badge gold and the leave the round banner green … it creates a good contrasting effect" */
.kstamp .ks-shield{stroke:#b8860b}
:root[data-site-theme="dark"] .kstamp .ks-shield{stroke:var(--gold)}
.records-strip .kstamp{width:88px;height:88px;flex-shrink:0}
.band.forest .kstamp .ks-ring,.band.forest .kstamp .ks-shield{stroke:var(--gold)}
.band.forest .kstamp .ks-words,.band.forest .kstamp .ks-dot,.band.forest .kstamp .ks-brand{fill:var(--on-forest)}
/* Your records: the stamp and its dated facts, one block (D-708 · D-710) */
.kept{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);align-items:start;margin:clamp(30px,4vw,46px) 0 clamp(36px,5vw,58px);padding:clamp(22px,3vw,36px);border:1.5px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 18px 40px -26px var(--shadow)}
.kept-stamp{width:100%;max-width:250px;justify-self:center;margin-top:6px}
.kept-facts h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin:6px 0 18px}
.kept-progress{margin-top:24px}
@media (max-width:760px){.kept{grid-template-columns:minmax(0,1fr)}.kept-stamp{max-width:190px}}
/* 🧑 S10b part 2 (FR-1321): the stamp centred in its column, a little larger */
.kept-stamp{align-self:center;max-width:280px}
@media (max-width:760px){.kept-stamp{align-self:start;max-width:190px}}
/* 🧑 S10b part 2 (FR-1322): the desk's note sat alone in the middle of a tall column — the note and the stamp, held at the top while the words scroll past */
.desk-side{display:grid;gap:clamp(26px,3vw,40px);justify-items:center;align-self:start;position:sticky;top:96px}
.desk-stamp{margin:0;max-width:300px;text-align:center}
.desk-stamp .kstamp{width:min(100%,210px);margin:0 auto 14px}
.desk-stamp figcaption{font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:880px){.desk-side{position:static}}
/* the invoice and the page its QR opens (his note 1) */
.paypair{margin:0 auto;max-width:540px}
.pp-stage{position:relative;padding:18px 0 30px}
.pp-paper{position:relative;width:80%;rotate:-2deg;background:#fff;border-radius:4px;box-shadow:0 24px 44px -24px var(--shadow),0 0 0 1px var(--line)}
.pp-paper img{width:100%;height:auto;border-radius:4px}
.pp-phone{position:absolute;right:0;bottom:0;width:31%;rotate:4deg;z-index:2}
.paypair figcaption{font:700 21px/1.15 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;margin-top:20px}
.paypair figcaption svg,.lf-card figcaption svg,.lf-phone figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.app-screen .paypair{max-width:660px}
@media (max-width:560px){.pp-paper{width:84%}.pp-phone{width:34%}.paypair figcaption{font-size:19px}}
/* the QR's three steps (his note 7) */
.steps3-wrap{margin-top:clamp(48px,6vw,72px)}
.steps3-wrap h2,.loyal-figs h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:24px}
.steps3{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,60px)}
.steps3 li{position:relative;display:grid;gap:8px;align-content:start}
.st-dot{width:62px;height:62px;border-radius:50%;background:var(--st);display:grid;place-items:center}
.st-dot svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps3 b{font:800 21px/1.2 var(--display);letter-spacing:-.02em}
.steps3 p{color:var(--ink-2);font-size:16.5px}
.st-arrow{position:absolute;top:12px;right:calc(-1 * clamp(26px,4vw,60px));width:clamp(26px,4vw,56px)}
.st-arrow svg{width:100%;height:auto;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.steps3{grid-template-columns:minmax(0,1fr)}.st-arrow{position:static;width:44px;transform:rotate(90deg);margin:4px 0 0 10px}}
/* Customers & loyalty: the card and the members' corner (D-706, his note 2) */
.loyal-figs{margin-top:clamp(48px,6vw,72px)}
.lf-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
.lf-card,.lf-phone{margin:0}
.lf-card img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.18))}
.lf-phone .fan-phone{width:100%;max-width:250px;margin-inline:auto;rotate:3deg}
.lf-card figcaption,.lf-phone figcaption{font:700 21px/1.15 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;margin-top:16px}
.app-side .lf-phone{margin-top:8px}
.app-side .lf-phone .fan-phone{max-width:230px}
/* 🧑 S10b part 2 (FR-1323): "centre the phone photo" */
.lf-center{display:flex;justify-content:center;margin:clamp(26px,4vw,48px) 0 clamp(8px,2vw,20px)}
.lf-center .lf-phone{width:min(100%,320px)}
@media (max-width:760px){.lf-row{grid-template-columns:minmax(0,1fr)}}
/* About: what NuAi is, and the one database (his note 12, D-707) */
.what-cards{max-width:980px;margin-inline:auto}
.what-cards h3{font-size:20px}
.db-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(28px,4vw,44px)}
.db-fig{margin:0}
.db-fig svg{width:100%;height:auto;overflow:visible}
/* 🧑 S10b part 2 (D-723): "label the two charts … it has to be distinguishable" */
.db-who{display:inline-block;margin:0 0 4px 18px;padding:6px 12px 5px;border-radius:999px;font:700 13px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.db-who.usual{color:var(--on-forest);border:1.5px solid var(--coral)}
.db-who.nuai{color:#13261d;background:var(--gold);border:1.5px solid var(--gold)}
@media (max-width:760px){.db-two{grid-template-columns:minmax(0,1fr);gap:30px}}
.db-story{max-width:62ch;margin:clamp(26px,3vw,36px) auto 0;text-align:center;font:700 clamp(22px,2.4vw,27px)/1.25 var(--hand);color:var(--accent-on)}
.records-strip.on-forest{margin-top:clamp(30px,4vw,44px);color:var(--on-forest)}
.stance p + p{margin-top:12px}

/* ---------- Contact — the postcard (🧑 D-636); the form and what it sends are unchanged ---------- */
.postcard{--pc:#fbf5e6;--pc-ink:#2a2516;--pc-ink-2:#6a604a;--pc-line:rgba(70,60,30,.28);position:relative;max-width:980px;margin:0 auto;background:var(--pc);color:var(--pc-ink);rotate:-.5deg;
  border:12px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--coral) 0 16px,var(--pc) 16px 24px,var(--sky) 24px 40px,var(--pc) 40px 48px) 12;box-shadow:0 30px 60px -28px rgba(0,0,0,.5)}
:root[data-site-theme="dark"] .postcard{--pc:#272319;--pc-ink:#f3ead3;--pc-ink-2:#c3b796;--pc-line:rgba(243,234,211,.22)}
.pc-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;padding:clamp(18px,3vw,34px)}
.pc-left{padding-right:clamp(16px,3vw,32px);border-right:2px solid var(--pc-line);display:grid;grid-template-rows:auto auto 1fr;gap:10px}
.pc-right{padding-left:clamp(16px,3vw,32px);display:grid;align-content:start;gap:4px;position:relative}
@media (max-width:760px){.pc-in{grid-template-columns:minmax(0,1fr)}.pc-left{padding-right:0;border-right:0;border-bottom:2px solid var(--pc-line);padding-bottom:20px;margin-bottom:16px}.pc-right{padding-left:0}}
.pc-hello{font:700 clamp(26px,3vw,32px)/1 var(--hand);color:var(--coral-ink)}
.postcard label{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pc-ink-2)}
.postcard textarea{width:100%;height:100%;min-height:230px;resize:vertical;border:0;outline-offset:4px;background:transparent repeating-linear-gradient(transparent 0 37px,var(--pc-line) 37px 38px);background-attachment:local;color:var(--pc-ink);font:700 25px/38px var(--hand);padding:2px 0 0}
.postcard textarea::placeholder{color:var(--pc-ink-2);opacity:.75}
.pc-field{display:grid;gap:4px;padding:12px 0 6px}
.postcard input,.postcard select{width:100%;min-height:44px;border:0;border-bottom:2px dotted var(--pc-line);background:transparent;color:var(--pc-ink);font:600 18px/1.3 var(--sans);padding:6px 2px;border-radius:0}
.postcard select option{color:#111}
.postcard input:focus,.postcard select:focus,.postcard textarea:focus{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
.pc-stamp{justify-self:end;width:94px;height:112px;background:#fff;padding:6px;margin-bottom:8px;rotate:4deg;
  -webkit-mask:radial-gradient(circle 4.5px at 50% 50%,#0000 96%,#000) -4.5px -4.5px/9px 9px,linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat;
  mask:radial-gradient(circle 4.5px at 50% 50%,#0000 96%,#000) -4.5px -4.5px/9px 9px,linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat}
.pc-stamp-in{display:grid;place-items:center;align-content:center;gap:4px;width:100%;height:100%;background:#10362a;color:#f4efe2;text-align:center}
.pc-stamp-in .spark{position:static;width:30px;height:30px}
.pc-stamp-in b{font:800 19px/1 var(--display);letter-spacing:-.03em}
.pc-stamp-in small{font:600 7.5px/1 var(--mono);letter-spacing:.14em}
.pc-mark{position:absolute;top:2px;right:76px;width:150px;height:96px;pointer-events:none;fill:none;stroke:var(--pc-ink-2);stroke-width:1.6;opacity:.55}
.pc-mark text{fill:var(--pc-ink-2);stroke:none;font:700 7.5px var(--mono);letter-spacing:.12em}
.pc-mark .pm-mid{font-size:13px;letter-spacing:.06em}
.pc-send{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:16px clamp(18px,3vw,34px) clamp(18px,3vw,30px)}
.postcard .btn.primary{background:var(--pc-ink);color:var(--pc);border-color:var(--pc-ink)}
.form-status{font:600 15px/1.4 var(--sans);color:var(--pc-ink-2)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-hero .row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:center;margin-top:8px}
.contact-hero .wa-big{font:700 18px/1.2 var(--mono);color:var(--ink);user-select:all}
/* ═══ S10b part 3 (31 Oct 2026, 🧑 D-720 · D-726 · D-730 · D-731) ═══ */
/* FR-1324: the stock-take keypad with its empty right half holding three phones at the shelf (below it on a phone) */
.stockpair{margin:0}
.sp-stage{position:relative}
.sp-desk{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 22px 46px -18px var(--shadow),0 2px 0 var(--shadow-2);rotate:-.5deg}
.sp-desk img{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper-3)}
.sp-desk .night,.ca-desk .night{display:none}
:root[data-site-theme="dark"] .sp-desk.has-night .day,:root[data-site-theme="dark"] .ca-desk.has-night .day{display:none}
:root[data-site-theme="dark"] .sp-desk.has-night .night,:root[data-site-theme="dark"] .ca-desk.has-night .night{display:block}
.sp-phones{position:absolute;right:3.5%;top:17%;width:58%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;align-items:start;z-index:2}
.sp-phone{position:relative;rotate:var(--r)}
.sp-step{position:absolute;left:50%;bottom:-34px;translate:-50% 0;white-space:nowrap;font:700 22px/1 var(--hand);color:var(--coral-ink)}
.stockpair figcaption,.tillphoto figcaption{font:700 21px/1.2 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;margin-top:60px}
.tillphoto figcaption{margin-top:18px}
.stockpair figcaption svg,.tillphoto figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.sp-phones{position:static;width:100%;margin-top:26px;gap:10px}.sp-step{font-size:17px;bottom:-26px}.stockpair figcaption{margin-top:44px;font-size:19px}}
/* FR-1325: Smart Capture's computer screen and its phone, in the pay pair's frame */
.app-screen .capair{max-width:780px}
.capair .pp-paper{padding:0}
.capair .pp-paper img{border-radius:4px}
/* 🧑 D-735 (S10b part 4, FR-1337): a phone keeps a night picture too — the dark page shows the phone at night */
.fan-phone .night{display:none}
:root[data-site-theme="dark"] .fan-phone.has-night .day{display:none}
:root[data-site-theme="dark"] .fan-phone.has-night .night{display:inline}
/* 🧑 FR-1335 · FR-1336 (S10b part 4, D-736): Messages and Support — a computer screen with a phone beside it, the phone over the screen's right edge */
.duo{margin:0}
.app-screen .duo{max-width:860px;margin-inline:auto}
.duo-stage{display:grid;grid-template-columns:minmax(0,1fr) 25%;align-items:start;padding:14px 0 6px}
.duo-desk{grid-column:1 / 3;grid-row:1;width:82%;position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 22px 46px -18px var(--shadow),0 2px 0 var(--shadow-2);rotate:-.6deg}
.duo-desk img{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper-3)}
.duo-desk .night{display:none}
:root[data-site-theme="dark"] .duo-desk.has-night .day{display:none}
:root[data-site-theme="dark"] .duo-desk.has-night .night{display:block}
.duo-phone{grid-column:2;grid-row:1;position:relative;z-index:2;margin-top:20%;rotate:3deg}
.duo.low .duo-stage{align-items:end}
.duo.low .duo-phone{margin-top:0;margin-bottom:-4%}
.duo figcaption{font:700 21px/1.2 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;margin-top:24px}
.duo figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.duo-stage{grid-template-columns:minmax(0,1fr) 33%}.duo-desk{width:88%}.duo figcaption{font-size:19px}}
/* 🧑 D-734 · D-737 · D-738 (S10b part 4, FR-1334): the till in a real photograph — a free photo (Unsplash), NuAi's own screen set into it */
.tillphoto{margin:0}
.app-screen .tillphoto{max-width:920px;margin-inline:auto}
.tillphoto img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 34px 60px -34px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.06)}
:root[data-site-theme="dark"] .tillphoto img{box-shadow:0 34px 60px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
/* 🧑 D-731: the till's own page keeps the till at work below what it does */
.till-work{margin-top:clamp(48px,6vw,72px)}
.till-work h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:28px}
.till-work .shot{max-width:1040px}
/* 🧑 D-726 (FR-1329): the stale pages' lift — the practice cards in colour, the road, the desk's two screens, the rooms, the figures drawn */
.cards4.lively .card{border-top:5px solid var(--c);padding-top:18px}
.cards4.lively .card h3 .sico{stroke:var(--c-ink)}
.road-band .band-head{margin-bottom:clamp(30px,4vw,48px)}
.steps5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.steps5 .st-arrow{right:calc(-1 * clamp(18px,2.4vw,34px));width:clamp(18px,2.4vw,32px)}
.steps5 b{font-size:19px}
.steps5 p{font-size:15.5px;color:var(--ink-2)}
@media (max-width:1000px){.steps5{grid-template-columns:repeat(2,minmax(0,1fr))}.steps5 .st-arrow{display:none}}
@media (max-width:760px){.steps5{grid-template-columns:minmax(0,1fr)}}
.deskpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,46px);margin-top:clamp(44px,5vw,70px)}
.deskpair .shot figcaption{font:700 19px/1.2 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;margin-top:12px}
@media (max-width:760px){.deskpair{grid-template-columns:minmax(0,1fr)}}
.rooms{margin:0 0 clamp(36px,5vw,58px);padding:clamp(18px,2.6vw,30px);border:1.5px solid var(--line);border-radius:20px;background:var(--paper)}
.rooms svg{display:block;width:100%;height:auto;max-width:860px;margin-inline:auto}
.rooms figcaption{font:700 20px/1.2 var(--hand);color:var(--ink-2);display:flex;gap:8px;align-items:flex-end;justify-content:center;margin-top:10px;text-align:left}
.rooms figcaption svg{width:34px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fig-viz{display:flex;align-items:center;gap:10px;margin-top:6px}
.fig-viz em{font:600 12.5px/1.35 var(--mono);color:var(--green-ink);font-style:normal}
.fig-ring{width:34px;height:34px;flex-shrink:0;rotate:-90deg}
.fig-ring circle{fill:none;stroke-width:5}
.fig-ring .bg{stroke:var(--line)}.fig-ring .fg{stroke:var(--green)}
.fig-bar{flex:1;max-width:150px;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.fig-bar i{display:block;height:100%;border-radius:5px;background:var(--green)}
.fig-dots{display:flex;flex-wrap:wrap;gap:4px;max-width:150px}
.fig-dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.fig-dots i.on{background:var(--gold)}
.figs small{color:var(--ink-2)}