/* ==========================================================================
   48h.dev — Design System
   "The Drawing" — an engineer's technical drawing of the offer, signed by Al.
   Blueprint / drafting-table on warm paper. Deep engineered teal, ink, mono
   drafting labels. Signature: the deal-card spec sheet + the titleblock.
   ========================================================================== */

:root {
  /* Color — drafting paper + engineered teal ink */
  --paper:  #F6F3EC;   /* warm drafting paper (not white, not cream-candy) */
  --paper-2:#EFEBE0;   /* deeper paper for panels */
  --card:   #FCFAF4;   /* near-white sheet laid on the paper */
  --ink:    #17211F;   /* warm near-black drafting ink */
  --ink-80: #3B4744;   /* body copy */
  /* Accent = deep navy-teal (pulled toward the logo's dark text, not poppy cyan) */
  --teal:   #16544F;   /* deep muted teal — links, accents (AA on paper) */
  --teal-deep:#0F3E3B; /* hover / pressed — nearly navy */
  --teal-bright:#1E6E68;/* the "bright" signal is still restrained */
  --grid:   rgba(22,84,79,.055); /* blueprint grid — much lighter now */
  --grid-strong: rgba(22,84,79,.11);
  --rule:   #D3CCBC;   /* pencil hairline rule on paper */
  --rule-2: #E1DBCC;   /* fainter rule */
  --mute:   #6B7570;   /* supporting text */
  --mute-2: #9A9587;   /* faded annotation */
  --ink-panel:#12201E; /* dark drafting panel (inverse sections) */
  --line:   var(--rule);   /* legacy alias */
  --line-dk:#2A3835;   /* hairlines on dark */

  /* Legacy signal aliases -> engineered teal (keeps old refs on-brand) */
  --signal: var(--teal);
  --signal-ink: var(--teal-deep);
  --signal-btn: var(--teal);
  --signal-btn-ink: #FCFAF4;
  --signal-on-dark: #2FC6C3;
  --gold: var(--teal);
  --wash: rgba(14,124,123,.08);

  /* Type — engineered geometric display + neutral body + mono drafting labels */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 2.9rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3.2vw, 4.1rem);

  /* Space */
  --gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  --section-y: clamp(3.5rem, 2.6rem + 5vw, 6.5rem);
  --maxw: 1180px;
  --radius: 2px;      /* drafting = crisp, near-square corners */
  --radius-lg: 3px;

  --shadow: 0 1px 0 var(--rule-2), 0 1px 2px rgba(23,33,31,.03);
  --shadow-lg: 0 1px 0 var(--rule), 0 14px 32px rgba(23,33,31,.07);
  --shadow-cyan: none;
  --grid-size: 28px;  /* blueprint grid pitch */
  --hard: 3px;        /* hard-shadow offset (dialled back from 5px) */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  overflow-x: hidden; /* safety net: never allow sideways scroll on mobile */
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  /* faint blueprint grid on the drafting paper */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--teal); color: var(--card); }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }
p  { color: var(--ink-80); }
.lead { font-size: var(--step-1); color: var(--ink-80); line-height: 1.55; }

/* Eyebrow = a drafting label / callout tag */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before {
  content: ""; width: 1.6em; height: 1px; background: var(--teal);
}
/* On dark ink panels, brighten the eyebrow to match the code chip */
.section--ink .eyebrow { color: var(--signal-on-dark); }
.section--ink .eyebrow::before { background: var(--signal-on-dark); }
/* accent word inside a heading — teal, underlined like a marked dimension */
.serif-accent { font-family: var(--display); font-style: normal; color: var(--teal-deep);
  text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: .12em; text-decoration-thickness: 2px; }

