/* ==========================================================================
   Pocket Advocate: the design system.

   OWNERSHIP. This file is the whole system. site.css is the base and is not
   touched here. Surface owners consume the tokens and classes below by name
   and do not invent colour, type or spacing of their own. That single rule is
   the reason four people can work at once and get one app out the other end.

   WHAT WAS WRONG. The previous version of this sheet signalled importance
   with light. Every card carried an inset highlight, a drop shadow and a
   coloured wash. Every section heading had a glowing diamond. Both landing
   buttons glowed, one cyan and one violet, at identical weight. The case tabs
   glowed when active, the slots glowed when selected, the accordions glowed
   when open, and the inputs glowed when focused. When everything on a screen
   is lit, nothing on it is important, and the page reads flat. Flat is what
   "bland as a bowl of wheaties" describes. It is a hierarchy problem, so the
   fix is hierarchy, not more gradients.

   THE THREE DECISIONS THIS SHEET MAKES.

   1. SURFACE WEIGHT IS ELEVATION AND CONTRAST, NEVER HUE. There are exactly
      three weights. `.card-quiet` sits below the ground and carries no
      shadow: it groups things without claiming them. `.card` sits on the
      ground with a one pixel lift. `.card-lit` is a real step up: brighter
      surface, harder edge, a deep shadow. A reader can rank the three at a
      glance without reading a word, and the ranking survives a scheme swap
      because none of it is carried by colour.

   2. ONE ACCENT PER SCREEN, AND IT IS THE ACTION. `.cta` is the only
      treatment in the system that fills with the accent, and the only thing
      left that still casts coloured light. Everything that used to glow now
      separates by weight instead. The accent is therefore an answer to the
      question "what do I press", not decoration.

   3. RHYTHM COMES FROM GAP. `.stack` and `.stack-tight` are grid containers
      with a gap, and they zero the block margins of their own children. Two
      margins cannot collapse into one another, and cannot add up to double,
      because inside a stack there are no margins left to collapse.

   FOUR SCHEMES: neon, calm, paper, contrast. Paper is light and this design
   is dark, so the ladder is written in terms of two direction tokens rather
   than in terms of "darker" and "lighter". `--sur-lit` is whatever moves a
   surface away from the ground on this scheme, and `--sh-cast` is whatever
   colour a shadow is made of on this scheme. Paper redefines both, so the
   same ladder reads correctly with the polarity flipped.

   AUDIT. Zero literal colours: every value is a token or a color-mix of
   tokens. `transparent` and `currentColor` are keywords, not palette values.
   Zero em dashes and zero en dashes, checked by codepoint. No copy, no
   prices, no legal wording and no behaviour is set in this file.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- spacing scale. Nothing in this sheet uses an arbitrary gap. ---- */
  --s-1: .4rem;
  --s-2: .7rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.25rem;

  /* ---- type scale. Root is 17.5px, not 16, so every rem here is about 9%
     bigger than it reads on a default page. Sized against that. ---- */
  --t-display: clamp(2.15rem, 8vw, 2.9rem);
  --t-h1: clamp(1.85rem, 6vw, 2.3rem);
  --t-h2: 1.45rem;
  --t-h3: 1.16rem;
  --t-body: 1rem;
  --t-small: .92rem;
  --t-micro: .8rem;
  /* Line height is part of the scale, not a per-rule decision. A heading set
     at 1.08 and body at 1.62 is most of the difference between "cramped" and
     "spacious" before a single margin changes. */
  --lh-heading: 1.08;
  --lh-body: 1.62;
  --lh-small: 1.5;
  --measure: 38rem;

  /* ---- radius ---- */
  --r-1: 12px;
  --r-2: 16px;
  --r-3: 20px;
  --r-4: 26px;
  --r-pill: 999px;

  /* ---- page rhythm. The single biggest lever on "cramped": the gap between
     one section and the next, and how much air the page keeps at its edge. ---- */
  --pad-page: 18px;
  /* The page's side padding, named once so a full-bleed band can undo it
     exactly at every width (the .sec-deep bleed used to over-run by .1rem
     on narrow phones). */
  --pad-x: 1.1rem;
  --max-content: 1180px;
  --max-text: 660px;

  /* ---- motion ---- */
  --mo-fast: 140ms;
  --mo-base: 220ms;
  --mo-slow: 360ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- THE SURFACE LADDER.
     Five steps. `floating` is what a card sitting ON a panel uses, and
     `inset` is what a field sunk INTO one uses. The DEFAULT polarity is now
     LIGHT (Daylight took the bare :root on 2026-08-29): a raised surface
     goes toward white, a sunken one toward the powder ground. Night flips
     it back below and nothing downstream has to know. ---- */
  --sur-quiet: color-mix(in srgb, var(--panel-2) 55%, var(--bg));
  --sur-base: var(--panel);
  --sur-lit: #FFFFFF;
  --sur-floating: #FFFFFF;
  --sur-inset: color-mix(in srgb, var(--bg-deep) 70%, var(--panel));

  /* ---- THE EDGE LADDER. Ink hairlines on a pale ground: white ones
     vanish. Night restores the light-made edges. ---- */
  --edge-quiet: rgba(23, 43, 77, .08);
  --edge-base: rgba(23, 43, 77, .14);
  --edge-lit: rgba(23, 43, 77, .24);
  --edge-focus: color-mix(in srgb, var(--cyan) 78%, var(--ink));

  /* ---- THE ELEVATION LADDER.
     Navy-cast shadows, soft and believable, with a white top hairline on
     anything raised: that is what makes white read as ABOVE off-white. ---- */
  --el-0: none;
  --el-1: 0 1px 2px rgba(23, 52, 101, .06), 0 6px 20px rgba(23, 52, 101, .08);
  --el-2: 0 2px 4px rgba(23, 52, 101, .06), 0 14px 36px rgba(23, 52, 101, .12), 0 1px 0 rgba(255, 255, 255, .85) inset;
  --el-3: 0 4px 10px rgba(23, 52, 101, .08), 0 24px 60px rgba(23, 52, 101, .18), 0 1px 0 #FFFFFF inset;
  /* The only light left in the system, and it belongs to the one action. */
  --el-cta:
    0 12px 34px color-mix(in srgb, var(--cyan) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent);
}

/* Night: the dark ladders that were the app-wide default before Daylight.
   A raised surface moves toward light, edges are made OF light, shadows are
   made of the ground. */
:root[data-scheme="calm"] {
  --sur-quiet: color-mix(in srgb, var(--panel) 78%, var(--bg));
  --sur-lit: var(--panel-2);
  --sur-floating: color-mix(in srgb, var(--panel-2) 91%, white);
  --sur-inset: color-mix(in srgb, var(--bg) 62%, var(--panel));
  --edge-quiet: rgba(255, 255, 255, .055);
  --edge-base: rgba(255, 255, 255, .105);
  --edge-lit: rgba(255, 255, 255, .17);
  --edge-focus: color-mix(in srgb, var(--cyan) 70%, white);
  --el-1: 0 8px 28px rgba(0, 0, 0, .18);
  --el-2: 0 16px 44px rgba(0, 0, 0, .26), 0 1px 0 rgba(255, 255, 255, .055) inset;
  --el-3: 0 24px 70px rgba(0, 0, 0, .36), 0 1px 0 rgba(255, 255, 255, .075) inset;
  --sh-cast: rgba(0, 0, 0, 1);
}

/* A pale ground cannot use white hairlines or black shadows at dark-scheme
   strength: the edges vanish and the shadows turn to soot. Same ladders,
   re-cast in ink. */
