/* The 11 Nov 2026 redesign (owner's pick: option A, "Job sheet, full width"). Loaded last on every page.
   Site-wide: a wider page, the kūmara wordmark set inline in large headings, the day/night switch, the AI notice in the footer.
   Home: full-width sections on desktop; on phones each section is a dropdown that shows its heading and one line. */

:root { --max: 80rem; }
html { scroll-padding-top: 5rem; }

/* ---------- The kūmara wordmark inline in a heading (components/Km.astro) ----------
   Sized in em so it matches whatever text it sits in: its x-height equals the heading font's (Bricolage Grotesque,
   0.528em), and its baseline sits on the text's baseline. Letters take the text colour; the macron is always yellow. */
.km { white-space: nowrap; }
.km svg { display: inline-block; height: 1.0057em; width: auto; max-width: none; vertical-align: -0.0794em; }
.km .lg-ink { fill: currentColor; }
.km .lg-primary { fill: var(--primary); }

/* ---------- Day and night mode switch (layouts/Site.astro, scripts/site.ts) ---------- */
.theme-toggle { display: none; place-items: center; width: var(--target); height: var(--target); padding: 0; border: var(--border-w) solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 1.3rem; height: 1.3rem; }
@media (min-width: 64rem) { .js .site-header__actions > .theme-toggle { display: inline-grid; } }
.js .theme-toggle--row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-xs); width: 100%; height: auto; min-height: 3.25rem; padding: 0 var(--space-s); border-radius: var(--radius-m); font: inherit; font-weight: 700; }
/* The icon shows the mode you'd switch to: a moon by day, a sun by night. */
.theme-toggle__moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle__moon { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }
}
:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }

/* ---------- Footer: what the AI receptionist is and isn't ---------- */
.site-footer__ai { display: grid; gap: var(--space-2xs); padding-top: var(--space-m); border-top: 1px solid color-mix(in srgb, var(--on-band) 22%, transparent); }
.site-footer__ai h2 { font-family: var(--font-text); font-size: var(--step-0); letter-spacing: 0; }
.site-footer__ai p { max-width: 96ch; color: var(--on-band-muted); }
.site-footer__ai a { color: var(--on-band); }
@media (min-width: 64rem) { .site-footer__ai { grid-column: 1 / -1; } }

/* ---------- Home hero: one sentence on two lines, the wordmark inline ---------- */
.hero.hero--sheet .hero__title { font-size: min(4.75rem, 7.5cqi); line-height: 1.02; }
.hero--sheet .hero__lede { max-width: 38ch; }
/* Side by side only when the sheet has room for its answers on one line each; tablets stack like phones. */
@container hero (min-width: 50rem) { .hero.hero--sheet { grid-template-columns: minmax(0, 1fr); } }
@container hero (min-width: 62rem) {
  .hero.hero--sheet { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--space-xl); }
}
/* Phones: the same sentence, balanced over two lines at a size that still reads as a headline. */
@container herocopy (max-width: 34rem) {
  .hero.hero--sheet .hero__title { font-size: 8.1cqi; }
}
/* The email the tradie gets, tucked over the sheet's corner on wide screens. */
.jobsheet { position: relative; }
.jobsheet__mail { display: none; }
@container hero (min-width: 62rem) {
  .jobsheet__mail { display: grid; gap: 0.2rem; position: absolute; left: -8rem; bottom: -2.25rem; width: 16.5rem; padding: 0.85rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-float); rotate: -2deg; text-align: left; }
  .jobsheet__mail p { margin: 0; max-width: none; font-size: 0.875rem; line-height: 1.35; }
  .jobsheet__mail-from { display: flex; align-items: center; gap: 0.45em; color: var(--muted); }
  .jobsheet__mail-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1.5px var(--ink); }
  .jobsheet__mail-subject { font-weight: 700; font-size: 1rem !important; }
  .jobsheet__mail-body { color: var(--muted); }
  .jobsheet__note { text-align: right; padding-left: 11rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .jobsheet__mail { animation: rise-in 0.5s var(--ease) both; animation-delay: 3.1s; }
  .jobsheet--wait .jobsheet__mail { animation-play-state: paused; }
}
@keyframes rise-in { from { opacity: 0; translate: 0 0.75rem; } to { opacity: 1; translate: 0 0; } }

