/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · services.css
   Shared components for the service pages. Loads AFTER site.css (the
   homepage stylesheet, copied unchanged) and only uses its tokens:
   --y --ink --ink-2 --ink-3 --n100…--n900 --paper --err, --r-tile / --r-in /
   --r-btn, --gutter --sec --gap --pad, --ease-out --ease-drawer --spring-pop.
   Page-specific rules go in assets/css/pages/<slug>.css, never here.

   Contents
    1  Header variants (landing / step / thank-you)
    2  Service hero (yellow cover bento) + ring fact sticker + deal tile (one component, one order)
    3  Proof: single logo ribbon, stat row
    4  Landing folds: topic bento, fit pair, how-it-works timeline,
       deliverables, testimonials, about, price, closing slide, safety net
    5  Slim footer, sticky mobile CTA bar
    6  Step page shell + sticky summary aside
    7  Form: progress, steps, fields, radio cards, chips, phone, counter,
       fit notes, error summary, nav, submit, status, restore, file upload,
       payment methods, enclosed payment block, copy buttons, fallback
    8  Thank-you: timeline, calendar, pay-now, prep checklist, next offer
    9  Hub: hero, six-service staircase, "not sure" helper
   10  Motion + reduced motion
   ===================================================================== */

/* Montserrat 700/800 swaps in over Arial Bold sized to its metrics, so the uppercase headings do not reflow
   (site.css already maps the regular weights). Same family name: the browser picks the face by weight. */
@font-face {
  font-family: "Montserrat Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 106%; ascent-override: 85.79%; descent-override: 22.25%; line-gap-override: 0%;
}

/* ---------- 1. Header variants ---------- */
.hdr--min .hdr__actions { margin-left: auto; }
.hdr--min .hdr__logo { min-width: 44px; min-height: 44px; justify-content: center; }
.hdr__back {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; margin-left: 10px; padding: 10px 4px; border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--n600); text-decoration: none; white-space: nowrap;
}
.hdr__back .i { flex: none; width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
@media (min-width: 560px) { .hdr__back { margin-left: 18px; font-size: 15px; } }
/* step and thank-you pages have no bottom bar: their header help link stays on phones */
@media (max-width: 767px) { .hdr.is-scrolled .hdr__actions > .hdr__help { display: inline-flex; } }
@media (hover: hover) and (pointer: fine) {
  .hdr__back:hover { color: var(--ink); }
  .hdr__back:hover .i { transform: translateX(-3px); }
}
.hdr__help-t { display: none; }
@media (min-width: 768px) {
  .hdr__help.btn--icon .btn__face { width: auto; gap: 8px; padding: 0 14px; }
  .hdr__help-t { display: inline; font-size: 15px; }
}
/* Landing pages on phones: past the hero the header keeps the logo and the menu button (site.css drops its CTA
   and WhatsApp there; the sticky bar carries them), the same as the homepage. */

/* ---------- 2. Service hero (the cover slide, one service) ---------- */
.svc-hero { position: relative; overflow: clip; background: var(--y); --focus: var(--ink); padding: 96px 0 104px; }
.svc-hero__blob { width: 150px; }
@media (min-width: 768px) { .svc-hero__blob { width: clamp(240px, 28vw, 420px); top: -34px; left: -64px; } }
.svc-hero__grid { position: relative; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-hero__copy { grid-column: 1 / -1; padding-bottom: 16px; }
/* The hero carries four things, like the homepage: H1, one sub (price, format and who it's for), CTAs, one trust line.
   One type token for every service H1 (never sized by its column), capped at 3 lines at 1440. */
.svc-h1 { font-size: clamp(34px, 2.6vw + 22px, 64px); line-height: 0.95; text-wrap: balance; }
.svc-h1 .hl { max-width: 100%; }
.svc-h1 .nw { white-space: nowrap; }
.svc-hero__sub { margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-3); max-width: 44ch; }
.svc-hero__sub b { font-weight: 800; color: var(--ink); white-space: nowrap; }
.svc-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 26px; }
.svc-hero__trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); max-width: 48ch; }
.svc-hero__trust .i { width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 559px) {
  .svc-hero__ctas .btn { display: flex; width: calc(100% - 4px); }
}
/* phones: one line of proof right under the ask (the first mobile screen otherwise has none; desktop has the
   portrait, the ring and the deal tile beside the copy). Three locked facts, columns not dots. */
.svc-hero__proof {
  list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink-3);
}
.svc-hero__proof li { display: flex; align-items: baseline; gap: 4px; padding: 0 12px; border-left: 2px solid var(--ink); }
.svc-hero__proof li:first-child { padding-left: 0; border-left: 0; }
.svc-hero__proof b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.svc-hero__proof .rv__stars { font-size: 15px; letter-spacing: 0.06em; color: var(--ink); }
.svc-hero__proof li:only-child { display: block; padding: 0; border: 0; }
@media (min-width: 768px) { .svc-hero__proof { display: none; } }

.svc-hero__portrait { grid-column: 1 / -1; height: 300px; padding: 0; overflow: visible; }
.svc-hero__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.svc-hero__disc {
  position: absolute; left: 50%; top: 58%; width: min(78%, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--y);
}
.svc-hero__cutout { position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; max-width: none; transform: translateX(-50%); }

