/* ═══════════════════════════════════════════════════════════════
   Fathom Staff — design system
   Structure and component vocabulary adapted from the
   datasystemspeople mockup; palette and marks are new.

   Palette: cool and workplace-facing rather than outdoors. Deep slate
   blue carries the chrome; the page ground is a cool off-white.

   The four pillar hues stay deliberately spread across the wheel —
   blue, purple, teal-green, amber — because they encode categories and
   have to survive colour-vision deficiency. An all-blue set would look
   calmer and be unreadable to a deutan viewer. The single warm hue
   (Wellbeing) is what holds that separation together, so don't cool it
   down without re-checking every adjacent pair.

   Legacy token names (--pine, --clay, --sand) are kept as aliases at the
   bottom of this block so the ~1,500 existing references keep working.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Fathom brand palette (Round one Branding Guide) ────────
     midnight tide is the text colour — the guide says no black.  */
  --midnight:    #152740;   /* main text, dark bands */
  --midnight-deep:#0e1b2e;
  --harbor:      #134C65;   /* 2nd accent */
  --seafoam:     #487F86;   /* 1st accent — links, CTAs */
  --seafoam-dark:#3a686e;
  --seafoam-lift:#6fa5ab;   /* on midnight, where seafoam is too dark */
  --coral:       #d8694f;   /* 3rd accent */
  --driftwood:   #F0ECDA;   /* page background, warmer than white */
  --paper-white: #FFFFFF;   /* cards, and grounds where driftwood is in an image */

  --ink:         #152740;
  --ink-2:       #47576b;
  --ink-3:       #566474;
  --text-dim:    rgba(240,236,218,0.86);

  /* ── Pillar identity ───────────────────────────────────────
     Set by the branding guide (Round One Fathom Branding). Two of the
     four are very light, so they are fills only — the *-text variants
     below are darkened until they clear 4.5:1 on driftwood, and are what
     carries any label or body copy in a pillar's colour.              */
  --lead:        #152740;   /* LEADERSHIP */
  --comm:        #d8694f;   /* COMMUNITY  */
  --grow:        #83bf91;   /* GROWTH     */
  --well:        #a9ccd1;   /* WELLBEING  */
  /* darkened where they carry body text on driftwood */
  --lead-text:   #152740;
  --comm-text:   #a4503c;
  --grow-text:   #4f7357;
  --well-text:   #5b6e71;

  /* ── Chart tokens ─────────────────────────────────────────── */
  --c-1: #152740;  --c-2: #d8694f;  --c-3: #83bf91;
  --c-neutral:   #566474;
  --chart-surface: #ffffff;
  --grid:        #dcd6c0;
  --track:       #e4dfcb;

  /* ── Legacy aliases — old names, brand values ─────────────── */
  --pine:        #152740;
  --pine-deep:   #0e1b2e;
  --pine-line:   rgba(240,236,218,0.14);
  --slate:       #152740;
  --slate-deep:  #0e1b2e;
  --slate-line:  rgba(240,236,218,0.14);
  --clay:        #487F86;
  --clay-dark:   #3a686e;
  --link:        #3a686e;
  --link-hover:  #2f5a5f;
  --accent:      #487F86;
  --accent-dark: #3a686e;
  --sun:         #6fa5ab;
  --sun-soft:    #cfe0e2;
  --beacon:      #6fa5ab;
  --beacon-soft: #cfe0e2;
  --spark:       #6fa5ab;
  --moss:        #8a9aa6;
  --steel:       #8a9aa6;
  --sand:        #F0ECDA;
  --sand-warm:   #e6e1cb;
  --paper:       #F0ECDA;
  --paper-cool:  #e6e1cb;

  /* sequential ramp, driftwood -> midnight */
  --seq-1: #f0ecda; --seq-2: #d6dcd4; --seq-3: #adbdc0;
  --seq-4: #7f9aa4; --seq-5: #547888; --seq-6: #2e556e; --seq-7: #152740;

  /* Sailors and Maharlika are not webfonts we hold — see BRAND-FONTS.md.
     Poppins is the body face and is loaded from Google Fonts. */
  --font-head:   'Sailors', 'Poppins', Futura, 'Trebuchet MS', sans-serif;
  --font-accent: 'Maharlika', 'Poppins', Georgia, serif;
  --font-body:   'Poppins', system-ui, -apple-system, sans-serif;

  --radius:   22px;
  --radius-s: 999px;
  --shadow:   0 4px 14px rgba(21,39,64,0.09);
  --shadow-lg:0 20px 50px rgba(0,0,0,0.30);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], div[id], h1[id], h2[id], h3[id], article[id] { scroll-margin-top: 130px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* Link text is the darker teal: --clay (#487F86) is 3.8:1 on the sand page,
   under the 4.5:1 WCAG needs for text; --link is 5.2:1 on sand and 4.7:1 on
   the warm band. --clay stays for buttons, fills and borders. */
a { color: var(--link); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--link-hover); }
/* A link inside running text is underlined, so it's never told apart by
   colour alone (WCAG 1.4.1; the 15 Oct accessibility check). Buttons,
   navigation and card links keep their own look. */
main p a:not([class*="btn"]):not([class*="nav"]):not(.mini-link),
main li a:not([class*="btn"]):not([class*="nav"]):not(.pill):not(.mini-link),
main dd a, main td a, .hint a, .form-note a, .acc-body a, .lede a, .legal-body a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
main p a:not([class*="btn"]):not(.mini-link):hover, main li a:not([class*="btn"]):not(.mini-link):hover, .hint a:hover, .acc-body a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--sun); color: var(--pine-deep);
  font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 14px 22px; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════ HEADER ═══════════════ */
