/* ════════════════════════════════════════════════════════════════════ */
/* CARTRIDGE — Compiled component library                              */
/* AUTO-GENERATED from 4-design/components/*.css                       */
/* DO NOT EDIT. Run npm run cartridge:build to refresh.                */
/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Reset + global foundations
   ════════════════════════════════════════════════════════════════════
   Universal element reset, body baseline, link/button defaults, image
   block + max-width safety. Extracted from the prototype's inline <style>
   (direction-1-lifted.html lines 45-65) which was missed in Phase A→C
   extraction — its absence caused every Cartridge consumer surface to
   fall back to UA defaults (Times New Roman + 8px margin + content-box).

   Must concatenate FIRST so per-component rules can override anything
   declared here.
   ════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip (not hidden) — clips the wide trades-marquee track
   without creating a scroll container. `hidden` breaks position:sticky in
   WebKit/Safari because it reassigns the scroll container away from
   <html>. `clip` doesn't. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv01", "cv11";
  color: var(--heading);
  background: var(--canvas);
  line-height: 1.5;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* — Claude wordmark — inline + block variants used in .how and h3 ── */
.claude-wordmark {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
  margin: 0 0.05em;
}
.claude-wordmark--block {
  display: block;
  height: auto;
  width: auto;
  margin: 0;
  vertical-align: baseline;
}

/* — Brain-dump phone-zone defensive ::before reset — */
.dump-phone-zone::before { content: none; }


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Typography
   ════════════════════════════════════════════════════════════════════
   Display + body + accent-word system. All headings ink-coloured; .lede
   for section sub-headers; .eyebrow for small labelled introductions.
   Accent words highlight a single key phrase per heading (orange on
   cream; navy underline on .panel-orange via panels.css override).
   ════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 { color: var(--heading); }

h1 {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.96;
  font-size: 76px;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.02;
  font-size: 56px;
  margin-bottom: 18px;
  text-wrap: balance;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
  font-size: 20px;
  margin-bottom: 8px;
}

h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
}

p { font-size: 16px; }

.lede {
  font-size: 22px;
  line-height: 1.4;
  color: var(--body);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  max-width: 52ch;
  font-weight: 400;
}

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}

/* Accent words — a single key word or short phrase per heading.
   Default is orange fill on cream backgrounds; panel-orange override in
   panels.css swaps to navy underline so the accent device stays
   semantically distinct from the orange surface. */
.accent-word       { color: var(--accent); white-space: nowrap; }
.accent-period     { color: var(--accent); }
.accent-green-word { color: var(--accent-green); }
.accent-blue-word  { color: var(--accent-deep-blue); }
.accent-teal-word  { color: var(--accent-teal); }


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Layout primitives
   ════════════════════════════════════════════════════════════════════
   Three containers + section padding rhythm + thin architectural rule.
   Containers are explicit max-widths (not fluid clamp) because Alex's
   design pins specific layouts; section padding scales via modifier
   classes against the `--section-pad-*` token rung.
   ════════════════════════════════════════════════════════════════════ */

.container       { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.container--wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.narrow          { max-width: 760px;  margin: 0 auto; padding: 0 32px; }

section {
  padding-block: var(--section-pad);
  position: relative;
}
.section--tight { --section-pad: var(--section-pad-md); }
.section--loose { --section-pad: var(--section-pad-xl); }
.section--flush { --section-pad: var(--section-pad-flush); }

/* Default section padding — applied via `:root` so individual sections
   inherit. Sections that need a different rung use the modifier above. */
:root { --section-pad: var(--section-pad-lg); }

/* Thin architectural rule — used as a section divider where the design
   wants a hairline beat (rather than colour change) between content
   blocks. */
.section-rule {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* Centred-section convention — sections 6 (.relief-section) onwards
   stack their heading + lede in a single centred column. Sections
   above are either explicitly centred (.braindump, .brief-section) or
   intentionally 2-col on desktop and centred on mobile (.pdfs). */
.relief-section h2, .relief-section .lede,
.how h2,            .how .lede,
.coverage h2,       .coverage .lede,
.pricing h2,        .pricing .lede,
.sound h2,          .sound .lede,
.alex-story h2,     .alex-story .lede,
.suggest h2,        .suggest .lede,
.trust-strip h2,    .trust-strip .lede,
.final-cta h2,      .final-cta .lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Full-bleed colour panels
   ════════════════════════════════════════════════════════════════════
   Four panel variants for full-bleed colour sections. Each variant
   handles its own text-colour override + nested-component overrides
   (button hover, accent-word treatment) so consumer sections only need
   to apply one class to swap the entire colour register.
   ════════════════════════════════════════════════════════════════════ */

/* — Navy ink panel (used by Pricing, Final CTA, How It Works base) — */
.panel-dark { background: var(--heading); color: #fff; }
.panel-dark h2,
.panel-dark h3 { color: #fff; }
.panel-dark .lede { color: rgba(255, 255, 255, 0.78); }
/* Default `.btn:hover` flips to navy — invisible against panel-dark.
   Flip to white-bg / navy-text so the hover state stays legible. */
.panel-dark .btn:hover {
  background: #fff;
  color: var(--heading);
  border-color: #fff;
}

/* — Orange panel — */
.panel-orange { background: var(--accent); color: var(--heading); }
.panel-orange h2,
.panel-orange h3 { color: var(--heading); }
.panel-orange .lede { color: rgba(15, 20, 36, 0.78); }
/* Accent-word on orange swaps the orange fill (invisible orange-on-orange)
   for a navy underline — same semantic role, panel-appropriate execution. */
.panel-orange .accent-word {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 8px;
}

/* — Deep-blue panel (currently unused on the landing; defined for parity) — */
.panel-blue { background: var(--accent-deep-blue); color: #fff; }
.panel-blue h2,
.panel-blue h3 { color: #fff; }
.panel-blue .lede { color: rgba(255, 255, 255, 0.82); }

/* — Cream-alt panel — softer than the default --canvas; used by Trades + Countries — */
.panel-cream-alt { background: var(--canvas-alt); }


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Buttons
   ════════════════════════════════════════════════════════════════════
   Primary button is orange-fill / navy-text (6.6:1 contrast); hover
   flips to navy-fill / white-text + 2px lift. Secondary is outline.
   Nav button is a compact variant. Arrow icon is an SVG mask so it
   stays crisp at any size and inherits button text colour via
   currentColor on background-color.

   Panel overrides live in `panels.css` (e.g. `.panel-dark .btn:hover`
   flips to white-bg / navy-text to stay legible on navy backgrounds).
   ════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  background: var(--accent);
  color: var(--heading);
  border: 1.5px solid var(--accent);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius-md);
  letter-spacing: -0.005em;
  transition:
    transform 220ms cubic-bezier(.2, .7, .2, 1),
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
  cursor: pointer;
}
.btn:hover {
  background: var(--heading);
  color: #fff;
  border-color: var(--heading);
  transform: translateY(-2px);
}

/* SVG-mask arrow — replaces the prior rotated-border chevron (aliased
   poorly at small sizes). background-color: currentColor inherits the
   button's text colour, so the arrow inverts cleanly on hover. */
.btn .arrow {
  display: inline-block;
  width: 22px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6 H18 M13 2 L18 6 L13 10'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6 H18 M13 2 L18 6 L13 10'/></svg>") no-repeat center / contain;
  transition: transform 220ms ease;
  flex-shrink: 0;
}

/* Vestigial from a refactor — rest .btn .arrow is already 22px, so this
   hover rule is currently a no-op. Kept for exact parity with the
   prototype's inline <style> (direction-1-lifted.html line 227). */
.btn:hover .arrow { width: 22px; }

/* — Secondary button — outline-only, used alongside primary CTAs — */
.btn-secondary {
  background: transparent;
  color: var(--heading);
  border-color: var(--heading);
}
.btn-secondary:hover {
  background: var(--heading);
  color: #fff;
}

/* — Nav button — compact primary, used in sticky header — */
.btn-nav {
  padding: 10px 18px;
  background: var(--accent);
  color: var(--heading);
  border: 1.5px solid var(--accent);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-md);
  transition: all 220ms ease;
}
.btn-nav:hover {
  background: var(--heading);
  color: #fff;
  border-color: var(--heading);
  transform: translateY(-1px);
}

/* — Layout helpers — */
.btn-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Sticky cream nav
   ════════════════════════════════════════════════════════════════════
   Pattern C mobile header: wordmark left + primary CTA always visible
   + hamburger toggles a slide-down panel that holds the auxiliary nav
   links. Cream backdrop with blur, hairline bottom border.

   Mobile hamburger animations + slide-down panel live alongside the
   nav primitive here because they're tightly coupled — the same nav
   element drives both states.
   ════════════════════════════════════════════════════════════════════ */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(242, 237, 226, 0.85);  /* canvas at 85% — drives the backdrop-filter blur */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

nav .container--wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img { height: 26px; }

.nav-cluster { display: flex; gap: 22px; align-items: center; }

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 14px;
}
.nav-links a {
  color: var(--body);
  font-weight: 500;
  transition: color 180ms;
}
.nav-links a.subtle { color: var(--muted); }
.nav-links a:hover  { color: var(--heading); }

/* Mobile hamburger — CSS-only checkbox toggle drives the slide-down
   panel. Span transforms morph to an × icon when checked. */
.nav-toggle { display: none; }
.hamburger {
  display: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--heading);
  margin: 0 auto;
  transition: transform 220ms ease, opacity 180ms ease;
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Wireframe label (DEV ONLY)
   ════════════════════════════════════════════════════════════════════
   Small uppercase debug badge in the top-right of any section. Used
   during prototype iteration to mark "PLACEHOLDER" / section names /
   in-progress sections. Auto-inverts colour on .panel-dark / -orange
   / -blue.

   REMOVE before production launch — this exists only to label dev
   states on the design canvas.
   ════════════════════════════════════════════════════════════════════ */

.wf-label {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 20, 36, 0.04);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 5;
}

.panel-dark   .wf-label,
.panel-orange .wf-label,
.panel-blue   .wf-label {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Hero (full-bleed photo + gradient + bottom-anchored copy)
   ════════════════════════════════════════════════════════════════════
   Real photo of a UK tradesperson at the back of the van as full-bleed
   backdrop. Bottom-to-top dark-navy gradient (5 stops, dense at the
   bottom) gives any photo a guaranteed text-legibility zone for the
   white headline. Content stack hugs the bottom of the viewport via
   `justify-content: flex-end`.

   Hero contains the trades-marquee at its base — see trades-marquee.css.
   ════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: var(--heading);
  padding: 0;
  overflow: hidden;
}

.hero-photo {
  position: relative;
  width: 100%;
  min-height: 88vh;
  background-color: var(--heading);
  background-image: url("photos/hero-electrician-van.png");
  background-size: cover;
  background-position: 62% center;  /* anchors the figure upper-right on mobile */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 20, 36, 0.96) 0%,
    rgba(15, 20, 36, 0.86) 22%,
    rgba(15, 20, 36, 0.55) 50%,
    rgba(15, 20, 36, 0.12) 78%,
    rgba(15, 20, 36, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 0 80px;
}

.hero h1 {
  color: #fff;
  max-width: 18ch;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 14px;
}

.hero .lede {
  color: rgba(255, 255, 255, 0.92);
  max-width: 40ch;
  margin-bottom: 24px;
}

.hero-supporting {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 28px;
  font-weight: 500;
}

.hero .btn-row  { row-gap: 12px; }
.hero .btn-note { color: rgba(255, 255, 255, 0.65); margin-top: 20px; }

/* Hero secondary button overrides — translucent on dark photo for
   visual hierarchy with the primary orange CTA. */
.hero .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #fff;
  color: #fff;
}