/* round rotating sticker with a price in the middle (the homepage's 12+ YEARS device, one service) */
.ring { position: absolute; z-index: 6; width: 92px; height: 92px; top: 14px; right: 14px; }
.ring__svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.ring__disc { fill: var(--ink); }
.ring__line { fill: none; stroke: #fff; stroke-width: 2; }
.ring__text { fill: #fff; font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; }
.ring__num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  color: var(--y); font-size: 16px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.ring__num small { display: block; margin-bottom: 3px; font-size: 9px; letter-spacing: 0.14em; color: #fff; }
.is-off .ring__svg, html.motion-paused .ring__svg { animation-play-state: paused; }
/* the ring carries a fact, not the price (the deal tile owns the price): big number, small word under it */
.ring--fact .ring__num { font-size: 30px; line-height: 0.9; }
.ring--fact .ring__num small { margin: 4px 0 0; font-size: 9px; }
@media (hover: hover) and (pointer: fine) { .ring:hover .ring__svg { animation-play-state: paused; } }

.svc-hero__deal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding: 18px; }
/* One deal tile on all six services, always in this order:
   optional .mono label → .svc-price (small .cur + .num) → optional .svc-price__save → .svc-chips → .svc-due.
   The one display number is the service price (or "Free" for the done-for-you review). */
.svc-hero__deal > .mono { margin-bottom: -6px; color: var(--ink-3); }
.svc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.svc-price .cur { font-size: 16px; font-weight: 800; }
.svc-price .num { font-size: clamp(38px, 1.4vw + 28px, 50px); letter-spacing: -0.045em; }
.svc-price small { font-size: 14px; font-weight: 700; color: var(--n600); }
.svc-price__save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -6px; font-size: 14px; font-weight: 600; color: var(--n600); }
.svc-price__save s { text-decoration-thickness: 2px; }
.svc-price__chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px;
  background: var(--ink); color: var(--y); font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
}
.svc-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chips .chip { gap: 6px; min-height: 34px; padding: 4px 12px; font-size: 14px; }
.svc-chips .i { width: 16px; height: 16px; }
/* "nothing to pay now" is reassurance, never a second price: one quiet line, no numeral */
.svc-due { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--n200); font-size: 15px; font-weight: 700; line-height: 1.4; }
.svc-due .i { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke-width: 3; }
.svc-due .ph-inline { display: inline; font-size: 12px; line-height: 1.7; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.svc-hero__sparkle { right: var(--gutter); bottom: 64px; }

/* phones, every service: the promise, then the price, then the face (the price qualifies the click above the fold) */
@media (max-width: 767px) {
  .svc-hero__deal { order: 1; }
  .svc-hero__portrait { order: 2; height: 240px; }
}
@media (min-width: 768px) {
  .svc-hero { padding: 108px 0 120px; }
  .svc-hero__sparkle { bottom: 96px; }
  .svc-hero__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-hero__copy { grid-row: 1; padding-bottom: 24px; }
  .svc-hero__portrait { grid-column: 1 / 4; grid-row: 2; height: 340px; }
  .svc-hero__deal { grid-column: 4 / 7; grid-row: 2; justify-content: space-between; }
  .ring { width: 104px; height: 104px; top: -26px; left: -14px; right: auto; }
  .ring__num { font-size: 18px; }
  .ring--fact .ring__num { font-size: 34px; }
}
@media (min-width: 1200px) {
  .svc-hero { min-height: min(100dvh, 900px); display: flex; align-items: center; padding: 124px 0 116px; }
  .svc-hero__grid {
    width: min(1280px, 100% - 2 * var(--gutter));
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px;
  }
  .svc-hero__copy { grid-column: 1 / 8; grid-row: 1 / 3; align-self: center; padding: 0 24px 0 0; }
  .svc-hero__portrait { grid-column: 8 / 13; grid-row: 1; height: auto; min-height: 380px; }
  .svc-hero__deal { grid-column: 8 / 13; grid-row: 2; padding: 20px 22px; }
  .svc-chips { gap: 6px; }
  .svc-chips .chip { padding: 4px 10px; font-size: 13px; }
  .svc-hero__cutout { height: 94%; left: 58%; }
  .svc-hero__disc { left: 58%; width: min(70%, 320px); }
  .ring { width: 116px; height: 116px; top: -40px; left: -40px; }
  .ring__num { font-size: 20px; }
  .ring__num small { font-size: 10px; }
  .ring--fact .ring__num { font-size: 38px; }
}

/* ---------- 3. Proof: one tilted logo ribbon + a stat row ---------- */
.ribbons--one { height: 150px; margin-top: -52px; }
/* The -3deg band drops about 3.14vw at the viewport's left edge: its top there must stay above the hero's
   straight bottom edge at every width, or a white wedge shows between the two. */
.ribbons--one .ribbon--logos { top: 34px; }
/* the motion toggle sits on the band's right end (direction F2), riding the -3deg tilt: band centre minus the rise
   between the band's middle (50vw) and the button's centre */
.ribbons--one .pause {
  left: auto; right: var(--gutter); bottom: auto;
  top: calc(65px - (50vw - var(--gutter) - 22px) * 0.0524 - 22px);
}
.ribbons--one .pause:focus-visible, .hub-hero__portrait .pause:focus-visible { outline-color: var(--y); }
.ribbons__label {
  position: absolute; z-index: 4; left: calc(var(--gutter) + 56px); top: 8px; margin: 0;
  height: auto; min-height: 32px; padding-block: 4px; font-size: 12px;
}
@media (min-width: 768px) {
  .ribbons--one { height: 180px; margin-top: -60px; }
  /* the -3deg band's low left end must still overlap the hero's straight bottom edge (no white wedge) */
  .ribbons--one .ribbon--logos { top: min(14px, calc(56px - 3.2vw)); }
  .ribbons--one .pause { top: calc(min(14px, 56px - 3.2vw) + 38px - (50vw - var(--gutter) - 22px) * 0.0524 - 22px); }
  .ribbons__label { top: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbons--one { height: auto; margin-top: 0; padding: 28px 0 8px; }
  .ribbons--one .ribbon--logos { top: auto; }
  .ribbons__label { position: relative; left: auto; top: auto; margin: 0 var(--gutter) 14px; }
}

.svc-stats { padding: 36px 0 0; }
.svc-stats__grid { list-style: none; padding: 0; margin-block: 0; }
.svc-stat {
  grid-column: span 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 148px; container-type: inline-size;
}
.svc-stat .num { font-size: clamp(34px, 24cqi, 64px); }
.svc-stat__k { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tile--ink .svc-stat__k { color: #fff; }
/* One strip on every service: $12M+ (sun) · $72M+ (ink) · 700+ (card) · a fourth fact (paper). Only the fourth slot
   changes: 12+ years by default, "Up to $5,000/day" on the done-for-you pages. */
.svc-stat--day { gap: 10px; }
.svc-stat__pre { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.svc-stat__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin-top: auto; }
.svc-stat--day .num { font-size: clamp(28px, 19cqi, 56px); }
.svc-stat__per { font-size: 14px; font-weight: 800; color: var(--ink); }
@media (max-width: 767px) { .svc-stat--day .num { font-size: clamp(25px, 19cqi, 34px); } }
@media (min-width: 768px) { .svc-stat__per { font-size: 17px; } }
@media (min-width: 768px) { .svc-stat { grid-column: span 3; min-height: 170px; } }
@media (min-width: 1024px) { .svc-stats { padding-top: 48px; } .svc-stat { min-height: 190px; } }

/* ---------- 4a. Topic bento (each tile pre-selects its topic on the form) ---------- */
.cover__grid { list-style: none; padding: 0; margin: 44px 0 0; }
.cover__cell { grid-column: 1 / -1; display: flex; min-width: 0; }
.cover__press { flex: 1; min-width: 0; margin: 0 6px 6px 0; }
.cover__tile { gap: 12px; padding: 22px 20px; }
.cover__icon { width: 28px; height: 28px; }
.cover__q { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.cover__a { font-size: 15px; line-height: 1.5; color: var(--n600); }
.cover__a b {
  display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.tile--ink .cover__a { color: var(--n300); }
.tile--ink .cover__a b { color: var(--y); }
.cover__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; }
.cover__go .i { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cover__press:hover .cover__go .i { transform: translateX(3px); } }
.cover__ask {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  border: 2px solid var(--ink);
}
.cover__ask-t { font-size: 17px; font-weight: 600; line-height: 1.45; max-width: 52ch; }
.cover__cell--1 .cover__q { font-size: clamp(22px, 1.2vw + 14px, 32px); line-height: 1.2; }
.cover__art { display: none; }
.cover__art .art-line { stroke: #fff; }
/* phones: the icon sits beside the question, so each topic tile is one tight block */
@media (max-width: 767px) {
  .cover__grid { margin-top: 32px; }
  .cover__tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 18px 18px 16px; }
  .cover__tile > :not(.cover__icon) { grid-column: 2; }
  .cover__icon { grid-row: 1; margin-top: 2px; }
  .cover__go { padding-top: 2px; }
}
@media (min-width: 768px) {
  .cover__cell { grid-column: span 3; }
  .cover__cell--1, .cover__cell--cta { grid-column: 1 / -1; }
  .cover__tile { padding: 24px; }
  .cover__ask { flex-direction: row; justify-content: space-between; align-items: center; padding: 24px 28px; }
}
@media (min-width: 1024px) {
  .cover__cell--1 { grid-column: 1 / 7; grid-row: 1 / 3; }
  .cover__cell--2 { grid-column: 7 / 10; grid-row: 1; }
  .cover__cell--3 { grid-column: 10 / 13; grid-row: 1; }
  .cover__cell--4 { grid-column: 7 / 10; grid-row: 2; }
  .cover__cell--5 { grid-column: 10 / 13; grid-row: 2; }
  .cover__cell--cta { grid-column: 1 / -1; grid-row: 3; }
  .cover__cell--1 .cover__tile { padding: 32px; justify-content: space-between; }
  .cover__cell--1 .cover__icon { width: 40px; height: 40px; }
  .cover__cell--1 .cover__q { max-width: 18ch; }
  .cover__cell--1 .cover__a { font-size: 17px; max-width: 27ch; }
  .cover__art { display: block; position: absolute; right: 28px; bottom: 28px; width: min(190px, 34%); }
}

/* ---------- 4b. Fit pair ---------- */
.fitcall { background: var(--n100); }
.fitcall__grid { margin-top: 40px; display: grid; gap: 16px; }
.fitcall__grid .ticks li { font-size: 16px; line-height: 1.45; }
.fitcall__no b { color: var(--y); font-weight: 700; }
@media (min-width: 1024px) { .fitcall__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---------- 4c. How it works: the time each step takes is the headline ---------- */
.how2 { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; padding-block: var(--sec); }
.how2__list { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 14px; }
.how2__step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; border-radius: var(--r-tile); background: var(--ink-2); }
.how2__step:first-child { box-shadow: inset 0 0 0 2px var(--y); }
.how2__step:not(:last-child)::after {
  content: ""; position: absolute; left: 44px; bottom: -16px; height: 18px; border-left: 2px dashed var(--y);
}
.how2__time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--y); }
.how2__time .num { font-size: clamp(52px, 2.4vw + 34px, 72px); }
.how2__unit { font-size: 16px; font-weight: 700; color: #fff; }
.how2__pre { flex-basis: 100%; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n400); }
.how2__step > p:not(.how2__time) { font-size: 15px; line-height: 1.5; color: var(--n300); }
.how2 .ph-inline { display: inline; background: var(--n900); color: var(--n400); border-color: var(--n600); }
.how2__cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.how2__micro { font-size: 15px; font-weight: 600; color: var(--n300); }
@media (max-width: 767px) {
  .how2__list { margin-top: 32px; gap: 12px; }
  .how2__step { gap: 6px; padding: 16px 18px 18px; }
  .how2__time .num { font-size: 44px; }
  .how2__step:not(:last-child)::after { left: 38px; bottom: -14px; height: 16px; }
}
@media (min-width: 768px) {
  .how2__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .how2__step:last-child { grid-column: 1 / -1; }
  .how2__step:not(:last-child)::after { display: none; }
}
@media (min-width: 1200px) {
  .how2__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .how2__step:last-child { grid-column: auto; }
  .how2__step { padding: 26px 22px 28px; }
  /* the dashed thread runs through the gaps at numeral height */
  .how2__step:not(:last-child)::after { display: block; left: auto; right: -16px; bottom: auto; top: 76px; width: 18px; height: 0; border-left: 0; border-top: 2px dashed var(--y); }
}

/* How it works (ink) straight into the case (ink): one band, not two paddings of dead black */
.how2 + .case { padding-top: 0; }

/* ---------- 4d. What you leave with ---------- */
.leave__grid { display: grid; gap: 28px; align-items: start; }
.leave__small { margin-top: 18px; max-width: 38ch; font-size: 16px; font-weight: 600; color: var(--n600); }
.leave__card { padding: 24px 22px; }
.leave__list { margin-top: 0; gap: 16px 32px; }
.leave__list li { font-size: 16px; line-height: 1.45; }
.tick--ph { background: transparent; border: 2px dashed var(--n400); color: var(--n600); }
@media (min-width: 768px) { .leave__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .leave__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .leave__card { padding: 36px; }
}

/* ---------- 4e. Case extras (the homepage .case system does the rest) ---------- */
.case__eyebrow { margin-bottom: 22px; }
/* the ask tile keeps its natural height beside the tall screenshot (no dead yellow block) */
@media (min-width: 768px) { .case__grid > .case__cta { align-self: start; justify-content: flex-start; } }
.case__grid > .case__shot--g { grid-column: 1 / -1; grid-row: auto; }
@media (min-width: 1024px) {
  .case__grid > .case__shot--g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 20px; }
}

/* ---------- 4f. Testimonials: one large tile + three ---------- */
.quotes { background: var(--n100); }
.quotes .tile--paper { background: #fff; }
.quotes__grid { margin-top: 44px; display: grid; gap: 12px; }
/* phones: the homepage's testimonial swipe row (site.css .voices__grid), so four quotes cost one card of height */
@media (max-width: 767px) {
  .quotes__grid {
    margin: 40px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 12px;
    display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .quotes__grid > .quote { flex: 0 0 86%; scroll-snap-align: start; }
  .js .quotes__grid > .reveal { opacity: 1; transform: none; transition: none; }
}
.quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 16px; line-height: 1.55; }
.quote--lead { padding: 28px 24px; justify-content: space-between; }
.quote--lead blockquote p { font-size: clamp(21px, 0.9vw + 15px, 28px); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.quote__mark { width: 44px; height: auto; fill: var(--y); }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; line-height: 1.3; }
.quote__by > span { display: flex; flex-direction: column; gap: 2px; }
.quote__by b { font-size: 15px; }
.quote__by span span { font-size: 13px; color: var(--n600); }
.tile--ink .quote__by span span, .sum .quote__by span span { color: var(--n300); }
.quote__av { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; filter: grayscale(1); }
.tile--ink .quote__av { border-color: #fff; }
.quote__av--logo { border-radius: 12px; background: #fff; object-fit: contain; padding: 3px; filter: none; }
.quotes__next { margin-top: 32px; }
@media (min-width: 768px) {
  .quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .quote--lead { grid-column: 1 / -1; padding: 36px; }
}
@media (min-width: 1024px) {
  .quotes__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .quote--lead { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 440px; }
  .quotes__grid > .quote:nth-child(2) { grid-column: 6 / 13; grid-row: 1; }
  .quotes__grid > .quote:nth-child(3) { grid-column: 6 / 9; grid-row: 2; }
  .quotes__grid > .quote:nth-child(4) { grid-column: 9 / 13; grid-row: 2; }
}

/* ---------- 4g. About (who you'll talk to) ---------- */
.svc-about__grid > * { grid-column: 1 / -1; }
.svc-about__photo { min-height: 380px; padding: 0; }
.svc-about__blob { width: 72%; }
.svc-about__disc {
  position: absolute; left: 50%; top: 42%; width: min(80%, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--y);
}
.svc-about__cutout { position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; max-width: none; transform: translateX(-50%); }
.svc-about__text { padding: 12px 0 4px; overflow: visible; }
.svc-about__tag { margin-bottom: 20px; }
.svc-about__text .h2 { max-width: 16ch; }
.svc-about__body { margin-top: 20px; max-width: 60ch; color: var(--ink-3); }
.svc-about__spec { margin-top: 18px; font-size: 15px; font-weight: 700; }
.svc-about__tools { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-about__tools li { display: grid; place-items: center; width: 52px; height: 52px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.svc-about__tools img { width: 58%; height: auto; }
.svc-about__stats { list-style: none; margin: 0; display: grid; gap: 20px; align-content: center; }
.svc-about__stats li { display: flex; flex-direction: column; gap: 4px; }
.svc-about__stats .num { font-size: clamp(40px, 2vw + 26px, 56px); }
.svc-about__stats li > span:last-child { font-size: 15px; font-weight: 600; color: #fff; }
@media (max-width: 767px) { .svc-about__photo { display: none; } }
@media (min-width: 768px) {
  .svc-about__photo { grid-column: 1 / 4; grid-row: 1 / 3; min-height: 480px; }
  .svc-about__text { grid-column: 4 / 7; grid-row: 1; padding-left: 12px; }
  .svc-about__stats { grid-column: 4 / 7; grid-row: 2; }
}
@media (min-width: 1024px) {
  .svc-about__photo { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 600px; }
  .svc-about__text { grid-column: 6 / 13; padding: 8px 0 12px 28px; }
  .svc-about__stats { grid-column: 6 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 28px 32px; }
}

/* ---------- 4h. Price (one big tile, proof beside it) ---------- */
.price { background: var(--n100); }
.price__grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.price__card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 22px 24px; margin-right: 8px;
  background: var(--y); --focus: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
}
.price__sticker { position: absolute; top: -17px; right: 18px; }
.price__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.price__big .cur { font-size: 18px; font-weight: 800; }
.price__big .num { font-size: clamp(48px, 3.6vw + 38px, 96px); letter-spacing: -0.045em; }
.price__per { margin-top: -6px; font-size: 16px; font-weight: 700; }
.price__list { margin-top: 2px; }
.price__list .tick { background: var(--ink); color: var(--y); }
.price__card .tick--ph { background: transparent; border-color: var(--ink-3); color: var(--ink-3); }
.price__card .ph-inline { background: #fff; color: var(--ink-3); border-color: var(--ink-3); }
.price__due { padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; font-size: 15px; font-weight: 600; }
.price__due b { font-weight: 800; }
.price__pay { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.price__side { display: grid; gap: 16px; }
.price__quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.price__quote blockquote { margin: 0; }
.price__quote blockquote p { font-size: 19px; font-weight: 600; line-height: 1.45; }
.price__more { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.price__more p { color: var(--ink-3); }
.price__policy { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.price__policy li { display: flex; align-items: flex-start; gap: 8px; }
.price__policy .i { width: 18px; height: 18px; margin-top: 1px; stroke-width: 3; }

/* Round 7: the booking form's length-dependent bits (strategy-call.js toggles [hidden]) */
[data-len-only][hidden] { display: none !important; }

/* Round 7: two call lengths (strategy call price fold: 30 min and 1 hour side by side, proof row below) */
.price__lead { margin-top: 12px; max-width: 60ch; }
.price__grid.price__grid--two { margin-top: 40px; }
.price__card--alt { background: #fff; }
.price__grid--two .price__card .btn--block { margin-top: auto; }
.price__due--wide { margin-top: 28px; max-width: 920px; }
.price__side--row { margin-top: 28px; }
.price__stack { display: grid; gap: 16px; align-content: start; }
.svc-price--2 { margin-top: -8px; }
@media (min-width: 768px) {
  .price__grid.price__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
}
@media (min-width: 1024px) {
  .price__side--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
}

/* proof at the decision: one short verbatim quote right under a decision CTA (price card, closing slide, folds) */
.cta-proof {
  margin: 4px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start;
  max-width: 50ch; text-align: left;
}
.cta-proof__mark { grid-row: 1 / 3; width: 26px; height: auto; margin-top: 4px; fill: currentColor; }
.cta-proof > .quote__av { grid-row: 1 / 3; width: 40px; height: 40px; }
.cta-proof blockquote { margin: 0; }
.cta-proof blockquote p { font-size: 15px; font-weight: 600; line-height: 1.45; }
.cta-proof figcaption { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
.cta-proof figcaption b { color: var(--ink); font-weight: 800; }
.cta-proof .rv__stars { margin-left: 4px; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.final__micro + .cta-proof, .how2__cta + .cta-proof, .gb-fit__foot .cta-proof, .aca-fit__proof { margin-top: 18px; }
.how2 .cta-proof, .tile--ink .cta-proof { color: #fff; }
.how2 .cta-proof .cta-proof__mark, .tile--ink .cta-proof .cta-proof__mark { fill: var(--y); }
.how2 .cta-proof figcaption, .tile--ink .cta-proof figcaption { color: var(--n300); }
.how2 .cta-proof figcaption b, .tile--ink .cta-proof figcaption b { color: #fff; }
.how2 .cta-proof .quote__av, .tile--ink .cta-proof .quote__av { border-color: #fff; }
@media (min-width: 1024px) {
  .price__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; }
  .price__card { padding: 44px 36px 32px; }
}

/* ---------- 4i. Closing slide: the homepage .final on every service (copy, stickers, the look-away cutout).
   Only the words change per service; nothing in it tilts except the stickers. ---------- */
/* FAQ: the first five questions, then the rest behind one "More questions" disclosure (still in the page, for search) */
.faq__more { margin-top: 2px; }
.faq__more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 2px; cursor: pointer; list-style: none;
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.faq__more > summary::-webkit-details-marker { display: none; }
.faq__more > summary .i { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.faq__more[open] > summary .i { transform: rotate(180deg); }
.faq__more > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.faq__more-list { display: grid; gap: inherit; margin-top: 10px; }
.faq__list .faq__more-list { gap: 12px; }
.final__micro { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
/* the closing H2 never outranks the hero H1: the same type token */
.final--svc .final__h { max-width: 14ch; font-size: clamp(34px, 2.6vw + 22px, 64px); line-height: 0.95; text-wrap: balance; }
/* at most two stickers, each on one line (site.css lets them wrap inside the pill) */
.final--svc .final__stickers .sticker { white-space: nowrap; }
/* safety: a closing slide without the cutout keeps its bottom padding on phones */
.final--svc:not(:has(.final__cutout)) { padding-bottom: var(--sec); }

/* ---------- 4j. Safety net ---------- */
.safety { padding: 36px 0 44px; }
.safety__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 32px; }
.safety__label { flex-basis: 100%; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .safety__label { flex-basis: auto; } }

/* ---------- 4k. Symptom picker ("Sound familiar?"): both done-for-you pages, one component.
   Latching keys in a GET form to quote.html (works without JS); a page script keeps the tally. ---------- */
.sym__form { margin-top: 40px; }
.sym__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.sym__grid { list-style: none; padding: 0; margin: 0; }
.sym__cell { grid-column: 1 / -1; display: flex; min-width: 0; }
.sym__press { flex: 1; min-width: 0; margin: 0 6px 6px 0; cursor: pointer; }
.sym__press > .sym__tile {
  gap: 12px; padding: 20px 20px 22px;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.sym__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.sym__icon { width: 28px; height: 28px; }
.sym__box {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border: 2px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sym__box .i { width: 18px; height: 18px; stroke-width: 3.5; opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 160ms var(--ease-out); }
.sym__q { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.sym__a { font-size: 15px; line-height: 1.5; color: var(--n600); transition: color 160ms ease; }
.sym__a b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
/* the stamp sits between the icon and the box, and only exists once the key is latched */
.sym__stamp {
  position: absolute; right: 42px; top: 50%; margin-top: -15px;
  height: 30px; padding: 0 11px; font-size: 11px;
  opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.6); pointer-events: none;
  transition: opacity 120ms ease, transform 160ms var(--ease-out);
}

/* latched: the key stays pressed into its shadow layer and turns ink */
.sym__press input:checked + .sym__tile { transform: translate(4px, 4px); background: var(--ink); border-color: var(--ink); color: #fff; }
.sym__press input:checked + .sym__tile .sym__a { color: var(--n300); }
.sym__press input:checked + .sym__tile .sym__a b { color: var(--y); }
.sym__press input:checked + .sym__tile .sym__icon { color: var(--y); }
.sym__press input:checked + .sym__tile .sym__box { background: var(--y); border-color: var(--y); }
.sym__press input:checked + .sym__tile .sym__box .i { opacity: 1; transform: none; }
.sym__press input:checked + .sym__tile .sym__stamp {
  opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1);
  transition: opacity 140ms ease, transform 320ms var(--spring-pop);
}
.sym__press input:focus-visible + .sym__tile { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--y); }
.sym__press:active > .sym__tile { transform: translate(3px, 3px) scale(0.985); transition-duration: 100ms; }
.sym__press:active input:checked + .sym__tile { transform: translate(4px, 4px) scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .sym__press:hover input:not(:checked) + .sym__tile .sym__box { background: var(--y-100); }
}

.sym__cell--tally { display: block; }
.sym__tally { display: flex; flex-direction: column; gap: 16px; border: 2px solid var(--ink); padding: 24px 22px; }
.sym__count { display: flex; align-items: flex-end; gap: 12px; }
.sym__n { display: inline-block; min-width: 0.62em; font-size: clamp(72px, 4vw + 52px, 112px); letter-spacing: -0.05em; line-height: 0.82; }
.sym__of { padding-bottom: 4px; font-size: 16px; font-weight: 700; line-height: 1.25; max-width: 13ch; }
.sym__msg { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-3); max-width: 44ch; }
.sym__go { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sym__carry { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.sym__carry .i { width: 16px; height: 16px; stroke-width: 3; }
@media (max-width: 559px) { .sym__go .btn { display: flex; width: calc(100% - 4px); } }
@media (min-width: 768px) {
  .sym__cell { grid-column: span 3; }
  .sym__cell--tally { grid-column: 1 / -1; }
  .sym__tally { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; padding: 26px 30px; }
  .sym__go { align-items: flex-end; }
}
/* tablets: the button takes its own row, so the message keeps a readable measure */
@media (min-width: 768px) and (max-width: 1023px) {
  .sym__tally { grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; }
  .sym__go { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
}
@media (min-width: 1024px) {
  .sym__cell { grid-column: span 4; }
  .sym__cell--tally { grid-column: 1 / -1; }
  .sym__press > .sym__tile { padding: 22px 24px 24px; }
}

@media (max-width: 767px) {
  .sym__press > .sym__tile { gap: 10px; padding: 16px 18px 18px; }
  .sym__press input:not(:checked) + .sym__tile .sym__a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sym__press input:checked + .sym__tile { transform: none; }
  .sym__press:active > .sym__tile, .sym__press:active input:checked + .sym__tile { transform: none; }
  .sym__stamp { transform: rotate(var(--rot, 0deg)); }
}
@media (forced-colors: active) {
  .sym__press input:checked + .sym__tile { outline: 3px solid Highlight; }
}

/* ---------- 5. Slim footer + sticky mobile CTA bar ---------- */
.foot--slim { padding: 44px 0 20px; }
.foot--slim__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.foot--slim__brand { display: grid; gap: 6px; }
.foot--slim__brand .foot__logo { margin-bottom: 8px; }
.foot--slim .socials { margin-top: 0; }
.foot--slim .foot__bottom { margin-top: 28px; align-items: center; }
.foot .foot--slim__legal { display: flex; gap: 22px; }
.foot .foot--slim__legal a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.foot--step { padding: 24px 0; }
.foot--step .foot__bottom { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }

@media (max-width: 767px) {
  .js .bar--svc { align-items: center; gap: 12px; padding: 8px 8px 12px 16px; }
  .bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 600; color: var(--n600); }
  .bar__info b { font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .bar--svc .bar__book { flex: none; margin: 0 4px 4px 0; }
  /* done-for-you: the CTA already says "free ... review", so the button takes the whole bar */
  .bar--cta-only .bar__info { display: none; }
  .bar--cta-only .bar__book { flex: 1; }
  .bar--cta-only .bar__book .btn__face { justify-content: center; }
}

/* ---------- 6. Step page shell + sticky summary ---------- */
.step-page { background: var(--n100); }
.step { padding: 84px 0 var(--sec); }
.step__head { margin-bottom: 20px; }
.step__h1 { font-size: clamp(30px, 2.4vw + 20px, 52px); max-width: 18ch; }
.step__sub { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--ink-3); }
@media (min-width: 768px) { .step__head { margin-bottom: 28px; } .step__sub { margin-top: 12px; font-size: var(--t-lead); } }
/* desktop-only second sentence of a step sub (phones keep it to one line) */
@media (max-width: 767px) { .step__sub-x { display: none; } }
.step__grid { display: grid; gap: 20px; align-items: start; }
.step__main { min-width: 0; }
@media (min-width: 768px) { .step { padding-top: 116px; } }
/* the summary follows the form in the DOM (keyboard order on desktop); on phones and tablets its bar shows first */
@media (max-width: 1023px) { .step__grid > .sum { order: -1; } }
@media (min-width: 1024px) {
  .step { padding-top: 128px; }
  .step__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 36px; }
  .step__main { grid-column: 1; grid-row: 1; }
  .sum { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
}

.sum { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; border-radius: var(--r-tile); overflow: hidden; }
.sum__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 16px; border: 0; background: none; color: inherit; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.35;
}
.sum__bar-t b { font-weight: 800; }
html:not(.js) .sum__bar { display: none; }
.sum__bar-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; font-weight: 700; color: var(--y); }
.sum__bar-btn .i { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.sum.is-open .sum__bar-btn .i { transform: rotate(180deg); }
.sum__body { padding: 8px 20px 22px; display: grid; gap: 14px; }
.js .sum:not(.is-open) .sum__body { display: none; }
.sum__tag { justify-self: start; }
.sum__title { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sum__price { display: flex; align-items: baseline; gap: 6px; color: var(--y); }
.sum__price .cur { font-size: 15px; font-weight: 800; }
.sum__price .num { font-size: clamp(44px, 2vw + 32px, 56px); letter-spacing: -0.04em; }
.sum__format { margin-top: -8px; font-size: 14px; font-weight: 600; color: var(--n300); }
.sum__format > span { display: block; }   /* one fact per line, no dot strings */
/* done-for-you summaries: the management fee under the free review */
.sum__mgmt { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--ink-2); font-size: 14px; font-weight: 600; color: var(--n300); }
.sum__mgmt b { color: #fff; font-weight: 800; }
.sum__list { margin-top: 0; }
.sum__list li { color: #fff; }
.sum .tick--ph { border-color: var(--n600); color: var(--n400); }
.sum .ph-inline { background: var(--n900); color: var(--n400); border-color: var(--n600); }
.sum__topic { padding: 10px 12px; border-radius: 12px; background: var(--ink-2); font-size: 14px; font-weight: 600; color: var(--n300); }
.sum__topic b { color: #fff; }
.sum__due { display: flex; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--n800); font-size: 14px; font-weight: 700; line-height: 1.45; color: #fff; }
.sum__due .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--y); stroke-width: 3; }
.sum__quote { margin: 0; padding-top: 14px; border-top: 1px solid var(--n800); display: grid; gap: 12px; }
.sum__quote blockquote { margin: 0; }
.sum__quote p { font-size: 14px; line-height: 1.5; color: var(--n300); }
.sum__trust { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid var(--n800); display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.sum__trust li { display: flex; align-items: flex-start; gap: 8px; }
.sum__trust .i { width: 18px; height: 18px; margin-top: 1px; color: var(--y); stroke-width: 3; }
@media (min-width: 1024px) {
  .sum__bar { display: none; }
  .js .sum:not(.is-open) .sum__body { display: grid; }
  .sum__body { padding: 26px 26px 26px; }
}

/* ---------- 7. Form ---------- */
.fx {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
  margin-right: 8px; overflow: hidden;
}
html:not(.js) [data-am-form] { display: none; }
.fx-fallback { display: none; }
html:not(.js) .fx-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 1023px) { html:not(.js) .step__main { order: -1; } }   /* phones without JS: the WhatsApp button comes first */
.fx-fallback p { font-size: 17px; font-weight: 600; }

/* progress (endowed: the bar starts with a sliver) */
.fx__head { background: var(--y); --focus: var(--ink); padding: 18px 20px 16px; border-bottom: 2px solid var(--ink); }
.fx-progress__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.fx-progress__count { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx__head .fx-req-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.fx-progress__bar { position: relative; height: 14px; margin-top: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.fx-progress__bar > span {
  position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0.08);
  transition: transform 280ms var(--ease-out);
}
.fx-progress__labels {
  list-style: none; padding: 0; margin-top: 12px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-3); counter-reset: fxstep;
}
.fx-progress__labels li { display: flex; align-items: center; gap: 6px; min-width: 0; counter-increment: fxstep; }
.fx-progress__labels li[data-pre] { counter-increment: none; }
/* numbered pips: a step marker, never a radio ring. Future: white with an ink numeral. Current: ink with a sun numeral.
   Done: ink with a sun tick. */
.fx-progress__labels li::before {
  content: counter(fxstep); flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease, color 160ms ease;
}
.fx-progress__labels li.is-current { color: var(--ink); font-weight: 800; }
.fx-progress__labels li.is-current::before { background: var(--ink); color: var(--y); }
.fx-progress__labels li.is-done::before {
  content: ""; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* phones: every step keeps its numbered pip, only the current step shows its name */
@media (max-width: 479px) {
  .fx-progress__labels li:not(.is-current) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.fx__body { padding: 24px 20px 26px; }
@media (min-width: 768px) {
  .fx__head { padding: 22px 32px 18px; }
  .fx__body { padding: 32px 32px 30px; }
}
.fx-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.fx-step__legend { padding: 0; margin-bottom: 22px; }
.fx-step__title { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.fx-step__title:focus { outline: none; }
.fx-step__title:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* fields: .field (site.css) + .fx-field */
.fx-field { margin: 0 0 24px; }
.fx .field__input { transition: border-color 120ms ease; }   /* site.css also tweens box-shadow: the 3px halo snaps on instead */
.fx .field__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fx-phone__cc:has(select:focus-visible) .fx-phone__face { outline: 3px solid var(--ink); outline-offset: 2px; }
fieldset.fx-field { border: 0; padding: 0; min-width: 0; display: block; }
fieldset.fx-field > legend { padding: 0; margin-bottom: 6px; }
/* a group in error: the question turns red and its message sits under it; the options stay neutral */
fieldset.fx-field.is-invalid > legend, fieldset.fx-field.is-invalid > legend .field__label { color: var(--err); }
.fx-req-note { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--n600); }
.fx-req-note b { color: var(--ink); }
.fx-field > .field__hint { margin-top: -2px; }
fieldset.fx-field > .field__hint { margin: 0 0 12px; }
.fx-field .field__err { margin-top: 8px; }
.fx-opt-label { font-weight: 500; color: var(--n600); }
.fx-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fx-counter { flex: none; font-size: 13px; font-weight: 600; color: var(--n600); font-variant-numeric: tabular-nums; }

/* radio cards reuse the homepage quiz option (.opt): here they wrap a real input */
.fx-opts { margin-top: 2px; }
.opt__title { flex: 1; }
.opt__sub { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.opt__body { flex: 1; min-width: 0; }
.opt input:checked + .opt__face, .opt.is-checked .opt__face { background: var(--y); }
.opt input:checked + .opt__face .opt__ok, .opt.is-checked .opt__ok { opacity: 1; transform: none; }
.opt input:focus-visible + .opt__face { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--y); }
.fx .opt__face { min-height: 60px; font-size: 16px; }
@media (max-width: 559px) {
  .fx-opts.opts--2:not(:has(.opt__sub, .opt__body)) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-opts.opts--2:not(:has(.opt__sub, .opt__body)) .opt__face {
    position: relative; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px;
    padding: 12px 12px 14px; font-size: 15px; line-height: 1.25;   /* the tick sits on the icon row, so the label gets the full width */
  }
  .fx-opts.opts--2:not(:has(.opt__sub, .opt__body)) .opt__ok { position: absolute; top: 10px; right: 10px; margin: 0; }
}
a.opt { color: inherit; text-decoration: none; }

/* chips (radio or checkbox) */
.fx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-chip__face {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background-color 120ms ease, transform 160ms var(--ease-out), box-shadow 0ms;
}
.fx-chip input:checked + .fx-chip__face { background: var(--y); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.fx-chip input:focus-visible + .fx-chip__face { outline: 3px solid var(--ink); outline-offset: 3px; }
.fx-chip:active .fx-chip__face { transform: scale(0.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
  .fx-chip:hover input:not(:checked) + .fx-chip__face { background: var(--y-100); }
}

/* phone: country code (a native select under a readable face) + number */
.fx-phone { display: flex; gap: 8px; }
.fx-phone__cc { position: relative; flex: none; width: 96px; }
.fx-phone__face {
  display: flex; align-items: center; height: 52px; padding: 0 28px 0 14px;
  border: 2px solid var(--n500); border-radius: var(--r-btn); background: #fff;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fx-phone__sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.fx-phone__cc .i { position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; stroke-width: 2.5; }
.fx-phone__cc:focus-within .fx-phone__face { border-color: var(--ink); box-shadow: 0 0 0 3px var(--y); }
.fx-phone .field__input { flex: 1; min-width: 0; }
.fx-field.is-invalid .fx-phone__face { border-color: var(--err); }

/* checks (site.css .check) in forms */
.fx-checks { display: grid; gap: 8px; margin-bottom: 22px; }
.fx-checks .fx-field { margin: 0; }
.fx-field.is-invalid .check__box { border-color: var(--err); }

/* fit note (never blocks) and info note */
.fx-note {
  display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px;
  border: 2px solid var(--ink); border-radius: var(--r-in); background: var(--y-100);
  font-size: 15px; line-height: 1.45;
}
.fx-note__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.fx-note .link { padding-block: 6px; }
.fx-note--info { background: var(--paper); border-style: dashed; border-color: var(--n500); }

/* error summary: when it scrolls into view, the sticky header and the yellow progress band stay visible above it */
[data-am-form] { scroll-margin-top: 96px; }
[data-error-summary] { scroll-margin-top: 220px; }
.fx-summary { margin-bottom: 22px; padding: 14px 16px; border: 2px solid var(--err); border-radius: var(--r-btn); background: #fff; }
.fx-summary:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.fx-summary__h { font-size: 16px; font-weight: 800; line-height: 1.4; letter-spacing: 0; color: var(--err); }
.fx-summary ul { margin: 6px 0 0; padding-left: 20px; }
.fx-summary li::marker { color: var(--err); }
.fx-summary a { display: inline-block; padding: 4px 0; font-weight: 700; color: var(--ink); text-decoration-color: var(--err); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* nav + submit */
.fx-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--n200); }
.fx-nav .btn { margin: 0 4px 4px 0; }
.fx-nav .fx-nav__next { margin-left: auto; }
@media (max-width: 559px) {
  .fx-nav { flex-direction: column-reverse; align-items: stretch; }
  .fx-nav .btn { display: flex; width: calc(100% - 4px); }
  .fx-nav .fx-nav__next { margin-left: 0; }
}
.fx-submit { display: grid; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--n200); }
.fx-submit .btn { margin: 0 4px 4px 0; }
.fx-submit .fx-nav { margin-top: 4px; padding-top: 0; border-top: 0; }
.fx-micro { font-size: 14px; font-weight: 700; }
.fx-privacy { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--n600); }
.fx-privacy .i { width: 16px; height: 16px; margin-top: 1px; }
.fx-privacy a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fx .btn[aria-busy="true"] .btn__face { background: var(--n200); }
.fx .btn[aria-busy="true"] .spinner { display: inline-block; }
.fx .btn:disabled { cursor: default; }
.fx-status {
  margin-top: 14px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--r-btn);
  background: var(--y-100); font-size: 14px; font-weight: 700;
}
.fx-status a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fx-neterr { margin-top: 16px; padding: 14px 16px; border: 2px solid var(--err); border-radius: var(--r-btn); font-size: 15px; font-weight: 600; }
.fx-neterr:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.fx-neterr__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fx-restore {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 22px; padding: 12px 14px 12px 16px; border: 2px solid var(--ink); border-radius: var(--r-in); background: var(--y-100);
  font-weight: 700;
}
.fx-restore__acts { display: flex; align-items: center; gap: 16px; }
.fx-restore .btn { margin: 0 4px 4px 0; }
.fx-suggest {
  justify-self: start; margin-top: 6px; padding: 6px 0; border: 0; background: none;
  font-size: 14px; font-weight: 700; text-align: left;
  text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 3px; text-underline-offset: 4px;
}

/* file upload (payment proof) */
.fx-file {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px;
  border: 2px dashed var(--n500); border-radius: var(--r-in); background: var(--paper); text-align: center; cursor: pointer;
}
.fx-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fx-file:focus-within { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 3px; }
.fx-file .i { width: 26px; height: 26px; }
.fx-file__t { font-weight: 700; }
.fx-file__s { font-size: 13px; color: var(--n600); }
.has-file .fx-file { border-style: solid; border-color: var(--ink); background: #fff; }
.fx-file__preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.fx-file__preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); }

/* payment method options: .opt cards; a gated one can be disabled ("coming soon") */
.is-disabled .opt__face { background: var(--n100); color: var(--n600); border-style: dashed; cursor: not-allowed; }
.opt.is-disabled::before, .is-disabled > .opt::before { display: none; }

/* enclosed payment block (lock, accounts, copy buttons) */
.paybox { display: grid; gap: 14px; padding: 18px; border: 2px solid var(--ink); border-radius: var(--r-in); background: #fff; }
.paybox__h { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.paybox__h .i { width: 20px; height: 20px; }
.paybox__acct { padding: 14px; border-radius: 12px; background: var(--n100); }
.paybox__name { margin-bottom: 8px; font-weight: 800; }
.paybox__rows { display: grid; gap: 6px; margin: 0; }
.paybox__rows > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }
.paybox__rows dt { font-size: 13px; font-weight: 600; color: var(--n600); }
.paybox__rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.paybox__help, .paybox__remark { font-size: 14px; font-weight: 600; color: var(--n600); }
.paybox__remark b { color: var(--ink); }
.copy {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: background-color 120ms ease, transform 100ms var(--ease-out);
}
.copy::after { content: ""; position: absolute; inset: -5px; }
html:not(.js) .copy { display: none; }   /* without JS the numbers stay selectable text */
.copy .i { width: 14px; height: 14px; }
.copy.is-copied { background: var(--y); }
.copy:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .copy:hover { background: var(--y-100); } .copy.is-copied:hover { background: var(--y); } }

/* ---------- 8. Thank-you ----------
   One hand-off hero on every service (while formEndpoint is empty, this button IS the lead capture):
   status sticker, H1, ref pill, one instruction, the WhatsApp button, one helper line. Nothing else. */
.ty2 .ty-h1 { max-width: 15ch; }
/* One hero on every service. Hand-off mode: "One last tap", "Almost done, {name}.", the ref chip, one instruction, one
   "Send on WhatsApp" button. Endpoint mode: "Received" and the route headline. The inline early snippet under the hero
   applies mode / route / status / name / ref while the page parses, so the first paint is already the right variant. */
.ty2__ref { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; font-size: 13px; font-weight: 700; }

.ty2__ref b { font-variant-numeric: tabular-nums; }
.ty2 .ty-sub { margin-top: 16px; }
/* hand-off mode, the route's framing in one line under the H1 (A: strong fit, C: still a personal reply) */
.ty2__route { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.4; max-width: 44ch; }
.ty2__route + .ty-sub { margin-top: 8px; }
.ty2 .ty-note { margin-top: 12px; padding: 0; background: none; border: 0; border-radius: 0; font-size: 15px; font-weight: 700; }
.ty2__cta { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.ty2__under { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ty2 .ty2__cta + .ty-note, .ty2 .ty2__under + .ty-note { margin-top: 10px; }
.ty2 .ty-stamp .i { width: 14px; height: 14px; stroke-width: 3.5; }
@media (max-width: 559px) { .ty2__cta .btn { display: flex; width: calc(100% - 4px); } }
/* the portrait's <picture> serves a 1px gif below 768px (the tile is hidden there), so phones never fetch it */
.ty-hero__photo picture { display: contents; }
/* phones: the timeline and the one next offer come straight after the button (the portrait is a desktop device) */
@media (max-width: 767px) {
  .ty2 .ty-hero__photo { display: none; }
  .ty2 .ty-hero__copy { padding-bottom: 44px; }
}

.tl__grid { margin-top: 40px; display: grid; gap: 28px; align-items: start; }
.tl__list { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tl__list::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 22px; border-left: 2px dashed var(--ink); }
.tl__item { position: relative; display: grid; gap: 4px; margin-left: 38px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--r-in); background: #fff; }
.tl__item::before {
  content: ""; position: absolute; left: -37px; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff;
}
.tl__item--now { background: var(--y); box-shadow: 4px 4px 0 var(--ink); }
.tl__item--now::before { background: var(--ink); box-shadow: inset 0 0 0 4px var(--y); }
.tl__when { font-size: 14px; font-weight: 800; }
.tl__what { font-size: 16px; line-height: 1.45; }
.tl__side { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .tl__item { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: 16px; }
}
@media (min-width: 1024px) {
  .tl__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; }
  .tl__side { position: sticky; top: 96px; }
}
.fx-cal { min-height: 200px; padding: 24px; border-radius: var(--r-tile); }
.fx-cal .i { width: 32px; height: 32px; color: var(--n600); }
.fx-cal__cap { font-size: 14px; font-weight: 600; color: var(--n600); }
.fx-cal.has-frame { padding: 0; background: none; border: 0; min-height: 0; }
.fx-cal__frame { display: block; width: 100%; height: 680px; border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; }
.cal-intro { display: grid; gap: 4px; }
.cal-intro p { color: var(--n600); font-size: 15px; }

.paynow > summary { font-size: 17px; }
.paynow__body { display: grid; gap: 14px; }
.paynow__body > p { color: var(--ink-3); }

.ty2-more { background: var(--n100); }
.ty2-more__grid { display: grid; gap: 16px; }
.prep { display: flex; flex-direction: column; gap: 14px; }
.prep > p { color: var(--n300); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.check--dark .check__box { border-color: #fff; background: transparent; color: var(--ink); }
.check--dark input:checked + .check__box { background: var(--y); border-color: var(--y); }
.check--dark input:focus-visible + .check__box { outline-color: var(--y); }
.check--dark input:checked ~ span:last-child { color: var(--n400); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.next-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.next-offer > p:not(.sticker) { color: var(--ink-3); }
.next-offer .sticker { height: auto; min-height: 32px; white-space: normal; padding-block: 4px; }
.help-line { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 600; }
@media (min-width: 1024px) { .ty2-more__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; } }

/* ---------- 9. Hub ---------- */
.hub-hero { position: relative; overflow: clip; background: var(--y); --focus: var(--ink); padding: 108px 0 72px; }
.hub-hero__blob { width: 150px; }
@media (min-width: 768px) { .hub-hero__blob { width: clamp(220px, 24vw, 380px); top: -30px; left: -60px; } }
.hub-hero__grid { position: relative; display: grid; gap: var(--gap); }
.hub-hero__copy { position: relative; min-width: 0; }
/* the service H1 token (never larger than the homepage H1), two lines: WAYS TO WORK / WITH MOIZ. */
.hub-hero .h1 { font-size: clamp(38px, 2.6vw + 22px, 64px); line-height: 0.95; max-width: 14ch; text-wrap: balance; }
.hub-hero__portrait { display: none; }
.hub-hero__lead { margin-top: 20px; max-width: 48ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-3); }
.hub-hero__stickers { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.hub-hero__stickers .sticker { height: auto; min-height: 32px; padding-block: 5px; white-space: nowrap; }
.hub-hero__portrait .pause { left: 16px; bottom: 16px; }
.hub-hero__sparkle { right: var(--gutter); bottom: 40px; }
@media (min-width: 1024px) {
  .hub-hero { padding: 120px 0 64px; }
  .hub-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
  .hub-hero__copy { grid-column: 1 / 8; }
  .hub-hero__portrait { display: block; position: relative; grid-column: 8 / 13; height: 420px; padding: 0; overflow: visible; }
  .hub-hero__portrait .svc-hero__cutout { height: 94%; }
  .hub-hero__portrait .ring { width: 116px; height: 116px; top: -34px; left: -36px; right: auto; }
  .hub-hero__portrait .ring__num { font-size: 20px; }
  .hub-hero__portrait .ring__num small { font-size: 9px; }
  .hub-hero__sparkle { bottom: 28px; }
}

.hub-list { padding-top: 80px; padding-bottom: 48px; }
.hub-stairs { margin-top: 0; }
.hub-stairs .offer__cta { margin-top: auto; }
.hub-stairs .offer__meta { margin-top: -2px; }
.hub-dfy { display: grid; gap: 40px; }
.hub-dfy .offer { height: 100%; }
@media (min-width: 768px) {
  .hub-dfy { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 1360px) {
  .hub-stairs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hub-dfy { grid-column: auto; display: flex; flex-direction: column; gap: 30px; }
  .hub-dfy .offer { flex: 1; height: auto; }
}
.hub-list__foot { margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--n600); max-width: 70ch; }

.hub-help { background: var(--n100); padding-block: 56px; }
.hub-help__tile {
  display: grid; gap: 22px; padding: 26px 20px; margin-right: 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
}
.hub-help__tile .h3 { max-width: 14ch; }
.hub-help__tile > div > p { margin-top: 10px; color: var(--ink-3); max-width: 36ch; }
.hub-help .opt__face { min-height: 88px; align-items: center; }
.hub-help .opt__face b { display: block; font-size: 17px; }
.hub-help .opt__face small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.hub-help .opt__go { margin-left: auto; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hub-help a.opt:hover .opt__go { transform: translateX(3px); } }
.hub-help__wa { margin-top: 4px; }
@media (min-width: 1024px) {
  .hub-help__tile { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; padding: 32px 40px; }
  .hub-help__tile .opts { grid-template-columns: 1fr 1fr; }
}

/* ---------- 10. Motion (transform / opacity / clip-path only) + reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .svc-hero__portrait[data-enter] { animation-name: tileRise; }   /* holds the LCP image: rises, never fades */
  .js .ring { animation: stickerIn 320ms var(--spring-pop) 380ms both; }
  .js [data-pops] .pop { opacity: 0; }
  .js [data-pops].is-in .pop { animation: pop 300ms var(--spring-pop) 220ms both; }
  .js [data-pops].is-in .pop:nth-child(2) { animation-delay: 280ms; }
  .js [data-pops].is-in .pop:nth-child(3) { animation-delay: 340ms; }
  .js .ty2 .ty-stamp { animation: stamp 320ms var(--spring-pop) 120ms both; }
  .js .tl__list .reveal { --ry: 10px; }
  .js .hub-hero__portrait[data-enter] { animation-name: tileRise; }
  /* the staircase builds left to right: the done-for-you pair on the top step rises last */
  @media (min-width: 1360px) {
    .js .hub-stairs.is-in .hub-dfy .offer { transition-delay: 280ms; }
    .js .hub-stairs.is-in .hub-dfy .offer + .offer { transition-delay: 320ms; }
    .js .hub-stairs.is-in .hub-dfy .offer__sticker { animation-delay: 520ms; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ring__svg { animation: none !important; }
  .fx-chip:active .fx-chip__face { transform: none; }
  .fx-chip input:checked + .fx-chip__face { transform: none; }
  .fx-progress__bar > span { transition: none; }
  .copy:active { transform: none; background: var(--y-600); }
}
/* without JS the motion toggle and the one-tap answers would do nothing */
html:not(.js) [data-pause], html:not(.js) [data-onetap] { display: none; }
@media (forced-colors: active) {
  .fx-progress__bar > span { background: Highlight; }
  .opt input:checked + .opt__face, .fx-chip input:checked + .fx-chip__face { outline: 3px solid Highlight; }
}

/* =====================================================================
   Complete site: "Other ways to work with Moiz" row in the slim footers
   (landing and thank-you pages; the form steps stay distraction-free)
   ===================================================================== */
.foot-x { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--n800); }
.foot-x__h { margin-bottom: 4px; }
.foot-x__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot .foot-x__list a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600;
  text-decoration: none; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .foot .foot-x__list a:hover { text-decoration-line: underline; }
}
/* thank-you pages: the row sits above the one-line legal footer */
.foot--step .foot-x { margin-top: 0; padding: 0 0 16px; border-top: 0; margin-bottom: 16px; border-bottom: 1px solid var(--n800); }

/* =====================================================================
   Round 6: the platform plate on the done-for-you landings (Meta, Google Ads)
   One bento tile carrying the platform's own logo in its own colours (the only
   brand colours on the site), the same treatment on both pages: a horizontal
   lockup above the H1 on phones, a big tile pinned to the portrait from 1200px.
   ===================================================================== */
.svc-hero__brand { position: relative; z-index: 7; grid-column: 1 / -1; justify-self: start; order: -1; margin-bottom: 4px; }
.pbrand__plate {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-in); box-shadow: 5px 5px 0 var(--ink);
  --rot: -2deg; transform: rotate(var(--rot));
}
.pbrand__mark { flex: none; width: auto; height: 40px; overflow: visible; }
.pbrand__word { font-size: 26px; line-height: 1; white-space: nowrap; }
.pbrand--meta .pbrand__word { font-weight: 700; letter-spacing: -0.02em; color: #1c2b33; }
.pbrand--gads .pbrand__word { font-weight: 600; letter-spacing: -0.01em; color: #5f6368; }
@media (min-width: 768px) {
  .svc-hero__brand { grid-column: 4 / 7; grid-row: 1; order: 0; justify-self: end; align-self: start; margin: 0; }
  .pbrand__plate { flex-direction: column; justify-content: center; gap: 10px; min-width: 176px; padding: 20px 22px 18px; border-radius: var(--r-tile); box-shadow: 6px 6px 0 var(--ink); --rot: 3deg; }
  .pbrand__mark { height: 76px; }
  .pbrand__word { font-size: 28px; }
}
@media (min-width: 1200px) {
  .svc-hero__brand { grid-column: 8 / 13; grid-row: 1; margin: -26px -40px 0 0; }
  .pbrand__plate { min-width: 212px; padding: 24px 26px 20px; gap: 12px; }
  .pbrand__mark { height: 104px; }
  .pbrand__word { font-size: 34px; }
  .svc-hero__brand ~ .svc-hero__portrait .svc-hero__disc { left: 46%; }
  .svc-hero__brand ~ .svc-hero__portrait .svc-hero__cutout { left: 44%; }
}
@media (min-width: 1440px) {
  .pbrand__mark { height: 116px; }
}
/* one authored entrance: the plate lands a beat after the portrait, from a hair lower and smaller */
@media (prefers-reduced-motion: no-preference) {
  .js .pbrand__plate { animation: brandIn 420ms var(--spring-soft) 260ms both; }
}
@keyframes brandIn {
  from { opacity: 0; transform: rotate(var(--rot)) translateY(12px) scale(0.94); }
  to { opacity: 1; transform: rotate(var(--rot)); }
}
html.motion-paused .pbrand__plate { animation: none; }

/* =====================================================================
   Round 7: one landing, two options (Consultation, Managed ads)
   .optpair: the two option cards side by side, the homepage's .offer card at a larger size.
   .which: the "which one is right for me" helper.
   ===================================================================== */
.optpair-sec .lead { margin-top: 14px; max-width: 56ch; }
.optpair { display: grid; gap: 40px 22px; margin-top: 48px; }
.optpair__card { margin-right: 6px; padding: 32px 22px 22px; gap: 14px; }
.optpair__card .offer__name { font-size: var(--t-h3); }
.optpair__card .offer__for { font-size: 15px; margin-top: -4px; max-width: 40ch; }
.optpair__card .offer__price .num { font-size: clamp(36px, 12cqi, 56px); }
.optpair__card .offer__list { font-size: 16px; gap: 10px; }
.optpair__card .chip { margin-top: 2px; }
.optpair__card .offer__cta { margin-top: auto; padding-top: 6px; }
.optpair__card .offer__cta .btn__face { white-space: normal; text-align: center; }
.optpair__entry { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 36px; padding: 18px 20px; }
.optpair__entry p { max-width: 70ch; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) {
  .optpair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .optpair__card { padding: 36px 30px 26px; }
  .optpair__entry { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 26px; }
  .optpair__entry .link { flex: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .optpair .optpair__card { opacity: 0; transform: translateY(18px); transition: opacity 420ms var(--ease-out), transform 520ms var(--spring-soft); }
  .js .optpair.is-in .optpair__card { opacity: 1; transform: none; }
  .js .optpair.is-in .optpair__card + .optpair__card { transition-delay: 90ms; }
}
html.motion-paused .optpair .optpair__card { opacity: 1; transform: none; transition: none; }

.which { background: var(--n100); }
.which__grid { display: grid; gap: 28px; align-items: start; }
.which__copy .lead { margin-top: 14px; max-width: 34ch; }
.which__tile { display: grid; gap: 22px; padding: 22px 18px; }
.which__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.which__legend { padding: 0; margin-bottom: 12px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.which__tile .opts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.which__out { min-height: 132px; padding-top: 18px; border-top: 2px solid var(--ink); }
.which__idle { font-size: 15px; font-weight: 600; color: var(--n600); }
.which__res { display: grid; gap: 10px; justify-items: start; }
.which__res > p:not(.which__pick) { max-width: 52ch; color: var(--ink-3); }
.which__pick { font-size: var(--t-h4); font-weight: 800; line-height: 1.25; }
.which__pick b { background: var(--y); box-shadow: 0 0 0 3px var(--y); border-radius: 2px; }
@media (min-width: 768px) {
  .which__tile { padding: 28px 28px 26px; }
  .which__tile .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .which__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .which__copy { position: sticky; top: 120px; }
}



/* Thank-you covers without a photo (Round 7 pages): the request as a ticket, stamped. Desktop only. */
.ty-ticket { display: none; }
@media (min-width: 768px) {
  .ty-ticket { display: flex; align-items: center; justify-content: center; padding-bottom: var(--sec); }
  .ty-ticket__card {
    position: relative; width: min(100%, 360px); display: grid; gap: 10px; padding: 26px 24px 30px;
    box-shadow: 8px 8px 0 var(--ink); transform: rotate(2deg);
  }
  .ty-ticket__card::before {   /* the ticket's perforation */
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 64px; border-top: 2px dashed var(--n300);
  }
  .ty-ticket__name { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .ty-ticket__fmt { font-size: 15px; font-weight: 600; color: var(--n600); }
  .ty-ticket__stamp {
    justify-self: end; margin-top: 22px; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 10px;
    font-size: 18px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-8deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ty-ticket__stamp { animation: stampIn 360ms var(--spring-pop) 420ms both; }
}
@keyframes stampIn { from { opacity: 0; transform: rotate(-8deg) scale(1.4); } to { opacity: 1; transform: rotate(-8deg); } }
html.motion-paused .ty-ticket__stamp { animation: none; }

/* =====================================================================
   Round 7: the hub, grouped (Learn / Talk / Done with you / Done for you / For businesses)
   Each group is a row: a label column, then the homepage's .offer cards. The wide card holds one
   landing and its options as a stacked list of links.
   ===================================================================== */
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hub-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 140ms ease, transform 160ms var(--ease-out);
}
.hub-jump a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hub-jump a:hover { background: var(--ink); color: var(--y); } }
.hub-groups { padding-top: 72px; }
.hubg { display: grid; gap: 28px; padding: 40px 0 48px; border-top: 2px solid var(--ink); scroll-margin-top: 96px; }
.hubg:first-of-type { border-top: 0; padding-top: 0; }
.hubg__head p { margin-top: 8px; max-width: 34ch; color: var(--ink-3); }
.hubg__h { display: flex; align-items: center; gap: 12px; }
.hubg__h .i { flex: none; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; background: var(--y); border: 2px solid var(--ink); border-radius: 12px; }
.hubg__cards { display: grid; gap: 40px 22px; }
.hubg__card { margin-right: 6px; }
.hubg__card .offer__cta { margin-top: auto; }
.hubg__team { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--y-100); border: 2px solid var(--ink); border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.hubg__team .i { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.hubg__card--wide { display: grid; gap: 18px; }
.hubg__wide-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hubg__wide-main .offer__name { font-size: var(--t-h3); }
.hubg__wide-main .offer__cta { margin-top: 6px; }
.hubg__opts { list-style: none; padding: 0; display: grid; gap: 10px; }
.hubg__opts a {
  display: grid; gap: 2px; padding: 14px 16px; border: 2px solid currentColor; border-radius: 14px; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 140ms ease;
}
.hubg__opts b { font-size: 17px; }
.hubg__opts span { font-size: 14px; font-weight: 600; opacity: 0.8; }
.hubg__opts .hubg__p { opacity: 1; font-size: 16px; font-weight: 800; color: var(--y); }
.offer--ink .hubg__opts a { border-color: rgb(255 255 255 / 0.5); }
.hubg__opts--light a { background: #fff; color: var(--ink); border-color: var(--ink); }
.hubg__opts a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .offer--ink .hubg__opts a:hover { background: rgb(255 255 255 / 0.08); border-color: var(--y); }
  .hubg__opts--light a:hover { background: var(--y-100); }
}
@media (min-width: 768px) {
  .hubg__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hubg__card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 34px 28px 28px; }
}
@media (min-width: 1100px) {
  .hubg { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; gap: 40px; padding: 48px 0 56px; }
  .hubg__head { position: sticky; top: 112px; }
}