/* ═══════════════════════════════════════════════════════
   ClearestFinances — Complimentary Clarity Session
   Stylesheet
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TOKEN SYSTEM
───────────────────────────────────────────────────── */
:root {
  --ink:        #0F0F0E;
  --charcoal:   #1A1917;
  --stone:      #2C2B28;
  --cream:      #F7F5F0;
  --warm-white: #FAFAF8;
  --white:      #FFFFFF;
  --gold:       #B8954A;
  --gold-hover: #C9A85C;
  --gold-faint: rgba(184,149,74,0.10);
  --text:       #1A1917;
  --text-mid:   #4A4742;
  --text-quiet: #6C6862;
  --rule:       #E5E2DC;
  --rule-dark:  rgba(255,255,255,0.12);

  --display: 'Fraunces', 'Palatino Linotype', Georgia, serif;
  --sans:    'Inter Tight', system-ui, -apple-system, sans-serif;

  --section-y:   6rem;
  --section-x:   clamp(1.5rem, 6vw, 7rem);
  --max-w:       1160px;
}

/* ─────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }

/* Focus states */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.display-1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
}
.display-1 em { font-style: italic; font-weight: 400; }
.heading-2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text);
}
.heading-2--light { color: var(--white); }

/* ─────────────────────────────────────────────────────
   SECTION SHELL
───────────────────────────────────────────────────── */
.section {
  padding: var(--section-y) var(--section-x);
}
.section--cream  { background: var(--cream); }
.section--white  { background: var(--white); }
.section--dark   { background: var(--ink); }
.section--warm   { background: var(--warm-white); }

.inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────
   BUTTON
