/* ============================================================
   HelloWorld.ie: the public site's template layer (site.css)
   The rule book is docs/SITE-TEMPLATE-BIBLE.md. Every public page is
   built from the pieces below and nothing else:
     page   -> .pg-hero + .sec ... + footer        (templates T1 to T5)
     section-> .sec [--soft | --band] > .wrap > .sec-head + content
     block  -> .eyebrow .breadcrumb .lead .note .actions .prose .faq
               .ticks .answer-box .callout .cta-band .table-wrap
     card   -> .link-card (whole card is the link: the dashboard's
               guide-card) | .info-card (static, brand eye in a corner:
               the dashboard's brand-card)
     item   -> .cat .k .idx .n .l .src .rt .meta .fee
     asset  -> .decor (the eye pill) | logo, mascot (partials only)
   Loaded LAST, after brand.css, hw.css and app.css, so it wins.
   scripts/check-site.js fails any page that uses a class this file
   (or the shared partials) does not define.
   ============================================================ */

:root {
  /* spacing scale: every gap on the site is one of these */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sec-y: clamp(64px, 8vw, 104px);      /* a section's top and bottom */
  --hero-top: clamp(28px, 3.6vw, 44px);  /* nav to breadcrumb */
  --hero-bottom: clamp(48px, 6vw, 80px);
  --gutter: 24px;                        /* between cards */
  --r-card: 16px;
  --r-sm: 10px;
  /* type scale */
  --fs-display: clamp(46px, 6.8vw, 84px);
  --fs-h1: clamp(38px, 5.4vw, 64px);
  --fs-h1-article: clamp(34px, 4.4vw, 52px);
  --fs-h2: clamp(28px, 3.5vw, 42px);
  --fs-h3: 19px;
  --fs-lead: clamp(18px, 1.8vw, 21px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-eyebrow: 14px;
  /* the brand eye pill, by theme */
  /* wide, with margins (owner, 26 Oct 2026): the layout grows to 1520px
     (about 1360px of content on a 1920px screen), the side padding grows with
     the screen, and text keeps a readable measure in ch */
  --maxw: 1520px;
  /* the side column: one width and one gap for every page that has one (hero image, "On this page") */
  /* WIDTHS. Two kinds of block, and widths live on blocks, never on the text inside.
     Reading width = about 70 characters of the block's own text size. */
  --read: 720px;        /* body-size reading blocks: prose, section heads, FAQ, notes */
  --read-lead: 860px;   /* lead-size reading blocks: hero copy, the large callout's sentence */
  --aside: clamp(280px, 30%, 440px);
  --col-gap: clamp(40px, 5vw, 96px);
  /* reading pages centre the reading column and the side column as one group */
  --aside-read: 360px;  /* the side column on reading pages: fixed, so the reading column stays --read */
  --reading-group: calc(var(--read) + var(--col-gap) + var(--aside-read));
  --pad: clamp(20px, 4vw, 80px);
  --decor-fill: color-mix(in srgb, var(--violet) 11%, transparent);
  --decor-line: color-mix(in srgb, var(--violet) 22%, transparent);
}
:root[data-theme="dark"] {
  --decor-fill: color-mix(in srgb, var(--lilac) 9%, transparent);
  --decor-line: color-mix(in srgb, var(--lilac) 20%, transparent);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
.narrow { max-width: 820px; }
#main { display: block; }

/* ---------- blocks: eyebrow, breadcrumb, lead, note, actions ---------- */
/* One eyebrow everywhere: the brand pill, then sentence case. */
.eyebrow {
  display: flex; width: fit-content; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .01em; line-height: 1.3;
  text-transform: none; color: var(--accent); margin: 0 0 var(--s-4);
}
.eyebrow::before { content: ""; flex: 0 0 22px; width: 22px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--lilac)); }
.sec--band .eyebrow, .cta-band .eyebrow { color: var(--lilac); }

.breadcrumb { font-size: 13.5px; color: var(--text-dim); margin: 0 0 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "›"; margin: 0 10px; color: var(--text-dim); }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text-dim); }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); font-weight: 400; margin: 0; }
.lead + .lead { margin-top: var(--s-3); }
.note { font-size: var(--fs-small); line-height: 1.6; color: var(--text-dim); margin: 0; }
.note a, .lead a { color: var(--accent); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.meta { font-size: var(--fs-small); color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.meta a { color: var(--text-2); font-weight: 600; }
.meta a:hover { color: var(--accent); }

/* ---------- headings (one scale) ---------- */
.pg-hero h1, .sec h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 0; overflow-wrap: break-word; }
.sec-head h2, .sec h2.h { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 0; }
.link-card h3, .info-card h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.28; margin: 0; color: var(--text); }

/* ---------- T1 to T5: the page hero ---------- */
.pg-hero { position: relative; overflow: clip; padding: var(--hero-top) 0 var(--hero-bottom); }
.pg-hero .eyebrow { margin-bottom: var(--s-4); }
.pg-hero .lead { margin-top: 20px; }
.pg-hero .actions { margin-top: 28px; }
.pg-hero .note { margin-top: var(--s-4); }
.pg-hero .meta { margin-top: 20px; }
/* without a breadcrumb (home), the eyebrow sits where everyone else's breadcrumb starts plus its gap */
.pg-hero--home { padding-top: calc(var(--hero-top) + 46px); }
.pg-hero--home h1 { font-size: var(--fs-display); }
.pg-hero--home h1 em { font-style: normal; color: var(--accent); }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-7); align-items: center; }
.pg-hero__aside { position: relative; }
@media (max-width: 960px) { .pg-hero__grid { grid-template-columns: 1fr; gap: var(--s-7); } }
/* article heroes are narrower and smaller: reading pages */
.pg-hero--article h1 { font-size: var(--fs-h1-article); }

