/* ============ chvrleskelly.com — web design & development ============
   Shares the hire.chvrleskelly.com type system (Helvetica Neue, tight
   display tracking, ease-out motion) but warmer and friendlier: sections
   sit as rounded panels on a warm page, soft shadows, a bright blue accent
   with peach / mint / sun supporting colours. No dependencies. */

:root {
  /* surfaces */
  --bg: #f5f2ed;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  /* text */
  --ink: #14151c;
  --ink-2: #3d404b;
  --muted: #646875;          /* 5.3:1 on white, 4.8:1 on --bg */
  --line: rgba(20, 21, 28, 0.09);
  /* brand */
  --accent: #3654ff;         /* white text on it: 5.0:1 */
  --accent-2: #2440e6;
  --accent-soft: #e7ebff;
  --peach: #ff7a45;
  --peach-ink: #c4471a;
  --peach-soft: #ffe7dc;
  --mint: #17a865;
  --mint-ink: #0f7c4a;
  --mint-soft: #d9f5e7;
  --sun: #ffb21f;
  --sun-soft: #fff1cc;

  --font: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: clamp(8px, 1.1vw, 16px);          /* page edge around panels */
  --pad: clamp(20px, 4vw, 56px);              /* inside panels */
  --r-panel: clamp(24px, 2.8vw, 40px);
  --nav-h: 60px;

  --shadow-sm: 0 1px 2px rgba(20, 21, 28, 0.05), 0 4px 14px -4px rgba(20, 21, 28, 0.08);
  --shadow-md: 0 1px 2px rgba(20, 21, 28, 0.04), 0 14px 32px -10px rgba(20, 21, 28, 0.18);
  --shadow-lg: 0 2px 6px rgba(20, 21, 28, 0.04), 0 28px 64px -16px rgba(20, 21, 28, 0.26);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring: var(--ease-back);
}
/* a real spring where the browser can do it (overshoot, wobble, settle) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}
@media (min-width: 960px) { :root { --nav-h: 64px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden; overflow-x: clip;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* small label above a section heading: blue dot + text */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
}
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.skip-link {
  position: fixed; left: var(--gutter); top: var(--gutter); z-index: 100;
  padding: 0.75rem 1.1rem; border-radius: 99px;
  background: var(--ink); color: #fff;
  font-weight: 600; font-size: 0.875rem;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* shared line-icon look */
.fan__opt-icon svg, .drop__icon svg, .pcard__meta svg {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===================================================================
   NAV — sits inside the hero card's top edge (no bar of its own):
   logo left, links centred, button right. Scrolls away with the hero.
   =================================================================== */
.nav {
  position: absolute; z-index: 50;
  top: var(--gutter); left: var(--gutter); right: var(--gutter);
}
.nav__bar {
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--pad);
}
/* the mobile menu is open: keep logo + close button pinned over it */
.nav.is-menu { position: fixed; }

.nav__logo {
  justify-self: start;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  border-radius: 6px;
}

.nav__links { display: none; }
.nav__links > ul { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border-radius: 999px;
  font-size: 0.94rem; font-weight: 500;
  color: var(--ink-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav__link:hover, .drop.is-open .drop__btn { background: rgba(20, 21, 28, 0.055); color: var(--ink); }

.nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.nav .fan { display: none; }

.nav__burger {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  margin-right: -6px;
  background: rgba(20, 21, 28, 0.05);
  flex: none;
}
.nav__burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--spring), top 0.3s var(--ease-out);
}
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

@media (min-width: 960px) {
  .nav__bar { padding-top: 8px; }
  .nav__links { display: block; }
  .nav .fan { display: inline-block; }
  .nav__burger { display: none; }
}

/* ---------- "Who I help" dropdown ---------- */
.drop { position: relative; }
.drop__chev {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.35s var(--spring);
}
.drop.is-open .drop__chev { transform: rotate(180deg); }
.drop__panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: 330px;
  padding: 8px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity 0.18s ease, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
/* hover bridge across the gap to the panel */
.drop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.drop.is-open .drop__panel {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.18s ease, transform 0.45s var(--spring), visibility 0s;
}
.drop__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 16px;
  transition: background-color 0.2s ease;
}
.drop__item:hover { background: var(--surface-2); }
.drop__item strong { display: block; font-size: 0.95rem; font-weight: 600; }
.drop__item small { display: block; font-size: 0.82rem; color: var(--muted); }
.drop__icon {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  transition: transform 0.45s var(--spring);
}
.drop__icon svg { width: 22px; height: 22px; }
.drop__item:hover .drop__icon, .drop__item:focus-visible .drop__icon { transform: rotate(-8deg) scale(1.08); }
.drop__icon--peach, .fan__opt-icon--peach { background: var(--peach-soft); color: var(--peach-ink); }
.drop__icon--mint, .fan__opt-icon--mint { background: var(--mint-soft); color: var(--mint-ink); }
.drop__icon--blue, .fan__opt-icon--blue { background: var(--accent-soft); color: var(--accent-2); }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--gutter) + var(--nav-h) + 24px) calc(var(--gutter) + var(--pad)) calc(28px + env(safe-area-inset-bottom));
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 40px 40px);
  transition: clip-path 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.mmenu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 0.55s var(--ease-out), visibility 0s;
}
.mmenu__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.mmenu__list > li, .mmenu__foot {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mmenu.is-open .mmenu__list > li, .mmenu.is-open .mmenu__foot {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease calc(0.08s + var(--i) * 0.045s), transform 0.6s var(--spring) calc(0.08s + var(--i) * 0.045s);
}
.mmenu__link {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 0;
  font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1;
  text-align: left;
}
.mmenu__chev {
  width: 0.5em; height: 0.5em; margin-top: 0.08em;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.4s var(--spring);
}
.mmenu__acc-btn[aria-expanded="true"] .mmenu__chev { transform: rotate(180deg); }
/* collapsible: 0fr -> 1fr animates to the content's natural height */
.mmenu__acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.mmenu__acc.is-open .mmenu__acc-panel { grid-template-rows: 1fr; }
.mmenu__sub { min-height: 0; overflow: hidden; display: grid; gap: 2px; }
.mmenu__sub li:first-child { padding-top: 4px; }
.mmenu__sub li:last-child { padding-bottom: 8px; }
.mmenu__sub a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 1.08rem; font-weight: 500; color: var(--ink-2);
}
.mmenu__dot { width: 10px; height: 10px; border-radius: 50%; }
.mmenu__dot--peach { background: var(--peach); }
.mmenu__dot--mint { background: var(--mint); }
.mmenu__dot--blue { background: var(--accent); }
.mmenu__foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.mmenu__meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; color: var(--muted); }
.mmenu__meta a { color: var(--ink); font-weight: 600; }
@media (min-width: 960px) { .mmenu { display: none; } }

/* ===================================================================
   FAN BUTTON — "Discuss your website"
   Reusable: any [data-fan] wrapper with a .fan__trigger inside. The
   options come from <template id="fanOptions">; js/site.js lays them out
   (an arc where there's room, a stack where there isn't, opening up or
   down to stay on screen) and writes --x/--y/--r on each option.
   =================================================================== */
.fan { position: relative; display: inline-block; }

.fan__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  height: 48px; padding: 0 6px 0 1.2rem;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(54, 84, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.45s var(--spring), background-color 0.2s ease, box-shadow 0.3s ease;
}
.fan__trigger:hover, .fan.is-open .fan__trigger {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(54, 84, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.fan__trigger:active { transform: translateY(0) scale(0.97); }
.fan__icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  transition: transform 0.5s var(--spring);
}
.fan__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fan__trigger:hover .fan__icon { transform: rotate(90deg); }
.fan.is-open .fan__icon { transform: rotate(135deg); }

.fan--sm .fan__trigger { height: 44px; padding-left: 1.05rem; gap: 0.55rem; font-size: 0.875rem; }
.fan--sm .fan__icon { width: 32px; height: 32px; }
.fan--lg .fan__trigger { height: 62px; padding: 0 8px 0 1.7rem; gap: 0.9rem; font-size: 1.06rem; }
.fan--lg .fan__icon { width: 46px; height: 46px; }
.fan--lg .fan__icon svg { width: 16px; height: 16px; }

.fan__menu {
  position: absolute; left: 0; top: 0; z-index: 30;
  width: 0; height: 0;
}
.fan__menu > li {
  position: absolute; left: 0; top: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* closed: tucked behind the trigger, small */
  transform: translate(var(--x0, 0px), var(--y0, 0px)) scale(0.4) rotate(0deg);
  transition:
    transform 0.28s cubic-bezier(0.5, 0, 0.75, 0),
    opacity 0.2s ease 0.05s,
    visibility 0s linear 0.3s;
}
.fan.is-open .fan__menu > li {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(1) rotate(var(--r, 0deg));
  transition:
    transform 0.75s var(--spring) calc(var(--i) * 55ms),
    opacity 0.16s ease calc(var(--i) * 55ms),
    visibility 0s;
}
.fan__opt {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  white-space: nowrap;
  transition: transform 0.4s var(--spring), box-shadow 0.25s ease;
}
.fan__opt:hover, .fan__opt:focus-visible {
  /* straighten up and lean in */
  transform: rotate(calc(var(--r, 0deg) * -1)) scale(1.05);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
}
.fan__opt-icon {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.fan__opt-icon svg { width: 20px; height: 20px; }
.fan__opt-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.fan__opt-text strong { font-size: 0.95rem; font-weight: 600; }
.fan__opt-text small { font-size: 0.78rem; color: var(--muted); }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  margin: var(--gutter);
  min-height: calc(100vh - var(--gutter) * 2);
  min-height: calc(100svh - var(--gutter) * 2);
  display: flex;
  border-radius: var(--r-panel);
  background: #fdfcfa;
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.04);
}
/* decorative background, clipped to the panel on its own layer so the
   popovers above it are never clipped */