/* mono drafting annotation utility */
.anno { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--mute); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
/* dark drafting panel — like a section drawn on the back of the sheet */
.section--ink { background: var(--ink-panel); color: var(--card);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); }
.section--ink p { color: #C3CFCC; }
.section--ink h2, .section--ink h3 { color: var(--card); }
.section--paper2 { background: var(--paper-2); }
.section-head { max-width: 660px; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head p { margin-top: .9rem; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Buttons (engineered — sharp, bordered, no candy) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .8em 1.4em; border-radius: var(--radius);
  font-weight: 600; font-size: var(--step-0); font-family: var(--body);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap; position: relative;
}
.btn:active { transform: translateY(1px); }
/* primary = solid deep teal, paper text, hard ink edge + drafting corner tick */
.btn-primary { background: var(--teal); color: var(--card); border-color: var(--teal-deep);
  box-shadow: 3px 3px 0 var(--ink); }
.btn-primary:hover { background: var(--teal-deep); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.btn-primary:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(1px,1px); }
/* ghost = ink outline that fills on hover */
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--rule); }
.btn-ghost:hover { background: var(--ink); color: var(--card); box-shadow: 4px 4px 0 var(--rule); transform: translate(-1px,-1px); }
.section--ink .btn-ghost, .d-cta .btn-ghost { background: transparent; color: var(--card); border-color: var(--card); box-shadow: 3px 3px 0 rgba(255,255,255,.18); }
.section--ink .btn-ghost:hover { background: var(--card); color: var(--ink); }
.btn-lg { padding: .95em 1.8em; font-size: var(--step-1); }
.arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header (drawing sheet edge) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 1.5px 0 var(--ink); /* double-rule = drafting border */
}
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: .65rem; min-height: var(--header-h, 62px); }
/* Brand = logo image lockup */
.brand { display: inline-flex; align-items: center; gap: .55em; }
.brand img { height: 28px; width: auto; display: block; }
.brand .brand-logo { height: 28px; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav-links a { font-family: var(--body); font-size: var(--step--1); font-weight: 600; color: var(--ink-80); transition: color .15s; }
.nav-links a:hover { color: var(--teal-deep); }
.nav-links a.nav-cta { font-family: var(--body); font-weight: 600; padding: .55em 1.1em; color: var(--card); }
.nav-links a.nav-cta:hover { color: var(--card); }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--ink); border-radius: var(--radius); font-size: 1.2rem; line-height: 1; padding: .25em .5em; color: var(--ink); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px;
}
.section--ink a:focus-visible, .site-footer a:focus-visible,
.btn-primary:focus-visible { outline-color: var(--signal-on-dark); }

/* ---------- Hero (top of the drawing) ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2rem, 1.4rem + 3vw, 3.4rem) clamp(2.2rem, 1.6rem + 3.6vw, 3.8rem);
  border-bottom: 1px solid var(--ink);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  grid-template-areas:
    "head head"
    "left right";
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
/* left column owns voice-note + CTAs (stacked, tight) so the buttons sit
   right under the voice-note card — no dead space below it */
.hero-head { grid-area: head; }
.hero-left  { grid-area: left;  display: flex; flex-direction: column; gap: 1.4rem; max-width: 460px; align-self: stretch; }
.hero-right { grid-area: right; display: flex; flex-direction: column; align-self: stretch; }
.hero-right .deal { flex: 1 1 auto; display: flex; flex-direction: column; }
.hero-right .deal-body { flex: 1 1 auto; }
/* the "free preview" badge = a drafting revision tag */
.hero-badge {
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: .4em .9em; font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .02em; color: var(--teal-deep); box-shadow: 2px 2px 0 var(--rule); margin-bottom: 1.1rem;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero h1 {
  /* slightly tempered from the global step-4 so the headline doesn't dominate */
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.6rem);
  margin-top: -.05em;
}
.hero h1 em { font-style: normal; color: var(--teal-deep); }
.hero-sub { max-width: 46ch; margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.6rem; }
/* in the hero row, the parent .hero-left already provides the gap — no extra top margin */
.hero-actions--row { margin-top: 0; }
/* hero CTA group sits under the voice-note card; give it a matching card feel */
.hero-actions--row {
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--rule);
}
.hero-actions--row .btn-primary { flex: 0 0 auto; }
.hero-actions--row .hero-link   { margin-left: 0; }
.hero-actions--row .hero-fineline { width: 100%; margin-top: .75rem; }
/* lighter secondary CTA — a text link, doesn't compete with the primary button */
.hero-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--teal-deep);
  border-bottom: 1.5px solid transparent; padding-bottom: 1px; transition: border-color .15s ease; }
