/* =========================================================================
   Your Web Builders — premium comic / pop-art landing page
   Design system derived from /public/assets/comic/*.png
   Sections are ordered in this file the same way they appear in index.html.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* Ink + paper ------------------------------------------------------- */
  --ink:        #0F0F12;
  --ink-2:      #1C1C22;
  --ink-body:   #33333B;
  --ink-muted:  #5A5A66;
  --paper:      #FFFFFF;
  --cream:      #FBF3CC;   /* asset 13, softened */
  --cream-2:    #F6E7A2;

  /* Pop accents ------------------------------------------------------- */
  --red:        #E8322A;   /* decorative only — fails AA as a text bg     */
  --red-ink:    #C11F18;   /* AA-safe fill for buttons and text panels    */
  --pink:       #FF2E88;
  --yellow:     #FFCE00;
  --yellow-2:   #FFB800;
  --cyan:       #22C1E0;
  --orange:     #F7941E;

  /* Comic primitives -------------------------------------------------- */
  --bw:         3px;              /* ink outline width                    */
  --bw-lg:      4px;
  --pop:        6px 6px 0 var(--ink);
  --pop-sm:     4px 4px 0 var(--ink);
  --pop-lg:     10px 10px 0 var(--ink);
  --r:          14px;             /* panel radius — soft enough to read premium */
  --r-sm:       10px;
  --r-pill:     999px;

  /* Type -------------------------------------------------------------- */
  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm ------------------------------------------------------------ */
  --shell:      1200px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:      clamp(4.5rem, 9vw, 8rem);

  /* Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.85, 0.3, 1);
  --t-fast:     160ms;
  --t-base:     240ms;

  /* Z-scale ----------------------------------------------------------- */
  --z-deco:     0;
  --z-content:  10;
  --z-header:   50;
  --z-overlay:  60;
}

/* -------------------------------------------------------------------------
   2. RESET + BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;          /* 17px — above the 16px mobile minimum */
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--paper);
  overflow-x: hidden;            /* decorative bursts bleed past the edge */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;              /* Anton ships a single weight */
  color: var(--ink);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--yellow); color: var(--ink); }

/* Focus — one visible treatment everywhere, never removed --------------- */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-ink :focus-visible,
.sec--work :focus-visible,
.sec--process :focus-visible { outline-color: var(--yellow); }

.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: var(--z-overlay);
  background: var(--yellow); color: var(--ink);
  font-family: var(--f-display); font-size: 0.95rem; letter-spacing: 0.04em;
  padding: 0.75rem 1.25rem; border: var(--bw) solid var(--ink);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-base) var(--ease-out);
}
.skip:focus { top: 0; }

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

/* -------------------------------------------------------------------------
   3. LAYOUT SHELL
   ---------------------------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  position: relative;
  z-index: var(--z-content);
}
.shell--wide { --shell: 1320px; }

.sec {
  position: relative;
  padding-block: var(--sec-y);
  /* Clips the bleeding halftone / rays. `clip` rather than `hidden`: hidden
     makes every section a scroll container, so any scroll-into-view the browser
     performs (focusing a field, an anchor jump, the post-submit scroll) scrolls
     the SECTION first — shifting its content up and clipping the heading off
     the top. `clip` clips paint without creating a scroll container, so that
     cannot happen. `hidden` stays first as the fallback for Safari < 16. */
  overflow: hidden;
  overflow: clip;
}

/* Section heading block ------------------------------------------------- */
.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }

.sec-title {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  letter-spacing: -0.005em;
  text-wrap: balance;            /* keeps short second lines off the widow line */
}
.sec-title .em { color: var(--red-ink); }
.on-ink .sec-title .em { color: var(--yellow); }

.sec-lede {
  margin-top: 1.15rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-muted);
  max-width: 42ch;               /* keeps line length in the 65–75 char band */
}
.sec-head--center .sec-lede { margin-inline: auto; }
.on-ink .sec-lede { color: rgba(255, 255, 255, 0.72); }

/* -------------------------------------------------------------------------
   4. COMIC PRIMITIVES
   The whole identity rides on these four classes, which is what keeps the
   page from needing a starburst in every section.
   ---------------------------------------------------------------------- */

/* 4a. Ink panel — the base card ---------------------------------------- */
.panel {
  position: relative;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop);
}

/* 4b. Halftone — Ben-Day dots, pure CSS so it stays crisp at any DPI ---- */
.halftone::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 11px 11px;
  opacity: 0.18;
  pointer-events: none;
  z-index: var(--z-deco);
}
.halftone--fine::before { background-size: 8px 8px; opacity: 0.14; }
.halftone--fade::before {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
          mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

/* 4c. Sunburst rays ---------------------------------------------------- */
.rays::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 200%;
  min-width: 1200px;
  max-width: 2600px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    currentColor 0deg 3.2deg,
    transparent 3.2deg 9deg
  );
  opacity: 0.09;
  pointer-events: none;
  z-index: var(--z-deco);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle, #000 12%, transparent 62%);
}

