/* Copied from the design repository's samples/yobanta.css at 6acdef7 (4 November
   2026), for the company site's pages (spec 0034, R1): every rule but the audit
   page's motion, which the sample's stylesheet also holds. One change: the home
   page's motion below is set on a screen under prefers-reduced-motion:
   no-preference alone, so in print, or with motion reduced after the page
   loaded, every word shows (R4). Change it there and copy it again:
   site/assets.py serves it, fonts.css adds its two faces, static/motion.js is
   its script and site/company/templates/ hold samples/home.html's markup. */
/* Yobanta's pages: D1, green and bronze on light laid paper.
   The founder's choice, 19 October 2026. DESIGN.md describes the system.
   The audit page comes first; the brand site's home page has its own section
   below and reuses the audit's panels, slip and steps.
   Each colour means one thing:
   - marigold highlighter (--mark): the prospect's own figures;
   - bronze (--rival, --lead): who is named instead;
   - bottle green (--field, --accent): what to do.
   Components are written against these roles, never raw values. */
:root{
  /* paper */
  --paper:#f7f1e4;
  --sheet:#ede4d1;
  --card:#fcf9f1;
  --input:#fffefa;
  /* ink */
  --ink:#1c1b17;
  --ink-2:#4d4535;
  --rule-strong:#1c1b17;
  /* bottle green: what to do (reply slips, buttons, jump links, step numbers) */
  --field:#17573f;
  --field-deep:#0f4230;
  --on-field:#f4eddd;
  --on-field-2:#c5d9cb;
  --accent:#17573f;
  /* bronze: who is named instead (the "named most" panel, leader names and scores) */
  --lead:#8f4f24;
  --rival:#8f4f24;
  --on-rival:#f9f2e6;
  --on-rival-2:#f6e9d3;
  /* the prospect's own marks */
  --mark:#ffc928;
  --error:#a3241a;
  --measure:64ch;
  /* the home page: hairlines, and cards raised off plain cream */
  --hair:color-mix(in srgb,var(--ink) 10%,transparent);
  --raised:#fff;
  --lift:0 1px 2px rgba(60,44,18,.06),0 22px 44px -24px rgba(60,44,18,.3);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:color-mix(in srgb,var(--ink) 38%,transparent) var(--sheet)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-optical-sizing:auto;font-size:17px;line-height:1.65;font-feature-settings:"tnum" 1}