.hero-link:hover { border-color: var(--teal); }
.hero-link .arrow { transition: transform .15s ease; }
.hero-link:hover .arrow { transform: translateX(3px); }
.hero-meta { margin-top: 1.5rem; font-family: var(--mono); font-size: var(--step--1); color: var(--mute); display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: .45em; }
.hero-meta span::before { content: "\002B"; color: var(--teal); font-weight: 700; } /* drafting plus tick */
.hero-meta b { color: var(--ink); font-weight: 600; }
.hero-fineline { margin-top: 1rem; font-family: var(--mono); font-size: var(--step--1); color: var(--mute); }
code { font-family: var(--mono); font-size: .9em;
  background: rgba(14,124,123,.1); color: var(--teal-deep); padding: .1em .45em; border-radius: 2px; }
.section--ink code { background: rgba(47,198,195,.16); color: var(--signal-on-dark); }

/* ---------- Dimension line (⟵──── 48 HOURS ────⟶) ---------- */
.dimline { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0;
  font-family: var(--mono); font-size: var(--step--1); color: var(--teal-deep); letter-spacing: .02em; }
.dimline::before, .dimline::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--teal); position: relative; }
.dimline::before { box-shadow: none; }
.dimline .tick { position: relative; white-space: nowrap; }

/* ---------- Titleblock (the engineer's stamp) ---------- */
.titleblock {
  border: 1.5px solid var(--ink); background: var(--card); border-radius: var(--radius);
  font-family: var(--mono); font-size: var(--step--1); box-shadow: 3px 3px 0 var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
.titleblock > div { padding: .55rem .8rem; border-top: 1px solid var(--rule); }
.titleblock > div:nth-child(1), .titleblock > div:nth-child(2) { border-top: 0; }
.titleblock > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.titleblock .k { color: var(--mute); display: block; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; }
.titleblock .v { color: var(--ink); font-weight: 500; }
.titleblock .v .sig { font-family: var(--display); font-size: 1.15em; }

/* ---------- The Deal Card (spec drawing of the offer — SIGNATURE) ---------- */
.deal {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink); overflow: hidden;
}
.deal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem; border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono); font-size: var(--step--1); color: var(--mute);
  background: var(--paper-2); letter-spacing: .02em;
}
.deal-head .id { color: var(--ink); font-weight: 500; }
.deal-body { padding: 1rem clamp(1.1rem, 2.6vw, 1.5rem); }
.deal-line { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .8rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--rule); }
.deal-line:first-child { padding-top: 0; }
.deal-line .lbl { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.deal-line .val { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: var(--step-1); }
.deal-line .val small { font-family: var(--body); font-weight: 500; color: var(--mute); font-size: .7em; }
.deal-line .dim { font-family: var(--mono); font-size: var(--step--1); color: var(--teal-deep); white-space: nowrap; }
/* the headline deal statement */
.deal-hero { padding: .9rem clamp(1.1rem, 2.6vw, 1.5rem);
  border-bottom: 1.5px solid var(--ink); }
.deal-hero .big { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.8rem); line-height: 1.12; color: var(--ink); letter-spacing: -0.02em; }
.deal-hero .big em { font-style: normal; color: var(--teal-deep); }
.deal-hero .sub { margin-top: .4rem; color: var(--ink-80); font-size: var(--step-0); }
/* signature strip */
.deal-sign {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-top: 1.5px solid var(--ink); background: var(--paper-2);
  font-family: var(--mono); font-size: var(--step--1); color: var(--mute);
}
.deal-sign .who b { color: var(--ink); font-weight: 500; }
.deal-sign .mark { font-family: var(--display); font-size: 1.5em; color: var(--teal-deep); line-height: 1; transform: rotate(-4deg); }

/* ---------- Generic cards / grids ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: 2px 2px 0 var(--rule); transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--rule); }
.section--ink .card { background: #17262300; border: 1.5px solid var(--line-dk); box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.section--ink .card:hover { box-shadow: 5px 5px 0 rgba(0,0,0,.35); border-color: #38504B; }
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
/* icon tile -> a bordered index chip (drafting detail number) */
.card .ic { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center;
  border: 1.5px solid var(--teal); color: var(--teal-deep); background: rgba(14,124,123,.06);
  margin-bottom: 1rem; font-family: var(--mono); font-weight: 500; font-size: .95rem; }