:root[data-scheme="paper"] {
  --edge-quiet: rgba(32, 37, 43, .07);
  --edge-base: rgba(32, 37, 43, .13);
  --edge-lit: rgba(32, 37, 43, .22);
  --sur-floating: #FFFFFF;
  --sur-inset: color-mix(in srgb, var(--bg-deep) 70%, var(--panel));
  --el-1: 0 6px 20px rgba(60, 45, 15, .08);
  --el-2: 0 12px 32px rgba(60, 45, 15, .11), 0 1px 0 rgba(255, 255, 255, .6) inset;
  --el-3: 0 20px 52px rgba(60, 45, 15, .15), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
/* High contrast wants edges you can see, not edges you can sense. */
:root[data-scheme="contrast"] {
  --edge-quiet: rgba(255, 255, 255, .34);
  --edge-base: rgba(255, 255, 255, .55);
  --edge-lit: rgba(255, 255, 255, .85);
  --sur-floating: #232323;
  --el-1: 0 0 0 1px rgba(255, 255, 255, .34);
  --el-2: 0 0 0 1px rgba(255, 255, 255, .55);
  --el-3: 0 0 0 2px rgba(255, 255, 255, .8);
}

/* Paper shares Daylight's polarity (both light); what it keeps of its own
   is the warm shadow cast and warm surfaces. */
:root[data-scheme="paper"] {
  --sur-quiet: color-mix(in srgb, var(--panel-2) 55%, var(--bg));
  --sur-base: var(--panel);
  --sur-lit: var(--sig-paper);
  --edge-lit: color-mix(in srgb, var(--ink) 30%, var(--line));
  --sh-cast: var(--ink);
}

/* Contrast wants hard edges. A shadow made of pure black on a pure black
   ground carries no information, so the ladder there is expressed in border
   weight instead. Section 15 does that. */
:root[data-scheme="contrast"] {
  --sur-quiet: var(--bg);
  --sur-lit: color-mix(in srgb, var(--ink) 12%, var(--panel-2));
  --el-1: none;
  --el-2: none;
  --el-3: none;
  --el-cta: none;
}

/* Compatibility aliases. The previous sheet exposed these names; nothing
   should break if a rule somewhere still reads one. They resolve to the
   ladder above, which is why the wash names are far weaker than they were. */
:root {
  --pa-glass: var(--sur-base);
  --pa-glass-2: var(--sur-base);
  --pa-glass-soft: var(--sur-quiet);
  --pa-line-soft: var(--edge-quiet);
  --pa-line-ink: var(--edge-base);
  --pa-line-cyan: color-mix(in srgb, var(--cyan) 34%, var(--line));
  --pa-line-magenta: color-mix(in srgb, var(--magenta) 34%, var(--line));
  --pa-cyan-wash: color-mix(in srgb, var(--cyan) 7%, transparent);
  --pa-cyan-wash-strong: color-mix(in srgb, var(--cyan) 12%, transparent);
  --pa-magenta-wash: color-mix(in srgb, var(--magenta) 7%, transparent);
  --pa-magenta-wash-strong: color-mix(in srgb, var(--magenta) 12%, transparent);
  --pa-blue-wash: color-mix(in srgb, var(--blue) 6%, transparent);
  --pa-green-wash: color-mix(in srgb, var(--green) 6%, transparent);
  --pa-line-ink-2: var(--edge-lit);
  --pa-shadow: var(--el-3);
  --pa-shadow-soft: var(--el-1);
  --pa-radius-xl: var(--r-4);
  --pa-radius-lg: var(--r-3);
  --pa-radius-md: var(--r-2);
  --pa-space-section: var(--s-5);
}


/* ==========================================================================
   2. GROUND AND GLOBAL TYPE

   The ambient wash goes. Three fixed radial gradients under every page put
   coloured light on every surface at once, which is the flattening effect in
   its purest form: a card cannot look raised off a ground that is already
   glowing. What is left is one very faint cool wash at the top of the dark
   schemes, so the ground has depth without competing with anything on it.
   ========================================================================== */

html { background: var(--bg); }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 40rem at 50% -14rem,
      color-mix(in srgb, var(--blue) 7%, transparent), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-size: var(--t-body);
  line-height: 1.6;
}

/* Paper and contrast get a flat ground. On a pale scheme a cool wash reads as
   a smudge, and on contrast it costs contrast for nothing. The previous sheet
   reinstated the wash on all four schemes and put a violet bloom across the
   top of the paper hero, which is the kind of thing a light scheme catches
   and a dark one hides. */
:root[data-scheme="paper"] body,
:root[data-scheme="contrast"] body { background-image: none; }

h1, h2, h3 {
  color: var(--ink);
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.14; }
h2 { font-size: var(--t-h2); line-height: 1.22; }
h3 { font-size: var(--t-h3); line-height: 1.3; }

p, li { text-wrap: pretty; }

.dim, .muted { color: var(--dim); }
.small { font-size: var(--t-small); line-height: 1.55; }
.tiny { font-size: var(--t-micro); line-height: 1.5; }
.fine,
.footer-disclaimer {
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.6;
}

a, button, input, textarea, select, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Focus is the one other place light is allowed, because it is the only
   signal a keyboard user gets. It is a ring, not a bloom. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   3. THE GUARANTEED CLASSES

   These ten names are the contract the surface owners are writing markup
   against. Names and behaviour are fixed.
   ========================================================================== */

/* ---- .stack and .stack-tight -------------------------------------------
   Vertical rhythm, from gap. The second rule is the load bearing one: a
   stack zeroes the block margins of its own children, so a heading's
   margin-bottom and a paragraph's margin-top can neither collapse into one
   another nor stack on top of the gap. One number controls the rhythm. */
/* `hidden` outranking: settled once, at the top of site.css, which every
   page loads including the admin half that never loads this sheet. The
   classes below set displays, so without that guard they would un-hide
   anything the markup marked `hidden`. */

.stack,
.stack-tight {
  display: grid;
  align-content: start;
  justify-items: stretch;
}
.stack { gap: var(--s-4); }
.stack-tight { gap: var(--s-2); }
.stack > *,
.stack-tight > * {
  margin-block: 0;
  min-width: 0;
}
/* A stack of stacks still reads as one rhythm: the outer gap is the topic
   break, the inner gap is the line break. */
.stack > .stack-tight { gap: var(--s-2); }

/* ---- .measure -----------------------------------------------------------
   Caps the line at 68 characters. Below about 30rem of usable width this
   never bites, which is correct: on a phone the viewport is the measure. */
.measure { max-width: 68ch; }

/* ---- the three surface weights -----------------------------------------
   Read these three blocks together. The only things that change between them
   are surface brightness, edge contrast and shadow depth. No hue moves. */

/* Weight 2 of 3, the default. On the ground, one pixel of lift. */
.card,
.panel {
  background: var(--sur-base);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  padding: var(--s-4);
  /* Kept for the flow contexts this app still renders into, for example the
     panels book.js and case.js append one after another. Bottom only, so it
     cannot double against a sibling's top margin. Inside a .stack the rule
     above zeroes it and the gap takes over. */
  margin: 0 0 var(--s-3);
  box-shadow: var(--el-1);
}

/* Weight 1 of 3. Below the ground, no shadow. For material that should be
   grouped and available but should not ask for attention: a list of facts, a
   rail of steps, a tray of small print. */
.card-quiet {
  background: var(--sur-quiet);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin: 0;
  box-shadow: var(--el-0);
}

/* Weight 3 of 3. The one thing on the screen that matters. Brighter surface,
   harder edge, a shadow with real depth. There should be at most one of
   these visible at a time, which is the entire point of it. */
.card-lit {
  background: var(--sur-lit);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin: 0;
  box-shadow: var(--el-3);
}

/* ---- .eyebrow -----------------------------------------------------------
   A micro caps label. Deliberately not a coloured chip: an eyebrow labels
   the thing under it and must not outrank it. */
.eyebrow {
  display: block;
  margin: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- .pill --------------------------------------------------------------
   44px tall, rounded, tappable, quiet. Its selected state is a step up the
   surface ladder, not a light. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--soft);
  font: 600 var(--t-small)/1.2 inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pill:hover { border-color: var(--edge-lit); }
.pill:active { transform: translateY(1px); }
/* A pill standing alone in a paragraph (the about page's two doors) can be
   longer than a phone is wide. It wraps onto a second line instead of
   pushing the whole page sideways (2026-09-05). */
p > .pill { max-width: 100%; white-space: normal; }
.pill.on,
.pill.selected,
.pill[aria-pressed="true"],
.pill[aria-current="page"],
.pill[aria-current="true"] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  color: var(--ink);
  box-shadow: var(--el-1);
}