/* ─── Hero entrance staggered animation ─── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .hero-supporting,
.hero .btn-row,
.hero .btn-note {
  animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.hero h1               { animation-delay: 0.06s; }
.hero .lede            { animation-delay: 0.14s; }
.hero .hero-supporting { animation-delay: 0.20s; }
.hero .btn-row         { animation-delay: 0.26s; }
.hero .btn-note        { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Trades marquee (hero bottom)
   ════════════════════════════════════════════════════════════════════
   Horizontal scrolling strip of trade names + orange separator dots,
   docked at the visible bottom of the hero. Animates left at desktop
   45s / mobile 25s (mobile faster because the visible window is
   shorter). The track contains two copies of the trade list — the
   keyframe translates by exactly -50% so the loop is seamless.
   ════════════════════════════════════════════════════════════════════ */

.trades-marquee {
  width: 100%;
  overflow: hidden;
  padding: 28px 0;
  margin-top: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: trades-marquee 45s linear infinite;
  will-change: transform;
}

.marquee-set {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.trade {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading);
  padding: 0 22px;
  line-height: 1.1;
}

.sep {
  color: var(--accent);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
}

@keyframes trades-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@media (max-width: 640px) {
  .marquee-track { animation-duration: 25s; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — 4 Big Wins (asymmetric numbered grid)
   ════════════════════════════════════════════════════════════════════
   Two-column grid: 280px head column on the left (compact H2 + lede),
   then a vertically-stacked list of 4 numbered "wins" on the right.
   Each win separated by full-viewport-width hairlines that bleed past
   the container edges. Rendered on .panel-dark (dark navy bg) so the
   numbered orange accents pop.
   ════════════════════════════════════════════════════════════════════ */

.wins-wrap {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.wins-head h2 {
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.wins-head .lede {
  font-size: 17px;
  margin-bottom: 0;
}

.wins-grid {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
}

/* Full-viewport-width hairline below the last win — sits at the visual
   end of the section regardless of container constraints. */
.wins-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.win {
  background: transparent;
  padding: 28px 0;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 185px;
}

/* Full-viewport-width hairline ABOVE each win (except the first — the
   section's top edge already serves as that boundary). */
.win::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.win:first-child::before { display: none; }

.win-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--accent);
  margin-bottom: 14px;
}

.win-head {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 12px;
}

.win-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.52;
}

@media (max-width: 880px) {
  .wins-wrap { grid-template-columns: 1fr; gap: 40px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Brain Dump
   ════════════════════════════════════════════════════════════════════
   Five differentiated visual cards (receipt, phone note, email, torn
   paper, to-do list) overlap like a scraped-up pile, then choreograph
   into the phone at the bottom of the section as the user scrolls
   exit. Each card has its OWN visual treatment (paper texture / Notes
   chrome / inbox row / clipping mask) — they're NOT the same card with
   different content.

   Animation choreography: cards use position:sticky to pile at the top
   of the viewport, then scale + translate via @keyframes triggered by
   a JS scroll listener (named view-timelines aren't reliable in iOS
   Safari 26). Phone-svg sits at the section's bottom as the
   destination.

   Phone mockup is bundled here because it's tightly coupled to this
   section's animation choreography.
   ════════════════════════════════════════════════════════════════════ */

.braindump {
  background: var(--canvas-alt);
  padding-block: var(--section-pad);
  position: relative;
  overflow: visible;
}
.braindump h2 {
  text-align: center;
  max-width: 16ch;
  margin: 0 auto 72px;
  font-size: 64px;
  line-height: 0.98;
}

.braindump-stage {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 0 32px;
  perspective: 1200px;
}

/* Base card — visual treatment differs per-type below. Sticky pins
   each card to the upper-middle of viewport during scroll so the
   shrink-into-phone choreography has breathing room. */
.dump-item {
  position: sticky;
  top: 200px;
  z-index: 10;
  font-size: 15px;
  line-height: 1.42;
  color: var(--heading);
  padding: 18px 22px;
  filter:
    drop-shadow(0 12px 26px rgba(15, 20, 36, 0.16))
    drop-shadow(0 2px 5px rgba(15, 20, 36, 0.10));
  transition: filter 280ms ease;
  will-change: transform, opacity, filter;
}
.dump-item:hover {
  filter:
    drop-shadow(0 20px 40px rgba(15, 20, 36, 0.22))
    drop-shadow(0 4px 8px rgba(15, 20, 36, 0.12));
  z-index: 50;
}

.dump-tag {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 6px;
}
.dump-text {
  display: block;
  color: var(--heading);
  font-weight: 500;
  font-size: 15px;
}

/* ─── 1 · RECEIPT (In your van) — narrow paper, scalloped bottom edge ─── */
.dump-item--receipt {
  background: #FFFFFF;
  width: 320px;
  padding: 14px 22px 32px;
  font-feature-settings: "tnum";
  --scallop: 6px;
  mask:
    radial-gradient(circle var(--scallop) at 16px 100%, transparent 96%, #000 100%) 0 100% / 32px 12px repeat-x,
    linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat;
  -webkit-mask:
    radial-gradient(circle var(--scallop) at 16px 100%, transparent 96%, #000 100%) 0 100% / 32px 12px repeat-x,
    linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat;
}
.dump-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--muted);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.dump-chrome-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ─── 2 · PHONE NOTE (In your phone) — Notes-app frame ─── */
.dump-item--note {
  background: #FFFDF5;
  width: 340px;
  border-radius: var(--radius-md);
  padding: 0 0 18px;
  overflow: hidden;
}
.dump-item--note .dump-chrome {
  background: var(--canvas-alt);
  margin: 0 0 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.dump-item--note .dump-chrome-pills { display: flex; gap: 4px; }
.dump-item--note .dump-chrome-pills span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
}
.dump-item--note .dump-chrome-pills span:first-child {
  background: var(--accent);
  opacity: 0.8;
}
.dump-item--note .dump-tag,
.dump-item--note .dump-text { padding: 0 18px; }

/* ─── 3 · EMAIL (In your inbox) — inbox row look ─── */
.dump-item--email {
  background: #FFFFFF;
  width: 400px;
  border-radius: var(--radius-md);
  padding: 18px 22px 18px 70px;
}
.dump-item--email::before {
  content: "MW";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-deep-blue);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.dump-item--email::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-sky-blue);
  box-shadow: 0 0 0 3px rgba(31, 161, 251, 0.18);
}

/* ─── 4 · TORN PAPER (In the back of your mind) — jagged edges + thought mark ─── */
.dump-item--mind {
  background: linear-gradient(180deg, #F6F1E5 0%, #ECE5D3 100%);
  width: 340px;
  padding: 22px 26px 24px;
  clip-path: polygon(
    2% 5%, 8% 1%, 18% 4%, 28% 0%, 40% 3%, 52% 0%, 64% 4%, 76% 1%, 86% 3%, 95% 0%, 100% 6%,
    98% 22%, 100% 40%, 99% 58%, 100% 76%,
    96% 94%, 86% 99%, 72% 96%, 58% 100%, 42% 97%, 26% 100%, 12% 96%, 4% 99%, 0% 86%,
    2% 68%, 0% 50%, 3% 32%, 0% 14%
  );
}
.dump-item--mind::before {
  content: "?";
  position: absolute;
  top: 10px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--heading);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 112, 0, 0.4);
}

/* ─── 5 · TO-DO (On your to-do list) — lined notebook page with checkbox ─── */
.dump-item--todo {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      rgba(15, 20, 36, 0.07) 23px,
      rgba(15, 20, 36, 0.07) 24px
    ),
    #FBF7EC;
  width: 380px;
  border-radius: var(--radius-md);
  padding: 18px 24px 18px 64px;
}
.dump-item--todo::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.dump-item--todo::after {
  content: "";
  position: absolute;
  left: 50px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--accent-red);
  opacity: 0.4;
}