/* 4d. Starburst — rationed to exactly three on the page ---------------- */
.burst {
  --burst-fill: var(--yellow);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  clip-path: polygon(
    50% 0%, 58% 12%, 70% 5%, 72% 19%, 86% 16%, 82% 30%, 97% 32%, 87% 43%,
    100% 50%, 87% 57%, 97% 68%, 82% 70%, 86% 84%, 72% 81%, 70% 95%, 58% 88%,
    50% 100%, 42% 88%, 30% 95%, 28% 81%, 14% 84%, 18% 70%, 3% 68%, 13% 57%,
    0% 50%, 13% 43%, 3% 32%, 18% 30%, 14% 16%, 28% 19%, 30% 5%, 42% 12%
  );
  background: var(--ink);        /* acts as the outline for the shape */
}
.burst > * {
  clip-path: inherit;
  width: 91%; height: 91%;
  background: var(--burst-fill);
  display: grid;
  grid-auto-rows: min-content;
  place-items: center;
  align-content: center;
  text-align: center;
}

/* 4e. Speech bubble ---------------------------------------------------- */
.bubble {
  position: relative;
  background: var(--paper);
  border: var(--bw-lg) solid var(--ink);
  border-radius: 26px;
  box-shadow: var(--pop);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
}
/* Two stacked CSS triangles: the ink one draws the outline, the paper one
   is inset far enough to leave a matching 4px edge and overlaps the bubble's
   bottom border by 3px so the tail reads as part of the same shape. */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
.bubble::before {
  bottom: -40px; left: var(--tail-x, 14%);
  border-width: 44px 34px 0 0;
  border-color: var(--ink) transparent transparent transparent;
}
.bubble::after {
  bottom: -25px; left: calc(var(--tail-x, 14%) + 7px);
  border-width: 32px 23px 0 0;
  border-color: var(--paper) transparent transparent transparent;
}
.bubble--right::before,
.bubble--right::after { left: auto; }
.bubble--right::before {
  right: var(--tail-x, 14%);
  border-width: 44px 0 0 34px;
  border-color: var(--ink) transparent transparent transparent;
}
.bubble--right::after {
  right: calc(var(--tail-x, 14%) + 7px);
  border-width: 32px 0 0 23px;
  border-color: var(--paper) transparent transparent transparent;
}

/* 4f. Sticker / kicker ------------------------------------------------- */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-display);
  font-size: clamp(0.78rem, 1.5vw, 0.9rem);
  letter-spacing: 0.09em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  box-shadow: var(--pop-sm);
  transform: rotate(-1.4deg);
}
.sticker--cyan  { background: var(--cyan); }
.sticker--paper { background: var(--paper); }
.sticker--red   { background: var(--red-ink); color: #fff; }
.sticker__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink);
  flex: none;
}
.sticker--red .sticker__dot { background: var(--yellow); }