/* ---- .cta ---------------------------------------------------------------
   THE primary action. One treatment, and this is it. It fills with the
   accent, so it is the highest contrast object on the screen, and it is the
   only element in the system that still casts coloured light. Full width on
   a phone, because an unmistakable action is a bar, not a shrink wrapped
   label a thumb has to aim at. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--cyan);
  border-radius: var(--r-2);
  background: var(--cyan);
  color: var(--on-accent);
  font: 700 var(--t-body)/1.25 inherit;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--el-cta);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:active {
  transform: translateY(1px) scale(.995);
  box-shadow: var(--el-1);
}
.cta:disabled,
.cta[aria-disabled="true"] {
  opacity: .38;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
/* Past a phone the bar stops being the whole width and becomes a target that
   still cannot be mistaken for anything else on the page. */
@media (min-width: 34rem) {
  .cta { width: auto; min-width: 15rem; justify-self: start; align-self: start; }
}

/* ---- .divide ------------------------------------------------------------
   A hairline that means "new topic". Inside a stack it carries the gap on
   both sides plus a little of its own, so a topic break reads as a bigger
   break than a paragraph break without a second spacing system. */
.divide,
/* .title-rule is the same object under the name about.html already uses. It
   was a 2px cyan gradient bar with a bloom around it, which made the quietest
   piece of punctuation on the page one of the brightest things on it. */
.title-rule {
  height: 1px;
  margin-block: var(--s-1);
  padding: 0;
  border: 0;
  background: var(--edge-base);
  box-shadow: none;
}


/* ==========================================================================
   4. PAGE FLOW

   main becomes the outermost stack. Every page gets its section rhythm from
   one gap rather than from a margin-top on .land-sec that collapsed against
   whatever the previous section happened to end with.
   ========================================================================== */

main {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-4) var(--pad-x) var(--s-6);
}
main > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
/* Enumerated because a class beats `main > *` on specificity, and a margin
   inside a grid adds to the gap rather than collapsing into it. */
main > .card,
main > .panel,
main > .step-rail,
main > .title-rule,
main > .trust,
main > .footer-disclaimer,
main > footer.legal { margin: 0; }

/* Sections are stacks too, so the inside of a section has one rhythm and the
   space between sections has another, and the two never add up. The hero is
   the one exception and section 7 says why. */
.land-sec {
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.land-sec > * { margin-block: 0; min-width: 0; }
/* margin: 0 is not redundant. site.css sets a .9rem margin-bottom on this
   exact selector, and a margin inside a grid does not collapse, it adds, so
   without this line every section heading sat on gap plus margin. */
.land-sec > h2 { margin: 0; color: var(--ink); font-size: var(--t-h2); }
/* The glowing diamond that sat before every h2 is gone. A mark that says
   "important" in front of every heading on a page says nothing at all. A
   heading at 1.3rem with 2rem of air above it is already a heading. */
.land-sec > h2::before { content: none; }

.page-head {
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--edge-quiet);
}
.page-head h1 { font-size: var(--t-h1); line-height: 1.12; }
.page-head .hero-sub {
  max-width: 46ch;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.55;
}


/* ==========================================================================
   5. APP CHROME
   ========================================================================== */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bar);
  border-bottom: 1px solid var(--edge-base);
  box-shadow: var(--el-1);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.bar-inner { padding: var(--s-2) 1rem; min-height: 60px; }
.brand { font-size: 1.06rem; letter-spacing: -.025em; }
/* The wordmark does not need to glow to be the wordmark. */
.brand .spark { text-shadow: none; }

.nav-toggle,
.cog-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--r-2);
  border: 1px solid var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
  box-shadow: none;
}
.nav-toggle:hover,
.cog-btn:hover,
.nav-toggle:focus-visible,
.cog-btn:focus-visible {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: none;
}

.tabs a.active {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: none;
}
.bar-inner.collapsed .tabs {
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-3);
}

.demo-bar { border-bottom-color: var(--edge-base); }


/* ==========================================================================
   6. BUTTONS

   site.css already had the right idea: calm by default, one primary. It was
   the previous version of this sheet that put a cyan ring and a lifted edge
   on every button on every page. A secondary button is a bordered rectangle.
   A primary button is the .cta above, and .btn.glow is the same object under
   the name the existing markup already uses.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
  font: 700 var(--t-small)/1.25 inherit;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:hover { background: var(--sur-lit); border-color: var(--edge-lit); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn.ghost {
  background: transparent;
  border-color: var(--edge-lit);
  color: var(--ink);
}
.btn.ghost:hover { background: var(--sur-quiet); }

.btn.quiet {
  background: transparent;
  border-color: var(--edge-quiet);
  color: var(--dim);
}
.btn.quiet:hover { background: var(--sur-quiet); color: var(--soft); }

.btn.mag {
  background: transparent;
  border-color: var(--edge-lit);
  color: var(--ink);
}

/* One primary treatment, shared by name with .cta so the two cannot drift
   apart. Not full width here, because .btn.glow appears inside existing
   .actions rows beside a secondary button. */
.btn.glow,
.btn.mag.glow {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--on-accent);
  box-shadow: var(--el-cta);
}
.btn.glow:hover,
.btn.mag.glow:hover { background: var(--cyan); filter: brightness(1.06); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .38;
  box-shadow: none;
  transform: none;
}

.actions { gap: var(--s-2); }
.actions .btn { flex: 0 1 auto; }

/* The help dot renders inline beside a line of text, so it is 1.25rem across
   and cannot simply be grown to 44px without pushing the sentence apart. It
   gets the 44px instead as an invisible hit area centred on the dot, which is
   the size a thumb needs and costs the layout nothing. */
.help-dot {
  position: relative;
  background: var(--sur-quiet);
  border-color: var(--edge-lit);
  color: var(--dim);
  box-shadow: none;
}
.help-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.help-dot:hover { box-shadow: none; border-color: var(--edge-lit); }


/* ==========================================================================
   6b. THE GLOW LEDGER

   site.css carries 44 selectors that paint a coloured shadow or a coloured
   text shadow. That is the flattening, itemised: a dot in a carousel, a
   toggle, a heading marker, a step number and a category tag all threw the
   same light as the one button on the page that mattered.

   Every one of them is listed here, at the same specificity as the rule that
   set it, and every one of them is turned off. Depth, where a thing needs to
   read as raised, comes from the elevation ladder instead. The exceptions are
   deliberate and there are three: `.cta`, `.btn.glow` and `.act-c`, which are
   the same primary action under three names.

   Listing them out longhand rather than reaching for a blanket rule is the
   point. A blanket `box-shadow: none` would take the ladder with it, and the
   next person to add a glow would have no record of what was decided here.
   ========================================================================== */

.brand .spark,
.hero-eyebrow { text-shadow: none; }

.switch.on,
.seg button.on,
.intro-dots span.on,
.scheme-swatch.on,
.whats-new .wn-dots span.on,
.p-dot.on,
.timeline li.done .t-dot,
.timeline li.now .t-dot,
.hiw li::before,
.day h3::before,
.icon-chip,
.step-rail li.now .n,
.crumbs li.now,
.choice.selected,
.chip-label.selected,
.tag.c,
.tag.m,
.tag.o,
.review-card,
.close-ico,
.chat-expand:hover,
.chat-expand:focus-visible,
.help-dot:hover,
.tabs a.active { box-shadow: none; }

/* Two floating surfaces that do need to read as lifted off the page. They get
   the deepest step of the ladder rather than a coloured halo. */
.pa-toast,
.pa-toast.bad { box-shadow: var(--el-3); }

/* The pack cards keep the one pixel lift the rest of the cards have. */
.pack.rec-c,
.pack.rec-m { box-shadow: var(--el-1); }


/* ==========================================================================
   7. HOME

   THE HIERARCHY DECISION ON THIS PAGE. There were two doors, cyan and
   violet, at identical weight, both glowing. That is the definition of no
   primary action: the reader has to stop and choose before they know what
   the page wants of them. Booking a case is what this business does. So
   "Book a case" takes the .cta treatment and "Priority Chat" drops to card
   weight. One accent, one action, and the second door is still right there.
   ========================================================================== */

/* The hero is the one lit surface on the page. */
.land-sec.hero {
  display: block;                 /* normal flow; the pocket below is a grid of its own */
  position: relative;
  overflow: hidden;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-4);
  background: var(--sur-lit);
  background-image: none;
  box-shadow: var(--el-3);
}