/* ---------- sections ---------- */
.sec { position: relative; overflow: clip; padding: var(--sec-y) 0; }
.sec--soft { background: var(--surface-2); }
.sec--band { background: var(--void); color: var(--paper); }
/* in dark mode the page is void too: the band takes a violet-tinted ground so it still reads as a band */
:root[data-theme="dark"] .sec--band { background: color-mix(in srgb, var(--violet) 16%, var(--void)); border-block: 1px solid var(--line-dark); }
.sec--band .sec-head h2, .sec--band h3 { color: var(--paper); }
.sec--band .lead, .sec--band p { color: var(--dim-dark); }
/* Two sections on the same ground never stack their padding into a double gap. */
.sec:not(.sec--soft):not(.sec--band) + .sec:not(.sec--soft):not(.sec--band),
.sec--soft + .sec--soft { padding-top: 0; }
.pg-hero + .sec:not(.sec--soft):not(.sec--band) { padding-top: var(--s-6); }
.sec-head { max-width: var(--read); margin: 0 0 40px; }
.sec-head .lead { margin-top: var(--s-4); font-size: 17.5px; }
.sec-head .lead + .lead { margin-top: var(--s-3); }
.sec-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head--center .eyebrow, .cta-band .eyebrow { margin-left: auto; margin-right: auto; }
.sec-head--center h2, .sec-head--center .lead { margin-left: auto; margin-right: auto; }
.sec-foot { margin-top: 40px; }
/* closing links sit under the content, left-aligned; centred only under a centred heading */
.sec-head--center ~ .sec-foot { justify-content: center; }
/* a group label inside a long hub section (guides by topic) */
.group-label { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: var(--s-7) 0 var(--s-5); }
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--line-role); }
.group-label:first-child { margin-top: 0; }

/* ---------- grids ---------- */
.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-items: stretch; }
.cards--2 { --cols: 2; }
.cards--3 { --cols: 3; }
.cards--4 { --cols: 4; }
/* never strand one card on its own row: it takes the full row instead */
@media (min-width: 981px) {
  .cards--2 > :last-child:nth-child(2n+1), .cards--4 > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .cards--3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .cards--3, .cards--4 { --cols: 2; }
  .cards > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .cards { --cols: 1; } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- cards: the two kinds, from the dashboard ---------- */
/* LINK CARD: the whole card is one <a>. Lifts on hover. Nothing else lifts. */
.link-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3);
  color: inherit; background: var(--card); border: 1px solid var(--line-role); border-radius: var(--r-card);
  padding: 26px; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.link-card::after { content: ""; position: absolute; top: 0; right: 0; width: 28%; max-width: 120px; aspect-ratio: 2/5; border-radius: 999px; background: var(--decor-fill); transform: translate(44%, -42%) rotate(12deg); pointer-events: none; z-index: 0; }
.link-card > * { position: relative; z-index: 1; }
.link-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-lg); }
.link-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link-card h3 { transition: color .18s ease; }
.link-card:hover h3 { color: var(--accent); }
.link-card p { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0; }
.link-card .act { margin-top: auto; padding-top: var(--s-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.link-card .go { font-size: 14px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-left: auto; transition: gap .18s ease; }
.link-card:hover .go { gap: 10px; }
.link-card .go::after { content: "→"; }

/* INFO CARD: static content. No hover, no pointer. The eye sits in a corner,
   chosen by position so neighbours never repeat it. */
.info-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3); background: var(--card); border: 1px solid var(--line-role); border-radius: var(--r-card); padding: 26px; }
.info-card::after { content: ""; position: absolute; aspect-ratio: 2/5; border-radius: 999px; pointer-events: none; z-index: 0; width: 22%; max-width: 110px; top: 0; left: 0; transform: translate(-52%, -56%) rotate(-18deg); background: color-mix(in srgb, var(--violet) 5%, transparent); }
.info-card > * { position: relative; z-index: 1; }
.cards > .info-card:nth-child(4n+2)::after { top: auto; bottom: 0; transform: translate(-52%, 56%); background: color-mix(in srgb, var(--lilac) 10%, transparent); }
.cards > .info-card:nth-child(4n+3)::after { top: auto; bottom: 0; width: 18%; transform: translate(-56%, 62%) rotate(32deg); background: none; border: 4px solid color-mix(in srgb, var(--violet) 9%, transparent); }
.cards > .info-card:nth-child(4n+4)::after { width: 18%; transform: translate(-56%, -64%) rotate(-24deg); background: none; border: 4px solid color-mix(in srgb, var(--lilac) 16%, transparent); }
.info-card p, .info-card li { color: var(--text-2); font-size: 15.5px; line-height: 1.6; margin: 0; }
.info-card p + p { margin-top: var(--s-2); }
.info-card a:not(.btn) { color: var(--accent); font-weight: 600; }
.info-card a:not(.btn):hover { text-decoration: underline; }
.info-card.is-feat { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-lg); }
.sec--band .info-card { background: var(--void-2); border-color: var(--line-dark); }
.sec--band .info-card p, .sec--band .info-card li { color: var(--dim-dark); }