/* 4g. Outlined display type — the comic lettering effect ---------------- */
.outline-type {
  color: var(--paper);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;              /* comfortably over the 44px touch target */
  padding: 0.85rem 1.6rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--pop-sm);
  cursor: pointer;
  /* transform is animated, not box position — no layout shift on hover */
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary { --btn-bg: var(--red-ink); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: #D82820; }
.btn--ghost { --btn-bg: var(--paper); }
.btn--lg { min-height: 60px; padding: 1rem 2rem; font-size: clamp(1.05rem, 2vw, 1.2rem); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   6. HEADER
   ---------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
  transition: box-shadow var(--t-base) var(--ease-out);
}
.header.is-stuck { box-shadow: 0 6px 0 rgba(15, 15, 18, 0.08); }

.header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  margin-right: auto;
  flex: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--red-ink);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 11px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(-3deg);
  flex: none;
}
.brand__name {
  white-space: nowrap;     /* keep the lockup on one line */
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
/* The wordmark is uppercased, but the "24h" lockup keeps its lowercase h —
   opt this span out of the parent's text-transform. */
.brand__name span { color: var(--red-ink); text-transform: none; }
/* Anton's lowercase h springs its arch only 14% down the glyph, so at wordmark
   size "24h" reads as "24n". This is Anton's OWN h outline, extracted from the
   font and modified: the arch band (font-unit y 1100-1700) is translated down
   319 units, which lengthens the stem and shortens the legs while moving the
   curves rigidly — so the shoulder keeps its original rounding exactly. The
   viewBox spans the full 1035-unit advance, not just the ink, so the letter
   spacing is identical to the real glyph. Regenerate via scripts, not by hand. */
.brand__h {
  display: inline-block;   /* the reset sets svg{display:block}, which broke the lockup
                              onto three lines — this puts the glyph back in the text flow */
  height: 0.85938em;       /* 1760/2048 — Anton's own ascender height */
  width: 0.50537em;        /* 1035/2048 — its FULL advance, so the 72/68 unit side
                              bearings are preserved and the gap after "4" matches */
  vertical-align: baseline;
  fill: currentColor;
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav__link {
  position: relative;
  padding: 0.6rem 0.75rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-body);
  border-radius: 8px;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.35rem;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.header__cta { flex: none; }

/* Phone CTA. The number itself is the label on wide screens; below that the
   button collapses to the handset icon so the header never wraps, and it stays
   visible all the way down to mobile — a local business audience calls. */
.header__phone { flex: none; padding-inline: 1.05rem; gap: 0.5rem; }
.header__phone-label { white-space: nowrap; }
/* 1320px, not 1200: the "24h Web Builders" wordmark is ~60px wider than the
   old one and consumed all the slack, leaving the CTA flush against the shell
   edge around 1210px. Collapsing the phone to its icon earlier restores it. */
@media (max-width: 1320px) {
  .header__phone-label { display: none; }
  .header__phone { padding-inline: 0.9rem; }
}
/* Below this the bar still runs out of room: six nav labels plus brand, phone
   and CTA need ~990px of a ~930px bar, which wraps the header. Tightening the
   gaps buys back more than enough without dropping a link or moving the drawer
   breakpoint. */
@media (max-width: 1100px) {
  .header__bar { gap: 0.75rem; }
  .nav__link { padding-inline: 0.5rem; }
}

.burger {
  display: none;
  place-items: center;
  width: 50px; height: 50px;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  border-radius: 11px;
  box-shadow: var(--pop-sm);
  flex: none;
}
.burger__box { display: grid; gap: 5px; width: 22px; }
.burger__box i {
  display: block; height: 3px; background: var(--ink); border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) linear;
}
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Scroll progress rail — CSS scroll-driven, no JS, no scroll-jacking ---- */
.progress {
  position: absolute;
  left: 0; bottom: -3px;
  height: 3px; width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--red-ink), var(--yellow) 55%, var(--cyan));
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* -------------------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  color: var(--orange);           /* drives .rays currentColor */
  border-bottom: var(--bw) solid var(--ink);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__kicker { margin-bottom: 1.5rem; }

.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  line-height: 0.94;
  text-wrap: balance;            /* stops "THAN A" stranding on its own line */
  letter-spacing: -0.012em;
  color: var(--ink);
}
/* "Facebook Page" gets struck through — the argument in one glance */
.hero__strike {
  position: relative;
  display: inline-block;
  color: var(--red-ink);
  white-space: nowrap;
}
.hero__strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 54%;
  height: 7px;
  background: var(--ink);
  border-radius: 4px;
  transform: rotate(-2.4deg) scaleX(0);
  transform-origin: left center;
  transition: transform 520ms 500ms var(--ease-out);
}
.hero.is-ready .hero__strike::after { transform: rotate(-2.4deg) scaleX(1); }

.hero__lede {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  color: var(--ink-body);
  max-width: 40ch;
}
.hero__lede b {
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -0.55em 0 rgba(255, 206, 0, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px dashed rgba(15, 15, 18, 0.22);
}
.hero__trust li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.92rem; font-weight: 600; color: var(--ink-body);
}
.hero__trust svg { width: 18px; height: 18px; color: var(--red-ink); flex: none; }

/* Hero visual ----------------------------------------------------------- */
.hero__visual { position: relative; }

