/* ═══════════════════════════════════════════════════════════════════════════
   Chalmsy — marketing site
   Built to the official brand spec (chalmsy logo/handoff/BRAND.md):
   dark warm-charcoal ground, antique Florentine gold, Source Serif 4 display +
   DM Sans UI + IBM Plex Mono. "Your Business Butler." No build step — plain CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ── Brand tokens (from BRAND.md §2) ───────────────────────────────────── */
:root {
  /* Dark palette — primary */
  --bg:        #1A1714;   /* warm charcoal */
  --bg-deep:   #100D0B;   /* deeper charcoal, panels */
  --bg-light:  #221E1A;   /* lifted charcoal */
  --bg-lift:   #2A251F;   /* cards */

  --gold:      #B8975A;   /* antique Florentine gold — primary brand */
  --gold-soft: #D4B078;   /* lighter gold, accents */
  --gold-deep: #9A7C45;
  --gold-faint:#FAF1DC;   /* faintest cream gold */

  --fg:        #FFFDF9;   /* primary text on dark */
  --fg-dim:    rgba(255,253,249,.72);
  --fg-faint:  rgba(255,253,249,.56);
  --warm:      #8B8470;   /* warm gray secondary — on DARK grounds only */
  --warm-lift:  #A39B85;   /* AA-safe on --bg-lift (5.49:1); do not use on --bone */
  --gold-ink:   #7E6434;   /* AA-safe gold on the light bone frames (4.87:1) */

  --line:      rgba(139,132,112,.22);
  --line-2:    rgba(139,132,112,.38);
  --gold-glow: rgba(184,151,90,.16);

  /* Bone (light) — used sparingly for product frames */
  --bone:      #F4EFE3;
  --bone-2:    #EFEAE0;
  --bone-line: #E2DBCB;
  --bone-ink:  #1B1D1F;
  --bone-warm: #6B6560;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1180px;
  --gut: clamp(24px, 6vw, 48px);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-dim);
  background: var(--bg);
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--bg); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 760px; }

section { position: relative; }
.pad { padding-block: clamp(72px, 10vw, 132px); }
.pad-sm { padding-block: clamp(48px, 7vw, 84px); }

.bg-deep  { background: var(--bg-deep); }
.bg-light { background: var(--bg-light); }
.bordered { border-block: 1px solid var(--line); }

/* ── Type ──────────────────────────────────────────────────────────────── */
/* Leading and tracking are set PER LEVEL. A single line-height:1.1 was
   governing everything from an 88px display H1 down to a 20px H4 — correct
   for the largest, suffocating for the smallest. On a 32px mobile H2 the
   descenders were reaching into the next line's cap-height. This is the
   root of the 'compressed' complaint. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1.06; letter-spacing: -.028em; }
h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -.020em; }
h3 { font-size: clamp(21px, 2.5vw, 28px); line-height: 1.26; letter-spacing: -.012em; }
h4 { font-size: 20px;                     line-height: 1.32; letter-spacing: -.008em; }

.italic  { font-style: italic; color: var(--gold-soft); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); opacity: .9;
  margin-bottom: 20px;
}

.lede { font-size: clamp(20px, 5.2vw, 22px); line-height: 1.55; color: var(--fg-dim); font-weight: 400; }
.muted { color: var(--warm); }
.small { font-size: 14.5px; }
.tiny  { font-size: 12.5px; }

.rule { width: 54px; height: 1px; background: var(--gold); opacity: .55; margin: 22px 0; }
.rule.center { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .005em;
  border-radius: 100px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-primary { background: var(--gold); color: var(--bg); box-shadow: 0 6px 20px var(--gold-glow); }
.btn-primary:hover { background: var(--gold-soft); box-shadow: 0 10px 30px var(--gold-glow); }

.btn-ghost { border-color: var(--line-2); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(184,151,90,.06); }

.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row.center { justify-content: center; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26,23,20,.72);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(16,13,11,.86); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-word { font-family: var(--sans); font-size: 22px; font-weight: 500; color: var(--fg); letter-spacing: -.025em; line-height: 1; text-transform: lowercase; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; color: var(--fg-dim); transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--gold-soft); }
.nav-links a[aria-current="page"] { color: var(--gold-soft); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; }
.nav-toggle:hover { background: rgba(255,253,249,.06); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 19px; height: 1.5px; background: var(--fg); position: relative;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep); border-bottom: 1px solid var(--line);
    padding: 12px var(--gut) 24px;
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav-links a:last-child { border-bottom: 0; }
  /* A-01: this rule hid the sign-in control on mobile, but it matched .btn-ghost
     and the button was later renamed .btn-login — leaving it DEAD. The header
     then overflowed and pushed the hamburger fully off-screen, making nav
     unreachable on every phone. Login moves into the drawer, never vanishes. */
  .nav-cta .btn-login { display: none; }
  .nav-links .nav-login-m { color: var(--gold-soft); }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.hero-mark {
  width: clamp(180px, 34vw, 300px); margin: 0 auto clamp(28px, 4vw, 44px);
  /* On a phone the mark was eating ~30% of the first viewport and pushing
     the category sentence below the fold; brand present, smaller. */
  opacity: .95;
  filter: drop-shadow(0 8px 30px rgba(184,151,90,.22));
}
@media (max-width: 560px) {
  .hero-mark { width: 150px; margin-bottom: 18px; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 44% at 50% 8%, rgba(184,151,90,.16), transparent 70%),
    radial-gradient(ellipse 42% 30% at 82% 4%, rgba(212,176,120,.08), transparent 72%);
  pointer-events: none;
}
.hero h1 { max-width: 13ch; margin-inline: auto; }
.hero .lede { max-width: 56ch; margin: 26px auto 0; }
.hero .btn-row { margin-top: 38px; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--warm); font-family: var(--mono); letter-spacing: .02em; }