.section--ink .card .ic { border-color: var(--signal-on-dark); color: var(--signal-on-dark); background: rgba(47,198,195,.1); }

/* ---------- Numbered steps (spec steps) ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.section--ink .step { border-color: var(--line-dk); }
.step-n { counter-increment: step; font-family: var(--mono); font-size: var(--step-1);
  color: var(--teal-deep); font-weight: 500; min-width: 3.6ch; }
.step-n::before { content: "[" counter(step, decimal-leading-zero) "]"; }
.step h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.step .note { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); margin-top: .5rem; }
.section--ink .step-n { color: var(--signal-on-dark); }

/* ---------- Deliverables checklist ---------- */
.checklist { list-style: none; display: grid; gap: .8rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.checklist .chk {
  width: 22px; height: 22px; border-radius: var(--radius); border: 1.5px solid var(--teal);
  background: transparent; color: var(--teal-deep); display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; margin-top: 1px;
}
.section--ink .checklist .chk { border-color: var(--signal-on-dark); color: var(--signal-on-dark); }
.checklist b { font-weight: 600; }
.checklist small { display: block; color: var(--mute); font-size: var(--step--1); }
/* Excluded item — a muted ✗ instead of a teal ✓ */
.checklist.checklist--excl .chk {
  border-color: var(--rule); color: var(--mute); background: transparent;
}
.checklist.checklist--excl li span:last-child { color: var(--ink-80); }

/* Included / Not-included, side by side */
.limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.limits-col h3 { font-family: var(--display); font-size: var(--step-1); font-weight: 600; margin-bottom: 1.2rem; }
.limits-col--excl h3 { color: var(--mute); }
@media (max-width: 720px) { .limits-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing (a spec sheet for the price) ---------- */
.price-card {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink); overflow: hidden; max-width: 540px; margin-inline: auto;
}
.price-top { padding: 2rem; border-bottom: 1.5px solid var(--ink); text-align: center; background: var(--paper-2); }
.price-anchor { color: var(--mute); text-decoration: line-through; font-size: var(--step-1); }
.price-now { font-family: var(--display); font-weight: 700; font-size: var(--step-4); color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.price-now small { font-size: var(--step-1); color: var(--mute); font-family: var(--mono); font-weight: 500; }
.price-flag { display:inline-block; margin-top:.9rem; font-family: var(--mono); font-size: var(--step--1); font-weight:500; color: var(--teal-deep);
  border: 1px solid var(--teal); padding:.3em .9em; border-radius: var(--radius); }
.price-body { padding: 1.8rem 2rem 2rem; }
.price-body .checklist { margin-bottom: 1.5rem; }
.price-care { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); text-align: center; margin-top: 1rem; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--rule); padding: 1.1rem 0;
}
.faq summary {
  font-family: var(--display); font-size: var(--step-1); font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--teal-deep); font-size: 1.4rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .8rem; color: var(--ink-80); }

/* ---------- Apply / form embed ---------- */
.apply-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.fillout-embed { width: 100%; min-height: 560px; background:var(--card); border:1.5px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--rule); overflow:hidden; }

/* ---------- Footer (drawing titleblock strip) ---------- */
.site-footer { background: var(--ink-panel); color: #B7C2BF; padding-block: clamp(3rem,5vw,4.5rem) 2rem; border-top: 1.5px solid var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); }
.site-footer p, .site-footer a, .site-footer li { color: #B7C2BF; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dk); }
.site-footer .brand { color: var(--card); }
.site-footer .brand b { color: var(--signal-on-dark); }
.site-footer h5 { color: var(--card); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.site-footer ul { list-style: none; display: grid; gap: .6rem; }
.site-footer a:hover { color: var(--signal-on-dark); }
.footer-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-family: var(--mono); font-size: var(--step--1); }

/* ---------- Misc ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.tag { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); border: 1px solid var(--rule); border-radius: var(--radius); padding: .3em .9em; }
.divider-note { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); letter-spacing:.02em; }

/* ---------- Example / demo pages ---------- */
.demo-hero { padding-block: clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--rule); }
.crumb { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); margin-bottom: 1rem; }
.crumb a:hover { color: var(--teal-deep); }
.demo-hero h1 { font-size: var(--step-3); margin: .4rem 0 1rem; max-width: 18ch; }
.persona { display:inline-flex; align-items:center; gap:.6em; font-family: var(--mono); font-size:var(--step--1); font-weight:500;
  color: var(--teal-deep); border: 1px solid var(--teal); border-radius: var(--radius); padding:.35em .9em; }