/* Rest positions — vertical stack with light rotation + horizontal
   offsets that converge during the shrink-into-phone animation.
   Explicit z-index per card forces receipt (1) at back, to-do (5) at
   front. */
.dump-item:nth-child(1) { transform: rotate(-2.2deg); margin-left: 0;    margin-right: auto; z-index: 11; }
.dump-item:nth-child(2) { transform: rotate(1.8deg);  margin-left: auto; margin-right: 8px;  z-index: 12; }
.dump-item:nth-child(3) { transform: rotate(-1.4deg); margin-left: 40px; margin-right: auto; z-index: 13; }
.dump-item:nth-child(4) { transform: rotate(2.4deg);  margin-left: auto; margin-right: 0;    z-index: 14; }
.dump-item:nth-child(5) { transform: rotate(-0.8deg); margin-left: 20px; margin-right: auto; z-index: 15; }

/* Scroll choreography keyframes — each card converges horizontally
   towards stage centre at peak shrink so all 5 land inside the phone
   screen's top 1/4 zone. Convergence values measured via Playwright at
   mobile 390×844; same values hold for desktop within tolerance.

   Applied via a JS scroll listener (named view-timelines work in
   Chromium but not in iOS Safari 26). The @keyframes are documentation
   of intent — see direction-1-lifted's scroll script for binding. */
@keyframes dump-flight-1 {  /* receipt */
  0%,  32% { transform: rotate(-2.2deg) translate(0, 0)        scale(1);    opacity: 1; }
  41%      { transform: rotate(-1.2deg) translate(11px, 12px)  scale(0.55); opacity: 0.92; }
  49%      { transform: rotate(0deg)    translate(23px, 24px)  scale(0.10); opacity: 0.30; }
  52%      { transform: rotate(0deg)    translate(23px, 28px)  scale(0.04); opacity: 0; }
  100%     { transform: rotate(0deg)    translate(23px, 28px)  scale(0.04); opacity: 0; }
}
@keyframes dump-flight-2 {  /* note */
  0%,  32% { transform: rotate(1.8deg)  translate(0, 0)        scale(1);    opacity: 1; }
  41%      { transform: rotate(0.9deg)  translate(-4px, 12px)  scale(0.55); opacity: 0.92; }
  49%      { transform: rotate(0deg)    translate(-9px, 24px)  scale(0.10); opacity: 0.30; }
  52%      { transform: rotate(0deg)    translate(-9px, 28px)  scale(0.04); opacity: 0; }
  100%     { transform: rotate(0deg)    translate(-9px, 28px)  scale(0.04); opacity: 0; }
}
@keyframes dump-flight-3 {  /* email */
  0%,  32% { transform: rotate(-1.4deg) translate(0, 0)        scale(1);    opacity: 1; }
  41%      { transform: rotate(-0.6deg) translate(-6px, 12px)  scale(0.55); opacity: 0.92; }
  49%      { transform: rotate(0deg)    translate(-12px, 24px) scale(0.10); opacity: 0.30; }
  52%      { transform: rotate(0deg)    translate(-12px, 28px) scale(0.04); opacity: 0; }
  100%     { transform: rotate(0deg)    translate(-12px, 28px) scale(0.04); opacity: 0; }
}
@keyframes dump-flight-4 {  /* mind */
  0%,  32% { transform: rotate(2.4deg)  translate(0, 0)        scale(1);    opacity: 1; }
  41%      { transform: rotate(1.2deg)  translate(-10px, 12px) scale(0.55); opacity: 0.92; }
  49%      { transform: rotate(0deg)    translate(-20px, 24px) scale(0.10); opacity: 0.30; }
  52%      { transform: rotate(0deg)    translate(-20px, 28px) scale(0.04); opacity: 0; }
  100%     { transform: rotate(0deg)    translate(-20px, 28px) scale(0.04); opacity: 0; }
}
@keyframes dump-flight-5 {  /* todo */
  0%,  32% { transform: rotate(-0.8deg) translate(0, 0)       scale(1);    opacity: 1; }
  41%      { transform: rotate(-0.6deg) translate(-4px, 12px) scale(0.55); opacity: 0.92; }
  49%      { transform: rotate(0deg)    translate(-8px, 24px) scale(0.10); opacity: 0.30; }
  52%      { transform: rotate(0deg)    translate(-8px, 28px) scale(0.04); opacity: 0; }
  100%     { transform: rotate(0deg)    translate(-8px, 28px) scale(0.04); opacity: 0; }
}

/* Phone destination zone — sits below cards in the same section. */
.dump-phone-zone {
  margin-top: 96px;
  text-align: center;
  position: relative;
}
.dump-phone-zone > * { position: relative; z-index: 1; }

.dump-phone-text {
  margin: 0 auto;
  padding: 0 8px;
}
.dump-phone-text h2 {
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 auto 22px;
  max-width: 18ch;
}
.dump-phone-text .lede {
  font-size: 22px;
  color: var(--body);
  max-width: 44ch;
  margin: 0 auto;
}

/* Voice-wave bars — above + below the headline, suggesting voice
   flowing to/from the phone mic. Always-on continuous pulse with
   staggered delays for an L→R ripple. */