.mock {
  position: relative;
  background: var(--paper);
  border: var(--bw-lg) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop-lg);
  overflow: hidden;
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  background: #EFEFEA;
  border-bottom: var(--bw) solid var(--ink);
}
.mock__dots { display: flex; gap: 6px; flex: none; }
.mock__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--ink);
  display: block;
}
.mock__dots i:nth-child(1) { background: var(--red); }
.mock__dots i:nth-child(2) { background: var(--yellow); }
.mock__dots i:nth-child(3) { background: #4CC65B; }
.mock__url {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.75rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock__shot { display: block; width: 100%; background: var(--ink-2); }

.hero__mock {
  transform: rotate(-1.6deg);
  transition: transform 480ms var(--ease-out);
}
.hero__mock:hover { transform: rotate(-0.4deg); }

/* $970 price burst — starburst #1 of 3 ---------------------------------- */
.price-burst {
  position: absolute;
  right: -4%; bottom: -5%;
  width: clamp(128px, 20vw, 178px);
  z-index: 3;
  transform: rotate(-11deg);
  filter: drop-shadow(6px 6px 0 rgba(15, 15, 18, 0.22));
}
.price-burst__inner { gap: 0.15rem; }
.price-burst__amount {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.7vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
}
.price-burst__note {
  font-family: var(--f-display);
  font-size: clamp(0.56rem, 1.05vw, 0.68rem);
  letter-spacing: 0.11em;
  color: var(--ink);
}

/* "24 hours" tag pinned to the mockup ----------------------------------- */
.hero__tag {
  position: absolute;
  left: -4%; top: -5%;
  z-index: 3;
  transform: rotate(-4deg);
  background: var(--cyan);
  box-shadow: var(--pop-sm);
}

/* Decorative bolt, transform-only parallax ------------------------------ */
.hero__bolt {
  position: absolute;
  right: -2%; top: -9%;
  width: clamp(44px, 5.5vw, 68px);
  color: var(--yellow);
  z-index: var(--z-deco);        /* sits behind the mockup where they overlap */
}
.hero__bolt svg { filter: drop-shadow(3px 3px 0 var(--ink)); }

/* -------------------------------------------------------------------------
   8. BENEFIT STRIP (ink bar)
   ---------------------------------------------------------------------- */
.strip {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.25rem, 4vw, 3rem);
  border-bottom: var(--bw) solid var(--ink);
  overflow: hidden;
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 2px solid rgba(255, 255, 255, 0.16);
}
.strip__item:first-child { padding-left: 0; border-left: 0; }
.strip__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 11px;
  background: var(--yellow);
  border: 2.5px solid #fff;
  color: var(--ink);
}
.strip__icon svg { width: 21px; height: 21px; }
.strip__item:nth-child(2) .strip__icon { background: var(--cyan); }
.strip__item:nth-child(3) .strip__icon { background: var(--pink); color: #fff; }
.strip__item:nth-child(4) .strip__icon { background: #fff; }
.strip__t {
  display: block;
  font-family: var(--f-display);
  font-size: 1.06rem;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.1;
}
.strip__d {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}

/* -------------------------------------------------------------------------
   9. PROBLEM — asymmetric comic panels
   ---------------------------------------------------------------------- */
.sec--problem { background: var(--paper); }

.problem__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.6vw, 1.9rem);
}
/* Deliberately uneven: wide / pair / wide. A flat 2x2 of identical
   cards is the exact thing that reads as a stock template.
   1 / -1 (not `span 2`) so the single-column mobile grid doesn't gain an
   implicit second track. */
.problem__grid > :nth-child(1),
.problem__grid > :nth-child(4) { grid-column: 1 / -1; }

.pcard {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pcard:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }

/* .halftone paints through an absolutely-positioned ::before, and a positioned
   element outranks non-positioned flow content in the paint order — so the dots
   were printing over the numerals and body copy. Lifting the card's own content
   into the positioned layer puts it back on top. (Every other .halftone user
   nests its content in .shell, which is already positioned, so this is the only
   place that needed it.) */
.pcard > * { position: relative; z-index: 1; }

.pcard--wide { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.pcard--wide .pcard__no { margin-top: 0.12em; }
.pcard--yellow { background: var(--cream-2); color: var(--orange); }
.pcard--cyan   { background: #DFF6FB; color: var(--cyan); }
.pcard--pink   { background: #FFE6F1; color: var(--pink); }
.pcard--paper  { background: var(--paper); color: var(--ink); }

.pcard__no {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.8;
  color: var(--paper);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  flex: none;
}
.pcard__t {
  font-size: clamp(1.28rem, 2.5vw, 1.7rem);
  color: var(--ink);
  line-height: 1.04;
}
.pcard--wide .pcard__t { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.pcard__d {
  margin-top: 0.75rem;
  font-size: 0.99rem;
  color: var(--ink-body);
  max-width: 46ch;
}
.pcard__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }

/* -------------------------------------------------------------------------
   10. PROCESS — red halftone, speech bubbles (echoes asset 5)
   ---------------------------------------------------------------------- */
.sec--process {
  background: var(--red-ink);
  color: #7F1710;                 /* halftone dot color */
  border-block: var(--bw) solid var(--ink);
}
.sec--process .sec-title { color: #fff; }
.sec--process .sec-lede { color: rgba(255, 255, 255, 0.78); }

.steps {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.25rem);
  max-width: 62rem;
  margin-inline: auto;
}
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.1rem, 2.5vw, 1.75rem); align-items: start; }
.step:nth-child(2) { grid-template-columns: 1fr auto; }
.step:nth-child(2) .step__no { order: 2; }
.step:nth-child(even) .bubble { margin-left: clamp(0rem, 6vw, 4rem); }

.step__no {
  display: grid; place-items: center;
  width: clamp(58px, 8vw, 76px); height: clamp(58px, 8vw, 76px);
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--bw-lg) solid var(--ink);
  box-shadow: var(--pop-sm);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  line-height: 1;
  margin-top: 0.5rem;
}