/* ---------- items inside cards ---------- */
/* .cat: the full-width category pill on a link card */
.cat { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 5px 12px; }
/* .k: the small tracked label on an info card */
.k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
/* .idx: a step number */
.idx { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--accent); }
/* .rt: reading time or a date, with the eye dot */
.rt { font-size: 12.5px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; }
.rt::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
/* stats */
.n { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--accent); }
.l { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.src { font-size: 12.5px; color: var(--text-dim); margin-top: auto; }
.src a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
/* a price */
.fee { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.15; margin-top: auto; padding-top: var(--s-3); }
.fee small { font-size: 14px; font-weight: 600; color: var(--text-dim); letter-spacing: 0; }

/* ---------- lists ---------- */
.ticks { list-style: none; display: grid; gap: var(--s-3); margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--green); background: var(--good-bg); }
.ticks.is-no li::before { content: "✕"; color: var(--no); background: var(--bad-bg); }
.dots { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.dots li { position: relative; padding-left: 18px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }

/* ---------- other blocks ---------- */
/* .badge: a small status label inside text (ok, info, warn) */
.badge { font-size: 11px; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: 999px; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; vertical-align: 1px; margin-right: 4px; background: var(--surface-2); color: var(--text-2); }
.badge.ok { background: var(--good-bg); color: var(--green); }
.badge.info { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge.warn { background: color-mix(in srgb, var(--amber) 18%, transparent); color: #9a5b00; }
:root[data-theme="dark"] .badge.warn { color: var(--amber); }
.prose .table-wrap { margin: 0 0 24px; }
.prose .table-wrap table { margin: 0; min-width: 680px; }
.prose .table-wrap--wide table { min-width: 940px; }
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.callout { position: relative; overflow: hidden; background: var(--grad-soft); border: 1px solid var(--line-role); border-radius: var(--r-card); padding: clamp(22px, 4vw, 32px); }
.callout p { color: var(--text-2); font-size: 16.5px; line-height: 1.6; margin: 0; }
.callout p + p { margin-top: 10px; }
.callout .k { display: block; margin-bottom: 10px; color: var(--accent); }
/* the large callout: a section's one-sentence answer, set full width above its grid */
.callout--lg { padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 44px); }
.callout--lg p { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5; color: var(--text); }
.callout--lg p strong { color: var(--accent); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line-role); border-radius: var(--r-card); background: var(--card); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--text-2); }
/* a table never crushes its columns on a phone: it keeps a readable width and the frame scrolls */
.table-wrap table { min-width: 560px; }
.table-wrap th { text-align: left; padding: 12px 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; border-bottom: 1px solid var(--line-role); background: var(--surface-2); }
.table-wrap td { padding: 13px 16px; border-bottom: 1px solid var(--line-role); vertical-align: top; line-height: 1.5; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td:first-child { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { font-size: 14px; font-weight: 600; color: var(--text-2); padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-role); }
.faq { max-width: var(--read); margin: 0; }
.sec-head--center + .faq { margin-left: auto; margin-right: auto; }
.faq details { border-bottom: 1px solid var(--line-role); padding: 20px 4px; }
.faq summary { font-size: 18px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; transition: color .18s ease; }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 26px; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); font-size: 16.5px; line-height: 1.65; margin-top: 12px; }

