/* ==========================================================================
   CRAYDL landing page
   Inter 400 / 500 / 700 only. No italics, no serif, no gradients
   (the hero CTA sheen is the single, brief-mandated exception).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap to Inter causes no layout shift */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  --ink: #111111;
  --ink-2: #3a3a3a;          /* "dark gray" body/subheadline */
  --gray: #6B6B6B;           /* secondary text */
  --paper: #FFFFFF;
  --stone: #F7F5F2;          /* alternating sections */
  --accent: #C9B49B;         /* CRAYDL tan: CTA, thin rules, accents ONLY */
  --accent-dark: #B8A388;    /* tan hover */
  --accent-press: #A8937A;   /* tan pressed */
  --accent-ink: #867566;     /* bronze for tan-family text/focus on light grounds (>= 4:1 on white and stone) */
  --on-accent: #2B2D2F;      /* charcoal text on tan (6.9:1) */
  --error: #B42318;
  --line: rgba(17, 17, 17, 0.12);
  --line-strong: rgba(17, 17, 17, 0.22);

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

  --radius-media: 12px;
  --radius-btn: 8px;
  --shadow-media: 0 1px 2px rgba(17, 17, 17, 0.06), 0 18px 40px -18px rgba(17, 17, 17, 0.28);
  --shadow-btn: 0 1px 2px rgba(17, 17, 17, 0.12), 0 6px 16px -6px rgba(134, 117, 102, 0.5);
  --shadow-btn-hover: 0 2px 4px rgba(17, 17, 17, 0.12), 0 12px 24px -8px rgba(134, 117, 102, 0.55);

  --gutter: 20px;
  --section-y: 56px;
  --maxw: 1140px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 80px; }
}
@media (min-width: 1024px) {
  :root { --section-y: 96px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
@media (min-width: 768px) { body { font-size: 18px; } }

/* No italic anywhere: neutralise UA defaults */
em, i, cite, address, dfn, var { font-style: normal; }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent-ink); }
strong { font-weight: 700; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type primitives ---------- */
.label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.h2 {
  font-size: clamp(30px, 2.1rem + 1.6vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 21ch;
}

.lede {
  margin-top: 20px;
  max-width: 600px;
  color: var(--ink-2);
  font-size: 17px;
}
@media (min-width: 768px) { .lede { font-size: 19px; } }

.caption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray);
}

.prose p + p { margin-top: 1.1em; }
.prose { color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 18px 36px;
  border: 0;
  border-radius: var(--radius-btn);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background-color 180ms ease-out,
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    color 180ms ease-out,
    border-color 180ms ease-out;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
  overflow: hidden;
  isolation: isolate;
}
.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
  text-decoration: none;
}
.btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.btn--primary:active { background: var(--accent-press); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.14); }
.btn:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--radius-btn);
}
.btn[disabled] { cursor: default; }
.btn--block { width: 100%; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 17px;
  padding-inline: 24px;
}
.btn--ghost:hover {
  background: var(--stone);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--ink), 0 6px 14px -8px rgba(17, 17, 17, 0.3);
}

/* Hero CTA sheen: a light highlight sweeps left to right over 900ms, every 6s */
.btn--sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: sheen 6s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes sheen {
  0% { transform: translateX(-110%); }
  15% { transform: translateX(110%); }   /* 15% of 6s = 900ms */
  100% { transform: translateX(110%); }
}

/* Submit button states: normal / loading / success */
.btn--submit .btn__spinner,
.btn--submit .btn__check { position: absolute; opacity: 0; transition: opacity 160ms ease-out; }
.btn--submit .btn__label { transition: opacity 160ms ease-out; }
.btn__spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(43, 45, 47, 0.25);
  border-top-color: var(--on-accent);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn--submit[data-state="loading"] .btn__label,
.btn--submit[data-state="success"] .btn__label { opacity: 0; }
.btn--submit[data-state="loading"] .btn__spinner { opacity: 1; }
.btn--submit[data-state="success"] .btn__check { opacity: 1; }
.btn--submit[data-state="loading"],
.btn--submit[data-state="success"] { transform: none; }