/* ---------- Home: the call behind the job sheet, across the width ---------- */
.home-hear { padding-block: var(--space-l) var(--space-xl); }
.home-hear__in { display: grid; gap: var(--space-m); }
.home-hear__copy { display: grid; gap: var(--space-2xs); }
.home-hear .section__title { font-size: var(--step-2); }
.home-hear .herocall { width: 100%; max-width: none; margin: 0; }
@media (min-width: 64rem) {
  .home-hear__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
  .home-hear .herocall { padding: var(--space-l); }
}

/* ---------- Home sections (components/home/HomeSection.astro) ---------- */
.hs__d > summary { list-style: none; }
.hs__d > summary::-webkit-details-marker { display: none; }
.hs__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-s); align-items: center; cursor: pointer; }
.hs__title { grid-column: 1; font-size: clamp(2rem, 1.1rem + 2.7vw, 3.75rem); max-width: none; }
.hs__key { grid-column: 1; max-width: 60ch; }
.hs__chev { grid-column: 2; grid-row: 1 / span 2; width: 1.75rem; height: 1.75rem; padding: 0.35rem; box-sizing: content-box; border-radius: 50%; background: var(--primary); color: var(--on-primary); transition: rotate var(--dur-base) var(--ease); }
.hs__d[open] .hs__chev { rotate: 180deg; }
.hs__body { padding-top: var(--space-l); min-width: 0; }
.hs--band { background: var(--surface); color: var(--ink); }
.hs .section__more { margin-top: var(--space-m); }
.hs .section__more a { gap: 0.35em; }
.hs .section__more svg { width: 1em; height: 1em; }
.page-home .hs { padding-block: clamp(3rem, 1.5rem + 4vw, 4.75rem); }
/* Phones: a short list of dropdowns. Each shows its heading and one line; a tap opens the rest. */
@media (max-width: 47.99rem) {
  .page-home .hs { padding-block: 0; }
  .hs__sum { padding-block: var(--space-m); }
  .hs__title { font-size: 1.625rem; line-height: 1.1; }
  .hs__key { font-size: 1rem; line-height: 1.4; }
  .hs:not(.hs--band) .hs__d { border-top: 1.5px solid var(--border); }
  .hs--band + .hs .hs__d { border-top: 0; }
  .hs__body { padding-top: 0; padding-bottom: var(--space-l); }
  .home-hear { padding-bottom: var(--space-l); }
}
/* Wider screens: the heading is a plain heading and the section can't be closed. */
@media (min-width: 48rem) {
  .hs__sum { grid-template-columns: minmax(0, 1fr); cursor: default; pointer-events: none; }
  .hs__sum:focus-visible { outline: none; }
  .hs__chev { display: none; }
}
@media (min-width: 64rem) {
  .hs__sum { row-gap: var(--space-xs); }
  .hs__body { padding-top: var(--space-xl); }
}