.hero__bg {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.blob--blue {
  width: 90vmax; height: 90vmax; left: -45vmax; top: -50vmax;
  background: radial-gradient(closest-side, rgba(54, 84, 255, 0.2), rgba(54, 84, 255, 0) 100%);
}
.blob--peach {
  width: 80vmax; height: 80vmax; right: -42vmax; bottom: -46vmax;
  background: radial-gradient(closest-side, rgba(255, 122, 69, 0.2), rgba(255, 122, 69, 0) 100%);
}
.blob--sun {
  width: 46vmax; height: 46vmax; right: -12vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgba(255, 178, 31, 0.16), rgba(255, 178, 31, 0) 100%);
}
.hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20, 21, 28, 0.11) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 75%);
}

.hero__inner {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 32px) var(--pad) clamp(40px, 7vh, 72px);
}

/* ---------- Headline ---------- */
.hero__title {
  font-size: clamp(2.8rem, 1.5rem + 7.6vw, 7.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__hl {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--accent);
}

/* ---------- Subhead + "Charles" ---------- */
.hero__sub {
  margin-top: clamp(20px, 3.2vh, 30px);
  max-width: 34em;
  font-size: clamp(1.06rem, 0.95rem + 0.5vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.who {
  display: inline-block;
  padding: 0.06em 0.42em 0.06em 0.14em;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-weight: 600;
  line-height: 1.25;
  vertical-align: baseline;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.4s var(--spring);
}
.who__img {
  display: inline-block;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  margin-right: 0.28em;
  vertical-align: -0.33em;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff;
  transition: transform 0.5s var(--spring);
}
.who:hover { background: #d9dfff; }
.who:hover .who__img { transform: rotate(-10deg) scale(1.08); }
.who[aria-expanded="true"] { background: var(--accent); color: #fff; }

/* ---------- Profile card (X-style) ---------- */
.pcard {
  position: absolute; z-index: 40;
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  text-align: left;
  transform-origin: var(--ox, 30%) var(--oy, 0%);
  animation: pcard-in 0.42s var(--spring) both;
}
.pcard:focus { outline: none; }
.pcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pcard.is-closing { animation: pcard-out 0.16s ease-in both; }
@keyframes pcard-in { from { opacity: 0; transform: translateY(6px) scale(0.94); } }
@keyframes pcard-out { to { opacity: 0; transform: translateY(4px) scale(0.97); } }
.pcard__grab { display: none; }
.pcard__close {
  display: none;
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  place-items: center;
  background: var(--surface-2);
}
.pcard__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pcard__head { display: flex; align-items: center; gap: 12px; }
.pcard__photo { position: relative; flex: none; }
.pcard__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pcard__online {
  position: absolute; right: 1px; bottom: 1px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #23d05d; box-shadow: 0 0 0 3px #fff;
}
.pcard__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pcard__name { display: inline-flex; align-items: center; gap: 4px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.pcard__tick { width: 18px; height: 18px; flex: none; }
.pcard__tick > path:first-child { fill: var(--accent); }
.pcard__tick-check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pcard__handle { font-size: 0.9rem; color: var(--muted); }
.pcard__bio { margin-top: 12px; font-size: 0.93rem; line-height: 1.5; color: var(--ink); }
.pcard__meta {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.84rem; line-height: 1.4; color: var(--muted);
}
.pcard__meta svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.pcard-scrim { display: none; }

/* phones: a bottom sheet instead of a side popover */
@media (max-width: 640px) {
  .pcard {
    position: fixed; z-index: 71;
    left: 10px !important; right: 10px; top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto; max-width: 440px; margin: 0 auto;
    padding: 26px 20px 22px;
    border-radius: 28px;
    animation: sheet-in 0.5s var(--spring) both;
  }
  .pcard.is-closing { animation: sheet-out 0.22s ease-in both; }
  .pcard__grab {
    display: block;
    position: absolute; top: 8px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px; border-radius: 4px;
    background: rgba(20, 21, 28, 0.15);
  }
  .pcard__close { display: grid; }
  .pcard__bio { font-size: 0.98rem; }
  .pcard-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 70;
    background: rgba(20, 21, 28, 0.32);
    animation: fade-in 0.25s ease both;
  }
  .pcard-scrim[hidden] { display: none; }
}
@keyframes sheet-in { from { opacity: 0.4; transform: translateY(110%); } }
@keyframes sheet-out { to { transform: translateY(110%); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- CTA ---------- */
.hero__cta {
  margin-top: clamp(28px, 4.5vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero__price { font-size: 0.9rem; color: var(--muted); transition: opacity 0.2s ease; }
/* out of the way while the options are fanned over it; fanning upward
   (short screens) the copy behind fades back so the options read cleanly */
.hero__cta:has(.fan.is-open) .hero__price { opacity: 0; }
.hero__title, .hero__sub { transition: opacity 0.3s ease; }
.hero__inner:has(.fan[data-dir="up"].is-open) :is(.hero__title, .hero__sub) { opacity: 0.12; }
.hero__price strong { color: var(--ink); font-weight: 700; }

/* ===================================================================
   WORK — three cards, one per audience. The screenshot stack in each
   is built by js/work.js; its geometry lives here as custom properties
   so hover (and the scroll-in on touch) only has to change four values.
   =================================================================== */
.work {
  /* no panel of its own: the cards sit straight on the page */
  padding: clamp(64px, 9vw, 128px) calc(var(--gutter) + var(--pad) * 0.5) clamp(64px, 9vw, 128px);
}
.work__head {
  max-width: 980px; margin: 0 auto clamp(36px, 5vw, 64px);
  text-align: center;
}
.work__title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.work__sub {
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  color: var(--ink-2);
  text-wrap: balance;
}

.work__grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}
@media (min-width: 700px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  /* the third card centred on its own row */
  .work__grid > :nth-child(3) {
    grid-column: 1 / -1; justify-self: center;
    width: calc(50% - clamp(14px, 1.6vw, 22px) / 2);
  }
}
@media (min-width: 1100px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); }
  .work__grid > :nth-child(3) { grid-column: auto; width: auto; }
}

/* ---------- Card ---------- */
.wcard {
  --cpad: clamp(22px, 2.2vw, 32px);
  --tint: #eef1ff; --tint-2: #e3e8ff; --dot: rgba(54, 84, 255, 0.16);
  position: relative;
  overflow: hidden;
  display: grid;
  /* title / line / button / stack / tags; subgrid lines rows up across cards */
  grid-template-rows: auto auto auto 1fr auto;
  padding: var(--cpad) var(--cpad) 0;
  border-radius: clamp(22px, 2.2vw, 32px);
  background: linear-gradient(180deg, var(--tint), var(--tint-2));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    .wcard { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  }
}
.wcard--local { --tint: #eefaf3; --tint-2: #e1f4e9; --dot: rgba(23, 168, 101, 0.17); --hue: var(--mint-ink); }
.wcard--saas { --tint: #eff2ff; --tint-2: #e2e7ff; --dot: rgba(54, 84, 255, 0.15); --hue: var(--accent-2); }
.wcard--creative { --tint: #fff4ee; --tint-2: #ffe8dc; --dot: rgba(255, 122, 69, 0.18); --hue: var(--peach-ink); }
/* dot-grid texture, strongest behind the stack */
.wcard::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 15%, #000 70%);
  pointer-events: none;
}
.wcard > * { position: relative; }

.wcard__title {
  font-size: clamp(1.4rem, 1.15rem + 0.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.wcard__line {
  margin-top: 10px;
  max-width: 32ch;
  font-size: 1rem; line-height: 1.45;
  color: var(--ink-2);
}

/* "Explore work" — also the card's link: its ::after covers the card */
.wcard__link {
  position: static;
  justify-self: start; align-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; margin-top: 20px; padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 0.94rem; font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}
.wcard__link::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.wcard__link:focus-visible { outline: none; }
.wcard:has(.wcard__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.wcard__arrow {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  transition: transform 0.5s var(--spring);
}
.wcard__arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Screenshot stack ---------- */
.wcard__stack {
  /* rest pose */
  --spread: 15.5cqw;   /* sideways step per card from the centre */
  --angle: 4deg;       /* tilt per step */
  --drop: 2.6cqw;      /* outer cards sit lower */
  --lift: 0cqw;        /* centre card rise */
  container-type: inline-size;
  z-index: 0;          /* keeps the shots under the card link's overlay */
  align-self: end;     /* any spare card height goes above, not below */
  margin: 26px calc(var(--cpad) * -1) 0;
  aspect-ratio: 100 / 60;
  /* cropped by the divider below, free to spread above and to the sides */
  clip-path: inset(-60% -60% 0 -60%);
}
.shot {
  position: absolute; left: 50%; top: var(--top);
  z-index: var(--z);
  transform-origin: 50% 100%;
  transform:
    translateX(-50%)
    translateX(calc(var(--k) * var(--spread)))
    translateY(calc(var(--ak) * var(--drop) + (1 - min(var(--ak), 1)) * var(--lift)))
    rotate(calc(var(--k) * var(--angle)))
    scale(var(--sc));
  transition: transform 0.75s cubic-bezier(0.3, 1.32, 0.5, 1) calc(var(--ak) * 35ms);
}
.shot--desktop {
  --top: 15cqw; --sc: calc(1 - var(--ak) * 0.11);
  width: 68cqw;
  padding-top: 3.4cqw;               /* browser chrome */
  border-radius: 2cqw;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 21, 28, 0.08), 0 14px 34px -12px rgba(20, 21, 28, 0.32);
}
/* traffic-light dots */
.shot--desktop::before {
  content: ""; position: absolute; left: 2cqw; top: 1.2cqw;
  width: 7cqw; height: 1.1cqw;
  background:
    radial-gradient(circle at 0.55cqw 50%, #ff7a6b 0.5cqw, transparent 0.56cqw),
    radial-gradient(circle at 2.35cqw 50%, #ffc34d 0.5cqw, transparent 0.56cqw),
    radial-gradient(circle at 4.15cqw 50%, #3fcf6f 0.5cqw, transparent 0.56cqw);
}
.shot--desktop img { border-radius: 0 0 2cqw 2cqw; }
.shot--mobile {
  --top: 12cqw; --sc: 1;
  width: 21cqw;
  padding: 0.9cqw;
  border-radius: 3.6cqw;
  background: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(20, 21, 28, 0.4);
}
.shot--mobile img { border-radius: 2.8cqw; }
.shot img {
  width: 100%; height: auto;
  background: var(--surface-2);
}

/* ---------- Tags ---------- */
.wcard__tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 calc(var(--cpad) * -1);
  padding: 14px var(--cpad) calc(var(--cpad) * 0.75);
  border-top: 1px solid rgba(20, 21, 28, 0.08);
  background: rgba(255, 255, 255, 0.55);
}
.wcard__tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.06);
  font-size: 0.78rem; font-weight: 500; color: var(--ink-2);
}
/* "…" after the last tag (the list goes on), in the card's own colour.
   It hangs off the last pill so the two always wrap together. */
.wcard__tags .wcard__last { position: relative; margin-right: 22px; }
.wcard__more {
  position: absolute; left: calc(100% + 5px); top: 50%;
  transform: translateY(-58%);
  font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em;
  color: var(--hue);
}

/* ---------- Active: hover, keyboard focus, or scrolled into view on touch ---------- */
.wcard:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.wcard:is(:hover, :focus-within) .wcard__link { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px rgba(54, 84, 255, 0.45); }
.wcard:is(:hover, :focus-within) .wcard__arrow { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .wcard:is(:hover, :focus-within, .is-fanned) .wcard__stack {
    --spread: 18.5cqw;
    --angle: 6deg;
    --drop: 3.6cqw;
    --lift: -3.4cqw;
  }
}

@media (max-width: 699px) {
  /* shorter stacks so all three cards scroll past quickly */
  .wcard__stack { aspect-ratio: 100 / 47; margin-top: 18px; }
  .shot--desktop { --top: 7cqw; width: 64cqw; }
  .shot--mobile { --top: 5cqw; width: 19cqw; }
}

/* ===================================================================
   TESTIMONIALS — intro on the left, a carousel that bleeds off the
   right edge. Cards come from js/testimonials.js; the track is a native
   scroll-snap scroller (swipe + trackpad for free), looped by the script.
   =================================================================== */
.tst {
  --track-top: 28px;
  /* the track reaches back into the space left of the cards by --bleed,
     enough for a card's whole shadow (~22px); --tgap stays wider so no
     part of the previous card shows there, and the strip fades in */
  --bleed: 18px;
  --tgap: 20px;
  /* left edge lines up with the work cards above */
  --edge: max(calc(var(--gutter) + var(--pad) * 0.5), calc((100% - 1320px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "car" "ctrl";
  padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 9vw, 128px) var(--edge);
}
.tst__intro { grid-area: intro; padding-right: var(--edge); }
.tst__controls { grid-area: ctrl; padding-right: var(--edge); }
.tst__carousel { grid-area: car; min-width: 0; container-type: inline-size; }

.tst__title {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.tst__text {
  margin-top: 16px; max-width: 36ch;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

.tst__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.tst__arrows { display: flex; gap: 10px; }
.tst__arrow {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  transition: background-color 0.2s ease, transform 0.45s var(--spring);
}
.tst__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tst__arrow:hover { background: var(--accent-2); }
.tst__arrow[data-tst="prev"]:hover { transform: translateX(-2px); }
.tst__arrow[data-tst="next"]:hover { transform: translateX(2px); }
.tst__arrow:active { transform: scale(0.93); }
.tst__quote-link {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 0.95rem; font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.tst__quote-link .wcard__arrow { width: 36px; height: 36px; }
.tst__quote-link:hover { background: var(--accent); color: #fff; }
.tst__quote-link:hover .wcard__arrow { transform: rotate(45deg); }

/* ---------- Track ---------- */
.tst__track {
  position: relative;
  display: flex; gap: var(--tgap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* room for the card shadows inside the scroller, left side included */
  padding: var(--track-top) 0 44px var(--bleed);
  margin: 0 0 -20px calc(var(--bleed) * -1);
  scroll-padding-left: var(--bleed);
  /* no hard edge on the left: the bleed strip fades in */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--bleed));
  mask-image: linear-gradient(to right, transparent, #000 var(--bleed));
}
.tst__track::-webkit-scrollbar { display: none; }
.tst__track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 30px; }
.tst__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .tst__track { cursor: grab; } }

/* ---------- Card ---------- */
.tcard {
  flex: 0 0 min(86cqw, 500px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  overflow: hidden;
}
.tcard--blue { --tint: var(--accent-soft); --dot: rgba(54, 84, 255, 0.16); }
.tcard--mint { --tint: var(--mint-soft); --dot: rgba(23, 168, 101, 0.18); }
.tcard--peach { --tint: var(--peach-soft); --dot: rgba(255, 122, 69, 0.2); }
.tcard--sun { --tint: var(--sun-soft); --dot: rgba(214, 150, 0, 0.2); }

.tcard__media {
  position: relative;
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  background-color: var(--tint);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.4px);
  background-size: 16px 16px;
}
.tcard__frame {
  position: absolute; left: 10%; right: 10%; top: 56px;   /* clear of the badge + dots */
  display: grid;
  padding-top: 3.2%;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 21, 28, 0.08), 0 16px 36px -14px rgba(20, 21, 28, 0.35);
}
.tcard__frame::before {
  content: ""; position: absolute; left: 12px; top: 1.1%;
  width: 34px; height: 8px; margin-top: 2px;
  background:
    radial-gradient(circle at 4px 50%, #ff7a6b 3.4px, transparent 3.8px),
    radial-gradient(circle at 16px 50%, #ffc34d 3.4px, transparent 3.8px),
    radial-gradient(circle at 28px 50%, #3fcf6f 3.4px, transparent 3.8px);
}
.tcard__img {
  grid-area: 1 / 1;
  width: 100%; height: auto;
  background: var(--surface-2);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out);
  -webkit-user-drag: none;
}
.tcard__img.is-active { opacity: 1; transform: none; }

.tcard__num {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tcard__dots {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  display: flex; gap: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
}
/* 24px hit area around an 8px dot */
.tcard__dot {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.tcard__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: rgba(20, 21, 28, 0.25);
  transition: width 0.35s var(--spring), background-color 0.2s ease;
}
.tcard__dot:hover::before { background: rgba(20, 21, 28, 0.45); }
.tcard__dot[aria-current="true"]::before { width: 18px; background: var(--accent); }

.tcard__body { padding: 22px clamp(20px, 2vw, 28px) 20px; }
.tcard__company {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.tcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* small and secondary: there if they want to look */
.tcard__visit {
  position: relative; z-index: 1;
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px;
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.tcard__visit svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--spring); }
.tcard__visit:hover { color: var(--accent-2); text-decoration-color: currentColor; }
.tcard__visit:hover svg { transform: translate(1px, -1px); }
.tcard__stars { display: flex; gap: 2px; margin-top: 10px; color: var(--sun); }
.tcard__stars svg { width: 16px; height: 16px; fill: currentColor; }
.tcard__fig { margin-top: 14px; }
.tcard__quote { font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.tcard__by { margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
.tcard__by strong { color: var(--ink-2); font-weight: 600; }

.tcard__meta {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.tcard__meta > div { padding: 14px clamp(20px, 2vw, 28px) 18px; }
.tcard__meta > div + div { border-left: 1px solid var(--line); }
.tcard__meta dt {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.tcard__meta dd {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 0.95rem; font-weight: 600;
}
.tcard__flag {
  width: 20px; height: 14px; flex: none;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.1);
}
.tcard__flag svg { width: 100%; height: 100%; }

/* tablet: intro and controls above the carousel */
@media (min-width: 700px) {
  .tst { grid-template-areas: "intro" "ctrl" "car"; --bleed: 24px; --tgap: 28px; }
  .tst__controls { margin-top: 28px; }
  .tcard { flex-basis: min(72cqw, 500px); }
  .tcard__media { aspect-ratio: 16 / 9.6; }
}
/* desktop: intro + controls left (vertically centred), carousel right */
@media (min-width: 1024px) {
  .tst {
    grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "intro car" "ctrl car" ". car";
    column-gap: clamp(40px, 4vw, 72px);
    --bleed: 32px; --tgap: 36px;
  }
  .tst__intro, .tst__controls { padding-right: 0; }
  .tst__intro { padding-top: var(--track-top); }  /* level with the card tops */
  .tst__controls { margin-top: 32px; }
}

/* ===================================================================
   SERVICES / PRICING — a dark rounded panel with its own accent (--pc):
   the pale blue-lilac from the About panel. Content is built from
   PRICING in js/pricing.js. --pc is 13:1+ on every dark surface here;
   text sitting on it is ink.
   =================================================================== */
.pricing {
  --dk: #262626;
  --dk-card: #2e2e2e;
  --dk-dot: #3a3a3a;
  --dk-line: rgba(255, 255, 255, 0.09);
  --dk-text: #b5b5b5;        /* 6.6:1 on the cards, 7.4:1 on the panel */
  --dk-text-2: #d9d9d9;
  --pc: #eef1ff;             /* the About panel's pale blue-lilac: 13:1+ on the dark */
  --pc-hover: #ffffff;
  margin: 0 var(--gutter);
  padding: clamp(64px, 8vw, 120px) clamp(16px, 4vw, 56px);
  border-radius: var(--r-panel);
  background-color: var(--dk);
  background-image: radial-gradient(var(--dk-dot) 0.9px, transparent 1.1px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  color: #fff;
}
.pricing :focus-visible { outline-color: var(--pc); }
.pricing__inner { max-width: 1180px; margin: 0 auto; }

.pricing__head { max-width: 860px; margin: 0 auto; text-align: center; }
.pricing__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; color: var(--dk-text);
}
.pricing__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pricing__title {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.pricing__sub {
  max-width: 520px; margin: 18px auto 0;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  color: var(--dk-text);
  text-wrap: pretty;
}

/* ---------- Tiers ---------- */
.pricing__tiers {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  max-width: 520px;
  margin: clamp(40px, 6vw, 72px) auto 0;
}
.ptier {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 26px;
  background: var(--dk-card);
}
.ptier--featured {
  background: #30313a;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}
.ptier__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.ptier__name {
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ptier__badge {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
}
.ptier__price {
  margin-top: 14px;
  font-size: clamp(2.6rem, 2rem + 1.8vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--pc);
  font-variant-numeric: tabular-nums;
}
.ptier__for { margin-top: 14px; font-size: 0.98rem; line-height: 1.5; color: var(--dk-text); }
.ptier__features {
  display: grid; gap: 12px;
  margin: 22px 0 28px; padding-top: 22px;
  border-top: 1px solid var(--dk-line);
}
.ptier__features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; line-height: 1.45; color: var(--dk-text-2);
}
.ptier__features svg {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* margin-top: auto keeps the buttons level across the row */
.ptier__cta {
  display: flex; align-items: center; justify-content: center;
  height: 52px; margin-top: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: 0.98rem; font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.45s var(--spring);
}
.ptier__cta:hover { background: #fff; color: var(--ink); }
.ptier__cta:active { transform: scale(0.98); }
.ptier--featured .ptier__cta { background: var(--pc); color: var(--ink); }
.ptier--featured .ptier__cta:hover { background: var(--pc-hover); color: var(--ink); }

@media (min-width: 640px) {
  .pricing__tiers { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
  /* 2 + 1: the last card centred on its own row */
  .ptier:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(14px, 1.8vw, 24px) / 2); }
}
@media (min-width: 1024px) {
  .pricing__tiers { grid-template-columns: repeat(3, 1fr); max-width: none; align-items: stretch; }
  .ptier:last-child { grid-column: auto; width: auto; }
  .ptier--featured { transform: translateY(-14px); }
}

/* ---------- Every website includes ---------- */
.pricing__minor {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}
.pricing__includes { margin-top: clamp(56px, 7vw, 88px); }
.pricing__includes-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
  margin-top: 24px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 24px;
  background: var(--dk-card);
}
.pricing__includes-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.92rem; font-weight: 500; line-height: 1.35; color: var(--dk-text-2);
}
.pricing__inc-icon, .pafter__icon {
  display: grid; place-items: center; flex: none;
  border-radius: 50%;
  background: rgba(54, 84, 255, 0.18); color: var(--accent);   /* site blue, like the CTA */
}
.pricing__inc-icon { width: 38px; height: 38px; }
.pricing__inc-icon svg, .pafter__icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 760px) { .pricing__includes-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pricing__includes-list { grid-template-columns: repeat(6, 1fr); } }

/* ---------- After launch ---------- */
.pricing__after { margin-top: clamp(48px, 6vw, 72px); }
.pricing__after-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 24px);
  max-width: 880px; margin: 24px auto 0;
}
@media (min-width: 700px) { .pricing__after-grid { grid-template-columns: 1fr 1fr; } }
.pafter {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 24px;
  background: var(--dk-card);
}
.pafter__icon { width: 46px; height: 46px; }
.pafter__icon svg { width: 22px; height: 22px; }
.pafter__title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.pafter__text { margin-top: 6px; font-size: 0.96rem; line-height: 1.5; color: var(--dk-text); }
.pafter__text strong { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- Closing line ---------- */
.pricing__close {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-top: clamp(56px, 7vw, 88px);
  text-align: center;
}
/* the fan button stays the site blue here, as everywhere */
.pricing .fan :focus-visible { outline-color: var(--accent); }
.pricing__close p {
  max-width: 34em;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  color: var(--dk-text-2);
  text-wrap: balance;
}

/* ===================================================================
   HOW IT WORKS — open section. Desktop: sticky intro left, timeline
   right. The line + number fill are drawn fully by default; js/how.js
   (motion allowed) adds .is-live and scrubs them with the scroll.
   =================================================================== */
.how {
  --edge: max(calc(var(--gutter) + var(--pad) * 0.5), calc((100% - 1320px) / 2));
  --node: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "steps" "cta" "trust";
  row-gap: clamp(32px, 5vw, 48px);
  padding: clamp(72px, 10vw, 136px) var(--edge) clamp(64px, 9vw, 120px);
}
.how__body, .how__side { display: contents; }
.how__intro { grid-area: intro; }
.how__cta { grid-area: cta; }
/* phones: the timeline sits indented, so centre the button under it */
@media (max-width: 699px) { .how__cta { display: flex; justify-content: center; } }
.how__timeline { grid-area: steps; position: relative; }
.how__trust { grid-area: trust; }

.how__title {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.how__text {
  margin-top: 16px; max-width: 38ch;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .how {
    grid-template-areas: "body" "trust";
    row-gap: clamp(56px, 6vw, 88px);
  }
  .how__body {
    display: grid; grid-area: body;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    grid-template-areas: "side steps";
    column-gap: clamp(40px, 5vw, 96px);
  }
  .how__side {
    display: flex; flex-direction: column; gap: 32px;
    grid-area: side; align-self: start;
    position: sticky; top: 40px;
  }
}

/* ---------- Timeline ---------- */
/* the line runs through the centres of the number nodes; js/how.js sets
   its exact length, the fallback reaches near enough to the last node */
.how__line {
  position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--node) / 2);
  width: 2px; height: var(--line-h, calc(100% - 300px));
  border-radius: 2px;
  background: rgba(20, 21, 28, 0.1);
}
.how__line-fill {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 1));
}
.how__steps { display: grid; gap: clamp(16px, 2vw, 24px); }
.hstep {
  position: relative;
  display: grid; grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 24px);
}
.hstep__num {
  position: relative; z-index: 1;
  width: var(--node); height: var(--node);
  display: grid; place-items: center;
  border-radius: 50%;
  /* filled = default; the inactive look only applies while scrubbing */
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 6px var(--bg);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.5s var(--spring);
}
.how__timeline.is-live .hstep:not(.is-on) .hstep__num {
  background: var(--surface); color: var(--muted);
  box-shadow: 0 0 0 6px var(--bg), inset 0 0 0 2px rgba(20, 21, 28, 0.12);
  transform: scale(0.92);
}

.hstep__card {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  overflow: hidden;
}
.hstep__title {
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hstep__summary { margin-top: 10px; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.hstep__list {
  display: grid; gap: 10px;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hstep__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.96rem; line-height: 1.45; color: var(--ink); }
.hstep__list svg {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.hstep__get {
  margin: 22px calc(clamp(22px, 2.4vw, 32px) * -1) calc(clamp(22px, 2.4vw, 32px) * -1);
  padding: 16px clamp(22px, 2.4vw, 32px);
  background: var(--accent-soft);
  font-size: 0.96rem; line-height: 1.5; color: var(--ink);
}
.hstep__get strong { color: var(--accent-2); font-weight: 700; }

@media (max-width: 559px) {
  .how { --node: 40px; }
  .hstep__num { font-size: 0.85rem; box-shadow: 0 0 0 4px var(--bg); }
}

/* ---------- Reassurance row ---------- */
.how__trust {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.how__trust li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.92rem; font-weight: 500; line-height: 1.35; color: var(--ink);
}
.how__trust-icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
}
.how__trust-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .how__trust { grid-template-columns: repeat(4, 1fr); } }
/* small phones: icon above the text, so two columns still have room */
@media (max-width: 559px) {
  .how__trust li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .how__trust-icon { width: 36px; height: 36px; }
}

/* ===================================================================
   ABOUT — a contained panel on a pale blue tint: intro (photo + copy),
   a comparison table (cards on phones, built by js/about.js), outcomes.
   =================================================================== */
.about {
  margin: 0 var(--gutter);
  padding: clamp(64px, 8vw, 120px) clamp(16px, 4vw, 56px);
  border-radius: var(--r-panel);
  background: #eef1ff;
}
.about__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- Intro ---------- */
.about__intro {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
@media (min-width: 1024px) { .about__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.about__media {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  padding-top: 64px;   /* room for the handwritten note */
}
@media (max-width: 559px) { .about__media { width: min(100%, 300px); padding-top: 58px; } }
.about__photo {
  aspect-ratio: 4 / 5;
  border-radius: clamp(24px, 3vw, 36px);
  overflow: hidden;
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.about__note {
  position: absolute; top: 0; right: 2%;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem); font-weight: 600; line-height: 1;
  color: var(--ink-2);
  transform: rotate(-5deg);
}
.about__note svg {
  width: 54px; height: 44px;
  margin: 2px 0 0 -30px;
  fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.about__badge {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.about__badge strong {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.86rem; font-weight: 700;
}
.about__badge--a { left: clamp(-24px, -2.5vw, -10px); top: 28%; transform: rotate(-3deg); }
.about__badge--b { right: clamp(-24px, -2.5vw, -10px); bottom: 10%; transform: rotate(2.5deg); }
.about__badge--b strong { background: var(--peach); color: var(--ink); }

.about__title {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.about__text { display: grid; gap: 14px; margin-top: 20px; max-width: 58ch; }
.about__text p { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; color: var(--ink-2); }
.about__sign {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(20, 21, 28, 0.1);
  font-size: 0.9rem; color: var(--muted);
}
.about__sign-name {
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-size: 1.9rem; font-weight: 600; line-height: 1;
  color: var(--ink);
}

/* ---------- Comparison ---------- */
.about__compare { margin-top: clamp(72px, 9vw, 120px); }
.about__h3 {
  max-width: 24ch; margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cmp__scroll { overflow-x: auto; padding: 4px 2px 8px; }
.cmp {
  width: 100%; min-width: 680px;
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
  font-size: 0.96rem;
}
.cmp th, .cmp td { padding: 18px 20px; text-align: left; vertical-align: top; }
.cmp thead th { font-size: 1rem; font-weight: 700; color: var(--ink); vertical-align: bottom; }
.cmp__sub { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.cmp tbody th { width: 24%; font-weight: 600; color: var(--ink); }
.cmp tbody th, .cmp tbody td { border-bottom: 1px solid rgba(20, 21, 28, 0.08); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--muted); }
.cmp__cell { display: flex; align-items: flex-start; gap: 10px; }
.cmp__icon {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cmp__icon--yes { stroke: var(--accent); stroke-width: 2.6; }
.cmp__icon--ok { stroke: #9a9ca5; }
.cmp__icon--no { stroke: #b4b6be; }

/* "Working with me": one white card running down the column, taller at
   both ends so it reads as raised */
.cmp .is-me {
  background: var(--surface);
  color: var(--ink); font-weight: 600;
  box-shadow: inset 1.5px 0 0 var(--accent), inset -1.5px 0 0 var(--accent);
}
/* its row dividers are drawn inside the cell, so the blue sides run unbroken */
.cmp tbody td.is-me {
  border-bottom: 0;
  box-shadow: inset 1.5px 0 0 var(--accent), inset -1.5px 0 0 var(--accent), inset 0 -1px 0 rgba(20, 21, 28, 0.08);
}
.cmp thead .is-me {
  padding-top: 26px;
  border-radius: 22px 22px 0 0;
  box-shadow: inset 1.5px 1.5px 0 var(--accent), inset -1.5px 0 0 var(--accent);
  color: var(--accent-2);
}
.cmp tbody tr:last-child .is-me {
  padding-bottom: 28px;
  border-radius: 0 0 22px 22px;
  box-shadow: inset 1.5px -1.5px 0 var(--accent), inset -1.5px 0 0 var(--accent);
}

/* phones: the table becomes stacked cards (built by js/about.js) */
.mcmp-list { display: none; }
@media (max-width: 759px) {
  .about__compare.has-cards .cmp__scroll { display: none; }
  .about__compare.has-cards .mcmp-list { display: grid; gap: 14px; }
}
.mcmp {
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.06);
}
.mcmp--me { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-md); }
.mcmp__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.mcmp--me .mcmp__title { color: var(--accent-2); }
.mcmp__list { display: grid; margin-top: 10px; }
.mcmp__row { display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid rgba(20, 21, 28, 0.07); }
.mcmp__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mcmp__val { font-size: 0.96rem; color: var(--muted); }
.mcmp--me .mcmp__val { color: var(--ink); font-weight: 600; }

/* ---------- Outcomes ---------- */
.about__outcomes { margin-top: clamp(48px, 6vw, 72px); }
.outcomes { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 20px); }
@media (min-width: 560px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }
.outcome {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.outcome__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-2);
}
.outcome__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outcome__title {
  margin-top: 16px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.15;
  text-transform: uppercase;
}
.outcome__text { margin-top: 8px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
/* single column on small phones: icon beside the text */
@media (max-width: 559px) {
  .outcome { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
  .outcome__icon { grid-row: span 2; }
  .outcome__title { margin-top: 2px; }
  .outcome__text { margin-top: 4px; }
}

/* ===================================================================
   SOCIAL PROOF (reusable) — overlapping avatars + 5 stars + a label.
   Switches: data-avatars="off" / data-stars="off" on .proof.
   =================================================================== */
.proof {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  text-align: left;
}
.proof__avatars { display: flex; flex: none; }
.proof__avatar {
  --ring: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  margin-left: -9px;
  display: grid; place-items: center;
  background: var(--c, var(--accent-soft));
  box-shadow: 0 0 0 2.5px var(--ring);
  font-size: 0.66rem; font-weight: 700; color: rgba(20, 21, 28, 0.7);
  overflow: hidden;
  transition: transform 0.4s var(--spring);
}
.proof__avatar:first-child { margin-left: 0; }
.proof__avatar img { width: 100%; height: 100%; object-fit: cover; }
.proof:hover .proof__avatar { transform: translateY(-3px); }
.proof:hover .proof__avatar:nth-child(2) { transition-delay: 30ms; }
.proof:hover .proof__avatar:nth-child(3) { transition-delay: 60ms; }
.proof:hover .proof__avatar:nth-child(4) { transition-delay: 90ms; }
.proof:hover .proof__avatar:nth-child(5) { transition-delay: 120ms; }
.proof__text { display: flex; flex-direction: column; gap: 3px; }
.proof__stars { display: flex; gap: 1px; color: var(--sun); }
.proof__stars svg { width: 15px; height: 15px; fill: currentColor; }
.proof__label { font-size: 0.82rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.proof[data-avatars="off"] .proof__avatars,
.proof[data-stars="off"] .proof__stars { display: none; }
.proof[data-avatars="off"] { padding-left: 16px; }

/* ===================================================================
   CALL TO ACTION — solid blue panel. #2b47e8 (a touch deeper than the
   accent) keeps white text at 6.6:1 and 88% white at 5.5:1; the glows
   sit in the corners, away from the text.
   =================================================================== */
.cta {
  --cta: #2b47e8;
  margin: var(--gutter) var(--gutter) 0;
  padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-panel);
  background-color: var(--cta);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.11), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.09), transparent 42%),
    repeating-radial-gradient(circle at 50% 135%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1.5px 72px);
  color: #fff;
  text-align: center;
}
.cta :focus-visible { outline-color: #fff; }
.cta__inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: #fff; color: var(--ink);
  font-size: 0.86rem; font-weight: 600;
}
.chip__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #1fbf5f; }
@media (prefers-reduced-motion: no-preference) {
  .chip__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: inherit;
    animation: chip-pulse 2s ease-out infinite;
  }
  @keyframes chip-pulse { to { transform: scale(3); opacity: 0; } }
}
.cta__title {
  margin-top: 24px;
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.8rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cta__sub {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
  text-wrap: balance;
}
.cta__action { margin-top: clamp(28px, 4vw, 40px); }

/* white fan button for blue backgrounds */
.fan--light .fan__trigger { background: #fff; color: var(--accent-2); box-shadow: 0 6px 16px -10px rgba(10, 20, 80, 0.5); }
.fan--light .fan__trigger:hover, .fan--light.is-open .fan__trigger { background: #eef1ff; box-shadow: 0 8px 20px -10px rgba(10, 20, 80, 0.55); }
.fan--light .fan__icon { background: var(--accent); color: #fff; }

.proof--on-blue {
  margin-top: clamp(28px, 4vw, 40px);
  padding: 0; background: none; box-shadow: none;
}
.proof--on-blue .proof__avatar { --ring: var(--cta); }
.proof--on-blue .proof__label { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 479px) {
  .proof--on-blue { flex-direction: column; text-align: center; }
  .proof--on-blue .proof__text { align-items: center; }
}

/* ===================================================================
   FAQ — open section: sticky intro left, accordion right. Below 1024px
   the side column dissolves so "Send a question" follows the list.
   =================================================================== */
.faq {
  --edge: max(calc(var(--gutter) + var(--pad) * 0.5), calc((100% - 1320px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "list" "cta";
  row-gap: clamp(28px, 4vw, 40px);
  padding: clamp(72px, 10vw, 136px) var(--edge);
}
.faq__side { display: contents; }
.faq__intro { grid-area: intro; }
.faq__list { grid-area: list; display: grid; gap: 10px; }
.faq__cta { grid-area: cta; }
.faq__title {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.faq__text { margin-top: 16px; max-width: 36ch; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); color: var(--ink-2); }
@media (min-width: 1024px) {
  .faq {
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    grid-template-areas: "side list";
    column-gap: clamp(40px, 5vw, 96px);
  }
  .faq__side {
    display: flex; flex-direction: column; gap: 32px;
    grid-area: side; align-self: start;
    position: sticky; top: 40px;
  }
}

.faq__item {
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  transition: box-shadow 0.3s ease;
}
.faq__item.is-open { box-shadow: var(--shadow-md), 0 0 0 1px rgba(54, 84, 255, 0.25); }
.faq__q button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(18px, 2vw, 24px);
  border-radius: 20px;
  text-align: left;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); font-weight: 600; line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s ease;
}
.faq__q button:hover, .faq__item.is-open .faq__q button { color: var(--accent-2); }
.faq__icon {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft);
  transition: transform 0.45s var(--spring), background-color 0.25s ease;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
  background: var(--accent-2);
  transition: background-color 0.25s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--accent); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }
/* 0fr -> 1fr animates to the answer's natural height; hidden answers are
   visibility: hidden, so they're out of the tab order and the a11y tree */
.faq__a {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.45s var(--ease-out), visibility 0s; }
.faq__a-inner { min-height: 0; overflow: hidden; }
.faq__a p {
  max-width: 64ch;
  padding: 0 clamp(18px, 2vw, 24px) 22px;
  font-size: 0.98rem; line-height: 1.6; color: var(--ink-2);
}

/* soft secondary button (tinted, accent text; fills on hover) */
.btn-soft {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 0.95rem; font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn-soft__icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  transition: transform 0.45s var(--spring);
}
.btn-soft__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-soft:hover { background: var(--accent); color: #fff; }
.btn-soft:hover .btn-soft__icon { transform: rotate(45deg); }   /* up-right arrow turns to point right */

/* ===================================================================
   FOOTER — charcoal panel like pricing, rounded top, running to the
   page bottom, with a fitted CHARLES KELLY wordmark cropped by the edge.
   =================================================================== */
.foot {
  margin: 0 var(--gutter);
  padding-top: clamp(64px, 8vw, 112px);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background-color: #262626;
  background-image: radial-gradient(#3a3a3a 0.9px, transparent 1.1px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  color: #fff;
  overflow: hidden;
}
.foot :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.foot__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

.foot__cta { display: grid; gap: 28px; }
.foot__title {
  max-width: 13ch;
  font-size: clamp(2.3rem, 1.3rem + 3.8vw, 5rem);
  font-weight: 700; line-height: 0.96; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.foot__cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot__mail { font-size: 0.92rem; color: #b5b5b5; }
.foot__mail a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.foot__mail a:hover { text-decoration-color: #fff; }
@media (min-width: 900px) {
  .foot__cta { grid-template-columns: 1fr auto; align-items: end; }
  .foot__cta-side { align-items: flex-end; text-align: right; }
}

.foot__links {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(36px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
@media (min-width: 560px) { .foot__links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .foot__links { grid-template-columns: repeat(3, 1fr); } }
.foot__h { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b5b5b5; }
.foot__col ul { display: grid; gap: 4px; margin-top: 14px; }
.foot__col a {
  display: inline-block; padding: 4px 0;
  font-size: 1rem; color: #ececec;
  transition: color 0.2s ease, transform 0.35s var(--spring);
}
.foot__col a:hover { color: #fff; transform: translateX(3px); }

.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  margin-top: clamp(48px, 6vw, 72px); padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.88rem; color: #b5b5b5;
}
.foot__bar a { color: #ececec; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
.foot__bar a:hover { color: #fff; text-decoration-color: #fff; }
.foot__made { display: inline-flex; align-items: center; gap: 6px; }
.foot__made svg { width: 13px; height: 13px; fill: #ff7701; }
.foot__top {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.88rem; font-weight: 600; color: #fff;
}
.foot__top-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.45s var(--spring);
}
.foot__top-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot__top:hover .foot__top-icon { background: #fff; color: var(--ink); transform: translateY(-3px); }
@media (max-width: 559px) { .foot__top { margin-left: 0; } }

/* fitted to the width by js/site.js; the negative margin crops its feet */
.foot__mark {
  margin: clamp(28px, 4vw, 48px) 1.5% -0.1em;
  font-size: 12.4vw; font-weight: 700; line-height: 0.82; letter-spacing: -0.045em;
  text-transform: uppercase; white-space: nowrap;
  color: #303030;
  user-select: none;
}

/* ===================================================================
   CONTACT PAGE — the final step, so it's the bright blue of the homepage
   CTA: a blue panel (nav inside) with the heading and two quick options
   on the left and the white quote card on the right. "What happens next"
   sits below on the light page. Phones: intro, form, then the options.
   =================================================================== */
.ctop {
  --cta: #2b47e8;   /* same blue as the homepage CTA: white text 6.6:1 */
  position: relative;
  margin: var(--gutter);
  padding: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) clamp(16px, 4vw, 56px) clamp(40px, 6vw, 88px);
  border-radius: var(--r-panel);
  background-color: var(--cta);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.11), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.09), transparent 42%),
    repeating-radial-gradient(circle at 20% 135%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1.5px 72px);
  color: #fff;
}
.ctop :focus-visible { outline-color: #fff; }
.ctop .qcard :focus-visible { outline-color: var(--accent); }

/* the header sits on the blue here: white text, white button */
.page-contact .nav:not(.is-menu) .nav__logo,
.page-contact .nav:not(.is-menu) .nav__link { color: #fff; }
.page-contact .nav:not(.is-menu) .nav__link:hover,
.page-contact .nav:not(.is-menu) .drop.is-open .drop__btn { background: rgba(255, 255, 255, 0.14); color: #fff; }
.page-contact .nav:not(.is-menu) .nav__burger { background: rgba(255, 255, 255, 0.16); }
.page-contact .nav:not(.is-menu) .nav__burger span { background: #fff; }
.page-contact .nav :focus-visible { outline-color: #fff; }
.page-contact .nav.is-menu :focus-visible, .page-contact .nav .drop__panel :focus-visible { outline-color: var(--accent); }
.ctop__grid {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "form" "aside";
  gap: clamp(28px, 4vw, 40px);
}
.ctop__side { display: contents; }
.ctop__intro { grid-area: intro; }
.ctop__aside { grid-area: aside; }
.qcard { grid-area: form; }
@media (min-width: 1024px) {
  .ctop__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "side form";
    column-gap: clamp(40px, 5vw, 88px);
  }
  .ctop__side { display: flex; flex-direction: column; gap: 40px; grid-area: side; padding-top: 8px; }
}

.ctop__title {
  font-size: clamp(2.4rem, 1.3rem + 4vw, 4.6rem);
  font-weight: 700; line-height: 0.96; letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ctop__lead { margin-top: 18px; max-width: 38ch; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem); line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.ctop__alt { font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); }
.ctop__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
/* soft buttons on blue: the blue hover would vanish, so they fill white */
.btn-soft--on-blue:hover { background: #fff; color: var(--accent-2); }

/* ---------- What happens next (below the panel) ---------- */
.cnext {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) calc(var(--gutter) + clamp(12px, 3vw, 40px)) 0;
}
.cnext__title {
  text-align: center;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  text-transform: uppercase;
}
.cnext__steps {
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (min-width: 760px) { .cnext__steps { grid-template-columns: repeat(3, 1fr); } }
.cnext__step {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.cnext__num {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 0.92rem; font-weight: 700;
}
.cnext__step h3 { margin-top: 16px; font-size: 1.08rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.cnext__step p { margin-top: 6px; font-size: 0.97rem; line-height: 1.5; color: var(--ink-2); }
.cnext .me { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

.me { display: flex; align-items: center; gap: 14px; }
.me__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, var(--shadow-sm); }
.me__text { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.me__text strong { display: block; color: var(--ink); font-weight: 700; }

/* ---------- Form card ---------- */
.qcard {
  align-self: start;
  color: var(--ink);   /* the panel around it is white-on-blue */
  padding: clamp(22px, 3vw, 40px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  scroll-margin-top: 16px;
}
.qcard:focus { outline: none; }
.qcard__title { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; }
.qcard__sub { margin-top: 8px; font-size: 0.93rem; color: var(--muted); }

.qform { display: grid; gap: 22px; margin-top: 26px; container: qform / inline-size; }
.qform__row { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 560px) { .qform__row { grid-template-columns: 1fr 1fr; gap: 16px; } }

.field { display: grid; gap: 8px; min-width: 0; border: 0; }
.field > label, .field > legend { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.field > legend { margin-bottom: 10px; padding: 0; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: 0.82rem; color: var(--muted); }

.input {
  width: 100%; height: 52px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: #f5f3ef;
  font: inherit; font-size: 1rem;   /* 16px: no zoom-on-focus on iOS */
  color: var(--ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder { color: #8b8e98; }
.input:hover { background: #f0ede8; }
.input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(54, 84, 255, 0.14); }
.input--area { height: auto; min-height: 148px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.input[aria-invalid="true"] { border-color: #d92d20; background: #fff7f6; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.14); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.85rem; font-weight: 500; line-height: 1.4; color: #b42318;
}
.field__error[hidden] { display: none; }
.field__error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* pill choices (radio) */
.popts { display: flex; flex-wrap: wrap; gap: 8px; }
.popt { position: relative; }
.popt input, .pkg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.popt span {
  display: inline-flex; align-items: center;
  height: 42px; padding: 0 16px;
  border-radius: 999px;
  background: #f5f3ef;
  font-size: 0.93rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s var(--spring);
}
.popt span:hover { background: #ece9e3; }
.popt input:checked + span { background: var(--accent); color: #fff; }
.popt input:active + span { transform: scale(0.96); }
.popt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* package cards (radio) */
.pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* four across only when the form itself is wide enough */
@container qform (min-width: 760px) { .pkgs { grid-template-columns: repeat(4, 1fr); } }
.pkg {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: #f5f3ef;
  box-shadow: inset 0 0 0 1.5px transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.35s var(--spring);
}
.pkg:hover { background: #ece9e3; }
.pkg:active { transform: scale(0.98); }
.pkg__name { padding-right: 28px; font-size: 0.97rem; font-weight: 700; color: var(--ink); }
.pkg__tag {
  display: inline-block; margin-left: 4px; padding: 2px 7px; vertical-align: 1px;
  white-space: nowrap;
  border-radius: 999px; background: #fff;
  font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-2);
}
.pkg__price { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.pkg__check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px rgba(20, 21, 28, 0.15);
  color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.4s var(--spring);
}
.pkg__check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pkg:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pkg:has(input:checked) .pkg__price { color: var(--accent-2); }
.pkg:has(input:checked) .pkg__check { background: var(--accent); color: #fff; box-shadow: none; transform: scale(1.06); }
.pkg:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.qform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qform__submit {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; margin-top: 4px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 1.02rem; font-weight: 600;
  box-shadow: 0 6px 14px -8px rgba(54, 84, 255, 0.45);
  transition: background-color 0.2s ease, transform 0.45s var(--spring);
}
.qform__submit:hover { background: var(--accent-2); }
.qform__submit:hover .qform__submit-icon { transform: translateX(3px); }
.qform__submit:active { transform: scale(0.985); }
.qform__submit-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--spring); }
.qform__spinner {
  display: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.qform__submit.is-busy { cursor: progress; background: var(--accent-2); }
.qform__submit.is-busy .qform__spinner { display: block; }
.qform__submit.is-busy .qform__submit-icon { display: none; }
.qform__note {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  font-size: 0.84rem; line-height: 1.45; color: var(--muted); text-align: center;
}
.qform__note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.qform__note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

.qform__errors {
  margin-top: 22px; padding: 16px 18px;
  border-radius: 16px;
  background: #fff4f2;
  box-shadow: inset 0 0 0 1.5px #f4c7c1;
}
.qform__errors:focus { outline: none; box-shadow: inset 0 0 0 2px #d92d20; }
.qform__errors-title { font-size: 0.95rem; font-weight: 700; color: #b42318; }
.qform__errors ul { display: grid; gap: 4px; margin-top: 8px; padding-left: 1.1em; list-style: disc; color: #b42318; }
.qform__errors a { font-size: 0.9rem; color: #b42318; text-decoration: underline; text-underline-offset: 2px; }
.qform__fail {
  margin-top: 22px; padding: 14px 18px;
  border-radius: 16px;
  background: #fff4f2;
  font-size: 0.93rem; color: #b42318;
}
.qform__fail a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Sent ---------- */
.qdone { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(12px, 3vw, 40px) 0; }
.qdone[hidden] { display: none; }
.qdone__icon {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint-soft); color: var(--mint-ink);
}
.qdone__icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qdone__title { margin-top: 22px; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.qdone__title:focus { outline: none; }
.qdone__text { margin-top: 14px; max-width: 40ch; font-size: 1.04rem; line-height: 1.55; color: var(--ink-2); }
.qdone__small { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.qdone__small a { color: var(--accent-2); font-weight: 600; text-decoration: underline; }
.qdone__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 28px; }
.qdone__home { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .qdone:not([hidden]) { animation: rise 0.6s var(--ease-out) both; }
  .qdone:not([hidden]) .qdone__icon { animation: pop-in 0.7s var(--spring) 0.1s both; }
  @keyframes pop-in { from { transform: scale(0.4); opacity: 0; } }
}

/* phones: the card goes nearly edge to edge inside the panel */
@media (max-width: 559px) {
  .ctop { padding-left: 10px; padding-right: 10px; }
  .ctop__intro, .ctop__aside { padding: 0 8px; }
  .qcard { padding: 22px 18px; border-radius: 24px; }
  .cnext .me { justify-content: flex-start; }
}

/* lean footer (contact page): no closing CTA above the links */
.foot--lean { margin-top: clamp(48px, 7vw, 96px); }
.foot--lean .foot__links { margin-top: 0; padding-top: 0; border-top: 0; }

/* ===================================================================
   WHO I HELP PAGES (built by scripts/build-who-pages.py) — light hero
   panel with the audience's screenshot stack, then problem → fix,
   features (pale blue panel), proof, recommended package, FAQ, blue CTA.
   =================================================================== */
.whero {
  position: relative;
  margin: var(--gutter);
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) clamp(16px, 4vw, 56px) clamp(40px, 6vw, 80px);
  border-radius: var(--r-panel);
  background: #fdfcfa;
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.04);
}
.whero__grid {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 1024px) { .whero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.whero__title {
  margin-top: 16px;
  font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.4rem);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.whero__sub { margin-top: 20px; max-width: 42ch; font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.whero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.whero__copy .proof { margin-top: 28px; }
.whero__card { grid-template-rows: 1fr auto; padding-top: clamp(16px, 3vw, 32px); }
.whero__card .wcard__stack { margin-top: 0; aspect-ratio: 100 / 66; }
@media (max-width: 699px) { .whero__card .wcard__stack { aspect-ratio: 100 / 56; } }

/* ---------- Section shell ---------- */
.wsec {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) calc(var(--gutter) + clamp(12px, 3vw, 40px)) 0;
}
.wsec--tint {
  max-width: none;
  margin: clamp(72px, 9vw, 120px) var(--gutter) 0;
  padding: clamp(64px, 8vw, 112px) max(clamp(16px, 4vw, 56px), calc((100% - 1180px) / 2));
  border-radius: var(--r-panel);
  background: #eef1ff;
}
.wsec__head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.wsec__title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.wsec__head > .wsec__title:first-child { margin-top: 0; }
.wsec__sub { margin-top: 16px; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem); color: var(--ink-2); text-wrap: balance; }
.wsec__sub a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wsec__cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* primary pill with the soft buttons' arrow (up-right, turns right on hover) */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 8px 0 24px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 600;
  transition: background-color 0.2s ease, transform 0.45s var(--spring);
}
.btn-primary .btn-soft__icon { width: 40px; height: 40px; }
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:hover .btn-soft__icon { transform: rotate(45deg); }
.btn-primary:active { transform: scale(0.97); }

/* ---------- Problem → fix ---------- */
.wsplit { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 24px); }
@media (min-width: 800px) { .wsplit { grid-template-columns: 1fr 1fr; } }
.wsplit__card { padding: clamp(24px, 3vw, 36px); border-radius: 26px; }
.wsplit__card--now { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.07); }
.wsplit__card--after { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-md); }
.wsplit__h { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.wsplit__card--after .wsplit__h { color: var(--accent-2); }
.wsplit__list { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.wsplit__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.45; color: var(--muted); }
.wsplit__card--after .wsplit__list li { color: var(--ink); font-weight: 600; }

@media (min-width: 1024px) { .outcomes--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Proof ---------- */
.wquotes { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 800px) { .wquotes { grid-template-columns: 1fr 1fr; } }
.wquote {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.wquote__stars { display: flex; gap: 2px; color: var(--sun); }
.wquote__stars svg { width: 17px; height: 17px; fill: currentColor; }
.wquote__text { margin-top: 16px; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink); }
.wquote__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 20px; font-size: 0.92rem; color: var(--muted); }
.wquote__by strong { color: var(--ink); font-weight: 700; }
.wsec__trust { margin-top: clamp(20px, 3vw, 32px); }

/* ---------- Recommended package ---------- */
.wrec { max-width: 560px; margin: 0 auto; }
/* two packages side by side (cheapest first), one highlighted */
.wrec--duo { max-width: 940px; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; }
@media (min-width: 760px) { .wrec--duo { grid-template-columns: 1fr 1fr; } }
.wrec__card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.wrec__card.is-featured { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-md); }
.wrec__card > .wrec__top:first-child { margin-top: 0; }
/* an invisible badge keeps the plain card's name level with the featured one */
.wrec__badge--ghost { visibility: hidden; }
/* stacked: nothing to line up with */
@media (max-width: 759px) {
  .wrec__badge.wrec__badge--ghost { display: none; }
  .wrec__badge--ghost + .wrec__top { margin-top: 0; }
}
.wrec__badge {
  align-self: flex-start;
  display: inline-flex; padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
}
.wrec__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; }
.wrec__name { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.wrec__price { font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.wrec__for { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.wrec__list { display: grid; gap: 11px; margin: 20px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.wrec__card .wrec__cta { margin-top: auto; }
.wrec__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.97rem; line-height: 1.45; }
.wrec__list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wrec__cta {
  display: flex; align-items: center; justify-content: center;
  height: 56px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 600;
  transition: background-color 0.2s ease, transform 0.45s var(--spring);
}
.wrec__cta:hover { background: var(--accent-2); }
.wrec__card:not(.is-featured) .wrec__cta { background: var(--accent-soft); color: var(--accent-2); }
.wrec__card:not(.is-featured) .wrec__cta:hover { background: var(--accent); color: #fff; }
.wrec__cta:active { transform: scale(0.985); }
.wrec__alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  margin-top: 22px;
  font-size: 0.97rem; color: var(--ink-2);
}

/* ---------- Other audiences ---------- */
.wother { padding: clamp(56px, 7vw, 88px) calc(var(--gutter) + 16px) 0; text-align: center; }
.wother p { font-size: 0.95rem; color: var(--muted); }
.wother__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* ===================================================================
   FREE MOCKUP OFFER (js/offer.js) — centred modal on desktop, a bottom
   sheet (max ~75% of the screen, drag handle) on phones.
   =================================================================== */
.offer {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
}
.offer[hidden] { display: none; }
.offer__scrim {
  position: absolute; inset: 0;
  background: rgba(20, 21, 28, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.offer.is-open .offer__scrim { opacity: 1; }
.offer__panel {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 32px); max-height: calc(100svh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.22s ease, transform 0.55s var(--spring);
}
.offer__panel:focus { outline: none; }
.offer.is-open .offer__panel { opacity: 1; transform: none; }
.offer.is-closing .offer__panel { transition: opacity 0.18s ease, transform 0.25s ease-in; transform: translateY(8px) scale(0.97); }

.offer__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--spring);
}
.offer__close:hover { transform: rotate(90deg); }
.offer__close svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.offer__handle { display: none; }

/* picture strip: a homepage in a browser frame + a FREE sticker */
.offer__visual {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background-color: var(--accent-soft);
  background-image: radial-gradient(rgba(54, 84, 255, 0.16) 1.1px, transparent 1.4px);
  background-size: 16px 16px;
}
.offer__frame {
  position: absolute; left: 50%; top: 30px;
  width: 64%;
  padding-top: 10px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 21, 28, 0.08), 0 18px 36px -14px rgba(20, 21, 28, 0.4);
  transform: translateX(-50%) rotate(-2deg);
}
.offer__frame::before {
  content: ""; position: absolute; left: 9px; top: 3px; width: 26px; height: 5px;
  background:
    radial-gradient(circle at 2.5px 50%, #ff7a6b 2.3px, transparent 2.6px),
    radial-gradient(circle at 11px 50%, #ffc34d 2.3px, transparent 2.6px),
    radial-gradient(circle at 19.5px 50%, #3fcf6f 2.3px, transparent 2.6px);
}
.offer__frame img { width: 100%; height: auto; }
.offer__sticker {
  position: absolute; left: 22px; top: 20px; z-index: 1;
  width: 70px; height: 70px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sun); color: var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 10px 20px -8px rgba(20, 21, 28, 0.45);
  font-size: 1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  transform: rotate(-12deg);
}
.offer__sticker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(20, 21, 28, 0.35); }

.offer__body { padding: 24px clamp(20px, 4vw, 32px) 26px; }
.offer__title {
  margin-top: 12px;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.offer__title:focus { outline: none; }
.offer__text { margin-top: 12px; font-size: 0.98rem; line-height: 1.55; color: var(--ink-2); }
.offer__limit { margin-top: 8px; font-size: 0.86rem; font-weight: 600; color: var(--accent-2); }
.offer__form { display: grid; gap: 14px; margin-top: 20px; container: qform / inline-size; }
.offer__form .qform__row { gap: 14px; }
.offer__fine { font-size: 0.8rem; line-height: 1.45; color: var(--muted); text-align: center; }
.offer__fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

.offer__done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px clamp(20px, 4vw, 40px) 34px; }
.offer__done[hidden] { display: none; }
.offer__check svg { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.offer__check circle { fill: var(--mint-soft); stroke: none; }
.offer__check path { stroke: var(--mint-ink); stroke-width: 3; }
.offer__done .offer__text { max-width: 34ch; }
.offer__done-close { margin-top: 22px; padding-right: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .offer.is-open .offer__sticker { animation: sticker-pop 0.6s var(--spring) 0.2s backwards; }
  @keyframes sticker-pop { from { transform: rotate(-40deg) scale(0.3); opacity: 0; } }
  .offer__done:not([hidden]) .offer__check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: check-draw 0.5s var(--ease-out) 0.15s forwards; }
  .offer__done:not([hidden]) .offer__check { animation: pop-in 0.55s var(--spring) both; }
  @keyframes check-draw { to { stroke-dashoffset: 0; } }
}

/* phones: a bottom sheet with a drag handle, never full screen */
@media (max-width: 640px) {
  .offer { place-items: end center; padding: 0; }
  .offer__panel {
    width: 100%;
    max-height: 75vh; max-height: 75svh;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: opacity 0.2s ease, transform 0.45s var(--ease-out);
  }
  .offer.is-closing .offer__panel { transform: translateY(100%); transition: transform 0.28s ease-in, opacity 0.28s ease; }
  .offer__visual { height: 132px; border-radius: 24px 24px 0 0; touch-action: none; }
  .offer__frame { top: 34px; width: 70%; }
  .offer__sticker { width: 58px; height: 58px; font-size: 0.86rem; left: 16px; top: 26px; }
  .offer__handle {
    display: block;
    position: absolute; left: 50%; top: 8px; z-index: 2;
    width: 44px; height: 5px; margin-left: -22px;
    border-radius: 5px;
    background: rgba(20, 21, 28, 0.25);
    touch-action: none;
  }
  .offer__handle::before { content: ""; position: absolute; inset: -14px -30px; }  /* bigger grab area */
}

@media (prefers-reduced-motion: reduce) {
  /* a plain fade: no scale, no slide */
  .offer__panel, .offer.is-closing .offer__panel { transform: none !important; transition: opacity 0.2s ease !important; }
  .offer__scrim { transition: opacity 0.2s ease !important; }
}

/* ===================================================================
   PRIVACY POLICY — a light title panel (nav inside), then a readable
   720px text column with a table of contents.
   =================================================================== */
.ptop {
  position: relative;
  margin: var(--gutter);
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 88px)) clamp(16px, 4vw, 56px) clamp(40px, 6vw, 72px);
  border-radius: var(--r-panel);
  background: #fdfcfa;
  box-shadow: 0 0 0 1px rgba(20, 21, 28, 0.04);
}
.ptop__inner { max-width: 720px; margin: 0 auto; }
.ptop__title {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.ptop__date { margin-top: 16px; font-size: 0.95rem; color: var(--muted); }

.policy {
  max-width: calc(720px + 2 * (var(--gutter) + 16px)); margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) calc(var(--gutter) + 16px) 0;
  font-size: 1.04rem; line-height: 1.7; color: var(--ink-2);
}
.policy p + p { margin-top: 14px; }
.policy a { color: var(--accent-2); text-decoration: underline; text-decoration-color: rgba(36, 64, 230, 0.35); text-underline-offset: 3px; }
.policy a:hover { text-decoration-color: currentColor; }
.policy__intro p:first-child { font-size: 1.12rem; color: var(--ink); }

.policy__toc {
  margin-top: clamp(32px, 4vw, 44px);
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.policy__toc-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.policy__toc ol { margin-top: 12px; padding-left: 1.3em; columns: 2 240px; column-gap: 32px; font-size: 0.97rem; line-height: 1.5; }
.policy__toc li { break-inside: avoid; padding: 3px 0; }
.policy__toc li::marker { color: var(--muted); }
.policy__toc a { text-decoration: none; color: var(--ink); }
.policy__toc a:hover { color: var(--accent-2); text-decoration: underline; }

.policy__section { margin-top: clamp(40px, 5vw, 56px); scroll-margin-top: 24px; }
.policy__section h2 { margin-bottom: 14px; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.policy__section ul { display: grid; gap: 10px; margin: 14px 0; padding-left: 1.2em; list-style: disc; }
.policy__section ul li::marker { color: var(--accent); }
.policy__section ul + p { margin-top: 14px; }
.policy__contact { color: var(--ink); }

/* ===================================================================
   MOTION (only when the visitor is fine with it)
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* entrances: short, small, and never on the headline */
  .enter { animation: rise 0.6s var(--ease-out) backwards; animation-delay: calc(60ms + var(--d, 0) * 70ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }

  .blob--blue { animation: drift-a 18s ease-in-out infinite alternate; }
  .blob--peach { animation: drift-b 22s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate(6vmax, 4vmax) scale(1.06); } }
  @keyframes drift-b { to { transform: translate(-5vmax, -4vmax) scale(1.08); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
  /* options still need to read as appearing: a plain fade */
  .fan__menu > li, .fan.is-open .fan__menu > li { transition: opacity 0.15s ease !important; }
}