/* ---------- the CTA band: one per page, last section before the footer ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: 28px; padding: clamp(48px, 7vw, 72px) clamp(24px, 5vw, 56px); background: var(--grad); box-shadow: var(--shadow-lg); }
.cta-band::after { content: ""; position: absolute; top: 0; right: 0; width: clamp(90px, 12vw, 160px); aspect-ratio: 2/5; border-radius: 999px; background: rgba(255,255,255,.08); transform: translate(40%, -38%) rotate(14deg); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0 auto; }
.cta-band p { color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.55; margin: var(--s-4) auto 0; }
.cta-band .eyebrow { color: rgba(255,255,255,.92); justify-content: center; }
.cta-band .eyebrow::before { background: rgba(255,255,255,.8); }
.cta-band .actions { justify-content: center; margin-top: 28px; }
.cta-band .btn-primary, :root[data-theme="dark"] .cta-band .btn-primary { background: #fff; color: var(--violet); box-shadow: 0 10px 26px rgba(20, 10, 60, .28); }
.cta-band .btn-primary:hover, .cta-band .btn-primary:focus-visible { background: #f3efff; color: var(--magenta); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.cta-band .btn-ghost:hover, .cta-band .btn-ghost:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ---------- buttons: hw.css .btn family; the hero uses -lg, the nav -sm ---------- */
.btn { text-decoration: none; transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn-text { transition: gap .18s ease, color .18s ease; }
.btn-text::after { content: "→"; }

/* ---------- brand asset: the eye pill (.decor) ----------
   At most one per hero or section, in a corner. It may run off its own two
   edges (top and right for --tr) and nowhere else: a shape cut by the
   section below is a defect. Sizes are fixed so a short section cannot cut
   it (check-site.js measures this). */
.decor { position: absolute; z-index: 0; pointer-events: none; border-radius: 999px; aspect-ratio: 2/5; width: clamp(96px, 12vw, 168px); background: var(--decor-fill); }
.decor--outline { background: none; border: 5px solid var(--decor-line); }
.decor--tr { top: 0; right: 0; transform: translate(42%, -36%) rotate(14deg); }
.decor--tl { top: 0; left: 0; transform: translate(-42%, -36%) rotate(-14deg); }
.decor--br { bottom: 0; right: 0; transform: translate(42%, 36%) rotate(-14deg); }
.decor--bl { bottom: 0; left: 0; transform: translate(-42%, 36%) rotate(14deg); }
@media (max-width: 640px) { .decor { width: 84px; } }

/* ---------- article template (T4) ---------- */
/* The older prose pages painted a capsule and a bot watermark on <main>.
   A templated page carries its brand shapes in the hero and sections only. */
main:has(.pg-hero)::before, main:has(.pg-hero)::after { content: none; }
.pg-hero--article { padding-bottom: var(--s-7); }
.sec--article { padding-top: var(--s-2); }
.sec--article .has-toc { align-items: start; }
.pg-hero--article + .sec--article .prose > .answer-box:first-child { margin-top: 0; }

/* ---------- terms: a glossary of terms defined in place (added by hubs) ----------
   <nav class="terms-nav"> letter links, then per letter a .group-label and a
   <dl class="terms"> of <div id><dt>term</dt><dd>definition</dd>[<dd class="terms-also">]</div>.
   A term with its own page links its <dt>; the rest are plain text. */
.terms-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-7); }
.terms-nav a { min-width: 42px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-2); padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-role); background: var(--card); text-decoration: none; transition: color .18s ease, border-color .18s ease; }
.terms-nav a:hover, .terms-nav a:focus-visible { color: var(--accent); border-color: var(--accent); }
.terms { margin: 0; }
.terms > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-role); scroll-margin-top: var(--s-5); }
.terms > div:first-child { padding-top: 0; }
.terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
.terms dt { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: var(--text); }
.terms dt a { color: var(--accent); text-decoration: none; }
.terms dt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.terms dd { grid-column: 2; margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.terms dd a { color: var(--accent); font-weight: 600; }
.terms .terms-also { font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.terms + .group-label { margin-top: var(--s-8); }
@media (max-width: 760px) { .terms > div { grid-template-columns: minmax(0, 1fr); } .terms dd { grid-column: 1; } }

/* ---------- form (added by utility) ----------
   <div class="form"> is the card around a form (/book/, /intake/).
   Inside: optional .form-progress rail, .form-part groups (h3 with .form-num),
   .field-grid of .field (label, control, .hint; .req and .opt in the label),
   .choice-grid of .choice (checkbox + label), .form-error (role alert, starts
   hidden), .form-submit (full-width primary button + .note). .form-done is the
   thank-you card that replaces it. Controls are styled here, not in hw.css. */
.form { position: relative; background: var(--card); border: 1px solid var(--line-role); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: clamp(22px, 4vw, 40px); max-width: 780px; }
.form[hidden], .form-error[hidden] { display: none; }
.form form { margin: 0; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.form-progress { display: flex; gap: var(--s-2); margin: 0 0 var(--s-6); }
.form-progress > span { flex: 1; height: 4px; border-radius: 999px; background: var(--line-role); transition: background-color .3s ease, opacity .3s ease; }
.form-progress > .active { background: var(--accent); }
.form-progress > .done { background: var(--accent); opacity: .45; }
.form-part { padding: 0 0 var(--s-6); margin: 0 0 var(--s-6); border-bottom: 1px solid var(--line-role); }
.form-part:not(:has(~ .form-part)) { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-part > h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.28; margin: 0; color: var(--text); }
.form-part > h3 + p { margin: var(--s-2) 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.form-part > h3 + p + *, .form-part > h3 + * { margin-top: var(--s-5); }
.form-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.form .callout { margin: 0 0 var(--s-5); padding: var(--s-4) 18px; }
.form .callout p { font-size: 15px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-4); }
@media (max-width: 600px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.field label { display: block; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
.req { color: var(--accent); }
.opt { font-weight: 400; color: var(--text-dim); }
.hint { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0; }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea {
  width: 100%; margin: 0; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--text);
  background-color: var(--card); border: 1px solid var(--line-role); border-radius: 12px; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b8699'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.form input::placeholder, .form textarea::placeholder { color: var(--text-dim); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.form input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.choice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin: 0 0 var(--s-2); }
@media (max-width: 600px) { .choice-grid { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-role); border-radius: 12px; background: var(--surface-2); }
.choice + .choice { margin-top: var(--s-3); }
.choice-grid > .choice + .choice { margin-top: 0; }
.choice label { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.choice label a, .form-submit .note a, .form-done a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form-error { margin: 0 0 var(--s-4); font-size: 14px; font-weight: 600; color: var(--no); }
.form-submit { display: grid; gap: 14px; margin-top: var(--s-5); }
.form-submit .btn { width: 100%; justify-content: center; }
.form-submit .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.form-submit .note, .form-submit .form-error { text-align: center; margin: 0 auto; }
/* what is still missing before the button works (js/form-gate.js) */
.form-gate { margin: -4px auto 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text-2); transition: color .2s ease; }
.form-gate:empty { display: none; }
.form-gate.ready { color: var(--green); }
.form-done { text-align: center; }
.form-done h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: var(--s-3) auto 0; max-width: none; color: var(--text); }
.form-done p { max-width: 46ch; margin: var(--s-3) auto 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.form-done .callout { max-width: 40ch; margin: var(--s-5) auto 0; text-align: left; }
.form-done .callout p { margin: 0; font-size: 14px; max-width: none; }
.form-done .callout p + p { margin-top: 6px; }
.form-done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; padding: 2px 6px; border-radius: 6px; background: var(--card); border: 1px solid var(--line-role); }
.form-done .actions { justify-content: center; margin-top: var(--s-5); }
/* the mascot engine adds .mascot (width: 100%) to its mount; the card keeps it small */
.form-done-bot, .form-done-bot.mascot { width: 110px; margin: 0 auto; }
.form-done-tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--good-bg); color: var(--green); font-size: 32px; line-height: 1; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- reward moments (js/delight.js, js/form-gate.js) ----------
   Bible section 10a. The dashboard's vocabulary on the public site: the
   mascot performs, brand confetti, things tick themselves off, progress fills.
   Every movement here is switched off under reduced motion (below). */
/* confetti, thrown from the middle of its host */
.dl-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 5; }
.dl-burst i { position: absolute; left: 0; top: 0; display: block; }
/* a field that is done: a tick draws itself beside the label, the box warms green */
.ok-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, transparent); opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ok-tick svg { width: 12px; height: 12px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .4s ease .12s; }
.ok > label .ok-tick, .choice.ok > .ok-tick { opacity: 1; transform: none; }
.ok > label .ok-tick svg, .choice.ok > .ok-tick svg { stroke-dashoffset: 0; }
.field.ok input:not(:focus), .field.ok select:not(:focus), .field.ok textarea:not(:focus) { border-color: color-mix(in srgb, var(--green) 45%, var(--line-role)); }
.choice { transition: border-color .25s ease, background-color .25s ease; }
.choice > .ok-tick { margin: 1px 0 0 auto; flex: 0 0 auto; }
.choice.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line-role)); background: color-mix(in srgb, var(--green) 7%, var(--surface-2)); }
/* the meter above the send button: N of M done */
.form-meter { display: flex; align-items: center; gap: 12px; }
.form-meter > b { flex: 1; display: block; height: 6px; border-radius: 999px; background: var(--line-role); overflow: hidden; }
.form-meter > b > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--magenta)); transform-origin: left center; transform: scaleX(0); transition: transform .5s cubic-bezier(.2, .9, .3, 1.1), background .3s ease; }
.form-meter > span { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.form-meter.full > b > i { background: var(--green); }
.form-meter.full > span { color: var(--green); }
/* the send button's one "ready" pop, and its light sweep on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-120%); opacity: 0; transition: opacity .25s ease, transform 0s linear .25s; }
.btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; transform: translateX(120%); transition: transform .8s ease, opacity .12s ease; }
.btn-primary:disabled::after { display: none; }
@keyframes hw-ready-pop { 0% { transform: scale(1); } 35% { transform: scale(1.035); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 26px color-mix(in srgb, var(--violet) 30%, transparent); } 100% { transform: scale(1); } }
.btn.ready-pop { animation: hw-ready-pop .6s cubic-bezier(.3, 1.5, .5, 1); }
.btn.ready-pop::after { opacity: 1; transform: translateX(120%); transition: transform .9s ease .1s, opacity .1s ease; }
/* the thank-you card: the ticked rows of what happens next */
.done-steps { list-style: none; margin: var(--s-5) auto 0; padding: 0; max-width: 340px; text-align: left; display: grid; gap: 10px; }
.done-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.done-steps li::before { content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-role); background: var(--card) center / 14px no-repeat; transition: background-color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.done-steps li.on { color: var(--text); }
.done-steps li.on::before { background-color: var(--green); box-shadow: none; transform: scale(1.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3 3 6.6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.done-steps li small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
/* sections and cards rise in as they arrive (only those below the fold at load) */
.rv { opacity: 0; transform: translateY(18px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--rv-i, 0) * 80ms), transform .75s cubic-bezier(.2, .8, .2, 1) calc(var(--rv-i, 0) * 80ms); }
/* guides: the reading bar, contents entries ticked as you pass them, the finish card */
.read-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; pointer-events: none; }
.read-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--magenta, var(--accent))); transform-origin: left center; transform: scaleX(0); transition: background .4s ease; }
.read-bar.done > i { background: var(--green); box-shadow: 0 0 12px color-mix(in srgb, var(--green) 60%, transparent); }
.toc a { position: relative; transition: color .2s ease, border-color .25s ease; }
.toc a.is-read { border-left-color: color-mix(in srgb, var(--green) 70%, transparent); }
.toc a.is-read::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3 3 6.6-7' fill='none' stroke='%2316a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: hw-tick-in .35s cubic-bezier(.3, 1.6, .5, 1); }
.toc a.is-read { padding-right: 22px; }
@keyframes hw-tick-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.dl-toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 12px 40px 12px 12px; background: var(--card); border: 1px solid var(--line-role); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.dl-toast.in { opacity: 1; transform: none; }
.dl-toast-bot { flex: 0 0 56px; width: 56px; height: 56px; }
.dl-toast-text b { display: block; font-size: 15px; color: var(--text); }
.dl-toast-text span { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.dl-toast-text a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dl-toast-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.dl-toast-x:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 600px) { .dl-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
/* FAQ answers open smoothly where the browser can animate to auto height */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .38s cubic-bezier(.2, .8, .2, 1), content-visibility .38s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .link-card, .link-card h3, .link-card .go, .btn, .btn-text, .faq summary, .faq summary::after { transition: none; }
  .ok-tick, .ok-tick svg, .form-meter > b > i, .btn-primary::after, .done-steps li::before, .dl-toast, .toc a.is-read::after { transition: none; animation: none; }
  .btn.ready-pop { animation: none; }
  .btn-primary::after { display: none; }
  .rv { opacity: 1; transform: none; }
  .faq details::details-content { transition: none; }
  .link-card:hover { transform: none; }
}

