/* Locked visual DNA from UI/Registry.dc.html.
 * Do not restyle toward PRD §15 (sage, serif display).
 * Source Serif 4 is for the ICML pull quote only.
 */
:root{
  --ink:#0A0A0A;--paper:#FAFAF8;--white:#FFFFFF;
  --accent:#34557F;--tint:#F5F7FA;--tint-rule:#C6D2E2;
  --muted:#5C5C56;--dim:#3E3E3A;
  /* 2026-09-22: was #8A8A84, 3.3:1 on paper. The evidence text is set in this grey, so it
     has to be readable: 5.1:1 on paper, 4.7:1 on the hero ground. */
  --faint:#6B6B65;
  --rule:#D6D6D0;--rule-light:#E6E6E1;--rule-lighter:#ECECE8;
  --gold:#C0964D;--gold-tint:#FBF6EC;--gold-text:#7A5E2A;
  --warn:#A15C4B;--warn-tint:#F7F2F0;
  --band:#1B2129;--band-text:#F2F1ED;--band-dim:#B9BCC2;
  --steel-text:#E3E9F1;--steel-text-dim:#D5DDE8;
  --avatar-validated:#DCE3EC;--avatar-draft:#E8E4D8;--flag-green:#507C5B;
  --ease:cubic-bezier(.2,.8,.2,1);--pad:48px;--max:1320px;
  --shadow:7px 7px 0 var(--ink);--shadow-2:4px 4px 0 var(--ink);
  --shadow-accent:7px 7px 0 var(--accent);--shadow-accent-2:4px 4px 0 var(--accent);
  --shadow-gold:7px 7px 0 var(--gold);--shadow-gold-2:4px 4px 0 var(--gold);
  --shadow-warn:7px 7px 0 var(--warn);--shadow-quiet:4px 4px 0 var(--rule);--shadow-nav:3px 3px 0 var(--ink);
  /* The operator admin needs two weights the site never did: a 4px warn shadow (the Needs
     you tile) and a 7px quiet one (the Everything else panel). --shadow-quiet above is the
     4px weight already, so this is named for the number rather than the "-2" pattern. */
  --shadow-warn-2:4px 4px 0 var(--warn);--shadow-quiet-7:7px 7px 0 var(--rule);
  --nav:68px;--anchor:88px;
  /* Handoff 3a, the hero's soft-light ground and its warm hairline. */
  --hero-ground:#F5F0E5;--hero-rule:#D9CFB8;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:var(--anchor)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--faint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{cursor:pointer}
button:active{transform:translateY(1px)}
/* Same 45% convention the README names for the visitor site (line 336) - it belongs to
   the whole file, not to the operator screen that happens to use it most. */
button[disabled]{opacity:.45;cursor:default}
.nav{display:flex;align-items:center;gap:24px;min-height:var(--nav);height:var(--nav);padding:10px var(--pad);border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:17px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;margin-left:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{color:var(--ink);white-space:nowrap}
.nav-links .nav-lang{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.08em;border:1px solid var(--rule);padding:4px 7px}
.nav-links a:hover{color:var(--accent)}
.nav-request{border:1px solid var(--accent);background:var(--accent);color:var(--white);padding:10px 16px;font-size:15px;font-weight:600;box-shadow:var(--shadow-nav)}
.nav-links .nav-request{color:var(--white)}
.nav-request:hover,.nav-links .nav-request:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wrap{max-width:var(--max);margin:0 auto}

/* Shared text roles the whole site uses: a mono kicker, a lede, a mono meta label. They
   outlived the v1 home page that introduced them. */
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint)}
.lede{font-size:18px;font-weight:500;color:#3E3E3A;max-width:42ch;margin:20px 0 0;line-height:1.45;text-wrap:pretty;overflow-wrap:break-word}
.lvl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}

/* ===== The v2 home page (UI/v2/README.md "1. Home", canvas lines 48 to 233) =========== */

/* 1. Hero (handoff 3a, "Soft light"). A warm full-bleed ground with a soft radial shading,
   ruled off from the registry by one ink line. Row 1 lines up the first four buyers with a
   slot for the reader; row 2 carries the argument on the left and three hairline steps on
   the right. */
.hero{background-color:var(--hero-ground);background-image:radial-gradient(ellipse 720px 420px at 18% 12%,#FCF9F2 0%,rgba(252,249,242,0) 70%),radial-gradient(ellipse 900px 520px at 92% 100%,#E9E0CC 0%,rgba(233,224,204,0) 70%);border-bottom:1px solid var(--ink)}
.hero-inner{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 64px}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:64px;align-items:start}
.hero-arg{grid-column:1;grid-row:2}
.hero-video{grid-column:2;grid-row:2}
.hero-row > *{min-width:0}
.hero h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(31px,3.2vw,40px);line-height:.98;letter-spacing:-0.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{font-size:20px;line-height:1.5;color:#2A2A2A;max-width:34em;margin:26px 0 0;text-wrap:pretty}
.hero-lede+.hero-lede{margin-top:14px}
.hero-actions{display:flex;gap:14px;align-items:center;margin-top:36px;flex-wrap:wrap}
.btn-ink{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--white);padding:14px 22px;font-size:15px;font-weight:600;box-shadow:var(--shadow-accent-2)}
.btn-ink:hover{color:var(--white)}
.btn-paper{display:inline-block;border:1px solid var(--ink);background:var(--white);color:var(--ink);padding:14px 22px;font-size:15px;font-weight:600}

/* 2. The registry: one search bar over one grid, filtered on the page. */
.registry{padding:0 var(--pad) 80px;max-width:var(--max);margin:0 auto;scroll-margin-top:var(--anchor)}
.registry-head{padding-top:48px}
.registry-head h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.03em;text-transform:uppercase;margin:0}
/* Two controls, two columns. The third column was left behind when the search button went:
   the market filter sat in the middle of the box with 220px of white after it and its
   dividing line ending nowhere (designer, 2026-09-23). */
.search{display:grid;grid-template-columns:minmax(0,1fr) 220px 220px;border:1px solid var(--ink);background:var(--white);box-shadow:var(--shadow);margin-top:22px}
.search input{width:100%;min-width:0;padding:18px 22px;border:0;background:transparent;font-size:17px;outline:none}
/* The native arrow sat too close to the border, so it is redrawn and inset (README,
   "Form controls"). */
.search select{width:100%;min-width:0;padding:0 40px 0 20px;border:0;border-left:1px solid var(--rule);background-color:transparent;font-size:14.5px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 16px center}

/* 3. Persona cards. One grid, no pager: the filter hides what does not match. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:32px 28px;margin-top:40px}
.card{display:flex;flex-direction:column;min-height:400px;padding:26px 26px 22px;border:1px solid var(--ink);background:var(--white);color:var(--ink);text-align:left;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--accent);color:var(--ink)}
/* The name is the card's link and covers the whole card; the (i) sits above it. */
article.card{position:relative}
.card-link{color:var(--accent);text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:4px}
.card-level{display:inline-flex;align-items:center;gap:8px}
.card-info summary{position:relative;z-index:2;list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--accent);border-radius:50%;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:600;font-size:13px;line-height:1;color:var(--accent);background:var(--white)}
.card-info summary::-webkit-details-marker{display:none}
.card-info summary:hover,.card-info[open] summary{background:var(--accent);color:var(--white)}
.card-info summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-info-text{position:absolute;z-index:3;left:18px;right:18px;top:62px;padding:14px 16px;border:1px solid var(--ink);background:var(--white);box-shadow:6px 6px 0 var(--accent);font-size:14px;line-height:1.45;color:var(--ink);text-transform:none;letter-spacing:0}
.card-info-text p{margin:0}
.card-info-text p+p{margin-top:8px}
.card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.card-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
/* The market's flag (registry/flags.py), in the palette's own tones rather than a flag's
   full colours. --flag-green is the one tone the palette lacked. */
.market-flag{display:inline-block;width:18px;height:12px;margin-right:7px;vertical-align:-2px;outline:1px solid var(--faint)}
.market-flag .r{fill:var(--warn)}.market-flag .b{fill:var(--accent)}.market-flag .y{fill:var(--gold)}
/* 50% larger on the persona card (Bo, 2026-09-23). */
.card-meta .market-flag{width:36px;height:24px;vertical-align:-8px;margin-right:10px}
.market-flag .w{fill:var(--white)}.market-flag .k{fill:var(--band)}.market-flag .g{fill:var(--flag-green)}
.market-flag .sw{stroke:var(--white)}.market-flag .sr{stroke:var(--warn)}
.card-who{display:flex;gap:18px;align-items:flex-start;margin-top:26px}
.card-id{min-width:0}
.portrait{width:114px;height:114px;flex:0 0 114px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center}
.portrait.validated{background:var(--avatar-validated)}
.portrait.has-image{background:none;overflow:hidden;padding:0}
.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;border-radius:50%}
.initials{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;color:var(--accent)}
.card-name{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:23px;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;color:var(--accent);text-wrap:balance;overflow-wrap:anywhere}
.card-role{font-size:14px;font-weight:600;color:var(--ink);margin-top:6px;line-height:1.35}
.card-seg{font-size:14px;color:var(--ink);margin-top:8px;line-height:1.4}
.card-quote{font-size:17.5px;font-weight:500;line-height:1.42;margin:auto 0 0;padding-top:28px;text-wrap:pretty}
.card-quote::before{content:"\201C";color:var(--gold);font-family:'Source Serif 4',Georgia,serif;font-size:28px;line-height:0;vertical-align:-8px;margin-right:4px}
.card-quote::after{content:"\201D";color:var(--gold);font-family:'Source Serif 4',Georgia,serif;font-size:28px;line-height:0;vertical-align:-8px;margin-left:2px}
/* A skeleton has no purchase-trigger claim, so it gets the spacer without the quote marks:
   a pair of empty quotes would read as a buyer who said nothing. */
.card-quote.is-empty::before,.card-quote.is-empty::after{content:none}
.card-foot{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:22px;border-top:1px solid var(--ink);padding-top:14px}
.card-score{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.04em;color:var(--accent)}
.card-score.untested{font-size:20px;color:var(--faint)}
.card-score-cap{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.card-sources{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);text-align:right}
.stamp{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px;display:inline-block}

/* 4. The request tile: the last cell, and the one the filter never hides. */
.request-tile{justify-content:center;gap:12px;border-style:dashed;background:transparent;box-shadow:none}
.request-tile:hover{transform:none;box-shadow:none;background:var(--white)}
.request-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint)}
.request-head{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:24px;line-height:1.02;letter-spacing:-0.02em;text-transform:uppercase;max-width:12ch}
.request-copy{font-size:15px;color:var(--muted);max-width:30ch}
.request-btn{display:inline-block;align-self:flex-start;margin-top:8px;border:1px solid var(--ink);background:var(--white);padding:10px 16px;font-size:14px;font-weight:600;box-shadow:var(--shadow-2)}
#empty{margin:24px 0 0;font-size:15px}
#empty a{color:var(--muted)}
#empty a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 5. The ICML band. Somebody else's finding, credited. */

/* 6. How it works. Five steps, the last two priced, then the reliability strip. */
.band.white{background:var(--white);border-bottom:1px solid var(--rule);padding:88px var(--pad)}

/* 7. Services. Four cards; everything but the free one in the paid look, the name as the heading.
   Each card takes its five rows from the shared grid (subgrid), so a row is as tall as its
   tallest cell in any card: the headings sit on one bottom line, the prices start on one
   line, and the buttons end on one line. */

.services{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(9,auto);gap:28px;margin-top:52px;align-items:stretch}
.service{display:grid;grid-template-rows:subgrid;grid-row:span 9;border:1px solid var(--ink);background:var(--white);padding:28px 24px 24px;box-shadow:var(--shadow)}
.service.paid{border-color:var(--accent);background:var(--tint);box-shadow:var(--shadow-accent)}

.service ul{margin:18px 0 0;padding:0;list-style:none}
.service li{padding:9px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--muted);line-height:1.4}
/* 8 and 10. Method and About: the editorial split, with ink-ruled cells. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px}
.split-kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.split-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(30px,3.4vw,46px);line-height:.96;letter-spacing:-0.03em;text-transform:uppercase;margin:14px 0 0;max-width:12ch}
.split-lede{margin:22px 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:34ch}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px}
.cell{border-top:1px solid var(--ink);padding-top:16px}
.cell h3{font-size:16px;font-weight:600;margin:0}
.cell p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* 9. FAQ. Eight answers that open without a script; the script only closes the others. */

.faq-item{border-top:1px solid var(--ink)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:18px;font-weight:600;letter-spacing:-0.01em;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;line-height:1;color:var(--accent);flex:0 0 auto}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0;padding:0 0 22px;font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch}
.faq-end{border-top:1px solid var(--ink)}
.about{padding:36px var(--pad) 80px;max-width:760px;scroll-margin-top:var(--anchor)}
.about h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(32px,4vw,48px);line-height:.96;letter-spacing:-0.03em;text-transform:uppercase;margin:0}
.about h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:16px;text-transform:uppercase;margin:36px 0 0}
.about p{margin:12px 0 0;font-size:17px;font-weight:500;color:#3E3E3A;line-height:1.55;max-width:58ch}

/* 11. Terms and Contact: the same editorial split, in a page of its own. */
.legal{max-width:var(--max);margin:0 auto;padding:20px var(--pad) 104px}
.legal h1{font-size:clamp(34px,3.6vw,50px)}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.legal-cells{display:flex;flex-direction:column}
.legal-cells .cell{padding:20px 0}
.legal-cells .cell:last-child{border-bottom:1px solid var(--ink)}
.contact-card{border:1px solid var(--ink);background:var(--white);padding:32px 36px;box-shadow:var(--shadow)}
.contact-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);margin-top:28px}
.contact-label:first-child{margin-top:0}
.contact-email{display:block;margin-top:8px;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(18px,1.8vw,24px);letter-spacing:-0.02em;color:var(--accent);overflow-wrap:anywhere}
.contact-note{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--dim)}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:12px 18px;font-size:14px;font-weight:600}
.btn-ghost{border:1px solid var(--ink);background:none;padding:12px 18px;font-size:14px;font-weight:600}
.btn-text{border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:28px var(--pad) 44px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--faint)}
/* The disclosure is a sentence, and a sentence in capitals is hard to read. */
.foot > span:first-child{text-transform:none;letter-spacing:0;max-width:72ch}
.foot-links{display:flex;gap:18px}
.foot-guides{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--faint)}
.foot a:hover{color:var(--ink)}
.overlay{position:fixed;inset:0;background:rgba(10,10,10,.38);z-index:8;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;overscroll-behavior:contain}
.modal{background:var(--paper);border:1px solid var(--ink);padding:28px;max-width:440px;width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;min-height:0}
.modal.slim{max-width:420px}
.modal h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;text-transform:uppercase;margin:0}
.modal label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;margin-top:12px}
.modal input,.modal select,.modal textarea{padding:11px 12px;border:1px solid var(--ink);background:var(--white);font-weight:400}
.name{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(32px,4.4vw,52px);line-height:.94;letter-spacing:-0.035em;text-transform:uppercase;margin:6px 0 0}
.section{padding:56px var(--pad);border-bottom:1px solid var(--rule)}
.section h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:-0.02em;margin:0}
.admin{padding:36px var(--pad) 72px}

/* The four-card metrics band was deleted for sitting between the run panel and the work.
   The section 0 numbers survive as one line at the foot of the screen. */

.job-list{margin-top:28px}
.job{border:1px solid var(--ink);background:var(--white);padding:16px 18px;margin-top:10px;display:grid;grid-template-columns:140px 1fr auto;gap:16px;align-items:start}
.job.hot{border-color:#A15C4B}
.job .pri{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint)}
.job h3{font-size:15px;font-weight:600;margin:0}
.job p{margin:6px 0 0;font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.45}