/* ---------- Top bar ---------- */
.topbar { background: var(--paper); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* CRAYDL logo centred */
  height: 76px;
}
.topbar__logo { display: inline-block; padding: 8px 0; border-radius: 4px; }
.topbar__logo img { width: 104px; height: auto; }
@media (min-width: 768px) {
  .topbar__inner { height: 92px; }
  .topbar__logo img { width: 120px; }
}

/* ---------- 1. Hero ---------- */
.hero { padding: 28px 0 var(--section-y); }
@media (min-width: 768px) { .hero { padding-top: 40px; } }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.qualifier {
  max-width: 34ch;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}
@media (min-width: 768px) {
  .qualifier { max-width: none; font-size: 13px; }
}
.hero__title {
  margin-top: 22px;
  max-width: 880px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.hero__line { display: block; text-wrap: balance; }
.hero__line + .hero__line { margin-top: 0.18em; }
@media (min-width: 768px) { .hero__title { font-size: 46px; margin-top: 28px; } }
@media (min-width: 1024px) { .hero__title { font-size: 56px; } }

.hero__sub {
  margin-top: 24px;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 768px) { .hero__sub { font-size: 20px; margin-top: 28px; } }

/* VSL (Vidalytics) */
.vsl {
  width: 100%;
  max-width: 880px;
  margin-top: 40px;
}
@media (min-width: 768px) { .vsl { margin-top: 52px; } }
.vsl__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-media);
}
.vsl__placeholder,
.vsl__embed { position: absolute; inset: 0; }
/* Thumbnail facade (a button): sits above the player box until the player is ready */
.vsl__placeholder {
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vsl__placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.86);
}
.vsl__placeholder::after {           /* flat dark scrim keeps the play button legible */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.16);
  pointer-events: none;
}
.vsl__play {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.88);
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px rgba(201, 180, 155, 0.75), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
  transition: transform 180ms ease-out, background-color 180ms ease-out;
}
.vsl__play svg { margin-left: 4px; }
.vsl__placeholder:hover .vsl__play { transform: scale(1.05); background: #111; }
.vsl__placeholder:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-media); }
@media (max-width: 479px) { .vsl__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } }
/* Vidalytics injects its own padded wrapper; keep it filling our reserved 16:9 box */
.vsl__embed > * { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; padding-top: 0 !important; }
/* Tapped while the player is still loading: a tan ring spins around the play button until the video starts */
.vsl__frame.is-loading .vsl__play::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(201, 180, 155, 0.25); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .vsl__frame.is-loading .vsl__play::after { animation-duration: 2.4s; } }
.vsl__frame.is-ready .vsl__placeholder { opacity: 0; visibility: hidden; transition: opacity 400ms ease-out, visibility 0s linear 400ms; pointer-events: none; }

.hero__note {
  margin-top: 14px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray);
  text-wrap: balance;
}

/* Above-the-fold tightening: the booking + call buttons sit right under the subheadline,
   the VSL follows, so the primary CTA is visible on load from 375x667 up to 1920x1080. */
/* Phones: a scaled-down desktop hero. Same pieces in the same order (callout, headline, subhead, the two
   buttons side by side, 45-minute line, VSL), calmer: fewer stacked blocks, quieter small text, more air,
   and the full VSL still inside the first screen with Safari's toolbars showing (390x664, 430x739).
   Sizes follow the visible height (svh) so shorter phones scale down instead of cutting off the video. */
@media (max-width: 767px) {
  .topbar__inner { height: 52px; }
  .topbar__logo { padding: 4px 0; }
  .topbar__logo img { width: 92px; }
  .hero { padding-top: 2px; }
  .qualifier { font-size: 10px; line-height: 1.5; letter-spacing: 0.1em; max-width: 340px; opacity: 0.85; }
  .hero__title { margin-top: 10px; font-size: clamp(22px, min(6.6vw, 3.8svh), 32px); line-height: 1.07; }
  .hero__line + .hero__line { margin-top: 0.14em; }
  .hero__sub { margin-top: 10px; font-size: clamp(13.5px, 2.1svh, 15px); line-height: 1.45; max-width: 34ch; color: var(--gray); }
  /* two slim one-line buttons (side by side would wrap the long booking label onto three lines) */
  .cta-pair--hero { gap: 8px; margin-top: 14px; }
  .cta-pair--hero .btn { min-height: 48px; padding: 8px 14px; font-size: 15px; line-height: 1.2; }
  .cta-pair--hero .btn--call { gap: 8px; text-align: center; }
  .cta-pair--hero .btn--call .btn__phone { width: 16px; height: 16px; }
  .cta-pair--hero .btn--call .btn__main { font-size: 15px; line-height: 1.2; }
  .cta-pair--hero .btn--call .btn__meta { display: none; }   /* the number is one tap away; aria-label still names Adam and the number */
  .hero__note { margin-top: 10px; font-size: 12px; line-height: 1.45; max-width: 340px; opacity: 0.85; }
  .vsl { margin-top: 12px; }
}
@media (min-width: 768px) {
  .hero { padding-top: 24px; }
  .hero__title { margin-top: 18px; }
  .hero__sub { margin-top: 18px; }
  .vsl { margin-top: 40px; }
}
@media (min-width: 1024px) {
  .hero__title { font-size: clamp(44px, 3.1vw + 8px, 56px); max-width: 960px; }
}

/* ---------- CTA pair: booking (primary) + call the founder (secondary) ---------- */
.cta-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
.cta-pair--hero { margin-top: 20px; }
@media (min-width: 768px) { .cta-pair--hero { margin-top: 26px; } }
.cta-pair .btn--primary { padding-inline: 20px; }
@media (min-width: 960px) {
  .cta-pair {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    max-width: none;
    width: auto;
    gap: 14px;
  }
  .cta-pair .btn--primary { padding-inline: 32px; }
}
.cta-pair--center { margin-top: 36px; }
.cta-pair--final { margin-top: 36px; }

.btn--call {
  gap: 12px;
  min-height: 56px;
  padding: 9px 26px 9px 22px;
  background: var(--on-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.14), 0 6px 16px -8px rgba(17, 17, 17, 0.45);
  text-align: left;
}
.btn--call:hover {
  background: #111;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(17, 17, 17, 0.14), 0 12px 24px -10px rgba(17, 17, 17, 0.5);
  text-decoration: none;
}
.btn--call:active { background: #000; }
.btn__phone { flex: none; color: var(--accent); }
.btn__stack { display: flex; flex-direction: column; min-width: 0; }
.btn__main { font-size: 17px; line-height: 1.25; font-weight: 700; }
.btn__meta { margin-top: 2px; font-size: 13px; line-height: 1.3; font-weight: 500; color: #d8d2c9; letter-spacing: 0.005em; white-space: nowrap; }
@media (min-width: 768px) { .btn__main { font-size: 18px; } }
/* On the black final section the charcoal fill would disappear: use a light outline instead */
.final .btn--call { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.final .btn--call:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px #fff; }
.final .btn--call:focus-visible { outline-color: var(--accent); }

/* Call row inside the application panel (every state) */
.panel__call {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.panel__call-text { margin-bottom: 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.pc-booked { display: none; }
.panel[data-state="booked"] .pc-default { display: none; }
.panel[data-state="booked"] .pc-booked { display: inline; }
.panel[data-state="calendar"] .panel__call { padding-inline: 8px; }
.panel[data-state="calendar"] .panel__call .btn { width: 100%; }

/* ---------- Sticky bar: MOBILE ONLY (< 768px). Hidden by CSS on tablet/desktop. ---------- */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(17, 17, 17, 0.35);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.stickybar.is-on { transform: none; visibility: visible; transition: transform 260ms var(--ease-out), visibility 0s; }
.stickybar__inner {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 8px;
}
.stickybar .btn { min-height: 52px; padding: 6px 10px; font-size: 16px; }
.stickybar .btn--call { gap: 8px; }
.stickybar .btn__main { font-size: 16px; }
.stickybar .btn--primary:hover, .stickybar .btn--call:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .stickybar, .stickybar.is-on { transition: none; } }
@media (max-width: 767px) {
  /* room at the end of the page so nothing is ever trapped under the bar */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .stickybar { display: none; }
}

/* ---------- 2. Proof bar ---------- */
.proofbar {
  background: var(--stone);
  padding: 48px 0;
}
@media (min-width: 768px) { .proofbar { padding: 64px 0; } }
.stats {
  display: grid;
  gap: 36px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.stat__num {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat__label {
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-2);
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .stat { padding: 0 24px; }
  .stat + .stat { border-left: 1px solid var(--line); }
  .stat__num { font-size: 64px; }
}
@media (min-width: 1024px) { .stat__num { font-size: 76px; } }

/* ---------- Generic section shells ---------- */
.section { padding: var(--section-y) 0; }
.section--white { background: var(--paper); }
.section--stone { background: var(--stone); }
.section--white + .section--white { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 40px; }
@media (min-width: 768px) { .section-head { margin-bottom: 56px; } }

/* ---------- 3. The problem ---------- */
.problem__title { max-width: 22ch; }
.problem__grid { display: grid; gap: 40px; }
.clashes { border-top: 1px solid var(--ink); }
.clash {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.clash__mark { color: var(--ink); }
.problem__body { max-width: 720px; }
@media (min-width: 960px) {
  .problem__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head body" "clash clash";
    column-gap: 72px;
    row-gap: 64px;
    align-items: end;
  }
  .problem__head { grid-area: head; }
  .problem__body { grid-area: body; padding-bottom: 6px; }
  .clashes {
    grid-area: clash;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .clash {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 22px;
    padding: 32px 32px 36px 0;
    border-bottom: 0;
    font-size: 22px;
  }
  .clash + .clash { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* ---------- 4. How it works ---------- */
.steps {
  display: grid;
  gap: 0;
  counter-reset: none;
}
.step {
  padding: 28px 0 32px;
  border-top: 1px solid var(--line-strong);
}
.step__num {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.step__title {
  margin-top: 14px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.step p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .step { padding-bottom: 0; position: relative; }
  .step::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 28px; height: 1px;
    background: var(--accent);
  }
}

.strip { margin-top: 48px; }
@media (min-width: 768px) { .strip { margin-top: 72px; } }
.strip__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #2a2724;
  box-shadow: var(--shadow-media);
}
.strip__media video,
.render__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a2724;
}
.strip .caption { margin-top: 14px; }

/* ---------- 5. Case study ---------- */
.figures {
  display: grid;
  border-top: 1px solid var(--ink);
}
.figure {
  display: flex;
  flex-direction: column-reverse;   /* number first visually, label stays dt-first for semantics */
  justify-content: flex-end;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.figure__num {
  font-size: 64px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.figure__num--accent { color: var(--accent-ink); }
.figure__label {
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-2);
}
@media (min-width: 960px) {
  .figures { grid-template-columns: 0.75fr 1.45fr 1.2fr; border-bottom: 1px solid var(--line); }
  .figure { border-bottom: 0; padding: 32px 28px 36px 0; }
  .figure + .figure { padding-left: 28px; border-left: 1px solid var(--line); }
  .figure__num { font-size: clamp(56px, 2rem + 3.6vw, 88px); }
}

.cases {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}
.case-block__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.case-block p { color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) {
  .cases { grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 56px; }
}

.render { margin-top: 48px; }
@media (min-width: 768px) { .render { margin-top: 72px; } }
.render__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #2a2724;
  box-shadow: var(--shadow-media);
}
.render__caption {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
/* Architectural dimension line: |——— 1:1 ———| */
.dim {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--gray);
}
.dim__tick { width: 1px; height: 11px; background: currentColor; }
.dim__line { flex: 1; height: 1px; background: currentColor; opacity: 0.55; }
.dim__text {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.render__caption .caption { text-align: center; }

/* ---------- 6. Testimonials ---------- */
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
.avatar {
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px var(--stone), 0 0 0 2px var(--line-strong);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__text { margin-top: 32px; }
.quote__text p {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
@media (min-width: 768px) { .quote__text p { font-size: 28px; line-height: 1.4; } }
.quote__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 28px;
  font-size: 15px;
}
.quote__cite span { color: var(--gray); }

.films {
  display: grid;
  gap: 56px;
  max-width: 860px;
  margin: 72px auto 0;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}
.film { min-width: 0; }
.film .label { margin-bottom: 16px; }
.vcard {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-media);
}
.vcard__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}
.vcard__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-media);
  -webkit-tap-highlight-color: transparent;
}
.vcard__btn {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
}
.vcard__btn svg { margin-left: 3px; }
.vcard__play:hover .vcard__btn { transform: translateY(-2px) scale(1.04); background: #fff; box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55); }
.vcard__play:active .vcard__btn { transform: scale(0.97); transition-duration: 80ms; }
.vcard__play:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.vcard.is-playing .vcard__play { display: none; }
.film__caption { margin-top: 16px; max-width: 46ch; }
@media (min-width: 720px) {
  .films { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 1024px) { .films { gap: 56px; } }

.filter {
  max-width: 640px;
  margin: 72px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray);
}
.filter p + p { margin-top: 0.9em; }
.filter::before {
  content: "";
  display: block;
  width: 28px; height: 1px;
  margin: 0 auto 28px;
  background: var(--accent);
}

/* ---------- 7. Application component (inline x2 + pop-up) ---------- */
.apply { outline: none; }
.apply__grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .apply__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; }
}
/* #apply / #apply-2 are the panels themselves, so a jump lands on step 1 with a little air above it */
.js-app { scroll-margin-top: 80px; }
.panel {
  position: relative;
  padding: 18px 20px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 24px 48px -32px rgba(17, 17, 17, 0.25);
}
@media (min-width: 600px) { .panel { padding: 24px 36px 36px; } }
.panel[data-state="calendar"] { padding-inline: 12px; }
@media (min-width: 600px) { .panel[data-state="calendar"] { padding-inline: 24px; } }

/* Top row: Back + "Question 2 of 5", then a slim bar across the whole flow */
.app__top { margin-bottom: 20px; }
.app__row { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.app__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.app__back[hidden] { display: none; }
.app__back:hover { background: var(--stone); }
.app__back:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 0; }
.app__back[disabled] { opacity: 0.4; cursor: default; }
.app__count {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.app__back:not([hidden]) + .app__count { margin-left: auto; }
.panel:not([data-state="form"]) .app__row { display: none; }
.panel:not([data-state="form"]) .app__top { margin-bottom: 24px; }
.app__bar {
  height: 3px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.app__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0.1429);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}

.formstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.formstep__legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin-bottom: 18px;
}
.formstep__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
}
.formstep__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  outline: none;
}
@media (min-width: 600px) { .formstep__title { font-size: 24px; } }
.state--calendar .formstep__legend { padding-inline: 8px; }

/* Step 1: compact contact fields (first + last name share a row from 360px) */
.fields--2 { display: grid; gap: 0 12px; }
@media (min-width: 360px) { .fields--2 { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 14px; min-width: 0; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.field input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-size: 17px;          /* >=16px prevents iOS zoom */
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: #9a9a9a; }
.field input:hover { border-color: rgba(17, 17, 17, 0.4); }
.field input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(201, 180, 155, 0.35); }
.field input:focus-visible { outline: none; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15); }
.field__error {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--error);
}
.field__error:empty { display: none; }
.formstep > .btn--block { margin-top: 6px; }

/* Step 2: one question at a time, large tappable option cards (real radios) */
.q { border: 0; padding: 0; margin: 0; min-width: 0; }
.q[hidden] { display: none; }
.q__legend {
  padding: 0;
  margin-bottom: 16px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  outline: none;
}
@media (min-width: 600px) { .q__legend { font-size: 24px; } }
.q__opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt input {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.opt__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 13px 16px 13px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out, transform 120ms ease-out;
}
@media (min-width: 600px) { .opt__card { min-height: 60px; font-size: 17px; } }
.opt__text { min-width: 0; }
.opt__tick {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.opt__tick::after {                 /* check mark, drawn with borders */
  content: "";
  position: absolute;
  left: 8px; top: 4.5px;
  width: 5px; height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.opt:hover .opt__card { border-color: var(--ink-2); }
.opt:active .opt__card { transform: scale(0.99); }
.opt input:checked + .opt__card {
  border-color: var(--accent);
  background: #F6F1EA;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.opt input:checked + .opt__card .opt__tick { background: var(--accent); box-shadow: none; }
.opt input:checked + .opt__card .opt__tick::after { opacity: 1; transform: rotate(45deg) scale(1); }
.opt input:focus-visible + .opt__card { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.q[aria-invalid="true"] .opt__card { border-color: rgba(180, 35, 24, 0.55); }
.q .field__error { margin-top: 12px; }
.q__submit { margin-top: 22px; }

/* Entrances: opacity + transform only, 180ms */
.formstep.is-in, .q.is-in { animation: app-in 180ms var(--ease-out) both; }
.formstep.is-in-back, .q.is-in-back { animation: app-in-back 180ms var(--ease-out) both; }
@keyframes app-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes app-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.formstep__fine {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray);
}

/* ---------- Application pop-up (native <dialog>) ---------- */
html.is-modal-open, html.is-modal-open body { overflow: hidden; }
.modal {
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  max-height: min(880px, calc(100vh - 48px));
  max-height: min(880px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; animation: modal-in 200ms var(--ease-out); }
.modal::backdrop { background: rgba(17, 17, 17, 0.62); }
.modal[open]::backdrop { animation: modal-fade 200ms ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__close {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.modal__close:hover { background: var(--stone); }
.modal__close:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 0; border-radius: 50%; }
.modal .panel { border: 0; border-radius: 0; box-shadow: none; padding: 0 20px 24px; }
.modal .panel[data-state="calendar"] { padding-inline: 12px; }
/* The header row: Back, count and progress bar stay pinned while the content scrolls; the X sits at its right */
.modal .app__top {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -20px 18px;
  padding: 8px 20px 10px;
  background: var(--paper);
}
.modal .app__row { padding-right: 44px; }
.modal .panel[data-state="calendar"] .app__top { margin-inline: -12px; padding-inline: 12px; }
.modal .panel:not([data-state="form"]) .app__top { padding-top: 54px; margin-bottom: 18px; }  /* bar sits below the X */
.modal .panel__call { margin-top: 22px; padding-top: 18px; }
@media (min-width: 600px) {
  /* stable height, so the centred panel does not jump between questions */
  .modal { height: min(760px, calc(100vh - 48px)); height: min(760px, calc(100dvh - 48px)); }
  .modal .panel { padding: 0 36px 32px; }
  .modal .app__top { margin-inline: -36px; padding: 12px 36px; }
  .modal .app__row { padding-right: 40px; }
  .modal__close { top: 12px; right: 12px; }
}
/* Phones: the pop-up fills the screen */
@media (max-width: 599px) {
  .modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

/* States */
.state[hidden], .appform[hidden], .formstep[hidden] { display: none; }
.state--note p { color: var(--ink-2); }
.state__title, .booked__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  outline: none;
}
.state--note a, .booked__fine a { font-weight: 500; }

.calendar {
  min-height: 700px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background: var(--paper);
}
.calendar iframe {
  display: block;
  width: 100%;
  min-height: 700px;
  border: 0;
}

.state--booked { text-align: left; }
.booked__mark { color: var(--ink); margin-bottom: 20px; }
.booked__title { font-size: 34px; }
.booked__lede { color: var(--ink-2); max-width: 52ch; }
.vsl__frame--post { margin-top: 24px; }
.booked__fine { margin-top: 20px; font-size: 15px; color: var(--gray); }

/* Trust column */
.trust { min-width: 0; }
.checks { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.checks svg { color: var(--ink); margin-top: 2px; }
.checks p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.checks strong { color: var(--ink); }
@media (min-width: 960px) { .trust { position: sticky; top: 32px; } }

/* ---------- 8. FAQ ---------- */
.faq__grid { display: grid; gap: 64px; }
.faq__col { min-width: 0; }
.faq__head { margin-bottom: 28px; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .faq__head { margin-bottom: 36px; }
}
.faq .h2 { max-width: 14ch; font-size: clamp(30px, 1.6rem + 1.2vw, 40px); }

/* How we solve it: tabs swap the copy and the video */
.solve { min-width: 0; }
.solve__title { margin-bottom: 28px; }
@media (min-width: 960px) { .solve__title { margin-bottom: 36px; } }
.solve__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.solve__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--paper);
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out, transform 80ms ease-out;
}
.solve__n {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.solve__tab:hover { border-color: var(--ink); }
.solve__tab:active { transform: scale(0.98); }
.solve__tab:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.solve__tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--accent);
}
.solve__tab[aria-selected="true"] .solve__n { color: var(--accent); }
@media (min-width: 600px) and (max-width: 959px) { .solve__tabs { grid-template-columns: repeat(4, 1fr); } }
.solve__panel[hidden] { display: none; }
.solve__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #2a2724;
  box-shadow: var(--shadow-media);
}
@media (min-width: 600px) { .solve__media { aspect-ratio: 4 / 3; } }
.solve__media video { width: 100%; height: 100%; object-fit: cover; }
.solve__h {
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.solve__p {
  margin-top: 10px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
@media (min-width: 768px) { .solve__p { font-size: 17px; } }
.accordion { border-top: 1px solid var(--ink); }
.acc { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.acc__btn {
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 64px;
  padding: 22px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 160ms ease-out;
}
@media (min-width: 768px) { .acc__btn { font-size: 20px; padding: 26px 0; } }
.acc__btn:hover { color: var(--ink-2); }
.acc__btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.acc__icon {
  position: relative;
  width: 20px; height: 20px;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: var(--ink);
  transition: transform 260ms var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-out), visibility 0s linear 280ms;
  visibility: hidden;
}
.acc__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 280ms var(--ease-out), visibility 0s;
}
.acc__inner { overflow: hidden; min-height: 0; }
.acc__inner p {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}
@media (min-width: 768px) { .acc__inner p { font-size: 17px; } }
.acc__inner p:last-child { padding-bottom: 26px; }
.acc__inner p + p { margin-top: 0.9em; }

/* ---------- 10. Final CTA ---------- */
.final {
  background: var(--ink);
  color: #fff;
  padding: calc(var(--section-y) + 16px) 0;
}
.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.final__title {
  font-size: 38px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
}
@media (min-width: 768px) { .final__title { font-size: 64px; } }
.final__sub {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.55;
  color: #c9c9c9;
}
@media (min-width: 768px) { .final__sub { font-size: 20px; } }
.final .btn:focus-visible { outline-color: var(--accent); }

/* ---------- 11. Footer ---------- */
.footer {
  background: var(--paper);
  padding: 48px 0 56px;
  color: var(--gray);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer__top img { width: 96px; height: auto; }
.footer__copy { font-size: 13px; }
.footer__legal {
  margin-top: 24px;
  max-width: 920px;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- Scroll fade-up (once, 300ms) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn--sheen::after { animation: none; display: none; }
  .btn--call:hover { transform: none; }
  .btn, .vcard__btn, .opt__card, .opt__tick, .opt__tick::after, .app__fill, .app__back, .modal__close, .solve__tab, .acc__panel, .acc__icon::before, .acc__icon::after { transition: none !important; }
  .formstep.is-in, .formstep.is-in-back, .q.is-in, .q.is-in-back, .modal[open], .modal[open]::backdrop { animation: none; }
  .btn:hover, .btn--primary:hover, .btn--ghost:hover { transform: none; }
  .btn__spinner { animation-duration: 1.6s; }
}

/* ---------- Refinements ---------- */
.apply__title { max-width: 24ch; }