/* ==========================================================================
   Soar Home Service — landing page
   Design tokens first, then layout. Mobile-first; breakpoints at 640/900/1200.
   ========================================================================== */

/* Plus Jakarta Sans (variable, 400–800) — self-hosted so there's no
   third-party request on first paint. SIL Open Font License, see
   assets/fonts/OFL.txt. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.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: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces — warm near-black, not pure black */
  --bg:            #0F0E0D;
  --bg-raised:     #141211;
  --surface:       #1A1817;
  --surface-hover: #201D1C;

  /* Accent */
  --accent:        #E8764A;
  --accent-hover:  #F08A5F;
  --accent-dim:    rgba(232, 118, 74, .14);

  /* Type */
  --text:          #FFFFFF;
  --text-mid:      #7E7B79;   /* headline third-tone + body */
  --text-muted:    #8B8886;
  --text-dim:      #6B6866;   /* field labels, legal */

  /* Lines */
  --hairline:      rgba(255, 255, 255, .08);
  --hairline-soft: rgba(255, 255, 255, .05);

  /* Metrics */
  --container:     1200px;
  --gutter:        20px;
  --radius:        12px;
  --radius-lg:     16px;
  --header-h:      64px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 640px) { :root { --gutter: 32px; --header-h: 76px; } }
@media (min-width: 1200px){ :root { --gutter: 48px; } }

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------ shared elements -- */

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.eyebrow--dash {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
}
.eyebrow--dash::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--accent);
  flex: none;
}

.section-label { margin-bottom: 8px; }

/* Buttons ------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--accent);
  color: #fff;
}
.btn--primary:hover { --btn-bg: var(--accent-hover); }

.btn--ghost {
  color: var(--text-muted);
  border-color: var(--hairline);
  justify-content: flex-start;
}
.btn--ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.03); }

.btn--lg { padding: 20px 24px; font-size: 1.05rem; }
.btn--pill { border-radius: 999px; padding: 11px 24px; justify-content: center; }
.btn--block { width: 100%; }

.btn__arrow { width: 22px; height: 22px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Loading state (form submit) */
.btn__spinner { display: none; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__arrow { display: none; }
.btn.is-loading .btn__spinner {
  display: block;
  width: 20px; height: 20px; flex: none;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================ header == */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 14, 13, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--hairline); }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .28em;                  /* flex collapses the literal space in the markup */
  min-height: 44px;            /* keeps the tap target at the 44px minimum */
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.wordmark span { color: var(--accent); }
.wordmark--sm { font-size: 1rem; }

@media (min-width: 640px) { .wordmark { font-size: 1.3rem; } }

.header__cta { font-size: .9rem; }

/* ================================================================== hero == */