.header {
  background: var(--pine);
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--pine-line);
}
.header-logo-link { display: inline-block; line-height: 0; }
.header-logo-img { height: 62px; width: auto; display: block; }
.header-nav { display: flex; gap: 30px; align-items: center; }
.header-nav a {
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.header-nav a:hover { color: var(--sun); }
.header-nav a.active { color: #8fc3c8; border-bottom: 2px solid var(--sun); padding-bottom: 4px; }
.header-nav a.nav-cta.active { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 11px; }
.nav-login {
  border: 1.5px solid rgba(255,255,255,0.5);
  padding: 10px 18px;
  border-radius: var(--radius-s);
}
.nav-login:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.nav-cta {
  background: var(--clay);
  border: 2px solid #fff;
  padding: 11px 22px;
  border-radius: var(--radius-s);
  transition: background 0.15s, color 0.15s;
}
.nav-cta:hover { background: #fff; color: var(--clay-dark); }

/* Dropdowns: the top link still goes to its page; the chevron beside it
   (and hovering) shows the pages under it. On a phone the sub-pages are
   simply listed under their parent. site.js opens and closes them. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-more {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: -8px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
}
.nav-more::before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.nav-more:hover { color: var(--sun); }
.nav-more:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.nav-group.open .nav-more::before { transform: translateY(1px) rotate(-135deg); }
.nav-sub {
  display: none; position: absolute; top: calc(100% + 12px); left: 0; z-index: 120; min-width: 210px;
  padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(14,27,46,0.28);
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }  /* keeps hover alive across the gap */
.nav-group:hover .nav-sub, .nav-group.open .nav-sub { display: block; }
.header-nav .nav-sub a {
  display: block; padding: 10px 14px; border-radius: 10px; border: 0; background: none;
  font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; white-space: nowrap; color: var(--pine);
}
.header-nav .nav-sub a:hover { background: #f0ecda; color: var(--pine); }
.header-nav .nav-sub a[aria-current="page"] { color: var(--clay); }

/* mobile nav toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-s);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}

/* ═══════════════ PILL SUB-NAV ═══════════════ */
.pill-subnav {
  background: var(--pine-deep);
  padding: 18px 48px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 4px solid var(--sun);
}
.pill { display: inline-flex; line-height: 0; transition: transform 0.18s; border-radius: 12px; }
/* "Our pillars" (20 Oct 2026, with Rob): named before they're referenced. */
.pill-label { margin: 0 6px 0 0; font-family: var(--font-head); font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(240,236,218,.82); align-self: center; }
@media (max-width: 640px) {
  /* Two by two on a phone (Annie, 22 Oct 2026), not three and one. */
  .pill-subnav { display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
    justify-items: center; gap: 10px 12px; }
  .pill-label { grid-column: 1 / -1; text-align: center; margin: 0 0 2px; }
}
.pill img { height: 40px; width: auto; display: block; border: 2px solid #fff; border-radius: 12px; }
.pill:hover { transform: translateY(-2px); }

/* ═══════════════ SECTIONS & TYPE ═══════════════ */
section { padding: 88px 48px; }
.container { max-width: 1140px; margin: 0 auto; }
.container-narrow { max-width: 820px; margin: 0 auto; }
.container-wide { max-width: 1280px; margin: 0 auto; }

.band-sand { background: var(--sand); }
.band-warm { background: var(--sand-warm); }
.band-pine { background: var(--pine); color: #fff; }
.band-pine .section-title, .band-pine h2, .band-pine h3 { color: #fff; }
.band-pine .eyebrow { color: var(--sun); }
.band-pine p { color: var(--text-dim); }
.band-sun  { background: var(--sun); color: var(--pine-deep); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800; letter-spacing: -0.005em; line-height: 1.06;
  color: var(--pine); text-transform: uppercase;
}
.section-title .line { display: block; }
.section-title .accent { color: var(--clay); }
.band-pine .section-title .accent { color: var(--sun); }
.lede {
  font-size: 20px; line-height: 1.55; color: var(--ink-2);
  max-width: 780px; margin-top: 20px;
}
.band-pine .lede { color: var(--text-dim); }

/* ═══════════════ HERO ═══════════════ */
.hero { background: var(--sand); padding: 88px 48px 56px; }
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.05;
  color: var(--pine); text-transform: uppercase;
}
.hero-title .line { display: block; }
.hero-title .accent { color: var(--clay); }
/* Landing hero: a night sky with twinkling stars (starfield.js, Annie
   19 Oct 2026). Deep navy into the header above it; light text on top. */
.hero.hero-night { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #1d3a57 0%, #12253d 45%, #0b1524 100%); }
.hero-night .hero-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-night .hero-title { color: #fff; }
.hero-night .hero-title .accent { color: #8fc3c8; }
.hero-night .hero-lede { color: rgba(240,236,218,0.88); }
.hero-night .scroll-cue { color: rgba(240,236,218,0.7); }
.hero-night .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.85); background: transparent; }
.hero-night .btn-secondary:hover { background: #fff; color: var(--pine); border-color: #fff; }
.hero-lede {
  font-size: 22px; line-height: 1.55; color: var(--ink-2);
  font-weight: 400; max-width: 860px; margin-top: 26px;
}
.pillar-word {
  font-family: var(--font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.06em; display: inline-block;
}
.pw-lead { color: var(--lead-text); }
.pw-comm { color: var(--comm-text); }
.pw-grow { color: var(--grow-text); }
.pw-well { color: var(--well-text); }
.cta-row { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }

/* Page identity block */
.page-identity { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.page-identity-icon {
  flex-shrink: 0; width: 84px; height: 84px;
  background: #fff; border: 4px solid var(--pine); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.page-identity-icon svg {
  width: 46px; height: 46px; stroke: var(--pine); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.page-identity-icon.dark { background: var(--pine-deep); border-color: var(--sun); }
.page-identity-icon.dark svg { stroke: var(--sun); }
.page-identity-eyebrow {
  font-family: var(--font-head); font-size: 14px; font-weight: 800;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--link); margin-bottom: 8px;
}
.band-pine .page-identity-eyebrow { color: var(--sun); }
.page-title {
  font-family: var(--font-head);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800; letter-spacing: -0.005em; line-height: 1.0;
  color: var(--pine); text-transform: uppercase;
}
.band-pine .page-title { color: #fff; }

/* ═══════════════ BUTTONS ═══════════════
   Convention: filled buttons invert to outlined; outlined fill in. */
.btn-primary, .btn-secondary, .btn-ghost,
.btn-sun, .btn-primary-inverse, .btn-secondary-inverse {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 16px 30px; border-radius: var(--radius-s);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-primary { background: var(--clay); color: #fff; border: 2px solid #fff; }
.btn-primary:hover { background: #fff; color: var(--clay-dark); border-color: var(--clay); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--pine); border: 2px solid var(--pine); }
.btn-secondary:hover { background: var(--pine); color: #fff; transform: translateY(-1px); }
.btn-secondary-inverse { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-secondary-inverse:hover { background: #fff; color: var(--pine); }
.btn-sun { background: var(--sun); color: var(--pine-deep); border: 2px solid var(--sun); }
.btn-sun:hover { background: transparent; color: var(--sun); border-color: var(--sun); }
.btn-lg { font-size: 17px; padding: 20px 42px; }
button.btn-primary, button.btn-secondary { font-family: var(--font-head); }

/* ═══════════════ FRAMEWORK BLOCK ═══════════════ */
.framework-grid {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 48px; align-items: stretch; margin-top: 48px;
}
.framework-mark-wrap {
  background: var(--sand); padding: 40px; border-radius: 12px;
  border: 8px solid var(--sun); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.framework-mark-wrap img { width: 100%; height: auto; display: block; }
.pillar-card {
  background: var(--sand); border-radius: 12px; padding: 40px 36px;
  box-shadow: var(--shadow-lg); border: 8px solid var(--sun);
}
.pillar-list { display: flex; flex-direction: column; gap: 26px; }
.pillar-row { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; }
.framework-grid > * { min-width: 0; }
.pillar-pill img { height: 46px; width: auto; display: block; border-radius: 8px; }
.pillar-subtitle {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 5px;
}
.pillar-desc { color: var(--ink); font-size: 17px; line-height: 1.5; font-weight: 500; }
.framework-closer {
  margin: 56px auto 0; font-size: 24px; font-weight: 600;
  color: var(--sun); max-width: 900px; line-height: 1.5; text-align: center;
}

/* ═══════════════ TWO BIG CARDS ═══════════════ */
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }
.card { padding: 40px 34px; border-radius: var(--radius); display: flex; flex-direction: column; }
.card-dark { background: var(--pine); color: #fff; }
.card-sun { background: var(--sun); color: var(--pine-deep); position: relative; overflow: hidden; }
.ribbon::before {
  content: attr(data-ribbon);
  position: absolute; top: 20px; right: -40px;
  background: var(--pine-deep); color: #fff;
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; padding: 7px 46px; transform: rotate(35deg);
}
.card-eyebrow {
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin-bottom: 12px;
}
.card-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 800;
  letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px;
}
/* "The Season Dashboard" stays on one line (23 Oct 2026, with Rob): both
   titles shrink with their card once it's too narrow for 30px, and the cards
   stack below 900px, before side by side gets too narrow for the titles. */
.two-cards .card { container-type: inline-size; }
.two-cards .card-title { font-size: min(30px, 7.4cqi); white-space: nowrap; }
@media (max-width: 900px) { .two-cards { grid-template-columns: 1fr; } }
.card-tagline { font-size: 17px; line-height: 1.5; font-weight: 500; margin-bottom: 20px; }
.card-body { font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
.card-dark .card-body { color: rgba(255,255,255,0.88); }
.feature-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
.feature-list li {
  padding: 12px 0 12px 34px; position: relative;
  font-size: 16px; line-height: 1.5; border-bottom: 1px solid;
}
.card-dark .feature-list li { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.95); }
.card-sun .feature-list li { border-color: rgba(31,68,54,0.22); color: var(--pine-deep); }
.feature-list li:last-child { border-bottom: none; }
.feature-list .icon { position: absolute; left: 0; top: 13px; width: 22px; height: 22px; }
.card-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.icon-line { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════ FLIP CARDS ═══════════════ */
.survey-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; }
.flip-card { perspective: 1400px; height: 372px; cursor: pointer; position: relative; display: block; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
@media (hover: hover) { .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card:focus-visible .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; display: flex; flex-direction: column;
  justify-content: center; padding: 36px 32px;
  box-shadow: 0 8px 26px rgba(31,68,54,0.20);
}
.flip-card-back { transform: rotateY(180deg); justify-content: flex-start; overflow: auto; }
.fc-lead .flip-card-front { background: var(--lead); color: #fff; }
.fc-lead .flip-card-back  { background: var(--pine); color: #fff; }
.fc-comm .flip-card-front { background: var(--comm); color: #fff; }
.fc-comm .flip-card-back  { background: var(--sand-warm); color: var(--pine); }
.fc-grow .flip-card-front { background: var(--grow); color: #fff; }
.fc-grow .flip-card-back  { background: var(--pine); color: #fff; }
.fc-well .flip-card-front { background: var(--sun); color: var(--pine-deep); }
.fc-well .flip-card-back  { background: var(--pine); color: #fff; }
.fc-pill img { height: 46px; width: auto; display: block; margin-bottom: 20px; border-radius: 8px; }
.fc-front-eyebrow {
  font-family: var(--font-head); font-size: 14px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px;
}
.fc-front-desc { font-size: 17px; line-height: 1.5; font-weight: 600; max-width: 92%; }
.fc-hint {
  position: absolute; bottom: 20px; right: 24px;
  font-family: var(--font-head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.95;
}
.fc-back-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid currentColor;
}
.fc-list { list-style: none; }
.fc-list li {
  padding: 10px 0; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid currentColor;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.fc-list li:last-child { border-bottom: none; }
.fc-list .badge {
  font-family: var(--font-head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid currentColor;
}
.flip-card-cta {
  margin-top: 18px; align-self: flex-start;
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; border-bottom: 2px solid currentColor; padding-bottom: 3px;
}
.flip-card-cta:hover { color: inherit; opacity: 0.75; }

/* ═══════════════ GENERIC CONTENT CARDS ═══════════════ */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.info-card {
  background: var(--sand-warm); padding: 36px 32px; border-radius: var(--radius);
  border-left: 6px solid var(--sun); position: relative;
}
.info-card.featured { background: var(--pine); color: #fff; border-left-color: var(--clay); }
.info-card.featured p { color: var(--text-dim); }
.info-card .label {
  display: inline-block; background: var(--clay); color: #fff;
  font-family: var(--font-head); font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 3px; margin-bottom: 18px;
}
.info-card h3 {
  font-family: var(--font-head); font-size: 25px; font-weight: 800;
  text-transform: uppercase; line-height: 1.12; margin-bottom: 14px; color: inherit;
}
.info-card p { font-size: 16px; line-height: 1.55; margin-bottom: 10px; color: var(--ink-2); }
.info-card .coming-soon {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--link); text-transform: uppercase;
}
.info-card.featured .coming-soon { color: var(--sun); }

.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.why-block h3 {
  font-family: var(--font-head); font-size: 24px; font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--pine); margin-bottom: 16px;
}
.why-block p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.why-closer {
  margin-top: 48px; padding-top: 36px; border-top: 2px solid rgba(31,68,54,0.18);
  font-size: 21px; line-height: 1.5; color: var(--pine); font-weight: 500; max-width: 880px;
}
.why-closer strong { font-weight: 700; color: var(--clay); }

/* numbered principle list */
.approach-list { list-style: none; counter-reset: ap; margin-top: 36px; }
.approach-list li {
  counter-increment: ap; position: relative; padding-left: 76px;
  margin-bottom: 30px;
}
.approach-list li::before {
  content: counter(ap, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--sun);
}
.approach-list h4 {
  font-family: var(--font-head); font-size: 19px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; color: inherit;
}

/* tri-tile row */
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
/* About: the team, why "Fathom", a different approach (Annie, 19 Oct 2026). */
.team-list { display: grid; gap: 44px; max-width: 980px; margin: 0 auto; text-align: left; }
.team-member { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 32px; align-items: start; }
.team-photo { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  background: var(--sand-warm); border: 3px dashed var(--rule-strong, #cfc8b0); color: var(--ink-2);
  font-family: var(--font-head); font-size: 34px; font-weight: 800; letter-spacing: .04em; }
img.team-photo { border: 0; }
.team-name { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--pine); margin: 6px 0 2px; }
.team-role { font-size: 15px; font-weight: 600; color: var(--link); margin: 0 0 14px; }
.team-body p:not(.team-role) { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
/* About: the three sections share one flat background with a fine rule
   between them (22 Oct 2026, with Rob). Each band's own gradient left a seam
   where one ended grey and the next began light, and the warm middle band
   added a second tone. Two classes, to beat .band-sand's gradient below. */
.band-sand.about-band { background: var(--sand); }
.about-band + .about-band { border-top: 1px solid rgba(21, 39, 64, 0.12); }
.why-fathom { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: start; text-align: left; }
.why-mark { width: 160px; height: auto; }
.why-fathom p { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.values-row { list-style: none; padding: 0; margin: 0 auto; max-width: 1080px; text-align: left; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.values-row li { background: #fff; border-radius: var(--radius); border-top: 5px solid var(--clay); padding: 26px 28px; }
.values-row h3 { font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--pine);
  text-transform: uppercase; margin: 0 0 10px; }
.values-row p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.values-row li.t-lead { border-top-color: var(--lead); }
.values-row li.t-comm { border-top-color: var(--comm); }
.values-row li.t-grow { border-top-color: var(--grow); }
.values-row li.t-well { border-top-color: var(--well); }
.closing-cta.closing-small { padding: 64px 48px; }
.closing-cta.closing-small h2 { margin-bottom: 12px; }
.closing-sub { font-size: 18px; color: rgba(240,236,218,0.85); margin: 0 0 26px; }
@media (max-width: 760px) {
  .team-member, .why-fathom { grid-template-columns: 1fr; gap: 18px; }
  .team-photo { width: 128px; height: 128px; font-size: 28px; }
  .why-mark { width: 110px; }
  .team-photo, .why-mark { justify-self: center; }   /* stacked on a phone: the faces and the mark centred (Annie, 26 Oct 2026) */
  .values-row { grid-template-columns: 1fr; }
  .closing-cta.closing-small { padding: 52px 16px; }
}

.tile {
  background: #fff; border-radius: var(--radius); padding: 30px 28px;
  border-top: 5px solid var(--moss); box-shadow: var(--shadow); color: var(--ink);
}
.tile.t-lead { border-top-color: var(--lead); }
.tile.t-comm { border-top-color: var(--comm); }
.tile.t-grow { border-top-color: var(--grow); }
.tile.t-well { border-top-color: var(--sun); }
.tile h4 {
  font-family: var(--font-head); font-size: 19px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; color: var(--pine);
}
.tile p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* callout / notes */
.callout {
  background: var(--sand-warm); border-left: 5px solid var(--clay);
  padding: 24px 28px; border-radius: var(--radius-s); margin: 28px 0;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.band-pine .callout { background: rgba(255,255,255,0.07); border-left-color: var(--sun); color: var(--text-dim); }
.note-strip {
  background: var(--sun-soft); color: #4a3708; border-left: 5px solid var(--sun);
  padding: 14px 22px; font-size: 14px; line-height: 1.55; font-weight: 500;
}
.note-strip strong { color: #3a2b05; }

/* ═══════════════ ACCORDIONS ═══════════════ */
.accordion { border-top: 1px solid rgba(31,68,54,0.18); }
.accordion summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 4px;
  position: relative; font-size: 17px; font-weight: 600; color: var(--pine);
  border-bottom: 1px solid rgba(31,68,54,0.18);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--clay);
}
.accordion[open] summary::after { content: '\2212'; }
.accordion summary:hover { background: var(--sand-warm); }
.accordion .acc-body { padding: 18px 44px 26px 4px; font-size: 16px; line-height: 1.65; color: var(--ink-2); border-bottom: 1px solid rgba(31,68,54,0.18); }
.accordion .acc-body ul { margin: 8px 0 10px 22px; }
.accordion .acc-body li { margin: 3px 0; }
.band-pine .accordion, .band-pine .accordion summary, .band-pine .accordion .acc-body { border-color: rgba(255,255,255,0.16); }
.band-pine .accordion summary { color: #fff; }
.band-pine .accordion summary::after { color: var(--sun); }

/* FAQ search (faq.js), like the dashboard's How to tab */
.faq-search { margin: 0 0 40px; max-width: 460px; }
.faq-search input { width: 100%; padding: 12px 18px; border: 1.5px solid rgba(21,39,64,0.28); border-radius: 999px;
  background: var(--paper-white); color: var(--ink); font: inherit; font-size: 16px; }
.faq-search input:focus { outline: 2px solid var(--seafoam); outline-offset: 2px; }
.faq-none { font-size: 16px; color: var(--ink-2); margin: 0 0 44px; }
.faq-none a { color: var(--seafoam-dark); font-weight: 600; }
.faq-group[hidden], .eyebrow[hidden], .accordion[hidden] { display: none !important; }
.band-pine .accordion summary:hover { background: rgba(255,255,255,0.06); }
.band-pine .accordion .acc-body { color: var(--text-dim); }

/* ═══════════════ FORMS ═══════════════ */
.form-card {
  background: #fff; padding: 36px 34px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid #c6cdc8; border-radius: var(--radius-s);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55;
  border-radius: var(--radius); padding: 16px 20px; }   /* several lines: card corners, not a pill, and room from the edge */
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
/* Benchmarks table (network.js): the line under "Return intent", on the dashboard and network.html. */
.bm-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine); outline-offset: 0; }
.field .hint { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.req { color: var(--clay); }

.opt-in-box { margin-top: 20px; padding: 24px; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; }
.opt-in-label {
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sun); margin-bottom: 16px;
}
.opt-in-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.opt-in-row:last-child { border-bottom: none; }
.opt-in-row input[type="checkbox"] { width: 21px; height: 21px; margin-top: 3px; flex-shrink: 0; accent-color: var(--clay); }
.opt-in-text strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; color: #fff; }
.opt-in-text small { display: block; font-size: 14px; color: rgba(255,255,255,0.86); line-height: 1.5; }
.check-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.check-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--clay); }

.stay-form { max-width: 720px; margin: 0 auto; }
.stay-form h2 {
  font-family: var(--font-head); font-size: clamp(28px, 4.2vw, 44px); font-weight: 800;
  text-transform: uppercase; text-align: center; color: #fff; margin-bottom: 14px;
}
.stay-form .stay-lede { text-align: center; font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 36px; }
.stay-form .field label { color: var(--sun); }
.stay-submit-row { margin-top: 30px; text-align: center; }

/* topic chips (radio) */
.chip-set { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-set input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-set label {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid #c6cdc8; background: #fff; cursor: pointer;
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pine);
  transition: all 0.15s;
}
.chip-set label:hover { border-color: var(--pine); }
.chip-set input:checked + label { background: var(--pine); border-color: var(--pine); color: #fff; }
.chip-set input:focus-visible + label { outline: 3px solid var(--sun); outline-offset: 2px; }
.chip-set input:checked + label.c-lead { background: var(--lead); border-color: var(--lead); }
.chip-set input:checked + label.c-comm { background: var(--comm); border-color: var(--comm); }
.chip-set input:checked + label.c-grow { background: var(--grow); border-color: var(--grow); }
.chip-set input:checked + label.c-well { background: var(--sun); border-color: var(--sun); color: var(--pine-deep); }

/* ═══════════════ NEWSLETTER STRIP ═══════════════ */
.newsletter { background: var(--sun); color: var(--pine-deep); padding: 56px 48px; }
.newsletter-grid {
  max-width: 1140px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: center;
}
.newsletter h3 {
  font-family: var(--font-head); font-size: 30px; font-weight: 800;
  text-transform: uppercase; line-height: 1.15; margin-bottom: 10px;
}
.newsletter p { font-size: 16px; font-weight: 500; line-height: 1.5; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1 1 240px; padding: 15px 18px;
  font-family: var(--font-body); font-size: 16px;
  border: 1.5px solid rgba(31,68,54,0.35); border-radius: 3px;
  background: #fff; color: var(--ink);
}
.newsletter-form input::placeholder { color: var(--ink-3); }
.newsletter-form button {
  background: var(--pine); color: #fff; font-family: var(--font-head);
  font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 26px; border: none; border-radius: 3px; cursor: pointer;
}
.newsletter-form button:hover { background: var(--pine-deep); }

/* ═══════════════ CLOSING CTA ═══════════════ */
.closing-cta { background: var(--pine); color: #fff; text-align: center; padding: 92px 48px; }
.closing-cta h2 {
  font-family: var(--font-head); font-size: clamp(28px, 4.2vw, 44px); font-weight: 800;
  text-transform: uppercase; line-height: 1.06; color: #fff; margin-bottom: 32px;
}
.closing-meta { margin-top: 28px; font-size: 18px; color: var(--sun); font-weight: 500; }

/* ═══════════════ FOOTER ═══════════════ */
.footer { background: var(--pine-deep); color: rgba(255,255,255,0.88); padding: 68px 48px 32px; }
.footer-grid {
  max-width: 1140px; margin: 0 auto; display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand img { width: 280px; max-width: 100%; margin-bottom: 20px; }
.footer-tagline { font-size: 15px; line-height: 1.55; color: var(--text-dim); max-width: 320px; }
.footer-col h4 {
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: rgba(255,255,255,0.84); font-size: 15px; font-weight: 500; }
.footer-col ul li a:hover { color: var(--sun); }
.footer-social {
  margin-top: 16px; width: 44px; height: 44px;
  border: 1.5px solid rgba(255,255,255,0.42); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: all 0.15s;
}
.footer-social:hover { border-color: var(--sun); color: var(--sun); }
.footer-social svg { width: 24px; height: 24px; fill: currentColor; }
.footer-bottom {
  max-width: 1140px; margin: 0 auto; padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: rgba(255,255,255,0.62); flex-wrap: wrap; gap: 14px;
}
.footer-bottom a { color: rgba(255,255,255,0.72); margin-left: 22px; }
.footer-bottom a:hover { color: #fff; }

/* ═══════════════ COOKIE BANNER ═══════════════ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--pine-deep); color: #fff; padding: 18px 28px;
  display: flex; justify-content: center; align-items: center; gap: 22px;
  z-index: 200; box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  flex-wrap: wrap; border-top: 3px solid var(--sun);
}
.cookie-banner p { font-size: 14px; max-width: 700px; line-height: 1.5; }
.cookie-banner a { color: var(--sun); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner button {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 3px; border: none; cursor: pointer;
}
.cookie-banner .btn-accept { background: var(--clay); color: #fff; }
.cookie-banner .btn-accept:hover { background: var(--clay-dark); }
.cookie-banner .btn-decline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.cookie-banner .btn-decline:hover { border-color: #fff; }

/* ═══════════════ STAGE / SCORE PRIMITIVES (shared) ═══════════════ */
.stage-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid transparent; white-space: nowrap;
}
/* Stage is ordinal → one hue, light→dark. Never color alone: each pill
   carries its stage name as text, and a filled-dot glyph count as backup. */
/* Four stages since 16 Oct 2026 (Rob): Needs Attention, Building, Performing, Thriving. */
.stage-1 { background: var(--seq-1); color: #14402c; border-color: #b9cfc0; }
.stage-2 { background: var(--seq-3); color: #10331f; border-color: var(--seq-4); }
.stage-3 { background: var(--seq-5); color: #ffffff; border-color: var(--seq-5); }
.stage-4 { background: var(--seq-7); color: #ffffff; border-color: var(--seq-7); }

/* ═══════════════ RESPONSIVE ═══════════════ */
/* On a phone, Book a demo stays beside Menu rather than inside it. */
.nav-demo-phone { display: none; }
@media (max-width: 980px) {
  .header { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .header-logo-img { height: 48px; }
  .nav-toggle { display: inline-block; }
  .nav-demo-phone {
    display: inline-block; margin-left: auto; padding: 10px 16px; border-radius: 999px;
    background: var(--clay); border: 1.5px solid #fff; color: #fff;
    font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap;
  }
  .nav-demo-phone:hover { background: #fff; color: var(--clay-dark); }
  .header-nav .nav-login[href$="bookings.html"] { display: none; }
}
@media (max-width: 440px) {
  /* Logo, Book a demo and Menu on one line on a phone. */
  .header { padding: 12px 16px; gap: 8px; }
  .header-logo-img { height: 34px; }
  .nav-demo-phone, .nav-toggle { padding: 8px 10px; font-size: 12px; letter-spacing: 0.04em; }
  .header-nav {
    display: none; width: 100%; flex-direction: column;
    align-items: flex-start; gap: 4px; padding: 12px 0 4px;
    border-top: 1px solid var(--pine-line); margin-top: 10px;
  }
  .header-nav.open { display: flex; }
  .header-nav a { width: 100%; padding: 12px 0; font-size: 16px; }
  .header-nav .nav-cta, .header-nav .nav-login { width: auto; padding: 12px 20px; }
  .nav-group { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-more { display: none; }
  .nav-sub, .nav-group:hover .nav-sub { display: block; position: static; min-width: 0; padding: 0 0 6px 16px;
    background: none; box-shadow: none; border-radius: 0; }
  .nav-sub::before { display: none; }
  .header-nav .nav-sub a { padding: 8px 0; font-size: 15px; color: rgba(255,255,255,0.78); }
  .header-nav .nav-sub a:hover { background: none; color: var(--sun); }
  .header-nav .nav-sub a[aria-current="page"] { color: var(--sun); }
  .pill-subnav { padding: 14px 16px; gap: 10px; }
  .pill img { height: 30px; }
  section { padding: 56px 20px; }
  .hero { padding: 56px 20px 40px; }
  .closing-cta, .newsletter, .footer { padding-left: 20px; padding-right: 20px; }
  .framework-grid { grid-template-columns: 1fr; gap: 32px; }
  .framework-mark-wrap { max-width: 300px; margin: 0 auto; padding: 28px; }
  .pillar-row { grid-template-columns: 150px 1fr; gap: 14px; }
  .pillar-pill img { height: 36px; }
  .two-cards, .why-grid, .res-grid, .survey-grid, .newsletter-grid,
  .tile-row, .form-row-2, .footer-grid { grid-template-columns: 1fr; }
  .footer-grid { gap: 32px; }
  .flip-card { height: 356px; }
  .page-identity { gap: 16px; }
  .page-identity-icon { width: 62px; height: 62px; border-radius: 10px; }
  .page-identity-icon svg { width: 34px; height: 34px; }
  .cookie-banner { padding: 14px 18px; flex-direction: column; align-items: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .flip-card-inner { transition: none; }
}

@media print {
  .header, .pill-subnav, .cookie-banner, .newsletter, .nav-toggle { display: none !important; }
  body { background: #fff; }
  section { padding: 20px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Expressive layer
   Added after the base system so it overrides without rewriting it,
   and can be deleted in one block if the direction changes.

   Borrowed energy: pill shapes, soft gradient grounds, generous
   radii, one bright accent, restrained motion.
   Kept ours: the blue palette, the arc mark, Jost + Libre Franklin.
   The header keeps its exact height on purpose — the dashboard pins
   its tab bar at top:98px, and a floating header would break it.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --radius:   22px;
  --radius-s: 999px;
  --grad-dark:  linear-gradient(140deg, #152740 0%, #123c52 48%, #16414f 100%);
  --grad-light: linear-gradient(165deg, #F5F2E4 0%, #F0ECDA 55%, #e9eae0 100%);
  --grad-warm:  linear-gradient(165deg, #EFEADA 0%, #e7e6d8 100%);
}

.band-pine { background: var(--grad-dark); }
.band-sand, .hero { background: var(--grad-light); }
.band-warm { background: var(--grad-warm); }

/* A soft bloom in the dark bands, so they read as atmosphere not a slab */
.band-pine, .closing-cta { position: relative; overflow: hidden; }
.band-pine > *, .closing-cta > * { position: relative; z-index: 1; }
.band-pine::after, .closing-cta::after {
  content: ""; position: absolute; pointer-events: none;
  right: -12%; top: -45%; width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,165,171,0.26), rgba(111,165,171,0) 68%);
}

/* Nav becomes a pill of links rather than a row of shouty capitals */
@media (min-width: 900px) {
  .header-nav {
    background: rgba(255,255,255,0.09);
    border-radius: 999px; padding: 6px 8px; gap: 2px;
  }
  .header-nav a { padding: 10px 16px; border-radius: 999px; transition: background 0.18s; }
  .header-nav a:hover { background: rgba(255,255,255,0.16); }
  .header-nav a { white-space: nowrap; }
}
/* Seven links, one row: tighten them between the menu button (980px) and full width. */
@media (min-width: 981px) and (max-width: 1240px) {
  .header-nav a { padding: 9px 11px; font-size: 13px; letter-spacing: 0.06em; }
  .header-logo-img { height: 52px; }
}

.btn-primary, .btn-secondary, .nav-cta, .btn-sun,
.btn-primary-inverse, .btn-secondary-inverse {
  border-radius: 999px;
}
.btn-primary {
  padding: 15px 32px;
  box-shadow: 0 6px 18px rgba(72,127,134,0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72,127,134,0.40); }
.btn-secondary { transition: transform 0.18s ease; }
.btn-secondary:hover { transform: translateY(-2px); }

.card, .tile, .form-card, .setting-block, .chart-card, .stat-tile, .flip-card,
.flip-card-front, .flip-card-back { border-radius: var(--radius); }

.tile, .card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tile:hover, .card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(21,39,64,0.13); }

/* Headlines get a touch more presence without changing the typeface */
.page-title, .section-title { letter-spacing: -0.015em; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .tile, .card, .header-nav a { transition: none; }
  .btn-primary:hover, .btn-secondary:hover, .tile:hover, .card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Motion + pricing
   ═══════════════════════════════════════════════════════════════ */

/* Reveal: elements start slightly low and transparent, then settle. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* "What you get": each card's lines arrive one after another, the two cards
   in step (motion.js adds .stagger, so without script nothing is hidden). */
.two-cards.stagger .card > :not(.feature-list), .two-cards.stagger .feature-list > li {
  opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.two-cards.stagger .card.in > :not(.feature-list), .two-cards.stagger .card.in .feature-list > li { opacity: 1; transform: none; }
.hero-title .line.reveal { display: block; }

/* Typewriter caret */
.caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em;
  background: currentColor; animation: blink 1s steps(1) infinite; }
.typed-done .caret { animation: blink 1s steps(1) 3; opacity: 0; transition: opacity .3s 3.2s; }
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* Scroll cue */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 40px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; transition: opacity .4s; }
.scroll-cue svg { animation: nudge 1.8s ease-in-out infinite; }
.scroll-cue.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } }

/* ── Pricing ────────────────────────────────────────────────── */
.pricing-band { padding-top: 84px; padding-bottom: 84px; }
.pricing-lede { font-size: 18px; color: var(--ink-2); max-width: 640px; line-height: 1.6; margin: 0 0 34px; }

.slider-card { background: #fff; border-radius: var(--radius); padding: 28px 30px 22px;
  border: 1px solid var(--grid); box-shadow: var(--shadow); }
.slider-label { display: block; font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.slider-row { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.slider-readout { font-family: var(--font-body); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--midnight); font-variant-numeric: tabular-nums; min-width: 120px; text-align: right; }
.slider-readout small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

/* The size bands under the track, one segment per band with its edges on the
   cut points (100, 200, 300). --l and --w are unitless 0–1 positions along the
   slider; like the fill, they re-add the thumb's 14px inset at each end. The
   scale spans the track's column only, so it lines up under the slider. */
.slider-scale { position: relative; height: 30px; margin-top: 10px; margin-right: calc(120px + 26px); }
.scale-band { position: absolute; top: 0; height: 100%;
  left: calc(14px + var(--l) * (100% - 28px)); width: calc(var(--w) * (100% - 28px));
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--grid); transition: color .15s; }
.scale-band:first-child { border-left: 0; }
.scale-band.is-on { color: var(--seafoam); font-weight: 700; }
.scale-band .sb-short { display: none; }
@media (max-width: 640px) {
  .scale-band .sb-long { display: none; }
  .scale-band .sb-short { display: inline; }
  /* ...and sits at the very start of the track, clear of "50–100". */
  .scale-band:first-child { left: 0; width: auto; justify-content: flex-start; }
}

/* The filled portion has to follow the THUMB, not the raw percentage. A range
   input insets its thumb by half its width at each end, so a gradient measured
   across the full track drifts from the dial by up to half a thumb — 14px here,
   worst at the extremes and invisible at the midpoint. --ratio is unitless
   (0–1) and the calc re-adds the inset. */
input[type=range]#staff-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px;
  --fill: calc(14px + var(--ratio, .17) * (100% - 28px));
  background: linear-gradient(90deg, var(--seafoam) var(--fill), var(--track) var(--fill));
  outline: none; cursor: pointer; }
input[type=range]#staff-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 4px solid var(--seafoam); box-shadow: 0 2px 10px rgba(21,39,64,.18); transition: transform .15s; }
input[type=range]#staff-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
input[type=range]#staff-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 4px solid var(--seafoam); box-shadow: 0 2px 10px rgba(21,39,64,.18); }
input[type=range]#staff-slider:focus-visible { box-shadow: 0 0 0 4px rgba(72,127,134,.28); }
.size-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }

.founding { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--midnight); color: var(--driftwood); border-radius: var(--radius); padding: 26px 30px; margin: 22px 0; }
.founding .fd-eyebrow { font-family: var(--font-head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--seafoam-lift); margin-bottom: 8px; }
.founding h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.founding p { margin: 0; font-size: 15px; color: rgba(240,236,218,.82); max-width: 560px; }
.fd-right { text-align: right; }
.fd-spots { font-size: 15px; color: rgba(240,236,218,.85); }
.fd-spots strong { font-size: 30px; color: var(--coral); display: block; line-height: 1; }
.fd-code { margin-top: 12px; font-size: 14px; }
.fd-code code { background: rgba(255,255,255,.1); padding: 4px 10px; border-radius: 6px; font-weight: 700; color: #fff; letter-spacing: .06em; }

/* Promotion widget — slides in from the corner when pricing scrolls into view */
.promo-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(360px, calc(100vw - 40px));
  background: var(--midnight); color: var(--driftwood); border-radius: 16px; padding: 22px 22px 20px;
  box-shadow: 0 18px 50px rgba(21,39,64,.35); transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.promo-widget.is-in { transform: none; opacity: 1; pointer-events: auto; }
.pw-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: rgba(240,236,218,.7);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 6px; }
.pw-close:hover { color: #fff; }
.pw-eyebrow { font-family: var(--font-head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--seafoam-lift); margin-bottom: 8px; }
.pw-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; letter-spacing: -.01em; }
.pw-body { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: rgba(240,236,218,.82); }
.pw-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pw-row .btn-primary { padding: 10px 16px; font-size: 12px; }
.pw-spots { font-size: 13px; color: rgba(240,236,218,.8); }
.pw-spots strong { color: var(--coral); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .promo-widget { transition: none; } }

/* The notice that sits above the tiers once the promo price is applied */
.promo-applied { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0; padding: 12px 18px; border-radius: 12px; background: var(--midnight); color: var(--driftwood); font-size: 14.5px; text-align: left; }
/* display:flex above beats the hidden attribute, so say it again: with no
   offer running the bar stays out of the layout. */
.promo-applied[hidden] { display: none; }
/* Offer state: present but quiet, so list prices stay the default read while
   the founding price is always one click away rather than lost on dismissal. */
.promo-applied.is-offer { background: transparent; color: var(--ink-2); border: 1px dashed var(--grid); }
.promo-applied.is-offer strong { color: var(--midnight); }
.promo-applied.is-offer .pa-reset { border-color: var(--seafoam); color: var(--seafoam); }
.promo-applied.is-offer .pa-reset:hover { background: var(--seafoam); color: #fff; }
.promo-applied code { background: rgba(255,255,255,.1); padding: 2px 8px; border-radius: 6px; font-weight: 700; color: #fff; letter-spacing: .06em; }
.pa-reset { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.pa-reset:hover { background: rgba(255,255,255,.1); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier { position: relative; background: #fff; border: 1px solid var(--grid); border-radius: var(--radius);
  padding: 30px 28px 26px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.tier:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(21,39,64,.10); }
.tier-hi { border: 2px solid var(--seafoam); box-shadow: 0 14px 40px rgba(72,127,134,.18); }
.tier-badge { position: absolute; top: -12px; left: 28px; background: var(--seafoam); color: #fff;
  font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; }
.tier-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--midnight); margin: 0 0 6px; }
.tier-tag { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 18px; min-height: 44px; }
/* The price block is one height on every card, with "billed annually" on its
   own line at its foot, so it lines up across the paid tiers even when the
   Enterprise card's struck-through price wraps (22 Oct 2026, with Rob). */
.tier-price { display: flex; align-items: baseline; column-gap: 10px; row-gap: 6px; flex-wrap: wrap;
  align-content: space-between; min-height: 72px; }
.tier-was { font-size: 17px; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* The year-one rate: the Enterprise price struck through in red (13 Oct 2026). */
.tier.is-year-one .tier-was { font-size: 22px; font-weight: 600; color: #b8492f; text-decoration-color: #b8492f;
  text-decoration-thickness: 2px; }
.tier.is-year-one .tier-each { color: #b8492f; font-weight: 600; }
.tier-now { font-size: 40px; font-weight: 700; color: var(--midnight); line-height: 1; font-variant-numeric: tabular-nums;
  transition: color .15s; }
.tier-per { flex-basis: 100%; font-size: 14px; color: var(--ink-3); }
.tier-each { font-size: 13px; color: var(--ink-3); margin: 8px 0 18px; min-height: 36px; line-height: 1.45; }
.tier-feat { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier-feat li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.tier-feat li::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--seafoam); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.tier-cta { text-align: center; }
/* Room between the staff slider and the plans (16 Oct 2026). */
#pricing .slider-card { margin-bottom: 36px; }
/* Side by side, each plan's rows line up across the cards: name, tagline,
   price, note, features, button (16 Oct 2026). Stacked on a phone, each card
   is on its own. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .tiers { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  }
}
/* A plan that isn't on sale yet (pricing.js, soon): when, in place of the price. */
.tier-soon { background: var(--sand, #F0ECDA); border-style: dashed; }
.tier-soon:hover { transform: none; box-shadow: none; }
.tier-soon .tier-now { color: var(--ink-2); }   /* "Coming 2028" at the same size as the prices */
.tier-soon .tier-feat { margin-bottom: 0; }
.tier-soon .tier-tag, .tier-soon .tier-each { color: var(--ink-2); }   /* ink-3 is too faint on sand */
.tier-soon .tier-feat li::before { background: var(--ink-3); }
/* A feature that's sold but not built yet says so, wherever it's listed. */
.feat-soon { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--sand, #F0ECDA); border: 1px solid var(--grid); font-family: var(--font-head);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; }
.band-pine .feat-soon, .tile .feat-soon { background: transparent; }

.addons-wrap { margin-top: 30px; }
.addons-title { font-family: var(--font-head); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.addon { background: #fff; border: 1px solid var(--grid); border-radius: 16px; padding: 18px 20px; }
.addon-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--midnight); }
.addon-soon { display: inline-block; margin: 8px 0 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--sand, #f7f3e8); border: 1px solid var(--grid); font-family: var(--font-head);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.addon-note { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

.pricing-foot { margin: 26px 0 0; font-size: 14.5px; color: var(--ink-3); max-width: 720px; line-height: 1.6; }

@media (max-width: 900px) {
  .tiers, .addons { grid-template-columns: 1fr; }
  .founding { grid-template-columns: 1fr; }
  .fd-right { text-align: left; }
  .slider-row { grid-template-columns: 1fr; gap: 14px; }
  /* Number above the track, so the band labels sit directly under it. */
  .slider-readout { text-align: left; order: -1; display: flex; align-items: baseline; gap: 10px; }
  .slider-readout small { display: inline; margin-top: 0; }
  .slider-scale { margin-right: 0; }
  .scale-band { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret, .scroll-cue svg { animation: none; }
  .tier:hover { transform: none; }
}

/* ── What we ask ─────────────────────────────────────────────── */
.q-lede { font-size: 18px; color: var(--ink-2); max-width: 680px; line-height: 1.6; margin: 0 0 34px; }
.q-lede em { font-style: italic; color: var(--midnight); }
.q-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }   /* room under the title */
.q-col { background: #fff; border: 1px solid var(--grid); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; }
.q-pill { height: 34px; width: auto; align-self: flex-start; margin-bottom: 18px; }
.q-label { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.q-item { margin: 0 0 18px; padding: 0; border: 0; font-size: 17px; line-height: 1.45; color: var(--midnight); font-weight: 500; flex: 1; }
.q-deep { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 0; padding-top: 14px; border-top: 1px solid var(--grid); }
.q-deep strong { color: var(--ink-2); }
.q-foot { margin: 28px 0 0; font-size: 15.5px; color: var(--ink-2); max-width: 720px; line-height: 1.6; }
@media (max-width: 1000px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .q-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .q-grid { margin-top: 36px; } }

/* Flip cards. Both faces share one grid cell so the card's height is the
   taller face — every card in the row ends up the same height regardless of
   how many measures it lists, which is what fixed the misaligned rows. */
.q-flip { position: relative; display: grid; padding: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; perspective: 1200px; background: transparent; border: 0; }
.q-flip .q-face { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 24px 22px;
  border-radius: var(--radius); border: 1px solid var(--grid); background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.4,0,.2,1); }
.q-flip .q-back { transform: rotateY(180deg); background: var(--midnight); color: var(--driftwood); border-color: var(--midnight); }
.q-flip:hover .q-front, .q-flip:focus-visible .q-front, .q-flip[aria-pressed="true"] .q-front { transform: rotateY(180deg); }
.q-flip:hover .q-back,  .q-flip:focus-visible .q-back,  .q-flip[aria-pressed="true"] .q-back  { transform: rotateY(0deg); }
.q-flip:focus-visible { outline: 3px solid var(--seafoam); outline-offset: 3px; border-radius: var(--radius); }
.q-measures-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.q-measures-list li { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); padding: 7px 0 7px 18px; position: relative; border-bottom: 1px solid var(--grid); }
.q-measures-list li:last-child { border-bottom: 0; }
.q-measures-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--seafoam); }
.q-back .q-item { color: #fff; font-size: 18px; flex: 1; margin: 6px 0 18px; }
.q-hint { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.q-back .q-hint { color: var(--seafoam-lift); }
@media (prefers-reduced-motion: reduce) { .q-flip .q-face { transition: none; } }
/* Touch: no hover, so a tap toggles aria-pressed (see motion.js). */
@media (hover: none) { .q-flip:hover .q-front { transform: none; } .q-flip:hover .q-back { transform: rotateY(180deg); }
  .q-flip[aria-pressed="true"] .q-front { transform: rotateY(180deg); } .q-flip[aria-pressed="true"] .q-back { transform: rotateY(0deg); } }

.q-measures { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
.q-outcome { margin-top: 18px; background: var(--midnight); color: var(--driftwood); border-radius: var(--radius); padding: 26px 30px;
  display: grid; grid-template-columns: auto 1fr; gap: 8px 34px; align-items: baseline; }
.q-outcome-label { grid-column: 1 / -1; font-family: var(--font-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--seafoam-lift); }
.q-outcome .q-item { color: #fff; font-size: 21px; margin: 0; flex: none; }
.q-outcome p { margin: 0; font-size: 15px; color: rgba(240,236,218,.82); line-height: 1.55; max-width: 520px; }
@media (max-width: 800px) { .q-outcome { grid-template-columns: 1fr; } }

/* ── Choosing which survey to send ───────────────────────────── */
.scope-pick { border: 0; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scope-pick legend { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; padding: 0; }
.scope-opt { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; cursor: pointer;
  border: 1.5px solid var(--grid); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.scope-opt:hover { border-color: var(--seafoam); }
.scope-opt:has(input:checked) { border-color: var(--seafoam); border-width: 2px; box-shadow: 0 0 0 4px rgba(72,127,134,.14); }
/* A survey the camp's plan doesn't include (tier.js on send-survey.html). */
.scope-opt.is-locked { opacity: .62; cursor: not-allowed; }
.scope-opt.is-locked:hover { border-color: var(--grid); }
.scope-opt.is-locked .scope-name::after { content: " \00b7  Professional"; font-weight: 600; color: var(--seafoam); }
.scope-opt input { margin-top: 3px; accent-color: var(--seafoam); }
.scope-body { display: flex; flex-direction: column; gap: 3px; }
.scope-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--midnight); }
.scope-meta { font-size: 13px; color: var(--seafoam-dark); font-weight: 600; }
.scope-note { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.mini-table .qn { color: var(--ink-3); font-size: 13px; }
/* Pulse | Deep dive | + the retention module, which goes with either. */
.scope-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 0 0 22px; align-items: stretch; }
.scope-row .scope-pick { margin: 0; }
.scope-pick.scope-addon { grid-template-columns: 1fr; }
/* Deep dive modules (send-survey.html): four across, two on a tablet, one on a phone. */
.scope-pick.deep-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scope-pick.deep-modules[hidden] { display: none; }
.deep-modules .deep-hint { grid-column: 1 / -1; margin: 2px 0 0; }
.deep-modules .pulse-first { grid-column: 1 / -1; margin: 0 0 4px; padding: 12px 16px; border-radius: 12px;
  background: var(--sand); border-left: 4px solid var(--sun, #E8B04A); font-size: 14.5px; line-height: 1.5; color: var(--ink-1); }
.deep-modules .pulse-first[hidden] { display: none; }
@media (max-width: 960px) { .scope-pick.deep-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scope-opt-addon { border-style: dashed; height: 100%; }
.scope-opt-addon:has(input:checked) { border-style: solid; }
.legend-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 760px) { .scope-pick { grid-template-columns: 1fr; } .scope-row { grid-template-columns: 1fr; } }

/* ── No word left alone on a line (15 Oct 2026) ──────────────────
   Headings and short subtitles even out their lines; longer text and
   bullets avoid a one-word last line. Browsers without these settings
   just wrap as before. */
h1, h2, h3, h4, .section-title .line, .page-title, .feat-title, .saved-title, .rm-title,
.lede, .hero-lede, .dev-lede, .dev-foot, .q-lede, .q-foot, .rm-lede, .pricing-lede, .pricing-foot,
.saved-lede, .card-tagline, .tier-tag, .closing-meta, .hub-account-note,
.fc-front-desc, .info-card h3 { text-wrap: balance; }
p, li, dd, figcaption, .rm-text, .feat-list li { text-wrap: pretty; }
.nobr { white-space: nowrap; }      /* a hyphenated phrase that shouldn't split across lines */

/* ── Centre by default ───────────────────────────────────────────
   Landing sections read as a centred column. Anything deliberately
   chunked — cards, tiers, tables, the pricing slider, form fields —
   opts back out to the left, because centred body copy inside a box
   is hard to scan. */
.hero .container,
.band-pine > .container,
.band-sand > .container,
.band-warm > .container,
.closing-cta > .container-narrow,
.newsletter > .container-narrow { text-align: center; }

.hero-lede, .q-lede, .dev-lede, .pricing-lede, .why-closer,
.q-foot, .dev-foot, .pricing-foot, .section-title, .page-title,
.eyebrow, .addons-title, .lede { margin-left: auto; margin-right: auto; }
.hero-lede, .q-lede, .dev-lede, .pricing-lede { max-width: 620px; }
.q-foot, .dev-foot, .pricing-foot { max-width: 640px; }

.hero .cta-row, .closing-cta .cta-row { justify-content: center; }

/* Boxed content stays left-aligned and readable */
.card, .tile, .q-col, .tier, .addon, .setting-block, .form-card,
.slider-card, .founding, .q-outcome, .why-block, .feature-list,
.chart-wrap, .scope-pick { text-align: left; }
.founding .fd-right { text-align: right; }
@media (max-width: 900px) { .founding .fd-right { text-align: left; } }

/* ── Devices ─────────────────────────────────────────────────── */
.devices { padding-top: 76px; padding-bottom: 76px; }
.dev-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 5vw, 54px); margin: 44px 0 30px; }
.dev { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dev figcaption { font-family: var(--font-head); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.dev-screen { background: #fff; border: 1px solid var(--grid); display: flex; flex-direction: column;
  justify-content: center; gap: 14px; box-shadow: 0 10px 30px rgba(21,39,64,.10); }
.dev-q { margin: 0; color: var(--midnight); line-height: 1.35; font-weight: 500; min-height: 3.2em; }
.dev-q::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -.12em; background: var(--seafoam); animation: blink 1s steps(1) infinite; }
.dev-q.done::after { opacity: 0; animation: none; }
/* Five radio buttons, like the real survey. The chosen one fills. */
.dev-scale { display: flex; gap: 8px; justify-content: center; }
.dev-scale i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--track);
  background: #fff; box-sizing: border-box; transition: border-color .25s, box-shadow .25s, transform .25s; }
.dev-scale i.on { border-color: var(--seafoam); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--seafoam); transform: scale(1.15); }
.dev-phone .dev-scale i { width: 12px; height: 12px; }

/* Phone */
.dev-phone .dev-screen { width: 132px; height: 250px; border-radius: 22px; padding: 26px 14px 18px; }
.dev-phone .dev-q { font-size: 12px; }
/* Tablet */
.dev-tablet .dev-screen { width: 196px; height: 268px; border-radius: 16px; padding: 24px 20px; }
.dev-tablet .dev-q { font-size: 13.5px; }
/* Laptop — screen plus a base */
.dev-laptop .dev-screen { width: 288px; height: 186px; border-radius: 10px 10px 2px 2px; padding: 22px 26px; }
.dev-laptop .dev-q { font-size: 14px; }
.dev-laptop::after { content: ""; display: block; width: 330px; height: 9px; border-radius: 0 0 10px 10px;
  background: var(--steel); opacity: .5; margin-top: -12px; order: 2; }
.dev-laptop figcaption { order: 3; }

@media (max-width: 760px) {
  /* Laptop claims its own row so phone and tablet pair up cleanly beneath it,
     instead of one stray device wrapping on its own. */
  .dev-row { flex-wrap: wrap; gap: 26px 30px; }
  .dev-laptop { order: -1; flex: 0 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-q::after { animation: none; opacity: 0; }
  .dev-scale i { transition: none; }
}

/* Survey hub: the one line for directors who already have an account. */
.hub-account-note { max-width: 640px; margin: 34px auto 0; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.hub-account-note a { color: var(--seafoam-dark); font-weight: 600; }
/* Moved into the hero (Rob, Oct 2026): it was getting lost below the cards. */
.hub-account-note.hub-note-top { margin: 26px auto 0; padding: 14px 20px; border-radius: 12px; background: rgba(72,127,134,.12); }
/* On the navy header band (Our surveys page). */
.hub-head .hub-account-note { color: var(--text-dim); background: rgba(255,255,255,.07); }
.hub-head .hub-account-note a { color: #9fd0d5; }
.hub-head .cta-row { justify-content: center; }

/* ═══ How to use it — the season roadmap ═══════════════════════════
   An accordion: motion.js adds .rm-acc, and each step is its title until
   it's opened (one at a time). Phones: the open step shows its own
   screenshot. Wide screens: motion.js adds .rm-on, the steps sit on the
   left and the open one drives a large screenshot on the right.
   Without the script every step is open, as plain content. */
.roadmap .rm-lede { max-width: 620px; font-size: 18px; line-height: 1.6; margin: 0 auto 52px; }
/* Centred heading like the rest of the page; the trail itself reads left to right. */
.rm, .rm-outcome { text-align: left; }
.rm-outcome { max-width: 760px; margin-left: auto; margin-right: auto; }
.band-pine .rm-note { text-align: center; }
.rm-c1 { --c: var(--seafoam-lift); }
.rm-c2 { --c: var(--well); }
.rm-c3 { --c: var(--grow); }
.rm-c4 { --c: var(--coral); }
.rm-c5 { --c: #f0ecda; }   /* sand itself: the dark landing redefines --sand as a navy panel colour */

.rm-steps { list-style: none; margin: 0; padding: 0; position: relative; }
/* The trail between the markers. */
.rm-steps::before {
  content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px;
  border-left: 2px dashed rgba(240,236,218,0.24);
}
.rm-step { position: relative; }
.rm-step + .rm-step { margin-top: 40px; }
.rm-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.rm-badge {
  grid-row: 1 / span 3; position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pine); color: var(--c); box-shadow: inset 0 0 0 2px var(--c);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.rm-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-when {
  margin-top: 3px; font-family: var(--font-head); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c);
}
.band-pine .rm-title { margin: 4px 0 8px; font-family: var(--font-head); font-size: 21px; line-height: 1.25; font-weight: 800; color: #fff; transition: color .25s; }
.band-pine .rm-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-dim); transition: opacity .25s; }

/* The screenshot, in a plain browser frame. */
.rm-shot { position: relative; z-index: 1; margin: 22px 0 0; }
.rm-frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.38); }
.rm-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #ece8d8; }
.rm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8b0; flex: 0 0 auto; }
.rm-url {
  margin-left: 10px; flex: 0 1 260px; min-width: 0; height: 20px; line-height: 20px; padding: 0 10px;
  border-radius: 999px; background: #fff; font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-tag {
  margin-left: auto; padding-left: 10px; white-space: nowrap;
  font-family: var(--font-head); font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.rm-frame img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.rm-frame img.is-swapping { opacity: 0; }
.rm-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.rm-stage { display: none; }

/* The accordion. Collapsing animates the row height (0fr to 1fr), so the
   list eases open rather than jumping. */
.rm.rm-acc .rm-step + .rm-step { margin-top: 14px; }
.rm.rm-acc .rm-head { cursor: pointer; }
.band-pine .rm.rm-acc .rm-title { margin-bottom: 0; }
.rm.rm-acc .rm-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.rm.rm-acc .rm-more-in { min-height: 0; overflow: hidden; }
.rm.rm-acc .rm-step.is-active .rm-more { grid-template-rows: 1fr; }
.band-pine .rm.rm-acc .rm-text { padding-top: 8px; }
.rm.rm-acc .rm-step:not(.is-active) .rm-inline { display: none; }
.rm.rm-acc .rm-step:not(.is-active) .rm-title { color: rgba(255,255,255,0.72); }
.rm.rm-acc .rm-step:not(.is-active) .rm-head:hover .rm-title { color: #fff; }
.rm.rm-acc .rm-step.is-active .rm-badge { background: var(--c); color: var(--pine); box-shadow: 0 0 0 7px rgba(240,236,218,0.07); }
/* The title button spans the row and carries an open/closed chevron. */
.rm.rm-acc .rm-pick { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; }
.rm.rm-acc .rm-pick::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: .7; transition: transform .25s;
}
.rm.rm-acc .rm-step.is-active .rm-pick::after { transform: translateY(2px) rotate(-135deg); }

/* Where it leads. */
.rm-outcome {
  display: flex; gap: 20px; align-items: center; margin-top: 60px; padding: 24px 28px;
  border-radius: var(--radius); background: rgba(240,236,218,0.06); border: 1px solid rgba(240,236,218,0.12);
}
.rm-heart { flex: 0 0 56px; background: var(--coral); color: #fff; box-shadow: 0 0 0 6px rgba(216,105,79,0.18); }
.rm-heart svg { fill: currentColor; stroke: none; }
/* A real heartbeat (22 Oct 2026): two quick beats, lub-dub, then a rest. */
@keyframes rm-heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.2); }
  22% { transform: scale(0.96); }
  32% { transform: scale(1.14); }
  46% { transform: scale(1); }
}
@keyframes rm-heart-ring {
  0%, 100% { box-shadow: 0 0 0 6px rgba(216,105,79,0.18); }
  12% { box-shadow: 0 0 0 10px rgba(216,105,79,0.26); }
  46% { box-shadow: 0 0 0 6px rgba(216,105,79,0.18); }
}
.rm-heart { animation: rm-heart-ring 1.3s ease-in-out infinite; }
.rm-heart svg { transform-origin: 50% 55%; animation: rm-heartbeat 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rm-heart, .rm-heart svg { animation: none; }
}
.band-pine .rm-outcome-title { margin: 0 0 4px; font-family: var(--font-head); font-size: 21px; line-height: 1.3; font-weight: 800; color: #fff; }
.band-pine .rm-outcome-text { margin: 0; font-size: 15.5px; line-height: 1.55; }
.band-pine .rm-note { margin: 16px 0 0; font-size: 13px; color: rgba(240,236,218,0.55); }

/* Tablet: screenshots line up with the text, not the markers. */
@media (min-width: 640px) {
  .rm-inline { margin-left: 76px; }
}
@media (max-width: 639px) {
  .rm-tag { display: none; }
  .rm-outcome { align-items: flex-start; padding: 20px; }
}

/* Wide: one stage, driven by the steps. */
@media (min-width: 980px) {
  .roadmap .container { max-width: 1280px; }
  .rm.rm-on { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .rm.rm-on .rm-step + .rm-step { margin-top: 8px; }
  .rm.rm-on .rm-head { padding: 14px 16px 16px 0; border-radius: 18px; }
  .rm.rm-on .rm-steps::before { top: 44px; bottom: 44px; }
  /* Each step's own screenshot stays in the page for screen readers; the
     stage beside them is the visual copy. */
  .rm.rm-on .rm-inline {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .rm.rm-on .rm-stage { display: block; position: sticky; top: 120px; margin: 0; }
}
/* The title is the accordion's button (added by motion.js). */
.rm-pick {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  line-height: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.rm-pick:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .rm-badge, .rm-frame img, .band-pine .rm-title, .band-pine .rm-text,
  .rm.rm-acc .rm-more, .rm.rm-acc .rm-pick::after { transition: none; }
}

/* Survey hub: question counts under each pillar's measures, and the outcome. */
.fc-count {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; opacity: .85;
}
.hub-outcome {
  max-width: 760px; margin: 34px auto 0; padding: 20px 26px; text-align: left;
  border-radius: 14px; background: #fff; box-shadow: var(--shadow);
}
.hub-outcome-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--seafoam-dark);
}
.hub-outcome p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.hub-outcome strong { color: var(--ink); }
/* Surveys page: everything centred, cards included (Annie, 15 Oct 2026).
   Overrides "boxed content stays left-aligned" for this page only. */
.hub .page-identity { flex-direction: column; gap: 18px; }
.hub .lede { margin-left: auto; margin-right: auto; }
.hub .flip-card-front { align-items: center; text-align: center; }
.hub .fc-pill img { margin-left: auto; margin-right: auto; }
.hub .fc-hint { left: 0; right: 0; text-align: center; }
.hub .flip-card-back { text-align: center; }
.hub .fc-list li { justify-content: center; }
.hub .hub-outcome { text-align: center; }
.hub .info-card { text-align: center; border-left: 0; border-top: 6px solid var(--sun); }
.hub .info-card.featured { border-top-color: var(--clay); }
/* Five measures plus the count line must fit the card's fixed height. */
.flip-card-back { padding: 28px 30px 26px; }
.flip-card-back .fc-back-title { margin-bottom: 8px; }
.flip-card-back .fc-list li { padding: 8px 0; }

/* ═══ Subscribe ═══════════════════════════════════════════════════
   The plan form on the left, a running total on the right that stays in
   view while the form scrolls. */
.sub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; text-align: left; }
.sub-form .hint, .form-card > .hint { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.sub-flash { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #f6e3d8; color: #7a2f10; font-weight: 600; font-size: 15px; }
.sub-plans { border: 0; padding: 0; margin: 0 0 22px; }
.sub-plans legend, .sub-sum-eyebrow {
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); margin-bottom: 10px;
}
.sub-plan { display: block; position: relative; margin-bottom: 10px; cursor: pointer; }
.sub-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sub-plan-body {
  display: grid; gap: 4px; padding: 16px 18px 16px 50px; border-radius: 16px;
  border: 1.5px solid #c6cdc8; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.sub-plan-body::before {
  content: ""; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid #9aa6a0; background: #fff; box-sizing: border-box;
}
.sub-plan input:checked + .sub-plan-body { border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(72,127,134,.16); }
.sub-plan input:checked + .sub-plan-body::before { border: 6px solid var(--seafoam); }
.sub-plan input:focus-visible + .sub-plan-body { outline: 2px solid var(--seafoam); outline-offset: 2px; }
.sub-plan-top { display: flex; align-items: center; gap: 10px; }
.sub-plan-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--pine); }
.sub-plan-badge {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--sun-soft); color: var(--pine);
}
.sub-plan-tag { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.sub-plan-price { font-size: 14px; font-weight: 600; color: var(--seafoam-dark); }
.sub-plan-price s { color: #b8492f; font-weight: 500; margin-right: 2px; }
.sub-founding { padding: 14px 16px; border-radius: 14px; background: rgba(72,127,134,.08); }
.sub-founding .hint { display: block; margin-top: 4px; }
.sub-submit { width: 100%; margin-top: 8px; }
.sub-submit:disabled { opacity: .55; cursor: not-allowed; }
.sub-msg { margin: 14px 0 0; font-weight: 600; font-size: 15px; color: #b04a2a; }
/* Book a demo: the founder-of-the-month's Google Calendar, framed (bookings.js). */
.booking-grid { text-align: left; }        /* a ▲ list reads left-aligned, like the calendar beside it */
.booking-col { display: grid; gap: 22px; min-width: 0; }
.booking-h { font-family: var(--font-head); font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--pine); margin: 0 0 6px; }
.booking-sub { font-size: 15px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.5; }
.booking-loading { color: var(--ink-3); font-size: 15px; padding: 40px 0; text-align: center; }
.booking-wide { max-width: 1120px; margin: 0 auto; }
.booking-iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }
.booking-newtab { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--seafoam-dark); text-decoration: underline; }
.booking-open { margin: 10px 0; }
.booking-alt { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.booking-alt a { color: var(--seafoam-dark); font-weight: 600; text-decoration: underline; }
.booking-request[hidden], .booking-card[hidden] { display: none; }
.sub-terms-note { margin: 4px 0 12px; }
.sub-terms-note a { text-decoration: underline; }

/* Terms of use and privacy policy, read to the end before payment
   (subscribe page; subscribe.js). Full screen on a phone. */
.legal-modal { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 920px); margin: auto; padding: 0; border: 0;
  border-radius: 16px; background: var(--paper-white); color: var(--ink); text-align: left;
  box-shadow: 0 30px 80px rgba(21,39,64,0.35); overflow: hidden; }
.legal-modal[open] { display: flex; flex-direction: column; }
.legal-modal::backdrop { background: rgba(14,27,46,0.62); }
.legal-head { padding: 22px 28px 14px; border-bottom: 1px solid rgba(21,39,64,0.12); }
.legal-title { font-family: var(--font-head); font-size: 20px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--pine); margin: 0 0 6px; }
.legal-meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.legal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 28px 26px; overscroll-behavior: contain; }
.legal-scroll:focus-visible { outline: 2px solid var(--seafoam); outline-offset: -4px; }
.legal-text { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.legal-text h2 { font-family: var(--font-head); font-size: 18px; font-weight: 800; text-transform: uppercase;
  color: var(--pine); margin: 26px 0 8px; padding-top: 14px; border-top: 2px solid rgba(21,39,64,0.14); }
.legal-text h2:first-child { margin-top: 12px; padding-top: 0; border-top: 0; }
.legal-text h3 { font-family: var(--font-head); font-size: 14.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--pine); margin: 18px 0 6px; }
.legal-text p { margin: 0 0 12px; }
.legal-text a { color: var(--seafoam-dark); text-decoration: underline; }
.legal-text .callout { margin: 8px 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--sand); }
.legal-text table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 6px 0 16px; }
.legal-text th, .legal-text td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(21,39,64,0.14); }
.legal-text thead th { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); }
.legal-text tbody th { font-weight: 600; color: var(--pine); }
.legal-foot { padding: 14px 28px 20px; border-top: 1px solid rgba(21,39,64,0.12); background: var(--sand); }
.legal-hint { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.legal-msg { margin: 0 0 10px; }
.legal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.legal-actions .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
  .legal-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .legal-head, .legal-scroll, .legal-foot { padding-left: 18px; padding-right: 18px; }
  .legal-actions > * { flex: 1 1 100%; }
}

.sub-summary {
  position: sticky; top: 120px; padding: 30px 28px; border-radius: var(--radius);
  background: var(--pine); color: #fff; box-shadow: var(--shadow);
}
.sub-summary .sub-sum-eyebrow { color: var(--sun); }
.sub-sum-plan { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; margin-bottom: 16px; }
.sub-sum-lines { margin: 0 0 14px; }
.sub-sum-lines div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(240,236,218,.14); font-size: 15px; }
.sub-sum-lines dt { color: var(--text-dim); }
.sub-sum-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.sub-sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 6px; }
.sub-sum-total span { font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
.sub-sum-total strong { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.band-sand .sub-summary p, .sub-sum-note { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.sub-sum-points { list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid rgba(240,236,218,.14); }
.sub-sum-points li { position: relative; padding: 5px 0 5px 22px; font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.sub-sum-points li::before { content: "✓"; position: absolute; left: 0; color: var(--sun); font-weight: 700; }
.sub-sum-signin { font-size: 14px; margin: 0; }
.sub-sum-signin a { color: var(--sun); font-weight: 600; }
.sub-requested { max-width: 640px; margin: 0 auto; text-align: left; }
.sub-requested-h { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--pine); margin: 6px 0 14px; }
.sub-requested p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .sub-grid { grid-template-columns: 1fr; }
  .sub-summary { position: static; order: -1; }
}
@media (max-width: 560px) { .sub-form .form-row-2 { grid-template-columns: 1fr; } }

/* ═══ Welcome (after payment) and set-password ═══ */
.welcome-spinner {
  width: 34px; height: 34px; margin: 26px auto 0; border-radius: 50%;
  border: 3px solid rgba(240,236,218,.2); border-top-color: var(--sun); animation: wspin 0.9s linear infinite;
}
@keyframes wspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .welcome-spinner { animation-duration: 3s; } }
.welcome-resend { margin: 34px auto 0; max-width: 520px; }
.band-pine .welcome-resend p { font-size: 15px; }
.welcome-resend-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.welcome-resend-row input {
  flex: 1 1 240px; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgba(240,236,218,.4);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 15px;
}
.welcome-resend-msg { margin-top: 12px; font-weight: 600; }
.sp-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--pine); margin: 6px 0 20px; line-height: 1.15; }
.band-sand .form-card .page-identity-eyebrow { margin-bottom: 4px; }

/* ═══ Dashboard → Settings → Subscription ═══ */
.bill-facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 4px 0 12px; }
/* The dashboard's --ink-1/2/3 switch with its dark theme; fall back to the
   site's ink elsewhere. */
.bill-facts dt { font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bill-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-1, var(--ink)); }
.bill-status { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.bill-status.is-ok { color: var(--seafoam-dark); }
.bill-status.is-warn { color: #a4503c; }
html[data-theme="dark"] .bill-status.is-ok { color: var(--seafoam-lift); }
html[data-theme="dark"] .bill-status.is-warn { color: #e8957f; }
html[data-theme="dark"] .form-note.is-error { color: #e8957f; }
.form-note.is-error { color: #b04a2a; font-weight: 600; }
/* A display rule beats the hidden attribute; say it explicitly. */
.sub-grid[hidden], .bill-facts[hidden] { display: none; }

/* Book a demo: the dashboard preview under the page title. */
.demo-shot { margin: 36px auto 0; max-width: 980px; }
.demo-shot img { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
.demo-shot figcaption { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.72); }

/* Book a demo: the click-through of the dashboard (demo-tour.js). */
.demo-tour { margin: 36px auto 0; max-width: 1000px; }
.tour-frame { box-shadow: 0 18px 40px rgba(0,0,0,0.32); }
.tour-screen { position: relative; aspect-ratio: 1600 / 950; overflow: hidden; background: #F0ECDA; }
.tour-shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .55s ease; }
.tour-shot.is-on { opacity: 1; z-index: 1; }
.tour-shot.enter-scroll { animation: tour-scroll .65s cubic-bezier(.3,.7,.2,1); }
@keyframes tour-scroll { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
.tour-cursor { position: absolute; z-index: 3; left: 72%; top: 70%; width: 22px; height: 22px; margin: -2px 0 0 -3px; opacity: 0;
  transition: left .9s cubic-bezier(.45,.05,.25,1), top .9s cubic-bezier(.45,.05,.25,1), opacity .3s;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15.5 9.2-6.9 1.5 3.9 7.3-2.8 1.5-3.9-7.3-5 4.8z' fill='%23152740' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tour-cursor.is-shown { opacity: 1; }
.tour-cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #6fa5ab; opacity: 0; transform: scale(.4); }
.tour-cursor.is-clicking::after { animation: tour-click .45s ease-out; }
@keyframes tour-click { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.tour-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; text-align: left; }
.tour-play { min-width: 74px; min-height: 32px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.6);
  background: transparent; color: #fff; font: 700 12px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tour-play:hover { background: rgba(255,255,255,.12); }
.tour-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.tour-step { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tour-step::before { content: ''; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: background .2s, transform .2s; }
.tour-step[aria-current="step"]::before { background: #fff; transform: scale(1.2); }
.tour-cap { flex: 1 1 280px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
@media (prefers-reduced-motion: reduce) {
  .tour-shot, .tour-cursor { transition: none; }
  .tour-shot.enter-scroll, .tour-cursor.is-clicking::after { animation: none; }
}

/* The answer a live form gives after it is sent. */
.form-result { margin-top: 18px; padding: 14px 18px; border-radius: 6px; font-size: 15px;
  line-height: 1.5; font-weight: 500; background: #e3efe6; color: #1f4436; border-left: 5px solid #83bf91; }
.form-result.is-error { background: #f7e1da; color: #7a2e1a; border-left-color: #b04a2a; }

/* Spam trap: people never see it; bots fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Feature rows on the landing page: what it does, then the screen across
   the full width so its numbers can be read (13 Oct 2026: screenshots were
   too small beside the text). .is-side keeps a screen beside its text, for
   the PDF sheet. Screens come from tools/screenshots/capture.py. */
.feat { display: grid; gap: 96px; margin-top: 64px; }
.feat-solo { margin-top: 0; }
.feat-row { display: grid; grid-template-columns: 1fr; gap: 32px; }
.feat-text { text-align: left; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
.feat-text .feat-kicker, .feat-text .feat-title { grid-column: 1; }
.feat-text .feat-list { grid-column: 2; grid-row: 1 / span 2; }
.feat-row.is-side { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat-row.is-side .feat-text { display: block; }
.feat-kicker { display: block; margin-bottom: 10px; font-family: var(--font-head); font-size: 13px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); }
.feat-title { margin-bottom: 20px; font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800; line-height: 1.15; color: var(--pine); }
.feat-list { list-style: none; display: grid; gap: 12px; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
/* Each bullet's own small icon (Annie, 19 Oct 2026), in the link teal. */
.feat-ico { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--link);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat-shot { margin: 0; }
.feat-shot .rm-frame { box-shadow: 0 18px 44px rgba(21,39,64,0.18); }
.feat-shot img { display: block; width: 100%; height: auto; }
/* Long screens show their top, fading out, rather than towering over the text. */
.feat-shot.is-tall .rm-frame { position: relative; }
.feat-shot.is-tall img { max-height: 820px; object-fit: cover; object-position: top; }
.feat-shot.is-tall .rm-frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(rgba(255,255,255,0), var(--fade, #fff)); pointer-events: none; }
/* The PDF as a sheet of paper, with a second one behind it. */
.feat-paper { position: relative; width: min(520px, 100%); margin: 0 auto; }
.feat-paper::before { content: ''; position: absolute; inset: 0; background: #fff; border-radius: 3px;
  box-shadow: 0 10px 28px rgba(21,39,64,0.12); transform: rotate(3deg) translate(10px, 8px); }
.feat-paper img { position: relative; display: block; width: 100%; height: auto; max-height: 660px;
  object-fit: cover; object-position: top; border-radius: 3px; background: #fff;
  box-shadow: 0 18px 44px rgba(21,39,64,0.22); }
/* The staff survey in a phone. */
.feat-phone { width: min(280px, 80%); margin: 0 auto; padding: 11px; border-radius: 44px;
  background: #0e1b2e; box-shadow: 0 22px 50px rgba(21,39,64,0.28), inset 0 0 0 2px #2a3a52; }
.feat-phone img { display: block; width: 100%; height: auto; border-radius: 34px; }
/* Inside Fathom Staff and Sending a survey: each screenshot beside its
   bullets, sides alternating, as before the 13 Oct revisions (Annie, 15 Oct
   2026). Reports keeps its own layout. */
.features .feat-row, #send .feat-row { grid-template-columns: 1fr 1.55fr; gap: 56px; align-items: center; }
.features .feat-row:nth-child(even) .feat-text { order: 2; }
.features .feat-text, #send .feat-text { display: block; }
.features .feat-shot.is-tall img, #send .feat-shot.is-tall img { max-height: 480px; }
/* Bigger screenshots in Inside Fathom Staff (Annie, 19 Oct 2026; Sending a
   survey stays as it was). Where the screenshot sits on the left it gets the
   wide column too (it was getting the narrow one), and on wide screens the
   section runs a little wider than the rest of the page, with the screenshot
   taking more of each row. */
@media (min-width: 901px) {
  .features .feat-row:nth-child(even) { grid-template-columns: 1.55fr 1fr; }
}
@media (min-width: 1200px) {
  .features > .container { max-width: 1280px; }
  .features .feat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 48px; }
  .features .feat-row:nth-child(even) { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .features .feat-shot.is-tall img { max-height: 560px; }
}
/* Screenshots come forward a little on hover: a mouse or trackpad only, wide
   enough that the zoom stays inside the page, and never with reduced motion. */
.feat-shot .rm-frame, .feat-paper { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@media (hover: hover) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .feat-shot:hover .rm-frame { position: relative; z-index: 2; transform: translateY(-4px) scale(1.06);
    box-shadow: 0 30px 70px rgba(21,39,64,0.30); }
  .feat-paper:hover { position: relative; z-index: 2; transform: translateY(-4px) scale(1.04); }
}
.feat-note { margin-top: 64px; font-size: 13px; color: var(--ink-3); }
/* "And that's not all": the other features, a tidy grid of short labels, each with its icon. */
.feat-more { margin: 64px auto 0; text-align: center; }
.feat-more-title { font-family: var(--font-head); font-size: 15px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--link); margin: 0 0 22px; }
.feat-more-list { list-style: none; padding: 0; margin: 0 auto; display: grid; justify-content: center;
  grid-template-columns: repeat(4, max-content); gap: 16px 40px; text-align: left; }
.feat-more-list li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.feat-more-list .feat-ico { margin-top: 0; }
@media (max-width: 1140px) { .feat-more-list { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 460px) { .feat-more-list { grid-template-columns: max-content; } }
@media (max-width: 900px) {
  .feat { gap: 72px; margin-top: 44px; }
  .feat-solo { margin-top: 0; }
  .feat-row, .feat-row.is-side { grid-template-columns: 1fr; gap: 24px; }
  .feat-text { display: block; }
  .feat-shot.is-tall img { max-height: 560px; }
  .features .feat-row, #send .feat-row { grid-template-columns: 1fr; gap: 24px; }
  .features .feat-row:nth-child(even) .feat-text { order: 0; }
  .features .feat-shot.is-tall img, #send .feat-shot.is-tall img { max-height: 380px; }
}

/* "Spend your time on other things": what Fathom takes off a director's
   plate, as counts that are true by design (no estimates of hours). Its own
   section since 15 Oct 2026, between Send and the devices. */
.saved { text-align: center; }
.saved-title { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800;
  line-height: 1.15; color: var(--pine); margin: 0 0 10px; }
.saved-lede { max-width: 620px; margin: 0 auto 32px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.saved-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.saved-stat { padding: 26px 18px 22px; border-radius: var(--radius); background: #fff;
  box-shadow: 0 10px 28px rgba(21,39,64,0.08); }
.saved-stat strong { display: block; font-family: var(--font-head); font-size: 56px; line-height: 1;
  font-weight: 800; color: var(--coral); margin-bottom: 10px; }
.saved-stat > span { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 760px) { .saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The counts roll like an odometer, counting up and rolling over onto their
   number, landing one after another from left to right (motion.js). */
.roll { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; font-variant-numeric: tabular-nums; }
.roll-reel { display: block; transition: transform 1.25s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.roll-reel > span { display: block; height: 1.1em; line-height: 1.1em; }

/* The methodology, one link instead of a block of text. */
.q-method { display: inline-block; margin-left: 6px; font-weight: 700; color: var(--clay); white-space: nowrap; }
.q-method:hover { text-decoration: underline; }

/* ═══════════════ FIRST-VISIT TOUR (tour.js) ═══════════════
   A dim layer, a spotlight cut around one element, and one card. The card's
   colours are fixed (midnight on any theme) so it reads the same in the
   dashboard's light and dark modes. */
.tour-shade { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.tour-shade.is-dim { background: rgba(14,27,46,.58); }
.tour-spot { position: fixed; z-index: 1001; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(14,27,46,.58), 0 0 0 3px var(--seafoam-lift, #6fa5ab);
  transition: left .3s, top .3s, width .3s, height .3s; }
.tour-card { position: fixed; z-index: 1002; width: min(380px, calc(100vw - 32px));
  background: var(--midnight, #152740); color: var(--driftwood, #F0ECDA); border-radius: 16px;
  padding: 20px 22px 18px; box-shadow: 0 18px 50px rgba(14,27,46,.45); font-family: var(--font-body); }
.tour-card.is-centred { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); }
.tour-card.is-docked { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
.tour-count { font-family: var(--font-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--seafoam-lift, #6fa5ab); margin-bottom: 6px; }
.tour-title { font-family: var(--font-head); font-size: 19px; line-height: 1.3; font-weight: 700; color: #fff; margin: 0 0 8px; }
.tour-card.is-centred .tour-title { font-size: 23px; }
.tour-body { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: rgba(240,236,218,.88); }
.tour-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tour-gap { flex: 1; }
.tour-skip, .tour-back { background: none; border: 0; color: rgba(240,236,218,.75); font: inherit; font-size: 13px;
  cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover, .tour-back:hover { color: #fff; }
.tour-next { display: inline-block; background: var(--seafoam, #487F86); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 18px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; text-decoration: none; }
.tour-next:hover { background: var(--seafoam-dark, #3a686e); }
.tour-next:focus-visible, .tour-skip:focus-visible, .tour-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
@media print { .tour-shade, .tour-spot, .tour-card { display: none !important; } }

/* Framework card on a phone (after the 980px rules, so it wins): the pill sits above its words, so the card fits the screen. */
@media (max-width: 560px) {
  .pillar-card { padding: 26px 20px; }
  .pillar-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Built but not published: hidden until site.js switches the feature on. */
[data-feature]:not(.feature-on) { display: none !important; }

/* ═══════════════ QR CODE (survey-share.js) ═══════════════
   The survey link as a QR code for a staff meeting. White sheet in both
   themes, because that's what phone cameras read best. */
.qr-dialog { border: 0; padding: 0; border-radius: 22px; max-width: min(560px, calc(100vw - 32px)); margin: auto;
  box-shadow: 0 30px 80px rgba(21,39,64,.35); }
.qr-dialog::backdrop { background: rgba(10,20,34,.6); }
.qr-sheet { background: #fff; color: #152740; padding: 30px 30px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.qr-sheet:fullscreen { width: 100vw; height: 100vh; align-content: center; padding: 4vh 4vw; }
.qr-sheet:fullscreen .qr-code svg { width: min(62vh, 80vw); height: auto; }
.qr-sheet:fullscreen .qr-title { font-size: clamp(28px, 4vw, 48px); }
.qr-eyebrow { margin: 0; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3a686e; }
.qr-title { margin: 0; font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #152740; text-transform: uppercase; }
.qr-code svg { display: block; max-width: 100%; height: auto; }
.qr-hint { margin: 0; font-size: 15px; color: #47576b; max-width: 420px; }
.qr-link { margin: 0; font-size: 12.5px; color: #47576b; word-break: break-all; }
.qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.qr-sheet:fullscreen .qr-actions { display: none; }
/* The sheet is white in both themes, so its outline buttons are too. */
.qr-sheet .btn-secondary, html[data-theme] .qr-sheet .btn-secondary { color: #152740; border-color: #152740; background: #fff; }
.qr-sheet .btn-secondary:hover, html[data-theme] .qr-sheet .btn-secondary:hover { background: #F0ECDA; color: #152740; }
@media print {
  body.printing-qr > *:not(.qr-dialog) { display: none !important; }
  body.printing-qr .qr-dialog { position: static; box-shadow: none; max-width: none; }
  body.printing-qr .qr-actions { display: none; }
  body.printing-qr .qr-code svg { width: 12cm; height: 12cm; }
}

/* ═══ The landing page in the dark (Annie, 19 Oct 2026) ═════════════
   index.html only (body.landing-dark): the night sky of the hero carried
   down the page, light text, cards as navy panels, so the screenshots pop.
   Text tokens are redefined inside <main>; anything that sets a dark colour
   outright is overridden below. The device screens stay white: they are
   screens. Checked with axe (WCAG 2.2 AA). */
body.landing-dark { background: #0b1524; }
body.landing-dark main {
  --ink: #f0ecda; --ink-1: #f0ecda; --ink-2: rgba(240,236,218,0.84); --ink-3: #a9b7c6;
  --link: #8fc3c8; --link-hover: #b5dade;
  --grid: rgba(255,255,255,0.12); --track: #2a4664;
  --sand: #172d47; --sand-warm: #142840;
  --grad-light: linear-gradient(180deg, #0f1e31 0%, #11233a 100%);
  --grad-warm:  linear-gradient(180deg, #0c1a2b 0%, #0f1f34 100%);
  color: var(--ink-1);
}
body.landing-dark .section-title, body.landing-dark .feat-title, body.landing-dark .tier-name,
body.landing-dark .tier-now, body.landing-dark .slider-readout, body.landing-dark .addon-name,
body.landing-dark .q-col .q-item, body.landing-dark .q-face .q-item, body.landing-dark .q-lede em,
body.landing-dark .promo-applied.is-offer strong { color: #fff; }
body.landing-dark .section-title .accent, body.landing-dark .eyebrow,
body.landing-dark .feat-kicker { color: #8fc3c8; }
/* Cards become panels a step lighter than the page. */
body.landing-dark .slider-card, body.landing-dark .tier, body.landing-dark .addon,
body.landing-dark .q-col, body.landing-dark .q-flip .q-face {
  background: #172d47; border-color: rgba(255,255,255,0.10); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
/* Each card flips to its pillar's colour (Annie, 20 Oct 2026). Leadership's
   is the page's own navy, so it flips to white, its pill's reverse. Text on
   the light colours is deep navy (coral 5.0:1, green and blue 7:1 or more). */
body.landing-dark .q-flip .q-back { --back: #fff; background: var(--back); border-color: var(--back); }
body.landing-dark .q-flip.q-community .q-back { --back: #d8694f; }
body.landing-dark .q-flip.q-growth .q-back { --back: #83bf91; }
body.landing-dark .q-flip.q-wellbeing .q-back { --back: #a9ccd1; }
body.landing-dark .q-flip .q-back .q-item { color: #0e1b2e; }
body.landing-dark .q-flip .q-back .q-hint { color: #0e1b2e; }
body.landing-dark .q-outcome, body.landing-dark .card-dark { background: #1c3653; }
body.landing-dark .tier-hi { border-color: #6fa5ab; box-shadow: 0 14px 40px rgba(0,0,0,0.38); }
body.landing-dark .tier-soon { background: #132840; }
body.landing-dark .tier.is-year-one .tier-was, body.landing-dark .tier.is-year-one .tier-each {
  color: #e8957f; text-decoration-color: #e8957f; }
body.landing-dark .scale-band.is-on { color: #8fc3c8; }
body.landing-dark input[type=range]#staff-slider::-webkit-slider-thumb { box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
body.landing-dark input[type=range]#staff-slider::-moz-range-thumb { box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
/* Outline buttons in light; the teal card keeps its dark one. */
body.landing-dark main .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.85); background: transparent; }
body.landing-dark main .btn-secondary:hover { background: #fff; color: var(--pine); border-color: #fff; }
body.landing-dark .card-sun .btn-secondary { color: var(--pine-deep); border-color: var(--pine-deep); }
body.landing-dark .card-sun .btn-secondary:hover { background: var(--pine-deep); color: #fff; }
/* Screenshots: a deeper shadow on the dark. */
body.landing-dark .rm-frame { box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
/* The browser frames around screenshots stay light, with their own dark text. */
body.landing-dark .rm-frame { --ink-3: #566474; --ink-2: #47576b; --ink-1: #152740; --grid: #dcd6c0; }
body.landing-dark .q-outcome-label { color: #8fc3c8; }
body.landing-dark .dev-screen { box-shadow: 0 12px 34px rgba(0,0,0,0.45); }

/* Screenshots, tap to enlarge on a phone (shot-zoom.js, 20 Oct 2026). The
   button only shows on narrow screens; wide ones keep the hover zoom. */
.rm-frame { position: relative; }
.shot-zoom { display: none; }
@media (max-width: 900px) {
  .shot-zoom { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 10px; bottom: 10px; z-index: 2;
    padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(21,39,64,.88); color: #fff;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,.3); }
  .shot-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .shot-zoom:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
}
.shot-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: #0b1524; color: #fff; }
.shot-dialog::backdrop { background: rgba(0,0,0,.6); }
.shot-dialog[open] { display: flex; flex-direction: column; }
.shot-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex: none; }
.shot-hint { font-size: 13px; color: rgba(255,255,255,.75); }
.shot-dialog .shot-close { color: #fff; border-color: rgba(255,255,255,.8); padding: 8px 16px; }
.shot-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.shot-scroll img { display: block; width: 900px; max-width: none; height: auto; border-radius: 8px; background: #fff; }