/* ---------- example answer card and hero mascot (added by core) ----------
   The home hero's typing answer card: brand.js types into #ac-question and
   #ac-answer and fades #ac-source in. The same card is the static picture
   of an AI answer or an audit panel elsewhere on the home page:
     .answer-card > .ac-head (.ac-dot + .k), .ac-q, .ac-a (.pill, .ac-cite), .ac-src
     .ac-rows > li > .mk + text + em   ranked rows; li.is-you dashed, li.is-off dim
     .ac-score > .ac-ring (fill set by --p) + text
   .mascot-wrap holds the bot: over the card in the home hero, centred
   (.mascot-wrap--solo) in the 404 hero. Home and 404 only. */
.answer-card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line-role); border-radius: var(--r-card); padding: 22px 22px 24px; box-shadow: var(--shadow-lg); font-size: 15px; color: var(--text); }
.answer-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--text); }
.answer-card h3 + .note { margin-top: 6px; }
.ac-head { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.ac-head .k { white-space: nowrap; }
.ac-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ac-q { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 16px; }
.ac-q::before { content: "> "; }
.ac-a { line-height: 1.62; min-height: 96px; }
.ac-a .pill { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 6px; padding: 1px 7px; white-space: nowrap; font-weight: 600; }
.ac-cite { color: var(--accent); font-size: .72em; vertical-align: super; font-weight: 700; }
.ac-src { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-role); font-size: 11.5px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .4s ease; }
.ac-src b { color: var(--accent); font-weight: 700; }
.ac-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-rows li { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.ac-rows li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-rows .mk { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ac-rows em { margin-left: auto; padding-left: 10px; flex-shrink: 0; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.ac-rows li.is-off .mk { color: var(--text-dim); background: var(--surface-2); }
.ac-rows li.is-you { background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--text-dim) 55%, transparent); border-radius: 10px; padding: 11px 12px; }
.ac-rows li.is-you .mk { background: transparent; color: var(--text-dim); border: 1px dashed color-mix(in srgb, var(--text-dim) 60%, transparent); }
.ac-score { display: flex; align-items: center; gap: 20px; margin: 20px 0 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line-role); }
.ac-score b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ac-score p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ac-ring { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: var(--text);
  background: radial-gradient(closest-side, var(--card) 78%, transparent 79%), conic-gradient(var(--violet) 0 var(--p, 0%), color-mix(in srgb, var(--accent) 14%, var(--surface-2)) var(--p, 0%) 100%); }