/* The pain trigger callout */
.trigger {
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
  padding: clamp(1.6rem,3vw,2.4rem); position: relative; box-shadow: var(--shadow-lg);
}
.trigger .q { font-size: var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.trigger blockquote { font-family: var(--display); font-size: var(--step-2); line-height:1.25; margin:.8rem 0 0; color:var(--paper); }
.trigger cite { display:block; margin-top:1rem; font-style:normal; font-size:var(--step--1); color:#AEB4BD; }

/* Before / after two-column transform */
.ba { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.ba-col { padding: clamp(1.4rem,3vw,2rem); }
.ba-col.before { background: var(--paper-2); }
.ba-mid { width:1px; background: var(--line); position:relative; }
.ba-mid span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--signal); color:#fff; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; box-shadow:var(--shadow); }
.ba-label { font-size:var(--step--1); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.5em; }
.ba-label.before { color: var(--mute-2); }
.ba-label.after  { color: var(--signal); }
.ba h4 { font-family:var(--body); font-size:var(--step--1); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); margin:1.4rem 0 .4rem; }
.ba h4:first-of-type { margin-top:0; }
.ba .before p { color: var(--mute-2); }
.ba .before .struck { text-decoration: line-through; text-decoration-color: rgba(200,90,70,.45); }
.ba .after p { color: var(--ink); }
.ba .after .hl { font-family:var(--display); font-size:var(--step-1); color:var(--ink); line-height:1.3; display:block; }

/* mock asset preview (site + pdf) */
.mock { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.mock-bar { background:var(--paper-2); border-bottom:1px solid var(--line); padding:.6rem .9rem; display:flex; align-items:center; gap:.45em; }
.mock-bar i { width:10px; height:10px; border-radius:50%; background:var(--line); display:inline-block; }
.mock-bar .url { margin-left:.6em; font-size:var(--step--1); color:var(--mute); }
.mock-body { padding: clamp(1.2rem,3vw,1.8rem); }
.mock-body .m-h1 { font-family:var(--display); font-size:var(--step-1); line-height:1.2; }
.mock-body .m-sub { color:var(--mute); font-size:var(--step--1); margin-top:.4rem; }
.mock-body .m-cta { display:inline-block; margin-top:1rem; background:var(--signal); color:#fff; font-size:var(--step--1); font-weight:600; padding:.5em 1.1em; border-radius:var(--radius); }
.mock-body .m-row { height:8px; background:var(--paper-2); border-radius:100px; margin-top:.7rem; }
.mock-body .m-row.s { width:70%; } .mock-body .m-row.xs { width:45%; }

@media (max-width: 760px) {
  .ba { grid-template-columns:1fr; }
  .ba-mid { width:auto; height:1px; }
  .ba-mid span { top:50%; }
}

/* ---------- Live demo sites (examples/demos/*) ---------- */
/* These represent CLIENT businesses. Each must feel native to its OWN niche —
   NOT like the 48h.dev drafting system. So `body.demo-page` opts out of the
   blueprint grid / hard-edge drafting look and restores a warm, rounded,
   niche-neutral base. Each demo then layers its own --d-accent + type on top.
   Only the thin "built by 48h.dev" banner keeps the 48h.dev styling. */
body.demo-page {
  background-color: #fff;
  background-image: none;                 /* no blueprint grid on client sites */
  font-family: var(--demo-body, "Inter", system-ui, sans-serif);
  color: #1c2733;
}
body.demo-page {
  --radius: 12px; --radius-lg: 16px;       /* rounded, friendly */
  --line: #E7E9EC; --rule: #E7E9EC; --rule-2: #EEF0F2;
  --ink: #1c2733; --ink-80: #43505c; --mute: #6b7580; --paper-2: #F6F7F9; --card: #fff;
  --shadow: 0 1px 2px rgba(20,30,40,.05), 0 10px 28px rgba(20,30,40,.08);
  --shadow-lg: 0 2px 8px rgba(20,30,40,.06), 0 24px 50px rgba(20,30,40,.12);
}
/* demo headings use the demo's own display face (default: a clean humanist sans) */
body.demo-page h1, body.demo-page h2, body.demo-page h3, body.demo-page h4 {
  font-family: var(--demo-display, "Inter", system-ui, sans-serif); font-weight: 700; letter-spacing: -0.01em;
}
body.demo-page .d-brand { font-family: var(--demo-display, inherit); }
/* soft, rounded demo cards with gentle shadows (not hard drafting boxes) */
body.demo-page .d-card { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); }
body.demo-page .d-card .d-ic { border-radius: 12px; border: 0;
  background: color-mix(in srgb, var(--d-accent, #2b7) 12%, transparent); color: var(--d-accent, #2b7); }
body.demo-page .d-btn { border-radius: 999px; border: 0; box-shadow: none; }
body.demo-page .d-btn.ghost { border: 1.5px solid currentColor; }
body.demo-page .d-price { border-bottom: 1px solid var(--line); }
body.demo-page .d-price .amt, body.demo-page .d-eyebrow { font-family: var(--demo-display, inherit); }
body.demo-page .checklist .chk { border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--d-accent, #2b7) 14%, transparent); color: var(--d-accent, #2b7); }
body.demo-page .d-split img { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body.demo-page .d-sec.alt { background: var(--paper-2); }
body.demo-page .d-foot { background: #10161d; border-top: 0; font-family: inherit; }
/* hero eyebrow chip back to soft rounded pill on demos */
body.demo-page .d-hero .d-eyebrow { border-radius: 999px; }

.demo-banner { background: var(--ink-panel); color: var(--card); font-family: var(--mono); font-size: var(--step--1);
  text-align: center; padding: .55rem 1rem; position: sticky; top: 0; z-index: 60; border-bottom: 1.5px solid var(--teal); }
.demo-banner a { color: var(--signal-on-dark); font-weight: 500; text-decoration: underline; }
.d-nav { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.d-brand { font-family: var(--display); font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: .5em; }
.d-brand .mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--d-accent, var(--signal)); color: #fff; font-size: 1.05rem; }
.d-nav-links { display: flex; gap: 1.6rem; list-style: none; font-size: var(--step--1); font-weight: 600; align-items: center; }
.d-nav-links a:hover { color: var(--d-accent, var(--signal)); }
.d-btn { display: inline-flex; align-items: center; gap: .5em; background: var(--d-accent, var(--signal));
  color: #fff; padding: .8em 1.4em; border-radius: 999px; font-weight: 700; }
.d-btn:hover { filter: brightness(1.08); }
.d-btn.ghost { background: transparent; color: var(--d-accent, var(--signal)); border: 1.5px solid currentColor; }
.d-hero { position: relative; color: #fff; min-height: 62vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; }
/* Stronger, directional scrim so any hero text stays readable on any photo */
.d-hero::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,18,24,.88) 0%, rgba(8,18,24,.55) 38%, rgba(8,18,24,.18) 70%, rgba(8,18,24,.30) 100%),
    linear-gradient(to right, rgba(8,18,24,.55), rgba(8,18,24,0) 62%); }
.d-hero-inner { position: relative; z-index: 1; padding-block: clamp(2rem,6vw,4rem); max-width: 60ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.d-hero h1 { color: #fff; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); max-width: 20ch; }
.d-hero p { color: #F1F4F5; font-size: var(--step-1); max-width: 46ch; margin-top: 1rem; }
.d-hero .d-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.d-hero .d-btn.ghost { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); backdrop-filter: blur(2px); }
.d-hero .d-btn.ghost:hover { background: rgba(255,255,255,.18); }
/* Eyebrow becomes a solid readable chip — never colored text floating on a photo */
.d-hero .d-eyebrow { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  color: #fff; padding: .4em .9em; border-radius: 100px; backdrop-filter: blur(4px);
  text-shadow: none; letter-spacing: .1em; }
.d-hero .d-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--d-accent, var(--signal-btn)); box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.d-eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-accent, var(--signal-ink)); }
.d-sec { padding-block: clamp(3rem,6vw,5rem); }
.d-sec.alt { background: var(--paper-2); }
.d-card { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.6rem; box-shadow: 3px 3px 0 var(--rule); }
.d-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.d-card .d-ic { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; margin-bottom: 1rem;
  border: 1.5px solid var(--d-accent, var(--teal)); color: var(--d-accent, var(--teal-deep)); font-size: 1.15rem; }
.d-price { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  border-bottom: 1px dashed var(--rule); padding: 1rem 0; }
.d-price:last-child { border-bottom: 0; }
.d-price .amt { font-family: var(--display); font-weight: 600; color: var(--d-accent, var(--teal-deep)); white-space: nowrap; }
.d-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.d-split img { border-radius: var(--radius); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--rule); }
.d-cta { background: var(--d-accent, var(--teal)); color: #fff; text-align: center; }
.d-cta h2, .d-cta p { color: #fff; }
.d-cta .d-btn { background: var(--card); color: var(--d-accent, var(--teal-deep)); border-color: var(--card); box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.d-foot { background: var(--ink-panel); color: #B7C2BF; padding-block: 2.5rem; font-family: var(--mono); font-size: var(--step--1); border-top: 1.5px solid var(--ink); }
.d-foot a { color: #B7C2BF; } .d-foot a:hover { color: var(--signal-on-dark); }
@media (max-width: 760px) {
  .d-nav-links { display: none; }
  .d-split { grid-template-columns: 1fr; }
}

/* ---------- Founder voice-note card (drafting annotation) ---------- */
.founder-voice-note {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1.3rem;
  max-width: 470px;
  position: relative;
}
.founder-voice-note::before {
  /* mono caption tab, like a labelled attachment on the drawing */
  content: "VOICE NOTE"; position: absolute; top: -1px; left: -1.5px;
  transform: translateY(-100%);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--card);
  background: var(--teal-deep); padding: .18em .6em; border-radius: var(--radius) var(--radius) 0 0;
}
.founder-voice-note__header { display: flex; align-items: center; gap: .85rem; }
.founder-voice-note__avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--teal); border: 1.5px solid var(--ink);
  color: var(--card); font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center; letter-spacing: -0.02em;
}
.founder-voice-note__title { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: var(--step-0); line-height: 1.2; }
.founder-voice-note__context { color: var(--mute); font-size: var(--step--1); margin-top: .1rem; }

/* Whole player row is a big, obvious tap target */
.founder-voice-note__player {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  background: var(--paper-2); border: 1.5px solid var(--ink);
  border-radius: var(--radius); padding: .6rem .7rem; margin-top: 1.1rem;
  cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  box-shadow: 2px 2px 0 var(--rule);
}
.founder-voice-note__player:hover { background: #E9F1EF; box-shadow: 3px 3px 0 var(--rule); transform: translate(-1px,-1px); }
.founder-voice-note__player:disabled { cursor: not-allowed; box-shadow: none; transform: none; }
.founder-voice-note__player:disabled:hover { background: var(--paper-2); }
.founder-voice-note__play {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal); color: var(--card);
  border: 1.5px solid var(--ink); display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .12s ease, background .2s ease, box-shadow .12s ease;
  position: relative;
}
.founder-voice-note__player:hover .founder-voice-note__play { background: var(--teal-deep); }
.founder-voice-note__play:disabled { background: var(--paper-2); color: var(--mute); box-shadow: none; cursor: not-allowed; transform: none; border-color: var(--rule); }
/* gentle attention pulse until the note is played once (motion-safe, stops on .is-armed removed) */
@media (prefers-reduced-motion: no-preference) {
  .founder-voice-note.is-armed .founder-voice-note__play::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--teal); opacity: 0; animation: fvn-pulse 2.4s ease-out infinite;
  }
}
@keyframes fvn-pulse { 0% { transform: scale(.9); opacity: .55; } 70%,100% { transform: scale(1.35); opacity: 0; } }
.founder-voice-note__play svg { width: 19px; height: 19px; display: block; margin-left: 1px; }
.founder-voice-note__play[data-state="playing"] svg { margin-left: 0; }
.founder-voice-note__play .ico-pause { display: none; }
.founder-voice-note__play[data-state="playing"] .ico-play { display: none; }
.founder-voice-note__play[data-state="playing"] .ico-pause { display: block; }

.founder-voice-note__waveform {
  flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 28px; min-width: 0;
  cursor: pointer; /* click/tap to seek */
}
.founder-voice-note__play:disabled ~ .founder-voice-note__waveform { cursor: default; }
.founder-voice-note__bar {
  flex: 1 1 auto; width: 3px; min-width: 2px; border-radius: 0;
  background: #B8CAC7; height: 30%;
  transition: background .12s linear;
}
/* played portion fills teal as the playhead passes (WhatsApp-style) */
.founder-voice-note__bar.is-on { background: var(--teal-deep); }
.founder-voice-note__duration { flex: none; font-family: var(--mono); font-size: var(--step--1); font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }

.founder-voice-note__transcript { margin-top: .9rem; }
.founder-voice-note__transcript-toggle {
  background: none; border: 0; padding: .35rem 0; color: var(--teal-deep);
  font-family: var(--mono); font-weight: 500; font-size: var(--step--1); display: inline-flex; align-items: center; gap: .4em;
}
.founder-voice-note__transcript-toggle::after { content: "▾"; font-size: .8em; transition: transform .2s ease; }
.founder-voice-note__transcript-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.founder-voice-note__transcript-body {
  font-size: var(--step--1); color: var(--ink-80); line-height: 1.6;
  border-left: 2px solid var(--teal); padding-left: .9rem; margin-top: .5rem;
}
.founder-voice-note__transcript-body p + p { margin-top: .7rem; }
.founder-voice-note__transcript-body[hidden] { display: none; }
.founder-voice-note__note { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); margin-top: .6rem; }

/* Waveform bars keep a fixed, natural profile — playback shows as a left-to-right
   fill (see .is-on), not a bouncing animation. */
.founder-voice-note__bar:nth-child(4n)   { height: 55%; }
.founder-voice-note__bar:nth-child(4n+1) { height: 30%; }
.founder-voice-note__bar:nth-child(4n+2) { height: 75%; }
.founder-voice-note__bar:nth-child(4n+3) { height: 42%; }
.founder-voice-note__bar:nth-child(5n)   { height: 62%; }
.founder-voice-note__bar:nth-child(7n)   { height: 90%; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "left"
      "right";
  }
  .hero-left { max-width: 100%; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .apply-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Mobile hero: stack rows. Order: head → voice + CTAs → deal. */
  .hero-actions--row { flex-direction: column; align-items: stretch; gap: .9rem; }
  .hero-actions--row .btn-primary { justify-content: center; }
  .hero-actions--row .hero-link { justify-content: center; }
  .deal { max-width: 100%; }
}
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: var(--header-h, 62px) 0 auto 0; background: var(--paper); flex-direction: column;
    align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; border-bottom: 1px solid var(--line);
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h, 62px)); overflow-y: auto; }
  .nav-links.open { transform: none; }
  .nav-links li { border-top: 1px solid var(--line); }
  .nav-links li:first-child { border-top: 0; }
  .nav-links a { display: block; padding: .9rem .2rem; }
  .nav-links a.nav-cta { margin-top: .6rem; justify-content: center; }
  .nav-toggle { display: block; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bot { flex-direction: column; gap: .4rem; }
  .step { grid-template-columns: 1fr; gap: .4rem; }
  .price-top { padding: 1.5rem 1.25rem; }
  .price-body { padding: 1.5rem 1.25rem; }
  /* Long-label CTAs must wrap and never exceed the viewport on phones.
     The default .btn is white-space:nowrap, which forces horizontal overflow
     for "Request My Free Website Preview" on narrow screens. */
  .btn { white-space: normal; }
  .btn-lg { width: 100%; justify-content: center; text-align: center;
    padding: .9em 1.1em; font-size: var(--step-0); }
  /* full-bleed section CTAs (final CTA, examples CTA) go full width too */
  .section.center .btn-lg,
  .section--ink .btn-lg { max-width: 100%; }
}
/* Keep the giant launch price from overflowing narrow cards */
@media (max-width: 420px) {
  .price-now { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .price-now small { font-size: var(--step-0); }
  .btn, .btn-lg { padding-left: 1em; padding-right: 1em; }
}