.obs{margin-top:8px;padding:10px 12px;background:#F3F3F0;font-size:13px;font-weight:500;color:#3E3E3A;line-height:1.45}
.refuse{margin-top:18px;border:1px solid var(--ink);padding:22px;background:#F7F2F0}

.back{padding:20px var(--pad) 0;max-width:var(--max);margin:0 auto;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:0.08em;text-transform:uppercase}
.back a{text-decoration:underline;text-underline-offset:3px}
.watch{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.watch article{border:1px solid var(--ink);background:var(--white);padding:20px;box-shadow:var(--shadow)}
.watch h3{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:14px;text-transform:uppercase;margin:8px 0 0}
.log{margin-top:22px;border-top:1px solid var(--rule)}

.hint{margin:6px 0 0;font-size:14px;font-weight:500;color:var(--faint);line-height:1.4}
/* The three help boxes are one panel behind a link now: same words, read as prose. */

.how{margin-top:32px;padding-top:28px;border-top:1px solid var(--rule)}
.how h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:-0.02em;margin:0}
.how ol{margin:12px 0 0;padding:0 0 0 1.2em}
.how li{margin:8px 0;font-size:14.5px;font-weight:500;color:#3E3E3A;line-height:1.5}

/* ===== The persona page. The shared parts below are also the review page's header; the
   2026-09-24 layout of the persona page itself is the "Persona page" block at the end.
   These rules sit before the breakpoint blocks on purpose: .v2-two and .v2-cols carry the
   same specificity as the grids they collapse, so the later rule is the one that wins. */

/* 2. Identity. Who they are on the left, what you can do about it on the right. */
.identity{display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:44px;align-items:start;max-width:var(--max);margin:0 auto;padding:36px var(--pad) 64px}
.identity > *{min-width:0}
.portrait.large{width:144px;height:144px;flex:0 0 144px;box-shadow:var(--shadow)}
.portrait.large .initials{font-size:44px}
.portrait-caption{margin:18px 0 0;max-width:160px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.04em;line-height:1.5;color:var(--faint)}

.identity h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;line-height:.94;letter-spacing:-0.035em;text-transform:uppercase;color:var(--accent);margin:18px 0 0;text-wrap:balance}
/* A buying role runs long and there is no shortening it without hiding words, so the
   heading steps down until it fits three lines. What it has to fit is the column, not the
   window: above 1100px the rail returns and the column drops from full width to about
   470px while the window carries on growing, so a size tied to the window is wrong by a
   third exactly where the layout is tightest. It is tied to the column instead.

   Sizes are measured, not guessed -- the maximum against a 692px column, the minimum
   against the 335px one a 375px phone gives. See registry/pages/persona.py NAME_STEPS.
   Three lines on a phone costs real size: an 84-character name sets at 14px there, under
   the sentence beneath it. That is the trade Bo chose over a fourth and fifth line.

   The window-based sizes below are the fallback for a browser without container queries.
   They are calibrated for the narrow column, so such a browser gets a heading that is a
   little small on a wide screen rather than one that overflows its three lines. */
.identity-who{container-type:inline-size}
.identity h1{font-size:clamp(34px,4.4vw,48px)}
.identity h1.step-2{font-size:clamp(19px,2.6vw,29px);letter-spacing:-0.03em}
.identity h1.step-3{font-size:clamp(16px,2.2vw,24px);letter-spacing:-0.03em;line-height:.98}
.identity h1.step-4{font-size:clamp(14px,1.9vw,20px);letter-spacing:-0.025em;line-height:.99}
.identity h1.step-5{font-size:clamp(11px,1.6vw,17px);letter-spacing:-0.02em;line-height:1.02}
.identity h1.step-6{font-size:clamp(11px,1.2vw,14px);letter-spacing:-0.015em;line-height:1.06}
@supports (font-size:1cqw){
  .identity h1{font-size:clamp(34px,8.9cqw,64px)}
  .identity h1.step-2{font-size:clamp(19px,5.3cqw,38px)}
  .identity h1.step-3{font-size:clamp(16px,4.4cqw,32px)}
  .identity h1.step-4{font-size:clamp(14px,3.7cqw,27px)}
  .identity h1.step-5{font-size:clamp(11px,3.2cqw,23px)}
  /* Past 120 characters three lines on a phone would need 9px. The floor holds at 11px
     and the heading takes a fourth line instead: a name nobody can read is not a heading. */
  .identity h1.step-6{font-size:clamp(11px,2.5cqw,18px)}
}
.identity-role{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--muted);max-width:48ch}
.identity-seg{margin:16px 0 0;font-size:19px;font-weight:500;line-height:1.4;max-width:40ch;text-wrap:pretty}

.actions{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.action{display:block;border:1px solid var(--ink);background:var(--white);color:var(--ink);padding:14px 18px;font-size:15px;font-weight:600;line-height:1.3;box-shadow:var(--shadow-2);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.action:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.action.primary{background:var(--ink);color:var(--white);box-shadow:var(--shadow-accent-2)}
.action.primary:hover{color:var(--white);box-shadow:6px 6px 0 var(--accent)}
.action small{display:block;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.action.primary small{color:var(--white);opacity:.85}

.score-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:72px;line-height:1;letter-spacing:-0.05em}

/* 4. Claims. Six cards, each pinned to the source it rests on. */
.claims-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.claims-head h2,.proof-head h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;margin:0}
.claims-head p,.proof-head p{margin:0;font-size:14.5px;color:var(--muted)}
.tag{margin-top:auto;padding-top:18px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.04em;color:var(--faint)}
.tag.model-pattern{color:var(--warn)}

/* Bo, 2026-09-22: the source under a claim is a link, and every source is listed once. */
.claim-source{display:block;color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-family:'Archivo',sans-serif;font-size:14px;letter-spacing:0;line-height:1.4;overflow-wrap:anywhere}
.claim-source:hover{color:var(--ink)}
.claim-source-meta{display:block;margin-top:4px}

/* 5. Proof. Before in white, After in steel, and the prediction and the miss on the After
   card, because a strip that only shows the hits is an advertisement. */
.proof-section{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 72px}
.proof-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.reviews-list{margin-top:24px;border-top:1px solid var(--ink);padding-top:18px;max-width:60ch}
.reviews-list .kicker{color:var(--accent)}
.reviews-list ul{list-style:none;margin:10px 0 0;padding:0}
.reviews-list li{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule)}
.reviews-title{font-size:15.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.reviews-company{font-size:14px;color:var(--muted)}
.reviews-date{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.reviews-fine{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--faint)}
.reviews-list+.proof-none,.reviews-list+.proof-record{margin-top:28px}
.proof-record{margin:24px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:58ch}
.proof-lead{margin-top:24px}
.proof-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.proof-card{border:1px solid var(--ink);background:var(--white);padding:26px;box-shadow:var(--shadow)}
.proof-card.after{border-color:var(--accent);background:var(--tint);box-shadow:var(--shadow-accent)}
.proof-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint)}
.proof-card.after .proof-eyebrow{color:var(--accent)}
.proof-quote,.proof-copy{margin:14px 0 0;font-size:17px;font-weight:500;line-height:1.45;overflow-wrap:break-word}
.proof-note{margin:20px 0 0;border-top:1px solid var(--rule);padding-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.proof-card.after .proof-note{border-top-color:var(--tint-rule)}
.proof-credit{margin:12px 0 0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.proof-objections{margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:var(--muted)}
.proof-cards{display:flex;flex-direction:column;gap:14px;margin-top:22px}

/* The case page (/en/reviews/<id>) and the list of cases (/en/reviews/index.html). Bo,
   2026-09-25, from the design canvas "Persona Review Before/After", version 3. */
.case-page{max-width:var(--max);margin:0 auto;padding:36px var(--pad) 72px;display:flex;flex-direction:column;gap:44px}
.case-head{display:flex;flex-direction:column;gap:22px}
.case-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.case-stamp{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:15px;letter-spacing:0.04em;text-transform:uppercase;padding:7px 12px;background:var(--ink);color:var(--white);box-shadow:3px 3px 0 var(--accent);align-self:flex-start}
.case-meta,.case-kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint)}
.case-all{margin-left:auto;font-size:14.5px;font-weight:600}
.case-h1{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-0.02em;text-transform:uppercase;max-width:22em;text-wrap:balance}
.case-persona{display:grid;grid-template-columns:104px minmax(0,1fr) 280px;gap:28px;align-items:center;padding:24px 28px;border:1px solid var(--ink);background:var(--white);box-shadow:var(--shadow)}
.case-face{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;background:var(--avatar-validated)}
.case-initials{display:flex;align-items:center;justify-content:center;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:32px;color:var(--accent)}
.case-who{display:flex;flex-direction:column;gap:6px;min-width:0}
.case-name{font-size:24px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.case-name:hover{color:var(--accent)}
.case-role{margin:0;font-size:15.5px;line-height:1.4;color:var(--dim)}
.case-quote{margin:4px 0 0;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:500;font-size:17px;line-height:1.4}
.case-actions{display:flex;flex-direction:column;gap:12px}
.case-btn{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:12px 18px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font-size:15px;font-weight:600}
.case-btn.primary{background:var(--ink);color:var(--white);box-shadow:var(--shadow-accent-2)}
.case-btn.primary:hover{color:var(--white)}
.case-framing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.case-framing>div{display:flex;flex-direction:column;gap:6px;padding:16px 24px 18px;border-left:1px solid var(--rule);min-width:0}
.case-framing>div:first-child{padding-left:0;border-left:0}
.case-framing>div:last-child{padding-right:0}
.case-framing p{margin:0;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.case-verdict{display:grid;grid-template-columns:minmax(0,1fr) 210px 210px;gap:24px;align-items:stretch}
.case-verdict.no-comment{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-comment{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:28px 32px;background:var(--hero-ground);border:1px solid var(--ink)}
.case-comment blockquote{margin:0;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.4;text-wrap:pretty}
.case-comment figcaption{font-size:14.5px;color:var(--muted)}
.case-score{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--ink);background:var(--white);box-shadow:5px 5px 0 var(--rule)}
.case-score.after{box-shadow:5px 5px 0 var(--accent)}
.case-score-top{display:flex;justify-content:space-between;align-items:center}
.case-score.after .case-kicker{color:var(--accent)}
.case-delta{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;padding:2px 6px;background:var(--tint);border:1px solid var(--tint-rule);color:var(--accent)}
.case-score-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:76px;line-height:.9;letter-spacing:-0.04em;color:var(--warn)}
.case-score.after .case-score-n{color:var(--accent)}
.case-bar{position:relative;height:8px;background:var(--rule-lighter)}
.case-bar>span:first-child{display:block;height:8px;background:var(--warn)}
.case-score.after .case-bar>span:first-child{background:var(--accent)}
.case-tick{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink)}
.case-score p{margin:0;font-size:15px;line-height:1.4;color:var(--dim)}
.case-side{display:flex;flex-direction:column;gap:20px}
.case-side-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.case-side-head h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.03em;text-transform:uppercase}
.case-side-head p{margin:0;font-size:14px;color:var(--muted)}
.case-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.case-shot{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.case-shot figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.case-shot.after figcaption .case-kicker{color:var(--accent)}
.case-shot-score{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;color:var(--warn)}
.case-shot.after .case-shot-score{color:var(--accent)}
.case-frame{border:1px solid var(--ink);background:var(--white);box-shadow:7px 7px 0 var(--rule);flex:1}
.case-shot.after .case-frame{box-shadow:7px 7px 0 var(--accent)}
.case-frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rule);background:#F4F4F1}
.case-frame-bar>span:not(.case-frame-url){width:9px;height:9px;border-radius:50%;background:var(--rule);flex:0 0 auto}
.case-frame-url{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted)}
.case-frame-url a{color:var(--muted)}
.case-shot-img{position:relative}
.case-shot-img img{display:block;width:100%;height:auto}
.case-shot-text{padding:24px;font-size:16px;line-height:1.6;white-space:pre-line;overflow-wrap:break-word}
.case-pin{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--white);font-weight:700;font-size:13px}
.case-pin.warn{background:var(--warn)}
.case-shot-img .case-pin{position:absolute;width:34px;height:34px;font-size:15px;transform:translate(-50%,-50%);box-shadow:2px 2px 0 var(--ink)}
.case-notes{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--ink)}
.case-note{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:18px 0;border-bottom:1px solid var(--rule)}
.case-note p{margin:0;font-size:15px;line-height:1.5}
.case-note-before{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px}
.case-note-after{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.case-note-after.because p{font-size:14px;color:var(--muted)}
.case-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--accent);background:var(--tint);color:var(--accent)}
.case-tag.open{border-color:var(--warn);background:var(--warn-tint);color:#8A4A3B}
.case-label{margin:0;padding-top:18px;border-top:1px solid var(--ink);font-size:15px;line-height:1.55;color:var(--muted)}
.case-lede{margin:-24px 0 0;font-size:18px;font-weight:500;line-height:1.45;color:var(--dim);max-width:46ch}
.case-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:32px 28px}
.case-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--ink);background:var(--white);box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.case-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--accent)}
.case-card h2{margin:0;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.case-card h2 a{color:var(--ink)}
.case-card h2 a::after{content:"";position:absolute;inset:0}
.case-card-who{margin:0;font-size:14.5px;line-height:1.4;color:var(--muted)}
.case-card-scores{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:28px;letter-spacing:-0.02em;color:var(--accent)}
.case-card-open{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--accent)}
.case-none{margin:0;font-size:16px;color:var(--muted)}
@media (max-width:960px){.case-persona{grid-template-columns:80px minmax(0,1fr)}.case-face{width:80px;height:80px}.case-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}.case-btn{flex:1 1 220px}.case-verdict{grid-template-columns:repeat(2,minmax(0,1fr))}.case-comment{grid-column:1 / -1}}
@media (max-width:760px){.case-framing,.case-shots,.case-note{grid-template-columns:minmax(0,1fr)}.case-framing>div{padding:14px 0;border-left:0;border-top:1px solid var(--rule)}.case-framing>div:first-child{border-top:0}.case-note{gap:12px}.case-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.case-verdict{grid-template-columns:minmax(0,1fr)}.case-score-n{font-size:60px}.case-persona{grid-template-columns:minmax(0,1fr);padding:20px;gap:16px}.case-face{width:72px;height:72px}.case-name{line-height:1.2}}
.proof-cards .proof-card{padding:16px 20px;box-shadow:var(--shadow-2)}
.proof-card summary{font-size:14px;font-weight:600;cursor:pointer}
.proof-none{margin-top:24px;border:1px dashed var(--ink);background:var(--white);padding:26px;max-width:60ch}
.proof-none p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.proof-none a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.proof-fine{margin:18px 0 0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}

/* 6. Feedback. One box, read by a person, published nowhere. */
.band.white.feedback{padding:64px var(--pad) 88px}

/* ===== The v2 request page (UI/v2/README.md "3. Request a persona", canvas 345 to 441)
   The rail says where you are and what the answers so far buy; the card beside it is the
   form. These rules sit before the breakpoint blocks so .v2-two and .v2-cols can collapse
   the grids they name. */
.form-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:start;max-width:var(--max);margin:0 auto;padding:20px var(--pad) 104px}
.form-page > *{min-width:0}
.rail{position:sticky;top:calc(var(--nav) + 20px)}
.rail h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(34px,3.6vw,50px);line-height:.96;letter-spacing:-0.03em;text-transform:uppercase;margin:14px 0 0;max-width:12ch;text-wrap:balance}
.rail-lede{margin:20px 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:36ch}
/* One card. Two sections since 2026-09-21: who the buyer is, and who the persona is for. */
.form-card{border:1px solid var(--ink);background:var(--white);padding:36px 40px 40px;box-shadow:var(--shadow)}
.step-next{margin-top:44px;padding-top:36px;border-top:1px solid var(--rule)}
.step h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:28px;line-height:1.05;letter-spacing:-0.02em;text-transform:uppercase;margin:10px 0 0}
.step-lede{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:60ch}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field .lbl{font-size:15px;font-weight:600}
.field .help{font-size:13.5px;line-height:1.5;color:var(--muted)}
.field input,.field select,.field textarea{margin-top:4px;width:100%;padding:13px 16px;border:1px solid var(--ink);background:var(--white);font-family:inherit;font-size:16px;outline:none}
.field select{background-color:var(--white)}
.field textarea{resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(52,85,127,.16)}
.field.wide{grid-column:1 / -1}
.field.solo{margin-top:28px;max-width:420px}
.star{color:var(--accent);font-weight:700}

/* Who it is for, and the paid way to keep it private. */
.choice{border:0;padding:0;margin:28px 0 0;min-width:0}
.choice legend{padding:0}

/* ===== The v2 order pages (UI/v2/README.md "4" to "6", canvas lines 443 to 551) ======
   Same rail-and-card shell as the request page, at the ratio the order pages use. The rail
   is the offer, read from config/products.json; the card beside it is still the sandbox
   form that phase 3 replaces, so its controls are styled here rather than in .field. */
.form-page.order-page{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
.rail-price{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;letter-spacing:-0.03em;line-height:1;margin:18px 0 0;color:var(--accent)}
.rail-points{list-style:none;margin:24px 0 0;padding:0;max-width:400px}
.rail-points li{padding:10px 0;border-top:1px solid var(--rule);font-size:14.5px;color:var(--dim);line-height:1.45}
.rail-fine{margin:20px 0 0;font-size:14.5px;color:var(--faint);line-height:1.5;max-width:40ch}
.order-card label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600;margin-top:20px}
.order-card label:first-of-type{margin-top:0}
.order-card input,.order-card select,.order-card textarea{width:100%;min-width:0;padding:13px 16px;border:1px solid var(--ink);background:var(--white);font-family:inherit;font-size:16px;font-weight:400;outline:none}
.order-card select{background-color:var(--white)}
.order-card textarea{resize:vertical;line-height:1.5}
.order-card input[type=checkbox]{width:auto;flex:0 0 auto;accent-color:var(--accent)}
.order-card input:focus,.order-card select:focus,.order-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(52,85,127,.16)}
.order-card .hint{margin-top:10px}

/* The card the server returns: the request is in, or nothing was saved and why. */
.done-page{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 104px}
.done-card{max-width:620px;margin-top:64px;border:1px solid var(--ink);background:var(--white);padding:40px;box-shadow:var(--shadow)}
.done-card .kicker{font-size:12px;letter-spacing:0.14em;color:var(--accent)}
.done-card h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:36px;line-height:1;letter-spacing:-0.03em;text-transform:uppercase;margin:14px 0 0}
.done-card p{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--dim)}
.done-card p.fine{margin-top:12px;font-size:14.5px;color:var(--muted)}
.done-card ul{margin:18px 0 0;padding-left:20px;font-size:15.5px;line-height:1.6;color:var(--dim);max-width:56ch}
.done-card li{margin-top:8px}
.done-card .btn-ink{margin-top:10px}

/* ===== The v2 operator admin (UI/v2/README.md "Operator admin", canvas Admin v2.dc.html
   lines 34 to 200). Three numbered boxes in the order work moves: sources to read, requests
   to build, personas built. The old admin screens' tab strip has since gone with the
   screen that rendered it; .refuse is still rendered by the checkout and the model form.
   Breakpoint hooks, so markup pairs the class below with the one named, no third hook added:
     op-head            + v2-two   -> stacks under the metric tiles at 1100
     op-fields          + v2-cols  -> the edit panel's two fields collapse to one at 900
     op-claim-row       + v2-cols  -> label / textarea / tag stack at 900
     op-build-row       + v2-cols  -> checkbox / content / timestamp stack at 900
     op-built-row       + v2-cols  -> stamp / name / score / actions stack at 900
     op-search          + v2-cols  -> the three search fields stack at 900
   Each of those already collapses through the generic .v2-two / .v2-cols selectors in the
   media blocks below - nothing needs adding there. */

.op-page{max-width:1180px;margin:0 auto;padding:28px var(--pad) 64px}
.op-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.op-head > *{min-width:0}
.op-kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.op-h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:44px;line-height:.94;letter-spacing:-0.035em;text-transform:uppercase;margin:10px 0 0}
.op-lede{font-size:15px;color:var(--muted);max-width:60ch;margin:12px 0 0}

.op-tabs{display:flex;gap:24px;margin-top:22px;border-bottom:1px solid var(--ink)}
.op-tab{background:none;border:0;padding:0 0 12px;font-size:14.5px;font-weight:600;margin-bottom:-1px;color:var(--faint);border-bottom:2px solid transparent}
.op-tab-on{color:var(--ink);border-bottom-color:var(--ink)}

/* The tab strip's far end, and the Operation tab: a status line always in view, then the
   sections that used to be screens, each with an address so a kept link still lands. The
   sections keep their old markup, so the old admin rules style them; .op-embed only takes
   the old page's padding away, since the operator page has its own. */
.op-tab-link{margin-left:auto;padding:0 0 12px;font-size:13.5px;font-weight:600;color:var(--muted)}
.op-tab-link-next{margin-left:0}
@media (max-width:560px){.op-tabs{flex-wrap:wrap;gap:6px 18px}}

/* The old screens' form rules stack a label over its input and cap it at 28rem. A tick box
   sits beside its words, at full width. */

.op-notice{margin:14px 0 0;padding:10px 14px;border:1px solid var(--ink);background:var(--white);font-size:14px;font-weight:600;max-width:80ch}
/* The operator's guide (/admin/guide). Workflows first, each step saying who does it; the detail is folded away. */
.guide{max-width:940px}

.guide a{color:var(--accent)}
.guide code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;word-break:break-all}

/* Home: six parts on one screen, in the order of a daily check (registry/screens/home.py). */

.op-box.op-home-box{margin-top:16px}
.op-home-box .op-box-head{padding:12px 20px}
.op-home-empty{margin:0;padding:12px 20px;font-size:13.5px;color:var(--muted)}
.op-dash{list-style:none;margin:0;padding:6px 20px 14px}
.op-dash li{padding:6px 0}
.op-dash-link{color:var(--ink);text-decoration:none;font-size:15px}
.op-dash-link:hover{color:var(--accent)}
.op-dash-n{display:inline-block;min-width:2ch;font-size:20px;font-variant-numeric:tabular-nums;color:var(--accent)}
.op-dash-list li{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--rule)}
.op-dash-list li:last-child{border-bottom:0}
.op-dash-row a{color:var(--ink);text-decoration:none;font-size:15px}
.op-dash-row a:hover{color:var(--accent)}
.op-dash-meta{font-size:13.5px;color:var(--muted)}

.op-tab-link-on{color:var(--ink)}
/* Settings: three boxes (registry/screens/settings.py). */
.op-box.op-set-box{margin-top:20px}
.op-set-body{padding:4px 20px 22px}
.op-set-body form + form,.op-set-body .op-set-next{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.op-set-body p.op-set-next{margin-bottom:0}
.op-set-state{margin:0;font-size:14px;font-weight:600}
.admin form label.op-set-tick{flex-direction:row;gap:8px;align-items:flex-start;font-weight:400;color:var(--muted);max-width:none}
.admin form .op-set-tick input{padding:0;margin-top:3px;width:auto}

/* The help item: a "?" at the right of a heading, which opens three lines under it. */

.op-help-row{display:flex;align-items:baseline;gap:0 12px;padding-right:36px}
.op-help{flex:0 0 100%;order:9;min-width:0}
.op-help > summary{position:absolute;top:50%;right:20px;transform:translateY(-50%);width:22px;height:22px;box-sizing:border-box;border:1px solid var(--ink);background:var(--white);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;line-height:20px;text-align:center;cursor:pointer;list-style:none}
.op-help > summary::-webkit-details-marker{display:none}
.op-help[open] > summary{top:12px;transform:none;background:var(--ink);color:var(--white)}
.op-help-row .op-help > summary{right:0}

.op-embed{padding:0}
.op-section{margin-top:8px;scroll-margin-top:16px}

.op-box{border:1px solid var(--ink);background:var(--white);margin-top:28px;box-shadow:var(--shadow-quiet)}
.op-box.op-primary{box-shadow:var(--shadow)}
.op-box-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 20px;border-bottom:1px solid var(--ink)}
.op-box-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:18px;letter-spacing:-.01em;margin:0;text-transform:uppercase}
.op-box-count{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* Box 1, to build. */

.op-build-state{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-top:6px}

.op-build-note{margin:0 0 0 8px;font-size:13px;color:var(--faint);line-height:1.45;max-width:60ch}

.op-built-note{margin:0;padding:14px 20px 18px;border-top:1px solid var(--rule);font-size:13px;color:var(--faint);line-height:1.45}

/* Buttons: compose a size, a fill and a shadow rather than naming one class per button -
   the canvas repeats the same three sizes and two fills across a dozen actions. */
.op-btn{border:1px solid var(--ink);background:var(--white);color:var(--ink);font-weight:600;display:inline-block}

.op-btn-sm{padding:9px 14px;font-size:13px}
.op-btn-xs{padding:7px 12px;font-size:12.5px}
.op-btn-accent{border-color:var(--accent);background:var(--accent);color:#fff}
.op-btn-warn{border-color:var(--warn);background:var(--warn);color:#fff}
.op-btn-shadow{box-shadow:var(--shadow-2)}
.op-btn-text-warn{border:0;background:none;padding:7px 4px;font-size:12.5px;font-weight:600;color:var(--warn);text-decoration:underline;text-underline-offset:3px}

/* Shared by all three boxes' running-job strip and mono log. */
.op-busy{border-top:1px solid var(--accent);padding:14px 20px;font-size:14px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:10px}
.op-busy-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.op-output{border-top:1px solid var(--rule);padding:16px 20px;margin:0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;background:var(--paper)}

/* Box 3, built - the primary object on the screen (.op-primary above gives it the 7px
   ink shadow the other two boxes don't carry). */
.op-search{display:grid;grid-template-columns:1fr 170px 190px;gap:10px;padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--paper)}
.op-search input,.op-search select{border:1px solid var(--ink);background:var(--white);padding:10px 12px;font-size:14px;width:100%;box-sizing:border-box}
.op-built-empty{padding:18px 20px;margin:0;color:var(--muted);font-size:14px}
.op-built-row-wrap{border-bottom:1px solid var(--rule)}
.op-built-row{display:grid;grid-template-columns:132px minmax(0,1fr) 150px auto;gap:20px;align-items:center;padding:14px 20px}
.op-stamp{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border:1px solid var(--accent);color:var(--accent);text-align:center}
.op-stamp.op-draft{border-color:var(--faint);color:var(--faint)}
.op-built-name{min-width:0}
.op-built-title{display:block;font-size:15px;line-height:1.35}
.op-built-title a{font-weight:600}
.op-built-seg{color:var(--muted)}
.op-built-meta{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint);margin-top:5px;letter-spacing:.02em}
.op-retest-note{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--warn)}
.op-score{display:flex;align-items:center;gap:10px}
.op-score-track{flex:1;height:4px;background:var(--rule-lighter)}
.op-score-fill{display:block;height:4px;background:var(--accent)}
.op-score-fill.op-draft{background:var(--band-dim)}
.op-score-text{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:16px;letter-spacing:-0.03em;color:var(--accent);min-width:40px;text-align:right}
.op-score-text.op-draft{color:var(--faint)}
.op-built-actions{display:flex;gap:8px;align-items:center;white-space:nowrap}

/* The edit panel: steel tint, 7px steel shadow, denser inputs than the site's own forms. */
.op-edit{margin:0 20px 18px;border:1px solid var(--ink);background:var(--tint);padding:20px 22px;box-shadow:var(--shadow-accent)}
.op-person{margin-top:22px}
.op-person .op-edit{margin:22px 0 0}
.op-person .op-output{border:1px solid var(--rule);margin-top:18px}
.op-person-back{margin:0 0 18px;font-size:14px;font-weight:600}
.op-person-back a{color:var(--accent)}
.op-person-back a::before{content:"\2190  "}
.op-person-head{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.op-person-head>div:last-child{flex:1;min-width:260px}
.op-person-name{font-size:40px;overflow-wrap:anywhere}
.op-person-meta{margin:12px 0 10px;font-size:15px;color:var(--dim);max-width:70ch}
.op-person-face{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:200px}

.op-face-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.op-edit-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.op-edit-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:15px;text-transform:uppercase;margin:0}
.op-edit-stamp{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.op-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:16px}
.op-fields > *{min-width:0}
.op-field{font-size:13px;font-weight:600;color:var(--muted)}
.op-field.op-wide{grid-column:1 / -1}
.op-field input,.op-field select,.op-field textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid var(--ink);background:#fff;padding:8px 10px;font-size:14px;font-weight:400;color:var(--ink)}
.op-field textarea{min-height:56px;resize:vertical;line-height:1.45}
.op-claims-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--accent);margin:22px 0 0}
.op-claim-row{display:grid;grid-template-columns:140px 1fr 160px;gap:12px 16px;align-items:start;margin-top:12px}
.op-claim-label{font-size:13px;font-weight:600;color:var(--muted);padding-top:9px}
.op-claim-row textarea{width:100%;box-sizing:border-box;border:1px solid var(--ink);background:#fff;padding:8px 10px;font-size:14px;min-height:56px;resize:vertical;line-height:1.45}
.op-claim-row input{width:100%;box-sizing:border-box;border:1px solid var(--ink);background:#fff;padding:8px 10px;font-size:12.5px;font-family:'IBM Plex Mono',monospace}
/* The full profile in the edit panel (Bo, 2026-09-22): folded shut under the claims. */
.op-profile{margin-top:18px;border-top:1px solid var(--rule)}
.op-profile > summary{cursor:pointer;padding:12px 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--accent)}
.op-pf-oceans{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px}
.op-pf-ocean{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:12px}
.op-pf-ocean input{width:56px;box-sizing:border-box;border:1px solid var(--ink);background:#fff;padding:6px 8px;font-size:14px}
.op-pf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;align-items:start;margin-top:10px}
.op-pf-label{grid-column:1 / -1;font-size:13px;font-weight:600;color:var(--muted);padding-top:6px}
.op-edit-note{font-size:12.5px;color:var(--muted);margin:16px 0 0;line-height:1.5}
.op-refuse{border:1px solid var(--warn);background:var(--warn-tint);padding:12px 14px;font-size:13.5px;margin-top:14px}
.op-refuse b{color:var(--warn)}
.op-refuse.op-refuse-plain{background:var(--white)}
.op-edit-actions{display:flex;gap:10px;align-items:center;margin-top:16px}

/* The delete panel: same shell as edit, warn instead of steel, and its own 7px shadow. */
.op-delete{margin:0 20px 18px;border:1px solid var(--warn);background:var(--warn-tint);padding:20px 22px;box-shadow:var(--shadow-warn)}
.op-delete-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:15px;text-transform:uppercase;margin:0}
.op-delete-seg{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.op-delete-field{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-top:14px}
.op-delete-field input{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid var(--ink);background:#fff;padding:9px 10px;font-size:14px;font-weight:400;color:var(--ink)}
.op-delete-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}

/* 11. How to use a persona. Three cards with big numerals, an expander under each, then the
   prompt list. Every rule stays inside .howto. */
.howto{padding:36px var(--pad) 96px;max-width:var(--max);margin:0 auto}
.howto-head{max-width:900px}
.howto-lede{margin:22px 0 0;font-size:19px;line-height:1.5;color:#2A2A2A;max-width:52ch;text-wrap:pretty}
.howto-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.howto-step{display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--white);padding:26px 24px 22px;box-shadow:var(--shadow)}
.howto-list{margin:16px 0 0;padding:0;list-style:none}
.howto-list li{padding:9px 0;border-top:1px solid var(--rule);font-size:14px;line-height:1.45;color:var(--muted)}
.howto-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:44px;line-height:1;letter-spacing:-0.04em;color:var(--accent)}
.howto-step h2,.howto-step h3{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:21px;line-height:1.05;letter-spacing:-0.02em;text-transform:uppercase;margin:16px 0 0;text-wrap:balance}
.howto-compact{margin-top:52px}
/* The three pictures are one box: same height, and pushed to the foot of a card so they
   line up across the row whatever the heading above them runs to (Bo, 2026-09-23). */
.howto-steps .howto-pic{height:292px;box-sizing:border-box;overflow:hidden}
.howto-compact .howto-pic{height:292px;box-sizing:border-box;margin-top:auto;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.howto-compact .howto-pic-file{flex-direction:row}
.howto-compact .howto-file svg{width:60px;height:75px}
.howto-compact .howto-chips{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px}
.howto-compact .howto-chip{padding:6px 9px;font-size:13px}
.howto-compact .howto-pic-persona{justify-content:center;gap:10px}

.howto-more .howto-list,.howto-more .howto-says{margin-top:12px}
.howto-step p{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:var(--dim)}
/* The heading and the line under it hold two and three lines' room whatever they say, so
   the picture under them starts at the same height on all three cards (Bo, 2026-09-23). */
.howto-step > h2,.howto-step > h3{min-height:44px}
.howto-step > p:first-of-type{min-height:72px}
.howto-pic{margin:18px 0 0;border:1px solid var(--ink);background:var(--paper);padding:16px}
.howto-pic-persona{display:flex;flex-direction:column;gap:14px}
.howto-mini{display:flex;gap:16px;align-items:center}
.howto-mini .portrait{width:104px;height:104px;flex:0 0 104px}
.howto-mini .initials{font-size:36px}
.howto-mini-id{min-width:0}
.howto-mini-name{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:18px;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;color:var(--accent);overflow-wrap:anywhere}
.howto-mini-role{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.35}
.howto-mini-seg{font-size:14px;color:var(--ink);margin-top:6px;line-height:1.35}
.howto-mini-line{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.35}
.howto-mini-meta{display:flex;align-items:center;gap:2px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.howto-mini-btn{align-self:flex-start;border:1px solid var(--ink);background:var(--ink);color:var(--white);padding:9px 14px;font-size:14px;font-weight:600;box-shadow:var(--shadow-accent-2)}
.howto-pic-file{display:flex;align-items:center;gap:14px}
.howto-file{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;max-width:120px}
.howto-file svg{width:76px;height:95px;display:block}
.howto-file-name{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.howto-file-label{font-size:12px;color:var(--faint);text-align:center}
.howto-arrow{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:26px;color:var(--accent);flex:0 0 auto}
.howto-into{min-width:0}
.howto-into-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.howto-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.howto-chip{border:1px solid var(--ink);background:var(--white);padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.howto-pic-ba{display:grid;gap:10px}
.howto-ba{padding:10px 12px;border:1px solid var(--rule);background:var(--white)}
.howto-ba-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.howto-ba p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.howto-ba-before p{text-decoration:line-through;text-decoration-color:var(--warn)}
.howto-ba-after{border-color:var(--accent);background:var(--tint)}
.howto-ba-after p{color:var(--ink);font-weight:600}
.howto-verdict{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--accent)}
.howto-face-small{width:36px;height:36px;flex:0 0 36px}
.howto-face-small .initials{font-size:12px}
.howto-says{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.howto-say{font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--tint-rule);background:var(--tint);color:var(--ink)}
.howto-more{margin-top:auto;padding-top:18px;border-top:0}
.howto-more summary{border-top:1px solid var(--ink)}
.howto-more summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 0;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.howto-more summary::-webkit-details-marker{display:none}
.howto-more summary::after{content:"+";font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:20px;line-height:1;color:var(--accent);flex:0 0 auto}
.howto-more[open] summary::after{content:"\2212"}
.howto-more p{margin:10px 0 4px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.howto-links{margin-top:72px;border-top:1px solid var(--ink);padding-top:28px;max-width:64ch}
.howto-links h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:26px;line-height:1;letter-spacing:-0.03em;text-transform:uppercase;margin:0}
.howto-links p{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.howto-prompt-list{margin:20px 0 0;padding:0;list-style:none}
.howto-prompt{padding:12px 0;border-top:1px solid var(--rule);font-size:15.5px}
.howto-prompt a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.howto-prompt span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}

.howto-actions{display:flex;gap:14px;align-items:center;margin-top:48px;flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .65s var(--ease) both}
  .rise-2{animation:rise .65s var(--ease) .07s both}
  .op-busy-dot{animation:pulse 1s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:1100px){
  .hero-inner{padding:48px var(--pad) 56px}
  .hero-row{grid-template-columns:minmax(0,1fr)}
  .hero-video{grid-column:1;grid-row:3;margin-top:48px}
  .howto-steps{grid-template-columns:minmax(0,1fr)}
  .howto-steps .howto-pic,.howto-compact .howto-pic{height:auto;min-height:0;overflow:visible}
  .howto-step > h2,.howto-step > h3,.howto-step > p:first-of-type{min-height:0}
  
  .v2-two,.split.even,.form-page.order-page{grid-template-columns:minmax(0,1fr)}
  .process.v2-cols{grid-template-columns:repeat(3,1fr)}
  .services.v2-cols{grid-template-columns:repeat(2,1fr)}
  .identity{grid-template-columns:minmax(0,1fr)}
  .claims.v2-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{position:static}
  .rail h1,.rail-lede{max-width:none}
}
@media (max-width:900px){
  :root{--pad:20px}
  .hero-row,.nav{grid-template-columns:1fr !important}
  .nav{height:auto;padding:14px var(--pad);flex-wrap:wrap;gap:12px 20px}
  .nav-links{width:100%;gap:16px}
  .nav-links{gap:14px}
  .nav.nav-folds .nav-toggle{display:inline-flex}
  .nav.nav-folds{flex-wrap:wrap}
  .nav.nav-folds .nav-links{width:auto;margin-left:auto}
  .nav.nav-folds:not(.nav-open) .nav-links a:not(.nav-request){display:none}
  .nav.nav-folds.nav-open .nav-links{width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0 6px;border-top:1px solid var(--rule);margin-left:0}
  .nav.nav-folds.nav-open .nav-request{order:10}
  .v2-cols,.process.v2-cols,.services.v2-cols,.claims.v2-cols{grid-template-columns:minmax(0,1fr)}.grid.v2-grid{grid-template-columns:minmax(0,1fr)}
  .search{grid-template-columns:minmax(0,1fr)}
  .search select{border-left:0;border-top:1px solid var(--rule);padding:14px 40px 14px 20px}
  
  
  .job,.watch{grid-template-columns:1fr !important}
  .form-card{padding:26px 22px 28px}
  .done-card{padding:28px 24px}
}

/* v2: the only motion is the card lift and the hero rise. Neither runs when the reader asked for none. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* --- 2026-09-22: the visitor-flow review ------------------------------------------ */
.skip-link{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--white);padding:10px 14px;font-weight:600}
.skip-link:focus{top:12px;color:var(--white)}
#content:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-toggle{display:none;margin-left:auto;align-items:center;border:1px solid var(--ink);background:var(--white);padding:8px 12px;font-size:14px;font-weight:600}
.nav-toggle[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.figure-source{margin:10px 0 0;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.02em;line-height:1.5;color:var(--faint)}
.figure-source.on-band{color:var(--band-dim);margin-top:16px}
.figure-source.on-band a,.figure-source.on-band a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.howto-get{margin:40px 0 8px;border:1px solid var(--ink);background:var(--white);padding:28px 28px 30px;box-shadow:var(--shadow)}
.howto-get h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:26px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.howto-get-lede{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:66ch}
.howto-get-list{list-style:none;margin:22px 0 0;padding:0}
/* One file set at a time (Bo, 2026-09-23): every row is written, the picked one shows. */
.howto-get-row{display:none;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px 28px;align-items:center;padding:18px 0;border-top:1px solid var(--rule-light)}
.howto-get-row.is-chosen{display:grid}
.howto-get-row .howto-mini .portrait{width:72px;height:72px;flex:0 0 72px}
.howto-get-row .howto-mini .initials{font-size:22px}
.howto-get-files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.howto-file-link{display:block;border:1px solid var(--ink);background:var(--white);color:var(--ink);padding:12px 14px;box-shadow:var(--shadow-quiet);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.howto-file-link:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--shadow-2)}
.howto-file-link b{display:block;font-size:15px}
.howto-file-link small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.howto-file-link.primary{background:var(--ink);color:var(--white);box-shadow:var(--shadow-accent-2)}
.howto-file-link.primary:hover{color:var(--white)}
.howto-file-link.primary small{color:var(--white);opacity:.85}
.howto-get-none{margin:18px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
a.howto-mini-btn:hover{color:var(--white);background:var(--accent);border-color:var(--accent)}
@media (max-width:1100px){.howto-get-row{grid-template-columns:minmax(0,1fr)}}
/* The narrowest phones: one row, the name and the Menu button; everything else is inside it. */
@media (max-width:560px){
  .nav.nav-folds:not(.nav-open) .nav-links{display:none}
}
@media (max-width:900px){
  .howto-get{padding:22px 18px 24px}
  .howto-get-files{grid-template-columns:minmax(0,1fr)}
  .howto-pic-file{flex-wrap:wrap}
  .howto-into{flex:1 1 100%}
}

/* The contact form (launch review, 2026-09-23). */
.contact-form{display:flex;flex-direction:column;gap:12px;margin:6px 0 22px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.contact-form input,.contact-form textarea{border:1px solid var(--ink);background:var(--white);padding:10px 12px;font-size:15px;font-weight:400}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-form .btn{align-self:flex-start}
.contact-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.order-piece{border:1px solid var(--rule);padding:14px 16px 16px;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.order-piece legend{font-weight:700;padding:0 6px}
.order-facts{margin:8px 0 18px;padding-left:18px;line-height:1.7}

/* The intro video in the hero (registry/pages/intro_video.py, site/intro/intro.js).
   A 720 px stage scaled into a square; the captions and the controls sit outside the scale
   so they stay readable and 44 px to the touch. Without .iv-live every element shows its
   final state: that is the still for no JavaScript and for reduced motion. */
.hero-video{justify-self:end;width:100%;max-width:600px}
.hero-player{width:100%}
/* The intro tile (design option B2, Bo 2026-09-24): four faces in a row over the bar that plays. */
.hero-tile{border:1px solid var(--ink);box-shadow:var(--shadow);background:var(--ink)}
.hero-tile-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px}
.hero-tile-faces img{display:block;width:100%;height:auto;aspect-ratio:4/9;object-fit:cover}
.hero-tile-go{display:flex;align-items:center;gap:16px;width:100%;min-height:76px;padding:12px 16px;border:0;border-top:1px solid var(--ink);background:var(--ink);color:var(--white);text-align:left}
.hero-tile-go:hover{background:var(--band)}
.hero-tile-go:active{transform:none}
.hero-tile-play{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--white)}
.hero-tile-play svg{width:16px;height:16px;fill:var(--ink);margin-left:2px}
.hero-tile-words{display:flex;flex-direction:column;gap:4px;min-width:0}
.hero-tile-k{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.hero-tile-t{font-size:16px;font-weight:500;line-height:1.35;color:var(--steel-text)}

/* The player: a 16:9 picture over one dark bar, the same box as the intro tile it replaces.
   The picture is an 800 x 450 stage scaled to fit; the bar holds pause, the captions, sound and
   full screen at their real size. Without .iv-live every element shows its final state. */
.iv{margin:0;border:1px solid var(--ink);box-shadow:var(--shadow);background:var(--ink);display:flex;flex-direction:column}
.iv-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--paper);overflow:hidden;cursor:pointer;--s:.75;--x:0px;--y:0px}
.iv:fullscreen{width:100vw;height:100vh;border:0;box-shadow:none}
.iv:fullscreen .iv-frame{flex:1 1 auto;aspect-ratio:auto;height:auto}
.iv:-webkit-full-screen{width:100vw;height:100vh;border:0;box-shadow:none}
.iv:-webkit-full-screen .iv-frame{flex:1 1 auto;aspect-ratio:auto}
.iv-stage{position:absolute;left:0;top:0;width:800px;height:450px;transform:translate(var(--x),var(--y)) scale(var(--s));transform-origin:0 0;color:var(--ink)}
.iv-scene{position:absolute;inset:0;visibility:hidden;opacity:0;background:var(--paper);transition:opacity .5s var(--ease),visibility 0s linear .5s}
/* Since 2026-10-05 scenes cross-fade: the next one fades in over the last, where they cut. */
.iv-scene.cur{visibility:visible;opacity:1;z-index:1;transition:opacity .5s var(--ease),visibility 0s}
.iv-still .iv-scene{transition:none}
.iv-warm{background:var(--hero-ground)}
.iv-live .iv-scene .iv-drift{transform-origin:0 0;transition:transform 9s linear}
.iv-live .iv-scene.cur .iv-drift{transform:scale(1.02)}
.iv-bar{position:absolute;top:0;left:0;right:0;height:4px;background:var(--rule-lighter);z-index:5}
.iv-bar i{display:block;height:100%;width:0;background:var(--ink)}
.iv-still .iv-bar{display:none}

.iv-mono,.iv-kicker,.iv-example,.iv-peter,.iv-ask,.iv-chip,.iv-chip-ink,.iv-chip-line,.iv-badge,.iv-claim-k,.iv-mono-row,.iv-file,.iv-page-bar span,.iv-fix,.iv-gold-kicker,.iv-n,.iv-offer-tag,.iv-cta,.iv-replay,.iv-found,.iv-note,.iv-again{font-family:'IBM Plex Mono',monospace;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.iv-h0,.iv-h1,.iv-h2,.iv-h4,.iv-name,.iv-old,.iv-new,.iv-light,.iv-wordmark,.iv-score-n,.iv-initials{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.02em}
.iv-pad{position:absolute;left:44px;right:44px;top:44px}
.iv-scene[data-b="01"] .iv-pad{top:70px}
.iv-stack{display:flex;flex-direction:column;gap:18px}
.iv-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.iv-h0{margin:10px 0 0;font-size:84px;line-height:.92}
.iv-h1{margin:0;font-size:52px;line-height:.98}
.iv-h2{margin:0;font-size:42px;line-height:1}

.iv-h4{margin:0;font-size:34px;line-height:1}
.iv-accent{color:var(--accent)}
.iv-kicker{font-size:14px;color:var(--accent)}
.iv-quiet{color:var(--faint);font-size:13px}
.iv-body{margin:0;font-size:19px;line-height:1.4}
.iv-dim{opacity:.35}

@keyframes iv-blink{50%{opacity:0}}

.iv-faces{display:grid;grid-template-columns:repeat(2,124px);gap:18px;justify-content:center}
.iv-face{width:124px;height:124px;border-radius:50%;border:3px solid var(--ink);background:var(--white);box-shadow:5px 5px 0 var(--ink);object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative}

.iv-example{position:absolute;top:22px;left:44px;padding:5px 9px;border:1.5px solid currentColor;font-size:13px;z-index:3}

.iv-map,.iv-route-svg{position:absolute;inset:0;width:800px;height:450px}
.iv-map circle{fill:var(--rule)}
.iv-map .dk{fill:var(--ink);transition:fill .12s linear calc(var(--i) * 5ms)}
.iv-route{stroke:var(--accent);stroke-width:4;stroke-dasharray:2 9;stroke-linecap:round}
.iv-route-draw{stroke:#fff;stroke-width:12;stroke-dasharray:var(--len);stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease)}
.iv-peter{position:absolute;width:76px;height:76px;border-radius:50%;border:2.5px dashed var(--ink);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:14px}
.iv-ask{position:absolute;width:62px;height:62px;background:var(--paper);border:2.5px solid var(--ink);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:36px}
.iv-corner{position:absolute;left:44px;top:150px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:320px}
.iv-chip-ink{padding:11px 15px;background:var(--ink);color:var(--paper);font-size:16px}
.iv-chip{padding:11px 15px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);font-size:16px}

.iv-chips{position:absolute;left:44px;top:44px;width:320px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.iv-chip-line{max-width:100%;padding:6px 9px;border:1.5px solid var(--ink);background:var(--white);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-steps{position:absolute;left:44px;top:176px;width:330px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.iv-step{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;line-height:1.2}
.iv-tick{position:relative;flex:none;width:24px;height:24px;border:2px solid var(--ink);background:var(--ink);transition:background .15s}
.iv-tick::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid var(--paper);border-width:0 3px 3px 0;transform:rotate(45deg)}
.iv-live .iv-tick:not(.on){background:transparent}.iv-live .iv-tick:not(.on)::after{display:none}
.iv-found{position:absolute;left:44px;top:350px;display:flex;align-items:baseline;gap:12px;font-size:15px}
.iv-found .iv-count{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:42px;letter-spacing:-.02em;color:var(--gold)}
.iv-persona{position:absolute;left:396px;top:34px;width:370px;min-height:382px;padding:18px 20px;background:var(--white);border:2.5px solid var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;z-index:2}
.iv-who{display:flex;align-items:center;gap:14px}
.iv-who-text{flex-grow:1;min-width:0}
.iv-portrait{flex:none;width:60px;height:60px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--white)}
.iv-name{font-size:24px;line-height:1;color:var(--accent)}

.iv-small{margin-top:5px;font-size:14px;color:var(--dim)}
.iv-badge{position:absolute;top:-14px;right:16px;padding:5px 8px;background:var(--ink);color:var(--paper);font-size:12px}
.iv-claim{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:7px 0;border-top:1.5px solid var(--rule)}
.iv-claim-k{font-size:12px;color:var(--accent)}
.iv-claim-t{grid-column:1/span 2;font-size:14px;line-height:1.3}
.iv-score{margin-top:auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:end;padding-top:8px;border-top:2.5px solid var(--ink)}
.iv-score-n{font-size:42px;line-height:.9;color:var(--gold)}
.iv-mono-row{display:flex;flex-direction:column;gap:2px;font-size:12px}
.iv-gold-bar{height:9px;margin-top:6px;width:var(--to);background:var(--gold);transition:width .7s var(--ease)}
.iv-live .iv-gold-bar:not(.on){width:0}

.iv-file{height:92px;padding:14px;border:2px solid var(--ink);background:var(--white);box-shadow:var(--shadow);font-size:14px;line-height:1.4;display:flex;align-items:flex-end;text-transform:none;letter-spacing:.04em}

.iv-tools{display:flex;flex-wrap:wrap;gap:6px 16px}
.iv-light{font-size:26px;color:var(--accent);transition:color .3s var(--ease)}
.iv-live .iv-light:not(.on){color:var(--rule)}

.iv-page{position:absolute;left:44px;top:50px;width:392px;height:360px;background:var(--white);border:2.5px solid var(--ink);box-shadow:var(--shadow)}
.iv-page-bar{height:30px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 12px}
.iv-page-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.iv-page-bar span{margin-left:8px;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:.03em}
.iv-page-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.iv-old{position:relative;align-self:flex-start;white-space:nowrap;font-size:15px;line-height:1.1;color:var(--faint);transition:font-size .4s var(--ease) .3s,color .3s}
.iv-old::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;background:var(--gold);transform-origin:left;transition:transform .4s var(--ease)}
.iv-live .iv-old:not(.on){font-size:17px;color:var(--ink)}
.iv-live .iv-old:not(.on)::after{transform:scaleX(0)}
.iv-new-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.iv-new{font-size:30px;line-height:1.02}
.iv-fix{padding:6px 10px;background:var(--accent);color:var(--white);font-size:13px;box-shadow:var(--shadow-2)}
.iv-line{display:block;height:8px;width:78%;background:var(--rule-lighter)}.iv-line-s{width:60%}
.iv-dislikes{position:absolute;left:462px;top:40px;width:296px;padding:16px 18px 6px;background:var(--band);color:var(--band-text);box-shadow:var(--shadow)}
.iv-dislikes ol{list-style:none;margin:8px 0 0;padding:0}
.iv-dislikes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid #3A424E;font-size:13.5px;line-height:1.3}
.iv-gold-kicker{font-size:14px;color:var(--gold)}
.iv-n{font-size:13px;color:var(--gold)}


.iv-gap-s{gap:22px;top:40px}
.iv-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.iv-offers-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.iv-offers-3 .iv-offer{height:236px}
.iv-offer-price{font-weight:700;font-size:18px}
.iv-more{margin:0;font-size:16px;color:var(--dim)}
.iv-offer{position:relative;height:300px;padding:16px 14px 8px;background:var(--white);border:2px solid var(--ink);display:flex;flex-direction:column;gap:8px;transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow 0s linear .08s}
.iv-paid{background:var(--tint)}
.iv-offer-tag{font-size:12px;color:var(--accent)}
.iv-offer-name{font-size:19px;line-height:1.2;font-weight:600}
.iv-offer ul{margin:auto 0 0;padding:0;list-style:none}
.iv-offer li{padding:8px 0;border-top:1.5px solid var(--rule);font-size:14px;line-height:1.35}
.iv-focus{display:none}
.iv-offers:has(.iv-focus.on) .iv-offer.on{opacity:.42}
.iv-offers .iv-offer.on:has(.iv-focus.on){opacity:1;box-shadow:var(--shadow);transform:translate(-3px,-3px)}

.iv-center{position:absolute;left:0;right:0;top:34px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.iv-wordmark{font-size:22px;letter-spacing:.02em}
.iv-end-actions{display:flex;align-items:center;gap:20px;margin-top:14px}
.iv-cta{display:inline-flex;align-items:center;height:56px;padding:0 28px;background:var(--ink);color:var(--white);font-size:16px;box-shadow:var(--shadow-accent)}
.iv-cta:hover{color:var(--white)}
.iv-replay{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;background:transparent;border:2px solid var(--ink);font-size:14px}
.iv-replay svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* 2026-10-05: the pieces of the ninety-second cut, eighty seconds since 2026-10-12. */
.iv-hook-head{position:absolute;left:44px;top:56px;width:310px;margin:0;font-size:38px}
.iv-hook-tile{position:absolute;left:392px;top:36px;width:364px;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--ink)}
.iv-hook-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px}
.iv-hook-face{display:block;width:100%;height:290px;object-fit:cover}
.iv-hook-bar{display:flex;align-items:center;min-height:62px;padding:10px 16px;color:var(--white)}
.iv-hook-q{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.iv-note{position:absolute;z-index:3;padding:8px 12px;background:var(--gold-tint);border:2px solid var(--gold);font-size:13px;box-shadow:var(--shadow-gold-2)}
.iv-note-1{left:44px;top:270px;rotate:-2deg}.iv-note-2{left:150px;top:322px;rotate:2deg}.iv-note-3{left:66px;top:374px;rotate:-1deg}
.iv-what{width:330px;padding-top:16px}
.iv-demos{position:absolute;left:404px;top:44px;width:356px;display:flex;flex-direction:column;gap:14px}
.iv-demo{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow-2)}
.iv-demo-0{box-shadow:var(--shadow-accent)}.iv-demo-1{margin-left:22px}.iv-demo-2{margin-left:44px}
.iv-demo-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.iv-name-xs{font-size:18px}
.iv-demo-q{font-size:13px;font-style:italic;line-height:1.3;color:var(--dim)}
.iv-demo-src{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted)}
.iv-found{flex-wrap:wrap}
.iv-held{flex-basis:100%;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.iv-file-chip{position:absolute;left:44px;top:70px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:var(--ink);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:16px;box-shadow:var(--shadow-accent);rotate:-4deg}
.iv-portrait-s{width:44px;height:44px;font-size:14px}
.iv-drop{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.iv-live .iv-drop:not(.on){opacity:0;transform:translateY(-70px)}
.iv-chat{position:absolute;left:300px;top:40px;width:456px;height:300px;background:var(--white);border:2.5px solid var(--ink);box-shadow:var(--shadow)}
.iv-chat-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.iv-bubble{align-self:flex-end;max-width:330px;margin:0;padding:12px 14px;background:var(--accent);color:var(--white);font-size:17px;line-height:1.35}
.iv-dots{align-self:flex-start;display:flex;gap:6px;padding:12px 14px;background:var(--tint);border:1.5px solid var(--tint-rule)}
.iv-dots i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:iv-dot 1s ease-in-out infinite}
.iv-dots i:nth-child(2){animation-delay:.15s}.iv-dots i:nth-child(3){animation-delay:.3s}
@keyframes iv-dot{50%{transform:translateY(-4px);opacity:.5}}
.iv-tools-row{position:absolute;left:300px;top:372px;gap:6px 22px}
.iv-light-s{font-size:18px}
.iv-pin{position:absolute;right:-34px;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;display:flex;align-items:center;justify-content:center}
.iv-pinned{position:relative;padding:8px 0}.iv-pinned .iv-pin{right:0;top:0}
.iv-scorebox{position:absolute;left:462px;top:330px;width:296px;padding:10px 16px;background:var(--white);border:2.5px solid var(--ink);box-shadow:var(--shadow-gold);display:grid;grid-template-columns:auto auto auto;align-items:end;justify-content:space-between;row-gap:4px}
.iv-sb{display:flex;flex-direction:column;gap:2px}
.iv-sb-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.iv-sb-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:36px;line-height:1}
.iv-sb-was{color:var(--faint)}.iv-sb-now{color:var(--gold-text)}
.iv-sb-arrow{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:26px;padding-bottom:4px}
.iv-sb-case{grid-column:1/-1;font-size:11px;color:var(--muted)}
.iv-again{position:absolute;left:462px;top:332px;padding:12px 16px;background:var(--gold-tint);border:2px solid var(--gold);font-size:15px}
.iv-end-faces{display:flex;gap:10px;margin-bottom:2px}
.iv-end-face{width:64px;height:64px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover;background:var(--avatar-validated);display:flex;align-items:center;justify-content:center;font-size:18px}

/* the timed states: before its time an element waits in the first state, then eases in */
.iv-up,.iv-rise{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.iv-live .iv-up:not(.on){opacity:0;transform:translateY(14px)}
.iv-live .iv-rise:not(.on){opacity:0;transform:translateY(50px)}
.iv-snap{transition:opacity .3s var(--ease),transform .35s var(--ease),box-shadow 0s linear .08s}
.iv-live .iv-snap:not(.on){opacity:0;transform:scale(.96);box-shadow:none}
.iv-live .iv-ripple:not(.on) .dk{fill:var(--rule)}
.iv-live .iv-route-draw:not(.on){stroke-dashoffset:var(--len)}
.iv-live .iv-type .w{opacity:0}
.iv-live .iv-type .w.on{opacity:1}

/* The bar under the picture: pause, the captions, sound and full screen. */
.iv-ctl{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 16px;background:var(--ink);color:var(--white);border-top:1px solid var(--ink)}
.iv-ctl button{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--white);border-radius:50%}
.iv-ctl button:hover{background:rgba(255,255,255,.12)}
.iv-ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.iv-caps{flex:1 1 auto;min-width:0;min-height:40px;display:flex;align-items:center}
.iv-cap{display:none;margin:0;font-size:15px;font-weight:500;line-height:1.35;color:var(--steel-text)}
.iv-cap.on{display:block}
.iv:fullscreen .iv-cap{font-size:22px}
.iv-sound[aria-pressed="true"] .iv-x,.iv-sound[aria-pressed="false"] .iv-waves{display:none}
.iv-pause .iv-tri,.iv-pause[aria-pressed="true"] .iv-bars{display:none}.iv-pause[aria-pressed="true"] .iv-tri{display:inline}
.iv-pause .iv-tri{fill:currentColor;stroke:none}.iv-pause .iv-bars{stroke-width:3}
.iv:not(.iv-ready) .iv-ctl,.iv-still .iv-ctl{display:none}

.iv-cover{position:absolute;inset:0;z-index:9;display:none;background:var(--paper)}
.iv-still .iv-cover{display:block}
.iv-cover .iv-cols{position:absolute;left:44px;right:44px;top:40px;bottom:40px}
.iv-cover .iv-stack{gap:22px}
.iv-cover .iv-kicker{font-size:18px}
.iv-cover .iv-h1{font-size:56px;line-height:.95}
.iv-go{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 26px 0 22px;border:0;background:var(--ink);color:var(--white);box-shadow:var(--shadow-accent);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:17px;text-transform:uppercase;letter-spacing:.1em}
.iv-go svg{width:24px;height:24px;fill:currentColor}
.iv-go:hover{box-shadow:none;transform:translate(7px,7px)}
.iv:not(.iv-ready) .iv-go{display:none}
@media (max-width:1100px){.hero-video{justify-self:start}.hero-player{margin-left:0}}

/* Country and industry pages, the two overviews, breadcrumbs and similar buyers
   (registry/pages/browse.py, Bo 2026-09-24). */
.crumbs{max-width:var(--max);margin:0 auto;padding:20px var(--pad) 0;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.browse{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 80px}
.browse .crumbs{padding:20px 0 0}
.browse-head{margin-top:26px;max-width:64ch}
.browse-head h1{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(32px,4.4vw,52px);line-height:1.02;letter-spacing:-0.03em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:16px;text-wrap:balance}
.browse-head h1 .market-flag{width:60px;height:40px;margin:0;vertical-align:0}
.browse-lede{font-size:18px;line-height:1.5;color:var(--dim);margin:16px 0 0}
.browse-defined{font-size:14px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.browse-defined a,.browse-lede a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.browse-more{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font-size:14px;font-weight:500;line-height:1.2}
.chip:hover,.chip:focus-visible{background:var(--ink);color:var(--white)}
.chip-n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.chip:hover .chip-n,.chip:focus-visible .chip-n{color:inherit}
.browse-gap{margin-top:64px;padding:28px 30px 30px;border:1px solid var(--ink);background:var(--white);box-shadow:var(--shadow)}
.browse-gap h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px;letter-spacing:-0.02em;text-transform:uppercase;margin:0}
.browse-gap p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.55;max-width:62ch}
.browse-gap .chips{margin:18px 0 24px}
.browse-gap .btn-ink{margin-top:4px}
.browse-others{margin-top:52px}
.browse-others h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:18px;letter-spacing:-0.01em;text-transform:uppercase;margin:0 0 14px}
.browse-others .chips{margin-bottom:14px}

.browse-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.browse-row>a:first-child,.browse-row>span:first-child{font-size:17px;font-weight:600;display:inline-flex;align-items:center}
.browse-row>a:first-child{text-decoration:underline;text-underline-offset:3px}
.browse-row>span:first-child{color:var(--muted)}
.browse-count{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.browse-create{font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.similar{max-width:var(--max);margin:0 auto;padding:48px var(--pad) 72px;border-top:1px solid var(--ink)}
.similar-col p{margin:0 0 10px;color:var(--muted);font-size:15px}
.similar-list{list-style:none;padding:0;margin:0}
.similar-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--rule)}
.similar-list span{font-size:14px;color:var(--muted)}
.similar-all{display:flex;flex-wrap:wrap;gap:18px;margin:26px 0 0}
.similar-all a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.browse-row{grid-template-columns:minmax(0,1fr) auto}.browse-row .browse-create{grid-column:1/-1}}
/* The country and industry on a card lead to their pages, above the card's own link. */
.card-to{position:relative;z-index:2;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.card-to:hover,.card-to:focus-visible{text-decoration-color:currentColor}
.card-industry{display:inline-block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
/* The buyer's own line, constructed from one tested claim and labelled so (registry/voice.py). */
.card-voice{font-size:19px;line-height:1.38}
.card-quote-src{margin:8px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.identity-voice p::before{content:"\201C";color:var(--gold);font-family:'Source Serif 4',Georgia,serif}
.identity-voice p::after{content:"\201D";color:var(--gold);font-family:'Source Serif 4',Georgia,serif}
/* Eight links since Countries and Industries joined the header (2026-09-24): tighter on a
   medium screen, and folded behind Menu below the width where one row still holds them. */
@media (max-width:1320px){.nav-links{gap:14px;font-size:14px}.nav{gap:18px}}
@media (max-width:1040px){
  .nav.nav-folds{height:auto;flex-wrap:wrap}
  .nav.nav-folds .nav-toggle{display:inline-flex}
  .nav.nav-folds .nav-links{width:auto;margin-left:auto}
  .nav.nav-folds:not(.nav-open) .nav-links a:not(.nav-request){display:none}
  .nav.nav-folds.nav-open .nav-links{width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0 6px;border-top:1px solid var(--rule);margin-left:0}
  .nav.nav-folds.nav-open .nav-request{order:10}
}
/* Groups flow in one grid on the country and industry pages (Bo, 2026-09-24), and flags
   are larger where a country is named. */
.browse-flow{margin-top:44px;row-gap:36px}
.flow-cell{display:flex;flex-direction:column;min-width:0}
.flow-cell .card{flex:1}
.flow-head{min-height:62px;margin:0 0 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:20px;line-height:1.1;letter-spacing:-0.02em;text-transform:uppercase}
.flow-name{display:flex;align-items:center;gap:12px}
.flow-name .market-flag{width:36px;height:24px;margin:0;flex:none}
.browse-row .market-flag{width:30px;height:20px;margin-right:12px;vertical-align:-4px}
.chip .market-flag{width:24px;height:16px;margin:0}

/* ===== Persona page, 2026-09-24 (design canvas "Persona page", Version 6) ================
   Hero with the download, key facts, what we know, the paid work on a dark band, how they
   read content, how it was tested, similar buyers. */
.identity.persona-hero{grid-template-columns:minmax(0,1fr) 380px;gap:40px 72px;padding:28px var(--pad) 72px}
.persona-main{display:flex;flex-direction:column;gap:40px;min-width:0}
.persona-who{display:flex;gap:36px;align-items:flex-start}
.persona-face{margin:0;width:156px;flex:none}
.persona-hero .portrait.large{width:156px;height:156px;flex-basis:156px;box-shadow:6px 6px 0 var(--ink)}
.persona-hero .portrait-caption{margin:12px 0 0;font-size:13px}
.persona-hero .identity-who{display:flex;flex-direction:column;gap:14px;padding-top:6px;min-width:0;flex:1}
.persona-hero h1{margin:0}
.persona-hero .identity-role{margin:0;font-size:19px;line-height:1.4;color:var(--dim);max-width:46ch}
.persona-hero .identity-seg{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--muted);max-width:60ch}
.persona-tags{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;font-size:16px}
.persona-tag{display:inline-flex;align-items:center;gap:8px;color:var(--ink);padding-bottom:2px;border-bottom:2px solid transparent}
a.persona-tag{border-bottom-color:var(--accent)}
a.persona-tag:hover,a.persona-tag:focus-visible{color:var(--accent)}
.persona-tag b{font-weight:700}
.persona-tag-n{color:var(--muted)}
.persona-tag .market-flag{width:24px;height:16px;margin:0;flex:none}
.persona-hero .identity-voice{margin:0 0 0 192px;max-width:700px}
.persona-hero .identity-voice p{margin:0;font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.3;letter-spacing:-0.01em;text-wrap:pretty}
.persona-hero .identity-voice footer{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.buy-panel{border:1px solid var(--ink);background:var(--white);box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:20px;min-width:0}
.buy-panel .action.primary{padding:16px 18px;font-size:17px;font-weight:700}
.buy-howto{align-self:flex-start;font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.buy-work{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule);padding-top:18px}
.buy-kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.buy-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px;border:1px solid var(--rule);color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;transition:border-color .2s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.buy-row:hover{border-color:var(--ink);color:var(--ink)}
.buy-row.lead{min-height:48px;border-color:var(--ink);box-shadow:var(--shadow-accent-2);font-size:15.5px;font-weight:700}
.buy-row.lead:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent)}
.buy-price{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
.buy-row.lead .buy-price{color:var(--accent)}
.see-review{margin-top:6px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.facts-strip{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.fact{padding:22px 24px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--rule);min-width:0}
.fact:first-child{padding-left:0;border-left:0}
.fact-k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.fact-v{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:28px;line-height:1.1;letter-spacing:-0.02em}
.fact-sub{font-size:14px;line-height:1.4;color:var(--muted)}
.claims-section{max-width:var(--max);margin:0 auto;padding:88px var(--pad)}
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.claim-card{display:flex;flex-direction:column;gap:12px;min-height:250px;border:1px solid var(--rule);background:var(--white);padding:24px}
.claim-card.trigger{border-top:4px solid var(--gold);padding-top:21px}
.claim-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.claim-card.trigger .claim-label{color:var(--gold-text)}
.claim-text{margin:0;font-size:17px;line-height:1.45;text-wrap:pretty}
.claim-card .tag{padding-top:6px}
.go-further{background:var(--band);color:var(--band-text);padding:64px var(--pad)}
.go-inner{max-width:calc(var(--max) - 2 * var(--pad));margin:0 auto;display:flex;flex-direction:column;gap:32px}
.go-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.go-kicker{display:block;margin-bottom:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold)}
.go-head h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:-0.02em;text-transform:uppercase;color:var(--white)}
.go-head p{margin:0;max-width:44ch;font-size:17px;line-height:1.5;color:var(--band-dim)}
.go-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.go-card{display:flex;flex-direction:column;gap:12px;background:var(--white);color:var(--ink);border:1px solid var(--ink);box-shadow:var(--shadow-accent);padding:28px;transition:transform .22s var(--ease)}
.go-card.lead{box-shadow:var(--shadow-gold)}
.go-card:hover{color:var(--ink);transform:translate(-2px,-2px)}
.go-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.go-card.lead .go-tag{color:var(--gold-text)}
.go-name{font-size:24px;font-weight:700;line-height:1.2}
.go-blurb{font-size:15.5px;line-height:1.5;color:var(--dim)}
.go-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule)}
.go-price{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:22px}
.go-cta{font-size:15px;font-weight:700;color:var(--accent)}
.go-further .proof-none{margin:0;border:0;background:none;padding:0;max-width:none}
.go-further .proof-none p{font-size:15px;color:var(--band-dim)}
.go-further .proof-none a{color:var(--white)}
.go-further + .proof-section{padding-top:88px}
.reads-section{max-width:var(--max);margin:0 auto;padding:88px var(--pad) 0}
.reads-panel{background:var(--tint);border:1px solid var(--tint-rule);padding:40px;display:flex;flex-direction:column;gap:32px}
.reads-head{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.reads-head h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.02em;text-transform:uppercase}
.reads-chip{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-text);background:var(--gold-tint);border:1px solid var(--gold);padding:4px 8px}
.reads-head p{margin:0 0 0 auto;font-size:15px;color:var(--muted)}
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.reads-cell{min-width:0}
.reads-cell h3{margin:0 0 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.reads-cell ul{margin:0;padding-left:18px;font-size:16px;line-height:1.5}
.reads-cell li + li{margin-top:12px}
.reads-said,.reads-cell blockquote{margin:0;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:500;font-size:19px;line-height:1.5;color:var(--band)}
.reads-note{margin:0;font-size:15px;line-height:1.55;color:var(--faint)}
.sources-section{max-width:var(--max);margin:0 auto;padding:88px var(--pad)}
.sources-section .claims-head p{font-size:16px}
.tested-score{position:relative;margin-top:24px;display:flex;align-items:center;gap:28px;padding:22px 24px;background:var(--white);border:1px solid var(--rule)}
.tested-n{flex:none;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:52px;line-height:.9;letter-spacing:-0.04em;color:var(--accent)}
.tested-n.untested{font-size:24px;color:var(--faint)}
.tested-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.tested-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tested-cap{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.tested-info summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--accent);border-radius:50%;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:500;font-size:13px;line-height:1;color:var(--accent);background:var(--white)}
.tested-info summary::-webkit-details-marker{display:none}
.tested-info summary:hover,.tested-info[open] summary{background:var(--accent);color:var(--white)}
.tested-info-text{position:absolute;z-index:3;left:24px;right:24px;top:calc(100% - 6px);max-width:560px;padding:14px 16px;border:1px solid var(--ink);background:var(--white);box-shadow:6px 6px 0 var(--accent);font-size:14px;line-height:1.45}
.tested-info-text p{margin:0}
.tested-info-text p+p{margin-top:8px}
.tested-line{margin:0;font-size:15px;line-height:1.5;color:var(--dim)}
.sources-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--ink)}
.sources-list li{display:grid;grid-template-columns:minmax(0,1fr) 220px 170px;gap:6px 18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.sources-list a{font-size:15.5px;line-height:1.4;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;overflow-wrap:anywhere}
.sources-list a:hover{color:var(--accent);text-decoration-color:currentColor}
.source-domain{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--faint);overflow-wrap:anywhere}
.source-held{justify-self:end;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-text);background:var(--gold-tint);padding:3px 7px;white-space:nowrap}
.sources-fold .sources-list{margin:0;border-top:0}
.sources-fold summary{margin-top:18px;cursor:pointer;display:inline-block;list-style:none;border:1px solid var(--ink);background:var(--white);padding:12px 18px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow-nav)}
.sources-fold summary::-webkit-details-marker{display:none}
.sources-fold[open] summary{display:none}
.sources-private{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--faint)}
.similar h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px;line-height:1;letter-spacing:-0.02em;text-transform:uppercase}
.similar-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 44px;margin-top:28px}
.similar-col{display:flex;flex-direction:column;min-width:0}
.similar-head{display:block;padding-bottom:12px;font-size:18px;color:var(--ink)}
.similar-head b{font-weight:700}
a.similar-head b{border-bottom:2px solid var(--accent)}
a.similar-head:hover{color:var(--accent)}
.similar-head span{color:var(--muted)}
.similar-list a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.similar-list a:hover{color:var(--accent);text-decoration-color:currentColor}
@media (max-width:1100px){
  .identity.persona-hero{grid-template-columns:minmax(0,1fr)}
  .buy-panel{max-width:560px}
  .persona-hero .identity-voice{margin-left:0}
  .go-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .similar-cols{grid-template-columns:minmax(0,1fr)}
  .reads{grid-template-columns:minmax(0,1fr);gap:28px}
  .reads-panel{padding:28px 22px}
  .reads-head p{margin-left:0;width:100%}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{padding:18px 16px}
  .fact:nth-child(odd){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--rule)}
  .claims-section,.sources-section{padding-top:64px;padding-bottom:64px}
  .reads-section{padding-top:64px}
  .go-further{padding:48px var(--pad)}
  .sources-list li{grid-template-columns:minmax(0,1fr)}
  .source-held{justify-self:start}
  .claim-card{min-height:0}
}
@media (max-width:560px){
  .persona-who{flex-direction:column;align-items:stretch;gap:18px}
  .persona-face{width:auto;display:flex;align-items:center;gap:16px}
  .persona-hero .portrait.large{width:104px;height:104px;flex-basis:104px}
  .persona-hero .portrait-caption{margin:0;max-width:14ch}
  .tested-score{flex-direction:column;align-items:flex-start;gap:14px}
  .buy-panel{padding:22px}
}

/* The pager under the persona grid (registry/pages/home.py, _pager): three rows at a time. */
.pager{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:40px}

/* The paid-only front page (registry/pages/home.py, Bo 2026-09-25). One accent: blue for
   actions, gold only for the score rings. Larger type, more room between parts, and one
   motion: a part's label and heading fade up as they scroll into view. */
.btn-blue{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--white);padding:16px 26px;font-size:17px;font-weight:600;box-shadow:5px 5px 0 var(--ink);text-align:center}
.btn-blue:hover{color:var(--white);background:var(--ink);border-color:var(--ink)}
.hero .btn-paper{padding:16px 26px;font-size:17px}
.hero-lede{font-size:21px}
.front-band{padding:128px var(--pad)}
.front-band > .wrap{max-width:var(--max);margin:0 auto}
.front-white{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.front-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.front-kicker{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.front-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.front-sub{margin:0;max-width:520px;font-size:20px;line-height:1.5;color:var(--dim)}
@keyframes front-fade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.fade{animation:front-fade linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}

.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.demo-card{display:flex;flex-direction:column;gap:22px;padding:28px;background:var(--white);border:1px solid var(--ink);box-shadow:var(--shadow)}
.demo-top{display:flex;justify-content:space-between;align-items:center}
.demo-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:40px;line-height:1;color:#8A8A84}
.demo-ring{width:56px;height:56px}
.demo-ring circle{fill:none}
.ring-track{stroke:var(--rule);stroke-width:2}
.ring-on{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.demo-ring text{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:14px;fill:var(--ink)}
.demo-who{display:flex;align-items:center;gap:18px}
.demo-face{flex:none;width:88px;height:88px;border-radius:50%;border:2px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--avatar-validated)}
.demo-face img{width:100%;height:100%;object-fit:cover}
.demo-who h3{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:26px;line-height:1;text-transform:uppercase}
.demo-who p{margin:6px 0 0;font-size:18px;line-height:1.35;color:var(--dim)}
.demo-go{display:flex;justify-content:flex-end;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.demo-open{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px;font-size:18px;box-shadow:none}
.demo-open span{font-size:20px}

.prod-table-wrap{border:1px solid var(--ink);box-shadow:var(--shadow);background:var(--white);padding-left:22px}
.prod-table{width:100%;border-collapse:collapse}
.prod-table th,.prod-table td{padding:20px 22px;text-align:left;vertical-align:top;border-left:1px solid var(--rule)}
.prod-table tbody th,.prod-table tbody td,.prod-table tbody tr:first-child td{border-top:1px solid var(--rule)}
.prod-table tbody th{border-left:0;padding-left:0;width:170px;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prod-table thead td{border-left:0}
.prod-table thead th{padding:24px 22px;vertical-align:bottom}
.prod-table .first{background:var(--tint)}
.prod-tag{display:block;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.prod-name{display:block;font-size:23px;font-weight:700;line-height:1.2}
.prod-table td{font-size:18px;line-height:1.5}
.prod-table .row-price td{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:28px;line-height:1.1}
.prod-book{display:block;width:100%;margin-top:28px;font-size:19px;padding:18px 26px}
.prod-cards{display:none}
.prod-note{margin:20px 0 0;font-size:16px;color:var(--muted)}
.prod-promise{margin:28px 0 0;font-size:18px;font-weight:600;color:var(--ink)}
.prod-promise + .prod-book{margin-top:14px}

.front-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
#faq .faq-item summary{font-size:24px}
#faq .faq-item p{font-size:20px;line-height:1.55}

.front-dark{background:var(--band);color:var(--band-text)}
.front-dark .front-kicker{color:var(--band-dim)}
.front-dark .front-title{color:var(--white);font-size:clamp(34px,3.6vw,52px)}
.call-row{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:72px;align-items:start}
.call-left{display:flex;flex-direction:column;gap:28px}
.call-left .front-kicker{margin-bottom:0}
.call-steps > span{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--band-dim)}
.call-steps ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.call-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;font-size:20px;line-height:1.45}
.call-steps li span{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;color:var(--white)}
.call-who{display:flex;gap:18px;align-items:flex-start;padding-top:28px;border-top:1px solid rgba(242,241,237,.2)}
.founder-photo{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--ink)}
.founder-photo-l{width:72px;height:72px;border-color:var(--white)}
.founder-line{color:var(--white)!important}
.founder-in{display:inline-block;margin-top:8px;font-weight:600}
.call-who .founder-in{color:var(--white)}
.call-who b{display:block;font-size:22px;color:var(--white)}
.call-who p{margin:6px 0 0;font-size:18px;line-height:1.45;color:var(--band-dim)}
.call-form{display:flex;flex-direction:column;gap:18px;padding:36px;background:var(--white);color:var(--ink)}
.call-form h3{margin:0;font-size:24px}
.call-form label{display:flex;flex-direction:column;gap:8px;font-size:17px;font-weight:600}
.call-form input{height:54px;padding:0 16px;border:2px solid var(--ink);background:var(--white);font-size:18px}
.call-form .btn-blue,.call-form .btn-paper{min-height:58px;font-size:19px;cursor:pointer}
.call-note{margin:0;font-size:15px;color:var(--muted)}
.funnel{border-collapse:collapse;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.funnel th,.funnel td{padding:8px 18px 8px 0;text-align:left;border-bottom:1px solid var(--rule)}
.funnel td{text-align:right;min-width:90px}
.more-pieces{margin:4px 0 8px}
.more-pieces summary{cursor:pointer;font-weight:600;padding:10px 0}
.more-pieces[open] summary{margin-bottom:12px}
.done-sub{margin:26px 0 8px;font-size:18px}
.done-list{margin:0 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:6px;text-align:left}
.done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.done-actions a{margin:0}
.call-right{display:flex;flex-direction:column;gap:18px;min-width:0}
.call-pick{display:flex;flex-direction:column;gap:14px;padding:36px;background:var(--white);color:var(--ink);box-shadow:var(--shadow-accent)}
.call-pick h3{margin:0;font-size:24px}
.call-pick p{margin:0;font-size:17px;line-height:1.45;color:var(--dim)}
.call-pick-go{align-self:flex-start;min-height:58px;padding:0 28px;display:inline-flex;align-items:center;font-size:19px}
.call-alt{margin:8px 0 0;font-size:16px;color:var(--band-dim)}
.call-run{margin:28px 0 0;font-size:15px;color:var(--band-dim)}
.front-updated{margin:16px 0 0;font-size:15px;color:var(--dim)}
.hero-text{margin-top:14px;font-size:14px;color:var(--muted)}
.hero-text summary{cursor:pointer;font-weight:600}
.hero-text p{margin:8px 0 0;max-width:62ch}

@media (max-width:1100px){
  .demo-grid{grid-template-columns:minmax(0,1fr)}
  .call-row,.front-split{grid-template-columns:minmax(0,1fr);gap:40px}
  .prod-table-wrap{display:none}
  .prod-cards{display:flex;flex-direction:column;gap:28px}
  .prod-card{display:flex;flex-direction:column;gap:10px;padding:24px 20px;background:var(--white);border:1px solid var(--ink);box-shadow:var(--shadow)}
  .prod-card.first{background:var(--tint)}
  .prod-card h3{margin:0;font-size:24px;line-height:1.2}
  .prod-price{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:30px}
  .prod-row{padding:14px 0;border-top:1px solid var(--rule)}
  .prod-row span{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .prod-row p{margin:4px 0 0;font-size:18px;line-height:1.45}
}
@media (max-width:900px){
  .front-band{padding:88px var(--pad)}
  .front-head{flex-direction:column;align-items:flex-start;gap:16px}
  .call-form{padding:24px 20px}
}
.gone{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.gone .front-kicker{margin-bottom:0}

/* One real case under the demo cards (registry/pages/home.py, 2026-10-07). */
.front-case{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.3fr) auto;gap:32px;align-items:center;padding:28px 32px;background:var(--tint);border:1px solid var(--ink);box-shadow:var(--shadow-accent-2)}
.fc-who{display:flex;flex-direction:column;gap:8px;min-width:0}
.fc-kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500}
.fc-who h3{margin:0;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.fc-who p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.4}
.fc-scores{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center}
.fc-score{display:grid;grid-template-columns:56px 40px minmax(0,1fr);gap:10px;align-items:center;grid-column:1}
.fc-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fc-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:24px;line-height:1}
.fc-bar{display:block;height:8px;background:var(--rule-light)}
.fc-bar span{display:block;height:100%;background:var(--warn)}
.fc-score.after .fc-bar span{background:var(--accent)}
.fc-delta{grid-column:2;grid-row:1/3;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:28px;color:var(--accent)}
.fc-quote{margin:0;padding-left:20px;border-left:2px solid var(--warn)}
.fc-quote p{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:var(--ink);text-wrap:pretty}
.fc-quote footer{margin-top:8px;font-size:14.5px;color:var(--muted)}
.fc-go{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fc-go .btn-ink{white-space:nowrap}
.fc-all{font-size:14.5px;font-weight:600}
@media (max-width:1100px){
  .front-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:640px){
  .front-case{grid-template-columns:minmax(0,1fr);padding:22px 20px}
}

/* The markets band (registry/pages/home.py, design D of 2026-10-07): a short white band,
   the argument beside a scatter of tilted flags, and three numbered points under them. */
.mk-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center}
.mk-text{display:flex;flex-direction:column;gap:16px}
.mk-title{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:36px;line-height:.98;letter-spacing:-.03em;text-transform:uppercase;margin:0;max-width:18ch}
.mk-sub{margin:0;font-size:17px;font-weight:500;line-height:1.5;color:var(--dim);max-width:48ch}
.mk-points{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.mk-points li{display:flex;flex-direction:column;gap:8px;padding:20px 32px 0 0;border-top:1px solid var(--rule)}
.mk-points h3{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:18px;text-transform:uppercase;letter-spacing:-.02em}
.mk-points p{margin:0;font-size:15.5px;line-height:1.5;color:var(--dim);max-width:36ch}
@media (max-width:900px){
  .mk-title{font-size:30px}
}

/* The order pages start with the introduction call (registry/pages/orders.py, 2026-09-25). */
.rail-call{margin:24px 0;padding:22px;background:var(--tint);border:1px solid var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rail-call h2{margin:0;font-size:20px;line-height:1.25}
.rail-call p{margin:0;font-size:16px;line-height:1.5;color:var(--dim)}
.rail-call .btn-blue{font-size:16px;padding:14px 20px}
.rail-call .rail-call-after{font-size:14px;color:var(--muted)}

/* Readability pass (plan 2026-09-25, phase 5; 2026-10-07): running text stops near 70
   characters a line, measured on every public page at 1440 wide. */
.cell p,.case-label,.tested-line,.reads-note,.hint,.case-role{max-width:70ch}

/* Segment landing pages (registry/pages/segment.py, Bo 2026-10-08): design D2 of the landing
   page canvas. A hero with a result and buyer faces, three numbered steps, how a persona is
   built, and the call band with the products beside the form. */
.seg-hero{background:var(--hero-ground);border-bottom:1px solid var(--hero-rule);padding:88px var(--pad) 64px}
.seg-hero-in{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.seg-kicker{display:flex;align-items:center;gap:12px;margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg-kicker .market-flag{width:28px;height:19px;border:1px solid var(--ink)}
.seg-hero h1{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.025em;max-width:16ch}
.seg-result{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;max-width:900px}
.seg-x{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:clamp(48px,5vw,72px);line-height:1;color:var(--accent)}
.seg-result>span:last-child{font-size:21px;line-height:1.45;text-align:left;max-width:46ch}
.seg-result a{font-size:15px;white-space:nowrap}
.seg-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.seg-faces{list-style:none;margin:24px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:24px}
.seg-faces li{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.seg-faces img{width:100%;max-width:168px;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--gold)}
.seg-faces b{font-size:16px;line-height:1.3}
.seg-faces span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.seg-faces-note{margin:0;font-size:15px;color:var(--dim)}
.seg-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;padding:16px var(--pad);border-bottom:1px solid var(--rule);background:var(--paper);font-weight:600;font-size:16px}
.seg-steps a{color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.seg-steps a:hover{color:var(--accent)}
.seg-steps span{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--white);display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.front-band.seg-band{padding:104px var(--pad)}
.seg-head{display:flex;gap:22px;align-items:flex-start;max-width:900px;margin-bottom:40px}
.seg-n{flex:none;width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--white);border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:26px}
.seg-research .seg-n{background:var(--gold-text)}
.seg-label{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.seg-research .seg-label{color:var(--gold-text)}
.seg-head h2,.seg-h2{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.015em}
.seg-lede{margin:12px 0 0;font-size:19px;line-height:1.55;color:var(--dim);max-width:62ch}
.party-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.party-stat{display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--gold);padding:22px 24px;font-size:17px;font-weight:600;line-height:1.4}
.party-n{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:44px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.party-src{margin:14px 0 0;font-size:13px;color:var(--faint)}
.party-src a{color:var(--faint);text-decoration:underline}
.seg-cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:40px}
.seg-cta span{font-size:15px;color:var(--muted)}
.seg .front-case{margin-top:0}
.seg-research{background:var(--hero-ground);border-top:1px solid var(--hero-rule);border-bottom:1px solid var(--hero-rule)}
.seg-studies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.seg-study{background:var(--white);border:1px solid var(--ink);box-shadow:var(--shadow-gold);display:flex;flex-direction:column;padding:26px 26px 0}
.seg-fig{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:72px;line-height:1;color:var(--accent)}
.seg-study h3{margin:14px 0 10px;font-size:22px;line-height:1.25}
.seg-study p{margin:0 0 18px;font-size:17px;line-height:1.5;color:var(--dim);flex:1}
.seg-study a{display:block;margin:0 -26px;padding:14px 26px;border-top:1px solid var(--rule-light);font-size:14px;line-height:1.4}
.seg-how{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.seg-how li{display:flex;flex-direction:column;gap:12px}
.seg-how-n{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-size:20px;background:var(--white)}
.seg-how h3{margin:0;font-size:22px;line-height:1.2}
.seg-how p{margin:0;font-size:17px;line-height:1.5;color:var(--dim)}
.seg .front-dark .front-title{text-transform:none;font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.015em}
.seg-book-lede{margin:0;font-size:19px;line-height:1.55;color:var(--steel-text-dim)}
.seg-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.seg-points li{position:relative;padding-left:24px;font-size:18px;line-height:1.45}
.seg-points li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--gold)}
.seg-sticky{display:none}
.seg-face{position:relative;display:block;width:100%;max-width:168px}
.seg-faces .seg-face img{display:block}
.seg-pin{position:absolute;right:4px;bottom:8px;display:inline-flex;padding:3px;background:var(--white);border:1px solid var(--ink)}
.seg-pin .market-flag{width:26px;height:17px}
.seg-tagline{margin:0;font-size:22px;font-weight:600;line-height:1.4}
.seg-table-wrap{overflow-x:auto;border:1px solid var(--ink);box-shadow:var(--shadow)}
.seg-table{width:100%;min-width:900px;border-collapse:collapse;background:var(--white)}
.seg-table thead tr{background:var(--band);color:var(--band-text)}
.seg-table thead th,.seg-table thead td{padding:16px 14px;text-align:left;vertical-align:bottom;border-left:1px solid #3A434F}
.seg-col{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.seg-col img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--band-text);background:var(--white)}
.seg-col .market-flag{width:22px;height:15px;border:1px solid var(--band-text)}
.seg-table tbody tr{border-top:1px solid var(--rule)}
.seg-table tbody th{width:12%;padding:18px;text-align:left;vertical-align:top;background:var(--tint);color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.seg-table td{padding:18px 14px;vertical-align:top;font-size:16px;line-height:1.45;border-left:1px solid var(--rule-light)}
.seg-small{margin:20px 0 0;font-size:15px;color:var(--muted);max-width:70ch}
.seg-industry .seg-research{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (max-width:1000px){.seg-studies{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .seg-how{grid-template-columns:minmax(0,1fr)}
  .front-band.seg-band{padding:72px var(--pad)}
}
@media (max-width:760px){
  .seg-hero{padding:56px var(--pad) 48px}
  .seg-faces{gap:20px 14px}
  .seg-head{gap:16px}
  .seg-n{width:48px;height:48px;font-size:21px}
  .seg-result>span:last-child{text-align:center}
}
@media (max-width:720px){
  .seg-sticky{display:block;position:sticky;bottom:0;z-index:4;padding:12px 16px;background:var(--paper);border-top:1px solid var(--ink)}
  .seg-sticky .btn-blue{display:block}
}
/* The client page, 2026-10-08: a summary, then one line per item, forms folded. */
.op-client-head{padding:18px 20px}

.op-client-counts{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.op-client-reach{margin:10px 0 0;font-size:14px;font-weight:600}
.op-client-notes{margin:10px 0 0;font-size:14px;color:var(--muted);max-width:70ch}
.op-lines{list-style:none;margin:0;padding:0}
.op-line-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.op-line-row:last-child{border-bottom:0}
.op-line-main{flex:1 1 320px;font-size:14.5px}
.op-line-meta{font-size:13px;color:var(--muted)}
.op-line-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.admin .op-line-acts form{margin:0;padding:0;border:0}
.admin .op-line-acts .btn{margin-top:0}
.op-line{margin:0;font-size:14.5px}
.op-kind{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.op-state{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--rule);color:var(--muted)}
.op-state-built{border-color:var(--accent);color:var(--accent)}
.op-state-did_not_pass{border-color:var(--warn,#a33);color:var(--warn,#a33)}
.op-party{margin:14px 0 4px;font-size:15px}
.op-mini{display:inline;margin:0}
.op-mini button{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.op-mini-link{font-size:13.5px}
.op-fold{margin-top:12px}
.op-fold summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.op-fold-body{padding-top:8px}
.op-reader{margin:28px 0 0}
.reader-view{margin-top:12px;border:1px solid var(--rule);background:var(--white);padding:8px 0 24px;overflow:hidden}

/* Our own booking box in the call band (registry/booking.py, Bo 2026-10-09). */
.call-book{display:flex;flex-direction:column;gap:16px;padding:32px;background:var(--white);color:var(--ink);box-shadow:var(--shadow-accent)}
.call-book h3{margin:0;font-size:24px}
.call-book .cb-lede,.call-book .cb-status,.call-book .cb-zone{margin:0;font-size:17px;line-height:1.45;color:var(--dim)}
.call-book .cb-zone{font-size:15px}
.call-book fieldset{margin:0;padding:0;border:0;min-width:0}
.call-book legend{margin-bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cb-row{display:flex;flex-wrap:wrap;gap:8px}
.cb-day,.cb-time{min-height:48px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;cursor:pointer}
.cb-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:72px;padding:8px 10px}
.cb-day span{font-size:13px;color:var(--muted)}
.cb-day b{font-size:16px}
.cb-time{min-width:84px;padding:10px 14px;font-weight:600;font-size:16px;border-color:var(--accent);color:var(--accent)}
.cb-day[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.cb-day[aria-pressed="true"] span{color:var(--band-dim)}
.cb-time[aria-pressed="true"]{background:var(--accent);color:var(--white)}
.cb-day:focus-visible,.cb-time:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-who{display:flex;flex-direction:column;gap:14px;padding-top:6px;border-top:1px solid var(--rule)}
.cb-who label{display:flex;flex-direction:column;gap:8px;font-size:17px;font-weight:600}
.cb-who input{height:54px;padding:0 16px;border:2px solid var(--ink);background:var(--white);font-size:18px}
.cb-go{min-height:58px;font-size:19px;cursor:pointer}
@media (max-width:900px){.call-book{padding:24px 20px}}

/* --- Front page polish and critique fixes (Bo, 2026-10-10; the review file
   docs/design/buyingparty-forside-da.html). Same world, tighter craft. --- */
::selection{background:var(--accent);color:var(--white)}
html{scrollbar-color:var(--ink) var(--paper)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.front-dark :focus-visible{outline-color:var(--gold)}
h1,h2,h3,.front-title,.mk-title{text-wrap:balance}
p,li{text-wrap:pretty}
.prod-table td,.prod-price,.party-n,.cb-times button,.cb-days button{font-variant-numeric:tabular-nums}

/* One vertical rhythm for every band */
.front-band,.front-band.seg-band{padding-block:112px}
.front-head{margin-bottom:48px}

/* The two explainer bands are headed like the rest of the front page */
.what-head{margin-bottom:56px;max-width:none}
.what-head > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.what-head h2{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;max-width:14ch}
.what-head .seg-lede{margin:0;font-size:19px;line-height:1.55;color:var(--dim);max-width:52ch}
.party-stats{gap:24px}
.party-stat{padding:28px 28px 26px;gap:12px}
.party-n{font-size:56px;letter-spacing:-.03em}
.party-stat span:last-child{font-size:17px;font-weight:500;line-height:1.45;color:var(--dim)}
.party-src{margin-top:16px}
.mk-points li{padding-top:24px}
.mk-points h3{font-size:19px}

/* Products: the Danish or plain line under each name, and a price that is a sentence */
.prod-sub{display:block;margin-top:6px;font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--muted);text-transform:none;letter-spacing:0}
.prod-table td.is-words{font-family:'Archivo',sans-serif;font-size:20px;font-weight:600;line-height:1.3}
.prod-price.is-words{font-family:'Archivo',sans-serif;font-size:21px;font-weight:600;line-height:1.3}
.prod-tag{line-height:1.45;text-transform:none;letter-spacing:0;font-size:13px}

/* Hero: the video tile's label stays readable on hover; meta lines in sentence case */
a.hero-tile-go,a.hero-tile-go:hover,a.hero-tile-go:hover .hero-tile-k,.hero-tile-go:hover .hero-tile-k{color:var(--band-text)}

/* Booking: one step at a time, one form at a time */
.call-pick{padding:40px}
.call-form[hidden],.call-book[hidden],.call-switch-row[hidden],.call-alt[hidden]{display:none}
.call-switch-row{margin:0}
.call-switch{min-height:44px;padding:10px 0;background:none;border:0;font:inherit;font-size:16px;color:var(--band-text);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.call-switch:hover{color:var(--white)}
.cb-times:not([hidden]),.cb-who:not([hidden]){animation:cb-in .32s cubic-bezier(.16,1,.3,1)}
@keyframes cb-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cb-times,.cb-who{animation:none}}
.faq-item summary{cursor:pointer}

/* Rows that swipe sideways on a phone, and where you are in them */
.swipe-count{display:none}
.swipe:focus-visible{outline-offset:6px}
.m-book{display:none}
@media (max-width:1100px){
  .demo-grid.swipe,.prod-cards.swipe{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--pad) * -1);padding:6px var(--pad) 22px;scroll-padding-inline:var(--pad);scrollbar-width:thin}
  .demo-grid.swipe > *,.prod-cards.swipe > *{flex:0 0 min(86%,420px);scroll-snap-align:start}
  .swipe-count{display:flex;justify-content:center;gap:8px;margin:4px 0 0}
  .swipe-count i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:transparent}
  .swipe-count i.on{background:var(--ink)}
}
@media (max-width:900px){
  .front-band,.front-band.seg-band{padding-block:72px}
  .what-head > div{grid-template-columns:minmax(0,1fr)}
  .what-head{margin-bottom:36px}
  .party-n{font-size:46px}
  .call-pick{padding:28px 22px}
  /* A booking button within thumb reach; it steps aside at the top and at the booking */
  .m-book{display:flex;justify-content:center;align-items:center;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;min-height:54px;font-size:17px;transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
  .m-book.is-away{opacity:0;transform:translateY(14px);pointer-events:none}
  body:has(.m-book){padding-bottom:84px}
  .foot-links a,.foot-guides a{display:inline-block;padding:12px 6px}
}

/* "What is a buyer persona?": what a profile holds and why it holds up (Bo, 2026-10-10) */

/* Critique round, 2026-10-11 */
/* Who the visitor talks to, in the booking box */
.cb-who-line{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
/* Two heading sizes: the explainers and the call lead, the supporting bands follow */
.mk-title{font-size:30px}
#products .front-title,#faq .front-title{font-size:clamp(26px,2.4vw,32px)}
/* Tap areas on a phone */
@media (max-width:900px){
  .nav-toggle{min-height:44px}
  a.brand{padding-block:9px}
  .party-src a{display:inline-block;padding-block:14px}
  .mk-title{font-size:26px}
}


/* Third critique and Bo's round, 2026-10-11 */
/* The menu stays above the flags when the page scrolls under it */
.nav{z-index:40}
/* A booking button beside Menu on a phone, and menu links large enough to tap */
.nav-book-m{display:none}
@media (max-width:1040px){
  .nav-book-m{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;margin-right:10px;padding:0 16px;background:var(--accent);color:var(--white);font-size:15px;font-weight:700;border:1px solid var(--accent);box-shadow:var(--shadow-nav)}
  .nav-book-m + .nav-toggle{margin-left:0}
  .nav-open .nav-links a{display:flex;align-items:center;min-height:44px}
  .nav-open .nav-links{gap:2px}
}
/* The video sits level with the argument */
@media (min-width:1101px){.hero-row{align-items:center}}
/* Market, industry and role as three boxes side by side; stacked on a phone */
#markets .mk-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:48px 0 0}
#markets .mk-points li{padding:22px 24px 24px;border:1.5px solid var(--ink);background:var(--white);box-shadow:3px 3px 0 var(--ink)}
#markets .mk-points p{max-width:none}
@media (max-width:900px){#markets .mk-points{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}}
/* Two heading sizes */
.what-head h2,#call .front-title{font-size:clamp(30px,3.2vw,44px)}
.mk-title,#products .front-title,#faq .front-title{font-size:clamp(24px,2.3vw,30px)}
/* Where to start, and ordering without a call */
.prod-start{margin:-24px 0 28px;font-size:18px;font-weight:600;color:var(--dim);max-width:60ch}
/* The booking: the promise, one weekday per column */
.cb-promise{margin:0;font-size:15px;font-weight:600;color:var(--accent)}
.cb-days .cb-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cb-days .cb-day{min-width:0;padding-inline:2px}
.cb-days .cb-day b{white-space:nowrap}
@media (max-width:480px){.cb-days .cb-day b{font-size:13px}.cb-days .cb-day span{font-size:12px}}
/* The footer's guide links on one baseline */
.foot-guides{align-items:baseline}
.foot-guides > span{margin-right:6px}

/* The booking box's week arrows (Bo, 2026-10-12): five days at a time, and the weeks after. */
.cb-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cb-prev,.cb-next{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer}
.cb-prev:hover:not([disabled]),.cb-next:hover:not([disabled]){background:var(--ink);color:var(--white)}
.cb-prev:focus-visible,.cb-next:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-range{font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}

/* The front page from design J1 of the landing page canvas (Bo, 2026-10-12) */
/* Asking the example persona, and what changes on the page */
.ask-k{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.ask-k.is-blue{color:var(--accent);font-size:11px}
/* The market band, now inside the persona section */
.mk-block{margin-top:72px;padding:36px;background:var(--white);border:1px solid var(--rule)}
.mk-block .mk-top{gap:40px}
.mk-block .mk-title{margin:0;font-size:30px;max-width:20ch}
#markets.mk-block .mk-points{margin-top:32px}
.lanes{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;width:100%;max-width:600px;justify-self:end}
.lane-rows{border-bottom:1px solid var(--rule)}
.lane{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.lane-k{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.lane ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.lane li{display:inline-flex;opacity:.45}
.lane li.is-pick{opacity:1}
.lane-flag .market-flag{display:block;width:46px;height:auto;aspect-ratio:3/2;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--white)}
.lane li.is-pick .lane-flag .market-flag{width:54px;box-shadow:5px 5px 0 var(--gold)}
.lane-tile{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--white);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.lane li.is-pick .lane-tile{width:52px;height:52px;box-shadow:5px 5px 0 var(--gold)}
.lane-icon{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lane-pawn{width:30px;height:42px;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.lane li.is-pick .lane-pawn{width:36px;height:50px}
.pawn-white{fill:var(--white)}.pawn-blue{fill:var(--accent)}.pawn-gold{fill:var(--gold)}.pawn-sand{fill:#E9E2D2}
.lane-out{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px;background:var(--white);border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);min-width:150px;text-align:center}
.lane-out strong{font-size:15px}
.lane-out span{font-size:13px;line-height:1.4;color:var(--dim);max-width:16ch}
.lane-face{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink);background:var(--white)}
/* The hand-over to the buying party */
.pl-box{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;padding:20px 24px;background:var(--tint);border:1.5px solid var(--ink)}
.pl-faces{display:flex}
.pl-face{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink);background:var(--white)}
.pl-face+.pl-face{margin-left:-12px}
.pl-text{flex:1 1 380px;display:flex;flex-direction:column;gap:6px}
.pl-text strong{font-size:17px}
.pl-text span{font-size:15.5px;line-height:1.5;color:var(--dim)}
.pl-box a{font-weight:700}
/* The buying party: six voices around one decision */
.pv-pile{position:relative;list-style:none;margin:18px 0 0;padding:0;height:480px}
.pv-card{position:absolute;width:min(420px,33%);display:flex;flex-direction:column;gap:12px;padding:18px 44px 36px 18px;background:var(--white);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.pv-card > div{display:flex;flex-direction:column;gap:10px}
.pv-card strong{font-size:16px}
.pv-card p{margin:0;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:20px;line-height:1.3}
.pv-face{width:80px;height:80px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--gold);background:var(--white)}
.pv-1{left:0;top:6px;transform:rotate(-2deg);z-index:1}
.pv-2{left:29%;top:28px;transform:rotate(1.5deg);z-index:2}
.pv-3{left:58%;top:0;transform:rotate(-1.5deg);z-index:3}
.pv-4{left:7%;top:238px;transform:rotate(2deg);z-index:4}
.pv-5{left:37%;top:224px;transform:rotate(-1.5deg);z-index:5}
.pv-6{left:66%;top:206px;transform:rotate(1.5deg);z-index:6}
@media (max-width:1000px){
  .pv-pile{height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
  .pv-card{position:static;width:auto;transform:none;padding:18px}
  .pv-card{flex-direction:row;align-items:flex-start}
  .pv-face{flex:none;width:64px;height:64px}
}
@media (max-width:760px){
  .mk-block{padding:24px 20px}
  .lanes{grid-template-columns:minmax(0,1fr);justify-self:start}
  .lane-out{display:grid;grid-template-columns:64px minmax(0,1fr);gap:2px 14px;align-items:center;text-align:left;justify-self:stretch}
  .lane-face{grid-row:1 / span 2;width:64px;height:64px}
  .lane-out strong{align-self:end;white-space:nowrap}
  .lane-out span{align-self:start;max-width:none}
  .pv-card p{font-size:18px}
}

/* Meet one: a sample persona sheet, half width, beside a plain intro (Bo, 2026-10-12) */
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:40px 72px;align-items:start;margin:-16px 0 72px}
.pc-meet{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:52ch}
.pc-meet-1,.pc-meet-2{margin:0;font-size:19px;line-height:1.55}
.pc-meet-2{color:var(--dim);font-size:17px}
.pc-meet .btn-ink{margin-top:6px}
.pc-sample{position:relative;isolation:isolate;padding:22px 14px 14px 0;transform:rotate(1.2deg)}
.pc-sample::before{content:"";position:absolute;inset:34px 0 0 14px;z-index:-1;background:var(--hero-ground);border:1.5px solid var(--ink);transform:rotate(-3deg)}
.pc-tab{position:absolute;top:6px;left:22px;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--ink);border:1.5px solid var(--ink);padding:5px 10px}
.pc-card{display:flex;flex-direction:column;gap:16px;padding:30px 24px 22px;background:var(--white);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);scroll-margin-top:var(--anchor);outline:2px dashed var(--gold);outline-offset:6px}
.pc-top{display:flex;align-items:center;gap:14px}
.pc-face{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--gold);background:var(--white)}
.pc-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-who strong{font-size:17px}
.pc-who span{font-size:13.5px;line-height:1.4;color:var(--dim)}
.pc-quote{margin:0;padding-bottom:14px;border-bottom:1px solid var(--rule);font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:18px;line-height:1.4}
.pc-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.pc-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--faint)}
.pc-dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pc-dots li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45}
.pc-dots li::before{content:"·";position:absolute;left:4px;color:var(--gold-text);font-weight:700}
@media (max-width:900px){
  .pc-row{grid-template-columns:minmax(0,1fr);margin-bottom:56px}
  .pc-sample{transform:none;max-width:560px}
}

/* Round two on the sample sheet (Bo, 2026-10-12): a wider heading, smaller personality scores, more details */
.what-head > div{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.what-head h2{max-width:none}
@media (max-width:900px){.what-head > div{grid-template-columns:minmax(0,1fr)}}
.oc-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.oc-mini li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 6px;min-width:0}
.oc-mini b{font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:13px}
.oc-mini .oc-n{font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:right}
.oc-mini .oc-bar{grid-column:1 / -1;display:block;height:6px;background:var(--rule-lighter);border:1px solid var(--ink)}
.oc-mini .oc-bar i{display:block;height:100%;background:var(--accent)}
.oc-mini .oc-name{grid-column:1 / -1;font-size:10.5px;line-height:1.2;color:var(--faint);overflow-wrap:anywhere}
.pc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.pc-words{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.pc-words s{display:inline-block;padding:3px 7px;border:1px solid var(--ink);font-size:12.5px;text-decoration-color:var(--warn);text-decoration-thickness:2px}
.pc-text{margin:0;font-size:14px;line-height:1.45}

/* Round three (Bo, 2026-10-12): the sample sheet 30% smaller, the chat as a small sample tool */
.pc-card{gap:12px;padding:24px 18px 16px}
.pc-face{width:48px;height:48px}
.pc-who strong{font-size:15px}
.pc-who span{font-size:12px}
.pc-quote{font-size:15.5px;padding-bottom:10px}
.pc-dots li{font-size:13px}
.pc-text{font-size:12.5px}
.pc-words s{font-size:11.5px;padding:2px 6px}
.pc-note{font-size:11.5px}
.oc-mini .oc-name{font-size:9.5px}
.ask-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:32px 72px;align-items:start;margin:0 0 8px}
.ask-intro{display:flex;flex-direction:column;gap:12px;max-width:44ch}
.ask-title{margin:0;font-family:'Archivo Black','Archivo Black Fallback',sans-serif;font-weight:400;font-size:26px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.ask-lead{margin:0;font-size:19px;line-height:1.55;color:var(--dim)}
.tool{background:var(--white);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:13px}
.tool-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--band);color:var(--band-text);border-bottom:1.5px solid var(--ink)}
.tool-dots{display:flex;gap:5px}
.tool-dots i{width:8px;height:8px;border-radius:50%;background:var(--band-dim)}
.tool-name{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em}
.tool-tag{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:2px 7px}
.tool-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.tool-chat{display:flex;flex-direction:column;background:var(--hero-ground);border-right:1.5px solid var(--ink);min-width:0}
.ask-chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px}
.ask-you{align-self:flex-end;max-width:85%;margin:0;background:var(--accent);color:var(--white);padding:6px 9px;font-size:12.5px;line-height:1.35}
.ask-him{display:flex;gap:6px;align-items:flex-end;max-width:92%}
.ask-him p{margin:0;background:var(--white);padding:6px 9px;font-size:12.5px;line-height:1.4;border:1px solid var(--ink)}
.ask-face{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--ink);background:var(--white)}
.tool-input{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:6px 6px 6px 10px;background:var(--white);border:1px solid var(--ink)}
.tool-input span{flex:1;color:var(--faint);font-size:12px}
.tool-input b{background:var(--accent);color:var(--white);font-size:11.5px;padding:4px 9px;opacity:.7}
.ask-changes{display:flex;flex-direction:column;gap:6px;padding:12px;min-width:0}
.ask-changes .ask-k{font-size:10px}
.ask-changes ul{list-style:none;margin:0;padding:0}
.ask-changes li{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px solid var(--rule)}
.ask-from{font-size:11.5px;line-height:1.3;color:var(--faint);text-decoration:line-through;text-decoration-color:var(--warn);text-decoration-thickness:1.5px}
.ask-new{font-size:12.5px;line-height:1.3;font-weight:700}
.ask-note{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--faint)}
@media (max-width:900px){
  .ask-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .tool-body{grid-template-columns:minmax(0,1fr)}
  .tool-chat{border-right:0;border-bottom:1.5px solid var(--ink)}
}

/* The sample sheet lies on its side (Bo, 2026-10-13): two columns, about the same area */
.pc-row{grid-template-columns:minmax(0,1fr) minmax(0,660px);align-items:center}
.pc-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top ocean" "quote ocean" "worries lose" "worries decides";gap:12px 22px;align-items:start}
.pc-card .pc-two{display:contents}
.pc-top{grid-area:top}
.pc-quote{grid-area:quote;border-bottom:0;padding-bottom:0}
.pc-ocean{grid-area:ocean}
.pc-worries{grid-area:worries;padding-top:12px;border-top:1px solid var(--rule)}
.pc-lose{grid-area:lose;padding-top:12px;border-top:1px solid var(--rule)}
.pc-decides{grid-area:decides}
@media (max-width:1100px){.pc-row{grid-template-columns:minmax(0,1fr);align-items:start}}
@media (max-width:640px){
  .pc-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "quote" "ocean" "worries" "lose" "decides"}
}

/* What a profile holds, beside the sample sheet (Bo, 2026-10-13) */
.pc-list{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:4px;font-size:17px;line-height:1.45}
.pc-list li::marker{color:var(--gold-text)}

/* How to use the persona (Bo, 2026-10-13): the sample tool on the left, as tall as the sheet above and
   slanted the other way; concrete uses on the right */
.ask-row{grid-template-columns:minmax(0,660px) minmax(0,1fr);align-items:center;gap:40px 72px}
.ask-row .tool{height:360px;display:flex;flex-direction:column;transform:rotate(-1.2deg)}
.ask-row .tool-body{flex:1;min-height:0}
.ask-row .ask-chat{justify-content:flex-end;overflow:hidden}
.ask-row .ask-changes{overflow:hidden}
.ask-intro{max-width:52ch;gap:14px}
.ask-intro .pc-meet-2 a{font-weight:600}
@media (max-width:900px){
  .ask-row{grid-template-columns:minmax(0,1fr)}
  .ask-row .ask-intro{order:-1}
  .ask-row .tool{height:auto;transform:none}
}

/* The buying party (Bo, 2026-10-13): who is in one, in bullets, beside six voices about the size of the sheets above */
.pv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:40px 72px;align-items:center;margin:0 0 64px}
.pv-intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:52ch}
.pv-intro .pc-meet-2 a{font-weight:600}
.pv-row .pv-pile{margin:0;height:410px}
.pv-row .pv-card{width:36%;gap:8px;padding:14px 50px 26px 14px;box-shadow:4px 4px 0 var(--ink)}
.pv-row .pv-card > div{gap:6px}
.pv-row .pv-card strong{font-size:14px}
.pv-row .pv-card p{font-size:16px;line-height:1.3}
.pv-row .pv-face{width:48px;height:48px}
.pv-row .pv-1{left:0;top:4px}
.pv-row .pv-2{left:30%;top:24px}
.pv-row .pv-3{left:60%;top:0}
.pv-row .pv-4{left:4%;top:206px}
.pv-row .pv-5{left:34%;top:222px}
.pv-row .pv-6{left:64%;top:200px}
@media (max-width:1000px){
  .pv-row .pv-pile{height:auto}
  .pv-row .pv-card{width:auto;padding:14px}
}
@media (max-width:900px){
  .pv-row{grid-template-columns:minmax(0,1fr)}
}

/* The hero intro's footnote (Bo, 2026-10-13) */
.hero-note{margin:16px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);max-width:52em}

/* The price table's header, cleaned (Bo, 2026-10-13, design P1): every column has the same three rows,
   a one-line tag, the name with room for two lines and the line under it with room for two, all from the top */
.prod-table thead th{vertical-align:top;padding:22px 22px 20px}
.prod-tag{display:inline-block;margin-bottom:12px;padding:4px 8px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.prod-table .prod-name{min-height:3.6em}
.prod-table .prod-sub{min-height:2.8em;margin-top:8px}

/* Phones (mobile review, 2026-10-13). Kept last so no later desktop rule cancels them. */
.order-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.order-actions .btn-ghost{display:inline-flex;align-items:center;justify-content:center}
.order-card .invite-wrap{margin-top:20px}
.order-piece label{margin-top:0}
.contact-form input,.contact-form textarea{font-size:16px}
sup{line-height:0}
#what-persona{overflow-x:hidden;overflow-x:clip}
@media (max-width:1100px){
  .ask-row,.pv-row{grid-template-columns:minmax(0,1fr)}
  .ask-row .ask-intro{order:-1}
  .ask-row .tool,.pv-row .pv-pile{width:100%;max-width:660px}
}
@media (min-width:901px) and (max-width:1100px){.pc-sample{max-width:660px}}
@media (max-width:1040px){
  .nav.nav-folds:not(.nav-open) .nav-links{display:none}
}
@media (max-width:900px){
  .contact-card{padding:24px 20px}
  .oc-mini{grid-template-columns:minmax(0,1fr);gap:8px}
  .oc-mini li{grid-template-columns:auto minmax(0,1fr) auto;gap:3px 8px}
  .oc-mini b{grid-column:1;grid-row:1}
  .oc-mini .oc-name{grid-column:2;grid-row:1;font-size:12.5px;color:var(--dim);overflow-wrap:normal}
  .oc-mini .oc-n{grid-column:3;grid-row:1}
  .oc-mini .oc-bar{grid-row:2}
}
@media (max-width:900px) and (max-height:500px){
  .m-book{display:none}
  body:has(.m-book){padding-bottom:0}
}
@media (max-width:720px){
  .seg-table{min-width:760px}
  .seg-table tbody th,.seg-table thead td:first-child{position:sticky;left:0;z-index:1}
  .seg-table tbody th{padding:14px 10px;font-size:11px;letter-spacing:.06em;overflow-wrap:break-word;background:linear-gradient(to left,var(--ink) 2px,var(--tint) 2px)}
  .seg-table thead td:first-child{background:linear-gradient(to left,var(--ink) 2px,var(--band) 2px)}
}
@media (max-width:480px){
  .order-actions{flex-direction:column;align-items:stretch}
  .order-actions .btn{text-align:center}
  .form-card{padding:22px 16px 24px}
  .order-piece{padding:12px}
  .buy-row{flex-wrap:wrap;row-gap:2px}
  .go-name{font-size:21px}
  :lang(da) .go-name,:lang(da) .buy-row{-webkit-hyphens:auto;hyphens:auto}
  .seg-faces{gap:20px 10px}
  .seg-faces b{font-size:14px;overflow-wrap:break-word}
  .seg-faces span{font-size:11px;letter-spacing:.03em;overflow-wrap:break-word}
  :lang(da) .seg-faces b,:lang(da) .seg-faces span{-webkit-hyphens:auto;hyphens:auto}
}
@media (max-width:380px){
  .howto-mini{flex-direction:column;align-items:flex-start;gap:12px}
  .howto-mini .portrait{width:64px;height:64px;flex:0 0 64px}
  .howto-mini .initials{font-size:24px}
  .howto-mini-name{overflow-wrap:normal}
  .seg-hero h1{font-size:34px}
  .seg-fig{font-size:60px}
  .nav{column-gap:10px;padding-inline:16px}
  .hero h1{font-size:28px}
  .what-head h2{font-size:27px}
  .brand{font-size:15px}
  .nav-book-m{margin-right:0;padding:0 12px}
  .call-book{padding:22px 14px}
  .cb-days .cb-row{gap:4px}
  .cb-days .cb-day b{font-size:12px}
}