/* .hero-art is gone (2026-09, Look A): the watermark it had become was
   under the text on no page, and the rules were repainting nothing. */
.land-sec.hero > * { position: relative; z-index: 1; }

/* The eyebrow was a cyan pill with a cyan border and a cyan wash, which made
   the smallest text on the screen one of the loudest things on it. */
.hero-eyebrow {
  display: block;
  width: auto;
  margin: 0 0 var(--s-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-align: left;
  text-indent: 0;
}

.land-sec.hero h1 {
  max-width: none;
  margin: 0 0 var(--s-3);
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.land-sec.hero .hero-sub {
  max-width: 46ch;
  margin: 0;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.55;
}

/* Supporting credentials, not a second headline. Hairline rule, small type,
   dim ink. It used to carry a solid cyan bar and near body size text over
   seven lines, in direct competition with the h1 above it. */
.hero-cred {
  margin: var(--s-3) 0 0;
  padding: 0 0 0 var(--s-3);
  border-left: 2px solid var(--edge-lit);
  border-radius: 0;
  background: none;
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}

.acts { gap: var(--s-2); margin-top: var(--s-4); }

.act {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
  box-shadow: var(--el-1);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.act:hover { background: var(--sur-lit); border-color: var(--edge-lit); }
.act:active { transform: translateY(1px) scale(.995); }
.act-ico {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-1);
  border: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
  color: var(--soft);
  box-shadow: none;
}
.act-chev { width: 1.1rem; height: 1.1rem; color: var(--dim); }

/* The primary door. Same object as .cta, reached through the class the
   existing markup already carries. */
.act-c {
  min-height: 64px;
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--on-accent);
  box-shadow: var(--el-cta);
}
.act-c:hover { background: var(--cyan); filter: brightness(1.06); }
.act-c .act-ico {
  border-color: transparent;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
  color: var(--on-accent);
}
.act-c .act-chev { color: var(--on-accent); }

/* The secondary door. Card weight, neutral ink, no fill and no light. */
.act-m {
  border-color: var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
}
.act-m .act-ico { color: var(--soft); }

.webapp-note {
  justify-content: center;
  margin: var(--s-1) 0 0;
  color: var(--dim);
  font-size: var(--t-micro);
}

/* The trust bar is four facts, not four claims. Quiet tray, one ink for all
   four icons: cyan, green, violet and gold in the space of a paragraph was
   four accents fighting each other and the hero above them. */
.trust {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-3);
  background: var(--sur-quiet);
  box-shadow: none;
}
.trust li {
  min-height: 52px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.3;
  text-align: left;
}
.trust .ico,
.trust li:nth-child(2) .ico,
.trust li:nth-child(3) .ico,
.trust li:nth-child(4) .ico {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  color: var(--soft);
}

/* How it works: three steps, all equal, so all three are card weight and
   none of them is lit. The rail is what makes them read as a sequence. */
.hiw { margin: 0; }
.hiw li { padding-bottom: var(--s-3); border-left-color: var(--edge-base); }
.hiw li:last-child { padding-bottom: 0; }
.hiw li::before {
  width: 1.85rem;
  height: 1.85rem;
  left: -.95rem;
  background: var(--sur-base);
  border-color: var(--edge-lit);
  color: var(--ink);
  box-shadow: none;
}
.hiw .step-card {
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.hiw p,
.hiw .step-card .step-text {
  margin: 0;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.55;
}
.icon-chip {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-1);
  border: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
  color: var(--soft);
}

/* The three service cards are the same weight on purpose: this is a menu,
   and a menu that pre-selects for the reader is not a menu. */
/* .svc-grid and everything under it exist only in this file, so these rules
   carry the layout as well as the look. There is no site.css fallback under
   them: drop the display and the cards collapse into running text. */
.svc-grid { display: grid; gap: var(--s-2); margin: 0; }
.svc-card,
.svc-card:nth-child(2) {
  display: grid;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
  color: var(--ink);
  text-decoration: none;
}
.svc-card:hover { border-color: var(--edge-lit); background: var(--sur-lit); }
.svc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: var(--s-1);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-1);
  background: var(--sur-quiet);
  color: var(--soft);
}
.svc-card h3 { margin: 0; font-size: var(--t-h3); line-height: 1.25; }
.svc-price {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.svc-per { font-size: .58em; font-weight: 400; color: var(--dim); }
.svc-line { color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
.svc-go {
  margin-top: var(--s-1);
  color: var(--cyan);
  font-weight: 700;
  font-size: var(--t-small);
}
/* A single right guillemet. Also defined only here. */
.svc-go::after { content: " \203A"; }

.mission {
  border-left: 2px solid var(--edge-lit);
  border-radius: 0;
  padding: 0 0 0 var(--s-3);
  background: none;
}
.mission p { color: var(--soft); }

.reviews-label {
  margin: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
}

/* The closing stopped being its own card when the conversion zone arrived
   (section 16): it is a deep band now, and the card inside it is .convert. */
.land-sec.closing {
  padding: var(--s-5) var(--s-4);
  justify-items: stretch;
}
.close-line {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  text-align: left;
}
.close-line strong { color: var(--ink); }
.close-ico {
  width: 2.2rem;
  height: 2.2rem;
  border-color: var(--edge-quiet);
  background: var(--sur-base);
  color: var(--soft);
  box-shadow: none;
}
.close-arrow { color: var(--dim); }


/* ==========================================================================
   8. SERVICES AND PRICING
   ========================================================================== */

.pack {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
  text-align: left;
}
/* The recommendation borders were carrying hue: cyan on two packages and
   violet on a third, which made one price list look like three offers from
   three different companies. It is one list. */
.pack.rec-c,
.pack.rec-m { border-color: var(--edge-base); }
.pack:hover { border-color: var(--edge-lit); }
.pack h3 { margin: 0; font-size: var(--t-h2); }
/* Every price is the same colour. Cyan on two packages and blue on a third
   made one price list look like offers from three different companies, and
   put a lit number in the middle of every card on the page. */
.pack .price,
.pack.rec-c .price,
.pack.rec-m .price { color: var(--ink); font-size: 1.45rem; line-height: 1.15; }
.pack .desc {
  margin: 0;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.6;
}
.pack-about { margin: 0; }

/* The in card action is a pill, so it reads as "there is more here" rather
   than as a second primary button on a page that already has one. */
.pack-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-small);
}

/* The three category tags were green, violet and orange, each with its own
   glow, sitting on the rim of three cards in a row. A tag is a label. It gets
   the quiet surface and keeps its shape, including the forward lean on the
   "on the go" one, which is character rather than emphasis. */
.tag,
.tag.c,
.tag.m,
.tag.o {
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
  background: var(--bg);
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  box-shadow: none;
}

.after-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.after-list li {
  position: relative;
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.55;
}
.after-list li::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: 1.15rem;
  width: .4rem;
  height: .4rem;
  border-radius: var(--r-pill);
  background: var(--soft);
  box-shadow: none;
}