/* ---------- What happens when you miss a call: five steps ---------- */
.flow { display: grid; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.flow__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-s); align-content: start; }
.flow__num { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.flow__title { grid-column: 2; align-self: center; min-height: 2.5rem; display: flex; align-items: center; font-size: var(--step-1); }
.flow__body { grid-column: 2; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.flow__frag { display: none; }
.flow__urgent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-s); align-items: start; max-width: none; margin-top: var(--space-l); padding: var(--space-s) var(--space-m); border: 2px dashed var(--border); border-radius: var(--radius-l); }
.flow__urgent svg { width: 1.5rem; height: 1.5rem; margin-top: 0.1em; color: var(--urgent); }
@media (min-width: 48rem) and (max-width: 63.99rem) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); } }
@media (min-width: 64rem) {
  .flow { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0 var(--space-m); }
  /* The line the call travels along, behind the numbers. */
  .flow::before { content: ""; position: absolute; left: 1.25rem; right: calc(20% - 2.5rem); top: 1.25rem; height: 2px; background: var(--border); }
  .flow__step { grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .flow__num { grid-row: auto; position: relative; box-shadow: 0 0 0 0.5rem var(--bg); }
  .flow__title, .flow__body, .flow__frag { grid-column: 1; }
  .flow__title { min-height: 0; margin-top: var(--space-2xs); }
  .flow__frag { display: grid; gap: 0.2rem; align-content: center; min-height: 5.75rem; margin-top: var(--space-2xs); padding: var(--space-s); background: var(--surface); border-radius: var(--radius-m); font-size: 0.9375rem; line-height: 1.35; }
  .flow__frag b { font-weight: 700; }
  .flow__frag span { color: var(--muted); }
  .flow__frag q { font-family: 'Literata', Georgia, serif; quotes: "“" "”"; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .flow__slots { display: flex; gap: 0.35rem; }
  .flow__slots i { font-style: normal; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 99px; border: 1.5px solid var(--border); color: var(--ink); font-variant-numeric: tabular-nums; }
  .flow__slots i.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
}
/* The steps arrive one after another the first time the row comes on screen (site.ts adds .reveal-ready and .is-in). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] > * { opacity: 0; translate: 0 1rem; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease); }
  .reveal-ready [data-reveal].is-in > * { opacity: 1; translate: 0 0; }
  .reveal-ready [data-reveal] > :nth-child(2) { transition-delay: 0.12s; } .reveal-ready [data-reveal] > :nth-child(3) { transition-delay: 0.24s; }
  .reveal-ready [data-reveal] > :nth-child(4) { transition-delay: 0.36s; } .reveal-ready [data-reveal] > :nth-child(5) { transition-delay: 0.48s; }
}

/* ---------- Built for your trade ----------
   Desktop: all 16 trades in a list on the left, the chosen trade on the right. Phones and tablets: the pill tabs. */
.home-trades__wide { display: none; }
.home-trades .trade-tabs__list { justify-content: flex-start; }
@media (min-width: 64rem) {
  .js .home-trades__wide { display: block; }
  .js .home-trades__tabs { display: none; }
}
.tw { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: stretch; }
.js .tw > .tw__list { display: grid !important; }
.tw__list { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: repeat(8, minmax(3.25rem, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-xs); }
.tw__list button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); min-height: 3.25rem; padding: 0 var(--space-s); border: 1.5px solid var(--border); border-radius: var(--radius-m); background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tw__list button svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); }
.tw__list button:hover { border-color: var(--ink); }
.tw__list button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tw__list button[aria-selected="true"] svg { color: inherit; }
.tw__panel { grid-column: 2; grid-row: 1; display: grid; gap: var(--space-m); grid-template-rows: auto auto 1fr auto auto; padding: var(--space-l); background: var(--surface); border-radius: var(--radius-l); }
/* Every trade's card stays in the layout (unseen), so the section is as tall as the longest one and never jumps. */
.tw__panel[hidden] { display: grid; visibility: hidden; }
.tw__kicker { font-weight: 700; color: var(--muted); }
.tw__lede { font-size: var(--step-2); line-height: 1.12; max-width: 24ch; }
.tw__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
.tw__cols h4 { margin: 0 0 var(--space-2xs); font-size: 1rem; font-weight: 700; }
.tw__cols ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.tw__cols li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs); line-height: 1.4; }
.tw__cols li svg { width: 1.1em; height: 1.1em; margin-top: 0.2em; color: var(--success); }
.tw__urgent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); max-width: none; padding: var(--space-s); border-radius: var(--radius-m); background: color-mix(in srgb, var(--urgent) 10%, var(--surface)); font-size: 1rem; line-height: 1.45; }
.tw__urgent svg { width: 1.3rem; height: 1.3rem; margin-top: 0.1em; color: var(--urgent); }
.tw__more { justify-self: start; }