.voice-wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 56px;
  margin: 0 auto;
  padding: 0;
}
.voice-wave--above { margin: 72px auto 56px; }
.voice-wave--below { margin: 56px auto 8px; }
.voice-wave span {
  display: block;
  width: 4px;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transform-origin: center;
  opacity: 0.9;
  animation: voice-pulse 1.4s cubic-bezier(.45, .05, .55, .95) infinite;
}
.voice-wave span:nth-child(1)  { animation-delay: 0.00s; }
.voice-wave span:nth-child(2)  { animation-delay: 0.05s; }
.voice-wave span:nth-child(3)  { animation-delay: 0.10s; }
.voice-wave span:nth-child(4)  { animation-delay: 0.15s; }
.voice-wave span:nth-child(5)  { animation-delay: 0.20s; }
.voice-wave span:nth-child(6)  { animation-delay: 0.25s; }
.voice-wave span:nth-child(7)  { animation-delay: 0.30s; }
.voice-wave span:nth-child(8)  { animation-delay: 0.35s; }
.voice-wave span:nth-child(9)  { animation-delay: 0.40s; }
.voice-wave span:nth-child(10) { animation-delay: 0.45s; }
.voice-wave span:nth-child(11) { animation-delay: 0.50s; }
.voice-wave span:nth-child(12) { animation-delay: 0.55s; }
.voice-wave span:nth-child(13) { animation-delay: 0.60s; }
.voice-wave span:nth-child(14) { animation-delay: 0.65s; }
.voice-wave span:nth-child(15) { animation-delay: 0.70s; }
.voice-wave span:nth-child(16) { animation-delay: 0.75s; }
.voice-wave span:nth-child(17) { animation-delay: 0.80s; }
.voice-wave span:nth-child(18) { animation-delay: 0.85s; }
.voice-wave span:nth-child(19) { animation-delay: 0.90s; }
.voice-wave span:nth-child(20) { animation-delay: 0.95s; }
.voice-wave span:nth-child(21) { animation-delay: 1.00s; }
.voice-wave span:nth-child(22) { animation-delay: 1.05s; }
.voice-wave span:nth-child(23) { animation-delay: 1.10s; }
.voice-wave span:nth-child(24) { animation-delay: 1.15s; }
/* Fade outer bars so wave reads as a focused band, not a bar chart */
.voice-wave span:nth-child(1),
.voice-wave span:nth-child(24) { opacity: 0.30; }
.voice-wave span:nth-child(2),
.voice-wave span:nth-child(23) { opacity: 0.45; }
.voice-wave span:nth-child(3),
.voice-wave span:nth-child(22) { opacity: 0.60; }
.voice-wave span:nth-child(4),
.voice-wave span:nth-child(21) { opacity: 0.75; }

@keyframes voice-pulse {
  0%, 100% { transform: scaleY(0.22); }
  50%      { transform: scaleY(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-wave span { animation: none; transform: scaleY(0.5); }
}

/* Handoff arrow at the bottom of the section — points to next section */
.dump-handoff {
  margin-top: 72px;
  padding-bottom: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.dump-handoff-arrow {
  display: block;
  font-size: 28px;
  margin-top: 12px;
  color: var(--accent);
  line-height: 1;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Phone mockup — destination for the brain-dump card flight. */
.phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.phone-svg {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(15, 20, 36, 0.22));
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Daily Brief (cream + photo bg + phone)
   ════════════════════════════════════════════════════════════════════
   Bidirectional cream gradient over a photo background: solid cream at
   top + bottom, photo visible in the middle band. Gradient stops use
   fluid `calc(Xpx + Yvw)` interpolation (no media-query break) so the
   stops scale smoothly between 320–1920px viewports.

   Grid: 0.9fr heading column / 1.1fr phone mockup column. Phone has
   heavier drop shadow (40px blur) than the brain-dump phone because
   this one floats on a busier photo backdrop.
   ════════════════════════════════════════════════════════════════════ */

.brief-section {
  position: relative;
  background-color: var(--canvas);
  background-image:
    linear-gradient(to bottom,
      rgba(242, 237, 226, 1.00) 0,
      rgba(242, 237, 226, 1.00) calc(228px + 5.7vw),
      rgba(242, 237, 226, 0.55) calc(307px + 8.6vw),
      rgba(242, 237, 226, 0.00) calc(413px + 9.5vw)),
    linear-gradient(to top,
      rgba(242, 237, 226, 1.00) 0,
      rgba(242, 237, 226, 1.00) calc(139px + 2.9vw),
      rgba(242, 237, 226, 0.55) calc(248px + 5.7vw),
      rgba(242, 237, 226, 0.00) calc(374px + 6.7vw)),
    url("photos/section-5-site-background.png");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: top left, bottom left, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  overflow: hidden;
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: center;
  margin-top: 48px;
}

.brief-section h2 {
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 22ch;
  margin: 0 auto 22px;
  text-align: center;
  text-wrap: balance;
}
.brief-section .lede {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 44ch;
  text-wrap: balance;
}

.brief-callout {
  margin: 70px auto 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--heading);
  line-height: 1.55;
  max-width: 44ch;
  text-align: center;
  text-wrap: balance;
}

.brief-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.brief-phone-svg {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  filter:
    drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45))
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
}

/* Unified mobile size for BOTH phones (brain-dump + brief) — placed
   in this file because brief-phone-svg is defined here. Source-order
   wins against the .brief-phone-svg desktop rule above. */
@media (max-width: 960px) {
  .phone-svg, .brief-phone-svg { width: 260px; }
  .brief-grid { grid-template-columns: 1fr; gap: 48px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — PDFs section (rendered emerald-branded stack)
   ════════════════════════════════════════════════════════════════════
   Three angled PDF document cards stacked on the right; heading +
   lede on the left. Each card is a FAITHFUL render of the real A4
   PDF templates (emerald `#1FB44A` / slate `#2C3E50` / Helvetica) so
   visitors see what they'll actually generate from the chat.

   The PDF template visual identity is deliberately frozen
   (`--pdf-accent` is hardcoded to emerald, not the brand orange) —
   matches the PDF templates that ship at production. See
   wiki/decisions/brand-overhaul-plan.md "PDF templates excluded from
   D1 rollout" for why.

   The PDF document chrome (.pdf-real.*) is scoped under `.pdf-real` so
   the generic class names (.header / .meta-bar / .parties / etc.) can't
   collide with anything else on the page.
   ════════════════════════════════════════════════════════════════════ */

.pdfs { background: var(--canvas-alt); }

.pdfs-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: center;
}

.pdfs h2 { font-size: 64px; max-width: 14ch; }

.pdf-stage {
  position: relative;
  min-height: 460px;
}

/* Soft orange glow behind the PDF stack — radial gradient, blurred,
   centred on the stage. Makes the documents feel like they sit on a
   warm spotlight. */
.pdf-stage::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 112, 0, 0.16) 0%,
    transparent 65%);
  filter: blur(30px);
  z-index: 0;
}

/* Each card anchors at the stage's geometric centre (top/left = 50%)
   then the transform pulls back by its own half (-50%) plus a per-card
   offset. Offsets balanced around 0 so cluster centre = stage centre
   (prevents asymmetric drift). */
.pdf-doc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  aspect-ratio: 210 / 297;
  /* min-height: 0 forces aspect-ratio to win over min-content. Without
     this WebKit/iOS Safari stretches .pdf-doc to fit .pdf-real-scale's
     1122px height (min-height: auto default), then translate(-50%) pulls
     the giant box hundreds of px upward — ghost cards overlay later
     sections. Chromium clamps to aspect-ratio anyway; WebKit needs the
     explicit override. */
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 18px 50px rgba(15, 20, 36, 0.12),
    0 4px 14px rgba(15, 20, 36, 0.06);
  overflow: hidden;
}
.pdf-back   { transform: translate(calc(-50% + 36px), calc(-50% - 48px)) rotate(6deg);    opacity: 0.96; z-index: 1; }
.pdf-middle { transform: translate(calc(-50% - 30px), calc(-50% + 0px))  rotate(-4deg);   opacity: 0.99; z-index: 2; }
.pdf-front  { transform: translate(calc(-50% + 0px),  calc(-50% + 48px)) rotate(-0.5deg); z-index: 3; }

/* ─── REAL PDF chrome — emerald/slate/Helvetica ────────────────────
   Inner doc rendered at A4 native (794×1122 ≈ 96dpi). .pdf-real-scale
   scales down to 240px card. Hardcoded values match `pdf-defaults.js`
   in the server's PDF builder — these stay frozen even as the rest of
   the brand evolves. */