.step__t {
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.02;
}
.step__d { margin-top: 0.7rem; font-size: 1rem; color: var(--ink-body); max-width: 48ch; }

.process__foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.process__note {
  display: block;
  margin: 0 auto 1.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
}

/* -------------------------------------------------------------------------
   11. WHAT'S INCLUDED
   ---------------------------------------------------------------------- */
.sec--included { background: var(--cream); color: var(--orange); }

.included__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: clamp(1rem, 2vw, 1.35rem);
  align-items: start;
}
/* Three explicit rows: checklist + price card, then the two extras across the
   full width, then the after-launch band. Auto-placement would drop the extras
   into the card's column; the card spanning both rows was what left the tall
   dead space under it. */
.included__grid > .incl-list   { grid-column: 1;      grid-row: 1; }
.included__grid > .price-card  { grid-column: 2;      grid-row: 1; }
.included__grid > .incl-extras { grid-column: 1 / -1; grid-row: 2; }

/* The card is shorter than the checklist beside it, so stretch it to the row
   and centre its contents — the panel fills the column instead of leaving a
   ragged gap, without inventing anything to put in it. */
.included__grid > .price-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.incl-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop);
  overflow: hidden;
}
.incl-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border-bottom: 2px solid rgba(15, 15, 18, 0.1);
  border-right: 2px solid rgba(15, 15, 18, 0.1);
}
.incl-list li:nth-child(even) { border-right: 0; }
.incl-list li:nth-last-child(-n+2) { border-bottom: 0; }

.incl-check {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  color: var(--ink);
}
.incl-check svg { width: 15px; height: 15px; }
.incl-t { display: block; font-family: var(--f-display); font-size: 1.02rem; letter-spacing: 0.015em; color: var(--ink); line-height: 1.12; }
.incl-d { display: block; margin-top: 0.25rem; font-size: 0.87rem; line-height: 1.45; color: var(--ink-muted); }

/* Price panel ----------------------------------------------------------- */
.price-card {
  position: relative;
  padding: clamp(1.75rem, 3.2vw, 2.4rem);
  text-align: center;
  background: var(--ink);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop);
  overflow: hidden;
}
.price-card__label {
  position: relative; z-index: 2;
  font-family: var(--f-display);
  font-size: 0.86rem; letter-spacing: 0.14em;
  color: var(--yellow);
}
.price-card__amount {
  position: relative; z-index: 2;
  display: block;
  margin-top: 0.4rem;
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 9vw, 5.2rem);
  line-height: 0.9;
  color: #fff;
  text-shadow: 5px 5px 0 var(--red-ink);
}
/* Launch help + revision policy. Same ink-and-offset language as the cards
   elsewhere, one step quieter than the checklist so the list still leads. */
.incl-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem);
  align-items: stretch;      /* equal-height cards, whatever the copy length */
}
/* Flex column so each card's trailing element — the dashed note on one, the
   badge on the other — sits on the baseline of the card rather than leaving
   the slack pooled at the bottom. */