.faq {
  overflow: hidden;
  margin: 0 0 var(--s-2);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  box-shadow: none;
}
.faq > summary { padding: var(--s-3); min-height: 52px; }
/* Open is a step up the surface ladder, not a light. */
.faq[open] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: var(--el-1);
}
.faq-a {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

.review {
  flex-basis: 17rem;
  padding: var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.review .rv-text { color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
.review .rv-name { color: var(--dim); font-size: var(--t-micro); }


/* ==========================================================================
   9. BOOKING

   THE HIERARCHY DECISION ON THIS PAGE. The step rail, every open day, every
   time slot and the continue button were all lit at once. Now the rail is
   quiet furniture, the days are card weight, and the slot the reader has
   actually chosen is the only raised object on the screen.
   ========================================================================== */

/* Margin zero, not a bottom margin: the rail is a direct child of main, and
   main is a grid, so a margin here would add to the gap rather than sit
   inside it. Every element that main lays out directly follows this rule. */
.step-rail { gap: var(--s-1); margin: 0; }
.step-rail li {
  min-height: 56px;
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--dim);
  box-shadow: none;
}
.step-rail .n {
  width: 1.7rem;
  height: 1.7rem;
  background: var(--sur-base);
  border-color: var(--edge-quiet);
}
.step-rail li.now {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-1);
}
.step-rail li.now .n { border-color: var(--cyan); color: var(--cyan); }
.step-rail li.done { color: var(--soft); border-color: var(--edge-quiet); }

.day {
  margin: 0 0 var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.day h3 {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--edge-quiet);
  color: var(--ink);
}
.day h3::before { width: .3rem; height: 1.2rem; }

/* A slot is a row in a list of twelve. The air that matters is between the
   rows, not inside each one: padding here is multiplied by twelve and turns
   a two screen list into a three screen list for no gain in legibility. */
.slot {
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  line-height: 1.35;
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.slot .local { color: var(--dim); font-size: var(--t-micro); line-height: 1.4; }
.slot:hover,
.slot:focus-visible { background: var(--sur-base); border-color: var(--edge-lit); }
/* Selection is the one remaining place a hue carries information, because it
   answers "which one did I pick" and there is never more than one of them.
   It is an edge, not a bloom. */
.slot.selected {
  border-color: var(--cyan);
  border-width: 2px;
  background: var(--sur-lit);
  color: var(--ink);
  box-shadow: var(--el-2);
}
.slot.selected .local { color: var(--soft); }

.chip-label {
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.chip-label.selected {
  color: var(--ink);
  border-color: var(--cyan);
  background: var(--sur-lit);
}

input[type=email],
input[type=password],
input[type=text],
input[type=tel],
input[type=date],
input[type=time],
input[type=number],
input[type=url],
input[type=datetime-local],
select,
textarea {
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--ink);
  box-shadow: none;
}
textarea { min-height: 7rem; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--cyan);
  background: var(--sur-base);
  box-shadow: none;
}
label { color: var(--dim); font-size: var(--t-small); }

.agreement {
  margin: 0 0 var(--s-2);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  box-shadow: none;
}
.agreement > summary { min-height: 60px; padding: var(--s-3); }
.agreement-title { color: var(--ink); }
.agreement-plain {
  margin-top: var(--s-1);
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}
.agreement[open] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: var(--el-1);
}
.agreement-body {
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--bg);
  padding: var(--s-4) var(--s-3);
  font-size: var(--t-small);
  line-height: 1.65;
}
.agreement-body h3 { color: var(--ink); font-size: var(--t-micro); letter-spacing: .04em; }
.agreement-check { min-height: 52px; padding: var(--s-3); }
.price-line,
.included { border-color: var(--edge-quiet); }


/* ==========================================================================
   10. THE CASE SPACE

   THE HIERARCHY DECISION ON THIS PAGE. This is the busiest screen in the app
   and it was the most uniformly lit: a glowing tab row, a glowing confirm
   banner, a glowing folder, a glowing hint card and a glowing action, all in
   the first screenful. Now the folder chrome and the tabs are furniture, the
   banner that says what happens next is the one raised surface, and the
   action on it is the one accent.
   ========================================================================== */

.case-picker { gap: var(--s-2); margin: 0 0 var(--s-3); }
.case-picker .btn { border-radius: var(--r-pill); padding-inline: var(--s-3); }

.case-sec-h { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-h3); }

/* The one raised surface on arrival. */
.confirm-banner {
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-3);
  background: var(--sur-lit);
  box-shadow: var(--el-3);
}

.nav-hint,
.setup-guide,
.push-prompt {
  border-color: var(--edge-base);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}

.folder {
  color: var(--ink);
  background: var(--sur-base);
  border: 1px solid var(--edge-base);
  box-shadow: var(--el-1);
}
.folder:hover,
.folder:focus-visible {
  transform: translateY(-2px);
  border-color: var(--edge-lit);
  box-shadow: var(--el-2);
}

.case-folder {
  padding: var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.case-folder::after { background: var(--sur-quiet); box-shadow: none; opacity: .8; }

.folder-tabs {
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: var(--s-1) 0 var(--s-2);
  background: transparent;
  border-bottom: 1px solid var(--edge-quiet);
  backdrop-filter: none;
}
.folder-tabs > a {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--dim);
  box-shadow: none;
}
/* The selected tab keeps site.css's 2px accent bar along its top edge, which
   is a hairline that says "this one", and loses the cyan drop-shadow bloom
   that site.css wrapped the whole trapezoid in. A marker, not a light. */
.folder-tabs > a.active,
.folder-tabs > a.on,
.folder-tabs > a[aria-current="page"],
/* The scoped form as well: site.css sets the glow at .case-folder .folder-tabs
   > a.on, one class more specific than the plain form, so a rule without the
   prefix loses to it and the bloom stays. */
.case-folder .folder-tabs > a.on {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-1);
  filter: none;
}

.timeline { display: grid; gap: var(--s-1); }
.timeline li {
  align-items: flex-start;
  padding: var(--s-2);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-1);
  background: var(--sur-quiet);
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}
.timeline li.now {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
}

.dropzone {
  min-height: 100px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--edge-lit);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--dim);
}
.filelist li { padding: var(--s-2) 0; border-bottom-color: var(--edge-quiet); }

.followup-offer,
.review-card {
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
}

.notice-box {
  border-radius: var(--r-2);
  border: 1px solid var(--edge-lit);
  background: var(--sur-quiet);
  color: var(--soft);
}
.notice-box.pending { background: var(--sur-quiet); border-color: var(--edge-lit); }


/* ==========================================================================
   11. CHAT
   ========================================================================== */

.chat-root { border-radius: var(--r-3); }
.chat-log { gap: var(--s-2); padding: var(--s-3) 0; }
.msg {
  max-width: 86%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  line-height: 1.5;
  box-shadow: none;
}
/* Mine is the raised one, theirs is on the ground. The same two step ladder
   as everywhere else, doing the job a colour pair used to do. */
.msg.me {
  background: var(--sur-lit);
  border: 1px solid var(--edge-lit);
  color: var(--ink);
  border-bottom-right-radius: var(--r-1);
  box-shadow: var(--el-1);
}
.msg.them {
  background: var(--sur-quiet);
  border: 1px solid var(--edge-quiet);
  border-bottom-left-radius: var(--r-1);
}
.msg .msg-meta { color: var(--dim); font-size: var(--t-micro); }

.chat-form { gap: var(--s-2); }
.attach-btn,
.chat-expand {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  border: 1px solid var(--edge-base);
  box-shadow: none;
}


/* ==========================================================================
   12. MODALS

   A sheet over a dimmed page is already the most important thing on screen.
   It needs depth, not light.
   ========================================================================== */

.intro-overlay,
.settings-overlay,
.msg-menu-overlay {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.intro-card,
.settings-card,
.msg-menu-sheet {
  border-radius: var(--r-4);
  border: 1px solid var(--edge-lit);
  background: var(--sur-lit);
  background-image: none;
  box-shadow: var(--el-3);
}


/* ==========================================================================
   13. THE FOOTER
   ========================================================================== */

.site-foot {
  margin: var(--s-5) 0 0;
  padding: var(--s-5) var(--pad-x) var(--s-6);
  border-top: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
}
.foot-col { display: grid; gap: 0; align-content: start; }
.foot-col h2 {
  margin: 0 0 var(--s-1);
  border: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.foot-col h2::before { content: none; }
.foot-col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--soft);
  font-size: var(--t-small);
  text-decoration: none;
}
.foot-col a:hover,
.foot-col a:focus-visible { color: var(--cyan); }
.foot-serving { margin: var(--s-4) 0 var(--s-2); color: var(--dim); font-size: var(--t-small); }
.site-foot .fine {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--edge-quiet);
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.55;
}

@media (min-width: 34rem) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   14. NOTHING ESCAPES ITS OWN BORDER

   Kept from the previous sheet because it fixed a real, measured bug: in
   tight mode the five case tabs shared one fixed row, so "Progress" needed
   73px of label inside a 71px pill and hung over both edges. A shared row
   that shrinks can only ever be tuned for the labels that exist today, so
   the row scrolls and every pill takes its natural width instead.
   ========================================================================== */