.pdf-real-scale {
  width: 794px;
  height: 1122px;
  transform: scale(0.302);
  transform-origin: top left;
}
.pdf-real,
.pdf-real * { margin: 0; padding: 0; box-sizing: border-box; }
.pdf-real {
  width: 794px;
  min-height: 1122px;
  background: #fff;
  padding: 14mm 18mm 22mm 18mm;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10pt;
  color: #2C3E50;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  --pdf-accent: #1FB44A;
}
.pdf-real .header {
  display: flex;
  align-items: center;
  gap: 16pt;
  padding-bottom: 10pt;
  border-bottom: 2.5pt solid var(--pdf-accent);
  margin-bottom: 10pt;
}
.pdf-real .header-left { flex: 0 0 auto; display: flex; align-items: center; }
.pdf-real .header-logo { width: 64pt; height: 64pt; display: block; }
.pdf-real .header-business {
  flex: 1 1 auto;
  text-align: center;
  font-size: 16pt; font-weight: 700; color: #2C3E50;
}
.pdf-real .header-right { flex: 0 0 auto; text-align: right; }
.pdf-real .header-doc-type {
  font-size: 20pt; font-weight: 700;
  color: var(--pdf-accent);
  letter-spacing: 1pt;
  white-space: nowrap;
}
.pdf-real .meta-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 8pt 12pt;
  background: #F8F8F8;
  border-radius: 3pt;
  font-size: 9pt;
  margin-bottom: 14pt;
}
.pdf-real .meta-item span { font-weight: 600; }
.pdf-real .meta-item:nth-child(2) { text-align: center; }
.pdf-real .meta-item:last-child { text-align: right; }
.pdf-real .parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24pt;
  margin-top: 6pt;
  margin-bottom: 20pt;
}
.pdf-real .party-label {
  font-size: 8pt; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8pt;
  color: var(--pdf-accent);
  margin-bottom: 6pt;
}
.pdf-real .party-name { font-weight: 700; font-size: 10pt; margin-bottom: 2pt; }
.pdf-real .party-detail { font-size: 9pt; color: #555; line-height: 1.6; }
.pdf-real .job-description {
  margin-bottom: 14pt;
  padding: 10pt 12pt;
  background: #FAFAFA;
  border-left: 3pt solid var(--pdf-accent);
  border-radius: 0 3pt 3pt 0;
  font-size: 9.5pt;
  line-height: 1.5;
}
.pdf-real .job-description-label {
  font-size: 8pt; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8pt;
  color: var(--pdf-accent);
  margin-bottom: 4pt;
}
.pdf-real .line-items { width: 100%; border-collapse: collapse; margin-bottom: 14pt; }
.pdf-real .line-items thead th {
  background: var(--pdf-accent);
  color: #fff;
  font-size: 9pt; font-weight: 700;
  padding: 7pt 8pt;
  text-align: left;
  border-bottom: 1px solid var(--pdf-accent);
}
.pdf-real .line-items thead th:nth-child(2),
.pdf-real .line-items thead th:nth-child(3) { text-align: center; }
.pdf-real .line-items thead th:nth-child(4),
.pdf-real .line-items thead th:nth-child(5) { text-align: right; }
.pdf-real .line-items tbody td {
  font-size: 9pt;
  padding: 6pt 8pt;
  border-bottom: 0.5px solid #DDD;
  vertical-align: top;
}
.pdf-real .line-items tbody td:nth-child(2),
.pdf-real .line-items tbody td:nth-child(3) { text-align: center; }
.pdf-real .line-items tbody td:nth-child(4),
.pdf-real .line-items tbody td:nth-child(5) { text-align: right; }
.pdf-real .line-items tbody tr:last-child td { border-bottom: 1px solid #DDD; }
.pdf-real .totals-wrapper { display: flex; justify-content: flex-end; margin-bottom: 18pt; }
.pdf-real .totals-table { width: 220pt; }
.pdf-real .totals-row {
  display: flex;
  justify-content: space-between;
  padding: 4pt 0;
  font-size: 10pt;
}
.pdf-real .totals-row.grand {
  border-top: 1.5pt solid var(--pdf-accent);
  margin-top: 4pt;
  padding-top: 8pt;
}
.pdf-real .totals-row.grand .totals-label,
.pdf-real .totals-row.grand .totals-value {
  font-size: 14pt; font-weight: 700;
  color: var(--pdf-accent);
}
.pdf-real .section { margin-bottom: 18pt; }
.pdf-real .section-heading {
  font-size: 14pt; font-weight: 700;
  color: #2C3E50;
  margin-bottom: 6pt;
  padding-bottom: 4pt;
  border-bottom: 1px solid #E5E5E5;
}
.pdf-real .section-body { font-size: 9pt; line-height: 1.55; }
.pdf-real .bank-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3pt 12pt;
  font-size: 9pt;
}
.pdf-real .bank-label { font-weight: 600; }
.pdf-real .footer {
  margin-top: auto;
  padding-top: 10pt;
  border-top: 1px solid #DDD;
  text-align: center;
  font-size: 8pt;
  color: #888;
}

/* Hover-driven fan-out — cards spread more dramatically when the
   stage is hovered. Respects prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .pdf-doc { transition: transform 380ms cubic-bezier(.2, .7, .2, 1); }
  .pdf-stage:hover .pdf-back   { transform: translate(calc(-50% + 60px), calc(-50% - 66px)) rotate(9deg); }
  .pdf-stage:hover .pdf-middle { transform: translate(calc(-50% - 54px), calc(-50% - 2px))  rotate(-7deg); }
  .pdf-stage:hover .pdf-front  { transform: translate(calc(-50% + 0px),  calc(-50% + 44px)) rotate(0deg) scale(1.02); }
}

@media (max-width: 960px) {
  .pdfs-grid { grid-template-columns: 1fr; gap: 32px; }
  .pdf-stage { min-height: 460px; }
  .pdfs h2 { text-align: center; max-width: none; }
  .pdfs .lede { text-align: center; margin-left: auto; margin-right: auto; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — 6 Relief cards (asymmetric magazine bento)
   ════════════════════════════════════════════════════════════════════
   6-column grid: 1 hero tile (span 6) + 2 medium (span 3 each) + 3
   small (span 2 each). Each tile is white-cream-card with a 28px outer
   radius and an inset rounded "chat fragment" rectangle inside that
   shows a synthesised cropped Claude.ai chat — the rounded inner
   element is deliberately smaller than the card padding so it sits
   visually framed by the card's white space.

   The fragment is dark (`#1a1f2e`) with cream text — research-driven
   restraint: no phone bezels, no input box, no avatars. The tile
   carries the framing; the fragment carries the semantic content.
   ════════════════════════════════════════════════════════════════════ */

.relief-section { background: var(--canvas); }

.relief-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  text-align: center;
}
.relief-head h2 {
  font-size: 64px;
  max-width: 18ch;
  margin-bottom: 0;
}
.relief-head .lede {
  margin-bottom: 0;
  max-width: 44ch;
}

/* Bento grid — 6-col asymmetric layout. */
.relief-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 0;
}

.relief-tile {
  background: var(--card);
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1), box-shadow 320ms ease;
}
.relief-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 20, 36, 0.06);
}

.relief-tile--hero {
  grid-column: span 6;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
.relief-tile--medium { grid-column: span 3; }
.relief-tile--small  { grid-column: span 2; }

/* Vertical rhythm within each card:
     card-pad 28 → eyebrow 16 → headline 14 → body 32 → fragment → card-pad 28
   Eyebrow + headline gaps tight (clear couplet); body-to-fragment is
   the biggest internal pause (fragment is a different content type
   so it gets the most breathing room). */
.relief-tile .relief-haunt {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
  margin-bottom: 16px;
}
.relief-tile h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin-bottom: 14px;
  color: var(--heading);
  text-wrap: balance;
}
.relief-tile p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  max-width: 42ch;
  margin-bottom: 32px;
}

/* Chat-fragment — synthesised dark "cropped Claude.ai chat" card. */
.relief-fragment {
  margin-top: auto;
  background: #1a1f2e;
  border-radius: 12px;
  padding: 18px 20px;
  color: #f0eadf;
  font-family: var(--font);
  line-height: 1.55;
}
.relief-fragment-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(240, 234, 223, 0.5);
  margin-bottom: 14px;
}
.relief-fragment-prompt::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.relief-fragment-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #f0eadf;
}
.relief-fragment-body strong { font-weight: 700; color: #fff; }
.relief-fragment-body em     { font-style: normal; color: rgba(240, 234, 223, 0.65); }

.relief-fragment-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(240, 234, 223, 0.08);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(240, 234, 223, 0.45);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.relief-fragment-meta-accent { color: var(--accent); }

.relief-fragment ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.relief-fragment li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(240, 234, 223, 0.08);
}
.relief-fragment li:last-child { border-bottom: 0; }
.relief-fragment li span:last-child {
  color: rgba(240, 234, 223, 0.85);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Hero tile: fragment fills the right column at a larger size,
   aligned within the column boundaries (not extended into the card's
   padding zone). */
.relief-tile--hero .relief-fragment {
  margin: 0;
  padding: 24px 26px;
  align-self: stretch;
}
.relief-tile--hero .relief-fragment-body {
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 880px) {
  .relief-bento { grid-template-columns: 1fr; gap: 16px; }
  .relief-tile,
  .relief-tile--hero,
  .relief-tile--medium,
  .relief-tile--small { grid-column: span 1; }
  /* Padding sides = padding bottom so the fragment's 3 snug-side gaps
     are identical (24px on all sides on mobile). */
  .relief-tile { padding: 28px 24px 24px; border-radius: 24px; }
  .relief-fragment { margin-top: auto; }
  .relief-tile--hero { padding: 32px 24px 24px; display: block; gap: 0; }
  .relief-tile--hero h3 { font-size: 32px; }
  .relief-tile--hero .relief-fragment {
    margin: 0;
    padding: 18px 20px;
    align-self: auto;
  }
  .relief-tile--hero .relief-fragment-body { font-size: 14px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — How It Works (Claude is the OS, TradeCraft is the app)
   ════════════════════════════════════════════════════════════════════
   Full-bleed dark section with blurred hero photo + dark+warm overlay
   for atmospheric backdrop. Numbered 3-step explainer grid up top, then
   the cartridge-in-slot visual: TradeCraft card sits ABOVE a Claude
   card; Claude has a clip-path notch cut into its top centre, and the
   TradeCraft card overlaps into that notch — reads as "TradeCraft
   slots into Claude" without literal tab geometry.

   This is the most geometrically detailed component in Cartridge. The
   clip-path math is hardcoded (no clean way to tokenise complex
   polygon paths) — but anchored at section-named selectors so it stays
   landing-only.
   ════════════════════════════════════════════════════════════════════ */

.how {
  background: var(--heading);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Blurred hero photo backdrop — atmospheric callback to the hero
   image. inset:-60px extends past the section edges so the blur
   falloff isn't visible at the seam. */
.how::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: url("photos/hero-electrician-van.png") center / cover no-repeat;
  filter: blur(48px) brightness(0.55) saturate(1.1);
  z-index: 0;
  pointer-events: none;
}

/* Warm radial top-right + linear dark fade for legibility. */
.how::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 112, 0, 0.22) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(15, 20, 36, 0.55) 0%, rgba(15, 20, 36, 0.70) 100%);
  z-index: 1;
  pointer-events: none;
}

