/* ══════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --fg: #111111;
  --mid: #404040;
  --dim: #707070;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --accent: #111111;

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

html {
  scroll-behavior: smooth;
  font-size: 17px;
}

body {
  background-color: var(--bg);
  /* Layered: grain (top) + subtle grid (bottom). Both fixed so they
     don't shift on scroll. Kept very low opacity so the page still
     reads as clean white from across the room. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(0,0,0,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.028) 1px, transparent 1px);
  background-size: 420px 420px, 32px 32px, 32px 32px;
  background-position: 0 0, -1px -1px, -1px -1px;
  background-attachment: fixed, fixed, fixed;
  background-repeat: repeat, repeat, repeat;
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-wrap: pretty;
  font-feature-settings: "ss01", "cv11";
}

p, li { text-wrap: pretty; }

.hero-headline, .ity-lede, .ity-close, .offer-headline, .section-eyebrow + h2, .cs-hook {
  text-wrap: balance;
}

a { color: inherit; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.container {
  /* The gutter is a variable so anything that wants to bleed past it can
     cancel exactly the padding in force, rather than hard-coding a value
     that a narrower breakpoint later changes underneath it. */
  --gutter: 1.75rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: 5rem 0;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════ */
nav {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

nav .logo {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* Invisible 44x44 hit area around the 32px smiley */
  padding: 0.375rem;
  margin: -0.375rem;
}

nav .logo img {
  width: 32px;
  height: 32px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}

nav a {
  color: var(--mid);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

nav a:hover { color: var(--fg); }

nav .nav-cta {
  color: var(--bg);
  background: var(--fg);
  padding: 0.55rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.15s ease;
}

nav .nav-cta:hover { background: #000; color: var(--bg); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-size: 1.2rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
  font-family: inherit;
}

.site-nav {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.site-nav .logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 0.375rem 0;
  margin: 0;
}

.site-nav .logo .logo-cloud {
  width: auto;
  height: 30px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.35) contrast(1.08);
}

/* Hover: lightning strikes from the cloud */
.site-nav .logo .logo-bolt {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 13px;
  height: auto;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.site-nav .logo:hover .logo-bolt,
.site-nav .logo:focus-visible .logo-bolt {
  animation: bolt-flash 0.6s linear infinite;
}

@keyframes bolt-flash {
  0%, 54%   { opacity: 1; }
  55%, 69%  { opacity: 0; }
  70%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .logo:hover .logo-bolt { animation: none; opacity: 1; }
}

.site-nav ul {
  margin: 0;
  padding: 0;
}

/* The desktop row starts at 769px, and adding "Handled" as a fifth top-level
   item pushed what the row needs past that: logo + items + the base 2rem gaps
   measure 776px, so between 769px and ~780px the CTA overflowed the container.
   Tightening the gap in that band buys 32px of headroom and changes nothing
   at the widths where the row already had room. Measured, not guessed --
   re-measure before adding a sixth item, because there is no slack left. */
@media (min-width: 769px) and (max-width: 900px) {
  #nav-menu { gap: 1.5rem; }
}

/* Work-with-me dropdown: the five rungs */
.nav-drop { position: relative; }

.nav-caret {
  font-size: 0.55rem;
  color: var(--dim);
  margin-left: 0.2rem;
  vertical-align: 2px;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.9rem;
  min-width: 232px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 16px 32px -16px rgba(0, 0, 0, 0.18);
  z-index: 60;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

/* Invisible bridge so hover survives the gap between trigger and panel */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  height: 0.7rem;
}

/* The Content panel hangs from the right of its trigger, not the left.
   Content is the last link before the CTA, so a left-anchored 232px panel
   starts near the right edge of the nav and grows outward — on a narrow
   laptop it would run past the viewport. Anchored right it grows back
   under the links instead, and the CTA to its right guarantees the room
   at every width. This is why the mega panel's `position: static` trick
   is scoped to .nav-drop-mega: it solves the same problem a different way,
   and applying it here would stretch this panel across the whole nav. */
.nav-drop:not(.nav-drop-mega) .nav-dropdown { left: auto; right: -0.9rem; }

.nav-drop:hover .nav-dropdown,
.nav-drop:focus-within .nav-dropdown,
.nav-drop.open .nav-dropdown { display: flex; }

.nav-dropdown li { width: 100%; }

.nav-drop-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.85rem 1.25rem 0.5rem;
}

.nav-drop-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0.6rem;
}

/* Approach link lives only in the mobile menu; desktop reaches it
   through the dropdown's "Why this works" row */
.nav-mobile-only { display: none; }

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.68rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
}

.nav-dropdown a:hover { background: var(--bg-soft); color: var(--fg); }

.nav-drop-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.nav-drop-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.nav-drop-name {
  font-weight: 500;
  color: var(--fg);
}

.nav-drop-desc {
  font-size: 0.76rem;
  color: var(--dim);
  font-weight: 400;
}

/* ── The three-column mega panel ──────────────────────────────────
   The Work-with-me dropdown lists the ways in as columns. It is wider than
   a normal dropdown, so at desktop width it goes static and
   .site-nav .container goes relative — the panel then resolves against
   the container, edge to edge, and can never run off the right of the
   viewport the way a trigger-anchored panel does on a narrow laptop.

   Everything in here is scoped to .nav-drop-mega, not .nav-drop. The
   Content dropdown is an ordinary trigger-anchored panel and must keep
   .nav-drop's own `position: relative`, or it would stretch the width of
   the nav the way the mega panel does. */
@media (min-width: 769px) {
  .site-nav .container { position: relative; }
  .nav-drop-mega { position: static; }

  /* Hover bridge. The panel hangs off .container, not off the link, so
     between the bottom of "Work with me" (y≈92) and the top of the panel
     (y≈125) sits the container's 17px padding plus the 8px offset — 33px
     of dead space that drops :hover on the way down. The panel's own
     ::before bridge is only 12px and was sized back when the panel hung
     off the link. This one is anchored to the trigger, so it covers the
     gap without spanning the nav and swallowing the other links. */
  .nav-drop-mega > a { position: relative; }
  .nav-drop-mega > a::after {
    content: "";
    position: absolute;
    left: -0.9rem;
    right: -0.9rem;
    top: 100%;
    height: 2rem; /* meets the panel's own ::before bridge, which covers the last few px */
  }

  .nav-dropdown.nav-mega {
    left: 0;
    right: 0;
    min-width: 0;
    padding: 1.5rem 1.6rem 1.1rem;
    display: none;
    /* minmax(0,…) not 1fr: the rows are nowrap by default, so plain 1fr
       resolves to min-content and the columns come out uneven. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  /* The base rules flip display to flex on hover; the panel is a grid. */
  .nav-drop:hover .nav-dropdown.nav-mega,
  .nav-drop:focus-within .nav-dropdown.nav-mega,
  .nav-drop.open .nav-dropdown.nav-mega { display: grid; }

  .nav-mega-col + .nav-mega-col {
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
  }

  .nav-mega-col > a {
    align-items: flex-start;
    padding: 0.7rem 0.7rem 0.8rem;
  }

  .nav-mega-col .nav-drop-name { font-weight: 600; }

  /* Released from the single-row dropdown's nowrap: the blurb is two or
     three lines in a column this narrow. */
  .nav-mega-col .nav-drop-desc {
    white-space: normal;
    line-height: 1.4;
  }

  /* Footer row spans all three columns. */
  .nav-mega-foot {
    grid-column: 1 / -1;
    display: flex;
    gap: 1.5rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }

  .nav-mega-foot a {
    width: auto;
    padding: 0.35rem 0.6rem;
    font-size: 0.84rem;
    color: var(--dim);
  }

  .nav-mega-foot a:hover { color: var(--fg); }
}

/* Mobile: the panel expands inline inside the full-screen overlay, so
   the three columns become three stacked rows — which is what the menu
   did before it became a grid. */
@media (max-width: 768px) {
  .nav-mega-col > a { align-items: flex-start; }
  .nav-mega-foot {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
    margin-top: 0.5rem;
  }
}



/* ══════════════════════════════════════════════════════════════
   SECTION ATOMS
   ══════════════════════════════════════════════════════════════ */
.section-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
  margin-bottom: 2rem;
  max-width: 720px;
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* Soft pixel clouds drifting slowly across the hero, left to right.
   Negative delays start them mid-sky on load. */
.hero-cloud {
  position: absolute;
  left: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  height: auto;
  animation: cloud-cross linear infinite;
}

.hero-cloud-1 {
  top: 1.75rem;
  width: 264px;
  animation-duration: 150s;
  animation-delay: -85s;
}

.hero-cloud-2 {
  top: 11.5rem;
  width: 176px;
  animation-duration: 110s;
  animation-delay: -30s;
}

/* Smaller = farther away: lighter and slower */
.hero-cloud-3 {
  top: 5.5rem;
  width: 112px;
  opacity: 0.8;
  animation-duration: 200s;
  animation-delay: -140s;
}

.hero-cloud-4 {
  top: 19rem;
  width: 200px;
  animation-duration: 125s;
  animation-delay: -95s;
}

.hero-cloud-5 {
  top: 15rem;
  width: 88px;
  opacity: 0.7;
  animation-duration: 230s;
  animation-delay: -50s;
}

.hero-cloud-6 {
  top: 8.5rem;
  width: 148px;
  opacity: 0.85;
  animation-duration: 175s;
  animation-delay: -160s;
}

.hero-cloud-7 {
  top: 3rem;
  width: 72px;
  opacity: 0.65;
  animation-duration: 260s;
  animation-delay: -105s;
}

.hero-cloud-8 {
  top: 23rem;
  width: 132px;
  opacity: 0.8;
  animation-duration: 155s;
  animation-delay: -20s;
}

.hero-cloud-9 {
  top: 17.5rem;
  width: 104px;
  opacity: 0.7;
  animation-duration: 215s;
  animation-delay: -185s;
}

@keyframes cloud-cross {
  from { transform: translateX(-280px); }
  to   { transform: translateX(100vw); }
}

@media (max-width: 880px) {
  .hero-cloud-1 { width: 200px; }
  .hero-cloud-2,
  .hero-cloud-4,
  .hero-cloud-6,
  .hero-cloud-8 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cloud { animation: none; }
  .hero-cloud-1 { transform: translateX(64vw); }
  .hero-cloud-2 { transform: translateX(12vw); }
  .hero-cloud-3 { transform: translateX(38vw); }
  .hero-cloud-4 { transform: translateX(74vw); }
  .hero-cloud-5 { transform: translateX(22vw); }
  .hero-cloud-6 { transform: translateX(48vw); }
  .hero-cloud-7 { transform: translateX(84vw); }
  .hero-cloud-8 { transform: translateX(30vw); }
  .hero-cloud-9 { transform: translateX(58vw); }
}

/* Above the collapse breakpoint, the hero breaks out wider than the rest of
   the site but stays left-aligned with the 880px content column — only the
   calendar overhangs to the right. The left margin tracks the centered content
   container exactly (its own 1.75rem padding supplies the gutter); the right
   margin keeps a stable ~1100px hero so the calendar gets room without going
   edge-to-edge. Below 881px the default .container takes over (normal stacking). */
@media (min-width: 881px) {
  .hero .container {
    max-width: none;
    margin-left: max(0px, calc((100vw - 880px) / 2));
    margin-right: max(1.75rem, calc((100vw - 1320px) / 2));
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-copy { min-width: 0; }

.hero-cal { min-width: 0; scroll-margin-top: 2rem; }

.hero-cal-label {
  font-size: 0.98rem;
  color: var(--mid);
  margin: 0 0 0.9rem;
  line-height: 1.55;
  font-weight: 500;
}

.hero-cal-label a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-cal .cal-embed-wrap { margin: 0; }

.hero-cal-note {
  margin: 0.8rem auto 0;
  max-width: 30ch;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--dim);
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
  font-weight: 500;
}

.hero-identity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.75rem;
}

.hero-identity .hero-eyebrow {
  margin-bottom: 0;
}

.hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px -10px rgba(0, 0, 0, 0.2);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  color: var(--fg);
  max-width: 820px;
  margin: 0 0 2rem;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hero-headline strong { font-weight: 800; }
/* Rust underline with the brand cloud drifting behind the words —
   one per page, on that page's central noun. Global on purpose. */
.hero-u {
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
  text-decoration-color: #b0433b;
}
.hero-u::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -6%;
  top: -38%;
  bottom: -18%;
  background: url("/images/cloud-1.svg") no-repeat center / contain;
  opacity: 0.85;
  pointer-events: none;
}
.path-definition strong { color: var(--fg); font-weight: 650; }
/* Accent colors drawn from the pixel-art palette (lighthouse harbor);
   reserved for the team / buyers / machines triad. The compound
   selectors outrank the section-scoped `strong` color rules. */
.hero-c-blue, .om-section strong.hero-c-blue, .cs-body strong.hero-c-blue, .path-definition strong.hero-c-blue, .hero-body strong.hero-c-blue { color: #38618c; }
.hero-c-green, .om-section strong.hero-c-green, .cs-body strong.hero-c-green, .path-definition strong.hero-c-green, .hero-body strong.hero-c-green { color: #1a7f37; }
.hero-c-amber, .om-section strong.hero-c-amber, .cs-body strong.hero-c-amber, .path-definition strong.hero-c-amber, .hero-body strong.hero-c-amber { color: #b45309; }

.hero-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--mid);
  max-width: 30rem;
  margin: 0 0 1.35rem;
  line-height: 1.6;
}

/* Moved-down narrative section */
.lede-text p {
  font-size: 1.05rem;
  color: var(--mid);
  margin-bottom: 1.35rem;
  max-width: 720px;
  line-height: 1.7;
}

.lede-text p:last-child { margin-bottom: 0; }

.hero-body p {
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  color: var(--mid);
  max-width: 720px;
  margin-bottom: 1.5rem;
  line-height: 1.65;
}

.hero-body p:last-child { margin-bottom: 0; }

.hero-body strong {
  color: var(--fg);
  font-weight: 600;
}

/* Stanza paragraph — 3 short lines that read as a single beat */
.hero-stanza {
  border-left: 2px solid var(--border-strong);
  padding-left: 1.1rem;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--fg);
  font-weight: 500;
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  padding: 0.95rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  min-height: 48px;
}

.btn-primary:hover { background: #000; }

.btn-primary .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mid);
  border: 0;
  padding: 0.95rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
  background: transparent;
  font-family: inherit;
}

.btn-secondary:hover { color: var(--fg); }

.btn-secondary .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-secondary:hover .btn-arrow {
  transform: translateX(2px);
}

/* ══════════════════════════════════════════════════════════════
   TRUSTED BY
   ══════════════════════════════════════════════════════════════ */
.trusted {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.trusted-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 500;
}

.trusted-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 3.5rem;
}

.trusted-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  color: var(--mid);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.trusted-item:hover { opacity: 1; }

.trusted-item img {
  max-height: 2.25rem;
  max-width: 10rem;
  width: auto;
  height: auto;
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.2s ease;
  display: block;
}

.trusted-item:hover img {
  filter: grayscale(100%) opacity(1);
}

.trusted-item:has(img) .trusted-wordmark { display: none; }

@media (max-width: 600px) {
  .trusted-grid { gap: 1.75rem 2.5rem; }
  .trusted-item img { max-height: 1.75rem; max-width: 8rem; }
}

/* ══════════════════════════════════════════════════════════════
   TRANSFER SESSION (inverted dark card)
   ══════════════════════════════════════════════════════════════ */
#transfer-session {
  padding: 4.5rem 0;
}

.offer-card {
  position: relative;
  background: var(--fg);
  color: var(--bg);
  padding: 3.5rem 3rem;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 22px 50px -24px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='220'%3E%3Cdefs%3E%3Cpattern id='d' x='0' y='0' width='14' height='14' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='7' cy='7' r='1.35' fill='white' opacity='0.16'/%3E%3C/pattern%3E%3CradialGradient id='f' cx='100%25' cy='0%25' r='100%25'%3E%3Cstop offset='0%25' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23d)' mask='url(%23m)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
}

/* Tiny accent bar — a graphic "01 02 03" stripe near the eyebrow */
.offer-card .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.offer-card .section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
}

.offer-card .section-eyebrow {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.offer-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  color: var(--bg);
  margin-bottom: 1.5rem;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.022em;
  max-width: 720px;
}

.offer-intro {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.92);
  max-width: 720px;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

.offer-weeks {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0.5rem 0 2.25rem;
  padding-left: 2.25rem;
}

/* The timeline rail */
.offer-weeks::before {
  content: "";
  position: absolute;
  left: 0.6875rem; /* aligns rail center with node center (see .offer-week::before) */
  top: 1.25rem;
  bottom: 1.25rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.28) 12%,
    rgba(255, 255, 255, 0.28) 88%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-radius: 1px;
}

.offer-week {
  position: relative;
  padding: 1.25rem 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 8rem) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  border: 0;
}

/* Timeline node — a ringed dot on the rail next to each week.
   left:-2rem + offer-weeks padding-left:2.25rem puts the dot at 4px in;
   width:1rem (16px) gives a center at 12px, matching the rail center. */
.offer-week::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 1.85rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--bg);
  box-sizing: border-box;
  /* Halo of card-bg color around the dot so the rail is visually broken
     by the node (no line passing through the ring). */
  box-shadow: 0 0 0 4px var(--fg);
}

.offer-week:last-child { border-bottom: 0; }

.offer-week-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  font-weight: 600;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  opacity: 0.95;
}

.offer-week-num {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "lnum";
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--bg);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: none;
  display: block;
}