───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.125rem 2.5rem;
  transition: background 0.18s ease, transform 0.14s ease;
  cursor: pointer;
  border: none;
}
.btn:hover { background: var(--gold-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ─────────────────────────────────────────────────────
   SECTION 1 — HERO
───────────────────────────────────────────────────── */
.hero {
  background: var(--ink);
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

/* Right panel — slightly lighter */
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 0 55%;
  background: var(--charcoal);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) var(--section-x) clamp(4rem, 8vw, 7rem) var(--section-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.hero__brand {
  display: block;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 2.25rem;
}

/* ─────────────────────────────────────────────────────
   🔒 BRAND LOCK — WORDMARK
   "Clearest" in the surrounding text colour, "Finances"
   in gold. This applies to EVERY instance of the wordmark
   across every page. Do not change without instruction.
   Markup: Clearest<span class="brand-accent">Finances</span>
───────────────────────────────────────────────────── */
.brand-accent { color: var(--gold); }
.hero__headline { margin-bottom: 2rem; }

.hero__rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.hero__sub {
  font-size: 1.0625rem;
  font-weight: 400;
  color: rgba(255,255,255,0.66);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.hero__micro {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.hero__graphic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 4rem clamp(2rem, 4vw, 5rem);
}

/* ── The Clarity Lens ─────────────────────────────
   Blurred structure = how finances feel.
   Roaming glass lens = one conversation bringing
   each piece into focus. */

.clarity-viz {
  position: relative;
  width: min(430px, 100%);
  /* Matches the SVG viewBox (-45 5 410 320). The canvas is taller than
     the diamond itself so the domain labels have room above TAX/BUSINESS
     and below ASSET OWNERSHIP without clipping. */
  aspect-ratio: 410 / 320;
}

.clarity-viz__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.clarity-viz__base {
  filter: blur(4px);
  opacity: 0.32;
}

.clarity-viz__focus {
  clip-path: circle(24% at 50% 50%);
  animation: clarityFocus 16s ease-in-out infinite;
}

.clarity-viz__lens {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 74, 0.55);
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.015) 55%,
      rgba(255, 255, 255, 0) 70%);
  box-shadow:
    0 0 44px rgba(184, 149, 74, 0.14),
    inset 0 0 22px rgba(255, 255, 255, 0.05),
    inset 0 0 2px rgba(255, 255, 255, 0.12);
  animation: clarityLens 16s ease-in-out infinite;
  pointer-events: none;
}

.clarity-viz__caption {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

/* Lens waypoints: risk management (centre) → tax → estate planning
   → portfolio management → ownership planning → saving → centre */
@keyframes clarityLens {
  0%, 100% { left: 50%; top: 46%; }
  16%      { left: 33%; top: 16%; }
  32%      { left: 67%; top: 16%; }
  48%      { left: 82%; top: 46%; }
  64%      { left: 50%; top: 86%; }
  80%      { left: 18%; top: 46%; }
}

@keyframes clarityFocus {
  0%, 100% { clip-path: circle(24% at 50% 46%); }
  16%      { clip-path: circle(24% at 33% 16%); }
  32%      { clip-path: circle(24% at 67% 16%); }
  48%      { clip-path: circle(24% at 82% 46%); }
  64%      { clip-path: circle(24% at 50% 86%); }
  80%      { clip-path: circle(24% at 18% 46%); }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-viz__lens { display: none; }
  .clarity-viz__base { display: none; }
  .clarity-viz__focus {
    clip-path: none;
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────
   SECTION 2 — THE PROBLEM
───────────────────────────────────────────────────── */
.problem__heading { margin-bottom: 2.25rem; max-width: 20ch; }
.problem__intro {
  font-size: 1.125rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 2rem;
}
.problem__intro strong { color: var(--text); font-weight: 500; }
.problem__pivot {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 2.5rem;
}
.problem__gaps {
  border-top: 1px solid var(--rule);
  max-width: 820px;
  margin-bottom: 2.5rem;
}
.problem__gap {
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.5;
}
.problem__gap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.problem__close {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 62ch;
}
.problem__close strong { color: var(--text); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 3 — WHO THIS IS FOR
───────────────────────────────────────────────────── */
.who__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.who__heading { margin-bottom: 1.25rem; }
.who__intro {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 0;
}
.who__list {
  display: grid;
  grid-template-columns: 1fr;
}
.who__item {
  padding: 1.375rem 0 1.375rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.5;
  position: relative;
}
.who__item:first-child { border-top: 1px solid var(--rule); }
.who__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.who__closing {
  margin-top: 2.5rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-mid);
}

/* ─────────────────────────────────────────────────────
   SECTION 4 — WHO YOU ARE (BIO, on dark)
───────────────────────────────────────────────────── */
.bio__layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 4.5rem;
  align-items: center;
}
.bio__photo-wrap {
  position: relative;
  align-self: start;
}
.bio__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}
.bio__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184,149,74,0.55);
  border-radius: 2px;
  transform: translate(14px, 14px);
  z-index: 0;
  pointer-events: none;
}
.bio__name { margin-bottom: 1.25rem; }
.bio__heading { margin-bottom: 1.75rem; }
.bio__body {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.bio__body p + p { margin-top: 1.25rem; }
.bio__body strong { color: var(--white); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 5 — WHAT HAPPENS ON THE CALL (real sequence)
───────────────────────────────────────────────────── */
.steps__intro {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 60ch;
  margin-top: 1.25rem;
}
.steps__list {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  padding: 1.875rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.steps__num {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.steps__text {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.steps__text strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}
.steps__close {
  margin-top: 2.75rem;
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 62ch;
}
.steps__close strong { color: var(--text); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 6 — SOCIAL PROOF
───────────────────────────────────────────────────── */
.quotes__heading { margin-bottom: 3rem; }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.quote {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.quote__mark {
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}
.quote__text {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 1.75rem;
  flex: 1;
}
.quote__attr {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

/* ─────────────────────────────────────────────────────
   SECTION 7 — WHAT THIS COSTS (dark statement)
───────────────────────────────────────────────────── */
.cost__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cost__eyebrow { margin-bottom: 2rem; text-align: center; }
.cost__heading {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-bottom: 2rem;
}
.cost__strikes {
  margin-bottom: 1.75rem;
}
.cost__strikes p {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.9;
}
.cost__actually {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 2rem;
}
.cost__body {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.cost__body strong { color: var(--white); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 8 — FINAL CTA
───────────────────────────────────────────────────── */
.cta {
  padding: 9rem var(--section-x);
}
.cta__inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.cta__eyebrow { margin-bottom: 2rem; text-align: center; }
.cta__heading { margin-bottom: 1.5rem; }
.cta__body {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 2.75rem;
}
.cta__micro {
  display: block;
  margin-top: 1.375rem;
  font-size: 0.8125rem;
  color: var(--text-quiet);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────── */
.footer {
  background: var(--charcoal);
  padding: 2.25rem var(--section-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.footer__brand {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}
.footer__legal {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  text-align: right;
  max-width: 48ch;
}

/* ─────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .reveal--delay-1 { transition-delay: 0.1s; }
  .reveal--delay-2 { transition-delay: 0.2s; }
  .reveal--delay-3 { transition-delay: 0.3s; }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE — TABLET
───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .who__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .bio__layout {
    grid-template-columns: 300px 1fr;
    gap: 3rem;
  }
  .quotes__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE — MOBILE
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-y: 4rem;
    --section-x: 1.5rem;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    position: relative;
    isolation: isolate;
  }
  .hero::after { display: none; }
  .hero__content {
    padding: 5rem 1.5rem 4rem;
    position: relative;
    z-index: 1;
  }
  /* Sized so all three lines hold. At the default clamp minimum the
     first line strands "work" on its own; anything above 2.05rem pushes
     the italic "diamond." onto a fourth line by a few pixels. */
  .hero__headline {
    font-size: 2.05rem;
    line-height: 1.1;
  }

  /* ── Mobile: the diamond becomes an ambient background ──
     Same artwork and same roaming lens as desktop, but sized
     up, dimmed right down and placed behind the headline.
     The lens still travels its six waypoints, so the "pieces
     coming into focus" idea reads as atmosphere rather than
     as a diagram competing with the copy. */
  .hero__graphic {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    gap: 0;
    pointer-events: none;
    overflow: hidden;
  }
  /* vw, not % — the viz has only absolutely-positioned children, so a
     percentage width has no in-flow content to resolve against and
     collapses to zero. Anchored near the headline rather than the
     centre of the hero, which on mobile sits behind the booking card. */
  /* Tucked into the top-right corner, clear of the headline — the
     diamond and the type each get their own space. 58vw is the floor
     for legible labels: below it the 17px type renders under 8px and
     no amount of contrast rescues it. */
  .clarity-viz {
    position: absolute;
    left: 64%;
    top: 13%;
    width: 58vw;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.62;
  }
  /* Lighter blur and a fully opaque focus layer so the labels read
     sharply wherever the lens passes over them. */
  .clarity-viz__base  { filter: blur(5px); opacity: 0.50; }
  .clarity-viz__focus { opacity: 1; }
  .clarity-viz__lens {
    border-color: rgba(184, 149, 74, 0.40);
    box-shadow:
      0 0 70px rgba(184, 149, 74, 0.16),
      inset 0 0 26px rgba(255, 255, 255, 0.04);
  }
  .clarity-viz__caption { display: none; }

  /* Guarantees headline contrast no matter where the lens sits. */
  .hero__content::before {
    content: '';
    position: absolute;
    inset: -2rem -1.5rem;
    z-index: -1;
    background: radial-gradient(
      ellipse 95% 38% at 50% 18%,
      rgba(15, 15, 14, 0.45) 0%,
      rgba(15, 15, 14, 0.20) 55%,
      rgba(15, 15, 14, 0) 85%);
    pointer-events: none;
  }

  .bio__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .bio__photo-wrap {
    max-width: 280px;
  }
  .bio__photo-wrap::after {
    transform: translate(10px, 10px);
  }

  .steps__item { gap: 1.25rem; }

  .footer { flex-direction: column; text-align: center; }
  .footer__legal { text-align: center; }

  .cta { padding: 6rem 1.5rem; }
}

/* ── Last doubts, answered ─────────────────────── */
.faq__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.faq__q {
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.faq__a {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(26, 25, 23, 0.72);
}

/* ── The Clarity Check ─────────────────────────── */
.check__inner {
  max-width: 720px;
  text-align: center;
}
.check__intro {
  margin: 1.5rem auto 2.5rem;
  max-width: 44ch;
  color: var(--text-mid);
}
.check__card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
  text-align: center;
}
.check__q {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.3;
  margin-bottom: 1.75rem;
}
.check__opt {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--warm-white);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.check__opt:hover, .check__opt:focus-visible {
  border-color: var(--gold);
  background: var(--gold-faint);
}
.check__opt:active { transform: scale(0.985); }
.check__note {
  font-size: 0.8125rem;
  color: var(--text-quiet);
  margin-top: 1rem;
}
.check__reassure {
  color: var(--text-mid);
  margin-bottom: 1.75rem;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.check__micro {
  font-size: 0.8125rem;
  color: var(--text-quiet);
  margin-top: 1rem;
}
.check__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}
.check__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.2s ease;
}
.check__dot--on { background: var(--gold); }

/* ── Clarity Check in the hero ─────────────────── */
.check__card--hero {
  max-width: 500px;
  margin-top: 0.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.5rem;
}
.check__kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.check__card--hero .check__q {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.check__card--hero .check__opt {
  padding: 0.875rem 1rem;
}
.check__card--hero .check__dots { margin-top: 1.5rem; }
#cal-hero-booking {
  width: 100%;
  min-height: 480px;
  overflow: auto;
  margin-top: 0.5rem;
}
#cal-hero-booking:empty { min-height: 0; }
.hero__skip {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.5rem;
  cursor: pointer;
}
.check__fallback {
  color: var(--text-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .check__card--hero { max-width: 100%; }
}

/* ── What you walk away with (deliverable) ─────── */
.deliver {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.deliver__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  max-width: 42ch;
  margin: 1.5rem 0 2rem;
}
.deliver__card {
  background: var(--cream);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.28);
}
.dcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}
.dcard__label {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
}
.dcard__meta { font-size: 0.8125rem; color: var(--text-quiet); }
.dcard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  color: var(--text);
}
.pill {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}
.pill--ok   { background: rgba(76,120,60,0.12); color: #4C783C; }
.pill--look { background: var(--gold-faint); color: #8A6D28; }
.pill--todo { background: rgba(108,104,98,0.12); color: var(--text-quiet); }
.dcard__next {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--charcoal);
  border-radius: 8px;
}
.dcard__next-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.dcard__next-text { font-size: 0.95rem; line-height: 1.5; color: #FFFFFF; }
.dcard__note {
  display: block;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-quiet);
  text-align: center;
}
@media (max-width: 820px) {
  .deliver { grid-template-columns: 1fr; }
  .deliver__card { max-width: 460px; }
}

/* ── Clarity Map rows: clickable ask-by-email ──── */
.dcard__hint {
  font-size: 0.8125rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
a.dcard__row {
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.85rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 6px;
  transition: background 0.14s ease;
}
a.dcard__row:hover,
a.dcard__row:focus-visible {
  background: var(--gold-faint);
  outline: none;
}
a.dcard__row:hover span:first-child { color: var(--ink); }

/* ── Clarity Map: tap affordance ───────────────── */
.dcard__rt { display: flex; align-items: center; gap: 0.6rem; }
.dcard__topic { padding-right: 0.5rem; }
.dcard__chev {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05rem;
  opacity: 0.45;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
a.dcard__row:hover .dcard__chev,
a.dcard__row:focus-visible .dcard__chev {
  opacity: 1;
  transform: translateX(3px);
}