.incl-extra {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--ink);
}
.incl-extra__t {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.incl-extra__d {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-body);
}
.incl-extra__note {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 2px dashed rgba(15, 15, 18, 0.18);
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.incl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;   /* separates the tags from the auto-pushed footer */
}
/* Comic stamp closing the revision card, pinned to the card's baseline. */
.incl-badge {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.incl-badge + * { margin-top: 0.9rem; }

.incl-tags li {
  padding: 0.3rem 0.7rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* After-launch note. A single band closing the section — deliberately not
   another card, so it reads as a footnote to the package, not a fifth offer. */
.after-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1rem, 2vw, 1.35rem);   /* matches the extras row gap */
  padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
}
.after-launch__t {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}
.after-launch__t span { color: var(--yellow); }
.after-launch__d {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}
.after-launch__d b { color: var(--yellow); }
.after-launch__cta { flex: none; background: #fff; }

/* The two most misread things about this offer, said loudly and side by side:
   it is one payment, and none of it is due up front. */
.price-card__pills {
  position: relative; z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.price-card__terms {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border: 2.5px solid #fff;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}
.price-card__terms--alt { background: var(--cyan); }

.price-card__inc {
  position: relative; z-index: 2;
  margin-top: 0.85rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
.price-card__sub {
  position: relative; z-index: 2;
  margin-top: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.price-card .btn { position: relative; z-index: 2; margin-top: 1.4rem; }
.price-card__see {
  position: relative; z-index: 2;
  margin-top: 0.85rem;
  font-family: var(--f-display);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
}

.price-card__fine {
  position: relative; z-index: 2;
  margin-top: 0.9rem;
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
   12. RECENT BUILDS — the quietest, most spacious section on the page
   ---------------------------------------------------------------------- */
.sec--work {
  background: #0C0C0F;
  color: #fff;
  border-block: var(--bw) solid var(--ink);
}
.sec--work .sec-title { color: #fff; }
.sec--work .sec-title .em { color: var(--yellow); }
.sec--work .sec-lede { color: rgba(255, 255, 255, 0.72); }
.sec--work::before { color: #fff; }   /* halftone dots */

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.work__head .sec-head { margin-bottom: 0; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.work-card {
  display: flex;
  flex-direction: column;
  background: #16161B;
  border: var(--bw) solid #fff;
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.work-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--yellow); }

.work-card__mock { border: 0; border-radius: 0; box-shadow: none; border-bottom: var(--bw) solid var(--ink); }
.work-card__shotwrap { overflow: hidden; background: var(--ink-2); }
.work-card__shot {
  width: 100%;
  transition: transform 700ms var(--ease-out);
}
.work-card:hover .work-card__shot { transform: scale(1.035); }

.work-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
}
.work-card__tag {
  align-self: flex-start;
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: var(--ink);
  background: var(--yellow);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.8rem;
  margin-bottom: 0.9rem;
}
.work-card:nth-child(2) .work-card__tag { background: var(--cyan); }
.work-card__t { font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; line-height: 1.02; }
.work-card__d {
  margin-top: 0.75rem;
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.68);
}
.work-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}
.work-card__meta li {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  padding: 0.24rem 0.7rem;
}
.work-card__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.work-card__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-family: var(--f-display);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: #fff;
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.work-card__link:hover { background: var(--yellow); transform: translateY(-2px); }
.work-card__link svg { width: 15px; height: 15px; }
.work-card__link--quiet {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.work-card__link--quiet:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.work__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   12b. WHO IT'S FOR — the niche, stated compactly. Reuses the chip language
   already used in What's Included so it adds no new visual vocabulary.
   ---------------------------------------------------------------------- */
.sec--icp { background: var(--cream); color: var(--orange); }
/* wider than the default lede: this one is a list of trades, and the standard
   42ch measure left the section looking half-empty */
.sec--icp .sec-lede { max-width: 64ch; }

.icp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  list-style: none;
}
.icp-tags li {
  padding: 0.5rem 1rem;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-display);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.icp-tags__more {
  background: var(--yellow);
}

/* -------------------------------------------------------------------------
   13. ABOUT / FOUNDER STORY
   The only image-led section on the page. The illustration carries the comic
   voice on its own, so nothing else here is decorated.
   ---------------------------------------------------------------------- */
.sec--about { background: var(--cream); color: var(--orange); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__visual {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 540px;
}
/* The white ground is keyed out of the PNG, so the artwork sits directly on
   the cream rather than in a box. The drop-shadow follows the actual silhouette
   the way a box-shadow could not. */
.about__img {
  width: 100%;
  filter: drop-shadow(9px 9px 0 rgba(15, 15, 18, 0.14));
}

.about__badge {
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%) rotate(-1.8deg);
  white-space: nowrap;
  background: var(--paper);
}

.about__copy { margin-top: 1.5rem; }
.about__copy p {
  font-size: clamp(1rem, 1.55vw, 1.08rem);
  color: var(--ink-body);
  max-width: 54ch;
}
.about__copy p + p { margin-top: 1rem; }

/* The one-line beat that turns the story into the company */
.about__turn {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}

/* Closing statement. Ruled rather than boxed, so it reads as the end of the
   story instead of competing with the callout panels elsewhere on the page. */
.about__close {
  margin-top: 1.75rem;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 5px solid var(--ink);
  max-width: 54ch;
}
.about__close-offer {
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--ink);
}
.about__close-line {
  margin-top: 0.6rem;
  font-size: clamp(0.98rem, 1.5vw, 1.05rem);
  color: var(--ink-muted);
}
.about__close-line span { color: var(--red-ink); font-weight: 700; }

.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   14. WHY US — numeral band, deliberately not another card grid
   ---------------------------------------------------------------------- */
.sec--why { background: var(--paper); }
.why__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.why__aside { position: sticky; top: 108px; }
.why__list { display: grid; }
.why-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  border-top: 3px solid var(--ink);
}
.why-item:last-child { border-bottom: 3px solid var(--ink); }
.why-item__no {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1;
  color: var(--ink-muted);
}
.why-item__t { font-size: clamp(1.25rem, 2.6vw, 1.65rem); line-height: 1.04; }
.why-item__d { margin-top: 0.6rem; font-size: 0.99rem; color: var(--ink-body); max-width: 52ch; }
.why-item:hover .why-item__no { color: var(--red-ink); }
.why-item__no { transition: color var(--t-base) var(--ease-out); }

/* Tagline lifted straight from asset 1 ---------------------------------- */
.tagline {
  margin-top: 1.75rem;
  padding: 1.4rem 1.6rem;
  background: var(--cream);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop-sm);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.08;
  color: var(--ink);
  transform: rotate(-1deg);
}
.tagline span { color: var(--red-ink); }

/* -------------------------------------------------------------------------
   15. FAQ
   ---------------------------------------------------------------------- */
.sec--faq { background: var(--cream); color: var(--orange); }
.faq { max-width: 54rem; margin-inline: auto; display: grid; gap: 0.9rem; }

.faq-item {
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop-sm);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--pop); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding: 1.1rem clamp(1.1rem, 2.4vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.15;
  transition: background-color var(--t-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--cream); }

.faq-item__sign {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.faq-item[open] .faq-item__sign { transform: rotate(135deg); background: var(--red-ink); color: #fff; }
.faq-item__sign svg { width: 15px; height: 15px; }

.faq-item__body {
  padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) 1.4rem;
  font-size: 0.99rem;
  color: var(--ink-body);
  max-width: 66ch;
}
.faq-item__body p + p { margin-top: 0.75rem; }
.faq-item__body a {
  display: inline-block;
  padding-block: 0.35rem;        /* larger tap area, same visual line */
  font-weight: 600;
  color: var(--red-ink);
}

/* -------------------------------------------------------------------------
   16. FINAL CTA + LEAD FORM
   ---------------------------------------------------------------------- */
.sec--cta {
  background: var(--yellow);
  color: var(--orange);
  border-block: var(--bw) solid var(--ink);
  /* The closing section carries the tallest element on the page (the form),
     so it gets more breathing room than the shared --sec-y rhythm. */
  padding-block: clamp(5rem, 10vw, 10rem);
}
.cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}
.cta__title {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
}
.cta__title .em { color: var(--red-ink); }
.cta__lede {
  margin-top: 1.35rem;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  color: var(--ink-body);
  max-width: 40ch;
}
.cta__points { display: grid; gap: 0.6rem; margin-top: 1.75rem; }
.cta__points li { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 600; color: var(--ink); font-size: 0.97rem; }
.cta__points svg { width: 20px; height: 20px; color: var(--red-ink); flex: none; margin-top: 2px; }

/* No starburst here on purpose. This section already carries rays, a halftone
   field, a red sticker and the largest type on the page — a burst on top of
   that collided with the bullet list and pushed the section from bold to
   cluttered. The two starbursts on the page (hero price, form confirmation)
   both mean something. */

/* Form ------------------------------------------------------------------ */
.form {
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  background: var(--paper);
  border: var(--bw-lg) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--pop-lg);
  /* Explicit, not inherited: .sec--cta sets color:var(--orange) for the yellow
     section, which the form was silently picking up for its heading and input
     text. This sets the form's own colour and stops that leak. */
  color: var(--red-ink);
}