::selection{background:var(--mark);color:var(--ink)}
a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--field);outline-offset:3px}
.slip .alt a:focus-visible,.most a:focus-visible{outline-color:var(--on-field)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
mark{background:linear-gradient(100deg,transparent 0 .12em,var(--mark) .12em calc(100% - .08em),transparent calc(100% - .08em));color:inherit;padding:0 .18em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph{background:var(--sheet);border-bottom:1.5px dashed var(--ink-2);padding:0 .2em;font-weight:600}
.slip .ph{background:none;color:var(--on-field);border-bottom-color:var(--on-field-2)}
.card .ph{background:var(--sheet);color:var(--ink);border-bottom-color:var(--ink-2)}
.icon{width:1em;height:1em;flex:none}

.sample{background:var(--ink);color:var(--paper);font-size:13px;padding-block:8px}

/* masthead */
.mast .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 28px;padding-block:20px;border-bottom:1.5px solid var(--ink)}
/* the wordmark (logo round seven; the founder, 2 November 2026), the same on
   every page: Manrope with a speech bubble for its o. Ink letters, the bubble
   a ring in pine, a little lighter than the button's green so the thin stroke
   reads as the same colour, spaced to sit where Manrope's own o would. --xh is
   Manrope's x-height in em; the bubble is sized from it, as on
   brand/logo-concepts.html and in brand/trademark */
.word{--xh:.54;font-family:"Manrope",system-ui,sans-serif;font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
.word .ob{display:inline-block;width:calc(var(--xh) * 1.493em);height:calc(var(--xh) * 1.493em);vertical-align:calc(var(--xh) * -.254em);margin:0 calc(var(--xh) * -.16em) 0 calc(var(--xh) * -.216em);fill:#1e6a4b}
.word .ob circle{fill:none;stroke:#1e6a4b;stroke-width:4.5}
.meta{font-size:15px;color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:650}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;background:var(--field);color:var(--on-field);font-weight:650;font-size:16px;text-decoration:none;border-radius:999px}
.btn:hover{background:var(--field-deep);text-decoration:none}

/* opening */
.opening{padding-top:76px}
.open-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px 56px;align-items:start}
.opening h1{font-size:clamp(2.5rem,5.3vw,4.6rem);font-weight:640;line-height:1.1;letter-spacing:-.018em;max-width:20ch}
.open-side{padding-top:.5em}
.then{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:450;line-height:1.45;max-width:36ch}
.then b{font-weight:620;color:var(--lead)}
.method{margin-top:20px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:60ch}

/* the two panels, under one ink rule: the bronze panel sits under it like
   "Your entry", not over it (the founder, 4 November 2026, found it "overlayed
   on the top horizontal line") */
.panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:56px;border-top:5px solid var(--rule-strong)}
.panel{padding:32px 36px 30px;display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
.panel h2,.panel h3{font-size:20px;font-weight:640;letter-spacing:-.005em}
.panel .sub{font-size:15px;margin-top:4px}
.yours{background:var(--sheet)}
.yours .sub{color:var(--ink-2)}
.most{background:var(--rival);color:var(--on-rival)}
.most .sub{color:var(--on-rival-2)}
.rows{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-rows:repeat(5,auto)}
.panels .rows{grid-template-rows:subgrid;grid-row:span 5}
.row{display:flex;align-items:flex-end;gap:8px;padding-block:14px 12px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.most .row{border-top-color:color-mix(in srgb,var(--on-rival) 22%,transparent)}
.row .t{flex:0 1 auto;min-width:0;font-size:17px}
.row .t small{display:block;font-size:13px;line-height:1.45;letter-spacing:.01em;opacity:.82}
.most .row .t small,.most .row .n small,.most .row.nc .n{opacity:1;color:var(--on-rival-2)}
.row .d{flex:1 1 20px;min-width:14px;border-bottom:2px dotted currentColor;opacity:.4;transform:translateY(-.3em)}
.row .n{flex:none;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.01em}
.row .n small{font-size:14px;font-weight:500;letter-spacing:0;margin-left:3px;opacity:.8}
.row.nc .n{font-size:15px;font-weight:500;font-style:italic;opacity:.85}
.yours .row .n mark{padding:0 .14em}

.jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;margin-top:36px;padding-bottom:8px}
.jump span{font-size:14px;color:var(--ink-2);margin-right:4px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--field);color:var(--field);border-radius:999px;text-decoration:none;font-size:15px;font-weight:650}
.jump a:hover{background:var(--field);color:var(--on-field)}

/* a tool */
.tool{padding-top:104px}
.tool-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 40px;align-items:end;border-top:3px solid var(--rule-strong);padding-top:22px}
.tool-head h2{font-size:clamp(2.1rem,3.6vw,3rem);font-weight:640;letter-spacing:-.018em;line-height:1.12}
.score{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:6px 28px}
.score div{display:flex;align-items:baseline;gap:10px}
.score .lbl{font-size:15px;color:var(--ink-2)}
.score .big{font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.score .them .big{color:var(--lead)}
.score .of{font-size:15px;color:var(--ink-2);flex-basis:100%;text-align:right}
.tool-body{display:grid;grid-template-columns:1fr;gap:40px;margin-top:36px}
.said{margin:0;background:var(--sheet);padding:6px 40px}
.turn{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:6px 32px;align-items:baseline;padding-block:26px}
.turn+.turn{border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.who{font-size:14px;font-weight:620;line-height:1.45;letter-spacing:.01em;color:var(--ink-2)}
.who span{display:block;font-weight:400}
.q{font-size:19px;font-weight:560;line-height:1.45;letter-spacing:-.005em;max-width:52ch}
.aside{font-size:15px;line-height:1.55;color:var(--ink-2);margin-bottom:10px}
.said blockquote{margin:0;font-family:"Literata",Georgia,serif;font-style:italic;font-size:21px;line-height:1.7;max-width:66ch}
.said blockquote mark{font-style:normal;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:620}
.side h3{font-size:14px;font-weight:640;letter-spacing:.03em;padding-bottom:9px;border-bottom:1.5px solid var(--ink)}
.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
.side>h3:nth-of-type(1){grid-column:1;grid-row:1}
.side>ul:nth-of-type(1){grid-column:1;grid-row:2}
.side>h3:nth-of-type(2){grid-column:2;grid-row:1}
.side>ul:nth-of-type(2){grid-column:2;grid-row:2}
.side>.note{grid-column:2;grid-row:3}
.list{list-style:none;margin:0;padding:0}
.li{display:flex;align-items:baseline;gap:6px;padding-block:11px;font-size:16px;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.li .d{flex:1 1 16px;min-width:12px;border-bottom:1.5px dotted currentColor;opacity:.35;transform:translateY(-.3em)}
.li .c{font-weight:620}
.li.me .t{font-weight:620}
.li.lead .t{color:var(--lead);font-weight:620}
.side .note{font-size:14px;color:var(--ink-2);margin-top:12px}
.tool.minor{padding-top:96px}
.tool.minor .tool-head{grid-template-columns:1fr;gap:10px}
.tool.minor .tool-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:620;letter-spacing:-.012em;line-height:1.22;max-width:34ch}
.tool.minor.zero .tool-head h2{font-size:clamp(2rem,3.4vw,2.8rem);max-width:28ch}
.tool.minor .lead-line{font-size:18px;color:var(--ink)}
.tool.minor .lead-line b{color:var(--lead);font-weight:620}
.tool.minor .lead-line span{color:var(--ink-2);font-size:15px}
.tool.minor .tool-body{margin-top:30px}
.tool.minor .turn{padding-block:22px}
.tool.minor .said blockquote{font-size:19px;line-height:1.7}
.tool.off .tool-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tool.off .nc{font-size:18px;line-height:1.6;max-width:52ch;align-self:center}

/* the reply slip */
.slip{position:relative;background:var(--field);color:var(--on-field);margin-top:112px}
.slip .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;padding-block:76px 80px}
.slip h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:640;letter-spacing:-.018em;line-height:1.14}
.slip .pitch{margin-top:22px;font-size:18px;line-height:1.6;color:var(--on-field);max-width:40ch}
.slip .alt{margin-top:24px;font-size:15px;line-height:1.6;color:var(--on-field-2)}
.slip .alt a{color:var(--on-field)}
.slip .wrap{align-items:start}
.card{position:relative;background:var(--card);color:var(--ink);padding:46px 32px 28px;border-radius:4px}
.card::before{content:"";position:absolute;left:12px;right:12px;top:13px;height:8px;background:radial-gradient(circle,var(--field) 2.6px,transparent 3.1px) 0 50%/13px 8px repeat-x}
.slip fieldset{border:0;margin:0;padding:0}
.slip legend{font-size:17px;font-weight:640;padding:0;margin-bottom:16px}
.opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;background:var(--sheet);border-radius:4px;cursor:pointer;font-size:16px;font-weight:520;line-height:1.35}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{flex:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:3px;background:var(--card);position:relative}
.opt input:checked + .box{background:var(--mark)}
.opt input:checked + .box::after{content:"";position:absolute;left:6px;top:1px;width:6px;height:12px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.opt input:focus-visible + .box{outline:3px solid var(--field);outline-offset:2px}
.opt:hover .box{background:var(--input)}
.opt small{display:block;font-size:13px;font-weight:400;color:var(--ink-2)}
.send{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:22px;align-items:end}
.send label{grid-column:1/-1;font-size:15px;font-weight:620}
.send input{min-height:52px;border:2px solid var(--ink);border-radius:4px;background:var(--input);padding:0 14px;font:inherit;font-size:17px;color:var(--ink);width:100%}
.send input{caret-color:var(--field)}
.send input::placeholder{color:color-mix(in srgb,var(--ink-2) 88%,var(--input))}
.send input[aria-invalid="true"]{border-color:var(--error);border-width:3px;padding-inline:13px}
.err{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;color:var(--error);font-size:14px;font-weight:600;line-height:1.4}
.err .icon{margin-top:.15em}
.send button[aria-busy="true"]{background:var(--sheet);cursor:progress}
.send button:disabled{cursor:progress}
.send button{min-height:52px;padding:0 24px;border:2px solid var(--ink);border-radius:4px;background:var(--mark);color:var(--ink);font:inherit;font-size:17px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.send button:hover{background:color-mix(in srgb,var(--mark) 88%,var(--ink))}
.fine{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.sent h3{font-size:24px;font-weight:640;letter-spacing:-.012em;line-height:1.25}
.sent p{margin-top:10px;font-size:16px;line-height:1.6}
.sent .chosen{color:var(--ink-2)}

/* the details form, in the reply bands */
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px}
.field label{display:block;font-size:15px;font-weight:620;margin-bottom:7px}
.field label span{font-weight:400;color:var(--ink-2)}
.field input{width:100%;min-height:52px;border:2px solid var(--ink);border-radius:4px;background:var(--input);padding:0 14px;font:inherit;font-size:17px;color:var(--ink);caret-color:var(--field)}
.field input::placeholder{color:color-mix(in srgb,var(--ink-2) 88%,var(--input))}
.field input[aria-invalid="true"]{border-color:var(--error);border-width:3px;padding-inline:13px}
.details fieldset{border:0;margin:24px 0 0;padding:0}
.details legend{font-size:15px;font-weight:620;padding:0;margin-bottom:10px}
.optin{margin-top:22px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:15px;line-height:1.55;color:var(--ink-2)}
.opt.optout{display:inline-flex;margin-top:8px;min-height:44px;padding:0;background:none;font-size:15px;font-weight:560;color:var(--ink)}
.opt.optout .box{width:20px;height:20px}
.opt.optout input:checked + .box::after{left:5px;top:0;width:6px;height:11px}
.go-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.go{min-height:54px;padding:0 26px;border:2px solid var(--ink);border-radius:4px;background:var(--mark);color:var(--ink);font:inherit;font-size:17px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.go:hover{background:color-mix(in srgb,var(--mark) 88%,var(--ink))}
.go[aria-busy="true"]{background:var(--sheet);cursor:progress}
.go-row .fine{margin:0;flex:1 1 260px}

/* what to check */
.check{padding-top:112px}
.check>h2{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:640;letter-spacing:-.018em;line-height:1.12;border-top:3px solid var(--rule-strong);padding-top:18px}
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font-size:56px;font-weight:700;line-height:1;color:var(--accent);letter-spacing:-.02em;margin-bottom:16px}
.steps b{display:block;font-size:20px;font-weight:640;line-height:1.35;margin-bottom:8px}
.steps p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.never{margin-top:72px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 48px}
.never h3{font-size:20px;font-weight:640;line-height:1.35}
.never ul{list-style:none;margin:0;padding:0}
.never li{font-family:"Literata",Georgia,serif;font-style:italic;font-size:18px;line-height:1.55;padding-block:13px;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}

/* small print */
.small{margin-top:112px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 56px;border-top:1.5px solid var(--ink);padding-top:22px;padding-bottom:48px}
.small h3{font-size:15px;font-weight:640;margin-bottom:6px}
.small p{font-size:15px;line-height:1.65;color:var(--ink-2)}
.foot{border-top:1.5px solid var(--ink)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-block:24px 48px;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* the brand site: the home page */
.mast .nav{grid-column:2/-1;justify-self:end;display:flex;gap:26px}
.nav a{font-size:15px;font-weight:620;text-decoration:none}
.nav a:hover{text-decoration:underline}
.home-open{padding-top:120px}
.home-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 56px;align-items:center}
.home-open h1{font-size:clamp(2.6rem,4.4vw,4rem);font-weight:640;line-height:1.1;letter-spacing:-.02em;max-width:13ch}
.home-lead{margin-top:28px;font-size:clamp(1.15rem,1.5vw,1.35rem);font-weight:450;line-height:1.6;max-width:48ch}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.field.wide{grid-column:span 2}
.optin.inline{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:16px;padding-top:12px}
.optin.inline .opt.optout{margin-top:0}
.home-go{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:44px}
.home-go .btn{min-height:54px;padding:0 26px;font-size:17px}
.home-go span{font-size:15px;line-height:1.5;color:var(--ink-2)}
/* under the shift's search page, a small note says the businesses are invented; the
   hero's card says so in its own label instead (the founder, 3 November 2026) */
.sample-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
/* the home page's answer card, set like a chat: the question a small sand bubble
   at the right, the answer plain Bricolage in a soft warm ink, no rule between.
   Quieter in its type and colour, not its depth (the founder, 3 November 2026):
   the text in Faded Ink, lighter labels, a paler bubble and the names in bronze at
   a lighter weight, so the promise beside it leads; it keeps the raised lift */
.answer{padding:14px 34px 32px;background:var(--raised);border-radius:20px;box-shadow:var(--lift)}
.answer .turn{grid-template-columns:1fr;gap:10px;padding-block:22px 0}
.answer .turn+.turn{border-top:0}
.answer .who{font-size:13px;font-weight:480;letter-spacing:.02em}
.answer .ask{justify-items:end}
.answer .ask .q{max-width:30ch;padding:11px 16px;border-radius:18px 18px 4px 18px;background:color-mix(in srgb,var(--sheet) 45%,var(--raised));font-size:16px;font-weight:450;line-height:1.55;color:var(--ink-2)}
.answer blockquote{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-style:normal;font-size:16.5px;font-weight:400;line-height:1.75;color:var(--ink-2)}
.said blockquote b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-style:normal;font-weight:620;color:var(--lead);white-space:nowrap}
.answer blockquote b{font-weight:520}
.answer .bracket{margin-top:24px;font-weight:500}
.answer .bracket::before{border-color:color-mix(in srgb,var(--field) 26%,transparent)}
.bracket{position:relative;margin:12px 0 0;padding:14px 0 0;font-size:15px;font-weight:560;line-height:1.4}
.bracket::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border:solid color-mix(in srgb,var(--field) 40%,transparent);border-width:0 1px 1px}
.bracket a{display:inline-flex;align-items:center;gap:8px;color:var(--field);text-decoration:none}
.bracket a:hover{text-decoration:underline}
.bracket span{text-wrap:balance}
.home-sec{padding-top:200px}
/* the shift on a white band, brighter than the page, a hairline at each edge;
   the band opens on the AI tools we read, held in one cream capsule, no lines */