/* ---------- Three kinds of call, side by side ---------- */
.kinds3 { display: grid; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.kinds3 > li { display: grid; min-width: 0; }
.kinds3 .convo__line--kumara .convo__said { font-size: var(--step-0); }
.home-kinds__more { text-align: left; }
@media (min-width: 64rem) { .kinds3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- From $249 a month: pick a plan, put in your numbers, see what you keep, sign up ---------- */
.hprice { display: grid; gap: var(--space-l); }
/* Reading order on phones: plans, your numbers, what you keep, then the sign-up button. Desktop: the sum sits on the right. */
.hprice__pick { display: contents; }
.hprice__plans { grid-area: plans; } .hprice__nums { grid-area: nums; } .hprice__maths { grid-area: maths; }
.hprice { grid-template-areas: "plans" "nums" "maths"; grid-template-columns: minmax(0, 1fr); }
.hprice__plans { margin: 0; padding: 0; border: 0; min-width: 0; }
.hprice__legend { display: flex; align-items: center; gap: var(--space-xs); max-width: none; margin: 0 0 var(--space-s); padding: 0; font-size: var(--step-1); font-weight: 700; }
.hprice__n { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border: 2px solid currentColor; border-radius: 50%; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hprice__cards { display: grid; gap: var(--space-xs); }
.hprice__plan { position: relative; display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; padding: var(--space-m); border: 2px solid var(--border); border-radius: var(--radius-l); background: var(--bg); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.hprice__plan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hprice__plan:hover { border-color: var(--ink); }
.hprice__plan:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.hprice__plan:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.hprice__plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); min-height: 1.75rem; }
.hprice__plan-name { font-size: var(--step-1); font-weight: 800; }
.hprice__plan-mark { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid var(--border); border-radius: 50%; color: transparent; }
.hprice__plan-mark svg { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
.hprice__plan:has(input:checked) .hprice__plan-mark { background: var(--on-primary); border-color: var(--on-primary); color: var(--primary); }
.hprice__plan-price { font: 800 clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem) / 1 var(--font-display); letter-spacing: -0.03em; }
.hprice__plan-price small { display: block; margin-top: 0.3rem; font: 600 0.9375rem / 1.2 var(--font-text); letter-spacing: 0; }
.hprice__plan-who { font-weight: 700; line-height: 1.3; }
.hprice__plan-calls { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.hprice__plan:has(input:checked) .hprice__plan-calls { color: inherit; }
.hprice__fields { display: grid; gap: var(--space-s); }
.hprice .stepper { background: var(--bg); }
.hprice .stepper button, .hprice .stepper input { color: var(--ink); }
/* The sign-up button closes the sum on the right, under a rule, at the foot of the box. */
.hprice__go { display: grid; gap: var(--space-xs); justify-items: start; padding-top: var(--space-m); border-top: 1.5px solid var(--border); }
.hprice__terms { color: var(--muted); max-width: 60ch; }
.hprice__compare { font-weight: 700; }
.hprice__compare a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); }
.hprice__maths { display: grid; gap: var(--space-m); min-width: 0; padding: var(--space-l) var(--space-m); border-radius: var(--radius-l); background: var(--bg); }
.hprice__maths-title { font-size: var(--step-1); }
.hprice__bars { display: grid; gap: var(--space-m); }
.hprice__bar { display: grid; gap: 0.4rem; }
.hprice__bar p { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); margin: 0; max-width: none; font-weight: 700; }
.hprice__bar p.small { font-weight: 400; color: var(--muted); }
.hprice__bar b { font-size: var(--step-1); }
.hprice__fill { position: relative; display: block; height: 1.1rem; border-radius: 99px; background: var(--border); overflow: hidden; }
.hprice__fill::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 0.5rem; border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.hprice__fill--lost::before { background: var(--urgent); }
.hprice__fill--fee::before { background: var(--primary); }
.hprice__keep { display: grid; gap: 0.25rem; margin: 0; padding-top: var(--space-m); border-top: 1.5px solid var(--border); max-width: none; }
.hprice__keep strong { font: 800 clamp(3rem, 2.2rem + 3.4vw, 5.25rem) / 0.95 var(--font-display); letter-spacing: -0.04em; color: var(--success); }
.hprice__keep span { font-size: var(--step-1); font-weight: 700; }
.hprice__ratio { font-weight: 600; }
.hprice__note { color: var(--muted); }
@media (min-width: 30rem) { .hprice__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) {
  .hprice__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); row-gap: 0; }
  .hprice__plan { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-xs); }
  .hprice__maths { padding: var(--space-l); }
}
@media (max-width: 39.99rem) {
  /* Phones: each plan is one compact row, name and who on the left, price on the right. */
  .hprice__plan { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem var(--space-s); padding: var(--space-s); }
  .hprice__plan-top { grid-column: 1; }
  .hprice__plan-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 2rem; }
  .hprice__plan-price small { font-size: 0.8125rem; }
  .hprice__plan-who { grid-column: 1; }
  .hprice__plan-calls { grid-column: 1 / -1; }
  .hprice__signup { width: 100%; }
}
@media (min-width: 64rem) { .hprice { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "plans maths" "nums maths"; grid-template-rows: auto 1fr; gap: var(--space-l) var(--space-xl); align-items: start; } }

/* ---------- Questions: heading on the left, the list on the right ---------- */
.home-faq .faq { max-width: none; }
@media (min-width: 64rem) {
  .home-faq .hs__d { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start; }
  .home-faq .hs__d::details-content { display: block; }
  .home-faq .hs__sum { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .home-faq .hs__key { grid-column: 1; grid-row: auto; }
  .home-faq .hs__body { padding-top: 0; }
}

/* ================= Round 3 (owner review, 11 Nov 2026): alignment, spacing and the scrolling call transcript ================= */

/* ---------- Hero: "Stay on the tools while" / "kūmara books the job", the yellow rule under the wordmark ---------- */
.hero-f.hero--sheet .hero__title::after { content: none; }
.hero--sheet .hero__km { display: inline-block; padding-bottom: 0.14em; background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 0.1em no-repeat; }
.hero--sheet .hero__title { line-height: 1.08; }

/* ---------- Example calls: equal cards, and the words in their own scrolling box ---------- */
.calls-grid > li, .kinds3 > li { display: grid; min-width: 0; }
.call { grid-template-rows: auto auto auto 1fr auto; }
.call__transcript { min-width: 0; }
.convo.convo--box { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--space-s); margin-top: var(--space-2xs); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-m); }
.convo--box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.convo--box .convo__line { max-width: none; }
/* While a call plays, its lines come up one at a time as they are spoken. */
.is-following .convo--box .convo__line:not([data-heard]) { display: none; }
@media (prefers-reduced-motion: no-preference) { .is-following .convo--box .convo__line[data-speaking] { animation: rise-in 0.3s var(--ease) both; } }
.herocall .convo.convo--box { margin-bottom: var(--space-s); }
@media (min-width: 64rem) {
  /* The open call takes the whole row: the player on the left, the words on the right. The next call moves down a line. */
  .js .has-open-call { grid-column: 1 / -1; }
  .js .has-open-call > .call.call--open { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--space-xl); }
  .js .has-open-call > .call.call--open > * { grid-column: 1; }
  .js .has-open-call > .call.call--open > .call__transcript { grid-column: 2; grid-row: 1 / -1; }
  .js .has-open-call > .call.call--open .call__transcript > summary { min-height: 0; margin-bottom: var(--space-2xs); }
  .js .has-open-call > .call.call--open .convo.convo--box { height: 15rem; max-height: none; margin-top: 0; }
}

/* ---------- Pricing page: the highlighted plan column has even space around its button ---------- */
@media (min-width: 64rem) {
  .compare { --compare-plan: minmax(8rem, 12.5rem); }
  .compare__plan { padding: var(--space-s); gap: var(--space-xs); }
  .compare__pick { padding: 0; }
  .compare__cta { margin-top: 0; }
}