.case-folder .folder-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  scroll-padding-inline: var(--s-2);
  /* A mask reads alpha only, so the colour here does no work beyond being
     opaque. It is a token so this sheet holds at zero literal colours. */
  -webkit-mask-image: linear-gradient(to right, var(--ink) 0,
    var(--ink) calc(100% - 1.4rem), transparent 100%);
  mask-image: linear-gradient(to right, var(--ink) 0,
    var(--ink) calc(100% - 1.4rem), transparent 100%);
}
.case-folder .folder-tabs::-webkit-scrollbar { display: none; }
.case-folder .folder-tabs > a {
  flex: 0 0 auto;
  min-width: max-content;
  flex-direction: row;
  align-items: center;
  gap: var(--s-1);
  padding-inline: var(--s-3);
  white-space: nowrap;
}
.case-folder .folder-tabs > a .ftab-t { white-space: nowrap; overflow-wrap: normal; }

/* The general form: anything with a border and a label keeps the label
   inside, and grows rather than letting the text hang over the rim. */
.btn,
.act,
.cta,
.pill,
.pack-cta,
.chip-label,
.case-folder .folder-tabs > a {
  overflow: visible;
  min-width: 0;
  text-overflow: clip;
}
.act,
.btn,
.cta {
  white-space: normal;
  overflow-wrap: anywhere;
}
.act > span,
.btn > span,
.cta > span { min-width: 0; }

/* THE PRESS. A phone has no hover, so the affordance has to live in the tap.
   Every one of these is something a finger is meant to land on, and every one
   of them moves under it. This is the one piece of feedback the previous
   sheet got right and it survives the rewrite intact. */
.slot,
.chip-label,
.pack-cta,
.attach-btn,
.chat-expand,
.nav-toggle,
.cog-btn,
.case-folder .folder-tabs > a,
.svc-card,
.pack,
.folder {
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.slot:active,
.chip-label:active,
.pack-cta:active,
.attach-btn:active,
.chat-expand:active,
.nav-toggle:active,
.cog-btn:active,
.case-folder .folder-tabs > a:active,
.svc-card:active,
.pack:active {
  transform: translateY(1px) scale(.99);
}

/* Disabled must not look tappable. */
.btn:disabled,
.btn[aria-disabled="true"],
.slot[disabled],
.slot[aria-disabled="true"] {
  box-shadow: none;
  transform: none;
  opacity: .38;
}


/* ==========================================================================
   15. THE CONTRAST SCHEME

   Everything above is expressed in surface, edge and shadow. Contrast turns
   the shadows off in the token block, so the ladder has to be carried by
   border weight there instead. Same three step ranking, drawn with the one
   tool that scheme allows.
   ========================================================================== */

:root[data-scheme="contrast"] .card,
:root[data-scheme="contrast"] .panel,
:root[data-scheme="contrast"] .day,
:root[data-scheme="contrast"] .pack,
:root[data-scheme="contrast"] .svc-card,
:root[data-scheme="contrast"] .faq,
:root[data-scheme="contrast"] .agreement,
:root[data-scheme="contrast"] .act,
:root[data-scheme="contrast"] .btn { border-width: 2px; }

:root[data-scheme="contrast"] .card-lit,
:root[data-scheme="contrast"] .land-sec.hero,
:root[data-scheme="contrast"] .confirm-banner,
:root[data-scheme="contrast"] .intro-card,
:root[data-scheme="contrast"] .settings-card,
:root[data-scheme="contrast"] .act-c,
:root[data-scheme="contrast"] .cta,
:root[data-scheme="contrast"] .btn.glow { border-width: 3px; }

:root[data-scheme="contrast"] .card-quiet,
:root[data-scheme="contrast"] .trust,
:root[data-scheme="contrast"] .slot,
:root[data-scheme="contrast"] .step-rail li,
:root[data-scheme="contrast"] .after-list li,
:root[data-scheme="contrast"] .timeline li,
:root[data-scheme="contrast"] .pill,
:root[data-scheme="contrast"] .folder-tabs > a { border-width: 1px; }

:root[data-scheme="contrast"] .pill.on,
:root[data-scheme="contrast"] .folder-tabs > a.on,
:root[data-scheme="contrast"] .folder-tabs > a.active,
:root[data-scheme="contrast"] .slot.selected {
  border-width: 3px;
  border-color: var(--cyan);
}


/* ==========================================================================
   16. THE ENHANCE TAB

   Eric: "enhancements need to be their own shiny special diamond category."
   Four of the five case tabs are places to read something the client already
   has. One is the place where something is offered. It is the exception the
   rest of this sheet exists to make possible: with every other tab quiet,
   one marked tab reads as an invitation rather than as more filing.
   ========================================================================== */

.case-folder .folder-tabs > a[data-page="addons"] {
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line));
  background: color-mix(in srgb, var(--magenta) 10%, var(--sur-quiet));
  color: var(--ink);
  font-weight: 700;
}
.case-folder .folder-tabs > a[data-page="addons"] .ftab-ic { color: var(--magenta); }
.case-folder .folder-tabs > a[data-page="addons"].on {
  border-color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 16%, var(--sur-lit));
  box-shadow: var(--el-1);
}

#addons .case-sec-h,
[data-page-pane="addons"] .case-sec-h { color: var(--magenta); }

:root[data-scheme="contrast"] .case-folder .folder-tabs > a[data-page="addons"] {
  background: none;
  border-width: 3px;
  border-color: var(--magenta);
}
:root[data-scheme="contrast"] #addons .case-sec-h,
:root[data-scheme="contrast"] [data-page-pane="addons"] .case-sec-h { color: var(--ink); }


/* ==========================================================================
   17. NARROW PHONE TUNING
   ========================================================================== */

@media (max-width: 430px) {
  :root { --pad-x: var(--s-3); }
  main { gap: var(--s-4); }
  .bar-inner { padding-inline: var(--s-3); }
  .land-sec.hero,
  .land-sec.closing { padding: var(--s-4) var(--s-3); }
  .act { min-height: 58px; }
  .act-c { min-height: 62px; }
  .step-rail .t { font-size: var(--t-micro); }
  .hiw li.step-row { padding-left: var(--s-5); }
  .hiw .step-card { padding: var(--s-3) var(--s-2); }
  .pack { padding: var(--s-3); }
}

@media (max-width: 350px) {
  .trust { grid-template-columns: 1fr; }
  .step-rail { display: grid; grid-template-columns: 1fr; }
  .step-rail li { min-height: 48px; }
}


/* ==========================================================================
   16. DAYLIGHT CHOREOGRAPHY (visual director pass, 2026-08-29)

   The failure this section exists to prevent: everything redesigned, and
   everything still at equal visual weight. Five planes, stated once:

     P0 environment   the powder ground, washes, and the deep navy band
     P1 information   open text on the ground, hairline rules, no box
     P2 interactive   white card, ink hairline, one pixel of lift (--el-1)
     P3 important     white card, real shadow (--el-2/3), stronger type
     P4 the action    the one filled button, lit (--el-cta), in its own zone

   Anything below that reads "card by default" got demoted to P1 here. The
   pocket motif from the logo appears exactly three times in the app: the
   featured service card, the conversion zone, and the case masthead. A motif
   a user consciously notices is a costume; three is a signature.
   ========================================================================== */

/* ---- P4: the primary action, rebuilt as a physical object ---------------
   Navy-to-denim vertical fill, crisp upper highlight, believable depth, a
   pressed state that actually compresses, a focus ring that cannot be
   missed, and a disabled state that looks intentional rather than broken. */
.cta,
.act-c,
.btn.glow {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 86%, white) 0%,
    var(--cyan) 45%,
    color-mix(in srgb, var(--cyan) 82%, var(--deep-2)) 100%);
  border: 1px solid color-mix(in srgb, var(--cyan) 70%, var(--deep-2));
  color: var(--on-accent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 10px 24px color-mix(in srgb, var(--cyan) 32%, transparent),
    0 2px 5px color-mix(in srgb, var(--deep-2) 28%, transparent);
}
.cta:hover,
.act-c:hover,
.btn.glow:hover { filter: brightness(1.05); }
.cta:active,
.act-c:active,
.btn.glow:active {
  transform: translateY(1.5px) scale(.995);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 4px 10px color-mix(in srgb, var(--cyan) 26%, transparent);
  filter: brightness(.97);
}
.cta:focus-visible,
.act-c:focus-visible,
.btn:focus-visible,
.act:focus-visible,
.pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled],
.cta:disabled {
  background: var(--sur-quiet);
  border-color: var(--edge-quiet);
  color: var(--muted);
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: not-allowed;
}