.offer-week-body {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.94);
  line-height: 1.6;
  max-width: 720px;
}

.offer-week-body strong { color: var(--bg); font-weight: 600; }

.offer-deliverable {
  padding: 1.75rem 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.94);
  max-width: 720px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}

.offer-deliverable strong {
  color: var(--bg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.8;
}

.offer-price-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 2.25rem 0 2.5rem;
}

.offer-price-amount {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--bg);
  letter-spacing: -0.015em;
  line-height: 1.1;
  flex-shrink: 0;
}

.offer-price-note {
  color: rgba(255,255,255,0.88);
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.55;
  flex: 1;
  min-width: 16rem;
}

@media (max-width: 600px) {
  .offer-week {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  padding: 1rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  min-height: 48px;
}

.offer-cta:hover {
  background: transparent;
  color: var(--bg);
}

.offer-cta .btn-arrow {
  transition: transform 0.2s ease;
}

.offer-cta:hover .btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .offer-card { padding: 2.25rem 1.5rem; border-radius: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDERS
   ══════════════════════════════════════════════════════════════ */
.image-placeholder {
  background:
    linear-gradient(135deg, var(--bg-soft) 0%, #f3f3f3 100%);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 18px,
      rgba(0, 0, 0, 0.025) 18px,
      rgba(0, 0, 0, 0.025) 19px);
  pointer-events: none;
}

.image-placeholder .placeholder-label {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.image-placeholder .placeholder-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dim);
}

.hero-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-top: 3rem;
}

/* Real hero image (replaces .hero-img placeholder).
   Source can be any aspect; we crop to a 2:1 panoramic banner. */
img.hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 18px 40px -22px rgba(0, 0, 0, 0.18);
}

.about-portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.about-portrait .placeholder-label {
  font-size: 0.65rem;
  padding: 0.3rem 0.65rem;
}

img.about-portrait {
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px -12px rgba(0, 0, 0, 0.15);
}

.work-img {
  aspect-ratio: 16 / 10;
  width: 100%;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════ */
.about-layout {
  display: flex;
  gap: 2.25rem;
  align-items: flex-start;
}

.about-text {
  flex: 1;
  min-width: 0;
}

.about-text p {
  font-size: 1.05rem;
  color: var(--mid);
  margin-bottom: 1.35rem;
  max-width: 720px;
  line-height: 1.7;
}

/* Entity home (/about) — a bigger portrait than the homepage strip */
.about-portrait-lg { width: 200px; height: 200px; }

@media (max-width: 600px) {
  .about-layout { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .about-portrait-lg { width: 150px; height: 150px; }
}

.about-text strong {
  color: var(--fg);
  font-weight: 600;
}

.about-text a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 0.15s ease;
}

.about-text a:hover { text-decoration-color: var(--fg); }

/* ══════════════════════════════════════════════════════════════
   IS THIS YOU?
   ══════════════════════════════════════════════════════════════ */
.ity-lede {
  font-size: 1.1rem;
  color: var(--mid);
  max-width: 720px;
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

.ity-lede strong { color: var(--fg); font-weight: 600; }

.ity-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: 720px;
}

.ity-list li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.ity-list li:last-child { border-bottom: 1px solid var(--border); }

.ity-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
}

.ity-close {
  font-size: 1.05rem;
  color: var(--mid);
  line-height: 1.65;
  padding: 1.5rem 0 0;
  max-width: 720px;
}

.ity-close strong { color: var(--fg); font-weight: 600; }

/* Homepage: the Seat option, sitting outside the numbered Path */
.shape-item-aside { border-top: 1px solid var(--border-strong); }
.shape-aside-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Homepage: a clear break, then the offers that sit outside the Path */
.shapes-aside {
  margin-top: 3.25rem;
  padding-top: 2.75rem;
  border-top: 2px solid var(--border-strong);
}
.shapes-aside-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.shapes-aside-intro {
  margin: 0.55rem 0 1.75rem;
  max-width: 44rem;
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.65;
}
.shapes-aside-intro strong { color: var(--fg); font-weight: 600; }
.shapes-aside-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.shape-aside-card {
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.shape-aside-card .shape-title { margin-bottom: 0.6rem; }
.shape-aside-card .shape-body { max-width: none; }
@media (max-width: 640px) {
  .shapes-aside-grid { grid-template-columns: 1fr; }
}

.approach-cta { margin-top: 1.5rem; }
.approach-cta .btn-secondary { padding-left: 0; }

/* ── The Handled promo ───────────────────────────────────────────
   Full width under the two columns of eight, and the one card on the
   page that carries art. The copy sits on the image, so everything
   inside is a layer: the photo, a scrim dark enough to hold small
   text, then the words. Light text throughout, in both themes —
   the ground here is the photograph, not the page. */
.handled-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem 2.4rem;
  align-items: end;
  margin-top: 2.5rem;
  padding: 2.4rem 1.9rem 1.9rem;
  border-radius: 14px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.handled-promo:hover {
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.handled-promo-shot {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

/* Darker at the left, where the sentence runs, and lifted overall so
   the price on the right stays legible against open sky. */
.handled-promo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 12, 16, 0.82) 0%, rgba(8, 12, 16, 0.66) 55%, rgba(8, 12, 16, 0.52) 100%);
}

.handled-promo-tag {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: #7fe0ab;
}

.handled-promo-name {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
}

.handled-promo-what {
  display: block;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.handled-promo-side {
  display: block;
  text-align: right;
}

.handled-promo-price {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.handled-promo-price-sm {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.handled-promo-per {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.68);
}

.handled-promo-go {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: #7fe0ab;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .handled-promo {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1.9rem 1.5rem 1.6rem;
  }
  .handled-promo-side { text-align: left; }
  .handled-promo::after {
    background: linear-gradient(to bottom, rgba(8, 12, 16, 0.72) 0%, rgba(8, 12, 16, 0.85) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .handled-promo:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   WORK CARDS (homepage)
   ══════════════════════════════════════════════════════════════ */
.work-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.work-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 6px 16px -10px rgba(0, 0, 0, 0.08);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.work-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 36px -18px rgba(0, 0, 0, 0.22);
}

.work-card .image-placeholder,
.work-card-img {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
}

.work-card-img {
  object-fit: cover;
  object-position: center center;
}

.work-card-body {
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.work-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.85rem;
}

.work-card-logo {
  height: 1.6rem;
  width: auto;
  max-width: 7rem;
  filter: grayscale(100%);
  opacity: 0.9;
  display: inline-block;
}

.work-card-logo[src*="iwbi"] {
  height: 2.5rem;
  max-width: 9rem;
}

.work-card-role {
  font-size: 0.78rem;
  color: var(--dim);
  font-weight: 500;
  text-align: right;
  letter-spacing: 0.01em;
}

.work-card-hook {
  font-size: 1.05rem;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.work-card-cta {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--mid);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s ease;
}

.work-card:hover .work-card-cta { color: var(--fg); }

.work-card-cta .btn-arrow {
  transition: transform 0.2s ease;
}

.work-card:hover .work-card-cta .btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .work-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CASE STUDY PAGE
   ══════════════════════════════════════════════════════════════ */
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dim);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0;
  min-height: 44px;
  transition: color 0.15s ease;
}

/* At/below the 768px breakpoint the back-link and section eyebrow used
   to read as one run-on string. Force the back-link onto its own row. */
@media (max-width: 768px) {
  .cs-back {
    display: flex;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

.cs-back:hover { color: var(--fg); }

.cs-back .btn-arrow { transition: transform 0.2s ease; }
.cs-back:hover .btn-arrow { transform: translateX(-3px); }

.cs-hero {
  padding: 4rem 0 2.5rem;
}

.cs-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.cs-hero-logo {
  height: 2.5rem;
  width: auto;
  max-width: 11rem;
  filter: grayscale(100%);
  opacity: 0.9;
}

.cs-hero-logo[src*="iwbi"] {
  height: 3.75rem;
  max-width: 14rem;
}

.cs-hero-role {
  font-size: 0.9rem;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.cs-hook {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--fg);
  max-width: 820px;
  margin: 0 0 2rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.cs-screenshot {
  margin-bottom: 3rem;
}

.cs-screenshot.work-img { aspect-ratio: 16 / 9; margin-bottom: 3rem; }

/* Real screenshot image (replaces the cs-screenshot placeholder) */
img.cs-screenshot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 12px 28px -16px rgba(0, 0, 0, 0.12);
  aspect-ratio: auto;
}

.cs-body {
  padding: 0 0 2.5rem;
}

.cs-body p {
  font-size: 1.05rem;
  color: var(--mid);
  margin-bottom: 1.35rem;
  max-width: 760px;
  line-height: 1.75;
}

.cs-body p:last-child { margin-bottom: 0; }

.cs-body strong {
  color: var(--fg);
  font-weight: 600;
}

.cs-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.cs-metric {
  font-size: 0.82rem;
  color: var(--mid);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-weight: 500;
}

.cs-metric span { color: var(--fg); }

.cs-visit-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.cs-visit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 0.15s ease;
  padding: 0.55rem 0;
  min-height: 44px;
}

.cs-visit:hover { text-decoration-color: var(--fg); }

.cs-visit .btn-arrow { transition: transform 0.2s ease; }
.cs-visit:hover .btn-arrow { transform: translateX(2px); }

/* ══════════════════════════════════════════════════════════════
   OPERATING MAP LANDING PAGE
   ══════════════════════════════════════════════════════════════ */
.om-hero {
  padding: 4.5rem 0 2.5rem;
}

/* Keep the back link on its own line, above the eyebrow. */
.om-hero .cs-back {
  display: flex;
  width: fit-content;
}

img.om-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 2.5rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 18px 40px -22px rgba(0, 0, 0, 0.18);
}

.om-lede {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  color: var(--mid);
  line-height: 1.65;
  max-width: 760px;
  margin: 1.5rem 0 0;
}

.om-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  margin-top: 2.25rem;
}

.om-cta-note {
  font-size: 0.92rem;
  color: var(--dim);
  font-weight: 500;
  max-width: 28rem;
}

.om-section {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
}

.om-section p {
  font-size: 1.05rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 1.25rem;
}

.om-section p:last-child {
  margin-bottom: 0;
}

/* .om-section p carries bottom margin only, so a paragraph that follows a
   non-paragraph block sits flush against it. Restore the rhythm for the three
   adjacencies where that actually happens: the card grid, the comparison
   rows, and a trailing note under a CTA button. 1.7rem matches the space
   above .om-cards, so those blocks sit evenly. */
.om-section .om-cards + p,
.om-section .om-compare + p,
.om-section .btn-primary + p {
  margin-top: 1.7rem;
}

.om-section strong {
  color: var(--fg);
  font-weight: 600;
}

.om-section .cs-section-title {
  margin-top: 0;
}

.om-emphasis {
  font-size: 1.1rem;
  color: var(--fg);
  margin-top: 1.5rem;
}

.om-investment {
  background: var(--bg-soft);
}

.om-price-line {
  font-size: 1.15rem;
  color: var(--fg);
  margin-bottom: 2rem;
  max-width: 720px;
  line-height: 1.6;
}

/* Guide closing CTA: emphasized prose, not the offer pages' big price lead */
.guide-cta-line {
  font-size: 1.15rem;
  color: var(--fg);
  margin-bottom: 2rem;
  max-width: 720px;
  line-height: 1.7;
}
.guide-cta-line strong { font-weight: 600; color: var(--fg); }

.om-price-line strong {
  font-size: clamp(1.6rem, 2.6vw, 1.95rem);
  font-weight: 600;
  color: var(--fg);
  display: inline-block;
  margin-right: 0.5rem;
}

/* In-body subsection title for long case studies */
.cs-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--fg);
  margin: 2.5rem 0 1.1rem;
  max-width: 760px;
}

/* Sub-subsection title (h3 inside a cs-section) */
.cs-subsection-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--dim);
  margin: 1.75rem 0 0.85rem;
  max-width: 760px;
}

/* Dash-marked bullets for case-study body sections */
.cs-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.cs-bullets li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 760px;
}

.cs-bullets li::before {
  content: "\2014"; /* em dash */
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: var(--dim);
  font-weight: 500;
}

.cs-bullets li strong {
  color: var(--fg);
  font-weight: 600;
}

/* Guides index: list items with art snippets */
.cs-bullets li.guide-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding-left: 0;
}
.cs-bullets li.guide-item::before { content: none; }
.guide-thumb { flex-shrink: 0; display: block; }
.guide-thumb img {
  display: block;
  width: 156px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.guide-item-text { min-width: 0; }
@media (max-width: 560px) {
  .guide-thumb img { width: 104px; height: 66px; }
  .cs-bullets li.guide-item { gap: 0.9rem; }
}

/* Richer variant — adds top/bottom dividers between heavy items */
.cs-bullets.cs-bullets-rich li {
  padding: 1.15rem 0 1.15rem 1.6rem;
  border-top: 1px solid var(--border);
}

.cs-bullets.cs-bullets-rich li:last-child {
  border-bottom: 1px solid var(--border);
}

.cs-bullets.cs-bullets-rich li::before {
  top: 1.15rem;
}

/* Numbered variant — renders 01 / 02 / 03 instead of em-dashes */
.cs-bullets.cs-bullets-numbered {
  counter-reset: cs-num;
  padding-left: 0;
}

.cs-bullets.cs-bullets-numbered li {
  counter-increment: cs-num;
  padding: 1.15rem 0 1.15rem 2.5rem;
  border-top: 1px solid var(--border);
}

.cs-bullets.cs-bullets-numbered li:last-child {
  border-bottom: 1px solid var(--border);
}

.cs-bullets.cs-bullets-numbered li {
  padding-left: 2.75rem;
}

.cs-bullets.cs-bullets-numbered li::before {
  content: counter(cs-num, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mid);
  top: 1.2rem;
  left: 0;
}

/* Pull quotes / testimonials */
.cs-quote {
  margin: 2.25rem 0;
  padding: 1.75rem 2rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--fg);
  border-radius: 0 12px 12px 0;
}

.cs-quote blockquote {
  font-size: 1.05rem;
  color: var(--fg);
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 720px;
}

.cs-quote figcaption {
  font-size: 0.88rem;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.cs-quote-status {
  font-style: italic;
  opacity: 0.7;
  margin-left: 0.4rem;
}

@media (max-width: 600px) {
  .cs-quote { padding: 1.25rem 1.25rem 1.25rem 1.5rem; }
}

/* Framing note on a republished newsletter issue. The archive is written
   for certification leaders; this tells a reader who isn't one why the
   piece is on this site and which part carries over. Written into the page
   by tools/build-blog.mjs from blog/_data/notes.json. */
.blog-note {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.blog-note-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}

.blog-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
  max-width: 640px;
}

@media (max-width: 600px) {
  .blog-note { padding: 1rem; }
}

/* Newsletter signup. Posts to /api/subscribe, which talks to beehiiv from
   the server, so the reader never leaves the site. */
.sub-form { margin: 1.5rem 0 0; max-width: 520px; }

.sub-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.sub-form-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sub-form-input::placeholder { color: var(--dim); }

.sub-form-input:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
  border-color: var(--fg);
}

.sub-form .btn-primary { flex: 0 0 auto; }
.sub-form .btn-primary[disabled] { opacity: 0.6; cursor: default; }

/* The honeypot has to be reachable by anything reading the DOM and invisible
   to anyone reading the page, so it is moved off-screen rather than hidden —
   display:none is the one thing a bot can cheaply detect.
   The same declarations are also inline on the element. That is deliberate:
   the stylesheet is cached separately from the HTML, so a visitor can hold a
   new page and an old stylesheet, and a trap that depends on this rule shows
   up as an unlabelled empty box in the middle of the form. */
.sub-form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sub-form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dim);
  margin-bottom: 0.4rem;
}

.sub-form-msg {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mid);
  min-height: 1.35em;
}

/* The issue's object, on the issue's own page. Square and modest rather than
   the full-width 16:9 a guide opens with — it is a mark for the piece, not a
   scene to walk into, and the same object the card carries. */
img.blog-hero-art {
  display: block;
  width: 168px;
  height: 168px;
  margin-top: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 14px 30px -20px rgba(0, 0, 0, 0.18);
}

@media (max-width: 560px) {
  img.blog-hero-art { width: 120px; height: 120px; margin-top: 1.75rem; }
}

/* Notes — the LinkedIn feed at /notes.
   Presented as posts, because that is what they are: a byline, the text, the
   counts it earned, a link to the original. Card-shaped rather than the plain
   dated entries the guides use, so the section reads as a feed on sight.
   It stops short of copying LinkedIn's interface — no reaction buttons, no
   LinkedIn mark — since the reader is on this site, not that one. */
.notes-list { max-width: 620px; }

.note {
  margin: 0 0 1.1rem;
  padding: 1.15rem 1.25rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.note-head {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

img.note-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
}

.note-who { display: flex; flex-direction: column; min-width: 0; }

.note-name { font-weight: 600; font-size: 0.95rem; color: var(--fg); line-height: 1.25; }

.note-role {
  font-size: 0.78rem;
  color: var(--dim);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-when { font-size: 0.75rem; color: var(--dim); margin-top: 0.1rem; }

.note-body p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: none;
}

.note-body p:last-of-type { margin-bottom: 0; }

img.note-art {
  display: block;
  width: calc(100% + 2.5rem);
  margin: 1rem -1.25rem -1rem;
  height: auto;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

img.note-art + img.note-art { margin-top: 0; }

/* The counts and the outbound link sit under a rule, the way the engagement
   row does on the platform, without pretending to be interactive. */
.note-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: baseline;
  margin: 1rem -1.25rem 0;
  padding: 0.7rem 1.25rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}

.note-counts { color: var(--dim); }
.note-foot a { color: var(--mid); text-decoration: none; font-weight: 500; }
.note-foot a:hover { text-decoration: underline; }

.note-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
}