.hero {
  position: relative;
  padding-top: clamp(48px, 9vw, 110px);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: -260px; right: -180px;
  width: min(760px, 120vw);
  height: min(760px, 120vw);
  background: radial-gradient(circle, rgba(232,118,74,.20) 0%, rgba(232,118,74,.07) 38%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner { position: relative; z-index: 1; padding-bottom: clamp(44px, 7vw, 84px); }

.hero__title {
  margin-top: 28px;
  font-size: clamp(2.9rem, 12.8vw, 6.5rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
}
.hero__title span { display: block; }
/* "More" and "jobs." sit on their own lines on phones, as in the reference,
   then join into one line once there's room for them. */
@media (min-width: 900px) { .hero__title .w { display: inline; } }
.hero__title .l1 { color: var(--text); }
.hero__title .l2 { color: var(--accent); }
.hero__title .l3 { color: var(--text-mid); }

@media (min-width: 900px) {
  .hero__title { font-size: clamp(4rem, 6.4vw, 6.75rem); }
}

.hero__sub {
  margin-top: 28px;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-muted);
}

.hero__actions {
  margin-top: 40px;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .hero__actions { grid-auto-flow: column; justify-content: start; gap: 14px; }
  .btn--lg { min-width: 220px; }
}

/* ============================================================= statement == */

/* Extra room at the foot so the services border sits clear of the text
   rather than tucking under the last line. */
.statement { padding-block: clamp(24px, 6.5vw, 92px) clamp(28px, 7vw, 100px); }

.statement__text {
  /* 23px floor on phones. The vw term takes over around 490px, so the
     desktop end of the scale is untouched. */
  font-size: clamp(1.44rem, 4.7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.028em;
  max-width: 20ch;
  color: var(--text);
  /* Even out the line lengths instead of filling each line to the edge.
     Ignored by browsers that lack it, which just wrap as before. */
  text-wrap: balance;
}
/* Both halves carry a class rather than relying on a bare `span`, which
   would out-specify a single class and drag the highlight grey. */
.statement__soft { color: var(--text-mid); }
/* nowrap so the figure never splits across lines at its en-dash, which it
   does at phone width. */
.statement__hl   { color: var(--accent); white-space: nowrap; }

@media (min-width: 900px) { .statement__text { max-width: 26ch; } }

/* ============================================================== services == */

.services {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px);
}

.services__list { margin-top: 28px; }

.service {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 0;
  padding-block: 28px;
  border-top: 1px solid var(--hairline-soft);
  transition: background-color .25s var(--ease);
}
.services__list .service:first-child { border-top: 0; }

.service__num {
  grid-row: 1 / span 2;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
  padding-top: .3em;
}

.service__title {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.service__desc {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 52ch;
}

@media (min-width: 900px) {
  .service {
    grid-template-columns: 80px minmax(0, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 0 32px;
    padding-block: 34px;
  }
  .service__num  { grid-row: 1; padding-top: .45em; }
  .service__desc { margin-top: 0; padding-top: .35em; }
  .service:hover { background: rgba(255,255,255,.018); }
}

/* ================================================================= stats == */

.stats { padding-block: clamp(40px, 6vw, 72px); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 32px);
}

.stat__value {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.45;
}

/* ========================================================== testimonials == */

.testimonials { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 9vw, 110px); }

/* Video testimonials ---------------------------------------------------- */
/* A card per story in a two-up grid. Nothing is fetched until a card is
   played — three clips at ~33MB each would otherwise dwarf the whole site. */

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

.tgrid__head { text-align: center; max-width: 42ch; margin-inline: auto; }

.tgrid__eyebrow { color: var(--accent); margin-bottom: 12px; }

.tgrid__title {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--accent);
}

.tgrid {
  --tgap: clamp(18px, 2.6vw, 26px);
  margin-top: clamp(32px, 5vw, 52px);
  display: grid;
  gap: var(--tgap);
}
@media (min-width: 820px) {
  .tgrid { grid-template-columns: 1fr 1fr; }

  /* With an odd count the last card would hang alone in the left column.
     Span it across both and centre it at exactly one column's width, so an
     even count (2, 4, 6...) still fills the rows normally. */
  .tgrid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--tgap)) / 2);
  }
}

.tcard {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tcard:hover { border-color: rgba(232,118,74,.35); transform: translateY(-2px); }

.tcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.tcard__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.tcard__media.is-playing .tcard__video { object-fit: contain; }

/* Play overlay. Translucent, so the frame underneath still reads. */
.tcard__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(10,9,9,.18) 0%, rgba(10,9,9,.46) 68%, rgba(10,9,9,.72) 100%);
  transition: background .28s var(--ease), opacity .28s var(--ease);
}
.tcard:hover .tcard__play { background: linear-gradient(180deg, rgba(10,9,9,.10) 0%, rgba(10,9,9,.38) 68%, rgba(10,9,9,.68) 100%); }
.tcard__media.is-playing .tcard__play { opacity: 0; pointer-events: none; }