/* ---- P0: the deep navy band ---------------------------------------------
   Full bleed inside main's padding, a soft curved shoulder at the top, its
   own ink. This is where a light page earns its value contrast. */
.sec-deep {
  position: relative;
  margin-inline: calc(var(--pad-x) * -1);
  padding: var(--s-5) var(--pad-x);
  border-radius: 30px 30px 0 0;
  background:
    radial-gradient(120% 70% at 85% -10%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 55%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--deep-ink);
}
.sec-deep + .sec-deep { border-radius: 0; margin-top: calc(var(--s-5) * -1); }
.sec-deep:last-child { margin-bottom: calc(var(--s-6) * -1); padding-bottom: var(--s-6); }
.sec-deep > h2,
.sec-deep h2 { color: var(--deep-ink); }
.sec-deep .dim,
.sec-deep .muted,
.sec-deep .small { color: var(--deep-dim); }
.sec-deep .eyebrow { color: var(--deep-dim); }
.sec-deep hr { border-color: var(--deep-line); }
.sec-deep .btn.ghost {
  border: 1px solid var(--deep-line);
  color: var(--deep-ink);
}
.sec-deep .btn.ghost:hover { background: rgba(255, 255, 255, .07); }

/* ---- the hero, composed rather than stacked ----------------------------- */
.land-sec.hero {
  padding-top: calc(var(--s-5) + 1.4rem);
  overflow: visible;
}
/* The brand object. Real, lit, and half out of the frame: it overlaps the
   hero's top edge the way the heart overlaps the pocket on the tile. */
.land-sec.hero > .hero-logo {
  position: absolute;
  z-index: 2;
  top: -1.35rem;
  right: var(--s-4);
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 24%;
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--deep-2) 26%, transparent),
    0 2px 6px color-mix(in srgb, var(--deep-2) 18%, transparent);
  transform: rotate(3deg);
}
/* The glow pool under it: localized light, not a page-wide wash. */
.land-sec.hero > .hero-halo {
  position: absolute;
  z-index: 0;
  top: -4rem;
  right: -3rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.land-sec.hero h1 { max-width: 12ch; }
@media (min-width: 700px) {
  .hero-logo { width: 7.5rem; height: 7.5rem; right: var(--s-6); }
  .land-sec.hero h1 { max-width: 16ch; }
}

/* The hero's own action sits in a pocket: the card's lower band, a shade
   deeper, holding the one thing to press. Pocket appearance one of three. */
.hero-pocket {
  margin: var(--s-4) calc(var(--s-4) * -1) calc(var(--s-5) * -1);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--edge-quiet);
  border-radius: 22px 22px 0 0;
  background: var(--sur-quiet);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--deep-2) 7%, transparent) inset;
}
.hero-pocket .acts { margin-top: 0; }
.hero-pocket .actions { margin-top: var(--s-2); }

/* Trust chips ride the hero's bottom shoulder: two planes, deliberately
   overlapped, which is what stops the page reading as a single column. */
main > .trust {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--s-5) * -1 + .4rem);
  margin-inline: var(--s-2);
  background: var(--sur-floating);
  border: 1px solid var(--edge-base);
  box-shadow: var(--el-2);
}

/* ---- the service shelf --------------------------------------------------
   One featured offer at P3, two quiet doors at P2. Equal cards read as a
   catalogue; a shelf with one thing forward reads as a recommendation. */
.svc-card {
  box-shadow: var(--el-1);
}
.svc-card.svc-feat {
  background: var(--sur-floating);
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
  box-shadow: var(--el-3);
}
.svc-card.svc-feat .svc-price { color: var(--cyan); font-size: 1.5rem; }
/* The card's lower edge is its pocket: the walk-in line lives in it. */
.svc-card .svc-go {
  display: block;
  margin: var(--s-2) calc(var(--s-3) * -1) calc(var(--s-3) * -1);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
  border-radius: 0 0 var(--r-2) var(--r-2);
  color: var(--cyan);
  font-weight: 700;
}

/* ---- the conversion zone ------------------------------------------------
   site.css still gives .land-sec.closing its old card fill at (0,2,0), so
   the band restates its ground at (0,3,0) from this later sheet. */
.land-sec.closing.sec-deep {
  border: 0;
  background:
    radial-gradient(120% 70% at 85% -10%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 55%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  background-image:
    radial-gradient(120% 70% at 85% -10%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 55%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  box-shadow: none;
  border-radius: 30px 30px 0 0;
}
/* A deep band holding one white card holding one action: restrained
   surroundings, a bright object, physically nearer than everything else.
   Pocket appearance two of three: the card's lower band holds the button. */
.sec-deep .convert {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) 0;
  border-radius: var(--r-3);
  background: var(--sur-floating);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 30px 70px rgba(4, 12, 28, .45), 0 1px 0 #FFFFFF inset;
  color: var(--ink);
  text-align: center;
}
.sec-deep .convert h2 { color: var(--ink); margin: 0; }
.sec-deep .convert .dim { color: var(--dim); }
.sec-deep .convert .close-line { justify-content: center; }
.convert-pocket {
  margin: var(--s-2) calc(var(--s-4) * -1) 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--edge-quiet);
  border-radius: 20px 20px var(--r-3) var(--r-3);
  background: var(--sur-quiet);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--deep-2) 7%, transparent) inset;
}
.convert-pocket .actions { justify-content: center; margin: 0; }
.convert-pocket .btn { width: 100%; max-width: 24rem; justify-content: center; }

/* ---- the sticky booking action ------------------------------------------
   Appears only after the hero's own CTA has scrolled away, disappears at
   the conversion zone, and respects the home indicator. A dock, not an ad. */
.sticky-book {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 60;
  width: min(92vw, 26rem);
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  transition: transform var(--mo-slow) var(--ease), opacity var(--mo-slow) var(--ease);
  pointer-events: none;
}
.sticky-book.on {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-book .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;
  width: 100%;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 1.02rem;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-book { transition: none; }
}
@media (min-width: 1000px) {
  /* Desktop keeps the page's own rhythm; a dock is a thumb affordance. */
  .sticky-book { display: none; }
}

/* ---- larger canvases ----------------------------------------------------
   The phone composition holds to 700px; above it the hero becomes two true
   columns and the deep band breathes wider. */
@media (min-width: 900px) {
  /* One content width on a desktop: the nav, the page and the footer's
     inner wrapper all sit on --max-content. Three widths (735px nav, 1180px
     main, full-bleed footer) read as three different pages. */
  main,
  .bar-inner,
  .site-foot .foot-inner { max-width: var(--max-content); margin-inline: auto; width: 100%; }
  .sec-deep { border-radius: 34px; margin-inline: 0; padding-inline: var(--s-5); }
  .sec-deep:last-child { margin-bottom: 0; }
  /* On a wide canvas the pocket lays its two doors on one line: the filled
     action first, the ghost beside it, neither centred into orphan space. */
  .hero-pocket { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .hero-pocket .acts { flex: 0 1 auto; min-width: 24rem; margin: 0; }
  .hero-pocket .actions { margin: 0; }
  .hero-pocket .webapp-note { flex-basis: 100%; margin: 0; justify-content: flex-start; }
}

/* ---- the booking page vignette (Eric, 2026-08-29) -----------------------
   "Add a subtle gradient vignette to give it depth on the booking page."
   One fixed elliptical layer: clear through the middle where every word and
   field lives, deepening toward the corners in the scheme's own deep navy,
   so the form reads as sitting in a pool of light. Under the sticky bar and
   every overlay (they live at 40 and above), over the page itself, and
   untouchable (pointer-events none). High contrast drops it: that scheme
   exists so nothing is subtle. */
.page-vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 14%,
      transparent 52%,
      color-mix(in srgb, var(--deep-2) 7%, transparent) 78%,
      color-mix(in srgb, var(--deep-2) 16%, transparent) 100%);
}
:root[data-scheme="contrast"] .page-vignette { display: none; }

/* ==========================================================================
   By the numbers, 2026-09. Four measured figures as tiles, the rest as a
   ledger. Tokens only, like everything above: the figure carries the ink,
   the label the dim, and the tile is card weight so a number never fights
   the one lit button on the page.
   ========================================================================== */
.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.numbers .tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 96px;
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--el-1);
}
a.tile:hover { border-color: var(--edge-lit); background: var(--sur-lit); }
.numbers .tile b {
  font-size: var(--t-h2);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.numbers .tile span {
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.3;
}
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.ledger li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--edge-quiet);
}
.ledger li:first-child { border-top: 0; }
.ledger b {
  flex: 0 0 4.2rem;
  font-size: var(--t-h3);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ledger span { color: var(--dim); font-size: var(--t-small, .95rem); line-height: 1.4; }
@media (min-width: 640px) {
  .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   18. LANDING, 2026-09: LOOK A, "CLINIC NOTE"

   Eric picked it from three (2026-09-02: "I like A best"). Paper-scheme
   tokens by default on the landing page (index.html names its light default;
   a stored scheme still wins), a serif for display, ruled bands instead of
   cards, no shadows, a numbered left rail for the steps. Everything below
   is scoped to body.landing, reads tokens only, and leaves every other page
   exactly as it was. The one literal colour set is Google's wordmark, which
   is Google's mark and not ours.
   ========================================================================== */

/* The two faces, self-hosted latin subsets (Google Fonts' own woff2 files,
   fetched 2026-09-02). Variable: one file each carries every weight used. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
}

body.landing {
  font-family: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.02rem;
}
body.landing h1,
body.landing h2,
body.landing h3,
body.landing .num {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}
body.landing .land-sec > h2 { font-size: 1.65rem; line-height: 1.15; }

/* Ruled bands: a hairline above each section, air below the rule. */
body.landing .land-sec.ruled {
  padding-top: var(--s-4);
  border-top: 1px solid var(--edge-base);
}

/* ---- the hero: a paper card, the tile small at the top left ---------- */
body.landing .land-sec.hero {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  box-shadow: none;
  overflow: visible;
}
/* The tile, small and static at the top left. Written at the specificity
   of the composed hero's own rule (.land-sec.hero > .hero-logo, section 16)
   plus the page scope, or that rule keeps the tile riding the top edge. */
body.landing .land-sec.hero > .hero-logo {
  position: static;
  top: auto;
  right: auto;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--s-1);
  border-radius: 14px;
  transform: none;
  box-shadow: none;
}
body.landing .land-sec.hero h1 { max-width: none; }
body.landing .hero-eyebrow { margin: 0; }
body.landing .land-sec.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 9vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}
body.landing .land-sec.hero .hero-sub { margin-top: var(--s-1); color: var(--ink); font-size: 1.08rem; line-height: 1.5; }
body.landing .hero-cred {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.5;
}
body.landing .land-sec.hero .hero-pocket {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: var(--s-3) 0 0;
  border: 0;
  border-top: 1px solid var(--edge-quiet);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.landing .land-sec.hero .hero-pocket .acts { min-width: 0; margin: 0; }
body.landing .acts { display: grid; gap: var(--s-2); margin: 0; }
body.landing .act { box-shadow: none; }
body.landing .act-c { box-shadow: none; }
body.landing .hero-fine { margin: 0; color: var(--dim); font-size: var(--t-small); line-height: 1.45; }

/* ---- you might need an advocate if ----------------------------------- */
body.landing .needs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
body.landing .needs-list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--soft);
  line-height: 1.5;
}
body.landing .needs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--cyan);
}

/* ---- how it works: the numbered left rail ----------------------------- */
body.landing .steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
body.landing .steps li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: var(--s-2);
  position: relative;
  padding-bottom: var(--s-3);
}
body.landing .steps li::before {
  content: '';
  position: absolute;
  left: calc(1.05rem - .5px);
  top: 2.1rem;
  bottom: 0;
  border-left: 1px solid var(--edge-base);
}
body.landing .steps li:last-child { padding-bottom: 0; }
body.landing .steps li:last-child::before { content: none; }
body.landing .num {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--edge-lit);
  border-radius: 50%;
  background: var(--sur-base);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}
body.landing .steps li > div { display: grid; gap: .15rem; padding-top: .25rem; }
body.landing .steps strong { color: var(--ink); }
body.landing .steps span { color: var(--soft); line-height: 1.5; }

/* ---- who you're hiring ------------------------------------------------ */
body.landing .who-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}
body.landing .portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--edge-base);
}
body.landing .who-name { color: var(--ink); font-weight: 600; line-height: 1.45; }
body.landing .who-link {
  color: var(--cyan);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.landing .who-quote {
  margin: 0;
  padding: 0 0 0 var(--s-3);
  border-left: 2px solid var(--edge-lit);
}
body.landing .who-quote p {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: 'opsz' 36;
}

/* ---- what clients say: the Google header, the themes, the rail --------- */
body.landing .ghead {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
}
body.landing .gtitle { margin: 0; font-weight: 700; color: var(--ink); }
body.landing .gword b { font-weight: 700; }
/* Google's marks, Google's colours. */
body.landing .gword b:nth-child(1), body.landing .gword b:nth-child(4) { color: #4285F4; }
body.landing .gword b:nth-child(2), body.landing .gword b:nth-child(6) { color: #EA4335; }
body.landing .gword b:nth-child(3) { color: #FBBC05; }
body.landing .gword b:nth-child(5) { color: #34A853; }
:root[data-scheme="contrast"] body.landing .gword b { color: var(--ink); }
body.landing .gscore { margin: 0; display: flex; align-items: baseline; gap: .45rem; }
body.landing .gscore b { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
body.landing .stars { color: var(--gold); letter-spacing: .06em; }
body.landing .gscore .count { color: var(--dim); }
body.landing .gacts { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-1); }
body.landing .gbtn { box-shadow: none; }
body.landing .themes {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
}
body.landing .tlabel { margin: 0; font-weight: 700; color: var(--ink); }
body.landing .tsub { margin: 0; color: var(--dim); font-size: var(--t-small); }
body.landing .themes ul { margin: var(--s-1) 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
body.landing .themes li { display: flex; gap: .55rem; color: var(--soft); line-height: 1.4; }
body.landing .tick { color: var(--green); font-weight: 700; flex: none; }
body.landing .rail-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1);
}
body.landing .rv-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--edge-base);
  border-radius: 50%;
  background: var(--sur-base);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
body.landing .rv-arrow:hover { border-color: var(--edge-lit); background: var(--sur-lit); }
body.landing .reviews-track { gap: var(--s-2); }
body.landing .review {
  display: grid;
  gap: .35rem;
  flex: 0 0 17rem;
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  box-shadow: none;
}
body.landing .rv-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
body.landing .review .rv-name { color: var(--ink); font-size: var(--t-body); }
body.landing .review .rv-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.45;
  margin: 0;
}
body.landing .gmark { color: var(--dim); font-size: var(--t-micro); }

/* ---- what it costs ---------------------------------------------------- */
body.landing .reframe { margin: 0; color: var(--soft); line-height: 1.5; }
body.landing .svc-card { box-shadow: none; border-color: var(--edge-base); }
body.landing .svc-card.svc-feat { border-color: var(--cyan); }
body.landing .svc-price { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.01em; }

/* ---- straight answers ------------------------------------------------- */
body.landing .faq .q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--edge-quiet);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
body.landing .faq .q span { color: var(--dim); font-size: 1.3rem; line-height: 1; }

/* ---- the closing: a ruled band, one lit button, the number beside it -- */
body.landing .land-sec.closing {
  padding: var(--s-4) 0 0;
  border: 0;
  border-top: 1px solid var(--edge-base);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
body.landing .close-line {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font-size: 1.05rem;
}
body.landing .land-sec.closing h2 { margin: 0; }
body.landing .land-sec.closing .actions { display: grid; gap: var(--s-2); }
body.landing .land-sec.closing .btn { justify-content: center; }

/* ---- the footer's note --------------------------------------------- */
body.landing .site-foot .webapp-note {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 var(--s-2);
  color: var(--dim);
  font-size: var(--t-small);
}

@media (min-width: 640px) {
  body.landing .land-sec.closing .actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  body.landing .land-sec.hero .hero-pocket .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  body.landing .land-sec.hero .hero-pocket { display: grid; }
}