/* Landing v2 mock (20 Oct 2026). The live site's own tokens, font, header, buttons and footer (app/web/static/site.css), copied
   so the mock renders from file:// with no server; the new home's sections are below them. Nothing here ships: the builder ports the
   section rules into home.css once the owner has marked the mock. Border rule (G56): a 1 px line only on what you press or type in. */
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2"); }

:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #e9edf2; --ink: #0f1b2d; --ink-2: #4b5768; --line: #d6dce4;
  --accent: #1e4db7; --accent-ink: #ffffff; --accent-soft: #e4ebfa; --accent-deep: #163c93; --ok: #157a4a; --warn: #8a5a00; --bad: #c0392b;
  --ok-soft: #e1f3e8; --warn-soft: #fbf0d9; --bad-soft: #fbe6e3;
  /* the highlighter band (20 Oct 2026): the palette's amber (#e5b84a, the dark --warn) 60% into --warn-soft = #eece83; ink on it 11.4:1 */
  --marker: color-mix(in srgb, #e5b84a 60%, var(--warn-soft));
  --marker-ink: var(--ink); /* text on the band is always full ink: 11.4:1 (grey paragraph text on it was only 4.8:1) */
  --focus: #1e4db7; --radius: 12px; --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
  --font: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tap: 44px; --sp-section: clamp(56px, 8vw, 96px); --sp-section-tight: clamp(40px, 5vw, 52px); --surface-dark: #0b1730;
  --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 40px; --t-meta: 12.5px;
  /* the vertical rhythm of the home page (owner spacing pass, 20 Oct 2026): six steps, and five roles that use them.
     --s-section: every section's padding, top and bottom; --s-head: a section head (label, h2, sub-line) to its content;
     --s-row: between repeated rows (problem rows, timeline steps, the client's moments); --s-after: content to a badge row or
     a button row; --s-text: a heading to its first paragraph. Phone values are set under 600 px below. */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 56px; --s-6: 88px;
  --s-section: var(--s-6); --s-head: var(--s-5); --s-row: var(--s-4); --s-after: var(--s-5); --s-text: var(--s-1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141c; --surface: #161c26; --surface-2: #1d2532; --ink: #e8ebf0; --ink-2: #a9b3c1; --line: #2c3645;
    --accent: #8fb0ff; --accent-ink: #0b1730; --accent-soft: #1f2c47; --accent-deep: #a9c2ff; --ok: #5ccf96; --warn: #e5b84a; --bad: #ff8a80;
    --ok-soft: #173326; --warn-soft: #33290f; --bad-soft: #3a1d1a;
    /* dark band (owner, 20 Oct 2026: the brown one nearly disappeared): a solid saturated ochre from the amber family, white text on it 7.1:1 */
    --marker: #765100; --marker-ink: #ffffff;
    --focus: #8fb0ff; --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141c; --surface: #161c26; --surface-2: #1d2532; --ink: #e8ebf0; --ink-2: #a9b3c1; --line: #2c3645;
  --accent: #8fb0ff; --accent-ink: #0b1730; --accent-soft: #1f2c47; --accent-deep: #a9c2ff; --ok: #5ccf96; --warn: #e5b84a; --bad: #ff8a80;
  --ok-soft: #173326; --warn-soft: #33290f; --bad-soft: #3a1d1a;
    /* dark band (owner, 20 Oct 2026: the brown one nearly disappeared): a solid saturated ochre from the amber family, white text on it 7.1:1 */
    --marker: #765100; --marker-ink: #ffffff;
  --focus: #8fb0ff; --shadow: none; color-scheme: dark;
}

/* ---- base, as site.css ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-wrap: break-word; font-optical-sizing: auto; }
@media (min-width: 900px) { body { font-size: 17px; } }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.028em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 24px); }
.narrow { max-width: 760px; }
.small { font-size: .9rem; }
.muted { color: var(--ink-2); }
section { padding-block: var(--sp-section); }
.section-tight { padding-block: var(--s-section); }
@media (max-width: 600px) { :root { --s-section: var(--s-5); --s-head: var(--s-4); --s-after: var(--s-4); } }
.section-slim { padding-block: clamp(32px, 4vw, 48px); }
.band { background: var(--surface-2); }
.band-dark { background: var(--surface-dark); color: #e8ebf0; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lead, .band-dark .muted, .band-dark .small { color: rgba(232, 235, 240, .78); }
.band-dark a { color: #a9c2ff; }
.section-head { margin-bottom: var(--s-head); }
.section-head h2 { max-width: 22ch; margin-bottom: var(--s-2); }
.section-head .lead { margin-bottom: 0; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }

/* ---- the mock's own ribbon (not page copy) ---- */
.mock-ribbon { min-height: 28px; display: flex; align-items: center; justify-content: center; padding: 4px 16px; background: var(--surface-2);
  color: var(--ink-2); font-size: var(--t-meta); line-height: 1.3; text-align: center; }

/* ---- header, as site.css; Start free is the outlined twin of the page's own filled call ---- */
.site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 5; }
.bar { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
.brand-logo { width: 28px; height: 28px; display: block; border-radius: 7px; }
.nav { display: flex; align-items: center; gap: 4px 18px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: var(--tap); }
.nav a:hover { color: var(--ink); }
.nav .btn { background: var(--surface); color: var(--accent-deep); border-color: var(--line); }
.nav .btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
  padding: 6px 16px; font: inherit; min-height: var(--tap); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 14px; }
  .nav a { padding-block: 4px; border-top: 1px solid var(--line); }
  .nav .btn { justify-content: center; margin-top: 10px; border-top: 1px solid var(--line); }
  .nav.is-open { display: flex; }
}

/* ---- buttons, as site.css ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); background: var(--accent);
  color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 20px; font: 600 1rem/1.2 var(--font);
  text-decoration: none; cursor: pointer; text-align: center; transition: background-color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.btn-small { padding: 6px 14px; font-size: .92rem; }
.btn-large { padding: 13px 26px; font-size: 1.08rem; border-radius: 12px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.link-arrow { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.link-arrow:hover { text-decoration-color: currentColor; }
@media (max-width: 560px) { .cta-row .btn { width: 100%; } }

/* ---- a button named in running text ("press Send", "press Undo") is shown as the chip of the button (rule 4c) ---- */
.chip { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; font-size: .92em; line-height: 1.5; }
/* the outlined twin of Start free inside a section, on the page's own colour: a white face so it reads as a button on the panel */
.pr-card .btn-ghost, .how .btn-ghost { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent-deep); }
.pr-card .btn-ghost:hover, .how .btn-ghost:hover { border-color: var(--accent); background: var(--surface); color: var(--accent-deep); }