/* ── Product frame (light UI on the dark ground) ───────────────────────── */
.frame {
  border-radius: var(--r-lg);
  background: var(--bone);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--bone-ink);
}
.frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--bone-2);
  border-bottom: 1px solid var(--bone-line);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #C8C2BB; flex-shrink: 0; }
.dot:nth-child(1) { background: #D6A79E; }
.dot:nth-child(2) { background: #D9C28F; }
.dot:nth-child(3) { background: #A6BDA3; }
.frame-url {
  margin-left: 10px; flex: 1;
  font-family: var(--mono); font-size: 11.5px; color: var(--bone-warm);
  background: var(--bone); border: 1px solid var(--bone-line); border-radius: 100px;
  padding: 4px 14px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame-body { background: var(--bone); }
.hero-frame { margin-top: clamp(40px, 6vw, 68px); }

/* Real product screenshots -------------------------------------------------
   Same visual weight as .frame, but no title bar: these are photographs of the
   app, so anything resembling browser chrome would be a lie about where they
   came from. Caption sits under the image, with the disclosure chip inline. */
.shot { display: block; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg); background: var(--bone);
}
.shot figcaption {
  margin-top: 13px; font-size: 13.5px; line-height: 1.5; color: var(--warm);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.shot-wide { margin-top: clamp(28px, 4vw, 44px); }
/* Synthetic-data disclosure chip */
.synthetic {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--bone-warm);
  background: var(--bone-2); border: 1px solid var(--bone-line);
  border-radius: 100px; padding: 5px 13px;
}
.synthetic::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ── App mock internals (light) ────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 210px 1fr; min-height: 440px; text-align: left; }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .app-side { display: none; } }
.app-side { background: var(--bone-2); border-right: 1px solid var(--bone-line); padding: 18px 12px; }
.app-side .side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 16px; }
.app-side .side-brand span { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--gold-deep); letter-spacing: -.02em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--bone-warm); }
.nav-item.active { background: var(--bone); color: var(--bone-ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); font-weight: 500; }
.nav-item i { width: 15px; text-align: center; font-style: normal; opacity: .75; }
.app-main { padding: 22px 24px; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.app-title { font-family: var(--serif); font-size: 25px; color: var(--bone-ink); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 11px; margin-bottom: 20px; }
.metric { background: var(--bone-2); border: 1px solid var(--bone-line); border-radius: var(--r-md); padding: 13px 15px; }
.metric-l { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-warm); }
.metric-v { font-family: var(--serif); font-size: 26px; margin-top: 4px; line-height: 1.1; color: var(--bone-ink); }
.metric-s { font-size: 11.5px; color: var(--bone-warm); margin-top: 2px; }
.metric-v.pos { color: #5A7A5A; }

table.mock { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--bone-ink); }
table.mock th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--bone-warm); padding: 9px 10px; border-bottom: 1px solid var(--bone-line); }
table.mock td { padding: 11px 10px; border-bottom: 1px solid var(--bone-line); }
table.mock tr:last-child td { border-bottom: 0; }
table.mock td.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.pill-gold  { background: rgba(184,151,90,.16); color: var(--gold-ink); }
.pill-green { background: #E8F0E8; color: #4C6B4C; }
.pill-gray  { background: var(--bone-2); color: var(--bone-warm); }

.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
.kan-col { background: var(--bone-2); border-radius: var(--r-md); padding: 10px; min-height: 190px; }
.kan-h { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--bone-warm); margin-bottom: 9px; display: flex; justify-content: space-between; }
.kan-card { background: var(--bone); border: 1px solid var(--bone-line); border-radius: var(--r-sm); padding: 10px 11px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kan-card .n { font-size: 13px; margin-bottom: 3px; color: var(--bone-ink); }
.kan-card .d { font-size: 11.5px; color: var(--bone-warm); }
.kan-card .v { font-family: var(--mono); font-size: 12px; color: var(--gold-ink); margin-top: 6px; }

/* ── Trust strip ───────────────────────────────────────────────────────── */
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(22px, 3vw, 34px); text-align: center; }
.strip-v { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: var(--gold-soft); }
.strip-l { font-size: 13.5px; color: var(--fg-dim); margin-top: 10px; letter-spacing: .01em; }

/* ── Grids ─────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
/* Five cards, laid out 3 + 2. Five equal columns measured ~160px each, which
   wrapped every heading onto two or three lines and cut body copy to roughly
   18 characters — narrower than the card is tall. Three columns give ~360px:
   headings sit on one line and the paragraphs read properly. */
.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g5 .card h3 { min-height: 0; }
@media (max-width: 900px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g5 { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fg-dim); font-size: 15.5px; }
a.card { display: block; }

.icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gold-glow); color: var(--gold-soft);
  font-size: 21px; margin-bottom: 18px;
}

/* ── Alternating feature rows ──────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.flip .split-copy { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split.flip .split-copy { order: 0; } }

/* ── Checklist — hanging indent (marker is absolutely positioned) ──────────
   IMPORTANT: do NOT rebuild this as `display:grid; grid-template-columns:20px 1fr`.
   That was the original bug: an <li> like `<b>Lead.</b> then more text` has the
   bold and the trailing text node as SEPARATE grid items, so the text got
   auto-placed into the 20px column and wrapped one word per line. A hanging
   indent keeps all inline content in normal flow. */
.checks { list-style: none; margin-top: 24px; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; font-size: 15.5px; color: var(--fg-dim); }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-glow); color: var(--gold-soft);
  display: grid; place-items: center; font-size: 12px;
}
.checks li b { color: var(--fg); font-weight: 500; }

/* ── Steps ─────────────────────────────────────────────────────────────── */
/* Long-form guide prose ---------------------------------------------------
   The guides are the only pages with multi-paragraph body copy, so they need
   the vertical rhythm, list indents and VISIBLE links that the global reset
   (margin:0 everywhere, a{color:inherit;text-decoration:none}) strips for the
   landing pages. Scoped to .prose so nothing else moves. */
.prose { font-size: 17px; line-height: 1.7; color: var(--fg-dim); }
.prose > * + * { margin-top: 18px; }
.prose h3 { font-size: 22px; margin-top: 34px; }
.prose .checks { margin-top: 22px; }
.prose ol { padding-left: 22px; display: grid; gap: 14px; }
.prose ol li { padding-left: 6px; }
.prose ol li::marker { color: var(--gold); }
.prose ul:not(.checks) { padding-left: 22px; display: grid; gap: 12px; }
.prose ul:not(.checks) li::marker { color: var(--gold); }
.prose b, .prose strong { color: var(--fg); font-weight: 500; }
.prose a, .faq .ans a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, .faq .ans a:hover { color: var(--gold); }
.steps { counter-reset: s; display: grid; gap: clamp(24px, 3vw, 34px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; position: relative; padding-top: 56px; }
.step::before { content: counter(s, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: 42px; color: var(--gold); opacity: .55; line-height: 1; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--fg-dim); font-size: 15.5px; }

/* ── Quote ─────────────────────────────────────────────────────────────── */
.quote { max-width: 860px; margin-inline: auto; text-align: center; }
.quote blockquote { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 38px); line-height: 1.34; font-style: italic; color: var(--fg); }
.quote figcaption { margin-top: 24px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--warm); }

/* ── Pricing tiers ─────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1040px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.tier {
  background: var(--bg-lift); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display: flex; flex-direction: column;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier.featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.tier.featured::before {
  content: "Most popular"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--bg);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px; white-space: nowrap;
}
.tier-name { font-family: var(--serif); font-size: 25px; color: var(--fg); }
.tier-desc { font-size: 13.5px; color: var(--warm-lift); margin-top: 6px; min-height: 40px; }
.tier-price { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 4px; }
.tier-price .amt { font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--fg); }
.tier-price .per { font-size: 13.5px; color: var(--warm-lift); }
.tier-bill { font-family: var(--mono); font-size: 11.5px; color: var(--warm-lift); letter-spacing: .02em; }
.tier ul { list-style: none; margin: 22px 0; display: grid; gap: 11px; flex: 1; align-content: start; }
.tier li { position: relative; padding-left: 24px; font-size: 14px; color: var(--fg-dim); }
.tier li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 12px; }
.tier li.off { opacity: .4; }
.tier li.off::before { content: "—"; color: var(--warm-lift); }
.tier .btn { width: 100%; }

/* DRAFT pricing markers */
.draft-banner {
  background: var(--gold-glow); border: 1px dashed var(--gold);
  border-radius: var(--r-md); padding: 14px 20px;
  font-size: 14px; color: var(--gold-soft); text-align: center; margin-bottom: 34px;
}
.draft-banner b { color: var(--fg); font-weight: 500; }
.tag-draft {
  display: inline-block; vertical-align: middle;
  background: var(--gold); color: var(--bg);
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; margin-left: 8px;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-family: var(--serif); font-size: 21px; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--gold); transition: transform .3s var(--ease); font-family: var(--sans); font-weight: 300; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .ans { padding-bottom: 24px; color: var(--fg-dim); font-size: 15.5px; max-width: 68ch; }
.faq .ans p + p { margin-top: 12px; }
.faq .ans a { color: var(--gold-soft); }

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lede { max-width: 54ch; margin: 20px auto 0; }
.cta-band .btn-row { margin-top: 32px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--bg-deep); color: var(--fg-faint); padding-block: clamp(48px, 6vw, 74px) 34px; font-size: 14.5px; border-top: 1px solid var(--line); }
.foot a { color: var(--fg-faint); transition: color .2s; }
.foot a:hover { color: var(--gold-soft); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; }
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Five children in two columns leaves the last link column orphaned beside
     nothing; spanning the brand block keeps the four link columns in tidy 2×2. */
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 400; }
.foot ul { list-style: none; display: grid; gap: 11px; }
.foot .brand-word { color: var(--fg); }
.foot-tag { font-family: var(--serif); font-style: italic; color: var(--gold-soft); font-size: 17px; }
/* Guides row — the four long-form articles, kept out of the five-column grid
   above so the 2x2 mobile collapse still works. */
.foot-guides { margin-top: 40px; }
.foot-guides p { margin-top: 10px; font-size: 14px; line-height: 2; }
.foot-guides .sep { color: var(--line); margin: 0 4px; }
.foot-bottom { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--warm); }

/* ── Reveal on scroll — progressive enhancement (see site.js) ──────────────
   Content is visible by default. Hidden state applies ONLY once JS confirms
   it can reverse it. Never invert this — a broken observer must not blank
   the page. */
.reveal { opacity: 1; transform: none; }
.js-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover, .tier:hover { transform: none; }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.center { text-align: center; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: clamp(22px, 3vw, 32px); } .mt-4 { margin-top: clamp(28px, 4vw, 48px); }
.mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: clamp(22px, 3vw, 32px); } .mb-4 { margin-bottom: clamp(28px, 4vw, 48px); }
.maxw-60 { max-width: 60ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: var(--bg); padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }

/* ═══ CUSTOMER LOGIN ═════════════════════════════════════════════════════
   Existing customers were missing this. It was a btn-ghost, which on a dark
   header reads as a label rather than a control — people looking to sign in
   scanned straight past it. Outlined in gold so it is unmistakably a button,
   while still sitting behind the primary "Start free" call to action. */
.btn-login {
  background: rgba(184,151,90,.10);
  color: var(--gold-soft);
  border: 1px solid var(--gold-deep);
}
.btn-login:hover { background: rgba(184,151,90,.20); color: var(--fg); border-color: var(--gold); }

/* ═══ WHITE-LABEL DEMONSTRATOR ═══════════════════════════════════════════
   Every surface below is coloured from CSS custom properties scoped to #wl,
   so switching data-brand restyles the app, the proposal and the invoice in
   one move. That simultaneity IS the argument — a tenant does not brand the
   software and then separately brand their documents, it is one setting.

   The default palette is deliberately Chalmsy's own dark charcoal + gold and
   every other palette is light, so before/after is unmistakable rather than a
   subtle hue shift. The type faces are the real presets the product ships in
   Brand Hub, not invented ones. */
/* Each brand carries a real logomark, not a letter in a box. They're drawn as
   SVG masks rather than images so the mark takes --w-accent automatically and
   can never drift out of step with the palette — the same discipline a real
   brand kit uses. Marks are chosen to read as that trade at a glance: a leaf
   for the floral studio, an arch for the interior designer, ascending bars
   for the consultancy, and Chalmsy's own rhombic plinth for the default. */
#wl {
  --w-bg:#2A251F; --w-panel:#221E1A; --w-ink:#FFFDF9; --w-dim:rgba(255,253,249,.62);
  --w-accent:#B8975A; --w-line:rgba(184,151,90,.24);
  --w-font:'Source Serif 4',Georgia,serif; --w-track:.02em; --w-caps:none;
  --w-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M16 1 31 16 16 31 1 16Zm0 6.2L7.2 16 16 24.8 24.8 16Z'/%3E%3Cpath d='M16 12.2 19.8 16 16 19.8 12.2 16Z'/%3E%3C/svg%3E");
}
#wl[data-brand="wren"] {
  --w-bg:#F6F4EF; --w-panel:#FFFFFF; --w-ink:#2E3A31; --w-dim:rgba(46,58,49,.60);
  --w-accent:#6F8F6B; --w-line:rgba(46,58,49,.14);
  --w-font:'Cormorant Garamond',Georgia,serif; --w-track:.06em; --w-caps:none;
  --w-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2c7 5.2 9.4 13.6 5.6 20.2C19.4 26 17.6 27.6 16 30c-1.6-2.4-3.4-4-5.6-7.8C6.6 15.6 9 7.2 16 2Zm0 4.6c-4.6 4.2-6.2 10.4-3.6 15.2 1.2 2.2 2.4 3.6 3.6 5.2Z'/%3E%3Crect x='15.1' y='9' width='1.8' height='20' rx='.9'/%3E%3C/svg%3E");
}
#wl[data-brand="marlowe"] {
  --w-bg:#FBF7F4; --w-panel:#FFFFFF; --w-ink:#2A211C; --w-dim:rgba(42,33,28,.58);
  --w-accent:#B45C38; --w-line:rgba(42,33,28,.13);
  --w-font:'Playfair Display',Georgia,serif; --w-track:.04em; --w-caps:none;
  --w-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 30V15a13 13 0 0 1 26 0v15h-4.4V15a8.6 8.6 0 0 0-17.2 0v15Z'/%3E%3Crect x='14.2' y='19' width='3.6' height='11'/%3E%3C/svg%3E");
}
#wl[data-brand="northbank"] {
  --w-bg:#F4F6F9; --w-panel:#FFFFFF; --w-ink:#17212E; --w-dim:rgba(23,33,46,.58);
  --w-accent:#2F62C4; --w-line:rgba(23,33,46,.12);
  --w-font:'DM Sans',system-ui,sans-serif; --w-track:.10em; --w-caps:uppercase;
  --w-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='20' width='6.4' height='10' rx='1.4'/%3E%3Crect x='12.8' y='12' width='6.4' height='18' rx='1.4'/%3E%3Crect x='23.6' y='2' width='6.4' height='28' rx='1.4'/%3E%3C/svg%3E");
}

.wl-switch { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:34px 0 10px; }
.wl-chip {
  font: inherit; font-size:13.5px; cursor:pointer; padding:8px 16px; border-radius:999px;
  background:transparent; color:var(--fg-dim); border:1px solid var(--line-2); transition:all .18s;
}
.wl-chip:hover { color:var(--fg); border-color:var(--gold-deep); }
.wl-chip.is-on { background:var(--gold); color:var(--bg); border-color:var(--gold); font-weight:500; }
.wl-hint { text-align:center; font-size:13px; color:var(--fg-faint); margin:0 0 22px; min-height:20px; }

.wl { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:stretch; }
.wl > .wl-card:first-child { grid-row: 1 / span 2; }
.wl-card { display:flex; flex-direction:column; margin:0; }
.wl-card > .wl-app, .wl-card > .wl-doc { flex:1; }
@media (max-width: 900px) { .wl { grid-template-columns:1fr; } }
.wl-card { margin:0; }
.wl-cap {
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:8px;
}
/* The 600ms transition is the whole point — you SEE it become theirs. */
.wl-app, .wl-doc {
  background:var(--w-bg); border:1px solid var(--w-line); border-radius:10px;
  overflow:hidden; transition:background .6s ease, border-color .6s ease;
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.28);
}
.wl-app { display:grid; grid-template-columns:132px minmax(0,1fr); }
.wl-side { background:var(--w-panel); border-right:1px solid var(--w-line); padding:14px 12px; display:flex; flex-direction:column; gap:7px; transition:background .6s ease; }
.wl-logo { display:flex; align-items:flex-start; gap:7px; margin-bottom:8px; min-width:0; }
/* The mark is the accent colour showing through an SVG mask, so palette and
   logo can never disagree — change the brand and both move together. */
.wl-mark {
  width:22px; height:22px; flex:none; background:var(--w-accent);
  -webkit-mask:var(--w-logo) no-repeat center / contain;
          mask:var(--w-logo) no-repeat center / contain;
  transition:background .6s ease;
}
.wl-name {
  font-family:var(--w-font); font-size:14px; font-weight:500; color:var(--w-ink);
  letter-spacing:var(--w-track); text-transform:var(--w-caps); line-height:1.2;
  transition:color .6s ease; white-space:normal; overflow-wrap:break-word; min-width:0;
}
/* On the documents the lockup carries more weight, as a letterhead would. */
.wl-doc-head .wl-mark { width:26px; height:26px; }
.wl-doc-head .wl-name { font-size:16px; }
.wl-nav { font-size:12px; color:var(--w-dim); padding:3px 0; transition:color .6s ease; }
.wl-nav.is-on { color:var(--w-accent); font-weight:600; background:var(--w-bg);
  border-radius:6px; margin:0 -8px; padding:3px 8px; }
.wl-main { padding:14px 14px 16px; }
.wl-h { font-family:var(--w-font); font-size:18px; color:var(--w-ink); margin-bottom:10px; transition:color .6s ease; }
.wl-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.wl-tile { background:var(--w-panel); border:1px solid var(--w-line); border-radius:7px; padding:8px 9px; transition:background .6s ease, border-color .6s ease; }
.wl-tile b { display:block; font-family:var(--w-font); font-size:20px; color:var(--w-accent); transition:color .6s ease; }
.wl-tile i { font-style:normal; font-size:11px; color:var(--w-dim); letter-spacing:.05em; text-transform:uppercase; }
/* A real-looking booking list. Grey placeholder bars read as a wireframe;
   actual rows with names, stages and values read as software. */
.wl-list { border-top:1px solid var(--w-line); }
.wl-item {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--w-line); font-size:12.5px;
}
.wl-item > span { color:var(--w-ink); transition:color .6s ease; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-item em { font-style:normal; font-size:11px; color:var(--w-dim); letter-spacing:.02em; }
.wl-item b { font-family:var(--w-font); font-size:13px; color:var(--w-accent); transition:color .6s ease; }
.wl-copy { font-size:12px; line-height:1.55; color:var(--w-dim); margin:0 0 10px; }

.wl-doc { padding:18px 18px 20px; display:flex; flex-direction:column; }
.wl-doc-head { display:flex; align-items:center; gap:7px; padding-bottom:10px; border-bottom:2px solid var(--w-accent); margin-bottom:12px; transition:border-color .6s ease; }
.wl-doc-title { font-family:var(--w-font); font-size:17px; color:var(--w-ink); transition:color .6s ease; }
.wl-doc-sub { font-size:12px; color:var(--w-dim); margin-bottom:12px; }
.wl-line { height:6px; border-radius:99px; background:var(--w-line); margin-bottom:7px; }
.wl-line.short { width:62%; }
.wl-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--w-dim); padding:5px 0; border-bottom:1px solid var(--w-line); }
.wl-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; padding-top:14px; padding-top:10px; border-top:1px solid var(--w-line); }
.wl-total > span { font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--w-dim); }
.wl-total b { font-family:var(--w-font); font-size:24px; color:var(--w-accent); transition:color .6s ease; }

.wl-foot { font-size:13px; color:var(--fg-faint); margin-top:20px; }
.wl-illus { display:inline-block; margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:99px; padding:2px 8px; }

@media (prefers-reduced-motion: reduce) {
  .wl-app, .wl-doc, .wl-side, .wl-tile, .wl-name, .wl-h, .wl-mark,
  .wl-doc-title, .wl-total b, .wl-tile b, .wl-doc-head,
  .wl-nav, .wl-item > span, .wl-item b, .wl-avatar, .wl-stat { transition: none; }
}


/* ═══ MOBILE REMEDIATION (audit pass 1, section A) ═══════════════════════
   The site had no horizontal overflow, so nothing looked 'broken' — but the
   hero mock was clipped, the brand mark was stretched, display leading was
   pinned at its 1.10 floor and every section sat at the same 64px padding.
   The result read as compressed rather than considered. */

/* A-01 · the mobile sign-in link lives in the drawer, so it can never be lost
   again if the header button is restyled or renamed. */
@media (min-width: 901px) { .nav-links .nav-login-m { display: none; } }

/* A-08 · the drawer had no dismiss affordance but did lock body scroll, so a
   phone user who opened it saw a page that appeared hung. Tapping anywhere
   outside now closes it. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 99; background: rgba(16,13,11,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.nav-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .nav-scrim { display: none; } }

/* A-07 · 44px minimum touch targets, and the brand switcher stops orphaning
   its fourth chip onto a second row. */
@media (max-width: 900px) { .wl-chip { padding: 11px 18px; font-size: 14.5px; } }
@media (max-width: 560px) {
  .wl-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wl-chip { width: 100%; }
}

/* A-03 · the hero product mock overflowed its own frame by 61px, and the clip
   sliced the money column mid-figure so the headline total read '$14…'.
   Below 760px the table becomes a stacked card per row: label block on the
   left, value pinned right, header row hidden from sight but kept for AT. */
@media (max-width: 760px) {
  .app-main { padding: 18px 16px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.mock { font-size: 12.5px; }
  table.mock th { padding: 9px 6px; }

  /* P0-1 · scoped .stack: this conversion assumes a 3+ column table whose last
     cell is the value. Unscoped it also caught the 5-column pricing comparison,
     two money tables and the run-of-day list — shapes it cannot serve. */
  table.mock.stack th, table.mock.stack td { padding: 9px 6px; }
  table.mock.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.mock.stack tbody tr {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--bone-line);
  }
  table.mock.stack tbody tr:last-child { border-bottom: 0; }
  table.mock.stack td { border-bottom: 0; padding: 0; }
  table.mock.stack td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.mock.stack td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 11.5px; }
  table.mock.stack td:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: 4px; }
  table.mock.stack td.num { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}


/* ═══ TYPOGRAPHY REMEDIATION (audit pass 1, section C) ══════════════════ */

/* C-02 · 49 currency spans across three pages had NO declarations at all, so
   each inherited size and baseline from whatever wrapped it — the cause of the
   subscript-looking $ against large figures. Baseline + numeral style only:
   deliberately NO font-size, which would create the same defect on the pricing
   tiers where the symbol is correctly sized already. */
.mock-cur, .cur-symbol {
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: baseline; line-height: 1; letter-spacing: 0;
}

/* C-04 · at the 900px collapse the copy column hits ~95 characters per line. */
.split-copy > p { max-width: 62ch; }

@media (max-width: 760px) {
  /* C-01 · phones need more leading than the desktop ratios, not less. */
  h1 { line-height: 1.14; letter-spacing: -.022em; }
  h2 { line-height: 1.22; letter-spacing: -.014em; }
  h3 { line-height: 1.32; letter-spacing: -.006em; }
  .faq summary { line-height: 1.3; }
  /* C-03 · desktop-tuned ch caps surrender ~34% of an already narrow measure. */
  .hero h1, .cta-band h2, .hero .lede, .cta-band .lede { max-width: none; }
}


/* ═══ ACCESSIBILITY REMEDIATION (audit pass 1, section E) ═══════════════ */

/* E-06 · the stylesheet had exactly TWO focus rules. Everything else — 10 FAQ
   summaries, 9 footer links, the nav, the brand switcher — fell back to the UA
   ring. :where() keeps specificity at 0 so .btn:focus-visible still wins. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px;
}
.faq summary:focus-visible { outline-offset: -2px; }
.wl-chip:focus-visible { outline-offset: 2px; }

/* E-03c · --warm on the LIGHT product frames computes 3.21:1 and fails. This is
   why --warm itself was left alone and the lift token added instead. */
.frame .muted { color: var(--bone-warm); }

/* E-01 · excluded tier features were conveyed by opacity alone, so assistive
   tech read 'Invoicing' as INCLUDED — a misstatement of the commercial offer.
   Now struck through visually and labelled explicitly for AT. */
.tier li.off {
  opacity: 1; color: var(--warm-lift);
  text-decoration: line-through; text-decoration-color: var(--line-2);
}

/* E-07 · below-the-fold content printed/PDF'd at opacity 0. Procurement teams
   print pricing pages. */
@media print {
  .reveal, .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .nav, .nav-scrim { display: none !important; }
}


/* ═══ WHITE-LABEL REMEDIATION (audit pass 1, section B) ═════════════════ */

/* B-03 · .wl-item span / .wl-total span were also matching the nested
   .mock-cur, so the currency symbol inherited 10.5px uppercase against a 24px
   figure — the 'subscript $' defect. Scoped to #wl because .mock-cur appears
   40x page-wide where its inherited sizing is correct. */
#wl .mock-cur { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }

/* B-04 · lining + tabular figures (Cormorant defaults to OLD-STYLE numerals,
   which is why money looked broken), and an explicit 600 so every preset gets
   a real bold cut rather than the browser synthesising one. */
.wl-tile b, .wl-item b, .wl-total b {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* B-09 · below 900px the card is ~350px wide; a fixed 132px rail would eat
   38% of it. Collapse to a horizontal chip row. */
@media (max-width: 900px) {
  .wl > .wl-card:first-child { grid-row: auto; }
  .wl-app { grid-template-columns: 1fr; }
  .wl-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
    border-right: 0; border-bottom: 1px solid var(--w-line); }
  .wl-logo { margin-bottom: 0; margin-right: auto; }
  .wl-nav { font-size: 11.5px; }
}

/* B-07 · product chrome. A mock reads as real because of the small stuff:
   an avatar, a selected-nav treatment, status pills — not because the layout
   is correct. Census before this change was 4 nav items and 0 status pills. */
.wl-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.wl-top .wl-h { margin-bottom:0; }
.wl-avatar {
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:600; letter-spacing:.02em;
  background:var(--w-panel); border:1px solid var(--w-line); color:var(--w-dim);
  transition:background .6s ease, border-color .6s ease, color .6s ease;
}
.wl-stat {
  font-style:normal; font-size:10.5px; letter-spacing:.02em; white-space:nowrap;
  padding:2px 9px; border-radius:99px; border:1px solid var(--w-line); color:var(--w-dim);
  transition:color .6s ease, border-color .6s ease;
}
.wl-stat.is-ok { color:var(--w-accent); border-color:var(--w-accent); }
@media (max-width: 560px) {
  .wl-item .wl-stat, .wl-item em { display: none; }
  /* the hidden children left two empty tracks whose GAPS still applied, so the
     figure sat 20px short of the edge while the cards below were flush */
  .wl-item { grid-template-columns: minmax(0, 1fr) auto; }
  /* three tracks at minmax(0,1fr) shrink under min-content and .wl-app clips */
  .wl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .metrics { grid-template-columns: 1fr; } }

/* P0-3 · was an inline 3-up grid with no class inside the features proposal
   mock, so no breakpoint could collapse it and .frame sliced the third price. */
.mock-tierband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
@media (max-width: 560px) { .mock-tierband { grid-template-columns: 1fr; } }

/* P0-1 · .wl-avatar and .wl-stat are declared after the guard above and at the
   same specificity, so source order beat it and the earlier mention was inert.
   Media queries carry no specificity — the only fix is to come last. */
@media (prefers-reduced-motion: reduce) {
  .wl-avatar, .wl-stat { transition: none; }
}

/* Second hero paragraph. Steps down from .lede so the hierarchy still reads
   as one lead and one supporting statement, not two competing ledes. */
.lede-2 {
  font-size: clamp(17px, 4.4vw, 19px); line-height: 1.6; color: var(--fg-faint);
  max-width: 62ch; margin-inline: auto; margin-top: 18px;
}

/* Hero mock sidebar — mirrors the shipped app: a primary action, grouped
   sections, live counts and connection dots. */
.side-cta {
  display:block; width:100%; margin:0 0 14px; padding:9px 12px; border-radius:8px;
  background:var(--gold); color:#1A1714; font-size:12.5px; font-weight:600;
  text-align:center; letter-spacing:.01em; cursor:default; pointer-events:none;
}
.side-sec {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-warm); margin:14px 0 5px; opacity:.85;
}
.nav-badge {
  margin-left:auto; font-family:var(--sans); font-size:10px; font-weight:600;
  background:rgba(184,151,90,.18); color:var(--gold-ink); border-radius:99px; padding:1px 7px;
}
.nav-dot { margin-left:auto; width:6px; height:6px; border-radius:50%; background:#7AA67A; }
.app-side .nav-item { display:flex; align-items:center; gap:8px; }

/* Hero lede emphasis. Bold lifts to full brightness rather than adding heavy
   weight — on a dimmed lede under a large serif headline, brightness reads as
   emphasis and weight reads as noise. */
.lede b, .lede strong { font-weight: 600; color: var(--fg); }
.lede em.italic { font-style: italic; }

/* Four-jobs cards: 'Keeps the books' needs two lines where the other three fit
   one, so the body copy started at four different heights. Reserving two lines
   on every heading aligns the paragraphs across the row. Scoped to h3 — the
   vertical cards use h4 and are unaffected. */
.card h3 { min-height: calc(2 * 1.26em); }
@media (max-width: 900px) { .card h3 { min-height: 0; } }


/* ═══ PANELS ARE CONTENT, NOT SCREENSHOTS ════════════════════════════════
   The three "traffic light" dots and the pill-shaped URL made every panel
   read as a JPEG of somebody's browser. On the pricing and compare tables —
   which are real content, not mockups — it was actively misleading. The bar
   survives as a plain caption; the browser costume does not. Declared last so
   it beats the base rules on source order. */
.dot { display: none; }
.frame-bar { padding: 11px 18px; gap: 0; }
.frame-url {
  margin-left: 0; flex: 0 1 auto; text-align: left;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}


/* ═══ MOBILE DENSITY + LEGIBILITY ════════════════════════════════════════
   The pricing grid is a sales conversation held on a phone, and it was
   running at 12.5px behind a horizontal scroll with no anchor — you lost
   which row you were reading the moment you swiped. Meanwhile every section
   carried a 72px floor top AND bottom, so 144px of nothing separated each
   one. Bigger type, tighter frame. */
@media (max-width: 760px) {
  .pad     { padding-block: clamp(52px, 8vw, 84px); }
  .pad-sm  { padding-block: clamp(38px, 6vw, 60px); }
  .mb-4    { margin-bottom: clamp(20px, 3vw, 30px); }
  .eyebrow { margin-bottom: 14px; }
  .rule    { margin: 16px 0; }

  /* Comparison grids: legible type, tighter cells, and a feature column that
     holds its place while the plans scroll past it.

     ⚠ The min-width MUST be selected as `table.mock.cmp` (0,2,1), not `.cmp`
     (0,1,0). pricing.html and compare.html each declare their own `.cmp`/`.vs`
     min-width in a page-local <style> block, and that block is parsed AFTER
     this stylesheet — so at equal specificity the page-local rule wins and the
     override is silently dead. Media queries add no specificity. This is the
     same trap that made the reduced-motion guard inert in audit pass 3.

     Horizontal scrolling was the wrong answer here and measuring widths only
     chose between bad options: at any readable type size a phone shows one
     tier at a time, which is precisely what a comparison table exists to make
     impossible. Both grids are therefore restructured below rather than
     squeezed — the plan grid to one tier at a time by choice, the vs grid to
     stacked blocks. Neither scrolls sideways at all. */
  table.mock.cmp, table.mock.vs { min-width: 0; }
  .cmp th, .cmp td, .vs th, .vs td { padding: 11px 9px; }

  /* Tier cards — the other half of the pricing conversation. */
  .tier      { padding: 26px 22px; }
  .tier li   { font-size: 15px; padding-left: 26px; }
  .tier ul   { margin: 18px 0; gap: 12px; }
  .tier-desc { font-size: 14.5px; min-height: 0; margin-top: 4px; }
  .tier-bill { font-size: 12.5px; }
  .tier-price{ margin: 16px 0 4px; }

  /* Product panels: the copy inside them was set for a desktop column. The
     comparison grids live inside .frame-body too, so they must be re-stated at
     higher specificity here — `.frame-body table.mock` (0,2,1) ties with
     `table.mock.cmp` and would otherwise win on source order and shrink them. */
  .frame-body table.mock { font-size: 13.5px; }
  .frame-body table.mock.cmp, .frame-body table.mock.vs { font-size: 15px; }
  .frame-bar { padding: 10px 14px; }
}


/* ═══ PLAN GRID ON A PHONE — ONE TIER AT A TIME ══════════════════════════
   Four plan columns plus a feature column cannot coexist with readable type
   on a 360px screen. Rather than scroll (which shows one tier anyway, but
   without telling you which), the reader picks a plan and the grid shows that
   column alone against the feature list. Progressive enhancement: with no JS
   there is no data-show attribute, every column renders, and the container's
   own overflow-x still allows the old scrolling behaviour. */
.cmp-tabs, .cmp-hint { display: none; }

@media (max-width: 760px) {
  /* Matches .bill-hint on the same page — the two segmented controls should
     read as the same kind of thing. */
  .cmp-hint {
    display: block; text-align: center; margin: 0 0 10px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
    color: var(--warm);
  }
  .cmp-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin: 0 0 16px;
  }
  .cmp-tabs button {
    padding: 11px 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: transparent; color: var(--fg-dim);
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .cmp-tabs button.on { background: var(--gold); color: var(--bg); border-color: var(--gold); }

  /* Hide every plan column except the chosen one. Column 1 is the feature
     name and always stays; the category rows use a single colspan cell that
     is nth-child(1), so they are never caught by these rules. */
  table.cmp[data-show="2"] :is(th, td):nth-child(n+3),
  table.cmp[data-show="3"] :is(th, td):nth-child(2),
  table.cmp[data-show="3"] :is(th, td):nth-child(n+4),
  table.cmp[data-show="4"] :is(th, td):nth-child(2),
  table.cmp[data-show="4"] :is(th, td):nth-child(3),
  table.cmp[data-show="4"] :is(th, td):nth-child(n+5),
  table.cmp[data-show="5"] :is(th, td):nth-child(2),
  table.cmp[data-show="5"] :is(th, td):nth-child(3),
  table.cmp[data-show="5"] :is(th, td):nth-child(4) { display: none; }

  /* With one plan showing, the tick column needs no more than its own width. */
  table.cmp[data-show] .opt, table.cmp[data-show] th.plan { width: 88px; }
  table.cmp[data-show] .featured-col { background: transparent; }


  /* ═══ VS GRID ON A PHONE — STACKED BLOCKS ═════════════════════════════
     Two prose columns side by side at 360px gives roughly 14 characters a
     line. Each row becomes a block instead: the job, then what the stack
     does, then what Chalmsy does, each labelled. */
  .vs, .vs tbody, .vs tr, .vs td { display: block; width: auto; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .vs tr { padding: 16px 0; border-bottom: 1px solid var(--bone-line); }
  .vs tr:last-child { border-bottom: 0; }
  .vs td { border-bottom: 0; padding: 0; position: static; }
  .vs td.feat {
    font-family: var(--serif); font-size: 19px; line-height: 1.25;
    color: var(--bone-ink); margin-bottom: 12px;
  }
  .vs td.them, .vs td.us { padding: 11px 13px; border-radius: var(--r-sm); }
  .vs td.them { background: var(--bone-2); margin-bottom: 8px; }
  .vs td.us, .vs td.us.us-col { background: rgba(184,151,90,.12); }
  .vs td.them::before, .vs td.us::before {
    content: "The usual stack"; display: block;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-warm); margin-bottom: 5px;
  }
  .vs td.us::before { content: "Chalmsy"; color: var(--gold-ink); }
  .vs tr.cat td {
    padding: 8px 12px; margin: 0 0 4px; border-radius: var(--r-sm);
    text-align: left;
  }
}


/* ═══ FOOTER TAP TARGETS ══════════════════════════════════════════════════
   Twenty stacked footer links at 18px tall on a phone — well under the 44px
   guideline and stacked closely enough to mis-tap. Padding rather than
   font-size so the visual weight of the footer is unchanged. */
@media (max-width: 760px) {
  .foot ul { gap: 4px; }
  .foot ul a { display: inline-block; padding: 11px 0; line-height: 1.2; }
  .foot h5 { margin-bottom: 10px; }
}