.engines .bar{display:flex;align-items:center;justify-content:space-between;gap:12px 40px;max-width:1040px;margin:0 auto;padding:22px 36px;border-radius:999px;background:var(--paper)}
.engines p{flex:none;font-size:14px;font-weight:500;color:var(--ink-2)}
.engines ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 44px;margin:0;padding:0;list-style:none}
.engines li{font-size:20px;font-weight:660;letter-spacing:-.01em;color:var(--ink-2)}
.shift{margin-top:120px;padding:48px 0 120px;background:var(--raised);border-block:1px solid var(--hair)}
.shift-head{margin-top:104px;text-align:center}
.shift-head h2{font-size:clamp(2.3rem,4.2vw,3.6rem);font-weight:640;line-height:1.08;letter-spacing:-.02em}
.shift-head h2 span{display:block}
.shift-head h2 span:first-child{color:var(--ink-2)}
/* the shift, shown: a sample search page with the reader's stand-in seventh,
   beside an AI answer that leaves it out; then the click fact, sourced.
   Each side opens on a point: grey dot for search, green for AI */
.point{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:620;line-height:1.4;color:var(--ink-2)}
.point::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--field)}
.past .point::before{background:color-mix(in srgb,var(--ink) 26%,transparent)}
.show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;max-width:980px;margin:72px auto 0}
.show>div>.point{display:flex;margin-bottom:14px}
/* the search page: a cream box ending on a grey bracket, "Result seven still got the
   call.", which mirrors the green one on the answer card */