.note-labels span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.18rem 0.55rem;
}

@media (max-width: 560px) {
  .note { padding: 1rem 1rem 0.9rem; }
  img.note-art { width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; }
  .note-foot { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* The "Lately" rail on the homepage.
   The same post card as /notes, cut down and laid out as a horizontal
   scroller. Every card is a fixed size so the rail has one clean bottom
   edge, and the copy is truncated by clipping rather than by cutting the
   string — the full text stays in the markup. "…see more" is a link to the
   post on /notes, not an in-place expander: growing one card in a rail
   shifts every other card under the reader's cursor. */
.home-notes { padding: 3rem 0; }

.home-note-rail {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 1.5rem;
  padding: 0.25rem 0 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.home-note-rail > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.home-note-rail::-webkit-scrollbar { height: 8px; }
.home-note-rail::-webkit-scrollbar-track { background: transparent; }
.home-note-rail::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 100px;
}

.home-note {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 420px;
  overflow: hidden;
  padding: 1rem 1.1rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-note:hover {
  border-color: var(--mid);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.35);
}

.home-note-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: 0.7rem;
}

img.home-note-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
}

.home-note-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-note-name { font-weight: 600; font-size: 0.88rem; line-height: 1.25; }

.home-note-role,
.home-note-when {
  font-size: 0.7rem;
  color: var(--dim);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The copy takes whatever height is left after the fixed parts, and the
   overflow is faded rather than cut, so it reads as continuing instead of
   as having ended mid-word. */
.home-note-copy {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.home-note-copy p {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: none;
}

.home-note-copy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.2rem;
  background: linear-gradient(to bottom, transparent, var(--bg) 70%);
}

.home-note-more {
  flex: 0 0 auto;
  padding: 0.35rem 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--mid);
}

.home-note:hover .home-note-more { text-decoration: underline; }

/* A card with no image and no counts ends on "see more", so it has to
   carry the bottom padding the foot would otherwise have provided. */
.home-note-more:last-child { padding-bottom: 1rem; }

/* Full-bleed band at the foot of the card, cropped to a fixed height so
   a portrait photo and a landscape one give the same card shape. */
img.home-note-art {
  flex: 0 0 132px;
  width: calc(100% + 2.2rem);
  height: 132px;
  margin: 0 -1.1rem;
  object-fit: cover;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.home-note-foot {
  flex: 0 0 auto;
  margin: 0 -1.1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--dim);
}

/* A card with an image already has a rule above the picture; a second one
   under it would box the photo in. */
img.home-note-art + .home-note-foot { border-top: 0; }

/* Run the rail to the edge of the screen on small viewports, so the cut-off
   card that signals "there is more" is not hidden by the page gutter.
   Cancels --gutter rather than a literal, and uses no vw units: vw counts
   the scrollbar, and a hard-coded 1.75rem overshot the 1.25rem gutter that
   .container switches to under 420px, which gave the whole page 8px of
   horizontal scroll. */
@media (max-width: 768px) {
  .home-note-rail {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (max-width: 400px) {
  .home-note { width: 280px; }
}

/* Blog cards.
   /guides lists rows with a wide 16:9 scene thumbnail. The newsletter uses
   the same pixel-art vernacular but a different register: a square, tightly
   framed object rather than an establishing shot, on a card rather than a
   row. That reads as a different kind of content before a word is read,
   without leaving the family. Cards render fine with no image at all, which
   is what happens until the art for an issue exists. */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-cards li::before { content: none; }

.blog-card a {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1rem;
  align-items: start;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.blog-card a:hover,
.blog-card a:focus-visible {
  border-color: var(--fg);
  transform: translateY(-1px);
}

.blog-card-noart a { grid-template-columns: 1fr; }

.blog-card-thumb {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.blog-card-date {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.35rem;
}

.blog-card-title {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
  margin: 0 0 0.3rem;
}

.blog-card-sub {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mid);
}

@media (max-width: 560px) {
  .blog-card a { grid-template-columns: 68px 1fr; gap: 0.85rem; }
  .blog-card-thumb { width: 68px; height: 68px; }
}

/* The same form in the footer, on every page. */
.footer-sub {
  margin: 0 0 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--border);
  max-width: 560px;
}

.footer-sub-line {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.footer-sub .sub-form { margin-top: 1rem; }

/* The footer sits on #2b5d64 and colours its text in white alpha, so the
   form's own greys — chosen against the page background — have to be
   restated here. The input keeps its white field: that reads as somewhere
   to type against the dark, and needs no change. */
.footer-sub { border-bottom-color: rgba(255, 255, 255, 0.18); }
.footer-sub .sub-form-label { color: rgba(255, 255, 255, 0.55); }
.footer-sub .sub-form-msg { color: rgba(255, 255, 255, 0.8); }
.footer-sub .sub-form-msg-ok { color: #ffffff; }
.footer-sub .sub-form-msg-error { color: #ffb4ab; }
.footer-sub .sub-form-input:focus-visible {
  outline-color: #ffffff;
  border-color: #ffffff;
}

.sub-form-msg-error { color: #b3261e; }
.sub-form-msg-ok { color: var(--fg); font-weight: 600; }

.sub-form-done .sub-form-row { display: none; }

/* Subline under the work-card hook on the homepage */
.work-card-subline {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.55;
  margin-top: -0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   QUOTES GRID (homepage testimonial section)
   ══════════════════════════════════════════════════════════════ */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.quote-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 6px 16px -10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.quote-card blockquote {
  font-size: 1rem;
  color: var(--fg);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.quote-card figcaption {
  font-size: 0.88rem;
  color: var(--dim);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.quote-card figcaption .quote-name {
  color: var(--fg);
  font-weight: 600;
}

.quote-card figcaption .quote-role {
  font-weight: 500;
}

.quote-card figcaption .cs-quote-status {
  font-style: italic;
  opacity: 0.7;
  margin-left: 0;
  margin-top: 0.1rem;
  font-size: 0.78rem;
}

@media (max-width: 720px) {
  .quotes-grid { grid-template-columns: 1fr; }
}

/* Bottom CTA block — quieter than the homepage dark card,
   used to land case-study readers in the Transfer Session funnel */
.cs-cta-block {
  margin: 4rem 0 0;
  padding: 2.5rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
}

.cs-cta-eyebrow {
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}

.cs-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 0.85rem;
  max-width: 640px;
}

.cs-cta-body {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 1.75rem;
}

.cs-next-row {
  border-top: 1px solid var(--border);
  margin-top: 3.5rem;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.cs-next-label {
  color: var(--dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

.cs-next-link {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0;
  min-height: 44px;
  transition: color 0.15s ease;
}

.cs-next-link:hover { color: #000; }

.cs-next-link .btn-arrow { transition: transform 0.2s ease; }
.cs-next-link:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 600px) {
  .cs-cta-block { padding: 1.75rem 1.5rem; }
  .cs-hero { padding: 2.5rem 0 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   FROM THERE (engagement shapes that follow the Map)
   ══════════════════════════════════════════════════════════════ */
.shapes-lede {
  font-size: 1.05rem;
  color: var(--mid);
  max-width: 720px;
  margin-bottom: 2.25rem;
  line-height: 1.7;
}

.shapes-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.shape-item {
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: 2rem;
  align-items: start;
}

.shape-title-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.shape-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  font-size: 0.55rem;
  flex-shrink: 0;
}

.shape-icon-featured {
  margin-bottom: 1.1rem;
}

/* Real SVG icons (replace .shape-icon placeholders).
   Pixel-art icons — preserve sharp pixel boundaries when scaled. */
img.shape-icon {
  display: block;
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.shape-icon .placeholder-label {
  font-size: 0.55rem;
  padding: 0.18rem 0.45rem;
}

.shape-icon .placeholder-label::before {
  width: 4px;
  height: 4px;
}

.shape-item:last-child {
  border-bottom: 1px solid var(--border);
}

/* Featured item (Map) — full-width card treatment that breaks
   the 2-column rhythm of the list. Visually anchors it as "start here". */
.shape-item.shape-item-featured {
  display: block;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 14px;
  padding: 2rem 2.25rem 2.25rem;
  margin: 0.75rem 0 1.25rem;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 18px 40px -22px rgba(0, 0, 0, 0.28);
}

.shape-item-featured + .shape-item {
  border-top: 1px solid var(--border);
}

.featured-header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.shape-item-featured .shape-title {
  font-size: 1.35rem;
  color: var(--bg);
}

.shape-price-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bg);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shape-item-featured .shape-body {
  color: rgba(255, 255, 255, 0.92);
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.shape-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  padding: 0.85rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}

.shape-cta:hover {
  background: transparent;
  color: var(--bg);
}

.shape-cta .btn-arrow { transition: transform 0.2s ease; }
.shape-cta:hover .btn-arrow { transform: translateX(3px); }

.shape-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.shape-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.15s ease;
}

.shape-cta-secondary:hover { color: var(--bg); }

.shape-cta-secondary .btn-arrow { transition: transform 0.2s ease; }
.shape-cta-secondary:hover .btn-arrow { transform: translateX(2px); }

@media (max-width: 600px) {
  .shape-item.shape-item-featured { padding: 1.5rem 1.25rem 1.75rem; }
}

.shape-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
}

.shape-body {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 760px;
}

.shape-body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 0.15s ease;
}

.shape-body a:hover { text-decoration-color: var(--fg); }

@media (max-width: 600px) {
  .shape-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   CONTACT / CAL EMBED
   ══════════════════════════════════════════════════════════════ */
.contact-cal-label {
  font-size: 1.05rem;
  color: var(--mid);
  margin-bottom: 1.25rem;
  max-width: 720px;
  line-height: 1.65;
}

.contact-cal-label strong {
  color: var(--fg);
  font-weight: 600;
}

.cal-embed-wrap {
  margin: 0.5rem 0 3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  background: var(--bg);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -14px rgba(0, 0, 0, 0.10);
}

#my-cal-inline-30min {
  width: 100%;
  min-height: 560px;
}

@media (max-width: 600px) {
  #my-cal-inline-30min { min-height: 520px; }
}

.contact-divider {
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
}

.contact-divider::before,
.contact-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.25rem;
  margin-bottom: 2.5rem;
  max-width: 720px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-field.full { grid-column: 1 / -1; }

.contact-flabel {
  font-size: 0.85rem;
  color: var(--mid);
  font-weight: 500;
}

.contact-flabel em {
  font-style: normal;
  color: var(--dim);
  font-weight: 400;
}

.contact-field input,
.contact-field textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
  width: 100%;
  border-radius: 8px;
  min-height: 48px;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.contact-field textarea { min-height: 7rem; line-height: 1.55; }

.contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: var(--bg);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
  border-radius: 8px;
  min-height: 48px;
}

.contact-submit:hover { background: #000; }
.contact-submit:hover .btn-arrow { transform: translateX(2px); }

.contact-or {
  font-size: 0.85rem;
  color: var(--dim);
  margin-bottom: 1rem;
  font-weight: 500;
}

.contact-sent { display: none; }

.contact-address {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.5;
}

.contact-sent:target {
  display: block;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  border-radius: 12px;
  max-width: 720px;
  margin-bottom: 2.5rem;
  color: var(--mid);
  font-size: 1rem;
  line-height: 1.65;
  scroll-margin-top: 5rem;
}

.contact-sent:target strong { color: var(--fg); font-weight: 600; }

.contact-sent:target ~ .contact-form,
.contact-sent:target ~ .contact-or,
.contact-sent:target ~ .contact-grid {
  display: none;
}

@media (max-width: 600px) {
  .contact-form { grid-template-columns: 1fr; gap: 1rem; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.contact-item {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--fg);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: block;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
}

.contact-item:hover {
  border-color: var(--fg);
  background: var(--bg-soft);
}

.contact-label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  margin-bottom: 0.3rem;
  display: block;
  font-weight: 500;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
footer {
  padding: 0 0 2.5rem;
  /* Continues the water at the bottom edge of the city strip */
  background: #2b5d64;
  /* Fade the top edge of the city strip into the page instead of a hard line */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
}

@media (max-width: 600px) {
  footer {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
  }
}

/* Small inline pixel mark before a path item's title (work-with-me) */
.path-mark {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: -8px;
  margin-right: 0.4rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Offer page hero mark: the rung's icon above the eyebrow */
.offer-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Path item structure (work-with-me): head row, body, fit line, CTA */
.path-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}

.path-item-head .path-mark {
  margin-right: 0;
}

.path-item-title {
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
}

.path-item-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.16rem 0.7rem;
  white-space: nowrap;
  /* nowrap keeps "$450 · 5 days" on one line, but the Site's pill reads
     "$30,000 to $75,000, priced by your Map · 6 to 12 weeks" and at 390px
     that ran 21px past the viewport and gave the whole page a sideways
     scroll. Wrapping is allowed; the pill just has to stay inside. */
  max-width: 100%;
}

@media (max-width: 640px) {
  .path-item-meta { white-space: normal; }
}

.path-item-fit {
  color: var(--dim);
}

.path-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Each offer runs its rung's color through its page structure.
   Colors sampled from the pixel icons themselves. */
body.offer-scan    { --offer: #009b98; --offer-deep: #00615f; }
body.offer-read    { --offer: #659cd1; --offer-deep: #3d6ea3; }
body.offer-map     { --offer: #c791ce; --offer-deep: #7d3a8c; }
body.offer-site    { --offer: #e89022; --offer-deep: #a8641a; }
body.offer-partner { --offer: #ae2c1c; --offer-deep: #8e2417; }

/* Offer-page structure: card grids, week timeline, aside notes —
   shapes that break up title+list monotony. Copy lives in the HTML. */
.om-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-top: 1.7rem;
}
.om-card {
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.om-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.om-card p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--mid); }
.om-card p + p { margin-top: 0.7rem; }
.om-card .om-shot {
  display: block;
  width: calc(100% + 3rem);
  height: auto;
  margin: -1.4rem -1.5rem 1.1rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
}
.om-card-featured { border-color: var(--offer, var(--fg)); border-width: 2px; box-shadow: 0 14px 34px -24px rgba(0, 0, 0, 0.35); }
.ws-price {
  margin: 0 0 0.7rem !important;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--offer, var(--fg)) !important;
}
.ws-price-note {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mid);
  vertical-align: middle;
}
.om-card .path-item-cta { margin-top: 1rem; }

.om-weeks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.om-week {
  position: relative;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--bg-soft);
}
/* the rail: one continuous line running above the columns */
.om-week::before {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-strong);
}
.om-week:not(:first-child)::before { left: -1.1rem; }
.om-week:last-child::before { right: 40%; }
/* the node: a pixel square sitting on the rail above each column */
.om-week::after {
  content: "";
  position: absolute;
  top: calc(-1.05rem - 5px);
  left: 1.4rem;
  width: 12px;
  height: 12px;
  background: var(--offer, var(--fg));
  box-shadow: 3px 3px 0 var(--border);
}
.om-week-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offer-deep, var(--dim));
}
.om-week h3 { margin: 0 0 0.5rem; font-size: 1.02rem; color: var(--fg); }
.om-week p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--mid); }

/* Horizontal comparison: label left, definition right. For term/definition
   sets that read worse as a cramped equal-height card grid. */
.om-compare {
  margin-top: 1.7rem;
  border-top: 1px solid var(--border);
}
.om-compare-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 3fr;
  gap: 0.4rem 2.5rem;
  align-items: start;
  padding: 1.4rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.om-compare-row h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.om-compare-row p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--mid);
}
.om-compare-featured {
  background: var(--bg-soft);
  box-shadow: inset 3px 0 0 var(--offer, var(--fg));
}
@media (max-width: 640px) {
  .om-compare-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

.om-note {
  max-width: 640px;
  margin: 1.6rem 0 0;
  padding: 0.65rem 1rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--offer, var(--border-strong));
  font-size: 0.95rem;
  color: var(--dim);
}

/* Small pixel icon atop a featured card — the page's rung, nothing more */
.om-card-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.65rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Horizontal split: section title holds the left rail, prose runs right */
.om-split {
  display: grid;
  grid-template-columns: minmax(220px, 5fr) 8fr;
  gap: 1.5rem 3.5rem;
  align-items: start;
}
.om-split .cs-section-title {
  margin-bottom: 0;
}
.om-split-body > p:first-child { margin-top: 0; }

@media (max-width: 860px) {
  .om-split { grid-template-columns: 1fr; gap: 0.6rem; }
}

@media (max-width: 720px) {
  .om-weeks { grid-template-columns: 1fr; gap: 1.6rem; }
  .om-week::before { display: none; }
  .om-week::after {
    top: -0.55rem;
    left: 0;
  }
  .om-week { border-top: 0; padding-top: 1.5rem; }
}

/* Approach page: the before/after pair of the hub-and-spoke diagram */
.approach-ba {
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.approach-ba-panel {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.3rem 0.9rem;
  background: var(--bg);
}
.approach-ba-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.approach-ba-tag-after { color: #fff; background: var(--fg); border-color: var(--fg); }
.approach-ba-cap {
  display: block;
  margin: 0.55rem 0 0.3rem;
  font-size: 0.9rem;
  color: var(--dim);
}
.approach-ba-img { display: block; width: 100%; height: auto; }
.approach-ba-mid { display: flex; align-items: center; padding: 0 0.55rem; color: var(--border-strong); }
.approach-ba-arrow { display: inline-block; font-size: 1.7rem; line-height: 1; }
@media (max-width: 680px) {
  .approach-ba { flex-direction: column; }
  .approach-ba-mid { padding: 0.5rem 0; justify-content: center; }
  .approach-ba-arrow { transform: rotate(90deg); }
}

/* What "modern operations" means, stated before the Path lists the steps */
.path-definition {
  max-width: 680px;
  margin: 0 0 2.4rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--mid);
}
.path-definition strong { color: var(--fg); font-weight: 650; }

/* The Path list on work-with-me: each step reads as a clear block —
   big quiet number, larger title, the fit line as a marked callout,
   the CTA as a real button. */
.path-list.cs-bullets-numbered li {
  padding: 2.1rem 0 2.2rem 3.6rem;
}
.path-list.cs-bullets-numbered li::before {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--border-strong);
  top: 2.05rem;
}
.path-list .path-item-head { margin-bottom: 0.9rem; }
.path-list .path-item-title { font-size: 1.45rem; }
.path-list .path-item-fit {
  max-width: 640px;
  margin: 1.1rem 0 1.3rem;
  padding: 0.65rem 1rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--border-strong);
  font-size: 0.95rem;
}
.path-list .path-item-fit em { font-style: normal; }
.path-list .path-item-cta {
  margin-top: 0.2rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--fg);
  border-radius: 8px;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.path-list .path-item-cta:hover {
  background: var(--fg);
  color: #fff;
}

.path-item-cta .btn-arrow { transition: transform 0.2s ease; }
.path-item-cta:hover .btn-arrow { transform: translateX(3px); }

/* Full-bleed pixel city panorama; the footer background picks up
   where its water leaves off. */
.footer-city {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

footer .container {
  padding-top: 2.75rem;
}

.footer-tag {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 720px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 0;
  min-height: 44px;
  transition: color 0.15s ease;
}

.footer-link:hover { color: #ffffff; }

/* "Add to Google Preferred Sources" — a site-wide footer CTA. Links to
   Google's documented deeplink; no third-party script, so it stays off every
   page's critical path. */
.footer-preferred {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-preferred-lead {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
}

.btn-preferred {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #ffffff;
  color: #1f1f1f;
  text-decoration: none;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.15px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-preferred:hover {
  background: #f8faff;
  border-color: #d2e3fc;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.35), 0 2px 6px rgba(60, 64, 67, 0.15);
}

.btn-preferred-g {
  flex: 0 0 auto;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS (minimal — fade on enter only)
   ══════════════════════════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Collapse the two-column hero before the calendar column gets cramped.
   When stacked, cap the calendar to a tidy booking-card width and left-align
   it so it doesn't balloon to full width and flip into Cal's wide
   month+time-slots layout. */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .hero-cal {
    max-width: 460px;
    justify-self: start;
  }
}

@media (max-width: 768px) {
  html { font-size: 16px; }

  section { padding: 3.5rem 0; }

  .hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .btn-primary, .btn-secondary {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  #transfer-session { padding: 3rem 0; }

  /* The inline booking calendar is heavy on a phone; Book-a-call opens
     Cal's own mobile-optimized popup instead. */
  .hero-cal { display: none; }
  .hero-copy { text-align: left; }
}

@media (max-width: 420px) {
  .container { --gutter: 1.25rem; }
  section { padding: 2.75rem 0; }
}

/* ══════════════════════════════════════════════════════════════
   SITE READINESS SCAN (/scan)
   ══════════════════════════════════════════════════════════════ */
.sr-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.25rem;
  max-width: 720px;
  margin-top: 2.25rem;
}

.sr-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sr-field input {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  border-radius: 8px;
  min-height: 48px;
}

.sr-field input:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.sr-submit {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: var(--bg);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
  border-radius: 8px;
  min-height: 48px;
}

.sr-submit:hover { background: #000; }
.sr-submit:hover .btn-arrow { transform: translateX(2px); }
.sr-submit:disabled { opacity: 0.55; cursor: default; }

.sr-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--dim);
  font-weight: 500;
  margin: -0.25rem 0 0;
}

.sr-form-busy { opacity: 0.6; pointer-events: none; }

/* Hero: two-column intro with sample-score mock */
.sr-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2.5rem 3rem;
}
.sr-intro-col { min-width: 0; }
.sr-hero-art { align-self: center; }

/* Example report on /scan — the report shown as the email you receive */
.sr-email {
  max-width: 640px;
  margin: 2rem 0 2.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 24px 50px -28px rgba(0, 0, 0, 0.28);
}
.sr-email-chrome {
  padding: 1.15rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.sr-email-chrome p.sr-email-subject {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}
.sr-email-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  color: var(--dim);
}
.sr-email-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fg);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-email-from { line-height: 1.35; }
.sr-email-from strong { color: var(--fg); }
.sr-email-to { font-size: 0.75rem; }
.sr-email-time { margin-left: auto; font-size: 0.75rem; }
.sr-example {
  padding: 1.75rem 2.25rem 1.75rem;
}
.sr-example-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.sr-example-brand {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sr-example-kind { font-size: 0.8rem; color: var(--dim); }
.sr-example p.sr-example-site { margin: 1.6rem 0 0; font-size: 0.875rem; color: var(--dim); }
.sr-example-site span { color: var(--fg); text-decoration: underline; }
.sr-example p.sr-example-score {
  margin: 0.3rem 0 0;
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 800;
}
.sr-example p.sr-example-score span { font-size: 1.3rem; font-weight: 400; color: var(--dim); }
.sr-example-bar {
  height: 6px;
  margin-top: 0.85rem;
  background: var(--border);
  overflow: hidden;
}
.sr-example-bar span { display: block; height: 100%; background: #565656; }
.sr-example-lens { margin-top: 1.6rem; }
.sr-example-lens-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.sr-example-lens-head h3 { margin: 0; font-size: 1.05rem; }
.sr-example .sr-example-lens p { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--dim); }
.sr-example-chip {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.sr-chip-good { background: #1a7f37; }
.sr-chip-mid { background: #565656; }
.sr-chip-low { background: #b45309; }
.sr-example-start {
  margin-top: 1.8rem;
  padding: 1.3rem 1.4rem 1.2rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--fg);
}
.sr-example-start p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--dim); }
.sr-example-start-label {
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg) !important;
  margin-bottom: 0.75rem !important;
}
.sr-example-start-title { font-weight: 700; color: var(--fg) !important; margin-bottom: 0.2rem !important; }
.sr-example-guide { margin-top: 0.55rem !important; font-size: 0.85rem !important; }
.sr-example-guide a { color: var(--fg); }
.sr-email p.sr-example-note {
  margin: 0;
  padding: 0.9rem 1.5rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 0.8rem;
  color: var(--dim);
}
.sr-hero-lighthouse {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 24px 50px -28px rgba(0, 0, 0, 0.28);
}
.sr-hero-card {
  width: 250px;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 24px 50px -28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr-hero-card-eyebrow {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.sr-hero-card-site {
  align-self: flex-start;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0.3rem 0 1.1rem;
}
.sr-hero-gauge-num { font-size: 2.1rem; }
.sr-hero-rows {
  width: 100%;
  display: grid;
  gap: 0.6rem;
  margin-top: 1.35rem;
}
.sr-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.sr-hero-row-label {
  font-size: 0.78rem;
  color: var(--mid);
  white-space: nowrap;
}
.sr-hero-track {
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.sr-hero-track > span {
  display: block;
  height: 100%;
  background: var(--fg);
  border-radius: 999px;
}
@media (max-width: 760px) {
  .sr-intro { grid-template-columns: 1fr; }
  .sr-hero-art { display: none; }
}

.sr-status {
  max-width: 720px;
  margin-top: 1.75rem;
  padding: 1.1rem 1.4rem;
  border-radius: 12px;
  font-size: 0.98rem;
  line-height: 1.6;
}

.sr-status-loading {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--mid);
}

.sr-status-error {
  background: #fff7f6;
  border: 1px solid #f0c9c4;
  color: #8a2b21;
}

/* Loading graphic */
.sr-loader {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sr-spinner-svg {
  width: 46px;
  height: 46px;
  display: block;
}
.sr-spinner-track { stroke: var(--border); }
.sr-spinner-arc {
  stroke: var(--fg);
  transform-origin: 25px 25px;
  animation: sr-spin 0.9s linear infinite;
}
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-loader-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sr-loader-title {
  font-size: 1rem;
  color: var(--fg);
  font-weight: 600;
}
.sr-loader-title strong { font-weight: 600; }
.sr-loader-step {
  font-size: 0.92rem;
  color: var(--mid);
}
.sr-skeleton {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
  max-width: 420px;
}
.sr-skel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  animation: sr-pulse 1.4s ease-in-out infinite;
}
.sr-skel-row:nth-child(2) { animation-delay: 0.15s; }
.sr-skel-row:nth-child(3) { animation-delay: 0.3s; }
.sr-skel-row:nth-child(4) { animation-delay: 0.45s; }
.sr-skel-label {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  flex: 1;
  max-width: 220px;
}
.sr-skel-row:nth-child(2) .sr-skel-label { max-width: 160px; }
.sr-skel-row:nth-child(3) .sr-skel-label { max-width: 190px; }
.sr-skel-row:nth-child(4) .sr-skel-label { max-width: 140px; }
.sr-skel-gauge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--border);
  flex-shrink: 0;
}
@keyframes sr-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) {
  .sr-spinner-arc { animation: none; }
  .sr-skel-row { animation: none; opacity: 0.6; }
}

/* Result view */
.sr-result { margin-top: 2.75rem; scroll-margin-top: 2rem; }

/* Staggered reveal */
.sr-result > * { opacity: 0; transform: translateY(10px); }
.sr-result.sr-reveal > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sr-result.sr-reveal > *:nth-child(2) { transition-delay: 0.08s; }
.sr-result.sr-reveal > *:nth-child(3) { transition-delay: 0.16s; }
.sr-result.sr-reveal > *:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .sr-result > *, .sr-result.sr-reveal > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* Score gauge — shared motif, two sizes */
.sr-gauge {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sr-gauge > * { grid-area: 1 / 1; }
.sr-ring { display: block; }
.sr-gauge-num {
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sr-gauge-lg .sr-gauge-num { font-size: 3rem; }
.sr-gauge-sm .sr-gauge-num { font-size: 1.15rem; }

/* Overall hero — the focal point */
.sr-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--border);
}
.sr-hero-meta { min-width: 0; }
.sr-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.sr-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-soft);
  flex-shrink: 0;
  display: block;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 26px -18px rgba(0, 0, 0, 0.28);
}
.sr-id-text { min-width: 0; }
.sr-site {
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  word-break: break-word;
}
.sr-band {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

/* Lenses — numbered, each with an echoing gauge */
.sr-lenses { margin-top: 2.5rem; }
.sr-lens {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}
.sr-lens:first-child { padding-top: 0; }
.sr-lens:last-child { border-bottom: 0; padding-bottom: 0; }

.sr-lens-num {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--border-strong);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35rem;
}
.sr-lens-body { min-width: 0; }
.sr-lens-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 0.6rem;
}
.sr-lens-read {
  font-size: 1.02rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
}

/* Opportunities — raised callout cards */
.sr-opps { margin-top: 3rem; }
.sr-opps .section-eyebrow { display: block; margin-bottom: 1.25rem; }
.sr-opp {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 1rem;
}
.sr-opp:last-child { margin-bottom: 0; }
.sr-opp-mark {
  font-size: 1.1rem;
  color: var(--fg);
  line-height: 1.6;
  flex-shrink: 0;
}
.sr-opp-body { min-width: 0; }
.sr-opp-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0.35rem;
}
.sr-opp-body p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
  max-width: 60ch;
}
.sr-opp-guide {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.sr-opp-guide:hover { border-bottom-color: var(--fg); }

/* CTA — inverted closing beat */
.sr-cta {
  margin-top: 3rem;
  padding: 2.25rem;
  background: var(--fg);
  border-radius: 16px;
}
.sr-cta p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  max-width: 38rem;
}
.sr-cta .btn-primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--fg);
}
.sr-cta .btn-primary:hover { background: #f0f0f0; }

@media (max-width: 600px) {
  .sr-form { grid-template-columns: 1fr; gap: 1rem; }
  .sr-hero { gap: 1.25rem; }
  .sr-lens { column-gap: 1rem; padding: 1.5rem 0; }
  .sr-cta { padding: 1.6rem; }
}

/* Home: Site Readiness Scan CTA band */
.scan-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 2.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.scan-cta-main { max-width: 500px; min-width: 0; }
.scan-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
  margin: 0.5rem 0 0.75rem;
}
.scan-cta-body {
  font-size: 1.02rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.scan-cta-btn { flex-shrink: 0; }

/* Mini score mock */
.scan-cta-mock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 180px;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 16px 36px -24px rgba(0, 0, 0, 0.22);
}
.scan-cta-gauge-num { font-size: 1.85rem; }
.scan-cta-mock-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.scan-cta-bars {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.35rem;
}
.scan-cta-bars span {
  height: 5px;
  border-radius: 999px;
  background: var(--fg);
}
.scan-cta-bars span:nth-child(2) { opacity: 0.5; }
.scan-cta-bars span:nth-child(3) { opacity: 0.62; }
.scan-cta-bars span:nth-child(4) { opacity: 0.78; }

@media (max-width: 600px) {
  .scan-cta { padding: 1.6rem; }
  .scan-cta-mock { align-self: center; }
}

/* Announcement bar (free scan) */
.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 1.25rem;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}
.announce-bar:hover { background: #000; }
.announce-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  flex-shrink: 0;
}
.announce-text { color: rgba(255, 255, 255, 0.92); }
.announce-arrow { transition: transform 0.2s ease; display: inline-block; }
.announce-bar:hover .announce-arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  .announce-bar { font-size: 0.78rem; padding: 0.5rem 0.85rem; gap: 0.45rem; }
  .announce-tag { display: none; }
}

/* Guide code blocks (robots.txt / llms.txt snippets) */
.guide-code {
  display: block;
  max-width: 720px;
  margin: 1.25rem 0 1.75rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
}

/* Offer-page hero eyebrow takes the rung's deep tone */
body[class*="offer-"] .om-hero .section-eyebrow { color: var(--offer-deep, var(--dim)); }

/* ──────────────────────────────────────────────────────────────────────────
   Comparison table. The Partner's two tiers and the eight-offer table on
   /work-with-me both need a real matrix, which om-compare (a two-column
   label/description list) can't carry. Same tokens, same border language;
   scrolls inside itself on narrow screens so the page body never does.
   ────────────────────────────────────────────────────────────────────────── */
.om-table-wrap {
  margin-top: 1.7rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.om-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.om-table th,
.om-table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
  color: var(--mid);
}
.om-table thead th {
  border-bottom: 1px solid var(--border-strong);
  color: var(--fg);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.om-table tbody th {
  font-weight: 500;
  color: var(--fg);
}
.om-table tbody tr:last-child th,
.om-table tbody tr:last-child td {
  border-bottom: none;
}
.om-table .om-table-price {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}
.om-table-note {
  margin-top: 1.1rem;
  max-width: 720px;
  line-height: 1.7;
}

/* Homepage self-identification tracks — three across, CTA pinned to the
   bottom so the cards line up regardless of how long each summary runs. */
.ways-tracks .om-card {
  display: flex;
  flex-direction: column;
}
.ways-tracks .om-card h3 {
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: 0.7rem;
}
.ways-tracks .om-card p {
  flex: 1 1 auto;
  margin: 0 0 1rem;
}
.ways-tracks .shape-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0.9rem;
}
.ways-tracks .path-item-cta { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION (≤768px)

   Everything for the small-screen menu lives in this one block. It used
   to be spread across four separate `@media (max-width: 768px)` blocks in
   three parts of this file, which is how the menu kept regressing — the
   "menu paints behind the hero" bug was a z-index in one block being
   undone by a position in another.

   Pattern: full-screen overlay. Right choice here because the menu is
   short and ends in one clear action (the Scan). It also sidesteps
   stacking bugs entirely — nothing can paint over it because it covers
   the viewport.

   The nav bar itself sits above the overlay, so the logo stays put and
   the hamburger becomes the close button rather than needing a second
   control. Behaviour that an overlay owes the user — focus trapped
   inside, Escape to close, background scroll locked, focus returned to
   the toggle on close — is in nav.js.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ---- the bar ---- */
  .site-nav { position: relative; z-index: 100; }
  .site-nav .container {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    position: relative;
  }
  .site-nav .logo { position: relative; z-index: 2; }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fg);
  }
  /* hamburger becomes the close control, so there is only ever one button */
  .nav-toggle[aria-expanded="true"] { font-size: 0; }
  .nav-toggle[aria-expanded="true"]::before {
    content: "\00d7";
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1;
  }

  /* ---- the overlay ---- */
  #nav-menu { display: none; }
  #nav-menu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    padding: 5.5rem 1.5rem 2.5rem;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #nav-menu.open > li { width: 100%; }

  /* top-level rows */
  #nav-menu.open > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--fg);
  }
  .nav-caret { display: none !important; }

  /* "Work with me" reads as the section it heads, not a peer of the rows */
  #nav-menu.open > li.nav-drop > a {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
    /* it reads as a label but it is still a link to /work-with-me, so it
       gets a real 44px target rather than a 26px one */
    min-height: 44px;
    align-items: flex-end;
    padding: 0 0 0.4rem;
  }

  /* ---- the three tracks, expanded inline ---- */
  #nav-menu.open .nav-dropdown {
    display: flex !important;
    position: static;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #nav-menu.open .nav-dropdown::before { display: none; }
  #nav-menu.open .nav-dropdown a {
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 56px;
    padding: 0.7rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 10px;
    white-space: normal;
    font-size: 1rem;
  }
  #nav-menu.open .nav-dropdown a:active { background: var(--bg-soft); }
  #nav-menu.open .nav-drop-icon { width: 26px; height: 26px; margin-top: 0.15rem; }
  #nav-menu.open .nav-drop-name { font-size: 1rem; font-weight: 500; }
  /* there is room for the descriptions at full screen, so keep them —
     they are what makes the three tracks self-explanatory */
  #nav-menu.open .nav-drop-desc {
    display: block;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--dim);
  }
  #nav-menu.open .nav-drop-divider {
    display: block;
    height: 1px;
    background: var(--border);
    margin: 0.6rem 0;
  }
  #nav-menu.open .nav-drop-label {
    padding: 0.6rem 0 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
  }

  /* Approach duplicates "Why this works" inside the dropdown */
  .nav-mobile-only { display: none !important; }

  /* ---- the one action ---- */
  #nav-menu.open .nav-cta {
    justify-content: center;
    margin-top: auto;
    padding: 1rem 1.25rem;
    min-height: 52px;
    width: 100%;
    text-align: center;
    background: var(--fg);
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
  }
  /* push the CTA to the bottom without collapsing on short viewports */
  #nav-menu.open > li:has(.nav-cta) { margin-top: auto; padding-top: 1.5rem; }

  /* scroll lock, set by nav.js while the overlay is open */
  body.nav-open { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════
   THE VSL LANDING PAGE (/get-the-read)
   Paid-traffic page for the Read. It borrows the whole offer-page
   system — om-hero, om-section, om-cards, om-weeks, cs-bullets —
   and adds only what a video sales letter needs that the site did
   not already have: a stripped header, a facade video player, and
   a sticky buy bar. Scoped to .vsl-page so nothing here can reach
   the other 36 pages.
   ══════════════════════════════════════════════════════════════ */

/* ── Stripped header ─────────────────────────────────────────────
   Not .site-nav on purpose: no menu, no announce bar, no way off
   the page except the logo. Every other link is a leak on traffic
   you paid for. */
.vsl-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.vsl-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.vsl-header .logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 0.375rem 0;
}

.vsl-header .logo .logo-cloud {
  width: auto;
  height: 30px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.35) contrast(1.08);
}

.vsl-header .logo .logo-bolt {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 13px;
  height: auto;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.vsl-header .logo:hover .logo-bolt,
.vsl-header .logo:focus-visible .logo-bolt {
  animation: bolt-flash 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vsl-header .logo:hover .logo-bolt { animation: none; opacity: 1; }
}

.vsl-header-note {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* ── Hero ────────────────────────────────────────────────────────
   Tighter than a normal offer hero. On a VSL the headline's only
   job is to earn the play button, so the player has to be close
   enough to see without scrolling. */
.vsl-hero {
  padding: 3rem 0 3.5rem;
  text-align: center;
}

.vsl-hero .offer-mark { margin-left: auto; margin-right: auto; }
.vsl-hero .om-lede { margin-left: auto; margin-right: auto; }
.vsl-hero .cs-hook { max-width: 20ch; margin-left: auto; margin-right: auto; }

/* ── The player ──────────────────────────────────────────────────
   Facade: poster image and a play button, with the iframe swapped
   in on click. The embed's scripts never touch the first paint. */
.vsl-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2.5rem 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b0b0b;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 22px 50px -24px rgba(0, 0, 0, 0.35);
}

.vsl-video iframe,
.vsl-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vsl-facade {
  display: block;
  padding: 0;
  background: none;
  cursor: pointer;
}

.vsl-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dimmed so the play button reads against any frame. */
  filter: brightness(0.82);
  transition: filter 0.2s ease, transform 0.4s ease;
}

.vsl-facade:hover img,
.vsl-facade:focus-visible img {
  filter: brightness(0.7);
  transform: scale(1.02);
}

.vsl-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease;
}

/* The triangle, drawn rather than shipped as an asset. */
.vsl-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--offer-deep, var(--fg));
}

.vsl-facade:hover .vsl-play,
.vsl-facade:focus-visible .vsl-play { transform: translate(-50%, -50%) scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .vsl-facade img,
  .vsl-play { transition: none; }
  .vsl-facade:hover img { transform: none; }
}

/* The hero image stands in for the player until a video exists. The
   script adds .vsl-has-video to <body> once VSL_EMBED is set. */
.vsl-has-video .vsl-no-video { display: none; }

/* Under the button the price is one short line, not the three-part row it is
   in the close, so it loses the big top margin and drops to body scale. */
.hd-cta .hd-pricetag {
  margin-top: 0.15rem;
  font-size: 1.05rem;
}

/* ── Calls to action ─────────────────────────────────────────────── */
.vsl-cta {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.vsl-cta .btn-primary { font-size: 1.05rem; padding: 1rem 2rem; }

.vsl-cta-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 34rem;
  margin: 0;
}

.vsl-cta-note strong { color: var(--fg); }

.vsl-skip {
  margin: 1.75rem 0 0;
  font-size: 0.9rem;
}

.vsl-skip a { color: var(--dim); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vsl-skip a:hover { color: var(--fg); }

.vsl-midcta { text-align: center; }
.vsl-midcta .om-price-line { margin-bottom: 1.5rem; }

/* ── Sticky buy bar ──────────────────────────────────────────────
   Mobile only. On desktop the mid-page and final CTAs are never far
   enough away to need it, and a fixed bar there just eats the fold. */
.vsl-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  background: var(--bg);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -10px 30px -22px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

.vsl-sticky.is-visible { transform: translateY(0); }

.vsl-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
}

/* nowrap on both halves: at 390px the label was breaking across two lines
   and shoving the bar to double height. */
.vsl-sticky-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}

.vsl-sticky .btn-primary {
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .vsl-sticky { display: block; }

  .vsl-hero { padding: 2rem 0 2.5rem; }
  .vsl-hero .cs-hook { max-width: none; }

  .vsl-video { margin-top: 1.75rem; border-radius: 10px; }
  .vsl-play { width: 62px; height: 62px; }
  .vsl-play::after { border-width: 11px 0 11px 18px; }

  .vsl-cta .btn-primary { width: 100%; justify-content: center; }

  /* Room for the sticky bar so it never covers the final CTA. */
  .vsl-page footer { padding-bottom: 5rem; }

  .vsl-header-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vsl-sticky { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   /handled — THE SALES PAGE
   The one page on this site that takes paid traffic AND organic,
   so it keeps the nav and the footer (a visitor from search needs
   the rest of the site; /get-the-read, which is ads-only and
   noindex, strips both) but drops the shared offer-page layout.

   What makes it its own thing:
     · a full-bleed hero band with the art behind centred copy,
       rather than the left-aligned, image-free .om-hero every
       other offer page uses;
     · one inverted band, where the price and the buy live. On a
       site that is white from top to bottom, the single dark
       section is the strongest way to mark "this is the decision"
       without inventing a new colour system;
     · the proof — thirteen real sites — pulled up near the top,
       because on ad traffic nobody scrolls to find out whether
       the work is any good.

   Everything is scoped to .hd- or to body.offer-handled. The
   sticky buy bar is deliberately NOT re-implemented: it borrows
   .vsl-sticky, which already solves the same problem on the other
   paid page, so the two bars cannot drift apart.
   ══════════════════════════════════════════════════════════════ */

/* Green is the one hue the five rung colours (teal, sky, purple, orange,
   brick) left free, and it is the only place on the page that is not ink,
   white or the art — so the eye lands on the price. */
body.offer-handled { --offer: #1f7a4d; --offer-deep: #145736; }

/* The intake has no hero art to float over, so its stripped header keeps
   its place in the flow -- but not the rule under it. A form the reader is
   part-way through does not need a line drawn across the top of it. */
.hi-body .vsl-header { border-bottom: 0; }

/* ── The floating header ─────────────────────────────────────────
   No bar and no rule on this page: the art runs to the very top of the
   viewport and the cloud sits on the sky, which is what the cloud is a
   picture of. Taken out of flow rather than made transparent, so the hero
   starts at the document top instead of 60px down it — the hero then pays
   that height back as padding so the eyebrow clears the cloud.

   Scoped to .hd-page: /get-the-read has no hero art to float over, and its
   white bar is doing real work there. */
.hd-page .vsl-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: none;
  border-bottom: 0;
}

/* "Just the cloud floating." The price note has nothing to sit on out here
   — grey on mid-blue sky is a smudge — and the price is said four times
   below anyway. */
.hd-page .vsl-header-note { display: none; }

/* ── The hero band ───────────────────────────────────────────────
   Full-bleed: the band cancels the container's gutter so the art
   runs edge to edge, while the copy inside stays on the 880px
   measure. min-height, not an aspect-ratio, because the copy is
   what sets the height and the art has to fill whatever is left. */
.hd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6.5rem 0 4rem;
  min-height: 620px;
  display: flex;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* A real <img>, not a CSS background, so it keeps alt text and can be
   given fetchpriority — this is the largest paint on the page, and on
   ad traffic the first paint is the whole first impression.
   object-position is low on the Y so the crop keeps the crew and the
   waterline rather than a band of empty sky. */
.hd-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: pixelated;
  z-index: 0;
}

/* The moving version of the same frame, layered over the still. It is not in
   the markup's critical path: the <img> above stays the LCP element and the
   permanent fallback, and the video only fades in once it can actually play.
   If /images/handled-hero.mp4 is missing, canplay never fires and the still
   simply stays -- which also covers the Cloudflare Pages behaviour of
   answering a missing asset with 200 and an HTML body. */
.hd-hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hd-hero-vid.is-playing { opacity: 1; }

/* Nobody who asked for less motion gets a looping background. The script
   checks the same query before it ever sets a src, so this is belt and
   braces for a preference changed after load. */
@media (prefers-reduced-motion: reduce) {
  .hd-hero-vid { display: none; }
}

/* Two washes in one layer. The radial keeps an opaque oval under the
   centred copy — a left-to-right scrim like .track-hero's would only
   protect one side of a centred headline. The linear closes the bottom
   edge to solid white so the band hands off to the next section with
   no seam. */
.hd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 22%,
      /* The art puts its horizon in the bottom fifth -- the rooftop line and
         the foot of the tower. Starting the close-out at 80% washed exactly
         that away, so it holds off until 87% now. */
      rgba(255, 255, 255, 0) 87%,
      rgba(255, 255, 255, 0.86) 98%,
      rgba(255, 255, 255, 1) 100%
    ),
    radial-gradient(
      ellipse 54% 66% at 50% 47%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.93) 52%,
      rgba(255, 255, 255, 0.74) 74%,
      rgba(255, 255, 255, 0.3) 90%,
      rgba(255, 255, 255, 0) 100%
    );
}

.hd-hero .container {
  position: relative;
  z-index: 2;
}

.hd-hero .section-eyebrow { color: var(--offer-deep); }

/* The mark centres like the rest of the hero, and sits a little larger than
   the 48px the boxed offer heroes use -- it is the first thing above the
   fold here, with no nav bar left to share the top of the page with. */
.hd-hero .offer-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.9rem;
}

/* Bigger than .cs-hook and capped in characters rather than pixels:
   a centred headline reads as a shape, and the shape falls apart past
   about three lines. */
.hd-hook {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 17ch;
  margin: 0 auto 1.35rem;
  text-wrap: balance;
}

/* /handled runs a shorter hero than /handled-card: a one-word headline
   needs less room than a sentence. */
.hd-hero-tight {
  padding: 5rem 0 3.25rem;
  min-height: 540px;
}

/* /handled leads with the name itself, set large, and one line under it.
   Both live in the h1 so the heading still says what the thing is. */
.hd-hook-name {
  max-width: none;
  margin-bottom: 1.1rem;
}

.hd-hook-word {
  display: block;
  font-size: clamp(3.6rem, 11vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.hd-hook-line {
  display: block;
  max-width: 36ch;
  margin: 0.9rem auto 0;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hd-hook-who { color: var(--offer-deep); }

.hd-hook-who a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.hd-hook-who a:hover { text-decoration-color: currentColor; }

.hd-hook .hd-hook-turn {
  display: block;
  color: var(--offer-deep);
}

.hd-lede {
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  color: var(--mid);
  max-width: 46ch;
  margin: 0 auto;
}

.hd-lede strong { color: var(--fg); }

/* ── The price, said out loud ─────────────────────────────────────
   Ad traffic bounces on unanswered price. It is in the hero, in the
   sticky bar, in the dark band and in the close — four times before
   anyone has to ask. */
.hd-pricetag {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.9rem;
  margin: 1.9rem auto 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.hd-pricetag .hd-pricetag-sep {
  color: var(--border-strong);
  font-weight: 400;
}

.hd-pricetag .hd-pricetag-after {
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mid);
}

.hd-pricetag .hd-pricetag-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--offer-deep);
}

/* Under the button the price is one short line, not the three-part row it is
   in the close, so it loses the big top margin and drops to body scale. */
.hd-cta .hd-pricetag {
  margin-top: 0.15rem;
  font-size: 1.05rem;
}

/* ── Calls to action ─────────────────────────────────────────────── */
.hd-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.hd-cta .btn-primary {
  font-size: 1.05rem;
  padding: 1.05rem 2.2rem;
}

.hd-cta-note {
  margin: 0;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mid);
}

.hd-cta-note strong { color: var(--fg); }

/* The three promises that answer the three reasons someone hesitates
   on a subscription: term, exit, ownership. Inline, small, directly
   under the button where the doubt actually happens. */
.hd-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mid);
}

.hd-assure li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hd-assure li::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  background: var(--offer);
  /* A tick, drawn as a mask so it takes the offer colour rather than
     shipping two colour variants of the same glyph. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.2 6.4 11.3 2.5 7.4l1.1-1.1 2.8 2.8 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.2 6.4 11.3 2.5 7.4l1.1-1.1 2.8 2.8 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Sections ────────────────────────────────────────────────────
   Same rhythm as .om-section so the page still belongs to the site,
   but the titles centre and the measure is wider. */
.hd-section {
  padding: 4.25rem 0;
  border-top: 1px solid var(--border);
}

.hd-section:first-of-type { border-top: 0; }

.hd-section > .container { max-width: 1000px; }

.hd-title {
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg);
  max-width: 24ch;
  margin: 0 auto 0.9rem;
  text-align: center;
  text-wrap: balance;
}

.hd-sub {
  max-width: 56ch;
  margin: 0 auto 2.4rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--mid);
}

.hd-sub:last-child { margin-bottom: 0; }
.hd-sub strong { color: var(--fg); }

/* ── The two dead ends ───────────────────────────────────────────
   Two cards side by side, then the resolution line under them. The
   shape is the argument: each option fails where the other works,
   and the third thing sits below both. */
.hd-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.hd-versus-card {
  padding: 1.6rem 1.7rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.hd-versus-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.hd-versus-card p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--mid);
}

.hd-versus-card .hd-versus-cost {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
}

.hd-resolve {
  margin: 1.6rem auto 0;
  max-width: 52ch;
  padding: 1.35rem 1.6rem;
  border: 1px solid var(--fg);
  border-radius: 12px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mid);
}

.hd-resolve strong { color: var(--fg); }

/* ── What you get ────────────────────────────────────────────────
   Ticked, not bulleted. On a sales page the list is the spec sheet,
   and a tick reads as "included" where a dot reads as "topic". */
.hd-gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem 2.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hd-gets li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--mid);
}

.hd-gets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--offer);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.2 6.4 11.3 2.5 7.4l1.1-1.1 2.8 2.8 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.2 6.4 11.3 2.5 7.4l1.1-1.1 2.8 2.8 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hd-gets li strong {
  color: var(--fg);
  display: block;
}

/* ── The section rail ────────────────────────────────────────────
   Floats in the left gutter beside the 880px column. It carries its own
   ground so it reads over the dark price band as well as the white
   sections. Below 1280px there is no gutter to float in, so it is off. */
.hd-rail { display: none; }

@media (min-width: 1280px) {
  .hd-rail {
    display: block;
    position: fixed;
    z-index: 80;
    top: 50%;
    left: max(1.25rem, calc(50% - 440px - 12.5rem));
    width: 10rem;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .hd-rail.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

.hd-rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-rail a {
  display: block;
  padding: 0.42rem 0.65rem;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  color: #666666;
  text-decoration: none;
}

.hd-rail a:hover { color: #111111; }

.hd-rail a[aria-current] {
  border-left-color: var(--offer);
  background: #f5f5f5;
  font-weight: 650;
  color: #111111;
}

@media (prefers-reduced-motion: reduce) {
  .hd-rail { transition: none; }
}

/* ── The first year ──────────────────────────────────────────────
   A rail rather than twelve equal cards: the months are a sequence,
   and cards say "menu". */
/* Month label in the left gutter, one dot per month, the prompt on the right. */
.hd-year {
  counter-reset: hd-month;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-year li {
  counter-increment: hd-month;
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 2.4rem;
  padding-bottom: 2rem;
}

.hd-year li:last-child { padding-bottom: 0; }

.hd-year li::before {
  content: "Month " counter(hd-month);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 0.28rem;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--offer);
}

/* The rail runs from this month's dot to the next one's. */
.hd-year li::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: -0.4rem;
  left: calc(6.5rem + 1.2rem - 1px);
  width: 2px;
  background: var(--border-strong);
}

.hd-year li:last-child::after { display: none; }

.hd-year h3 {
  grid-column: 2;
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.hd-year h3::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0.4rem;
  left: calc(6.5rem + 1.2rem - 6px);
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--offer);
  border-radius: 50%;
  background: var(--bg, #fff);
}

/* Quarter starts get a filled dot, so the year reads in four blocks. */
.hd-year li:nth-child(3n + 1) h3::before { background: var(--offer); }

.hd-year p {
  grid-column: 2;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--mid);
}

@media (max-width: 640px) {
  .hd-year li {
    display: block;
    padding-left: 1.9rem;
  }
  .hd-year li::before {
    display: block;
    margin-bottom: 0.4rem;
    padding-top: 0;
    text-align: left;
  }
  .hd-year li::after { left: 5px; top: 0.1rem; bottom: -0.1rem; }
  .hd-year h3::before { left: 0; top: 0; }
}

/* ── Proof ───────────────────────────────────────────────────────
   Three across at full width. .om-cards' auto-fit(250px) gives four
   columns here and the screenshots get too small to read as sites. */
.hd-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.hd-shot {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.hd-shot { display: block; text-decoration: none; }
a.hd-shot:hover { border-color: var(--fg); transform: translateY(-2px); }

.hd-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--border);
}

/* A span, so it has to be made a block or its top and bottom padding
   paint over the image edge instead of making room. */
.hd-shot-meta {
  display: block;
  padding: 0.85rem 1rem 1rem;
}

.hd-shot-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.hd-shot-what {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  a.hd-shot:hover { transform: none; }
}

/* ── About Shane ─────────────────────────────────────────────────
   The homepage's about strip, centred under the section title and held to
   a reading width. */
.hd-about {
  max-width: 44rem;
  margin: 0 auto;
  align-items: center;
}

.hd-about .about-text p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .hd-about { align-items: flex-start; }
}

/* The bots, under About Shane. Same reading width, set off by a rule. */
.hd-bots {
  max-width: 44rem;
  margin: 2.6rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 1.5rem;
}

.hd-bots h3 {
  margin: 0 0 0.7rem;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

.hd-bots p {
  margin: 0 0 1.3rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--mid);
}

.hd-bots p:last-child { margin-bottom: 0; }

.hd-bots .hd-gets { margin-bottom: 1.5rem; }

/* ── The inverted band ───────────────────────────────────────────
   The buy zone. Rather than restyling every child, the band swaps
   the tokens the components already read, so .btn-primary, borders
   and body copy all invert on their own. Only :hover has to be
   named, because .btn-primary hard-codes #000 for it — which on a
   near-black band is an invisible button. */
.hd-band {
  --bg: #111111;
  --bg-soft: #1a1a1a;
  --fg: #ffffff;
  --mid: rgba(255, 255, 255, 0.78);
  --dim: rgba(255, 255, 255, 0.58);
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --offer: #55c98c;
  --offer-deep: #7fe0ab;

  background: #111111;
  color: #ffffff;
  border-top: 0;
  padding: 4.5rem 0;
}

.hd-band .btn-primary:hover { background: #ffffff; opacity: 0.88; }

.hd-band .hd-title,
.hd-band .hd-sub strong { color: #ffffff; }

/* The title here carries the price, which is longer than a heading normally
   is; at 24ch it broke as "$200 a / month". */
.hd-band .hd-title {
  max-width: 30ch;
  margin-bottom: 1.9rem;
}

/* The number, set as the loudest thing on the page. */
.hd-figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.9rem;
  margin: 0 auto 1.9rem;
  max-width: 44rem;
}

.hd-figure-half {
  flex: 1 1 15rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  text-align: center;
}

.hd-figure-num {
  display: block;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
}

.hd-figure-num .hd-figure-per {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dim);
}

/* The $300 leads. The monthly fee is stated plainly beside it, a size down. */
.hd-figure-lead { flex: 1.6 1 17rem; }

.hd-figure-lead .hd-figure-num { font-size: clamp(3rem, 7.5vw, 4.4rem); }

.hd-figure-after {
  flex: 1 1 13rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.hd-figure-after .hd-figure-num {
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--mid);
}

.hd-figure-what {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mid);
}

/* ── Objections ──────────────────────────────────────────────────
   <details> rather than a wall of Q&A: twelve answers open by
   default is a page nobody finishes, and the question line is the
   part that does the reassuring. */
.hd-qa {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.hd-qa details {
  border-bottom: 1px solid var(--border);
}

.hd-qa summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.05rem 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

.hd-qa summary::-webkit-details-marker { display: none; }

.hd-qa summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--dim);
  transition: transform 0.15s ease;
}

.hd-qa details[open] summary::after { content: "\2212"; }

.hd-qa summary:hover { color: var(--offer-deep); }

.hd-qa p {
  margin: 0;
  padding: 0 2rem 1.25rem 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--mid);
}

.hd-qa p + p { padding-top: 0.8rem; }

/* ── Close ───────────────────────────────────────────────────────── */
.hd-final {
  padding: 4.5rem 0 5rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ── Narrow ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hd-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* On a phone the copy fills the band, so the radial has nothing
     left to reveal — drop to a near-flat wash and let the art read
     as texture behind the headline rather than as a picture. */
  .hd-hero {
    min-height: 0;
    padding: 5.25rem 0 3rem;
  }
  /* Cover scales to height here and keeps only ~40% of the width, so the
     choice is which slice sits behind the copy. Framing the tower put its
     legs directly behind the headline as a vertical smear; the cloud mass
     reads as texture instead, and the rooftops still run along the bottom. */
  .hd-hero-bg,
  .hd-hero-vid { object-position: 72% 50%; }
  .hd-hero::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.86) 55%,
      rgba(255, 255, 255, 0.97) 92%,
      rgba(255, 255, 255, 1) 100%
    );
  }

  .hd-hook { max-width: none; }
  .hd-cta .btn-primary { width: 100%; justify-content: center; }
  .hd-versus { grid-template-columns: 1fr; }
  .hd-shots { grid-template-columns: 1fr; }
  .hd-gets { grid-template-columns: 1fr; }
  .hd-section { padding: 3.25rem 0; }
  .hd-band { padding: 3.5rem 0; }

  /* Room for the borrowed .vsl-sticky bar so it never covers the
     final CTA or the footer's last link. */
  .hd-page footer { padding-bottom: 5rem; }
}

/* ══════════════════════════════════════════════════════════════
   THE THREE WAY-IN PAGES (/find-out, /done-for-you, /do-it-yourself)
   ══════════════════════════════════════════════════════════════ */

/* The art is the hero background, with the copy over it. The <img> is a
   real element rather than a CSS background so it keeps its alt text and
   can be given fetchpriority — the largest paint on these pages.

   ::after is a left-to-right white scrim, not a flat wash: all three
   pieces put their subject centre-right, so the left stays near-opaque
   for the headline to sit on and the art comes through on the right at
   close to full strength. Without it the lede is grey text on cloud. */
.track-hero {
  position: relative;
  overflow: hidden;
  /* Block flow, not flex. As a flex container the .container child was
     shrink-to-fit rather than 880px, and its `margin: 0 auto` then centred
     that narrow box — which read as a big indent against every other page.
     Padding matches .om-hero exactly so the three sit in the same rhythm
     as the offer pages. No border-bottom: the next .om-section already
     has a border-top, and the two together drew a double rule. */
  min-height: 460px;
  padding: 4.5rem 0 2.5rem;
}

.track-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Only the Y matters: the band is wider than the art's 21:9, so cover
     scales to width and crops top/bottom — there is no horizontal overflow
     to pan. Panning X here does nothing, which cost a round of guessing. */
  object-position: 50% 46%;
  z-index: 0;
}

.track-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.96) 42%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(255, 255, 255, 0.18) 71%,
    rgba(255, 255, 255, 0) 84%
  );
}

.track-hero .container {
  position: relative;
  z-index: 2;
}

/* The grid/grain body background shows through the art otherwise. */
.track-hero .om-lede { max-width: 30rem; }
.track-hero .cs-hook { max-width: 16ch; }

/* Offers as cards. .om-cards on its own is auto-fit/minmax(250px),
   which gives the four-offer page a 3 + 1 orphan at this container
   width. Two columns keeps every page's grid square. */
.offer-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offer-cards .path-item-head {
  margin-bottom: 0.5rem;
}

.offer-cards .path-item-title {
  font-size: 1.25rem;
}

/* In a row the pill sat beside the title; in a card it reads better
   under it, on its own line, as the price line of the card. */
.offer-cards .path-item-meta {
  display: inline-block;
  margin-bottom: 0.85rem;
  white-space: normal;
}

.offer-cards p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--mid);
}

.offer-cards .path-item-cta {
  margin-top: 1.1rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--fg);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.offer-cards .path-item-cta:hover {
  background: var(--fg);
  color: #fff;
}

@media (max-width: 768px) {
  .offer-cards { grid-template-columns: 1fr; }

  /* On a phone the copy covers nearly the whole band, so the sideways
     scrim has nothing to reveal — go to a near-flat wash and let the art
     read as texture behind the headline rather than as a picture. */
  .track-hero {
    min-height: 0;
    padding: 2.75rem 0 3rem;
  }
  .track-hero-bg { object-position: 62% 45%; }
  .track-hero::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.93) 0%,
      rgba(255, 255, 255, 0.9) 60%,
      rgba(255, 255, 255, 0.86) 100%
    );
  }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER SITE INDEX
   Every indexable page, grouped. /get-the-read is deliberately absent:
   it is the noindex paid landing page, and linking it from 39 footers
   would put it straight back into the crawl.
   ══════════════════════════════════════════════════════════════ */
/* styles.css has a bare `nav { background: var(--bg); border-bottom }` and
   a `nav ul { display: flex; gap: 2rem }` from the site header. A <nav> in
   the footer inherits both, which painted this block solid white over white
   text. Reset them here rather than dropping the landmark — a site index is
   exactly what <nav> is for. */
footer .footer-nav {
  background: none;
  border-top: 0;
  position: static;
}

footer .footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

footer .footer-nav a {
  font-weight: 400;
  transition: color 0.15s ease;
}

.footer-nav {
  display: grid;
  /* Four columns, not five: at 880px a fifth column is 140px and almost
     every label wraps to two lines. Guides has sixteen items against four
     or five in the others, so it takes the full row underneath instead of
     making the whole footer as tall as its longest column. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.75rem;
  margin: 2.5rem 0 2.75rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-col-title {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The Guides column carries sixteen items against four or five in the
   others, so it gets the full width of the row below rather than making
   the whole footer as tall as its longest column. */
@media (max-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
    margin: 2rem 0 2.25rem;
  }
}

@media (max-width: 480px) {
  .footer-nav { grid-template-columns: 1fr; }
}

/* ── /sitemap — the human index ────────────────────────────────── */
.sitemap-blurb {
  margin: -0.4rem 0 1.6rem;
  color: var(--dim);
  font-size: 0.98rem;
}

.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
}

.sitemap-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.sitemap-list a {
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
  text-decoration: none;
}

.sitemap-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sitemap-desc {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--dim);
}

@media (max-width: 768px) {
  .sitemap-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   GOOD FIT / NOT THE RIGHT FIT
   Two columns, and the "not" side is not softened. A page that
   only says who it is for reads as a page that will take anyone.
   ══════════════════════════════════════════════════════════════ */
.fit-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1.8rem 0 1.5rem;
}

.fit-col {
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.fit-yes { border-color: var(--border-strong); }
.fit-no  { background: var(--bg-soft); }

.fit-title {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.fit-yes .fit-title { color: var(--fg); }

.fit-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.fit-col li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
}

.fit-col li::before {
  position: absolute;
  left: 0;
  top: -0.05rem;
  font-size: 1rem;
  font-weight: 700;
}

.fit-yes li::before { content: "+"; color: var(--fg); }
.fit-no  li::before { content: "\2013"; color: var(--dim); }

/* ── "This is not a website redesign." ──────────────────────────
   Sits under the hero CTA. The essay it points at already existed;
   this only surfaces it. */
.not-a-redesign {
  margin: 1.6rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--border-strong);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
}

.not-a-redesign strong { color: var(--fg); display: block; }

.not-a-redesign a {
  color: var(--mid);
  text-underline-offset: 3px;
}

.not-a-redesign a:hover { color: var(--fg); }

@media (max-width: 768px) {
  .fit-split { grid-template-columns: 1fr; }
}

/* ── Quote highlight ────────────────────────────────────────────
   One marked line per quote: the claim the reader should leave
   with. A quote where everything is emphasised emphasises nothing,
   so this is deliberately not a general-purpose <mark>. */
.quote-card mark {
  background: linear-gradient(transparent 58%, rgba(200, 137, 26, 0.28) 58%);
  color: inherit;
  padding: 0 0.1em;
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .quote-card mark { transition: background 0.2s ease; }
}

/* ══════════════════════════════════════════════════════════════
   ENGAGEMENT CALENDAR (/map)
   A real Mon-to-Fri grid, not a list of weeks. The claim "your
   total time is three sessions" is only believable if you can see
   the empty days, so the internal days are drawn as cells too and
   are visibly the majority of the grid.
   ══════════════════════════════════════════════════════════════ */
.cal-cal {
  margin: 1.9rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}

.cal-head,
.cal-row {
  display: grid;
  grid-template-columns: 130px repeat(5, minmax(0, 1fr));
}

.cal-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.cal-head span {
  padding: 0.6rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-left: 1px solid var(--border);
}

.cal-corner { border-left: 0 !important; }

.cal-row { border-top: 1px solid var(--border); }
.cal-row:first-of-type { border-top: 0; }

.cal-wk {
  padding: 0.85rem 0.8rem;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cal-wk-n {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.cal-wk-t {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}

.cal-cell {
  padding: 0.75rem 0.75rem 0.85rem;
  border-left: 1px solid var(--border);
  min-height: 118px;
}

.cal-cell p {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mid);
}

.cal-pip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

/* Live days carry the offer colour and read as the only appointments
   in the grid. Everything else recedes. */
.cal-live { background: rgba(199, 145, 206, 0.13); }
.cal-live .cal-pip { background: var(--offer-deep, var(--fg)); color: #fff; }
.cal-live p { color: var(--fg); }

.cal-async .cal-pip {
  border: 1px solid var(--border-strong);
  color: var(--mid);
}

.cal-internal { background: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(0,0,0,0.018) 7px, rgba(0,0,0,0.018) 14px); }
.cal-internal .cal-pip { color: var(--dim); border: 1px solid var(--border); }
.cal-internal p { color: var(--dim); }

.cal-row-after .cal-wk,
.cal-after { background: var(--bg-soft); }
.cal-after { min-height: 0; display: flex; align-items: center; }
.cal-after p { margin: 0; font-size: 0.86rem; color: var(--mid); }
.cal-after strong { color: var(--fg); }

.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  color: var(--dim);
}

.cal-keyitem { display: inline-flex; align-items: center; gap: 0.45rem; }

.cal-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
}

.cal-swatch-live { background: rgba(199, 145, 206, 0.35); }
.cal-swatch-async { background: var(--bg); }
.cal-swatch-internal { background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0,0,0,0.13) 3px, rgba(0,0,0,0.13) 6px); }

/* Below tablet a five-column week is unreadable, so the grid
   unrolls into stacked days and the weekday header goes away. */
@media (max-width: 900px) {
  .cal-head { display: none; }
  .cal-row { grid-template-columns: 1fr; }
  .cal-cell,
  .cal-after { border-left: 0; border-top: 1px solid var(--border); min-height: 0; }
  .cal-cell[style] { grid-column: auto !important; }
  .cal-wk { flex-direction: row; align-items: baseline; gap: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════
   OPERATING MEMO SPREAD (/map)
   Three pages of the deliverable, built as markup rather than
   screenshots so nothing real gets published and the whole thing
   stays legible at any width. The body copy is deliberately greeked
   into bars: the point is the shape of the document, and fake
   sentences would invite reading.
   ══════════════════════════════════════════════════════════════ */
.memo-spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.9rem 0 1.2rem;
  align-items: stretch;
}

/* Pages equalise to the tallest rather than holding a fixed page
   ratio. A locked aspect-ratio clipped the proposal's last line, and
   a deliverable preview that visibly cuts off is worse than one that
   is a little taller than paper. */
.memo-page {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.memo-paper {
  flex: 1;
  min-height: 340px;
  padding: 1.15rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 28px -20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.memo-page figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--dim);
  text-align: center;
}

.memo-kicker {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offer, var(--dim));
}

.memo-h {
  margin: 0.35rem 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--fg);
}

.memo-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--mid);
}

.memo-toc li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.24rem 0;
  border-bottom: 1px dotted var(--border);
}

.memo-toc-last {
  font-weight: 600;
  color: var(--fg);
  border-bottom: 0;
}

.memo-pg { color: var(--dim); flex-shrink: 0; }

/* Greeked body copy. Bars, not lorem ipsum: a reader tries to read
   words, and there is nothing here worth reading. */
.memo-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0;
}

.memo-line {
  display: block;
  height: 0.3rem;
  border-radius: 2px;
  background: var(--border);
}

.memo-line-short { width: 62%; }
.memo-line-dark { background: var(--border-strong); }

.memo-callout {
  margin: 0.6rem 0;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--offer, var(--fg));
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.memo-callout-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 0.1rem;
}

.memo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.58rem;
}

.memo-table td {
  padding: 0.28rem 0.2rem;
  border-bottom: 1px solid var(--border);
  color: var(--mid);
}

.memo-table td:first-child { color: var(--fg); font-weight: 500; }

.memo-flag {
  color: #a8641a;
  font-weight: 600;
}

.memo-table-quote td:last-child { text-align: right; }

.memo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--fg);
  font-size: 0.62rem;
  color: var(--fg);
}

.memo-total strong { font-size: 0.95rem; }

.memo-foot {
  margin: 0.5rem 0 0;
  font-size: 0.52rem;
  color: var(--dim);
}

.memo-note {
  font-size: 0.9rem;
  color: var(--dim);
  max-width: 44rem;
}

.memo-note strong { color: var(--fg); }

@media (max-width: 768px) {
  .memo-spread {
    grid-template-columns: 1fr;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   THE DAY (/install)
   Same idea as the Map's calendar, one scale down: hours instead of
   days. The page's own FAQ asks "is one day really enough?", and a
   grid you can count answers that better than a sentence. The blocks
   marked "your hands" are the majority on purpose — that is the
   product, and a day where the consultant drives is a demo.
   ══════════════════════════════════════════════════════════════ */
.day-cal {
  margin: 1.8rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.day-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  border-top: 1px solid var(--border);
}

.day-row:first-child { border-top: 0; }

.day-time {
  padding: 0.85rem 0.9rem;
  background: var(--bg-soft);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  border-right: 1px solid var(--border);
}

.day-block {
  padding: 0.8rem 0.95rem 0.9rem;
  background: var(--bg);
}

.day-block p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mid);
}

.day-block .cal-pip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

/* The Install's colour is the green from its icon. */
.day-block-hands { background: rgba(71, 154, 104, 0.1); }
.day-block-hands .cal-pip { background: #2f6b46; color: #fff; }
.day-block-hands p { color: var(--fg); }

.day-block-prep .cal-pip,
.day-block-hand .cal-pip {
  border: 1px solid var(--border-strong);
  color: var(--mid);
}

.day-row-break .day-time,
.day-block-break {
  background: var(--bg-soft);
}

.day-block-break p { margin: 0; color: var(--dim); }

.day-row-after .day-time { background: var(--bg-soft); }
.day-block-after { background: var(--bg-soft); }
.day-block-after p { margin: 0; }

.day-key {
  font-size: 0.9rem;
  color: var(--dim);
  max-width: 44rem;
}

.day-key strong { color: var(--fg); }

@media (max-width: 640px) {
  .day-row { grid-template-columns: 1fr; }
  .day-time {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.9rem;
  }
}

/* Two-page variant of the memo spread, for the Read's shorter memo. */
.memo-spread-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 34rem;
}

.memo-table-rank th {
  text-align: left;
  padding: 0 0.2rem 0.3rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--border-strong);
}

.memo-table-rank td:not(:first-child) { text-align: right; }

@media (max-width: 768px) {
  .memo-spread-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .axis-row { transition: opacity 0.25s ease, background 0.25s ease; }
}

/* ══════════════════════════════════════════════════════════════
   GOOD FIT / NOT THE RIGHT FIT
   Two columns, and the "not" side is not softened. A page that
   only says who it is for reads as a page that will take anyone.
   ══════════════════════════════════════════════════════════════ */
.fit-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1.8rem 0 1.5rem;
}

.fit-col {
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.fit-yes { border-color: var(--border-strong); }
.fit-no  { background: var(--bg-soft); }

.fit-title {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.fit-yes .fit-title { color: var(--fg); }

.fit-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.fit-col li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
}

.fit-col li::before {
  position: absolute;
  left: 0;
  top: -0.05rem;
  font-size: 1rem;
  font-weight: 700;
}

.fit-yes li::before { content: "+"; color: var(--fg); }
.fit-no  li::before { content: "\2013"; color: var(--dim); }

/* ── "This is not a website redesign." ──────────────────────────
   Sits under the hero CTA. The essay it points at already existed;
   this only surfaces it. */
.not-a-redesign {
  margin: 1.6rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--border-strong);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
}

.not-a-redesign strong { color: var(--fg); display: block; }

.not-a-redesign a {
  color: var(--mid);
  text-underline-offset: 3px;
}

.not-a-redesign a:hover { color: var(--fg); }

@media (max-width: 768px) {
  .fit-split { grid-template-columns: 1fr; }
}

/* ── Quote highlight ────────────────────────────────────────────
   One marked line per quote: the claim the reader should leave
   with. A quote where everything is emphasised emphasises nothing,
   so this is deliberately not a general-purpose <mark>. */
.quote-card mark {
  background: linear-gradient(transparent 58%, rgba(200, 137, 26, 0.28) 58%);
  color: inherit;
  padding: 0 0.1em;
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .quote-card mark { transition: background 0.2s ease; }
}

/* ══════════════════════════════════════════════════════════════
   ENGAGEMENT CALENDAR (/map)
   A real Mon-to-Fri grid, not a list of weeks. The claim "your
   total time is three sessions" is only believable if you can see
   the empty days, so the internal days are drawn as cells too and
   are visibly the majority of the grid.
   ══════════════════════════════════════════════════════════════ */
.cal-cal {
  margin: 1.9rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}

.cal-head,
.cal-row {
  display: grid;
  grid-template-columns: 130px repeat(5, minmax(0, 1fr));
}

.cal-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.cal-head span {
  padding: 0.6rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-left: 1px solid var(--border);
}

.cal-corner { border-left: 0 !important; }

.cal-row { border-top: 1px solid var(--border); }
.cal-row:first-of-type { border-top: 0; }

.cal-wk {
  padding: 0.85rem 0.8rem;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cal-wk-n {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.cal-wk-t {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}

.cal-cell {
  padding: 0.75rem 0.75rem 0.85rem;
  border-left: 1px solid var(--border);
  min-height: 118px;
}

.cal-cell p {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mid);
}

.cal-pip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

/* Live days carry the offer colour and read as the only appointments
   in the grid. Everything else recedes. */
.cal-live { background: rgba(199, 145, 206, 0.13); }
.cal-live .cal-pip { background: var(--offer-deep, var(--fg)); color: #fff; }
.cal-live p { color: var(--fg); }

.cal-async .cal-pip {
  border: 1px solid var(--border-strong);
  color: var(--mid);
}

.cal-internal { background: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(0,0,0,0.018) 7px, rgba(0,0,0,0.018) 14px); }
.cal-internal .cal-pip { color: var(--dim); border: 1px solid var(--border); }
.cal-internal p { color: var(--dim); }

.cal-row-after .cal-wk,
.cal-after { background: var(--bg-soft); }
.cal-after { min-height: 0; display: flex; align-items: center; }
.cal-after p { margin: 0; font-size: 0.86rem; color: var(--mid); }
.cal-after strong { color: var(--fg); }

.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  color: var(--dim);
}

.cal-keyitem { display: inline-flex; align-items: center; gap: 0.45rem; }

.cal-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
}

.cal-swatch-live { background: rgba(199, 145, 206, 0.35); }
.cal-swatch-async { background: var(--bg); }
.cal-swatch-internal { background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0,0,0,0.13) 3px, rgba(0,0,0,0.13) 6px); }

/* Below tablet a five-column week is unreadable, so the grid
   unrolls into stacked days and the weekday header goes away. */
@media (max-width: 900px) {
  .cal-head { display: none; }
  .cal-row { grid-template-columns: 1fr; }
  .cal-cell,
  .cal-after { border-left: 0; border-top: 1px solid var(--border); min-height: 0; }
  .cal-cell[style] { grid-column: auto !important; }
  .cal-wk { flex-direction: row; align-items: baseline; gap: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════
   OPERATING MEMO SPREAD (/map)
   Three pages of the deliverable, built as markup rather than
   screenshots so nothing real gets published and the whole thing
   stays legible at any width. The body copy is deliberately greeked
   into bars: the point is the shape of the document, and fake
   sentences would invite reading.
   ══════════════════════════════════════════════════════════════ */
.memo-spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.9rem 0 1.2rem;
  align-items: stretch;
}

/* Pages equalise to the tallest rather than holding a fixed page
   ratio. A locked aspect-ratio clipped the proposal's last line, and
   a deliverable preview that visibly cuts off is worse than one that
   is a little taller than paper. */
.memo-page {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.memo-paper {
  flex: 1;
  min-height: 340px;
  padding: 1.15rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 28px -20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.memo-page figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--dim);
  text-align: center;
}

.memo-kicker {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offer, var(--dim));
}

.memo-h {
  margin: 0.35rem 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--fg);
}

.memo-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1.5;
  color: var(--mid);
}

.memo-toc li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.24rem 0;
  border-bottom: 1px dotted var(--border);
}

.memo-toc-last {
  font-weight: 600;
  color: var(--fg);
  border-bottom: 0;
}

.memo-pg { color: var(--dim); flex-shrink: 0; }

/* Greeked body copy. Bars, not lorem ipsum: a reader tries to read
   words, and there is nothing here worth reading. */
.memo-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0;
}

.memo-line {
  display: block;
  height: 0.3rem;
  border-radius: 2px;
  background: var(--border);
}

.memo-line-short { width: 62%; }
.memo-line-dark { background: var(--border-strong); }

.memo-callout {
  margin: 0.6rem 0;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--offer, var(--fg));
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.memo-callout-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 0.1rem;
}

.memo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.58rem;
}

.memo-table td {
  padding: 0.28rem 0.2rem;
  border-bottom: 1px solid var(--border);
  color: var(--mid);
}

.memo-table td:first-child { color: var(--fg); font-weight: 500; }

.memo-flag {
  color: #a8641a;
  font-weight: 600;
}

.memo-table-quote td:last-child { text-align: right; }

.memo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--fg);
  font-size: 0.62rem;
  color: var(--fg);
}

.memo-total strong { font-size: 0.95rem; }

.memo-foot {
  margin: 0.5rem 0 0;
  font-size: 0.52rem;
  color: var(--dim);
}

.memo-note {
  font-size: 0.9rem;
  color: var(--dim);
  max-width: 44rem;
}

.memo-note strong { color: var(--fg); }

@media (max-width: 768px) {
  .memo-spread {
    grid-template-columns: 1fr;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   THE DAY (/install)
   Same idea as the Map's calendar, one scale down: hours instead of
   days. The page's own FAQ asks "is one day really enough?", and a
   grid you can count answers that better than a sentence. The blocks
   marked "your hands" are the majority on purpose — that is the
   product, and a day where the consultant drives is a demo.
   ══════════════════════════════════════════════════════════════ */
.day-cal {
  margin: 1.8rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.day-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  border-top: 1px solid var(--border);
}

.day-row:first-child { border-top: 0; }

.day-time {
  padding: 0.85rem 0.9rem;
  background: var(--bg-soft);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  border-right: 1px solid var(--border);
}

.day-block {
  padding: 0.8rem 0.95rem 0.9rem;
  background: var(--bg);
}

.day-block p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mid);
}

.day-block .cal-pip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

/* The Install's colour is the green from its icon. */
.day-block-hands { background: rgba(71, 154, 104, 0.1); }
.day-block-hands .cal-pip { background: #2f6b46; color: #fff; }
.day-block-hands p { color: var(--fg); }

.day-block-prep .cal-pip,
.day-block-hand .cal-pip {
  border: 1px solid var(--border-strong);
  color: var(--mid);
}

.day-row-break .day-time,
.day-block-break {
  background: var(--bg-soft);
}

.day-block-break p { margin: 0; color: var(--dim); }

.day-row-after .day-time { background: var(--bg-soft); }
.day-block-after { background: var(--bg-soft); }
.day-block-after p { margin: 0; }

.day-key {
  font-size: 0.9rem;
  color: var(--dim);
  max-width: 44rem;
}

.day-key strong { color: var(--fg); }

@media (max-width: 640px) {
  .day-row { grid-template-columns: 1fr; }
  .day-time {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.9rem;
  }
}

/* Two-page variant of the memo spread, for the Read's shorter memo. */
.memo-spread-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 34rem;
}

.memo-table-rank th {
  text-align: left;
  padding: 0 0.2rem 0.3rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--border-strong);
}

.memo-table-rank td:not(:first-child) { text-align: right; }

@media (max-width: 768px) {
  .memo-spread-two { grid-template-columns: 1fr; }
}

/* ── Homepage close ─────────────────────────────────────────────
   The page ends on the same two actions it opened with. The router
   is offered as a quiet third line rather than a third button:
   a page that presents three equal choices at the end asks the
   reader to make the decision twice. */
.home-close {
  border-top: 1px solid var(--border);
  text-align: center;
}

.home-close-lede {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--mid);
}

.home-close-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.home-close-note {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  color: var(--dim);
}

@media (max-width: 560px) {
  .home-close-ctas { flex-direction: column; align-items: stretch; }
}

/* Single-column variant: /work-with-me carries only the disqualifiers,
   because the whole page is already the "good fit" case. */
.fit-split-single { grid-template-columns: 1fr; max-width: 40rem; }
.fit-split-single .fit-col { background: var(--bg-soft); }

/* ══════════════════════════════════════════════════════════════
   THE TWO AXES (/work-with-me, homepage, nav, footer)
   The plain-English label is the scanning column and gets the
   size; the product name drops to a label inside the row. That is
   the whole hypothesis — a reader should be able to find their row
   without having learned eight invented nouns first.
   ══════════════════════════════════════════════════════════════ */
.axis-lede {
  max-width: 42rem;
  color: var(--mid);
  margin-bottom: 1.7rem;
}

/* Each option is its own card on a white ground. The list used to be
   hairline-separated rows on the page background, which read as a table;
   as cards they read as eight things you can pick between. */
.axis {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.axis-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  /* 12.5rem holds the longest rung — "enhancing your operations" measures
     195px — on one line. They are the scanning column; wrapping them to
     two lines costs more than the width does. */
  /* Fixed, not minmax(0, …): a 0-floor track shrinks below its content
     and the nowrap rung then overflows into the product name. 15.5rem
     clears the longest, "enhancing your operations", which measures
     253px rendered — verified with scrollWidth, because a nowrap span
     overflows its box without changing its bounding rect, so comparing
     rects says it fits when it visibly does not. Each row
     is its own grid, so a fixed width is also what keeps the columns
     aligned from card to card. */
  grid-template-columns: 28px 15.5rem minmax(0, 1fr) auto;
  gap: 0.3rem 1.1rem;
  /* Rows on /work-with-me carry no price, so the trailing auto column
     collapses to nothing and the description takes the space. */
  align-items: baseline;
  padding: 1.25rem 1.35rem 1.35rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.axis-row:hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.28);
}

/* The dimension, not the product, is what the eye lands on. */
.axis-when {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.25;
  white-space: nowrap;
}

/* Pixel art, so it holds its edges at 28px rather than going soft. */
.axis-glyph {
  width: 28px;
  height: 28px;
  align-self: start;
  margin-top: 0.1rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.axis-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.axis-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--dim);
}

.axis-gate {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--offer-deep, var(--fg));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  vertical-align: 1px;
}

.axis-line {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mid);
}

.axis-price {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  text-align: right;
}

/* The programs are a sequence. A rule down the left says so without
   spending a paragraph on it. */
.axis-seq { position: relative; }

.axis-seq::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--border-strong), var(--offer-deep, var(--fg)));
}

@media (max-width: 760px) {
  .axis-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0.35rem 0.85rem;
  }
  .axis-glyph { grid-column: 1; grid-row: 1; }
  .axis-when { grid-column: 2; white-space: normal; }
  .axis-price { grid-column: 3; grid-row: 1; }
  .axis-body { grid-column: 2 / -1; }
}

/* Two-column mega panel. The nav mirrors the page: one column per axis,
   the plain-English rung as the link label and the product name under it,
   which is the same inversion the /work-with-me rows use. */
@media (min-width: 769px) {
  .nav-dropdown.nav-mega-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-mega-two .nav-mega-head { min-height: 0; padding-bottom: 0.6rem; }
  .nav-mega-two .nav-mega-list { margin-top: 0.15rem; }
  .nav-mega-two .nav-mega-list .nav-drop-name { font-weight: 500; }
  .nav-mega-two .nav-mega-list .nav-drop-desc {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }
}

/* styles.css carries a bare `nav ul { display: flex; gap: 2rem }` from the
   site header. Re-introducing sub-lists in the mega panel meant they
   inherited it and laid out as rows again. This has to sit outside the
   media queries or the mobile overlay gets the row back. */
footer .footer-nav ul,
.nav-mega-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  align-items: stretch;
}

.nav-mega a { white-space: normal; }

/* Homepage: the two axes side by side, rows trimmed to label, name and
   price. The one-line descriptions live on /work-with-me — the homepage's
   job is conviction, not the full spec. */
.home-axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.home-axis-t {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

.home-axes .axis-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 0.95rem 0.5rem 1rem;
  align-items: baseline;
  gap: 0.15rem 0.85rem;
}

.home-axes .axis-when { grid-column: 2; }
.home-axes .axis-body { grid-column: 2; }
.home-axes .axis-price { grid-column: 3; grid-row: 1; }
.home-axes .axis-when { font-size: 1.02rem; }
.home-axes .axis-name { font-size: 0.78rem; }

@media (max-width: 860px) {
  .home-axes { grid-template-columns: 1fr; gap: 2rem; }
}


/* ══════════════════════════════════════════════════════════════
   404 — THE CLOUD WHERE THE PAGE SHOULD BE
   The pixel cloud from the logo stands in for the zero; the bolt
   strikes on hover, focus, or click (.nf-zap, set by 404.html).
   ══════════════════════════════════════════════════════════════ */
.nf-scene {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 2vw, 1rem);
  margin: 1.5rem 0 0.25rem;
  user-select: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.nf-four {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
}

.nf-cloud {
  display: inline-block;
  position: relative;
  padding: 0 0 3.25rem; /* room below the cloud for the bolt to land */
  animation: nf-drift 7s ease-in-out infinite;
}

.nf-cloud-img {
  display: block;
  width: clamp(130px, 30vw, 224px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.35) contrast(1.08);
}

.nf-bolt {
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
  width: clamp(22px, 4.5vw, 32px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.nf-scene:hover .nf-bolt,
.nf-scene:focus-visible .nf-bolt,
.nf-scene.nf-zap .nf-bolt {
  animation: bolt-flash 0.55s linear infinite;
}

.nf-scene.nf-zap .nf-cloud-img {
  animation: nf-flash 0.55s linear 1;
}

@keyframes nf-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes nf-flash {
  0%, 25% { filter: saturate(1.35) contrast(1.08) brightness(1.4); }
  100%    { filter: saturate(1.35) contrast(1.08); }
}

.nf-zap-msg {
  min-height: 1.5em;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--dim);
}

.nf-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .nf-cloud { animation: none; }
  .nf-scene:hover .nf-bolt,
  .nf-scene:focus-visible .nf-bolt,
  .nf-scene.nf-zap .nf-bolt { animation: none; opacity: 1; }
  .nf-scene.nf-zap .nf-cloud-img { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   HOME CONTENT LIBRARY — top guides + recent newsletter, surfaced
   from the homepage so the content layer isn't invisible at the
   front door. Guides are hand-curated; the newsletter cards are
   generated by tools/build-blog.mjs between the newsletter markers.
   ══════════════════════════════════════════════════════════════ */
.home-library-lede {
  max-width: 640px;
  color: var(--mid);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0.5rem 0 2.5rem;
}

.home-library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.75rem 0 1.25rem;
}

.home-library-subhead {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.home-library-head .cs-back { margin: 0; }

.home-guide-grid,
.home-post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.home-guide,
.home-post {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.home-guide:hover,
.home-post:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}

.home-guide-title,
.home-post-title {
  font-weight: 600;
  color: var(--fg);
  font-size: 1.05rem;
  line-height: 1.3;
}

.home-guide-desc,
.home-post-desc {
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.home-post-when {
  order: -1;
  color: var(--dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .home-guide-grid,
  .home-post-grid { grid-template-columns: 1fr; }
}

.home-guide-thumb {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.8rem;
  background: var(--bg-soft);
}

/* ===========================================================================
   HANDLED INTAKE  (.hi-*)
   ---------------------------------------------------------------------------
   Only used by /handled-intake, a noindex page reached with a token. Built
   entirely from the tokens above — no new colours, no new type scale — because
   the client should feel like they are still on shanegring.com after paying,
   not handed off to a form vendor.

   One idea gets any emphasis: the rail. It answers "is this saved, and how
   much is left?" continuously, because the failure mode this whole page is
   designed against is a paying client closing the tab. Everything else is the
   existing .contact-field vocabulary with a wider label.
   =========================================================================== */

.hi-body { background: var(--bg-soft); }
.hi-boot { color: var(--dim); padding: 4rem 0; }

.hi-shell { padding: 2.5rem 0 5rem; }

.hi-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid track's default min-width is auto, which
     lets the horizontally-scrolling rail below stretch the track instead of
     scrolling inside it — and take the whole page sideways with it on a
     phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.hi-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.25rem 1.5rem;
  min-width: 0;
}

/* --- the rail ------------------------------------------------------------ */

.hi-rail {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-soft);
  padding: 0.5rem 0 0.75rem;
  margin: 0 -1rem;
  min-width: 0;
}

.hi-rail-list {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.hi-rail-list::-webkit-scrollbar { display: none; }

.hi-rail-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--mid);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hi-rail-btn:hover { border-color: var(--border-strong); color: var(--fg); }
.hi-rail-btn.is-current { border-color: var(--fg); color: var(--fg); font-weight: 500; }
.hi-rail-count { display: none; }

.hi-ring { width: 18px; height: 18px; flex: none; overflow: visible; }
.hi-ring-track { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.hi-ring-arc {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 10px 10px;
  transition: stroke-dasharray 0.3s ease;
}
.hi-ring-tick { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hi-save {
  margin: 0.6rem 1rem 0;
  font-size: 0.8rem;
  color: var(--dim);
  min-height: 1.2em;
}
.hi-save.is-error { color: #a4341f; }

/* --- screens ------------------------------------------------------------- */

.hi-screen .cs-hook { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 1rem; }
.hi-screen .om-lede { font-size: 1.02rem; margin-bottom: 1.75rem; }

/* Shane's intro video on the first screen. Absent until the file exists — see
   introVideo() in assets/handled/app.js. */
.hi-intro { margin: 0 0 1.5rem; }
.hi-intro-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--fg);
  object-fit: cover;
}
.hi-intro-cap {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--dim);
}

.hi-handy {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  background: var(--bg-soft);
}
.hi-handy-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); margin: 0 0 0.6rem; font-weight: 500; }
.hi-handy-list { margin: 0; padding-left: 1.1rem; color: var(--mid); line-height: 1.75; font-size: 0.95rem; }

/* The confetti canvas: pinned over everything, clicks pass through, gone
   from the DOM the moment it finishes. */
.hi-confetti {
  position: fixed;
  z-index: 200;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The line under the greeting on a just-paid arrival. */
.hi-welcome-from {
  margin: 0 0 1.1rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--offer-deep);
}

.hi-reassure { font-size: 0.92rem; color: var(--mid); line-height: 1.65; border-left: 2px solid var(--border-strong); padding-left: 0.9rem; margin: 0; }

/* --- fields -------------------------------------------------------------- */

.hi-fields { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 0.5rem; }
.hi-field { display: flex; flex-direction: column; gap: 0.5rem; scroll-margin-top: 5rem; }

.hi-label { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; cursor: pointer; }
.hi-label-text { font-size: 0.98rem; color: var(--fg); line-height: 1.45; font-weight: 500; }
.hi-req {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.hi-help { font-size: 0.87rem; color: var(--dim); margin: -0.2rem 0 0; }

.hi-input, .hi-textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.85rem;
  border-radius: 8px;
  width: 100%;
  min-height: 48px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hi-textarea { line-height: 1.6; resize: none; overflow-y: auto; }
.hi-input:focus, .hi-textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.hi-textarea:disabled { background: var(--bg-soft); color: var(--dim); }

.hi-field.is-missing .hi-input,
.hi-field.is-missing .hi-textarea { border-color: #a4341f; }

.hi-textwrap { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

.hi-notsure {
  font: inherit;
  font-size: 0.82rem;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hi-notsure:hover { color: var(--fg); border-color: var(--fg); }
.hi-notsure.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* --- three ways to answer ------------------------------------------------ */

.hi-ways { margin-bottom: 2rem; }
.hi-ways-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.hi-way {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  min-height: 60px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.hi-way:hover:not(:disabled) { border-color: var(--fg); }
.hi-way.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.hi-way-label { font-size: 0.98rem; color: var(--fg); font-weight: 500; }
.hi-way-note { font-size: 0.85rem; color: var(--dim); }

/* --- template picker ----------------------------------------------------- */

.hi-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.hi-template {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hi-template:hover { border-color: var(--fg); }
.hi-template.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
/* 16/9 because every preview is 1279x712. A 4:3 card cropped 26% off the sides,
   which cut the first word off half the headlines — a client was choosing between
   six pages with their left edge sliced away. Matching the card to the source
   means nothing is cropped at all. object-position stays as insurance for a
   future screenshot that isn't this shape. */
.hi-template-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-soft); display: block; }
.hi-template-name { font-size: 0.9rem; color: var(--fg); font-weight: 500; }
.hi-template-desc { font-size: 0.82rem; color: var(--dim); line-height: 1.45; }

/* --- repeatable + uploads ------------------------------------------------ */

.hi-repeat { display: flex; flex-direction: column; gap: 0.5rem; }
.hi-repeat-row { display: flex; gap: 0.5rem; align-items: center; }
.hi-repeat-rm {
  flex: none; width: 44px; height: 44px;
  font: inherit; font-size: 1.2rem; line-height: 1;
  color: var(--dim); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer;
}
.hi-repeat-rm:hover { color: var(--fg); border-color: var(--fg); }
.hi-repeat-add {
  align-self: flex-start; font: inherit; font-size: 0.88rem;
  color: var(--mid); background: none; border: none; padding: 0.4rem 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.hi-repeat-add:hover { color: var(--fg); }

.hi-upload { display: flex; flex-direction: column; gap: 0.7rem; }
.hi-upload-or { font-size: 0.88rem; color: var(--mid); margin: 0; }

/* --- review + send ------------------------------------------------------- */

.hi-review-block { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.5rem; }
.hi-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hi-review-title { font-size: 1.05rem; font-weight: 600; color: var(--fg); margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.hi-review-edit {
  font: inherit; font-size: 0.85rem; color: var(--mid); background: none; border: none;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0.25rem;
}
.hi-review-edit:hover { color: var(--fg); }
.hi-review-list { margin: 0; }
.hi-review-q { font-size: 0.85rem; color: var(--dim); margin-top: 0.9rem; line-height: 1.45; }
.hi-review-a { margin: 0.2rem 0 0; font-size: 0.98rem; color: var(--fg); line-height: 1.6; white-space: pre-wrap; }
.hi-review-a.is-empty { color: var(--dim); font-style: italic; white-space: normal; }
.hi-review-a.is-notsure { color: var(--mid); }
.hi-review-ul { margin: 0; padding-left: 1.1rem; }
.hi-review-file { margin: 0.15rem 0; font-size: 0.9rem; color: var(--mid); }
.hi-review-text { margin: 0 0 0.4rem; }

.hi-warn { border: 1px solid #d9a79b; background: #fdf6f4; border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1.5rem; }
.hi-warn strong { display: block; margin-bottom: 0.4rem; color: #7a2718; font-size: 0.95rem; }
.hi-warn-list { margin: 0; padding-left: 1.1rem; }
.hi-warn-link { font: inherit; font-size: 0.9rem; color: #7a2718; background: none; border: none; padding: 0.2rem 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }

.hi-send { margin-top: 2rem; width: 100%; justify-content: center; }
.hi-send-error { color: #a4341f; font-size: 0.9rem; margin: 0.75rem 0 0; }

.hi-sent { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.hi-sent summary { cursor: pointer; font-size: 0.92rem; color: var(--mid); padding: 0.4rem 0; }
.hi-sent summary:hover { color: var(--fg); }

/* --- pager --------------------------------------------------------------- */

.hi-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.hi-pager .btn-primary, .hi-pager .btn-secondary { min-height: 48px; }

/* --- focus + motion ------------------------------------------------------ */

.hi-app :focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .hi-ring-arc, .hi-template, .hi-way, .hi-rail-btn { transition: none; }
}

/* --- from tablet up: the rail becomes a column ---------------------------- */

@media (min-width: 860px) {
  .hi-grid { grid-template-columns: 232px minmax(0, 1fr); gap: 2.5rem; }
  .hi-col { padding: 2.25rem 2.25rem 1.75rem; }

  .hi-rail { top: 2.5rem; margin: 0; padding: 0; background: none; }
  .hi-rail-list { flex-direction: column; gap: 0.15rem; padding: 0; overflow: visible; }
  .hi-rail-btn {
    width: 100%;
    justify-content: flex-start;
    border-color: transparent;
    background: none;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
  }
  .hi-rail-btn:hover { background: var(--bg); border-color: var(--border); }
  .hi-rail-btn.is-current { background: var(--bg); border-color: var(--border-strong); }
  /* The count sits on the label's line, pushed to the right edge. It used to be
     width:100% inside a wrapping flex row, which forced it onto a line of its
     own and made the rail read as fourteen loose items instead of seven. */
  .hi-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hi-rail-count {
    display: block;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--dim);
  }
  .hi-rail-btn.is-complete .hi-rail-count { color: var(--mid); }
  .hi-save { margin: 1rem 0 0; padding: 0 0.7rem; }

  /* --ways is set by the app: the record option is absent on a browser that
     cannot record, and the row should be two-up rather than leave a gap. */
  .hi-ways-row { grid-template-columns: repeat(var(--ways, 3), 1fr); }
  .hi-send { width: auto; }
}

/* --- Handled intake: files and recording ---------------------------------- */

.hi-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 1.4rem 1rem;
  background: var(--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hi-drop:hover, .hi-drop.is-over { border-color: var(--fg); background: var(--bg); }
/* The input covers the label so the whole box is the tap target on a phone,
   while remaining a real focusable input for the keyboard. */
.hi-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hi-drop-input:focus-visible + .hi-drop-icon { outline: 2px solid var(--fg); outline-offset: 4px; }
.hi-drop-icon { font-size: 1.05rem; color: var(--dim); }
.hi-drop-text { font-size: 0.95rem; color: var(--fg); font-weight: 500; }
.hi-drop-hint { font-size: 0.8rem; color: var(--dim); }

.hi-files { display: flex; flex-direction: column; gap: 0.4rem; }
.hi-file {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  font-size: 0.9rem;
}
.hi-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.hi-file-meta { flex: none; font-size: 0.8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.hi-file-rm {
  flex: none; font: inherit; font-size: 0.82rem; color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 0.35rem 0.2rem;
  text-decoration: underline; text-underline-offset: 3px; min-height: 36px;
}
.hi-file-rm:hover { color: var(--fg); }
.hi-file-rm:disabled { opacity: 0.5; cursor: default; }
.hi-file.is-uploading .hi-file-name { color: var(--mid); }
.hi-file-bar { flex: 1 1 40%; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.hi-file-fill { display: block; height: 100%; width: 0; background: var(--fg); transition: width 0.2s ease; }
.hi-file-error { color: #a4341f; font-size: 0.87rem; margin: 0; }

/* --- recorder ------------------------------------------------------------- */

.hi-rec {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
}
.hi-rec-status { font-size: 0.9rem; color: var(--mid); margin: 0; }
.hi-rec-status.is-error { color: #a4341f; }
.hi-rec-done { font-size: 0.95rem; color: var(--fg); font-weight: 500; margin: 0; }

.hi-rec-timer {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hi-rec.is-recording .hi-rec-timer { color: var(--fg); }

.hi-rec-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: inherit; font-size: 0.95rem; font-weight: 500;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg); border-radius: 999px;
  padding: 0.7rem 1.4rem; min-height: 48px; cursor: pointer;
}
.hi-rec-btn:disabled { opacity: 0.6; cursor: default; }
.hi-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2554a; flex: none; }
.hi-rec-btn.is-recording .hi-rec-dot { animation: hi-pulse 1.4s ease-in-out infinite; }

@keyframes hi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .hi-rec-btn.is-recording .hi-rec-dot { animation: none; } }

.hi-rec-prompts {
  margin: 0.5rem 0 0;
  padding-left: 1.3rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  color: var(--mid); font-size: 0.95rem; line-height: 1.5;
}
.hi-rec.is-recording .hi-rec-prompts { color: var(--fg); }
.hi-rec-prompt::marker { color: var(--dim); font-variant-numeric: tabular-nums; }

/* --- transcript ----------------------------------------------------------- */

.hi-transcript {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
}
.hi-transcript.is-note { border-left-color: var(--border-strong); }
.hi-transcript-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); margin: 0 0 0.6rem; font-weight: 500; }
.hi-transcript-text { font-size: 0.95rem; line-height: 1.65; color: var(--fg); margin: 0 0 0.75rem; white-space: pre-wrap; }
.hi-transcript-note { font-size: 0.85rem; color: var(--dim); margin: 0; line-height: 1.55; }

/* The same bordered pill as "Not sure" — this page's own vocabulary for a
   standalone secondary action, and a real 48px target on a phone. */
.hi-rec-again {
  font: inherit;
  font-size: 0.9rem;
  color: var(--mid);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hi-rec-again:hover { color: var(--fg); border-color: var(--fg); }

/* --- Handled intake: listening back --------------------------------------- */

.hi-playback { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.hi-playback-label { font-size: 0.9rem; color: var(--mid); margin: 0; }

/* Same quiet pill as the page's other standalone secondary actions. */
.hi-playback-toggle {
  font: inherit;
  font-size: 0.88rem;
  color: var(--mid);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hi-playback-toggle:hover { color: var(--fg); border-color: var(--fg); }

/* The native control, sized to the column. Building a custom player would buy
   nothing here and lose the platform's own keyboard and scrubbing behaviour. */
.hi-audio { width: 100%; max-width: 420px; height: 40px; }

/* Placeholder-transcript marker. Deliberately conspicuous: this text must never
   be mistaken for a real transcription of real audio. */
.hi-transcript-stub {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #7a2718;
  background: #fdf6f4;
  border: 1px solid #d9a79b;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

/* Template card + its "see it full size" sibling. The card is the choice; the
   link is a separate action, so it sits outside the button rather than inside
   it — a nested anchor is invalid and eats one of the two. */
.hi-template-cell { display: flex; flex-direction: column; gap: 0.4rem; }
.hi-template-cell .hi-template { height: 100%; }
.hi-template-view {
  display: inline-flex; align-items: center; gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 0.2rem;      /* a real target on a phone, not a 12px link */
  min-height: 40px;
}
.hi-template-view:hover { color: var(--fg); }
.hi-template-arrow { font-size: 0.9em; }