/* Typed values follow the form colour; placeholders stay grey so a real answer
   is always distinguishable from the hint. */
.field input,
.field select,
.field textarea { color: var(--red-ink); }
.form__head { margin-bottom: 1.4rem; }
/* Explicit: the global `h1,h2,h3,h4 { color: var(--ink) }` outranks the red
   inherited from .form, so the heading needs to opt in by name. */
.form__t { font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.05; color: var(--red-ink); }
.form__d { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-muted); }

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.field__label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  background: #FCFCFA;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field__selectwrap { position: relative; }
.field__selectwrap svg {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ink);
  pointer-events: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 4px 4px 0 var(--yellow);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: #9A9AA6; }

.field.is-invalid input,
.field.is-invalid select { border-color: var(--red-ink); background: #FFF4F3; }
.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red-ink);
}
.field.is-invalid .field__error { display: flex; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__row .field { margin-bottom: 1rem; }

.form__more { border: 0; padding: 0; margin: 0 0 1rem; }
.form__more[hidden] { display: none; }
.form__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px;
  background: none; border: 0; padding: 0;
  font-size: 0.88rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.form__toggle svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
.form__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: #FFF4F3;
  border: 2.5px solid var(--red-ink);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--red-ink);
}
.form__error[hidden] { display: none; }
.form__error svg { flex: none; margin-top: 2px; }
.form__error a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.form__or-sep { margin-inline: 0.35rem; opacity: 0.5; }