.tcard__badge {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.tcard__badge svg { width: 25px; height: 25px; margin-left: 2px; }
.tcard:hover .tcard__badge,
.tcard__play:focus-visible .tcard__badge { transform: scale(1.08); background: var(--accent-hover); }

/* Name sits on the frame, as in the reference. */
.tcard__who {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.tcard__name { font-size: .95rem; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.tcard__role { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.tcard__media.is-playing .tcard__who { display: none; }

.tcard__time {
  position: absolute;
  right: 14px; top: 14px;
  z-index: 2;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(10,9,9,.72);
  border-radius: 999px;
  padding: 4px 9px;
  pointer-events: none;
}
.tcard__media.is-playing .tcard__time { display: none; }

.tcard__body { padding: clamp(18px, 2.4vw, 24px); }

.tcard__headline {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.32;
  color: var(--text);
}
.tcard__hl { color: var(--accent); }

/* Optional pull-quote, once real quotes exist. */
.tcard__quote {
  margin: 12px 0 0;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted);
}

.tcard__error {
  margin: 0;
  padding: 12px 16px;
  background: rgba(229,72,77,.16);
  border-top: 1px solid rgba(229,72,77,.4);
  color: #FF9A9D;
  font-size: .86rem;
  text-align: center;
}
.tcard__error a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.tgrid__noscript { margin-top: 24px; text-align: center; color: var(--text-muted); }
.tgrid__noscript a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .tcard:hover { transform: none; }
  .tcard:hover .tcard__badge { transform: none; }
}

@media (max-width: 420px) {
  .tcard__badge { width: 50px; height: 50px; }
  .tcard__badge svg { width: 21px; height: 21px; }
}

/* =============================================================== contact == */

.contact {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(56px, 9vw, 110px);
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(232,118,74,.07), transparent 70%),
    var(--bg);
}

.contact__title {
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 14ch;
}

.contact__sub {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  max-width: 44ch;
}

@media (min-width: 900px) {
  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    /* The consent note gets its own cell under the form rather than being
       auto-placed. Chrome clamps a sticky grid item to the grid CONTAINER,
       not to its grid area, so a copy block that only spanned row 1 would
       slide on down into row 2 and collide with whatever was auto-placed
       there. Spanning copy across both rows makes its area and the container
       the same box, which is the bound sticky actually respects. */
    grid-template-areas:
      "copy form"
      "copy note";
    column-gap: clamp(40px, 6vw, 90px);
    align-items: start;
  }
  .contact__copy { grid-area: copy; }
  .tally-mount   { grid-area: form; }
  .consent-note  { grid-area: note; }
}

/* Pin the heading beside the form, but only where there's genuinely room:
   a sticky element taller than the viewport just clips its own bottom. */
@media (min-width: 900px) and (min-height: 700px) {
  .contact__copy { position: sticky; top: calc(var(--header-h) + 48px); }
}

/* Booking / Cal.com ----------------------------------------------------- */

.booking { margin-top: clamp(56px, 8vw, 96px); }

.booking__divider {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: clamp(32px, 5vw, 48px);
}
.booking__divider::before,
.booking__divider::after {
  content: "";
  height: 1px;
  background: var(--hairline);
  flex: 1;
}

.booking__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.booking__sub { margin-top: 12px; color: var(--text-muted); max-width: 46ch; }

.booking__embed {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;          /* clips the iframe to the rounded corners */
  min-height: 640px;
}
@media (min-width: 900px) { .booking__embed { min-height: 700px; } }

/* Cal.com injects an iframe and sets its height as the month view resizes.
   flex:none stops the flex container shrinking it; min-height above only
   reserves space so there's no layout shift while it loads. */
.booking__embed iframe { width: 100% !important; border: 0; flex: none; }
.booking__embed.is-placeholder { min-height: 0; }

.booking__fallback {
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  max-width: 46ch;
  margin-inline: auto;
}
.booking__fallback p { margin: 0; line-height: 1.6; }
.booking__fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.booking__fallback strong { color: var(--text); font-size: 1.1rem; }
.booking__fallback code {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .88rem;
  color: var(--accent);
}

/* ================================================================ footer == */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 40px 48px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.site-footer__nav { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 0; margin-block: -10px; }
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;        /* short labels like "Terms" fell under the minimum */
  font-size: .9rem;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.site-footer__nav a:hover { color: var(--accent); }

.site-footer__legal { font-size: .82rem; color: var(--text-dim); }

@media (min-width: 900px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .site-footer__nav { order: 3; }
  .site-footer__legal { order: 2; }
}

/* ============================================================ animations == */

/* Gated on .js so the page is fully readable if the script never runs. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ========================================================= funnel steps == */

.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.step__num {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-size: .72rem;
  letter-spacing: 0;
}

.step--done { color: var(--text-muted); }
.step--done .step__num {
  background: rgba(232,118,74,.16);
  border-color: rgba(232,118,74,.45);
  color: var(--accent);
}

.step--current { color: var(--accent); }
.step--current .step__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Modifier must follow .steps: same specificity, so source order decides. */
.steps--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
}

.steps__sep { color: var(--hairline); flex: none; }
.steps__sep svg { width: 14px; height: 14px; display: block; color: #4A4645; }

@media (max-width: 560px) {
  .step { font-size: .68rem; letter-spacing: .06em; }
  .steps { gap: 8px 10px; }
}

/* ============================================================ funnel page == */

.funnel { padding-block: clamp(40px, 7vw, 80px) clamp(56px, 9vw, 110px); }

.funnel__head { max-width: 46ch; }

.funnel__title {
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.funnel__sub {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
}

/* Tally embed ----------------------------------------------------------- */

.tally-mount {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
  min-height: 520px;
}
.tally-mount iframe { display: block; width: 100%; border: 0; }

.tally-fallback {
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  color: var(--text-muted);
  line-height: 1.6;
}
.tally-fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Prep videos ------------------------------------------------------------ */

.prep {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}
@media (min-width: 900px) { .prep { grid-template-columns: 1fr 1fr; } }

.prep__item { margin: 0; }

.prep__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.prep__n {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}
.prep__name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Next-steps list -------------------------------------------------------- */

.next { margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--hairline); padding-top: clamp(28px, 4vw, 40px); }
.next__list { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 760px) { .next__list { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.next__item { display: grid; grid-template-columns: 26px 1fr; gap: 0 14px; }
.next__n { color: var(--accent); font-weight: 700; font-size: .85rem; padding-top: .15em; }
.next__t { font-weight: 800; letter-spacing: -.015em; }
.next__d { grid-column: 2; margin-top: 6px; color: var(--text-muted); font-size: .95rem; line-height: 1.55; }

/* FAQ -------------------------------------------------------------------- */
/* Two columns from 760px up, same breakpoint as the next-steps list so the
   bottom half of the page changes shape in one step rather than two. */

.faq {
  margin-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(28px, 4vw, 40px);
}
/* One column on purpose: in two columns, opening a row leaves its partner
   sitting in whitespace. Collapsed rows are short enough that a single
   column still reads as a tidy block. */
.faq__eyebrow { text-align: center; }

/* Narrower than the container and centred. Full width left the short
   questions stranded a long way from their chevrons. The question text
   itself stays left-aligned: centring it would pull it away from the
   chevron that belongs to it. */
.faq__list {
  margin: 20px auto 0;
  max-width: 760px;
  border-top: 1px solid var(--hairline-soft);
}
.faq__item { border-bottom: 1px solid var(--hairline-soft); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 15px 0;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: 1.02rem;
  /* Both are needed: the standard property and the WebKit pseudo-element,
     or the browser's own triangle sits next to our chevron. */
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq__item[open] > .faq__q { color: var(--accent); }

.faq__chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  transition: transform .2s ease, color .2s ease;
}
.faq__item[open] > .faq__q .faq__chev { transform: rotate(180deg); color: var(--accent); }

.faq__a {
  margin: 0 0 18px;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.6;
}
.faq__a a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.faq__a a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .faq__chev { transition: none; }
}

/* ============================================================ legal pages == */

.legal { padding-block: clamp(40px, 7vw, 72px) clamp(56px, 9vw, 96px); }

.legal__head { max-width: 62ch; }

.legal__title {
  font-size: clamp(2.1rem, 5.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.legal__updated {
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.legal__lede {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.65;
}

/* Prose. A measure this long needs looser leading to stay readable. */
.legal__body {
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 72ch;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.legal__body h2 {
  margin: clamp(36px, 4vw, 48px) 0 14px;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
}
.legal__body h2:first-child { margin-top: 0; }

.legal__body h3 {
  margin: 28px 0 10px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}

.legal__body p { margin: 0 0 16px; }
.legal__body p:last-child { margin-bottom: 0; }

.legal__body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal__body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}
.legal__body li::before {
  content: "";
  position: absolute;
  left: 4px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__body strong { color: var(--text); font-weight: 700; }

/* A clause carriers and reviewers look for specifically — give it weight. */
.legal__key {
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid rgba(232,118,74,.3);
  border-radius: var(--radius);
  background: rgba(232,118,74,.06);
  color: var(--text);
}
.legal__key p:last-child { margin-bottom: 0; }

/* Unfilled details — deliberately loud so they can't ship unnoticed. */
.todo {
  background: rgba(232,118,74,.22);
  color: #FFD9C7;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: .95em;
}

.legal__toc {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.legal__toc a {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 13px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal__toc a:hover { color: var(--accent); border-color: rgba(232,118,74,.45); }

/* ======================================================= footer disclaimer == */

.disclaimer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(28px, 4vw, 40px);
}

.disclaimer__inner { max-width: 86ch; margin-inline: auto; text-align: center; }

.disclaimer__text {
  margin: 0;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.disclaimer__text + .disclaimer__text { margin-top: 12px; }
.disclaimer__text strong { color: var(--text-muted); font-weight: 700; }

.site-footer__nav a.is-legal { color: var(--text-dim); }

.consent-note {
  margin-top: 16px;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 58ch;
}
.consent-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.consent-note a:hover { color: var(--accent); }

.disclaimer__text a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer__text a:hover { color: var(--accent); }