.mascot-wrap { position: absolute; top: -14px; right: 22px; width: 136px; z-index: 2; filter: drop-shadow(0 18px 30px rgba(38, 36, 48, .28)); }
:root[data-theme="dark"] .mascot-wrap { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.mascot-wrap svg { display: block; width: 100%; height: auto; }
.pg-hero__aside > .mascot-wrap + .answer-card { margin-top: 78px; }
.mascot-wrap.mascot-wrap--solo { position: relative; top: auto; right: auto; width: clamp(130px, 16vw, 210px); margin: 0 auto; }
@media (max-width: 960px) { .pg-hero__aside > .mascot-wrap + .answer-card { margin-top: 64px; } .mascot-wrap:not(.mascot-wrap--solo) { width: 110px; right: 8px; } }
@media (prefers-reduced-motion: reduce) { .ac-src { opacity: 1; transition: none; } }

/* ---------- section helpers (added by core) ----------
   .split--top: a split whose columns align at the top (text beside a FAQ).
   A .sec-head may be the text column of a .split, with an .actions row under it.
   A .callout may sit inside a .sec-head under the title (a one-sentence definition).
   A .note may sit under a card grid or a table. Chips under a centred head centre. */
.split--top { align-items: start; }
.split > * > .sec-head, .wrap > .sec-head:last-child { margin-bottom: 0; }
.split .sec-head + .actions { margin-top: 28px; }
.sec-head > .callout { margin-top: var(--s-5); }
.cards + .note, .table-wrap + .note { margin-top: var(--s-5); }
.sec-head--center + .chips { justify-content: center; }
.faq details p a { color: var(--accent); font-weight: 600; }
.faq details p a:hover { text-decoration: underline; }
/* stats on the dark band read in both themes */
.sec--band .n { color: var(--lilac); }
.sec--band .l, .sec--band .src, .sec--band .src a { color: var(--dim-dark); }

/* ---------- price in words and table sub-labels (added by core) ----------
   .fee.fee--text: a price card whose price is a phrase, not a figure:
   <span class="fee fee--text"><small>How it is priced</small>Quoted from your audit<small>Terms</small></span>
   A <small> in a table cell is a sub-label on its own line. */
.fee--text { font-size: 19px; letter-spacing: -.01em; line-height: 1.3; border-top: 1px solid var(--line-role); padding-top: var(--s-4); }
.fee--text small { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; margin-top: 4px; }
.fee--text small:first-child { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.table-wrap td small { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--text-dim); }
/* a section-level table keeps the prose table's minimum width, so a phone scrolls the table sideways instead of crushing its columns */
.sec > .wrap > .table-wrap > table { min-width: 680px; }

/* ---------- block stack and single-column grid (added by services) ----------
   .stack: more than one content block in one section (a stat row, then a card
   grid, then a callout), 32px apart. The section keeps one .sec-head on top.
   .cards--1: a one-column card grid, for cards standing in a .split column.
   A <b> or <strong> lead-in inside a ticks or dots list reads in the text colour. */
.stack > * + * { margin-top: var(--s-6); }
.cards--1 { --cols: 1; }
.ticks b, .ticks strong, .dots b, .dots strong { color: var(--text); font-weight: 700; }

/* ---------- in-text links in lists and callouts (added by industries) ----------
   A source link inside a .ticks or .dots item or a .callout paragraph reads
   as a link, as it does in FAQ answers and info cards. */
.ticks li a, .dots li a, .callout p a { color: var(--accent); font-weight: 600; }
.ticks li a:hover, .dots li a:hover, .callout p a:hover { text-decoration: underline; }

/* ---------- brand asset: the mascot in dark mode ----------
   The bot's head is brand ink (#262430), which vanishes on a dark ground.
   In dark mode it takes the paper colour; the eyes stay violet. */
:root[data-theme="dark"] .mascot .m-head path[fill="#262430"] { fill: var(--paper); }

/* ---------- images: covers, photos, screenshots ----------
   Every <img> carries width, height and alt (alt="" only when the words beside
   it already say what it shows, as on a cover). Rules: bible section 8. */
/* a link card's image runs edge to edge across its top; the card's eye pill steps aside */
.link-card .media { display: block; width: calc(100% + 52px); max-width: none; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin: -26px -26px 6px; border-bottom: 1px solid var(--line-role); background: var(--surface-2); transition: filter .18s ease; }
.link-card.has-media::after { display: none; }
.link-card.has-media:hover .media { filter: saturate(1.08) brightness(1.03); }
/* the hero image (articles: the cover; industry pages: a photo) */
.pg-hero__grid--media { grid-template-columns: minmax(0, 1fr) var(--aside); column-gap: var(--col-gap); align-items: center; }
.pg-hero__media { margin: 0; }
.pg-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line-role); box-shadow: var(--shadow-lg); }
.pg-hero__media figcaption, .shot figcaption { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }
.pg-hero__media figcaption a, .shot figcaption a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .pg-hero__grid--media { grid-template-columns: 1fr; gap: var(--s-6); } .pg-hero__media { max-width: 560px; } }
/* a screenshot inside an article, with its source in the caption */
.prose .shot { margin: 28px 0; }
.prose .shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-role); box-shadow: var(--shadow); background: #fff; }