/* ---- what is conditional: a small grey tag, and what the page says until then ---- */
.coming { display: inline-block; vertical-align: .12em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-2); font-size: var(--t-meta); font-weight: 600; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
.band .coming { background: var(--surface); }
.band-dark .coming { background: rgba(255, 255, 255, .12); color: rgba(232, 235, 240, .86); }
.until { display: block; margin-top: 4px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.band-dark .until { color: rgba(232, 235, 240, .7); }

/* ---- drawings: a drawn product surface, white paper on the page, labelled illustrative ---- */
.draw { margin: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.draw-cap { margin: 10px 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--t-meta); font-weight: 650;
  line-height: 1.3; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag-you { background: var(--accent-soft); color: var(--accent-deep); }
.tag-client { background: var(--warn-soft); color: var(--warn); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-bad { background: var(--bad-soft); color: var(--bad); }

/* 1. hero: copy left, the board right */
.hero { padding-block: clamp(28px, 4vw, 48px) var(--s-section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
.hero { overflow-x: clip; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 24px; }
  /* 20 Oct 2026, hero C: the board was first run from its column to the screen edge so the columns ended level;
     the same day: the board stays inside its column (the run-to-the-edge version went off screen on a laptop at 100 percent) */
  .hero-visual { align-self: center; }
  .hero-shot { width: 100%; }
  .hero-head { margin-bottom: 8px; }
  .hero-head .kicker { margin-bottom: 24px; }
}
.hero h1 { max-width: 16ch; margin-bottom: .3em; }
/* the headline and the kicker run across both columns */
.hero-head h1, .hero-head .kicker { max-width: none; }
/* the headline: the second sentence in the accent, the same token as the feature phrases; each sentence on its own line where it fits */
.h1-line { display: inline-block; }
.h1-accent { color: var(--accent); }
@media (min-width: 960px) { .hero h1 { font-size: clamp(2.6rem, 1.6rem + 2.2vw, 3.2rem); } }
.kicker { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 650; letter-spacing: -.01em; line-height: 1.35; margin: 0 0 20px; color: var(--ink); max-width: 30ch; }
/* the seven features: one chip family in two groups, the only tinted things in the hero beside the buttons */
.feat { margin: 0 0 20px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.feat-label { margin: 0 0 8px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.does { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.does li { position: relative; padding-left: 30px; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.does li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.does strong { color: var(--ink); font-weight: 600; }
.does em { font-style: normal; font-weight: 600; color: var(--accent); border-radius: 4px; }
.chips + .feat-label, .does + .feat-label { margin-top: 16px; }
.chip-f { display: inline-flex; align-items: center; gap: 8px; padding: 15px; border-radius: 10px; background: var(--accent-soft);
  border: 1px solid var(--accent-soft); color: var(--ink); font-size: .88rem; font-weight: 500; line-height: 1.3; max-width: 100%; }
/* the second group's short chips sit two to a row, the last one across both, so the group is a block with no ragged edge */
.chips-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips-2 .chip-f:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 960px) { .chips-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chips-2 .chip-f { align-items: flex-start; } .chips-2 .chip-f svg { margin-top: 1px; } }
.chip-f .coming { background: var(--surface); margin-left: 0; }
.chip-tag { display: block; margin-top: 6px; }
.chip-tag .coming { white-space: nowrap; }
.chip-f > span { min-width: 0; }
.chip-f svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.chip-f b { font-weight: 600; color: var(--ink); }
@media (max-width: 600px) {
  .hero { padding-top: 24px; }
  .hero h1 { font-size: 2.15rem; }
  .kicker { margin-bottom: 16px; }
  .hero-note { font-size: .9rem; }
  .feat { margin-bottom: 24px; padding: 12px 0; }
  .chips { gap: 6px; }
  .chips + .feat-label, .does + .feat-label { margin-top: 12px; }
  .does li { font-size: 1rem; }
  .chip-f { padding: 11px 12px; font-size: .88rem; gap: 8px; }
  /* on a phone the hero is copy and chips only; the product pictures follow in every section below */
  .hero-visual { display: none; }
}
.hero-note { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 500; }

.brd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; flex-wrap: wrap; }
.brd-title { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brd-meta { font-size: var(--t-meta); color: var(--ink-2); }
.brd-cols, .brd-row { display: grid; grid-template-columns: minmax(0, 1.1fr) 92px 84px minmax(0, 1.9fr); gap: 12px; align-items: center; padding: 10px 20px; }
.brd-cols { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); padding-block: 6px; }
.brd { list-style: none; margin: 0; padding: 0 0 8px; }
.brd-row { min-height: 64px; padding-block: 16px; font-size: .92rem; line-height: 1.35; }
.brd-row + .brd-row { box-shadow: inset 0 1px 0 var(--surface-2); }
.brd-name { font-weight: 650; }
.on-phone { display: none; }
@media (max-width: 600px) { .on-phone { display: inline; } }
.brd-docs { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .88rem; }
.brd-next { color: var(--ink); }
.brd-row.is-mine { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
@media (max-width: 600px) {
  .brd-cols { display: none; }
  .brd-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; }
  .brd-name { grid-column: 1; }
  .brd-row .tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .brd-docs { grid-column: 1 / -1; grid-row: 2; }
  .brd-next { grid-column: 1 / -1; }
  .brd-head { padding-inline: 16px; }
}

/* 1c. the problem: three rows, each one unit read left to right: a light display numeral, the problem quiet in ink, an accent arrow,
   and the answer on the chips' accent-soft surface with a chip-style icon. No dividers and no grey boxes (G56 border rule): rows are
   grouped by spacing; the only tint is the answer. On a phone the row stacks: numeral and problem, the arrow turned down, the answer. */
.pains, .client { --ps-panel: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); --ps-num: color-mix(in srgb, var(--accent) 38%, var(--surface-2)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pains, :root:not([data-theme="light"]) .client { --ps-panel: var(--accent-soft); --ps-num: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); } }
:root[data-theme="dark"] .pains, :root[data-theme="dark"] .client { --ps-panel: var(--accent-soft); --ps-num: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.ps-head .lead { margin: 0; }
@media (min-width: 960px) {
  .ps-head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .ps-head h2 { margin: 0; }
}
.ps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-row); }
.ps-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "n was" "turn turn" "now now"; column-gap: 12px; align-items: start; }
.ps-n { grid-area: n; font-size: 2.6rem; font-weight: 300; line-height: .9; letter-spacing: -.04em; color: var(--ps-num); font-variant-numeric: tabular-nums; }
.ps-was { grid-area: was; padding-top: 2px; }
.ps-t { margin: 0 0 var(--s-text); font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.ps-row p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.ps-turn { grid-area: turn; width: 28px; height: 28px; margin: 4px 0 4px 14px; transform: rotate(90deg); color: var(--accent); overflow: visible; }
.ps-turn path { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ps-now { grid-area: now; display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--radius); background: var(--ps-panel); }
.ps-now .ps-t { color: var(--accent); }
.ps-now p { color: var(--ink); }
.ps-ic { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 10px; background: var(--surface); color: var(--accent); }
.ps-ic svg { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .ps-row { grid-template-columns: 96px minmax(0, 1fr) 72px minmax(0, 1.25fr); grid-template-areas: "n was turn now"; column-gap: 0; align-items: start; }
  /* the row reads as one line: numeral, problem title, arrow and answer title share the answer's top padding */
  .ps-n { font-size: 4.6rem; margin-top: 18px; }
  .ps-was { padding: 24px 8px 0 0; }
  .ps-turn { width: 56px; height: 24px; margin: 27px 8px 0; transform: none; justify-self: center; }
  .ps-now { padding: 24px 32px 24px 24px; }
}
@media (max-width: 600px) { .ps-now { padding: 16px; gap: 12px; } }
/* the bridge: the section's quiet end and the way into "How a month closes". The heading keeps the hero's two-tone rule; three items
   in one row from 800 px, set as trust marks (owner, 20 Oct 2026: titles only, no sentences). A short
   accent rule above the heading marks the turn from problems to the sum, then the band ends and the next section opens on the page. */
.bridge { margin-top: var(--s-after); }
.bridge-h { position: relative; margin: 0 0 var(--s-3); padding-top: var(--s-3); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.bridge-h::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--accent); }
/* the three trust marks: equal badges on the answers' lighter accent surface, the 44 px icon tile and a 600 title; no border, no shadow */
.bridge-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bridge-list li { display: flex; gap: 16px; align-items: center; min-height: 76px; padding: 16px 24px 16px 16px; border-radius: var(--radius); background: var(--ps-panel); }
.bridge-t { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
@media (min-width: 800px) { .bridge-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 600px) { .bridge-list { gap: var(--s-1); } .bridge-list li { min-height: 0; padding: 12px 16px 12px 12px; } }
/* One reveal, as each row scrolls into view (script.js arms it only with scripts on and motion allowed): the arrow draws left to
   right, then the answer settles in from the left, with the hero's marker easing; the answer's bands paint after it settles. */
@media (prefers-reduced-motion: no-preference) {
  .ps.is-armed .ps-turn-line { stroke-dasharray: 56; stroke-dashoffset: 56; transition: stroke-dashoffset 600ms cubic-bezier(.3, .7, .3, 1); }
  .ps.is-armed .ps-turn-head { opacity: 0; transition: opacity 200ms ease 450ms; }
  .ps.is-armed .ps-now { opacity: 0; transform: translateX(-12px); transition: opacity 500ms ease 350ms, transform 700ms cubic-bezier(.3, .7, .3, 1) 350ms; }
  .ps.is-armed .ps-row.is-in .ps-turn-line { stroke-dashoffset: 0; }
  .ps.is-armed .ps-row.is-in .ps-turn-head { opacity: 1; }
  .ps.is-armed .ps-row.is-in .ps-now { opacity: 1; transform: none; }
}

/* 1d. how a month closes: a real sequence, so numbered. One accent line runs down the page through six step markers and draws
   itself segment by segment as each step scrolls in. Markers: a ring in the accent (01, 06); the client run 02 to 04 tinted
   accent-soft, joined by a wider soft segment; 05, the control moment, the one filled marker with a soft halo. From 960 px text and
   picture alternate sides of the line (odd steps text left); on a phone one column: the line at the left, number, title, text,
   picture. Pictures are the real screenshots in their browser or phone frame; 01 and 04 have none, so a quiet icon tile. */
.how { --tl-x: 24px; --tl-m: 48px; }
.how .ps-head .feat-label { margin-bottom: 8px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl-step { position: relative; display: grid; grid-template-columns: var(--tl-m) minmax(0, 1fr); column-gap: 16px; row-gap: 16px; padding-bottom: var(--s-row); }
.tl-step:last-child { padding-bottom: var(--s-after); }
/* the line: from this marker's centre down to the next marker's centre */
.tl-step::before { content: ""; position: absolute; left: calc(var(--tl-x) - 1px); top: calc(var(--tl-m) / 2); bottom: calc(var(--tl-m) / -2); width: 2px; border-radius: 2px; background: var(--accent); transform-origin: top; }
.tl-step:last-child::before { bottom: 0; }
.tl-run:not(.tl-run-end)::before { left: calc(var(--tl-x) - 4px); width: 8px; background: color-mix(in srgb, var(--accent) 26%, var(--accent-soft)); }
.tl-n { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: relative; z-index: 1; display: grid; place-items: center; width: var(--tl-m); height: var(--tl-m); border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tl-run .tl-n { background: var(--accent-soft); }
.tl-key .tl-n { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px var(--accent-soft); }
.tl-txt { grid-column: 2; padding-top: 8px; }
.tl-txt h3 { margin: 0 0 var(--s-text); font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.tl-key .tl-txt h3 { color: var(--accent); }
.tl-txt > p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.tl-media { grid-column: 2; margin: 0; min-width: 0; }
.tl-tile { display: none; }
.tl-phone .ph { width: min(220px, 62vw); border-radius: 32px; padding: 8px; }
.tl-phone .ph::before { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
.tl-phone .ph-screen { border-radius: 25px; }
.tl-phone .ph-shot .ph-screen { padding-top: 28px; }
.tl-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; padding-left: calc(var(--tl-m) + 16px); }
.tl-end .hero-note { margin: 0; }
.tl-end-pad { display: none; }
/* the post confirmation is a dialog, not a page: no browser bar, its own rounded edge and the frame's border and shadow */
.tl-dialog { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 50px rgba(22, 32, 46, .14); }
.tl-dialog img { display: block; width: 100%; height: auto; }
@media (min-width: 960px) {
  .how { --tl-x: 50%; --tl-m: 52px; }
  .tl-step { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: start; }
  .tl-step::before { left: calc(50% - 1px); }
  .tl-run:not(.tl-run-end)::before { left: calc(50% - 4px); }
  .tl-n { grid-column: 2; grid-row: 1; justify-self: center; font-size: 1.05rem; }
  .tl-txt, .tl-media { grid-row: 1; }
  /* odd steps: text left against the line, picture right; even steps the other way */
  .tl-step:nth-child(odd) .tl-txt { grid-column: 1; justify-self: end; padding-right: 8px; }
  .tl-step:nth-child(odd) .tl-media { grid-column: 3; justify-self: start; }
  .tl-step:nth-child(even) .tl-txt { grid-column: 3; padding-left: 8px; }
  .tl-step:nth-child(even) .tl-media { grid-column: 1; justify-self: end; }
  .tl-txt { padding-top: 10px; max-width: 46ch; }
  .tl-media.shot { width: 100%; }
  .tl-tile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-top: -10px; }
  .tl-tile svg { width: 30px; height: 30px; }
  /* the line ends in the button: the button sits centred on the line, the trial note beside it */
  .tl-end { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 20px; padding-left: 0; }
  .tl-end-pad { display: block; }
  .tl-end .hero-note { justify-self: start; }
  .tl-phone .ph { width: 200px; }
  .tl-dialog { max-width: 460px; }
}
/* the progression (script.js arms it with scripts on and motion allowed): as a step enters, its marker fills from a plain ring, its
   text and picture rise 12 px into place, and its segment of the line draws down to the next marker; the shared easing.
   Without scripts or with reduced motion every step is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .tl.is-armed .tl-step::before { transform: scaleY(0); transition: transform 900ms cubic-bezier(.3, .7, .3, 1) 350ms; }
  .tl.is-armed .tl-n { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line); transition: background-color 500ms ease, color 500ms ease, box-shadow 500ms ease; }
  .tl.is-armed .tl-txt, .tl.is-armed .tl-media { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 800ms cubic-bezier(.3, .7, .3, 1); }
  .tl.is-armed .tl-media { transition-delay: 150ms; }
  .tl.is-armed .tl-step.is-in::before { transform: scaleY(1); }
  .tl.is-armed .tl-step.is-in .tl-n { background: var(--bg); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
  .tl.is-armed .tl-run.is-in .tl-n { background: var(--accent-soft); }
  .tl.is-armed .tl-key.is-in .tl-n { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px var(--accent-soft); }
  .tl.is-armed .tl-step.is-in .tl-txt, .tl.is-armed .tl-step.is-in .tl-media { opacity: 1; transform: none; }
  .mk-armed .tl .marker.is-drawn { animation-delay: 500ms; }
}

.ledger { margin: 0; background: #fff; color: #0f1b2d; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); overflow: hidden; }
.lg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 16px 20px; background: #f4f6f9; font-size: var(--t-meta); color: #4b5768; }
.lg-head strong { color: #0f1b2d; font-size: .9rem; }
.lg-src { display: inline-flex; align-items: center; gap: 6px; }
.lg-src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #157a4a; }
.lg-txn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 20px 20px 16px; }
.lg-date { color: #4b5768; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lg-payee { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.lg-amt { font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lg-move { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: stretch; gap: 8px; margin: 0 20px; }
.lg-move > div:not(.lg-arrow) { border-radius: 10px; padding: 12px 14px; min-width: 0; }
.lg-from { background: #f4f6f9; }
.lg-to { background: #e4ebfa; }
.lg-move dt, .lg-facts dt { font-size: var(--t-meta); color: #4b5768; font-weight: 600; margin-bottom: 2px; }
.lg-move dd, .lg-facts dd { margin: 0; font-weight: 650; line-height: 1.35; }
.lg-from dd { color: #4b5768; text-decoration: line-through; text-decoration-color: rgba(75, 87, 104, .5); }
.lg-to dd { color: #163c93; }
.lg-arrow { display: grid; place-items: center; color: #4b5768; }
.lg-arrow svg { width: 22px; height: 22px; }
.lg-facts { margin: 16px 20px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.lg-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 10px 0; box-shadow: inset 0 1px 0 #e9edf2; }
.lg-facts dt { margin: 0; padding-top: 2px; }
.lg-facts dd { font-weight: 550; }
.lg-tax dd { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-q { font-style: normal; }
.lg-press { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 20px; margin-top: 8px; background: #f4f6f9; }
.mock-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 10px 20px; border-radius: 10px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; border: 1px solid #d6dce4; background: #fff; color: #0f1b2d; }
.mock-btn.is-fill { background: #1e4db7; border-color: #1e4db7; color: #fff; }
.mock-then { color: #4b5768; font-size: .9rem; }
.mock-undo { margin-left: auto; color: #1e4db7; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  .lg-txn { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 12px 12px; }
  .lg-date { grid-column: 1 / -1; }
  .lg-move { grid-template-columns: minmax(0, 1fr); margin: 0 12px; }
  .lg-arrow { height: 24px; transform: rotate(90deg); }
  .lg-facts { margin-inline: 12px; }
  .lg-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lg-head, .lg-press { padding-inline: 12px; }
  .mock-undo { margin-left: 0; }
}
.band-dark .draw-cap { color: rgba(232, 235, 240, .7); }

/* 1f. the client side: the /q page on a phone (the live home's CSS phone), the four points beside it */
/* 1f. the client side, on the grey band: the real /q page in its phone frame (cropped at the bottom, never squashed) beside the client's
   four moments. The moments are the timeline's family made lighter: 32 px numbered rings joined by a thin connector, a row of four from
   1100 px, two by two from 960 px, a short vertical run on a phone. The bridge's trust marks close the section, four across. */
.client .ps-head .feat-label { margin-bottom: 8px; }
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-row); }
.cl-phone { margin: 0; display: grid; justify-items: center; }
.cl-phone .ph { width: 230px; border-radius: 34px; padding: 8px; }
.cl-phone .ph::before { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
.cl-phone .ph-screen { position: relative; height: 400px; border-radius: 27px; display: block; }
.cl-phone .ph-shot .ph-screen { padding-top: 28px; }
/* the crop: the page runs on below the frame's edge; a short fade into the screen's own paper says so */
.cl-phone .ph-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.cl-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-row); }
.cl-flow li { position: relative; padding-left: 48px; }
.cl-flow li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: -16px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); }
.cl-n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-weight: 700; font-size: .92rem; }
.cl-flow h3 { margin: 4px 0 var(--s-text); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.cl-flow p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.cl-badges { margin-top: var(--s-after); }
@media (min-width: 600px) and (max-width: 959px) { .cl-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) {
  .cl-grid { grid-template-columns: 224px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .cl-phone .ph { width: 224px; }
  .cl-phone .ph-screen { height: auto; }
  .cl-phone .ph-screen::after { display: none; }
  /* the strip: numbered rings in a row with short connectors between them, the text under each ring */
  .cl-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-row) 32px; }
  .cl-flow li { padding: 48px 0 0; }
  .cl-flow li:not(:last-child)::after { left: 44px; right: -20px; top: 15px; bottom: auto; width: auto; height: 2px; }
  .cl-flow li:nth-child(2)::after { display: none; }
  .cl-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1100px) {
  .cl-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-row) 24px; }
  .cl-flow li:nth-child(2)::after { display: block; }
  .cl-flow li:not(:last-child)::after { right: -12px; }
  .cl-flow p { font-size: .97rem; line-height: 1.55; }
  .cl-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ph { width: min(300px, 78vw); background: #0b1220; border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(11, 23, 48, .45), 0 0 0 1px rgba(255, 255, 255, .16);
  position: relative; color: #0f1b2d; }
.ph::before { content: ""; position: absolute; top: 18px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: #0b1220; border-radius: 12px; z-index: 3; }
.ph-screen { border-radius: 31px; background: #f4f6f9; overflow: hidden; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.ph-top { padding: 48px 16px 12px; background: #fff; }
.ph-firm { display: block; font-weight: 700; font-size: 11px; color: #4b5768; }
.ph-req { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #0f1b2d; }
.ph-body { padding: 12px; display: grid; gap: 8px; }
.ph-item { background: #fff; border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.ph-amt { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.ph-amt strong { font-size: 16px; letter-spacing: -.01em; }
.ph-amt span { color: #4b5768; font-size: 11px; }
.ph-desc { margin: 0; color: #4b5768; font-size: 11px; }
.ph-ask { margin: 0; font-weight: 700; font-size: 12.5px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid #d6dce4; background: #fff; font-size: 11.5px; font-weight: 600; }
.ph-chip.is-on { background: #e4ebfa; border-color: #1e4db7; color: #163c93; }
.ph-note { padding: 8px 10px; border-radius: 8px; border: 1px solid #d6dce4; background: #f8fafc; font-size: 11.5px; }
.ph-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed #c6cfda; border-radius: 9px; background: #f8fafc; font-weight: 600; font-size: 11.5px; }
.ph-file-icon { flex: none; width: 14px; height: 18px; border-radius: 3px; background: #1e4db7; }
.ph-ok { margin: 0; display: flex; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 9px; background: #e1f3e8; color: #135f3a; font-weight: 600; font-size: 11.5px; }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; background: #fff; border-radius: 12px; font-weight: 600; }
.ph-tag { font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 6px; background: #e9edf2; color: #4b5768; white-space: nowrap; }
.ph-dock { margin-top: 4px; padding: 12px; background: #fff; display: grid; gap: 8px; }
.ph-prog { display: flex; justify-content: space-between; font-size: 11px; color: #4b5768; font-weight: 600; }
.ph-bar { height: 4px; border-radius: 999px; background: #e3e8ee; overflow: hidden; }
.ph-bar i { display: block; height: 100%; width: 33%; background: #1e4db7; }
.ph-send { display: flex; justify-content: center; align-items: center; min-height: 40px; border-radius: 10px; background: #1e4db7; color: #fff; font-weight: 700; font-size: 13px; }

/* 1g. the board: one client's month opened from its board row */
.mo-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 20px; background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.mo-row .brd-name { font-size: 1.05rem; }
.mo-next { flex: 1 1 260px; color: var(--ink); font-size: .95rem; }
.mo-back { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; }
.mo-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 0 12px; box-shadow: inset 0 -1px 0 var(--surface-2); }
.mo-tab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; color: var(--ink-2); font-weight: 550; white-space: nowrap; font-size: .95rem; }
.mo-tab.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.mo-count { font-size: var(--t-meta); padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-weight: 650; }
.me-cols, .me-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) repeat(3, minmax(0, .8fr)) 96px; gap: 12px; align-items: center; padding: 10px 20px; }
.me-cols { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); padding-top: 16px; }
.me-cols span:nth-child(n+3), .me-row .num { text-align: right; }
.me-row { min-height: 56px; font-size: .94rem; box-shadow: inset 0 1px 0 var(--surface-2); }
.me-row .num { font-variant-numeric: tabular-nums; }
.me-acct { font-weight: 600; }
.me-row .tag { justify-self: end; }
.me-diff.is-bad { color: var(--bad); font-weight: 650; }
.me-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; box-shadow: inset 0 1px 0 var(--surface-2); font-size: .94rem; color: var(--ink-2); }
.me-sign strong { color: var(--ink); }
@media (max-width: 760px) {
  .me-cols { display: none; }
  .me-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; }
  .me-row .me-to { grid-column: 1; grid-row: 2; color: var(--ink-2); font-size: .88rem; }
  .me-row .tag { grid-column: 2; grid-row: 1; }
  .me-row .num { grid-column: 1 / -1; text-align: left; display: flex; justify-content: space-between; font-size: .88rem; }
  .me-row .num::before { content: attr(data-label); color: var(--ink-2); }
  .mo-row, .me-sign { padding-inline: 16px; }
  .mo-tabs { padding-inline: 4px; }
  .mo-tab { padding-inline: 10px; }
}

/* 1g. the workspace switcher: three real screens behind three tabs. Without scripts (no .bs-on) the tabs stay hidden and the three
   screens stack, each under its title. With scripts: the tabs (chip style, 44 px, a thin accent progress line under the active one)
   sit left of the screen from 960 px with the active screen's words under them; on a phone they are one row above the screen and the
   words follow it. Screens crossfade over 400 ms; only the active one is visible to assistive tech. */
.board .ps-head .feat-label { margin-bottom: 8px; }
.bs-panel + .bs-panel { margin-top: var(--s-head); }
.bs-h { margin: 0 0 var(--s-text); font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.bs-txt { margin-bottom: var(--s-3); }
.bs-txt > p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.bs-fig { margin: 0; }
.bs.bs-on { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "fig" "txt"; row-gap: var(--s-3); }
.bs.bs-on .bs-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.bs.bs-on .bs-panel { display: contents; }
.bs.bs-on .bs-panel + .bs-panel { margin-top: 0; }
.bs.bs-on .bs-fig, .bs.bs-on .bs-txt { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; }
.bs.bs-on .bs-fig { grid-area: fig; }
.bs.bs-on .bs-txt { grid-area: txt; margin: 0; }
.bs.bs-on .is-active .bs-fig, .bs.bs-on .is-active .bs-txt { opacity: 1; visibility: visible; transition: opacity 400ms ease, visibility 0s; }
.bs.bs-on .bs-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bs-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: .98rem; font-weight: 600; cursor: pointer; overflow: hidden; text-align: left; }
.bs-tab:hover { background: var(--surface-2); color: var(--ink); }
.bs-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.bs-tab-ic { display: none; }
.bs-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .bs-run .bs-tab[aria-selected="true"] .bs-prog { animation: bs-time var(--bs-time, 6000ms) linear both; }
  .bs-run:hover .bs-tab[aria-selected="true"] .bs-prog, .bs-run.bs-paused .bs-tab[aria-selected="true"] .bs-prog { animation-play-state: paused; }
}
@keyframes bs-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 960px) {
  .bs.bs-on { grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "tabs fig" "txt fig"; grid-template-rows: auto 1fr; column-gap: var(--s-5); row-gap: var(--s-3); align-items: start; }
  .bs.bs-on .bs-tabs { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .bs-tab { justify-content: flex-start; min-height: 64px; padding: 10px 16px 10px 10px; font-size: 1.1rem; gap: 14px; }
  .bs-tab-ic { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border-radius: 10px; background: var(--surface-2); color: var(--accent); }
  .bs-tab[aria-selected="true"] .bs-tab-ic { background: var(--surface); }
  .bs-tab-ic svg { width: 22px; height: 22px; }
  .bs.bs-on .bs-txt > p { font-size: 1.1rem; }
}

/* sign-up and log-in (mock pages signup.html, login.html), composed as a page (frontend-design pass, 21 Oct 2026): the hero's own
   composition. The heading and the trial line run across the page; under them, two columns: the form (the one bordered block and the
   page's focus, 460 px) and a quieter column of what Pingtail does (plain tick lines, no panel) and one testimonial card. The facts
   close the page as a quiet line of four, icon and words, no tiles, so nothing competes with the form. One column on a phone: form
   first. Spacing: the --s-* tokens only. */
.auth { padding-block: var(--s-4) var(--s-section); }
.auth-back { margin: 0 0 var(--s-3); }
.auth-back a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.auth-back a::before { content: ""; width: 7px; height: 7px; margin-right: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.auth-head { margin-bottom: var(--s-5); }
.auth-head h1 { margin: 0; }
.auth-head .auth-trial { margin: var(--s-2) 0 0; max-width: none; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.auth-main { display: grid; gap: var(--s-3); max-width: 460px; }
.auth-form { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.fld { display: grid; gap: var(--s-1); }
.fld label { font-weight: 600; color: var(--ink); }
.fld input, .fld select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.fld input:hover, .fld select:hover { border-color: var(--ink-2); }
.fld input:focus-visible, .fld select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.fld-hint { margin: 0; font-size: .92rem; color: var(--ink-2); }
/* the terms box: a 22 px box drawn inside a 44 px pressable square (C4), the square pulled into the label's gutter */
.fld-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.fld-check input { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -9px 0 0 -10px; border: 0; background: none; cursor: pointer; }
.fld-check input::before { content: ""; box-sizing: border-box; width: 22px; height: 22px; border: 1.5px solid var(--ink-2); border-radius: 6px; background: var(--surface) no-repeat center / 14px 14px; }
.fld-check input:checked::before { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fld-check label { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.auth-submit { width: 100%; }
.auth-next { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.auth-next strong { color: var(--ink); font-weight: 600; }
.auth-alt { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin: 0; }
.auth-alt a { display: inline-flex; align-items: center; min-height: var(--tap); }
.auth-switch { margin: 0; color: var(--ink-2); }
.auth-switch a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
/* owner 21 Oct ~16:40: the cards first, their top level with the form top (no offset), the text below them */
.auth-side { display: grid; gap: var(--s-5); align-content: start; }
.auth-aside .feat-label { margin-bottom: var(--s-2); }
.auth-aside .does li { color: var(--ink-2); }
.auth-facts-band .feat-label { margin-bottom: var(--s-2); }
.auth-facts .feat-label { margin-bottom: var(--s-2); }
.auth-facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
.auth-facts-list li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; line-height: 1.35; }
.auth-fact-ic { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border-radius: 10px; background: var(--surface); color: var(--accent); }
.auth-fact-ic svg { width: 22px; height: 22px; }
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 600px) { .auth-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .auth-grid { grid-template-columns: 460px minmax(0, 1fr); column-gap: var(--s-6); }
  .auth-facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .auth { padding-top: var(--s-2); } .auth-head { margin-bottom: var(--s-4); } .auth-form { padding: var(--s-3); } }

/* the testimonial card (owner, 21 Oct 2026): one component, the same everywhere. Small on the home page (one quote beside the part of
   the page it speaks to), medium in the sign-up and log-in carousel. The card is the page's surface with the page's border and radius,
   no shadow. Its only ornament is a large opening quotation mark in the accent-soft family (Bricolage 300); the category is a small
   accent-soft chip; the words are Bricolage at lead size with tight leading, in ink; the person is a 32 px initial tile, the name in
   600 ink and the firm (or role) and country in ink-2 on the next line. Never a photo, a star or a count. */
.tq { position: relative; display: grid; gap: var(--s-2); align-content: start; margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.tq-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.tq-mark { display: block; flex: none; width: 40px; height: 30px; fill: color-mix(in srgb, var(--accent) 30%, var(--accent-soft)); }
.tq-chip { margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: var(--t-meta); font-weight: 650; line-height: 1.4; }
.tq-q { margin: 0; }
.tq-q p { margin: 0; font-size: clamp(1.08rem, 1rem + .3vw, 1.2rem); font-weight: 450; line-height: 1.45; letter-spacing: -.008em; color: var(--ink); }
.tq-who { display: flex; align-items: center; gap: 12px; margin-top: var(--s-1); }
.tq-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.tq-id { display: grid; gap: 1px; min-width: 0; line-height: 1.35; }
.tq-id strong { font-weight: 600; color: var(--ink); }
.tq-id span { font-size: .92rem; color: var(--ink-2); }
/* medium (the carousel): the words a step larger */
.tq-m .tq-q p { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); }
/* the one testimonial section on the home page: two cards side by side from 960 px, one on a phone; every card stacked in its column's
   one grid cell, so the section is as tall as the tallest card and nothing below moves; a slow crossfade (1.2 s) between pairs */
.vq { display: grid; gap: 0; }
.vq-anchor { display: block; height: 0; }
.vq-head { margin-bottom: var(--s-head); }
.vq-head .feat-label { margin-bottom: 8px; }
.vq-head h2 { margin: 0; max-width: none; }
.vq-slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.vq-slide:not(.is-on) { display: none; }
@media (min-width: 960px) { .vq-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vq.vq-on .vq-slide { display: grid; grid-row: 1; grid-column: 1; opacity: 0; visibility: hidden; transition: opacity 1200ms ease, visibility 0s linear 1200ms; }
.vq.vq-on .vq-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1200ms ease, visibility 0s; }
@media (min-width: 960px) { .vq.vq-on .vq-slide:nth-child(even) { grid-column: 2; } }
/* the same control row as the sign-up carousel: prev, the time line, next; under the cards, at the rhythm's row step */
.vq .rq-ctrl { margin-top: var(--s-4); }
.vq .rq-ctrl[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .vq-run .rq-bar i { animation: bs-time 10200ms linear both; }
  .vq-run:hover .rq-bar i, .vq-run:focus-within .rq-bar i { animation-play-state: paused; }
}

/* Everything in Pingtail (owner 21 Oct 2026 ~18:00): one white block on the grey band. The head (h2 and the total), then one row per
   group: the group name and its count as a button on the left, a track on the right where the group's capsules drift slowly sideways
   (a belt holding the capsules twice, moved by half its width; alternate rows run the other way; paused on hover and focus; still
   under reduced motion). The capsules are the hero chips' family (accent-soft surface, ink at 500), not the hero itself. A press opens
   the group's panel under its row: every capsule as a link with its sentence, in a grid; Close returns. Rows are split by the page's
   1 px surface line, not boxes. On a phone the name sits above its track. */
.eb { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: var(--s-4) var(--s-4) var(--s-2); }
.eb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.eb-head h2 { margin: 0; }
.eb-total { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-2); }
.eb-total span { font-size: 1.5em; font-weight: 750; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
/* the groups (owner 22 Oct 2026 ~22:35 IST): native <details>, closed by default, name + count on a 44 px summary; closed groups sit two or
   three to a line, an opened group takes the full width so its rows read as before */
.eb-groups { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; column-gap: var(--s-3); }
@media (min-width: 760px) { .eb-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eb-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eb-row { min-width: 0; box-shadow: inset 0 1px 0 var(--surface-2); scroll-margin-top: 96px; }
.eb-row[open] { grid-column: 1 / -1; padding-bottom: var(--s-3); }
.eb-g { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px 12px; margin: 4px 0; border-radius: 10px; color: var(--ink);
  font: 700 1.08rem/1.25 var(--font); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.eb-g::-webkit-details-marker { display: none; }
.eb-g::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); }
.eb-row[open] > .eb-g::after { transform: rotate(-135deg); }
.eb-g:hover { background: var(--surface-2); }
.eb-gname { min-width: 0; }
.eb-n { flex: none; min-width: 2em; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .85rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.eb-cap { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft);
  color: var(--ink); font-size: .92rem; font-weight: 500; line-height: 1.3; text-decoration: none; }
.eb-list { list-style: none; margin: var(--s-1) 0 0; padding: 0 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-3); }
@media (min-width: 760px) { .eb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eb-list li { display: grid; gap: 6px; align-content: start; }
.eb-cap-l { justify-self: start; min-height: var(--tap); white-space: normal; }
a.eb-cap-l:hover, a.eb-cap-l:focus-visible { border-color: var(--accent); color: var(--ink); }
span.eb-cap-l { background: var(--surface-2); border-color: var(--surface-2); }
.eb-list p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
@media (max-width: 600px) { .eb { padding: var(--s-3) var(--s-2) var(--s-1); } .eb-list { padding: 0 4px; } }

/* the carousel on sign-up and log-in: every card in one grid cell per column, so the box is as tall as the tallest card and nothing
   below moves; one card at a time on a phone, two side by side from 960 px; the time line under the cards, 44 px prev and next */
.rq { display: grid; gap: var(--s-2); align-content: start; padding: 0; }
.rq-h { margin: 0 0 var(--s-1); }
.rq-slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.rq-slide + .rq-slide { margin-top: 0; }
.rq.rq-on .rq-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; }
.rq.rq-on .rq-slide.is-on { opacity: 1; visibility: visible; transition: opacity 400ms ease, visibility 0s; }
.rq-ctrl { display: flex; align-items: center; gap: var(--s-2); }
.rq-btn { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.rq-btn:hover { border-color: var(--accent); color: var(--accent); }
.rq-btn svg { width: 20px; height: 20px; }
.rq-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rq-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .rq-run .rq-bar i { animation: bs-time 8000ms linear both; }
  .rq-run:hover .rq-bar i, .rq-run:focus-within .rq-bar i { animation-play-state: paused; }
}
@media (max-width: 600px) { .tq { padding: var(--s-3); } .tq-mark { width: 32px; height: 24px; } }

/* 1h. pricing (21 Oct 2026): the section head of every section; the price on the accent-soft panel (the problem rows' answer surface,
   --ps-panel), set in the hero's display weight; what is in it as rows with the client section's icon tiles; one fine-print line. */
.pricing { --ps-panel: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pricing { --ps-panel: var(--accent-soft); } }
:root[data-theme="dark"] .pricing { --ps-panel: var(--accent-soft); }
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: start; }
@media (min-width: 960px) { .pr-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pr-card { padding: var(--s-4); border-radius: var(--radius); background: var(--ps-panel); }
.pr-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pr-amt { font-size: clamp(3rem, 2rem + 3.6vw, 4.6rem); font-weight: 750; line-height: .95; letter-spacing: -.045em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pr-per { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.pr-after { margin: var(--s-2) 0 0; font-size: 1.15rem; color: var(--ink); }
.pr-after strong { font-weight: 700; }
.pr-final { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.pr-final a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pr-trial { margin: var(--s-3) 0 var(--s-3); padding-top: var(--s-3); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-2); max-width: 54ch; line-height: 1.55; }
.pr-card .cta-row { margin: var(--s-3) 0 0; gap: var(--s-2) var(--s-3); }
.pr-note { margin: var(--s-2) 0 0; }
.pr-in { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pr-in li { display: flex; gap: var(--s-2); align-items: flex-start; }
.pr-in .ps-ic { background: var(--ps-panel); }
.pr-in h3 { margin: 0 0 2px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; padding-top: 2px; }
.pr-in p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
.pr-fine { margin: var(--s-4) 0 0; font-size: var(--t-meta); color: var(--ink-2); }
@media (max-width: 600px) { .pr-card { padding: var(--s-3); } }

/* For the firm owner (21 Oct 2026): three lines in the pricing rows' family on the left, the Capacity picture in the browser frame on
   the right from 960 px; stacked on a phone, lines first. */
.practice { --ps-panel: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .practice { --ps-panel: var(--accent-soft); } }
:root[data-theme="dark"] .practice { --ps-panel: var(--accent-soft); }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: center; }
@media (min-width: 960px) { .pc-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); } }

/* C2. the cost benefit (21 Oct 2026): one white working surface on the grey band. The slider on top (the count in the display weight,
   a track filled in the accent up to the thumb via --pct from script.js, a 44 px tall input), three figures under it in a row from
   960 px; the saved figure is the one on the highlighter, the other two in ink. Figures are tabular so the row does not jump. */
.calc { padding: var(--s-4); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.calc-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-2); }
.calc-label { font-weight: 600; color: var(--ink); align-self: center; }
.calc-n { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.calc-range { grid-column: 1 / -1; width: 100%; height: var(--tap); margin: var(--s-1) 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --pct: 13.8%; }
.calc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--accent) var(--pct), var(--surface-2) var(--pct)); }
.calc-range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--surface-2); }
.calc-range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--accent); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(15, 27, 45, .18); }
.calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.calc-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent); }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent); }
.slider-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--ink-2); }
.calc-figs { margin: var(--s-4) 0 0; padding-top: var(--s-4); box-shadow: inset 0 1px 0 var(--surface-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
@media (min-width: 960px) { .calc-figs { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
.calc-fig dt { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-bottom: var(--s-1); color: var(--ink); }
.calc-save dt { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.4rem); }
.calc-save .marker { padding-inline: .14em; }
.calc-fig dd { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 40ch; }
.calc-fig dd strong { color: var(--ink); font-weight: 600; }
.calc-foot { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
.cost-fine { margin: 0; flex: 1 1 420px; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; }
@media (max-width: 600px) { .calc { padding: var(--s-3); } }

/* C4. security and C5. FAQ: heading left, content right */
.split-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .split-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
/* C4. security (21 Oct 2026): six facts, three by two from 960 px, two from 600 px; each the client section's icon tile (on the
   accent-soft panel, as on pricing), a 700 title and one ink-2 line. Grouped by spacing, no boxes (G56). */
.security { --ps-panel: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .security { --ps-panel: var(--accent-soft); } }
:root[data-theme="dark"] .security { --ps-panel: var(--accent-soft); }
.sec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-5); }
@media (min-width: 600px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-grid li { display: grid; gap: var(--s-2); align-content: start; }
.sec-grid .ps-ic { background: var(--ps-panel); }
.sec-grid h3 { margin: 0 0 var(--s-text); font-size: 1.15rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.sec-grid p { margin: 0; color: var(--ink-2); line-height: 1.55; max-width: 40ch; }
.sec-more { margin: var(--s-after) 0 0; }
/* C5. FAQ (21 Oct 2026): heading left (it stays in view while the folds scroll, from 960 px), the folds right; each fold a white
   surface on the grey band, the question in 600 ink, a 32 px accent-soft round tile with a plus drawn in CSS that turns into a minus. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-head) var(--s-5); align-items: start; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } .faq-head { position: sticky; top: 104px; } }
.faq-head .feat-label { margin-bottom: 8px; }
.faq-head h2 { margin: 0; max-width: 14ch; }
.fq-list { display: grid; gap: var(--s-1); }
.fq { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.fq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 64px; padding: 12px var(--s-3); font-weight: 600; font-size: 1.05rem; line-height: 1.4; color: var(--ink); cursor: pointer; list-style: none; border-radius: var(--radius); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover .fq-ic { background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft)); }
.fq-ic { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); transition: background-color .15s ease; }
.fq-ic::before, .fq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--accent); transition: transform .2s ease; }
.fq-ic::after { transform: rotate(90deg); }
.fq[open] .fq-ic::after { transform: rotate(0deg); }
.fq p { margin: 0; padding: 0 var(--s-3) var(--s-3); max-width: 62ch; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 600px) { .fq summary { padding-inline: var(--s-2); } .fq p { padding-inline: var(--s-2); } }

/* C6. final call (21 Oct 2026): the page's one dark band, left aligned as every section; the heading in the hero's two tones (the
   second line in the band's own light accent, #a9c2ff on #0b1730), the line and buttons beside it from 960 px. */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: end; }
@media (min-width: 960px) { .cta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.cta-band h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.06; letter-spacing: -.028em; }
.cta-band .cta-accent { color: #a9c2ff; }
.cta-band .lead { margin: 0 0 var(--s-3); color: rgba(232, 235, 240, .86); }
.cta-band .cta-row { margin: 0; gap: var(--s-2) var(--s-3); }
.cta-band .btn:not(.btn-ghost) { background: #fff; border-color: #fff; color: var(--surface-dark); }
.cta-band .btn:not(.btn-ghost):hover { background: #e4ebfa; border-color: #e4ebfa; color: var(--surface-dark); }
.cta-band .link-arrow { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.cta-band :focus-visible { outline-color: #a9c2ff; }

/* C7. footer, as the live site (base.html): brand and about line, Product, Learn, Legal, Help; theme, cookie settings, copyright */
.site-footer { background: var(--surface); padding-top: var(--s-6); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.footer-grid > .foot-about { grid-column: 1 / -1; max-width: 36ch; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .footer-grid > .foot-about { grid-column: auto; } }
.site-footer .brand { font-size: 1.25rem; margin-bottom: var(--s-1); }
.site-footer .brand + p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.footer-h { font-size: .95rem; font-weight: 700; margin: 10px 0 var(--s-1); letter-spacing: 0; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul a { color: var(--ink-2); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; line-height: 1.3; }
.site-footer ul a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { margin-top: var(--s-5); padding-block: var(--s-3); box-shadow: inset 0 1px 0 var(--surface-2); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; }
.footer-bottom p { margin: 0; color: var(--ink-2); }
.footer-bottom label { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom select { min-height: var(--tap); padding: 4px 10px; font: inherit; font-size: .92rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.footer-bottom .foot-copy { margin-left: auto; }
.footer-bottom .btn-link { background: none; border: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap); padding: 0; }
@media (max-width: 600px) { .footer-bottom .foot-copy { margin-left: 0; width: 100%; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* real product screenshots (preview test firm): the live site's browser frame, a soft shadow; the picture is never cropped by CSS */
.browser-frame { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 50px rgba(22, 32, 46, .14); min-width: 0; }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--surface-2); }
.browser-bar i { width: 10px; height: 10px; border-radius: 999px; background: var(--line); flex: none; }
.browser-bar span { margin-left: 10px; flex: 1; min-width: 0; font-size: .78rem; color: var(--ink-2); background: var(--surface); border-radius: 6px; padding: 2px 10px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot img { display: block; width: 100%; height: auto; }
.browser-frame figcaption { padding: 12px 16px; font-size: var(--t-meta); color: var(--ink-2); }
.ph-shot .ph-screen { padding-top: 34px; background: #fff; }
.ph-shot img { display: block; width: 100%; height: auto; }

/* One pass of attention, 2.5 s after load (script.js), once: each "does" phrase brightens in turn (450 ms, 550 ms apart), then the six
   "How it stays yours" chips shake one at a time in reading order (left to right, row by row): a gentle sideways shake (about 2 px,
   3.5 cycles over 1.5 s, easing out) with the border in the full accent while it shakes, slow enough to read the chip; the next starts
   when the previous stops, about 9 s for the six. Transform and border colour only, so nothing moves in the layout; none with reduced
   motion. (Owner, 20 Oct 2026: keep the shake, slower, so each chip can be read.) */
@media (prefers-reduced-motion: no-preference) {
  .chip-f.hl { animation: chip-shake 1500ms ease-in-out both; animation-delay: var(--hl-delay, 0ms); }
  .does em.hl { animation: hl-phrase 450ms ease-in-out both; animation-delay: var(--hl-delay, 0ms); }
}
@keyframes chip-shake {
  0% { transform: translateX(0); border-color: var(--accent-soft); }
  6% { border-color: var(--accent); }
  14% { transform: translateX(-2px); }
  28% { transform: translateX(2px); }
  42% { transform: translateX(-2px); }
  56% { transform: translateX(1.5px); }
  70% { transform: translateX(-1px); }
  84% { transform: translateX(.5px); }
  94% { border-color: var(--accent); }
  100% { transform: translateX(0); border-color: var(--accent-soft); }
}
@keyframes hl-phrase {
  0%, 100% { color: var(--accent); background-color: transparent; box-shadow: 0 0 0 3px transparent; }
  45% { color: var(--accent-deep); background-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
}

/* The highlighter band, one rule for every <mark class="marker"> on the page (owner, 20 Oct 2026): a --marker stroke behind the words,
   slanted at both ends like a marker tip, drawn as a background so a band can wrap onto a second line. With scripts on and motion allowed,
   script.js arms the page and each band paints in left to right (1 s, the hero's easing) the first time it is fully in view, once, and
   stays; the hero's band waits 1 s after load. No script or reduced motion: the band is simply there. */
.nowrap { white-space: nowrap; }
mark.marker { background-color: transparent; color: var(--marker-ink, inherit); }
.marker { padding-inline: .28em; margin-inline: -.1em; border-radius: 4px;
  background-image: linear-gradient(100deg, transparent .2em, var(--marker) .2em, var(--marker) calc(100% - .2em), transparent calc(100% - .2em));
  background-repeat: no-repeat; background-position: 0 70%; background-size: 100% 76%; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
@media (prefers-reduced-motion: no-preference) {
  .mk-armed .marker { background-size: 0% 76%; }
  .mk-armed .marker.is-drawn { animation: marker-paint 1000ms cubic-bezier(.3, .7, .3, 1) both; }
}
@keyframes marker-paint {
  from { background-size: 0% 76%; }
  to { background-size: 100% 76%; }
}
/* --- Added in the build (landing build); the mock had no server, so these groups are new. ----------------------------------- */
/* The cookie banner (logic in /static/tags.js; rendered only when a tag is enabled) in this design's tokens. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); color: var(--ink); border-top: 2px solid var(--accent);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12); padding-block: 16px; max-height: 80vh; overflow-y: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-title { font-size: 1.05rem; margin: 0 0 4px; }
.cookie-banner p { margin: 0 0 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn:not(.btn-ghost) { background: var(--surface); color: var(--ink); border-color: var(--ink-2); }
.cookie-prefs fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.cookie-prefs .field { margin-bottom: 8px; }
.cookie-prefs .hint { display: block; color: var(--ink-2); }
@media (max-width: 560px) {
  .cookie-banner { padding-block: 12px; max-height: 70vh; }
  .cookie-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cookie-detail { display: none; }
  .cookie-actions { gap: 8px; flex-wrap: nowrap; }
  .cookie-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: .875rem; white-space: nowrap; }
  body:has(#cookie-banner:not([hidden])) { padding-bottom: 230px; }
}
/* A refusal on the sign-up and log-in forms (the server's error box) and the resend button. */
.auth-errors { border: 1px solid var(--bad); border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; color: var(--ink); background: var(--surface); }
.auth-errors p { margin: 0 0 4px; }
.auth-errors ul { margin: 0; padding-left: 1.2em; }
.auth-resend { margin-top: 16px; }
/* The sign-in-with-Intuit / Xero buttons under the form (signin.css styles the buttons themselves). */
.signin-alt { margin-top: 16px; }
.signin-or { margin: 0 0 8px; color: var(--ink-2); }
.preview-ribbon { min-height: 28px; display: flex; align-items: center; justify-content: center; padding: 4px 16px; background: var(--surface-2); color: var(--ink-2); font-size: .85rem; }
.footer-bottom a.btn-link { display: inline-flex; align-items: center; }
.pc-grid + .pc-grid { margin-top: var(--sp-section-tight); }

/* /pricing in the landing design (Fable 23 Oct 2026): the price table and the comparison, site tokens only */
.pt-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.pt-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.pt-table th, .pt-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--surface-2); min-height: var(--tap); }
.pt-table thead th { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.pt-table tbody th { font-weight: 600; }
.pt-cmp td { text-align: center; } .pt-cmp thead th { text-align: center; } .pt-cmp thead th:first-child { text-align: left; }
.pt-cmp .pt-us { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.pt-twenty { margin: var(--s-3) 0 0; font-weight: 600; }
.pt-steps { margin-top: 0; }
.pricing-page h1 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); margin: 0; }