.search{padding:8px 28px 24px;background:var(--paper);border:1px solid var(--hair);border-radius:20px}
.serp{margin:0;padding:0;list-style:none}
.serp li{display:flex;gap:14px;align-items:baseline;padding:9px 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.serp li+li{border-top:1px solid var(--hair)}
.serp li span{flex:none;width:1.4em;font-feature-settings:"tnum" 1;font-weight:500}
.serp .you{color:var(--ink);font-weight:620}
.bracket.was{margin-top:18px;color:var(--ink-2)}
.bracket.was::before{border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
.shift .answer{border:1px solid var(--hair)}
/* the fact closes the answer's column, its source line level with the sample note
   under the search page beside it, so the two columns end together (the founder, 3 November
   2026, found the centred line under them unbalanced, and the click-rate figure
   "a bit cerebral") */
.show .now{display:flex;flex-direction:column}
.fact{margin-top:auto;padding-top:40px;max-width:24ch;font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:620;line-height:1.3;text-wrap:balance}
.source{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.source a{color:var(--ink-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 40px;align-items:end}
.sec-head.top{align-items:start}
/* "Then, what to do next" keeps a hairline across the content column; the other heads open on space */
.sec-head.ruled{border-top:1px solid var(--hair);padding-top:40px}
/* "Who we are" follows the green band, whose edge separates it: less space, no rule */
.end + .home-sec{padding-block:120px}
.sec-head h2{font-size:clamp(2.1rem,3.6vw,3rem);font-weight:640;letter-spacing:-.018em;line-height:1.12}
.sec-head>p,.sec-head>div>p{font-size:18px;line-height:1.6;max-width:52ch}
.sec-head h2+p{margin-top:16px}
.tag{margin-top:36px;font-size:14px;font-weight:500;color:var(--ink-2)}
.home-sec .panels{margin-top:16px}
.entry .line{display:flex;align-items:flex-end;gap:8px}
.entry .line b{font-size:20px;font-weight:640;line-height:1.35}
.entry .line .d{flex:1 1 20px;min-width:14px;border-bottom:2px dotted currentColor;opacity:.3;transform:translateY(-.3em)}
.entry .line .n{flex:none;font-size:16px;font-weight:650}
.entry .line .n.soon{font-weight:500;font-style:italic;color:var(--ink-2)}
.entry .line+p{margin-top:6px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ladder .entry{padding-block:30px 28px;border-bottom:1px solid var(--hair)}
.stack{list-style:none;margin:6px 0 0;padding:0}
.stack .entry{padding-bottom:26px}
.stack .entry+.entry{padding-top:26px;border-top:1px solid var(--hair)}
.stack .entry:last-child{padding-bottom:0}
.stack .line::before{content:"";flex:none;align-self:flex-start;width:8px;height:8px;margin:calc(.675em - 4px) 6px 0 0;border-radius:50%;background:var(--field)}
.stack .line+p{padding-left:22px}
.across .entry{border-bottom:0;border-top:1px solid var(--hair)}
.across{margin-top:64px;border-top:0}
.across .entry{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px 40px;align-items:baseline}
.across .entry .line+p{margin-top:0}
.sec-head p a{white-space:nowrap}
.home-sec .jump{justify-content:flex-end}
.centred .sec-head{display:block;text-align:center}
.centred .sec-head>p{margin:16px auto 0;max-width:44ch;text-wrap:balance}
.centred .tag{margin-top:44px;text-align:center}
.home-sec.centred .jump{justify-content:center}
.slip.end .wrap{align-items:center}
.letter{font-size:19px;line-height:1.65;max-width:56ch}
.letter p+p{margin-top:16px}
.sig{margin-top:24px;font-size:20px;font-weight:640;line-height:1.35}
.sig span{display:block;font-size:15px;font-weight:400;color:var(--ink-2)}
.foot nav{display:flex;gap:24px}

@media (max-width:860px){
  .wrap{padding-inline:20px}
  .mast .nav{gap:18px}
  .home-open{padding-top:48px}
  .home-grid,.sec-head{grid-template-columns:1fr}
  /* on one column the button sits close under the promise and the card well below
     it, so the button reads as the promise's, not the card's (the founder, 3 November 2026) */
  .home-go{margin-top:30px}
  .home-grid aside{padding-top:56px}
  .answer{padding:10px 22px 24px}
  .fields.three{grid-template-columns:1fr}
  .field.wide{grid-column:auto}
  .home-sec{padding-top:128px}
  .end + .home-sec{padding-block:72px}
  .engines .bar{flex-direction:column;align-items:flex-start;padding:20px 22px;border-radius:20px}
  .engines ul{justify-content:flex-start}
  .engines ul{gap:8px 24px}
  .engines li{font-size:17px}
  .shift{margin-top:72px;padding:32px 0 80px}
  .shift-head{margin-top:72px}
  .show{grid-template-columns:1fr;gap:40px}
  .search{padding-inline:20px}
  .fact{padding-top:32px}
  .across .entry{grid-template-columns:1fr}
  .across{margin-top:36px}
  .stack{margin-top:20px}
  .stack .entry{padding-bottom:20px}
  .stack .entry+.entry{padding-top:20px}
  .home-sec .jump{justify-content:flex-start}
  .mast .wrap{padding-block:14px}
  .mast .wrap{grid-template-columns:minmax(0,1fr) auto}
  .meta{grid-column:1/-1;grid-row:2;font-size:14px}
  .btn{min-height:44px;padding:0 16px;font-size:15px}
  .jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .jump a{flex:none;white-space:nowrap}
  .jump span{flex:none}
  .opening{padding-top:44px}
  .open-grid,.panels,.tool-head,.tool-body,.slip .wrap,.steps,.never,.small{grid-template-columns:1fr}
  .tool.off .tool-head{grid-template-columns:1fr}
  .panel{padding:26px 22px}
  .score{justify-content:flex-start}
  .score .of{text-align:left}
  .said{padding:4px 22px}
  .turn{grid-template-columns:1fr;gap:6px;padding-block:20px}
  .side{grid-template-columns:1fr}
  .side>h3:nth-of-type(n),.side>ul:nth-of-type(n),.side>.note{grid-column:1;grid-row:auto}
  .side h3+.list{margin-bottom:26px}
  .said blockquote{font-size:19px}
  .opts{grid-template-columns:1fr}
  .slip .wrap{padding-block:60px}
  .card{padding:40px 18px 24px}
  .tool.minor{padding-top:72px}
  .send{grid-template-columns:1fr}
  .send button{justify-content:center}
  .fields{grid-template-columns:1fr}
  .go{width:100%;justify-content:center}
  .tool{padding-top:80px}
}

/* paper: laid ground, grain on sheets, specks on the ink fields */
body{background-color:var(--paper);background-image:url(/assets/paper-laid-4bf94907.png)}
.yours,.said,.opt{background-image:url(/assets/paper-grain-2c428cf8.png)}
.most,.slip,.btn{background-image:url(/assets/paper-speck-16371c33.png)}
.card{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6)}

/* the home page, made modern (the founder, 31 October 2026): plain cream with
   no laid texture, specks only on the green band, hairlines where the audit
   page has ink rules, raised round cards, and round fields and buttons. The
   audit page keeps D1 as it is. */
/* a lighter cream than the audit's paper, nearly blank; the white shift band and
   the coloured panels break it, and raised cards are white */
.home{--paper:#fdfbf7;background-image:none}
.home .btn,.home .yours,.home .most,.home .said{background-image:none}
.home .mast{border-bottom:1px solid var(--hair)}
.home .mast .wrap{padding-block:24px;border-bottom:0}
.home .foot{border-top:0}
.home .panels{gap:20px;border-top:0}
.home .panel{padding:36px 40px 34px;border-radius:20px}
.home .yours{background-color:var(--raised);box-shadow:var(--lift)}
.home .yours .row{border-top-color:var(--hair)}
.home .most{box-shadow:var(--lift)}
.home .row .d{opacity:.3}
.home .slip .wrap{padding-block:112px 116px}
.home .card{padding:36px 36px 30px;border-radius:20px}
.home .card::before{content:none}
.home .field input{border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:12px}
.home .field input:hover{border-color:color-mix(in srgb,var(--ink) 42%,transparent)}
.home .field input:focus{outline:0;border-color:var(--field);box-shadow:0 0 0 3px color-mix(in srgb,var(--field) 24%,transparent)}
.home .optin{border-top-color:var(--hair)}
.home .opt .box{border-width:1.5px;border-radius:5px}
.home .go{border:0;border-radius:999px}
@media (max-width:860px){
  .home .mast .wrap{padding-block:16px}
  .home .panel{padding:28px 22px 26px}
  .home .slip .wrap{padding-block:72px 76px}
  .home .card{padding:28px 18px 22px}
}
/* below 380px the wordmark and the two links no longer fit on one line: the links go under it */
@media (max-width:380px){
  .home .mast .wrap{grid-template-columns:1fr}
  .home .mast .nav{grid-column:1;justify-self:start}
}

/* motion on the home page (the founder, 4 November 2026: "everything feels
   static"). One idea, carried down the page: the answers write themselves in,
   word by word, the way an AI tool streams one; a name turns bronze once it has
   been said; then the bracket draws under it. Around it, the same hand: the
   search page fills in and the highlighter finds result seven, the audit's own
   figures are highlighted, the next steps' leaders draw one by one. The head
   script sets .motion only under prefers-reduced-motion: no-preference; the
   page script sets .ready once the answers are split, and .on starts a group
   (data-play). Without either, everything is simply there. In print, and with
   motion reduced, none of it applies (spec 0034, R4). */
@media screen and (prefers-reduced-motion:no-preference){
  html.motion{scroll-behavior:smooth}
  @keyframes card-in{from{opacity:0;transform:translateY(18px)}}
  @keyframes bubble-in{from{opacity:0;transform:translateY(10px) scale(.94)}}
  @keyframes fade-in{from{opacity:0}}
  @keyframes reveal{to{opacity:1}}
  /* the hero: the card arrives, the question is sent, then the answer streams */
  .motion .home-open .answer{animation:card-in 800ms cubic-bezier(.16,1,.3,1) both}
  .motion .home-open .answer .ask .who{animation:fade-in 400ms ease-out 300ms both}
  .motion .home-open .answer .ask .q{transform-origin:100% 100%;animation:bubble-in 520ms cubic-bezier(.16,1,.3,1) 380ms both}
  .motion .home-open .answer .turn:not(.ask) .who{animation:fade-in 400ms ease-out 760ms both}
  /* until the script has split the answer, hide it; if the script never runs, show it after 2.5s */
  .motion:not(.ready) .home-open blockquote,.motion:not(.ready) .home-open .answer .bracket{opacity:0;animation:reveal 300ms 2.5s forwards}
  /* a streamed answer: --t is each word's moment, --end the answer's last */
  .motion.ready [data-play] .w{display:inline-block;opacity:0;filter:blur(3px)}
  .motion.ready [data-play].on .w{opacity:1;filter:blur(0);transition:opacity 300ms ease-out,filter 400ms ease-out;transition-delay:calc(var(--base) + var(--t))}
  .motion.ready [data-play] blockquote b{color:var(--ink-2);border-radius:3px}
  .motion.ready [data-play].on blockquote b{color:var(--lead);transition:color 500ms ease-out calc(var(--base) + var(--t));animation:named 1400ms ease-out calc(var(--base) + var(--t)) both}
  @keyframes named{0%,100%{background-color:transparent}25%{background-color:color-mix(in srgb,var(--lead) 14%,transparent)}}
  /* the bracket draws left to right, then its line arrives */
  .motion.ready [data-play] .bracket::before{clip-path:inset(0 100% 0 0)}
  .motion.ready [data-play].on .bracket::before{clip-path:inset(0);transition:clip-path 700ms cubic-bezier(.16,1,.3,1) calc(var(--base) + var(--end))}
  .motion.ready [data-play] .bracket>*{opacity:0;transform:translateY(4px)}
  .motion.ready [data-play].on .bracket>*{opacity:1;transform:none;transition:opacity 400ms ease-out,transform 600ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--base) + var(--end) + 250ms)}
  /* the search page fills in, one result at a time; the highlighter finds the seventh */
  .search{--end:1250ms}
  .motion.ready [data-play] .serp li{opacity:0;transform:translateY(6px)}
  .motion.ready [data-play].on .serp li{opacity:1;transform:none;transition:opacity 360ms ease-out,transform 500ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 70ms)}
  .motion.ready [data-play] .serp mark,.motion.ready [data-play] .yours mark{background-repeat:no-repeat;background-size:0 100%}
  .motion.ready [data-play].on .serp mark{background-size:100% 100%;transition:background-size 900ms cubic-bezier(.16,1,.3,1) 650ms}
  /* the sample audit: the reader's own figures are highlighted, row by row */
  .motion.ready [data-play].on .yours mark{background-size:100% 100%;transition:background-size 1000ms cubic-bezier(.16,1,.3,1) calc(250ms + var(--i) * 140ms)}
  /* the next steps: each leader draws to its value, one step after another */
  .motion.ready [data-play] .line .d{clip-path:inset(0 100% 0 0)}
  .motion.ready [data-play] .line .n{opacity:0}
  .motion.ready [data-play].on .line .d{clip-path:inset(0);transition:clip-path 700ms cubic-bezier(.16,1,.3,1) calc(150ms + var(--i) * 220ms)}
  .motion.ready [data-play].on .line .n{opacity:1;transition:opacity 400ms ease-out calc(550ms + var(--i) * 220ms)}
  /* the arrows lean the way they lead */
  .motion .btn .icon,.motion .bracket a .icon,.motion .go .icon{transition:transform 200ms cubic-bezier(.16,1,.3,1)}
  .motion .home-go .btn:hover .icon,.motion .bracket a:hover .icon{transform:translateY(2px)}
  .motion .go:hover .icon{transform:translateX(3px)}
}
/* printed, or with motion reduced, while an answer is still writing itself in: a
   transition already running would carry on from a hidden word, so every one
   stops where the word shows (spec 0034, R4; a print in the first two seconds
   left the hero's last words blank) */
@media print,(prefers-reduced-motion:reduce){
  .motion *,.motion *::before{transition:none!important;animation:none!important}
}
/* arriving at the form from a button or a bracket, the card answers with a marigold ring */
.home #ask:target .card{animation:arrive 1800ms cubic-bezier(.16,1,.3,1) 800ms}
@keyframes arrive{
  0%{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6),0 0 0 0 color-mix(in srgb,var(--mark) 0%,transparent)}
  20%{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6),0 0 0 4px color-mix(in srgb,var(--mark) 75%,transparent)}
  100%{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6),0 0 0 14px color-mix(in srgb,var(--mark) 0%,transparent)}
}
@keyframes arrive-still{
  0%,100%{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6),0 0 0 4px color-mix(in srgb,var(--mark) 0%,transparent)}
  20%{box-shadow:0 1px 1px rgba(40,28,8,.16),0 14px 28px -14px rgba(10,30,20,.6),0 0 0 4px color-mix(in srgb,var(--mark) 75%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .home #ask:target .card{animation-name:arrive-still}
}