/* ---------- names strip (the assistants your buyers use) ----------
   Product names set as a quiet row of wordmarks. Third-party logos are shown
   only with the owner's permission (OpenAI's terms allow it; Google, Microsoft
   and Anthropic require approval), so the row is type, not logos. */
.chips--names { justify-content: center; gap: 12px 0; }
.chips--names span { font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; letter-spacing: -0.02em; color: var(--text-2); padding: 0 20px; background: none; border: 0; border-radius: 0; display: inline-flex; align-items: center; }
.chips--names span + span::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); opacity: .5; margin: 0 20px 0 -23px; }


/* ---------- brand asset: the ghost bot (the mascot's shadow) ----------
   The bot silhouette at low strength, behind a section's content. One per
   page, in a corner its section's .decor pill is not using; like the pill it
   may run off its own corner's two edges only (check-site.js measures this).
   Drawn from /bot-mask.svg in the text colour, so it follows the theme. */
.ghostbot { position: absolute; z-index: 0; pointer-events: none; width: clamp(260px, 30vw, 440px); aspect-ratio: 1; color: var(--text); background: currentColor; opacity: .05;
  -webkit-mask: url(/bot-mask.svg) center / contain no-repeat; mask: url(/bot-mask.svg) center / contain no-repeat; }
:root[data-theme="dark"] .ghostbot { opacity: .07; }
.sec--band .ghostbot { color: var(--paper); opacity: .1; }
.ghostbot--br { right: 0; bottom: 0; transform: translate(30%, 30%) rotate(-8deg); }
.ghostbot--bl { left: 0; bottom: 0; transform: translate(-30%, 30%) rotate(8deg); }
.ghostbot--tr { right: 0; top: 0; transform: translate(30%, -30%) rotate(8deg); }
.ghostbot--tl { left: 0; top: 0; transform: translate(-30%, -30%) rotate(-8deg); }
@media (max-width: 640px) { .ghostbot { width: 220px; } }

/* ---------- "On this page" (the article contents panel) ----------
   Pinned like the dashboard's side panels (js/smart-sticky.js, set up by
   js/toc.js). Sections crop their brand shapes with overflow: clip, never
   hidden, because hidden turns off sticky. The list never scrolls inside
   itself: a long list rides with the page and pins at its top or bottom. */
.has-toc > .toc { position: sticky; top: 24px; }
.toc ol { max-height: none; overflow: visible; }
.has-toc :is(h2, h3)[id] { scroll-margin-top: 24px; }

/* ---------- full width: text keeps its measure, media keeps its size ---------- */
/* on a very wide screen a two-column card image would be huge: cap and crop it */
.link-card .media { max-height: 360px; }
/* reading pages: the reading column and the side column, side by side */
.has-toc { grid-template-columns: minmax(0, 1fr) var(--aside); column-gap: var(--col-gap); justify-content: stretch; }
.has-toc > .prose { max-width: none; margin: 0; }
.has-toc > .toc { width: 100%; }

/* A section that is only a heading and its text uses the width: on a wide
   screen the eyebrow and title sit left and the text flows right, in order. */
@media (min-width: 1100px) {
  .sec > .wrap > .sec-head:not(.sec-head--center):is(:only-child, :has(+ .sec-foot:last-child)) { display: flow-root; max-width: none; margin-bottom: 0; }
  .sec > .wrap > .sec-head:not(.sec-head--center):is(:only-child, :has(+ .sec-foot:last-child)) > :is(.eyebrow, h2) { float: left; clear: left; width: 38%; }
  .sec > .wrap > .sec-head:not(.sec-head--center):is(:only-child, :has(+ .sec-foot:last-child)) > :not(.eyebrow, h2) { margin-left: calc(38% + clamp(48px, 6vw, 112px)); max-width: 68ch; }
  .sec > .wrap > .sec-head:not(.sec-head--center):is(:only-child, :has(+ .sec-foot:last-child)) > :not(.eyebrow, h2):nth-child(3) { margin-top: 0; }
  .sec > .wrap > .sec-head:not(.sec-head--center):has(+ .sec-foot:last-child) + .sec-foot { margin-top: var(--s-6); }
}