.form__fine { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-muted); text-align: center; }
.form__or { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px dashed rgba(15,15,18,0.18); text-align: center; font-size: 0.9rem; }
.form__or a { font-weight: 700; color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }

.form__status[hidden] { display: none; }
.form__status {
  display: grid;
  place-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.form__status .burst { width: 92px; --burst-fill: var(--yellow); }
.form__status svg { width: 34px; height: 34px; color: var(--ink); }
.form__status h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.form__status p { font-size: 0.97rem; color: var(--ink-muted); max-width: 40ch; }

/* -------------------------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.66); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
.footer .brand__name { color: #fff; }
.footer .brand__name span { color: var(--yellow); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* thumb-sized, not just readable */
  padding-inline: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  border-radius: 6px;
  transition: color var(--t-fast) var(--ease-out);
}
.footer__nav a:hover { color: var(--yellow); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--yellow); }

/* -------------------------------------------------------------------------
   18. SCROLL MOTION
   Budget: one entrance per element, once, transform + opacity only.
   No scroll-jacking, no pinned sections, no continuous loops.
   ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Hero entrance is scripted separately so it fires on load, not on scroll */
.hero__intro > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.hero.is-ready .hero__intro > * { opacity: 1; transform: none; }

.hero__visual {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 720ms 180ms var(--ease-out), transform 720ms 180ms var(--ease-out);
}
.hero.is-ready .hero__visual { opacity: 1; transform: none; }

/* Scroll-driven drift on two decorative marks only. Progressive
   enhancement: browsers without view() timelines simply get them static. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__bolt {
      animation: deco-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes deco-drift {
  from { transform: translateY(28px) rotate(-6deg); }
  to   { transform: translateY(-28px) rotate(6deg); }
}

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   Checked at 1440 / 1024 / 768 / 375.
   ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 620px; }
  .included__grid { grid-template-columns: 1fr; }
  /* single column: let them stack in source order again */
  .included__grid > .incl-list,
  .included__grid > .incl-extras,
  .included__grid > .price-card { grid-column: auto; grid-row: auto; }
  .included__grid > .price-card { align-self: auto; display: block; }
  .incl-extras { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .why__aside { position: static; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .strip__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 920px) {
  html { scroll-padding-top: 84px; }

  /* Drawer nav ------------------------------------------------------- */
  .burger { display: grid; }
  .header__cta { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: grid;
    gap: 0.25rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: var(--bw) solid var(--ink);
    box-shadow: 0 14px 24px rgba(15, 15, 18, 0.14);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { min-height: 48px; display: flex; align-items: center; font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 0.6rem; }
  .nav__cta { display: inline-flex; }

  .after-launch { flex-direction: column; align-items: flex-start; }
  .work__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 380px; margin-bottom: 1rem; }
  .problem__grid { grid-template-columns: 1fr; }
  .pcard--wide { grid-template-columns: auto 1fr; }
}

@media (min-width: 921px) { .nav__cta { display: none; } }

@media (max-width: 680px) {
  body { font-size: 1rem; }
  /* the three-part offer kicker wraps at this width — centre it so the
     second line doesn't hang off the bullet */
  .hero__kicker .sticker { text-align: center; }
  .incl-list { grid-template-columns: 1fr; }
  .incl-list li { border-right: 0; }
  .incl-list li:nth-last-child(-n+2) { border-bottom: 2px solid rgba(15, 15, 18, 0.1); }
  .incl-list li:last-child { border-bottom: 0; }
  .form__row { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: 1fr; }
  .strip__item { padding-left: 0; border-left: 0; }
  .step,
  .step:nth-child(2) { grid-template-columns: 1fr; gap: 1rem; }
  .step:nth-child(2) .step__no { order: 0; }
  .step:nth-child(even) .bubble { margin-left: 0; }
  .step__no { margin-top: 0; }
  .work__head { align-items: flex-start; }
  .price-burst { right: 2%; bottom: -9%; }
  .hero__tag { left: 0; top: -4%; }
}

@media (max-width: 420px) {
  :root { --pop: 5px 5px 0 var(--ink); --pop-lg: 7px 7px 0 var(--ink); }
  .brand__name { font-size: 1rem; }
  .btn { padding: 0.8rem 1.25rem; font-size: 0.95rem; }
  .pcard--wide { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   20. REDUCED MOTION — everything decorative resolves to its end state
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .hero__intro > *,
  .hero__visual { opacity: 1; transform: none; }
  .hero__strike::after { transform: rotate(-2.4deg) scaleX(1); }
  .progress { display: none; }
}

/* -------------------------------------------------------------------------
   21. PRINT
   ---------------------------------------------------------------------- */
@media print {
  .header, .footer, .hero__bolt { display: none; }
  .sec { padding-block: 1.5rem; }
  * { box-shadow: none !important; }
}