/* ---------- How it works ---------- */
.setup-steps { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; counter-reset: setup; }
.setup-steps li { counter-increment: setup; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-s); align-content: start; }
.setup-steps li::before { content: counter(setup); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.setup-steps h3 { grid-column: 2; display: flex; align-items: center; min-height: 2.5rem; font-size: var(--step-1); }
.setup-steps p { grid-column: 2; color: var(--muted); }
@media (min-width: 48rem) and (max-width: 63.99rem) { .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .setup-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 var(--space-l); }
  .setup-steps li { grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .setup-steps li::before { grid-row: auto; }
  .setup-steps h3, .setup-steps p { grid-column: 1; }
  .setup-steps h3 { min-height: 0; align-items: start; }
}
.how__part .note-box p { max-width: 80ch; }
.how__part .player--single { max-width: 40rem; }
/* After the call: the email, its three points and its caption share one left edge; the dashboard rows keep a number on one line. */
.how__part .hero__media { justify-items: stretch; }
.how__part .hero__media .mail { width: 100%; max-width: none; }
.how__part .annotations { padding-inline: var(--space-m); }
.how__part .hero__media figcaption, .how__part .dash figcaption { padding-inline: var(--space-m); text-align: left; }
.how__after-note { max-width: 80ch; }
@media (min-width: 40rem) {
  .dash__row { grid-template-columns: 5.25rem auto minmax(0, 1fr) auto; }
  .dash__who { white-space: nowrap; }
}
.player--single .player__words { grid-column: 1 / -1; }
.note-box h3 { display: flex; align-items: center; gap: var(--space-2xs); }
.note-box h3 .icon { flex: none; width: 1.25em; height: 1.25em; }
/* Home pricing: the sum on the right ends level with the column on the left. */
@media (min-width: 64rem) {
  .hprice__maths { align-self: stretch; grid-template-rows: auto auto auto auto auto 1fr; }
  .hprice__go { align-self: end; }
  .hprice__signup { width: 100%; justify-content: center; }
}
@media (min-width: 64rem) { .calls-grid, .kinds3 { grid-auto-flow: row dense; } }
/* Footer and closing band: the logo lines up with the column headings; the buttons sit level with the heading. */
.site-footer__brand { align-content: start; }
@media (min-width: 64rem) { .cta-band__in { align-items: center; } }
.herocall__meta { display: block; }
.herocall__meta .icon { display: inline-block; vertical-align: -0.12em; margin-right: 0.3em; }

/* ================= Round 4 (owner review, 11 Nov 2026 7:10pm) ================= */
/* Home pricing: more room for "Put in your own numbers" now the sign-up button lives in the sum. */
.hprice__nums .hprice__fields { gap: var(--space-m); }
@media (min-width: 64rem) { .hprice__pick { display: grid; gap: var(--space-xl); align-content: start; grid-area: plans; } .hprice__plans, .hprice__nums { grid-area: auto; } .hprice { grid-template-areas: "plans maths"; grid-template-rows: auto; } }

/* Pricing page: each plan card can be picked; the yellow outline and the main button follow the pick. */
.plan-card[data-plan-card] { cursor: pointer; }
.plan-card[data-plan-card]:not(.plan-card--featured):hover { outline: 1.5px solid var(--border); outline-offset: -1.5px; }
.plan-card__pick { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.plan-card__pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-s); }
.plan-card__radio { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--muted); border-radius: 50%; color: transparent; }
.plan-card__radio svg, .plan-card__radio .icon { width: 0.95rem; height: 0.95rem; stroke-width: 3; }
.plan-card__pick[aria-pressed="true"] .plan-card__radio { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
@media (prefers-reduced-motion: no-preference) { .plan-card { transition: outline-color var(--dur-fast) var(--ease); } }

/* Trade pages: the example call stretches to the foot of the urgent box, and its words fill the space. */
@media (min-width: 64rem) {
  .trade-split { align-items: stretch; }
  .trade-split > .trade-copy { padding-bottom: var(--space-m); }
  .trade-split > .call { grid-template-rows: auto auto auto auto 1fr; }
  @supports selector(::details-content) {
    .trade-split .call__transcript[open] { display: flex; flex-direction: column; min-height: 0; }
    .trade-split .call__transcript[open]::details-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .trade-split .convo.convo--box { flex: 1 1 0; min-height: 12rem; max-height: none; }
  }
}

/* ================= Round 5 (owner review, 11 Nov 2026 7:21pm) ================= */
/* Set up the way you work: six settings in a grid. */
.custom { display: grid; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.custom__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-s); align-content: start; padding: var(--space-m); background: var(--surface); border-radius: var(--radius-l); }
.custom__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.custom__icon .icon, .custom__icon svg { width: 1.25rem; height: 1.25rem; }
.custom__title { grid-column: 2; display: flex; align-items: center; min-height: 2.5rem; font-size: var(--step-1); }
.custom__body { grid-column: 2; color: var(--muted); }
.custom__help { margin-top: var(--space-m); }
.custom__help a { font-weight: 700; color: inherit; }
@media (min-width: 48rem) { .custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .custom { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Home pricing: both columns start and end level. The plan cards take the spare height on the left. */
.hprice__plan-list { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.35; color: var(--muted); align-content: start; }
.hprice__plan-list li { display: flex; gap: 0.45em; align-items: baseline; }
.hprice__plan-list li::before { content: ""; flex: none; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; translate: 0 -0.15em; }
.hprice__plan:has(input:checked) .hprice__plan-list { color: inherit; }
.hprice__hint { margin: calc(var(--space-2xs) * -1) 0 var(--space-s); color: var(--muted); max-width: 60ch; }
@media (max-width: 39.99rem) { .hprice__plan-list { grid-column: 1 / -1; } .hprice__plan-list li:nth-child(n+3) { display: none; } }
@media (min-width: 40rem) {
  .hprice__cards { grid-template-rows: repeat(4, auto); }
  .hprice__plan { padding-bottom: var(--space-l); }
}
@media (min-width: 64rem) {
  .hprice { align-items: stretch; }
  .hprice__pick { display: grid; grid-template-rows: 1fr auto; gap: var(--space-xl); align-content: stretch; }
  .hprice__plans { display: grid; grid-template-rows: auto 1fr; }
  .hprice__cards { grid-template-rows: auto auto auto 1fr; }
  .hprice__nums .hprice__fields { margin-bottom: 0; }
  /* Top edges: the "1 Pick your plan" line sits level with the box's first line. */
  .hprice__maths { padding-top: var(--space-l); }
}

/* Home pricing: "Every plan includes" fills the space under the plan cards; the cards grow so both columns end together. */
.hprice__all { margin-top: var(--space-m); padding: var(--space-s) var(--space-m); border: 1px solid var(--border); border-radius: var(--radius-m); }
.hprice__all-title { margin: 0 0 var(--space-2xs); font-weight: 700; }
.hprice__all-list { display: grid; gap: 0.35rem var(--space-m); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--muted); }
.hprice__all-list li { display: flex; gap: 0.5em; align-items: center; }
.hprice__all-list svg { flex: none; width: 1rem; height: 1rem; color: var(--text); }
@media (min-width: 40rem) { .hprice__all-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .hprice__plans { display: flex; flex-direction: column; }
  .hprice__cards { flex: 1 1 auto; }
  .hprice__all-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* "24/7" in the brand yellow as text (owner, 11 Nov 2026). Day mode uses a deeper gold so it passes contrast on the light background. */
.t247 { color: var(--accent); font-weight: 700; white-space: nowrap; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .t247 { color: #7a5e00; } }
[data-theme="light"] .t247 { color: #7a5e00; }
[data-theme="dark"] .t247 { color: var(--accent); }

/* Back to the top (owner, 11 Nov 2026): small, quiet, bottom right; above the call bar on phones. */
.to-top { position: fixed; z-index: 55; right: max(var(--space-s), env(safe-area-inset-right)); bottom: calc(var(--lift, 0px) + var(--space-s) + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; opacity: 0.92; transition: opacity var(--dur-base, 0.2s) var(--ease, ease), border-color 0.2s, translate 0.2s var(--ease, ease); }
.to-top svg { width: 1.15rem; height: 1.15rem; rotate: -90deg; }
.to-top:hover { opacity: 1; border-color: var(--control); translate: 0 -2px; }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.to-top[hidden] { display: none; }
@media (min-width: 64rem) { .to-top { right: var(--space-l); bottom: var(--space-l); } }
@media print { .to-top { display: none !important; } }

/* Custom agents on request, and Google reviews (owner, 11 Nov 2026). */
.custom__agent { display: grid; gap: var(--space-m); margin-top: var(--space-m); padding: var(--space-m); border: 1px solid var(--border); border-radius: var(--radius-l); }
.custom__agent-title { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.custom__agent p { color: var(--muted); max-width: 70ch; }
.custom__agent-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); }
.custom__agent-call { font-weight: 700; color: inherit; }
@media (min-width: 64rem) { .custom__agent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .custom__agent-go { flex-direction: column; align-items: stretch; text-align: center; } }
@media (min-width: 48rem) { .custom--two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.custom__soon { margin-left: var(--space-2xs); padding: 0.1em 0.5em; border: 1px solid var(--border); border-radius: 99px; font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.custom--two .custom__title { flex-wrap: wrap; row-gap: 0.25em; }

/* Wide screens (owner, 11 Nov 2026): text and spacing grow a little past 1600px so it stays easy to read.
   Everything is sized in rem, so the whole page scales together; phones and laptops are unchanged. */
@media (min-width: 100rem) { html { font-size: 106.25%; } }
@media (min-width: 120rem) { html { font-size: 112.5%; } }
@media (min-width: 150rem) { html { font-size: 118.75%; } }

/* Hero: the trust line stops short of the booking email that overlaps the job sheet (owner, 11 Nov 2026), so
   "Month to month, cancel any time" drops to its own line instead of sitting under the email. */
@container hero (min-width: 62rem) { .hero--sheet .trust { max-width: 28rem; } }

.custom__title:has(.custom__soon) { flex-direction: column-reverse; align-items: flex-start; justify-content: center; gap: 0.3em; }
.custom__title .custom__soon { margin-left: 0; }

/* Book a demo (owner, 12 Nov 2026): a short intro and "Call us now" on the left, the request form on the right.
   On phones they stack: heading, ticks, call, then the form. */
.header-demo { display: none; }
/* The header's "Book a demo" shows on every desktop width (owner, 12 Nov 2026). Between 64rem and 80rem the
   nav and actions sit closer together so everything fits on one line. */
@media (min-width: 64rem) { .header-demo { display: inline-flex; } }
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .site-header__in { gap: var(--space-s); }
  .nav ul { gap: var(--space-s); }
  .site-header__actions { gap: var(--space-2xs); margin-left: var(--space-s); }
  .site-header__actions .btn--sm { padding-inline: 0.8rem; }
}
.book { display: grid; gap: var(--space-xl); padding-block: var(--space-l) var(--space-2xl); align-items: start; }
.book h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); text-wrap: balance; }
.book__intro { display: grid; gap: var(--space-m); align-content: start; }
.book__intro .lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 34ch; }
.book__ticks { font-size: var(--step-0); gap: var(--space-xs); }
.book__h2 { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--step-1); }
.book__call { display: grid; gap: var(--space-s); padding: var(--space-m); border: var(--border-w, 2px) solid var(--border); border-radius: var(--radius-l); justify-items: start; }
.book__call p { color: var(--muted); max-width: 40ch; }
.book__ring { font-size: var(--step-0); }
.book__form { display: grid; gap: var(--space-s); padding: var(--space-l) var(--space-m); background: var(--surface); border-radius: var(--radius-l); min-width: 0; }
.book__why { color: var(--muted); margin-top: calc(var(--space-2xs) * -1); }
.book__form .cf-turnstile { min-height: 65px; }
.book__form .btn--block { margin-top: var(--space-2xs); }
@media (min-width: 36rem) { .book__pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .book { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); padding-top: var(--space-xl); }
  .book__form { padding: var(--space-xl) var(--space-l); }
}
.book-done { display: grid; gap: var(--space-s); padding-block: var(--space-xl) var(--space-2xl); max-width: 40rem; }
.book-done h1 { font-size: var(--step-4); }
.book-done .lede { font-size: var(--step-1); color: var(--muted); }
.book-done__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-s); }
.demo-sec__talk { margin-top: var(--space-m); }
/* Industry search on Book a demo (src/f/scripts/industry.ts): a text box with a grouped list under it. */
.industry__box { position: relative; }
.industry__input { width: 100%; }
.industry__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.35rem); max-height: 18rem; overflow-y: auto; margin: 0; padding: var(--space-3xs) 0; list-style: none; background: var(--bg); border: var(--border-w, 2px) solid var(--ink); border-radius: var(--radius-m, 0.75rem); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 14%, transparent); }
.industry__group { padding: var(--space-2xs) var(--space-s) var(--space-3xs); color: var(--muted); font-size: var(--step-n1); font-weight: 700; }
.industry__opt { padding: 0.6rem var(--space-s); cursor: pointer; }
.industry__opt:hover, .industry__opt.is-active { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.industry__opt[aria-selected="true"] { font-weight: 700; }
.industry__none { padding: 0.6rem var(--space-s); color: var(--muted); }
/* Footnotes (owner, 12 Nov 2026): small print lives in the footer, marked on the page with * and **. */
.fn { margin-left: 0.08em; font-size: 0.6em; font-weight: 700; vertical-align: super; line-height: 0; color: var(--muted); text-decoration: none; }
.fn:hover { color: var(--ink); }
#notes { scroll-margin-top: 6rem; }
.site-footer__notes { display: grid; gap: var(--space-2xs); padding-top: var(--space-m); border-top: 1px solid color-mix(in srgb, var(--on-band) 22%, transparent); }
.site-footer__notes h2 { font-family: var(--font-text); font-size: var(--step-0); letter-spacing: 0; }
.site-footer__notes p { max-width: 96ch; color: var(--on-band-muted); padding-left: 2.2em; text-indent: -2.2em; }
.site-footer__notes a { color: var(--on-band); }
.site-footer__mark { display: inline-block; width: 2.2em; text-indent: 0; font-weight: 700; color: var(--on-band); }
@media (min-width: 64rem) { .site-footer__notes { grid-column: 1 / -1; } }