/* a form that stands alone in its section is centred, not left with a blank half */
.sec > .wrap > .form { margin-left: auto; margin-right: auto; }
/* a FAQ under a left-aligned heading: heading left, questions right, on a wide screen */
@media (min-width: 1100px) {
  .sec > .wrap:has(> .sec-head:not(.sec-head--center) + .faq) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .sec > .wrap:has(> .sec-head:not(.sec-head--center) + .faq) > .sec-head { margin-bottom: 0; }
  .sec > .wrap:has(> .sec-head:not(.sec-head--center) + .faq) > .faq { max-width: none; margin-top: -20px; }
  .sec > .wrap:has(> .sec-head:not(.sec-head--center) + .faq) > :not(.sec-head, .faq) { grid-column: 1 / -1; }
}
/* a long form beside "In this form" (the intake): the form fills the reading column */
.has-toc > .form { margin-left: 0; margin-right: 0; max-width: none; }
.has-toc > .form .form-part { scroll-margin-top: 24px; }

/* four cards in a two-column grid sit in one row on a wide screen, instead of two heavy rows */
@media (min-width: 1300px) { .cards--2:has(> :nth-child(4):last-child) { --cols: 4; } }
.cards--2 > .link-card .media { max-height: 280px; }

/* ============================================================
   WIDTHS: the rules (bible section 2.1)
   1. A layout block spans the container: card grids, splits, tables, the
      CTA band, the large callout, the stack.
   2. A reading block is --read wide (--read-lead for lead-size text): prose,
      section heads, FAQ lists, standalone callouts and notes, hero copy.
   3. Text inside a sized component (card, form, FAQ item, prose) fills it.
   4. Text placed straight into a layout block takes the reading width.
   5. Reading pages (articles, legal, the intake) centre the reading column
      and the side column as one group, and every section on the page
      shares that group's edges.
   ============================================================ */
/* 0. the older sheets (hw.css, app.css) still cap text by element: h2 at 20ch,
      .lead at 40ch, FAQ answers at 66ch. Widths here come only from blocks. */
h1, h2, h3, h4, .lead, .faq p, .faq details p { max-width: none; }
/* 2. hero copy is a lead-size reading block (the hero image column sits beside it) */
.pg-hero > .wrap > :not(.pg-hero__grid):not(.decor):not(.ghostbot),
.pg-hero__grid > div > * { max-width: var(--read-lead); }
.pg-hero__grid > div > :is(.breadcrumb, .eyebrow, .actions, .meta) { max-width: none; }
/* 2. standalone notes and leads in a section are reading blocks */
.sec > .wrap > .note, .stack > .note, .sec > .wrap > .lead, .stack > .lead { max-width: var(--read); }
/* 4. a callout's text fills the callout (owner, 26 Oct 2026); the callout's own width is its block's 
.cta-band p, .cta-band h2, .cta-band .eyebrow { margin-left: auto; margin-right: auto; }
.cta-band p, .cta-band h2 { max-width: var(--read); }
.terms { max-width: calc(var(--read) + 240px); }
/* 5. reading pages: every section shares the reading group's edges */
/* the hero is a top section like every other page's: full container; the body below is the reading group */
main:has(> .sec--article) > .sec > .wrap { max-width: calc(var(--reading-group) + 2 * var(--pad)); }
main:has(> .sec--article) .has-toc { grid-template-columns: minmax(0, var(--read)) minmax(240px, var(--aside-read)); column-gap: var(--col-gap); justify-content: space-between; }


/* ---------- line breaking (owner, 26 Oct 2026: no weird line breaks) ----------
   Running text never ends a paragraph on a lone word; short texts break into
   even lines instead of one long line and a stub. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* balance evens every line, so it is only for short, one-to-three-line texts:
   headings, labels and centred lines. Paragraphs and leads keep full lines (pretty). */
h1, h2, h3, h4, .eyebrow, .k, .cat, .cta-band p, :is(.cards, .table-wrap, .split) + .note { text-wrap: balance; }
.lead, .note, .link-card p, .info-card p, .callout p { text-wrap: pretty; }

/* ---------- the close of a full-width row ----------
   A note and the buttons that follow a card grid, a table or a split belong
   to the whole row, so they are centred under it. */
:is(.cards, .table-wrap, .split) + .note { margin: var(--s-6) auto 0; max-width: var(--read); text-align: center; }
:is(.cards, .table-wrap, .split) + .sec-foot,
:is(.cards, .table-wrap, .split) + .note + .sec-foot { justify-content: center; }
:is(.cards, .table-wrap, .split) + .note + .sec-foot { margin-top: var(--s-5); }

/* ---------- a section heading's graphic (owner, 26 Oct 2026) ----------
   A heading above a full-width block carries a generated graphic in the side
   column, like the hero, so nothing sits alone in a wide row. Decorative, so
   it steps aside on narrow screens. Placed by scripts/section-art.js. */
.sec-head:has(> .sec-head__media) { max-width: none; display: grid; grid-template-columns: minmax(0, var(--read)) var(--aside); column-gap: var(--col-gap); justify-content: space-between; align-items: center; }
.sec-head:has(> .sec-head__media) > :not(.sec-head__media) { grid-column: 1; }
.sec-head__media { grid-column: 2; grid-row: 1 / span 12; margin: 0; align-self: center; }
.sec-head__media img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line-role); box-shadow: var(--shadow); }
@media (max-width: 960px) { .sec-head:has(> .sec-head__media) { display: block; max-width: var(--read); } .sec-head__media { display: none; } }

/* the assistants strip with their logos (owner, 26 Oct 2026). Each logo is the
   company's mark drawn in the text colour from its own shape, so the row is
   uniform and follows dark mode. Sources and terms: content/image-credits.json. */
.chips--logos { gap: 14px 44px; }
.chips--logos span { padding: 0; gap: 10px; }
.chips--logos span + span::before { display: none; }
.chips--logos .logo { display: inline-block; flex: 0 0 auto; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }