/* The brand layer, on every page since 2026-11-06 (it began as the home concept's own sheet; layout() loads it via
   brand-layer.mjs). Martin's components, restyled to the brand on /brand/: one purple + greys, square flat buttons,
   rounded cards, space between sections, no rules. Scoped to .hc (on <main>) or html.hc-page (header and footer). */
.hc{--r-card:14px}
/* header: the live 3D lockup in place of the text wordmark */
html.hc-page header.site{border-bottom:0;box-shadow:0 1px 0 rgba(15,5,70,.04)}
html.hc-page .hc-logo{display:block;width:150px;line-height:0}
html.hc-page .hc-logo .logo3d,html.hc-page .hc-logo img,html.hc-page .hc-logo svg{width:100%;height:auto;display:block}
/* sections: space, never a rule */
.hc .section{border-top:0}
.hc .hero{padding-top:64px}
/* buttons: square and flat (Phil 2026-11-04 13:25: "I donno if the 3d effect on the buttons work.. let's leave them flat.") */
.hc .btn{border-radius:0;box-shadow:none}
.hc .btn.light{background:#fff;border-color:#d9d2ee}
.hc .btn.light:hover{border-color:var(--purple)}
/* the hero panel: a rounded card; the iso forms take the drawing's place */
.hc .panel.hpanel{border:0;border-radius:var(--r-card)}
.hc .hpanel .frow{border-bottom:0;padding:9px 0}
.hc .iso-stage{position:relative;width:100%;margin:6px 0 4px}
/* the forms and their motion: assets/brand/iso-motion.css (shared with /brand/) */
/* the trust row: no rule above it */
.hc .trust{border-top:0;padding-top:0}
/* cards: rounded, raised on soft, no border */
.hc .card{border:0;border-radius:var(--r-card);background:var(--soft);transition:background .15s,transform .15s}
.hc .card:hover{background:var(--soft-2);transform:translateY(-2px)}
.hc .section.soft .card{background:#fff}
.hc .pcard{overflow:hidden}
.hc .pcard .band{border-bottom:0;background:var(--soft-2)}
/* the ruled outcome and timeline columns become cards */
.hc .rule{border-top:0;padding:26px;border-radius:var(--r-card);background:var(--soft);transition:background .15s,transform .15s}
.hc .rule:hover{background:var(--soft-2);transform:translateY(-2px)}   /* the ruled cards highlight like the others (Phil 11-06 18:27) */
.hc .section.soft .rule{background:#fff}
.hc .section.soft .rule:hover{background:var(--soft-2)}
.hc .measure{border-top:0;padding-top:0;color:var(--dim)}
.hc .measure::before{content:"";display:block;width:24px;height:3px;background:var(--purple-2);margin-bottom:12px}
/* chips: soft pills of the same family, no outline */
.hc .chip{border:0;border-radius:999px;background:var(--soft);padding:7px 14px}
.hc .chip:hover{background:var(--soft-2);color:var(--purple)}
/* pricing: three cards instead of a ruled table */
.hc .plan{border:0;border-radius:var(--r-card);background:#fff}
/* founders */
.hc .hc-initials{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:var(--r-card);background:var(--purple-2);color:#fff;font-family:var(--head);font-weight:800;font-size:34px;letter-spacing:-.03em;box-shadow:4px 4px 0 #5634c0}
/* faq: space between questions, no rules */
.hc .faq details{border-bottom:0;background:var(--soft);border-radius:var(--r-card);padding:18px 22px;margin-bottom:10px}
/* the calculator rows on dark */
.hc .section.dark .mrow{border-bottom-color:rgba(255,255,255,.06)}
@media (max-width:640px){html.hc-page .hc-logo{width:128px}.hc .rule,.hc .card{padding:22px}}
/* polish: the last rules and underlines, and the mono law (labels in capitals) */
.hc .panel-top{border-bottom:0;padding-bottom:0}
.hc .num{text-transform:uppercase;letter-spacing:.12em}
.hc main a:not(.btn):not(.card):not(.chip):not(.b-btn),.hc a:not(.btn):not(.card):not(.chip):not(.b-btn){text-decoration:none;color:var(--purple)}
.hc a:not(.btn):not(.card):not(.chip):not(.b-btn):hover{color:var(--purple-d)}
.hc .section.dark a:not(.btn){color:#c9b6ff}
.hc .plans{border:0;gap:20px;background:transparent}
.hc .plan{box-shadow:none}
.hc .plan.featured{box-shadow:0 0 0 2px var(--purple-2) inset}
.hc .plan .badge{border-radius:0 0 8px 8px;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}   /* centred on the card top (Phil 11-06 13:08) */
.hc .ticks li{border-bottom:0;padding:6px 0 6px 28px}
.hc .ticks li:before{top:15px}
.hc .calc .result{border-left:0;border-top:0}
.hc .hc-bandmark{width:150px;margin:-8px 0 18px -6px;justify-content:flex-start}
/* light / dark, this page only (Phil 2026-11-04 14:54: "just do it for the main page.. the sun and moon icon on the corner."
   / "the dark would use the dark of the v1 site also."). Tokens are v1's [data-theme="dark"] block. */
html.hc-page .hc-logo{color:#0F0546}
.themetoggle{background:none;border:0;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;padding:6px}
html.hc-page .hc-right{display:flex;align-items:center;gap:14px}
html.hc-page .hc-logo span.logo3d{color:inherit}   /* site.css colours every .logo span purple; the word must follow .hc-logo */
.themetoggle .ic-sun{display:none}
html[data-theme="dark"] .themetoggle .ic-sun{display:block}
html[data-theme="dark"] .themetoggle .ic-moon{display:none}
html.hc-page[data-theme="dark"]{color-scheme:dark;--paper:#0d0a16;--ink:#f2effc;--ink-2:#c9c3dc;--dim:#8b81a8;--line:rgba(138,92,246,.30);--soft:rgba(138,92,246,.09);--soft-2:rgba(138,92,246,.15);--dark:#07050d}
html.hc-page[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html.hc-page[data-theme="dark"] .hc-logo{color:#fff}
html.hc-page[data-theme="dark"] header.site{background:rgba(13,10,22,.94);box-shadow:0 1px 0 rgba(138,92,246,.16)}
html.hc-page[data-theme="dark"] header.site a,html.hc-page[data-theme="dark"] header.site button{color:var(--ink)}
html.hc-page[data-theme="dark"] header.site .btn{color:#fff}
html.hc-page[data-theme="dark"] header.site .drop{background:#140f22}
html.hc-page[data-theme="dark"] .hc p,html.hc-page[data-theme="dark"] .hc .lede,html.hc-page[data-theme="dark"] .hc .head p,html.hc-page[data-theme="dark"] .hc .card p,html.hc-page[data-theme="dark"] .hc .rule p,html.hc-page[data-theme="dark"] .hc .hpanel p{color:var(--ink-2)!important}
html.hc-page[data-theme="dark"] .hc .section.soft{background:rgba(138,92,246,.05)}
html.hc-page[data-theme="dark"] .hc .section.soft .card,html.hc-page[data-theme="dark"] .hc .section.soft .rule,html.hc-page[data-theme="dark"] .hc .plan{background:rgba(138,92,246,.09)}
html.hc-page[data-theme="dark"] .hc .section.soft .card:hover,html.hc-page[data-theme="dark"] .hc .section.soft .rule:hover{background:var(--soft-2)}
html.hc-page[data-theme="dark"] .hc .btn.light{background:transparent;color:var(--ink);border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .frow small,html.hc-page[data-theme="dark"] .hc .fine,html.hc-page[data-theme="dark"] .hc .muted{color:var(--dim)}
html.hc-page[data-theme="dark"] .hc .ico-l .w{fill:#1a1428}
html.hc-page[data-theme="dark"] .hc .ico-l .s,html.hc-page[data-theme="dark"] .hc .ico-l .s2{fill:#241a38}
html.hc-page[data-theme="dark"] .hc .seg2{background:transparent;border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .seg2 button+button{border-left-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .chip{color:var(--ink)}
html.hc-page[data-theme="dark"] .hc .wd .w{fill:#1a1428}
html.hc-page[data-theme="dark"] .hc .wd .s{fill:#211832}
html.hc-page[data-theme="dark"] .hc .wd .s2{fill:#2a1f40}
html.hc-page[data-theme="dark"] .hc .wd .lbk{fill:var(--ink)}
/* the top bar: light purple on white, the same purple over the dark (Phil 2026-11-04 14:59: "on white, the top is dark?
   ... maybe the purple... then we can do the purple over the dark also") */
html.hc-page .topbar{background:var(--soft-2);color:var(--ink-2)}
html.hc-page .topbar a{color:var(--purple);text-decoration:none}
html.hc-page .topbar a:hover{color:var(--purple-d)}
html.hc-page[data-theme="dark"] .topbar{background:rgba(138,92,246,.16);color:var(--ink-2)}
html.hc-page[data-theme="dark"] .topbar a{color:#c9b6ff}
/* the footer: the real logo on dark, purple blocks, In purple, Theory white (Phil 2026-11-04 15:01: "the logo needs to be the
   purple/white on dark, purple/dark on light.") */
html.hc-page .hc-footlogo{display:block;width:190px;line-height:0}
html.hc-page .hc-footlogo .logo3d,html.hc-page .hc-footlogo img,html.hc-page .hc-footlogo svg{width:100%;height:auto;display:block}
.hc .plan ul{flex:0 0 auto}.hc .plan .btn{margin-top:0}   /* the button follows its list; spare height falls below the card content, not above the button (Phil 11-06 17:06) */
.hc .pcard .band{background:transparent;border-bottom:0}   /* the drawing area matches the card below it (Phil 11-06 18:19) */
html.hc-page[data-theme="dark"] .hc .cta-band .btn.white{color:#0f0f13}   /* the closing band stays exactly as in light (Phil 11-06 18:23): white button, dark text; the page's flipped ink made it white on white */
html.hc-page .hc .calc .actions .btn.white{background:var(--purple);border-color:var(--purple);color:#fff}
html.hc-page .hc .calc .actions .btn.white:hover{background:var(--purple-d);border-color:var(--purple-d)}   /* the calculator's "Check these numbers with us": purple with white text in both modes, even on the dark purple band (Phil 11-06 18:27 dark, 21:26 both) */
html.hc-page[data-theme="dark"] .mcta{background:var(--paper);border-top-color:var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.4)}   /* the phone's pop-up bottom bar goes dark in dark (Phil 11-06 18:29) */
/* the black bands (calculator, closing band, footer) go dark purple, the black is too stark: light (Phil 11-06 21:21) and dark too (21:23, "just for kicks"). Trial. */
html.hc-page,html.hc-page[data-theme="dark"]{--dark:#1d1438}
/* Martin's client logo marquee in dark: grey-on-black was near invisible, so the logos are inverted to light grey, full on hover */
html.hc-page[data-theme="dark"] .logos img{filter:grayscale(1) invert(1);opacity:.7}
html.hc-page[data-theme="dark"] .logos li:hover img{filter:grayscale(1) invert(1);opacity:1}

/* ── dark mode for Martin's shared components, now that the brand is sitewide (2026-11-06). They hard-code white
   in site.css, so in dark their text flipped light on a white box. Each gets the dark tokens instead. ── */
html.hc-page[data-theme="dark"] .menu.open{background:var(--paper);border-bottom-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .chip,html.hc-page[data-theme="dark"] .hc .svc li{background:var(--soft);color:var(--ink);border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .qopt,html.hc-page[data-theme="dark"] .hc .choice label{background:var(--soft);color:var(--ink);border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .qopt[aria-pressed=true],html.hc-page[data-theme="dark"] .hc .choice label:has(input:checked){background:var(--soft-2);border-color:var(--purple)}
html.hc-page[data-theme="dark"] .hc .form input,html.hc-page[data-theme="dark"] .hc .form select,html.hc-page[data-theme="dark"] .hc .form textarea{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .form ::placeholder{color:var(--dim)}
html.hc-page[data-theme="dark"] .hc .pex-steps{background:transparent;border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .pex-steps button{color:var(--ink)}
html.hc-page[data-theme="dark"] .hc .pex-steps button+button{border-left-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .pex-steps button[aria-pressed=true]{background:var(--purple);color:#fff}
html.hc-page[data-theme="dark"] .hc .frame{background:var(--soft);border-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .frame.cur{border-color:var(--purple)}
html.hc-page[data-theme="dark"] .hc .frame .cap{border-top-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .frame .cap small{color:var(--dim)}
html.hc-page[data-theme="dark"] .hc .prose p,html.hc-page[data-theme="dark"] .hc .prose li{color:var(--ink-2)}
html.hc-page[data-theme="dark"] .hc .answer{color:var(--ink)}
html.hc-page[data-theme="dark"] .hc .tbl th,html.hc-page[data-theme="dark"] .hc .tbl td{border-bottom-color:var(--line)}
html.hc-page[data-theme="dark"] .hc .tbl thead th{background:var(--soft-2)}
html.hc-page[data-theme="dark"] .otp{background:rgba(13,10,22,.96);border-bottom-color:var(--line)}
html.hc-page[data-theme="dark"] .otp a{background:transparent;color:var(--ink);border-color:var(--line)}
html.hc-page[data-theme="dark"] .otp a[aria-current]{background:var(--purple);border-color:var(--purple);color:#fff}
@media (max-width:640px){html.hc-page[data-theme="dark"] .hc .tbl tr{background:var(--soft);border-color:var(--line)}}
html.hc-page[data-theme="dark"] .bguide .b-btn.ghostb{color:#0f0f13}   /* the brand guide's white side-door button keeps dark text in dark, like the closing band's */
.hc .section:not(.soft) .plan{background:var(--soft)}   /* plan cards are white on a soft section (home); on a white section (pricing) they take the soft tint, or they vanish */

/* ── Martin's shared components to the brand (rollout section 3, 2026-11-07): no square boxes, no rules ── */
/* 3.1 boxes become rounded tinted cards */
.hc .panel,.hc .inline-cta,.hc .result-card{border:0;border-radius:var(--r-card)}
.hc .takeaways,.hc .answer{border-left:0;border-radius:var(--r-card)}
.hc .compare-cols{border:0;gap:12px;background:transparent}
.hc .compare-cols>div{border-radius:var(--r-card);background:var(--soft)}
.hc .compare-cols>div+div{border-left:0;border-top:0;background:var(--soft-2)}
.hc .frame{border:0;border-radius:var(--r-card);overflow:hidden}
.hc .frame.cur{box-shadow:0 0 0 2px var(--purple-2) inset}
.hc .frame .cap{border-top:0}
.hc iframe{border-radius:var(--r-card)}   /* the thank-you calendar is Google's and stays white in dark; rounded, it reads as a card */
/* 3.2 ruled lists become space */
.hc .step,.hc .flow-row,.hc .toc a,.hc .linklist li{border-bottom:0}
.hc .stats{border-top:0;padding-top:0}
.hc .steps li::before{border:0;background:var(--soft-2);border-radius:6px;padding:4px 7px}
.hc .az a{border:0;border-radius:999px;background:var(--soft);padding:5px 11px}
.hc .az a:hover{background:var(--soft-2)}
/* 3.3 tables: no rules, rows banded in the soft tint, the header on soft-2 */
.hc .tbl-wrap{border-radius:var(--r-card)}
.hc .tbl{border-collapse:separate;border-spacing:0}
.hc .tbl th,.hc .tbl td{border-bottom:0}
.hc .tbl tbody tr:nth-child(odd)>*{background:var(--soft)}
.hc .tbl thead th{background:var(--soft-2)}
.hc .tbl thead th:first-child{border-top-left-radius:var(--r-card)}.hc .tbl thead th:last-child{border-top-right-radius:var(--r-card)}
/* 3.4 form options: soft rounded tiles, not outlined boxes; the chosen one is purple-edged */
.hc .choice label,.hc .qopt{border:0;border-radius:10px;background:var(--soft)}
.hc .choice label:hover,.hc .qopt:hover{background:var(--soft-2)}
.hc .choice label:has(input:checked),.hc .qopt[aria-pressed=true]{box-shadow:0 0 0 2px var(--purple) inset;background:var(--soft-2)}
/* 3.5 the logo strip and case study images: no frames, rounded */
.hc .logos{border-top:0;border-bottom:0}
.hc .cases .case img,.hc .case-ph{border-bottom:0}
.hc .case-hero img,.hc .case-hero .case-ph,.hc .shot img{border:0;border-radius:var(--r-card)}
@media (max-width:640px){
  .hc .tbl tr{border:0;border-radius:var(--r-card);background:var(--soft)}
  .hc .tbl tbody tr:nth-child(odd)>*{background:transparent}
  .hc .plan{border:0!important}
  .hc .compare-cols>div+div{border-top:0}
}
/* option tiles sitting on a card or a soft section take white (dark: a lighter wash), or they vanish into it */
.hc .card .choice label,.hc .card .qopt,.hc .section.soft .choice label,.hc .section.soft .qopt{background:#fff}
html.hc-page[data-theme="dark"] .hc .card .choice label,html.hc-page[data-theme="dark"] .hc .card .qopt,html.hc-page[data-theme="dark"] .hc .section.soft .choice label,html.hc-page[data-theme="dark"] .hc .section.soft .qopt{background:rgba(255,255,255,.05)}
.hc .card .choice label:hover,.hc .card .qopt:hover{background:var(--soft-2)}
/* the header logo's still fallback (reduced motion, no JS): navy "Theory" in light, the reverse file in dark; the live logo replaces both */
html.hc-page .hc-logo .lg-dk{display:none}
html.hc-page[data-theme="dark"] .hc-logo .lg-lt{display:none}
html.hc-page[data-theme="dark"] .hc-logo .lg-dk{display:block}
.hc .tl-only{background:var(--soft);border-radius:var(--r-card);padding:22px 22px 10px}   /* how-it-works: the three slices on their own, each on a soft card so they sit like the phase cards elsewhere */
/* three levels of link (Phil 2026-11-07): purple button = a door, white button = go deeper, text = inline.
   A card that goes somewhere ends in a white button; the whole card stays clickable. */
.hc a.card .more{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:auto;padding:10px 16px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px #d9d2ee inset;font-weight:650;font-size:15px;line-height:1.2;border-radius:0;text-decoration:none}
.hc a.card:hover .more{box-shadow:0 0 0 1px var(--purple) inset;color:var(--purple)}
html.hc-page[data-theme="dark"] .hc a.card .more{color:#0f0f13}
html.hc-page[data-theme="dark"] .hc a.card:hover .more{color:var(--purple)}
/* brand guide: the block drawings shown still */
.bguide .iso-icons svg{width:72px;height:72px}
.bguide .iso-still svg{display:block;width:100%;height:auto}
.hc .bguide .sw{box-shadow:none;background:var(--soft)}   /* swatches are cards too: soft, no outline */
.hc .bguide .sw .chip{border-radius:0;padding:0;background-clip:border-box}   /* a colour sample, not a pill: the sitewide .chip rule must not reach it */
/* which blocks react on hover (Phil 2026-11-07): a card that holds its own button or control stays still, the control reacts */
.hc .card:has(form,a.btn,input,select,textarea):hover,.hc .rule:has(form,a.btn,input,select,textarea):hover{transform:none;background:var(--soft)}
.hc .section.soft .card:has(form,a.btn,input,select,textarea):hover{background:#fff}
html.hc-page[data-theme="dark"] .hc .section.soft .card:has(form,a.btn,input,select,textarea):hover{background:rgba(138,92,246,.09)}
/* the how-it-works timeline slices are a grid of three, so they react like the phase cards */
.hc .tl-only{transition:background .15s,transform .15s}
.hc .tl-only:hover{background:var(--soft-2);transform:translateY(-2px)}
/* dark mode text purple (Phil 2026-11-07 11:03: "yes, lighter purple on dark mode"): text, links and labels take #9d7bff
   (6.3:1 on the page, AA everywhere); anything with white text on a purple fill keeps the deeper #7c4dea so its text stays legible */
html.hc-page[data-theme="dark"]{--purple:#9d7bff;--purple-fill:#7c4dea}
html.hc-page[data-theme="dark"] .btn:not(.light):not(.white),html.hc-page[data-theme="dark"] .hc .calc .actions .btn.white,
html.hc-page[data-theme="dark"] .plan .badge,html.hc-page[data-theme="dark"] .seg button[aria-pressed=true],html.hc-page[data-theme="dark"] .seg2 button[aria-pressed=true],
html.hc-page[data-theme="dark"] .hc .pex-steps button[aria-pressed=true],html.hc-page[data-theme="dark"] .otp a[aria-current],html.hc-page[data-theme="dark"] .bguide .b-btn:not(.ghostb){background:var(--purple-fill);border-color:var(--purple-fill)}
html.hc-page[data-theme="dark"] ::selection{background:var(--purple-fill)}
/* phone compact card list: the block icon takes Martin's icon column (a touch wider for the iso drawing);
   cards with no icon get one column, not an empty gap on the left */
@media (max-width:640px){
  .hc .grid.rvu:has(> a.card:nth-child(6)) > a.card:has(> .ico-iso){grid-template-columns:44px minmax(0,1fr)}
  .hc .grid.rvu:has(> a.card:nth-child(6)) > a.card > .ico-iso{grid-column:1;grid-row:1 / span 3;width:44px;height:44px}
  .hc .grid.rvu:has(> a.card:nth-child(6)) > a.card:not(:has(> .ico-iso, > .ico-l)){grid-template-columns:minmax(0,1fr)}
  .hc .grid.rvu:has(> a.card:nth-child(6)) > a.card:not(:has(> .ico-iso, > .ico-l)) > *{grid-column:1}
}

/* ── phone review fixes (2026-11-07, reviewers rtw + gen) ── */
/* headings never leave one word alone on the last line; paragraphs avoid it where they can */
.hc h1,.hc h2,.hc h3,.hc .mono{text-wrap:balance}
.hc p,.hc li{text-wrap:pretty}
/* "Read more" only on cards whose text actually runs over (site.js sets [hidden] on the rest) */
.hc .rm[hidden]{display:none!important}
/* "On this page": the current chip's white text was taken by the sitewide link colour */
html.hc-page .hc .otp a[aria-current]:not(.btn){color:#fff}
/* case study placeholders: the name centred in the hero too (the hero's display:block dropped the centring) */
.hc .case-hero .case-ph{display:flex}
html.hc-page[data-theme="dark"] .hc .case-ph{background:linear-gradient(135deg,rgba(138,92,246,.13),rgba(138,92,246,.24))}
/* long "Related" chips that wrap: a rounded rectangle, not a blob (a one-line chip is ~36px tall, so 18px still reads as a pill) */
.hc .chip{border-radius:18px}
@media (max-width:640px){
  /* the closing band's two buttons: centred text, balanced wrap */
  .hc .cta-band .opts .btn{justify-content:center;text-align:center;text-wrap:balance}
  .hc .cta-band{padding-bottom:40px}
  .hc .cta-band .fine{margin-bottom:0}
  html.hc-page footer.site{padding-top:40px}
  /* hero doors stacked: equal, full width */
  .hc .hero .actions{flex-direction:column;align-items:stretch}
  .hc .hero .actions .btn{width:100%;justify-content:center;text-align:center}
  /* the hero's last line and the "On this page" bar sit on the section rhythm, not on top of it */
  .hc .hero > .wrap > :last-child{margin-bottom:0}
  .hc .hero:has(+ .otp){padding-bottom:16px}
  .hc .otp + .section{padding-top:28px}
  .hc .section > .wrap > .linklist:first-child{margin-top:0}
  /* case study images inside the page margin, like every other image */
  .hc .case-hero{margin:0 0 32px}
  /* an odd number of stats: one per row, figure beside its label, so none is left alone */
  .hc .stats:has(> div:last-child:nth-child(odd)) > div{flex:0 0 100%;display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:baseline}
  .hc .stats:has(> div:last-child:nth-child(odd)) span{max-width:none}
  /* numbered steps: a narrow number column */
  .hc .step{grid-template-columns:30px minmax(0,1fr);gap:12px}
  /* glossary A–Z pills: ten to a row, so twenty letters make two full rows */
  .hc .az{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
  .hc .az a{padding:6px 0;text-align:center}
  /* footer title block: two columns, an odd last cell spans the row */
  html.hc-page footer .tb{grid-template-columns:1fr 1fr}
  html.hc-page footer .tb div:last-child:nth-child(odd){grid-column:1/-1}
}
/* case studies with no photo show their block drawing on the soft tint, edge to edge like a photo */
.hc .case-ph.case-art{background:var(--soft);display:block;padding:0}
.hc .case-ph.case-art svg{display:block;width:100%;height:100%}

/* the ruler underline is one drawn object: keep its phrase on one line so it never splits (phone review 2026-11-07) */
.ruler{white-space:nowrap}
/* phone review 2026-11-07: calculator rows keep a gap before the number; the plan buttons fill their rows instead of leaving one stranded */
.mrow{gap:16px}
.mrow strong{flex:none}
@media(max-width:640px){.seg button{flex:1 1 auto}}
/* form success: the step bars and label hide once sent (.stepper's display:flex was beating [hidden]) */
.stepper[hidden],.steplbl[hidden]{display:none}
/* booking calendar (Calendly, Phil 2026-11-07): tall enough to show the whole month without scrolling inside the frame */
iframe[title^="Book a"]{height:980px!important}
/* calculator bars: the fee bar is filled like the cost bar above it, not an outline (Phil 2026-11-07 17:19) */
.track i.en{background:var(--on-dark);border:0}
.calc.light .track i.en{background:var(--purple)}
/* Insights (/insights/, ported 2026-11-07): rounded tinted cards, no rules, purple marks the score */
.ins-list{display:grid;gap:16px}
.ins-row{gap:6px}
.ins-row h3{margin:4px 0 2px;font-size:clamp(20px,2.2vw,26px)}
.ins-row p{margin:0;color:var(--dim)}
.ins-rs{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.ins-rs b,.ins-score b,.ins-div-h b{color:var(--purple)}
.ins-h1 .violet{color:var(--purple)}
.ins-score{margin:24px 0 28px;max-width:560px}
.ins-score-h{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.ins-score-h b{font:750 26px/1 var(--head)}
.ins-zone{font-size:15px;color:var(--dim)}
.ins-track{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.ins-track i{display:block;height:100%;border-radius:4px;background:var(--purple)}
.ins-zones{display:grid;grid-template-columns:40% 30% 30%;margin-top:8px;font:500 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.ins-prose ol.ways{list-style:none;padding:0}
.ins-prose ol.ways li{margin:0 0 14px}
.ins-prose li.note{color:var(--dim);font-style:italic;padding:12px 18px;margin:-4px 0 18px;background:var(--soft);border-radius:var(--r-card)}
.ins-prose .srclink{margin-top:28px}
.ins-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.ins-div,.ins-person{background:var(--paper);border-radius:var(--r-card);padding:26px}
.ins-person{grid-column:1/-1}
.ins-div-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.ins-div-h b{font:750 20px/1 var(--head)}
.ins-div h3{font-size:20px;margin:0 0 12px}
.ins-div p,.ins-person p{font-size:16px}
.ins-pull{font:650 18px/1.4 var(--head);color:var(--ink);margin:16px 0 0}
.ins-who{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ins-who img{border-radius:50%;width:56px;height:56px}
.ins-who strong{display:block}
.ins-q{font-weight:700;margin:18px 0 6px}
@media(max-width:800px){.ins-panel{grid-template-columns:1fr}.ins-div,.ins-person{padding:22px}}
/* testimonials under the logo strip (Phil 2026-11-07): three named clients, their words unedited. Calm blocks:
   rounded tint, no rules, no quote marks as decoration; purple only on the role line. They are .card too, so they
   share the card hover (Phil 2026-11-08 00:06: 'highlight when I mouse over em, like the others'). */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;align-items:stretch}
.quote{margin:0;background:var(--soft);border-radius:var(--r-card);padding:30px 28px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.quote blockquote{margin:0;padding:0;border:0;quotes:none}
.quote blockquote p{margin:0;font-size:18px;line-height:1.55;color:var(--ink)}
.quote figcaption{display:flex;flex-direction:column;gap:2px}
.quote figcaption strong{font:700 16px/1.3 var(--head);color:var(--ink)}
.quote figcaption span{font-size:14px;line-height:1.4;color:var(--purple)}
@media(max-width:900px){.quotes{grid-template-columns:1fr;gap:14px}.quote{padding:24px 22px}}
/* Insights guide (/insights/six-rules-of-ai-delivery/, ported 2026-11-07): rule sections, checklists, worksheets. Tinted cards, no lines. */
.g-intro{font-size:20px;line-height:1.55;color:var(--ink)}
.g-guide .g-rules-h{margin-top:48px}
.g-rule{margin-top:56px}
.g-rule>.mono{margin-bottom:6px}
.g-rule h2{margin-top:0;scroll-margin-top:96px}
.g-fact{font:650 21px/1.4 var(--head);color:var(--ink)}
.g-close{font-weight:600;color:var(--ink)}
.g-checks-box{background:var(--soft);border-radius:var(--r-card);padding:22px;margin:24px 0 12px}
.g-checks-box>.mono,.g-ex>.mono{color:var(--dim);margin-bottom:10px}
.ins-prose ul.g-checks{list-style:none;padding:0;margin:0}
.ins-prose ul.g-checks li{margin:0 0 10px;padding:0}
.ins-prose ul.g-checks li:last-child{margin-bottom:0}
.ins-prose ul.g-checks li::before{content:none}
.g-checks label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:17px;line-height:1.5;color:var(--ink)}
.g-checks input{accent-color:var(--purple);width:18px;height:18px;margin:4px 0 0;flex:none;cursor:pointer}
.g-checks input:checked+span{color:var(--dim)}
.g-sheet{background:var(--soft);border-radius:var(--r-card);padding:0 22px;margin:12px 0 0}
.g-sheet summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:650 17px/1.3 var(--head);color:var(--ink)}
.g-sheet summary::-webkit-details-marker{display:none}
.g-sheet summary::after{content:"+";color:var(--purple);font-size:24px;line-height:.8;font-weight:400}
.g-sheet[open] summary::after{content:"–"}
.g-sheet[open]{padding-bottom:22px}
.g-sheet ol{margin:0 0 18px;padding-left:22px}
.g-sheet ol li{margin:0 0 10px;font-size:16px;color:var(--ink)}
.g-ex{background:var(--paper);border-radius:var(--r-card);padding:18px 20px;margin:16px 0}
.g-ex p{margin:0;font-size:16px}
.g-ask{margin:0;font-size:16px;color:var(--dim)}
.g-sheet .table-wrap{overflow-x:auto;margin:6px 0 16px}
.g-table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:15px}
.g-table th{text-align:left;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:4px 12px}
.g-table td{background:var(--paper);padding:12px;vertical-align:top;color:var(--ink)}
.g-table td:first-child{font-weight:650;border-radius:10px 0 0 10px}
.g-table td:last-child{border-radius:0 10px 10px 0}
@media(max-width:700px){.g-intro{font-size:18px}.g-checks-box,.g-sheet{padding-left:18px;padding-right:18px}
  .g-table thead{display:none}.g-table,.g-table tbody,.g-table tr,.g-table td{display:block}.g-table tr{background:var(--paper);border-radius:10px;padding:10px 0;margin-bottom:8px}
  .g-table td{padding:3px 14px;background:none;border-radius:0!important}.g-table td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}}
#g-faq{margin-top:64px}
.takeaways>strong:first-child{display:block;margin-bottom:8px}
/* phones: the header stays pinned at the top, always (Phil 2026-11-08 00:26: "the menu is important"). site.css makes it
   position:relative under 640px; this wins by specificity. The "On this page" bar sticks right under it at --header-h
   (set by site.js from the header's height). Both bars opaque so text never shows through. */
@media(max-width:640px){
  html.hc-page header.site{position:sticky;top:0;z-index:50;background:#fff}
  html.hc-page header.site .nav{height:58px;min-height:0}
  html.hc-page .otp{padding-top:6px;padding-bottom:6px}
  html.hc-page[data-theme="dark"] header.site{background:var(--paper)}
  html.hc-page .otp{top:var(--header-h,74px);z-index:45;background:#fff}
  html.hc-page[data-theme="dark"] .otp{background:var(--paper)}
}
/* the open phone menu starts right under the header, whatever its height (it was 74px fixed; the pinned phone header is 58px) */
html.hc-page .menu.open{top:var(--header-h,74px)}
/* booking dialog: the intro and reassurance row hide once sent (Helva 2026-11-08); .reassure display:flex beat [hidden] */
#enquiry .dlg-intro[hidden]{display:none}