/* =========================================================================
   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);
  overflow: hidden;              /* clips the bleeding halftone / rays */
}

/* 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 {
  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;
}
.brand__name span { color: var(--red-ink); }

.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; }
@media (max-width: 1200px) {
  .header__phone-label { display: none; }
  .header__phone { padding-inline: 0.9rem; }
}

.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;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.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);
}
/* 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__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__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;
}

/* -------------------------------------------------------------------------
   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);
}
.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);
}
.form__head { margin-bottom: 1.4rem; }
.form__t { font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.05; }
.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__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; }
  .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; }

  .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; }
}