.how > .container { position: relative; z-index: 2; }

.how h2 {
  color: #fff;
  font-size: 64px;
  max-width: 14ch;
}
.how .lede {
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
}

/* 3-step explainer grid — numbered steps in tinted glass cards. */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.how-step {
  padding: 20px 22px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  position: relative;
  transition: background 280ms ease, transform 280ms cubic-bezier(.2, .7, .2, 1);
}
.how-step:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-4px);
}
.how-step-num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 8px;
  line-height: 0.95;
  display: block;
}
.how-step h3 {
  color: #fff;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.how-step p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
}
.how-step-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 112, 0, 0.4);
  transition: border-color 200ms ease;
}
.how-step-link:hover { border-bottom-color: var(--accent); }

@media (max-width: 880px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* ─── CARTRIDGE-IN-SLOT — TradeCraft card slots into Claude card ───
   TradeCraft (order 1, z 2) overlaps a notch cut into Claude's top
   centre (order 2, z 1). 8px gap between TradeCraft and notch edges
   shows the section background through, reinforcing the "slotted in"
   read. */
.how-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 56px auto 0;
  max-width: 760px;
  isolation: isolate;  /* contain stacking context */
}

.how-stack-claude {
  order: 2;            /* visually BELOW (but notch shows TradeCraft above) */
  z-index: 1;
  width: 100%;
  background: #faf9f5;
  padding: 162px 56px 56px;  /* notch depth 138 + 24 content gap */
  color: #141413;
  margin-top: 0;
  /* Rounded-rectangle clip-path with a rectangular notch (188px × 138px)
     cut from top-centre. Notch has 18px-radius inner-rounded floor
     corners. */
  clip-path: polygon(
    0 24px, 1.83px 14.81px, 7.03px 7.03px, 14.81px 1.83px, 24px 0,
    calc(50% - 188px) 0,
    calc(50% - 188px) 120px,
    calc(50% - 186.6px) 126.9px,
    calc(50% - 182.7px) 132.7px,
    calc(50% - 176.9px) 136.6px,
    calc(50% - 170px) 138px,
    calc(50% + 170px) 138px,
    calc(50% + 176.9px) 136.6px,
    calc(50% + 182.7px) 132.7px,
    calc(50% + 186.6px) 126.9px,
    calc(50% + 188px) 120px,
    calc(50% + 188px) 0,
    calc(100% - 24px) 0,
    calc(100% - 14.81px) 1.83px, calc(100% - 7.03px) 7.03px, calc(100% - 1.83px) 14.81px, 100% 24px,
    100% calc(100% - 24px),
    calc(100% - 1.83px) calc(100% - 14.81px), calc(100% - 7.03px) calc(100% - 7.03px), calc(100% - 14.81px) calc(100% - 1.83px), calc(100% - 24px) 100%,
    24px 100%,
    14.81px calc(100% - 1.83px), 7.03px calc(100% - 7.03px), 1.83px calc(100% - 14.81px), 0 calc(100% - 24px)
  );
  filter: drop-shadow(0 24px 32px rgba(15, 20, 36, 0.12));
}

.how-stack-claude-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #d97757;  /* Claude clay accent — not TradeCraft's brand orange */
  margin-bottom: 20px;
}
.how-stack-claude-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.how-stack-sparkle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.how-stack-claude-logo {
  height: 36px;
  width: auto;
  display: block;
}
.how-stack-claude-lede {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #30302e;
  margin-bottom: 24px;
  max-width: 32ch;
  text-wrap: balance;
}
.how-stack-claude-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5e5d59;
  font-family: "Inter", sans-serif;
}
.how-stack-claude-meta-sep { color: #c4c2b8; }

/* TradeCraft card — sits ABOVE Claude card via z-index. Heavy bottom
   corners mirror Claude's heavy top corners — that mirrored geometry
   IS the relationship; no literal tab/notch needed in the TC card. */
.how-stack-tradecraft {
  order: 1;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  background: var(--heading);
  color: #fff;
  border-radius: 18px;
  padding: 32px 26px 28px;
  margin-bottom: -130px;  /* overlap into Claude's notch */
  /* No box-shadow — would cast onto cream Claude shoulders inside the
     notch. Navy-on-cream contrast holds without one. */
}
.how-stack-tradecraft-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 20px;
}
.how-stack-tradecraft-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 22px;
}
/* Repaint TC logo for navy bg: text + hammer white, ribbon green +
   highlight orange keep source fills. */
.how-stack-tradecraft-logo .tc-text   { fill: #fff; }
.how-stack-tradecraft-logo .tc-hammer { fill: #fff; }

.how-stack-tradecraft-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
}
.how-stack-tradecraft-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
}

/* Mobile — narrower TC + smaller notch geometry so cream shoulders of
   Claude show on each side at small viewports. */
@media (max-width: 720px) {
  .how-stack { max-width: none; }
  .how-stack-claude {
    padding: 128px 28px 36px;  /* 108 notch + 20 content gap */
    clip-path: polygon(
      0 20px, 1.5px 12.3px, 5.86px 5.86px, 12.3px 1.5px, 20px 0,
      calc(50% - 138px) 0,
      calc(50% - 138px) 90px,
      calc(50% - 136.6px) 96.9px,
      calc(50% - 132.7px) 102.7px,
      calc(50% - 126.9px) 106.6px,
      calc(50% - 120px) 108px,
      calc(50% + 120px) 108px,
      calc(50% + 126.9px) 106.6px,
      calc(50% + 132.7px) 102.7px,
      calc(50% + 136.6px) 96.9px,
      calc(50% + 138px) 90px,
      calc(50% + 138px) 0,
      calc(100% - 20px) 0,
      calc(100% - 12.3px) 1.5px, calc(100% - 5.86px) 5.86px, calc(100% - 1.5px) 12.3px, 100% 20px,
      100% calc(100% - 20px),
      calc(100% - 1.5px) calc(100% - 12.3px), calc(100% - 5.86px) calc(100% - 5.86px), calc(100% - 12.3px) calc(100% - 1.5px), calc(100% - 20px) 100%,
      20px 100%,
      12.3px calc(100% - 1.5px), 5.86px calc(100% - 5.86px), 1.5px calc(100% - 12.3px), 0 calc(100% - 20px)
    );
  }
  .how-stack-claude-logo { height: 32px; }
  .how-stack-claude-lede { font-size: 19px; }
  .how-stack-tradecraft {
    width: 100%;
    max-width: 260px;
    padding: 28px 22px 24px;
    border-radius: 16px;
    margin-bottom: -100px;
  }
  .how-stack-tradecraft-logo { height: 30px; margin-bottom: 20px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Trades + Countries coverage
   ════════════════════════════════════════════════════════════════════
   Three blocks on cream-alt: 4-up trade portraits (3:4 photo cards) +
   trade-pill grid (10 trades on cream-card with thin borders) +
   country-pill grid (5 country flags with live/soon status). Closes
   with a "don't see your trade?" CTA pointing at the suggestion form.

   Trade and country pills are intentionally NON-INTERACTIVE — they're
   labels, not links. No hover lift, no transition.
   ════════════════════════════════════════════════════════════════════ */

.coverage { background: var(--canvas-alt); }
.coverage h2 { font-size: 56px; max-width: 14ch; }

.trade-portraits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 48px 0 64px;
}
.portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
}
.portrait-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Solid-fill placeholder until the real photo lands. */
.portrait-placeholder {
  width: 100%;
  height: 100%;
  background: var(--heading);
  font-size: 0;
}
.portrait-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--heading);
  background: var(--canvas);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.coverage-block { margin-top: 48px; }
.coverage-heading {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.coverage-heading h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--heading);
  font-weight: 700;
}

.trades-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.trade-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  /* Non-interactive label — no transition / hover. */
}

.countries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.country-pill {
  padding: 18px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  /* Non-interactive label — no transition / hover. */
}
.country-flag { margin-bottom: 8px; line-height: 0; }
.country-flag img {
  width: 44px;
  height: 33px;  /* 4:3 ratio — matches lipis flag-icons /4x3 */
  display: block;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(15, 20, 36, 0.08);
}
.country-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.country-status {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.country-pill.live {
  border-color: var(--accent-green);
  border-width: 2px;
}
.country-pill.live .country-status { color: var(--accent-green); }
.country-pill.soon { opacity: 0.6; }

.coverage-cta {
  margin-top: 36px;
  color: var(--body);
  font-size: 16px;
}
.coverage-cta a {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 720px) {
  .trade-portraits { grid-template-columns: repeat(2, 1fr); }
  .trades-grid     { grid-template-columns: repeat(3, 1fr); }
  .countries-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .trades-grid    { grid-template-columns: repeat(2, 1fr); }
  .countries-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Pricing (single-column ledger on panel-dark)
   ════════════════════════════════════════════════════════════════════
   Sits on .panel-dark (full-bleed navy). Vertical stack: H2 → lede →
   centred cream-alt price card → quieter "Here's the deal" footnote.
   Single tier — "On the house" while V01 is in launch.

   Price card uses --canvas-alt instead of --card so it has visual
   weight against the navy panel without box-shadow chrome (research
   showed all top indie/SaaS pricing cards lose the shadow on dark).
   ════════════════════════════════════════════════════════════════════ */

.price-card {
  background: var(--canvas-alt);
  border-radius: var(--radius-lg);
  padding: 44px 40px 28px;
  margin: 56px auto 0;
  max-width: 440px;
  text-align: center;
}

.price-tag {
  font-size: 84px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 6px;
  color: var(--heading);
}

.price-note {
  color: var(--body);
  font-size: 15px;
  margin-bottom: 36px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.price-card .btn {
  width: 100%;
  justify-content: center;
  padding: 18px 26px;
  font-size: 16px;
}

.price-claude {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* "Here's the deal" — flat text footnote on navy panel, not a sibling
   card. Eyebrow uses the all-caps · 0.16em · 800 voice shared with
   how-stack labels and pricing-later eyebrow. */
.pricing-later {
  margin-top: 56px;
  max-width: 56ch;
}
.pricing-later h3 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 800;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.pricing-later p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin-bottom: 10px;
}
.pricing-later p.later-quiet {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

@media (max-width: 960px) {
  .price-tag { font-size: 72px; }
  .price-card { padding: 36px 28px 24px; margin-top: 44px; }
  .pricing-later { margin-top: 44px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Sound Like You? (cream section, rounded portrait + flat checklist)
   ════════════════════════════════════════════════════════════════════
   Cream surface, container narrowed to 720px for readable list width.
   Rounded portrait card (4:3) sits between section title and a flat
   checklist (no card chrome — just green ✓ circles + hairlines between
   items + ink-coloured text).

   Photo placeholder: drop the real kitchen-table portrait at
   photos/sound-portrait.jpg.
   ════════════════════════════════════════════════════════════════════ */

.sound { background: var(--canvas); }
.sound > .container { max-width: 720px; }
.sound h2 {
  font-size: 64px;
  max-width: 14ch;
  margin-bottom: 40px;
}

.sound-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 48px;
  background: var(--canvas-alt);
}
.sound-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.you-list {
  background: transparent;
  border: none;
  padding: 0;
  list-style: none;
}
.you-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  color: var(--heading);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.you-list li:last-child { border-bottom: none; }

/* Green check circles — signal positive moments. */
.you-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

@media (max-width: 880px) {
  .sound-image { margin-bottom: 36px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Alex Story (founder section, signature sign-off)
   ════════════════════════════════════════════════════════════════════
   Cream-alt section, container narrowed to 720px for letter-style
   reading width. Multi-paragraph body prose at 18px / 1.62 line-height
   for slower long-form reading. Closes with the signature block: a
   circular 120px avatar on the left + name and role stacked on its
   right, left-aligned.

   Photo placeholder: drop the real founder photo at
   photos/alex-portrait.jpg.
   ════════════════════════════════════════════════════════════════════ */

.alex-story { background: var(--canvas-alt); }
.alex-story > .container { max-width: 720px; }
.alex-story h2 {
  font-size: 56px;
  max-width: 14ch;
  margin-bottom: 24px;
}

.alex-prose p {
  font-size: 18px;
  line-height: 1.62;
  color: var(--heading);
  margin-bottom: 20px;
}
.alex-prose p:last-child { margin-bottom: 0; }

/* Signature block — circular founder avatar + name + role.
   Left-aligned. */
.alex-prose .signature-block {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.alex-prose .signature-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--canvas) url("photos/alex-portrait.jpg") center / cover no-repeat;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.alex-prose .signature-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alex-prose .signature {
  margin: 0;
  font-size: 30px;
  color: var(--heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.alex-prose .signature strong {
  color: var(--heading);
  font-weight: 800;
}
.alex-prose .signature-role {
  margin: 0;
  font-size: 17px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .alex-prose .signature-avatar { width: 96px; height: 96px; }
  .alex-prose .signature { font-size: 24px; }
  .alex-prose .signature-role { font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Suggestion box ("Tell me what's missing")
   ════════════════════════════════════════════════════════════════════
   Cream-alt section, white card form, two fields (textarea + email)
   with sentence-case labels (NOT all-caps tracked labels — research
   showed no indie/SaaS contact form uses the eyebrow-style label
   convention; sentence-case reads as voice, not as form chrome).

   Textarea placeholder uses Buttondown's in-character-example pattern
   ("e.g. 'roofing isn't in there yet'") instead of echoing the label —
   models what good feedback looks like.

   Button copy "Send to Alex" + microcopy with categorical-reply
   promise ("tell you if I'm building it, parking it, or not the right
   fit") are voice-distinguishing moves — no other software form uses
   first-person founder voice this way per research.
   ════════════════════════════════════════════════════════════════════ */

.suggest { background: var(--canvas-alt); }
.suggest h2 { font-size: 56px; max-width: 16ch; }

.suggest-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
  margin-top: 36px;
  box-shadow: 0 8px 32px rgba(15, 20, 36, 0.04);
}

.suggest-box .field { margin-bottom: 22px; }

/* Sentence-case label — matches global h4 (16px / 700 / -0.01em). */
.suggest-box label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin-bottom: 10px;
}

.suggest-box textarea,
.suggest-box input[type="email"] {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 16px;       /* 16px is the iOS auto-zoom minimum — DO NOT reduce */
  color: var(--heading);
  background: var(--canvas);
  transition: border-color 200ms ease, background 200ms ease;
}
.suggest-box textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}
.suggest-box textarea:focus,
.suggest-box input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}
.suggest-box textarea::placeholder,
.suggest-box input::placeholder { color: var(--muted); }

.suggest-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  text-wrap: balance;
}

/* Submit-failure banner — mirrors shared.css `.feedback.error` so the landing
   page uses TradeCraft's canonical error treatment (danger-bg box, danger text).
   shared.css isn't loaded here, hence the scoped duplicate. */
.suggest-error {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--danger-bg);
  color: var(--danger);
}
.suggest-error[hidden] { display: none; }

/* Confirmation view — swaps in for the form after a successful send.
   Mirrors the green-check "positive" treatment used by .trust-check. */
.suggest-success {
  text-align: center;
  padding: 14px 0 6px;
  animation: suggestSuccessIn 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.suggest-success-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 0 6px rgba(31, 180, 74, 0.12);
}
.suggest-success h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 12px;
}
.suggest-success p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 auto;
}
.suggest-again {
  margin-top: 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 4px;
}
.suggest-again:hover { text-decoration: underline; }

@keyframes suggestSuccessIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .suggest-success { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Trust strip ("What I promise")
   ════════════════════════════════════════════════════════════════════
   Cream surface. Heading uses `.accent-green-word` on "promise" (green
   = trust/safety in the brand). Three "promise" items in a vertical
   list — small green ✓ circle on the left + headline + detail. Items
   are NON-INTERACTIVE (no hover lift) — they're statements, not links.
   ════════════════════════════════════════════════════════════════════ */

.trust-strip { background: var(--canvas); }
.trust-strip h2 { font-size: 56px; max-width: 14ch; }

.trust-list { margin-top: 36px; }

.trust-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  align-items: flex-start;
  /* No transition / hover — promise statements are not interactive. */
}
.trust-item:last-child { border-bottom: none; }

.trust-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
  box-shadow: 0 0 0 3px rgba(31, 180, 74, 0.12);
}

.trust-headline {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--heading);
}

.trust-detail {
  font-size: 16px;
  color: var(--body);
  line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Final CTA (closing crescendo)
   ════════════════════════════════════════════════════════════════════
   Full-bleed dark with blurred photo bg + warm-only overlay — same
   atmospheric pattern as .how. Replaces an earlier orange+blue
   cross-radial that read as synthwave/AI-product (off-brand for a
   tradesperson tool).

   H2 at 80px display is the page's largest single moment — kept just
   below the Hero H1's 76px so the closing crescendo doesn't overshoot
   the opening note. Button uses cream-card on hover (panel-dark
   override would flip to white, but Final CTA's button explicitly
   uses cream for richer warmth).
   ════════════════════════════════════════════════════════════════════ */

.final-cta {
  --section-pad: var(--section-pad-xl);
  background: var(--heading);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Solid navy. The earlier blurred-photo + warm-radial overlays read as
   too atmospheric for a closing CTA — flat navy reads cleaner. */

.final-cta h2 {
  color: #fff;
  font-size: 80px;
  max-width: 14ch;
  margin: 0 auto 24px;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.final-cta .lede {
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  max-width: 50ch;
  margin: 0 auto 40px;
}

.final-cta .btn {
  background: var(--accent);
  color: var(--heading);
  border-color: var(--accent);
  font-size: 17px;
  padding: 20px 32px;
}
/* Override the global .panel-dark .btn:hover (white-bg) — Final CTA
   uses cream-card on hover for a warmer closing moment. */
.final-cta .btn:hover {
  background: var(--card);
  color: var(--heading);
  border-color: var(--card);
}

@media (max-width: 880px) {
  /* .final-cta padding handled by variable-driven --section-pad — the
     loose rung scales automatically across breakpoints. */
  .final-cta h2 { font-size: 56px; }
}
@media (max-width: 640px) {
  .final-cta h2 { font-size: 44px; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Footer
   ════════════════════════════════════════════════════════════════════
   Minimal footer: brand line + 4-link cluster (legal + social) +
   warm "have a lovely day" copyright. Single zone, no column matrix
   (research showed indie/SaaS footers that scaled INTO column matrices
   — SavvyCal, Transistor — lose the indie feel; we deliberately stay
   single-zone).

   Cream surface; thin border-top separates from final-cta dark above.
   Stacks vertically below 640px.
   ════════════════════════════════════════════════════════════════════ */

footer {
  padding: 56px 0 40px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
  background: var(--canvas);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin-bottom: 20px;
}

.footer-brand-line {
  font-size: 14px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 12px 22px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--body);
  font-weight: 500;       /* matches .nav-links a — page-wide nav-link weight */
  font-size: 14px;
  transition: color 180ms ease;
}
.footer-links a:hover { color: var(--accent); }

/* Warm copyright row — Buttondown's "have a lovely day" micro-touch.
   Italic muted, low-key, sits below the legal row. */
.footer-meta { display: flex; }
.footer-copyright {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 640px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════════════════════
   CARTRIDGE — Global responsive overrides
   ════════════════════════════════════════════════════════════════════
   Cross-cutting media-query block — runs LAST in the concat so it
   overrides per-component rules. Sets section padding rung +
   container padding + cross-section H2 + lede scales at each
   breakpoint.

   Mobile breakpoints: ≤960px → md rung / 28px container pad / 48px h2
                       ≤640px → sm rung / 20px container pad / 38px h2
                       ≤420px → xs rung / 16px container pad
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  :root { --section-pad: var(--section-pad-md); }
  .container, .container--wide, .narrow { padding: 0 28px; }
  h2,
  .braindump h2, .brief-section h2, .pdfs h2, .relief-head h2,
  .how h2, .fit h2, .coverage h2, .sound h2, .alex-story h2,
  .suggest h2, .trust-strip h2, .dump-phone-text h2,
  .pricing h2 { font-size: 48px; }
  .final-cta h2 { font-size: 56px; }
  .lede { font-size: 19px; }
  .price-tag { font-size: 96px; }
}

@media (max-width: 640px) {
  :root { --section-pad: var(--section-pad-sm); }
  .container, .container--wide, .narrow { padding: 0 20px; }
  h2,
  .braindump h2, .brief-section h2, .pdfs h2, .relief-head h2,
  .how h2, .fit h2, .coverage h2, .sound h2, .alex-story h2,
  .suggest h2, .trust-strip h2, .dump-phone-text h2,
  .pricing h2 { font-size: 38px; line-height: 1.06; }
  .lede { font-size: 18px; }
  .braindump h2 { margin-bottom: 32px; }
  .final-cta h2 { font-size: 44px; }
  .price-tag { font-size: 56px; }
  .how-step-num { font-size: 44px; }

  /* Hero mobile: lock height to viewport-minus-nav so the trades
     marquee always docks at the visible-viewport bottom across mobile
     browser-chrome states. `height: 100svh` is small-viewport-height,
     accounts for collapsing toolbars. `overflow-x: clip` keeps the
     marquee from bleeding horizontal scrollbar. */
  .hero h1 { font-size: 44px; line-height: 1.0; }
  .hero {
    padding: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }
  .hero-photo { flex: 1 1 auto; min-height: 0; }
  .hero-content { padding: 0 0 48px; }
  .hero-supporting { display: none; }
  .trades-marquee { padding: 16px 0; margin-top: 0; flex-shrink: 0; }
  .marquee-track { animation-duration: 25s; }
  .trade, .sep { font-size: 24px; }
  .trade { padding: 0 14px; }

  /* Nav mobile — hamburger replaces inline link list. CSS-only
     checkbox toggle controls the slide-down panel. */
  .nav-cluster { gap: 10px; }
  .nav-cluster .nav-links { display: none; }
  .btn-nav { padding: 8px 14px; font-size: 13px; }
  .hamburger { display: flex; }
  .nav-toggle:checked ~ .container--wide .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .container--wide .hamburger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .container--wide .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-toggle:checked ~ .container--wide .nav-cluster .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    padding: 20px 24px 24px;
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
    gap: 18px;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(15, 20, 36, 0.08);
    z-index: 20;
  }
  .nav-toggle:checked ~ .container--wide .nav-cluster .nav-links a {
    color: var(--heading);
    padding: 6px 0;
    font-weight: 600;
  }

  /* Brain dump mobile: relax card widths, normal spacing, shorter
     flight distance (per-element rotation values reduced for mobile). */
  .braindump-stage { max-width: 100%; padding: 0 6px; }
  .dump-item { margin-bottom: 18px; max-width: 100%; top: 180px; }
  .dump-item--receipt { width: 86%; max-width: 320px; }
  .dump-item--note    { width: 92%; max-width: 340px; }
  .dump-item--email   { width: 100%; max-width: 380px; padding-left: 64px; }
  .dump-item--mind    { width: 88%; max-width: 320px; }
  .dump-item--todo    { width: 100%; max-width: 380px; padding-left: 60px; }
  .dump-item:nth-child(1) { transform: rotate(-2deg);   margin-left: 0;    margin-right: auto; }
  .dump-item:nth-child(2) { transform: rotate(1.5deg);  margin-left: auto; margin-right: 4px; }
  .dump-item:nth-child(3) { transform: rotate(-1deg);   margin-left: 12px; margin-right: auto; }
  .dump-item:nth-child(4) { transform: rotate(2deg);    margin-left: auto; margin-right: 0; }
  .dump-item:nth-child(5) { transform: rotate(-1deg);   margin-left: 8px;  margin-right: auto; }

  .dump-phone-zone { margin-top: 64px; }
  .dump-phone-text h2 { font-size: 44px; }
  .dump-phone-text .lede { font-size: 18px; margin-bottom: 0; }

  /* Voice-wave mobile: tighter spacing + smaller wave. */
  .voice-wave { height: 40px; gap: 5px; }
  .voice-wave span { width: 3px; }
  .voice-wave--above { margin: 48px auto 40px; }
  .voice-wave--below { margin: 40px auto 0; }
}

@media (max-width: 420px) {
  :root { --section-pad: var(--section-pad-xs); }
  .container, .container--wide, .narrow { padding: 0 16px; }
  .hero h1 { font-size: 38px; letter-spacing: -0.035em; }
  .hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn { width: 100%; justify-content: center; }
}
