/* HeyWin — one-page site styles (mobile-first) */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory-80);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-style: normal;
  color: var(--ivory);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
strong { color: var(--ivory); font-weight: 600; }

::selection { background: var(--gold); color: var(--navy); }

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

section[id] { scroll-margin-top: 5rem; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 640px)  { .container { padding-inline: var(--s-5); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s-6); } }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--gold); color: var(--navy); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.gold { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.25rem;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn--gold { background: var(--gold); color: var(--navy); box-shadow: 0 12px 32px -14px var(--gold-line); }
.btn--gold:hover { background: var(--gold-hover); }

.btn--line { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--gold-line); color: var(--gold); }

.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--fs-xs); }
.btn--lg { min-height: 3.5rem; padding: 0 var(--s-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.text-link {
  color: var(--gold); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--gold-line);
  text-underline-offset: 0.3em;
}
.text-link:hover { text-decoration-color: var(--gold); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(11 15 25 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 4.25rem;
}
.header__logo img { height: 2.75rem; width: auto; }
.header__nav { display: none; }
.header__nav ul { display: flex; gap: var(--s-1); }
.header__nav a {
  display: block; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  color: var(--ivory-60);
}
.header__nav a:hover { color: var(--ivory); }
@media (min-width: 900px) { .header__nav { display: block; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--s-7) var(--s-8); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 50% at 78% 35%, var(--gold-soft), transparent 70%);
}
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) {
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-8); }
}

/* Same look as the gold uppercase labels (.service__tag, .case__type) */
.hero__eyebrow {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero__sub { margin-top: var(--s-5); font-size: var(--fs-lg); max-width: 34rem; }
.hero__ctas { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 560px) { .hero__ctas { flex-direction: row; } }

.trust {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm); color: var(--ivory-60);
}
.trust li { display: flex; align-items: center; gap: var(--s-2); }
.trust li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none;
}

.portrait {
  position: relative;
  max-width: 26rem; margin-inline: auto; width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--gold-line), 0 40px 80px -40px var(--shadow);
}
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 8%;
}
/* Softens the busy background of the photo into the navy palette */
.portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgb(11 15 25 / 0.85) 100%),
    radial-gradient(75% 60% at 50% 32%, transparent 45%, rgb(11 15 25 / 0.55) 100%);
}
.portrait figcaption {
  position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-4); z-index: 1;
  display: grid;
}
.portrait__name { font-family: var(--font-head); font-weight: 700; color: var(--ivory); font-size: var(--fs-h4); }
.portrait__role { font-size: var(--fs-sm); color: var(--gold); }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-9); }
.section--card { background: var(--card); border-block: 1px solid var(--line); }
@media (min-width: 1024px) { .section { padding-block: var(--s-10); } }

.section__head { max-width: 42rem; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.section__head p { margin-top: var(--s-4); font-size: var(--fs-lg); }

.eyebrow-rule {
  display: block; width: 2.5rem; height: 2px; background: var(--gold);
  margin-bottom: var(--s-5);
}
.section__head--center .eyebrow-rule { margin-inline: auto; }

/* ---------- Pain points ---------- */
.pains { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.pain {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--ivory);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.pain__x {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ivory-60);
  font-size: 0.8rem; margin-top: 0.1rem;
}
.bridge {
  margin-top: var(--s-7); max-width: 44rem; margin-inline: auto; text-align: center;
  font-size: var(--fs-lg);
}
.bridge strong { color: var(--gold); }

/* ---------- Services ---------- */
.services { display: grid; gap: var(--s-4); }
@media (min-width: 960px) {
  .services { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .service--lead { grid-row: span 2; }
}
.service {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
}
.service--lead { border-color: var(--gold-line); }
.service__tag {
  display: inline-block; margin-bottom: var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
}
.service h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.service__line { margin-top: var(--s-2); color: var(--ivory); font-size: var(--fs-lg); }
.service p + p { margin-top: var(--s-3); }
.service__body { margin-top: var(--s-3); }
.service__more { display: inline-block; margin-top: var(--s-5); white-space: normal; }

.checks { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.checks li { position: relative; padding-left: var(--s-6); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.checks li::after {
  content: ""; position: absolute; left: 0.38rem; top: 0.55em;
  width: 0.32rem; height: 0.55rem;
  border: solid var(--gold); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.platforms { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.platforms li {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: var(--fs-xs); color: var(--ivory-80); white-space: nowrap;
}

/* ---------- Pricing ---------- */
.plans { display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid var(--line);
}
.plan--featured {
  border-color: var(--gold);
  box-shadow: 0 30px 60px -30px var(--gold-line);
}
.plan__badge {
  position: absolute; top: calc(var(--s-3) * -1); left: var(--s-6);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--gold); color: var(--navy);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.plan h3 { font-size: var(--fs-h4); font-weight: 700; }
.plan__for { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--ivory-60); }
.plan__price {
  margin-top: var(--s-5);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-2);
}
.plan__amount {
  font-family: var(--font-head); font-weight: 800; color: var(--ivory);
  font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em;
}
.plan__per { font-size: var(--fs-sm); color: var(--ivory-60); }
.plan .checks { flex: 1; }
.plan .btn { margin-top: var(--s-6); }

.plan--wide { margin-top: var(--s-4); }
/* Gold uppercase label between plan groups (same look as .service__tag) */
.plans__label {
  margin: var(--s-7) 0 var(--s-4); text-align: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 820px) {
  .plan--wide {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6);
    align-items: start;
  }
  .plan--wide .btn { justify-self: start; }
}
.plan__from { font-size: var(--fs-sm); color: var(--ivory-60); }

.addon {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--gold-soft);
  border: 1px dashed var(--gold-line);
}
@media (min-width: 820px) { .addon { margin-top: 0; } }
.plans + .addon { margin-top: var(--s-4); }  /* add-on box shown on its own under a plan grid */
.addon__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.addon__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.addon h4 { font-size: var(--fs-h4); font-weight: 700; margin-top: var(--s-1); }
.addon__price { font-family: var(--font-head); font-weight: 700; color: var(--ivory); font-size: var(--fs-h4); white-space: nowrap; }
.addon__price span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--ivory-60); }
.addon p { margin-top: var(--s-2); font-size: var(--fs-sm); }

.terms {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--ivory-60); text-align: center;
}

.nudge { margin-top: var(--s-6); text-align: center; color: var(--ivory); }

/* ---------- Process ---------- */
.steps { display: grid; gap: var(--s-4); counter-reset: step; }
@media (min-width: 720px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-top: 2px solid var(--line-2);
}
.step:first-child { border-top-color: var(--gold); }
.step__num {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: 1; color: var(--gold);
}
.step h3 { margin-top: var(--s-4); font-size: var(--fs-h4); font-weight: 700; }
.step p { margin-top: var(--s-2); font-size: var(--fs-sm); }

/* ---------- Results ---------- */
.cases { display: grid; gap: var(--s-4); }
@media (min-width: 960px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid var(--line);
}
.case__type { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.case h3 { margin-top: var(--s-2); font-size: var(--fs-h3); font-weight: 700; }
.case dl { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.case dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--ivory-60); text-transform: uppercase; }
.case dd { margin: var(--s-1) 0 0; font-size: var(--fs-sm); }
.case dd.case__result { color: var(--ivory); font-size: var(--fs-base); font-weight: 500; }
.case__shot {
  margin-top: var(--s-5);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.review-video {
  margin-top: var(--s-8);
  display: grid; gap: var(--s-6); align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid var(--gold-line);
}
@media (min-width: 760px) {
  .review-video { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); padding: var(--s-6); }
}
.section__head + .review-video { margin-top: 0; }
.review-video__frame {
  width: 100%; max-width: 20rem; margin-inline: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -30px var(--shadow);
}
.review-video__frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--card); }
.review-video__text h3 { margin-top: var(--s-2); font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.review-video__text p { margin-top: var(--s-4); font-size: var(--fs-lg); max-width: 30rem; }
.review-video__who { display: grid; margin-top: var(--s-5) !important; padding-top: var(--s-4); border-top: 1px solid var(--line); }

.quotes { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
@media (min-width: 960px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  background: var(--navy);
}
.quote blockquote p { color: var(--ivory); font-size: var(--fs-base); line-height: 1.7; }
.quote__mark { font-family: var(--font-head); font-weight: 800; font-size: 2.5rem; line-height: 0.6; color: var(--gold); display: block; margin-bottom: var(--s-3); }
.quote figcaption { display: grid; }
.quote__name { font-family: var(--font-head); font-weight: 700; color: var(--ivory); font-size: var(--fs-sm); }
.quote__role { font-size: var(--fs-xs); color: var(--ivory-60); }

.disclaimer { margin-top: var(--s-6); text-align: center; font-size: var(--fs-xs); color: var(--ivory-60); }

/* ---------- About ---------- */
.about { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.about__photo {
  max-width: 22rem; width: 100%; margin-inline: auto;
  border-radius: 50% 50% var(--r-lg) var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--gold-line);
  position: relative;
}
.about__photo img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; object-position: 50% 4%; }
.about__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 30%, transparent 40%, rgb(11 15 25 / 0.6) 100%);
}
.about h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.about__body { margin-top: var(--s-5); display: grid; gap: var(--s-4); font-size: var(--fs-lg); }
.about__facts { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.about__facts li {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ivory); white-space: nowrap;
}
.about .text-link { display: inline-block; margin-top: var(--s-6); }

/* ---------- Contact / lead form ---------- */
.contact { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); } }
.contact h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.contact__lead { margin-top: var(--s-4); font-size: var(--fs-lg); max-width: 30rem; }
.contact__points { flex-direction: column; }
.contact__alt { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--ivory-60); }

.lead-card {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid var(--gold-line);
  box-shadow: 0 30px 60px -30px var(--shadow);
}
@media (min-width: 640px) { .lead-card { padding: var(--s-6); } }

.lead-form { display: grid; gap: var(--s-5); }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.field { display: grid; gap: var(--s-2); }
.field label, .choice legend { font-size: var(--fs-sm); font-weight: 600; color: var(--ivory); }
.field__optional { font-weight: 400; color: var(--ivory-60); }
.field input {
  width: 100%; min-height: 3rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ivory);
  font: inherit; font-size: var(--fs-base);
  transition: border-color var(--fast) var(--ease);
}
.field input:hover { border-color: var(--gold-line); }
.field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: var(--s-3); }
.choice__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: var(--fs-sm); color: var(--ivory-80);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover span { border-color: var(--gold-line); color: var(--ivory); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.lead-form .btn[disabled] { opacity: 0.7; cursor: progress; }
.lead-form__status:empty { display: none; }
.lead-form__status { margin-top: calc(var(--s-3) * -1); font-size: var(--fs-sm); color: var(--ivory); text-align: center; }
.lead-form__status.is-success {
  margin-top: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  font-weight: 600;
}
.lead-form__note { margin-top: calc(var(--s-3) * -1); font-size: var(--fs-xs); color: var(--ivory-60); text-align: center; }
.lead-form__note a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; }
.lead-form__note a:hover { color: var(--ivory); }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); color: var(--ivory);
  border-radius: var(--r-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq__icon {
  flex: none; position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line-2);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.6rem; height: 2px; background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform var(--fast) var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 var(--s-7) var(--s-5) 0; }
.faq__a p + p { margin-top: var(--s-3); }

/* ---------- Final CTA ---------- */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--gold-line);
  text-align: center;
}
@media (min-width: 720px) { .final { padding: var(--s-9) var(--s-7); } }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0%, var(--gold-soft), transparent 70%);
}
.final h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; max-width: 36rem; margin-inline: auto; }
.final p { margin-top: var(--s-4); max-width: 34rem; margin-inline: auto; font-size: var(--fs-lg); }
.final .btn { margin-top: var(--s-6); }
.final__alt { font-size: var(--fs-sm) !important; color: var(--ivory-60); }
.final__alt a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; overflow-wrap: anywhere; }
.final__alt a:hover { text-decoration-color: var(--gold); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-8) calc(var(--s-7) + 4.5rem); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .footer { padding-bottom: var(--s-7); } }
.footer__top { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.footer__logo img { height: 3.25rem; width: auto; }
.footer__tag { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ivory-60); max-width: 22rem; }
.footer__links { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.footer__links a { color: var(--ivory-80); }
.footer__links a:hover { color: var(--gold); }
.footer__contact { display: grid; gap: var(--s-3); }
.footer__email { color: var(--ivory); font-weight: 500; overflow-wrap: anywhere; }
.footer__email:hover { color: var(--gold); }
.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.socials a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ivory-80);
}
.socials a:hover { color: var(--gold); border-color: var(--gold-line); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5);
  font-size: var(--fs-xs); color: var(--ivory-60);
}
.footer__bottom a { white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; }
.footer__bottom a:hover { color: var(--ivory); }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgb(11 15 25 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 250ms var(--ease);
}
.mobile-cta.is-visible { transform: none; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* ---------- Fade-in (JS-gated, so content always shows without JS) ---------- */
.js [data-fade] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js [data-fade].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .js [data-fade] { opacity: 1; transform: none; }
}

/* ---------- Legal page ---------- */
.legal { max-width: 46rem; margin-inline: auto; padding-block: var(--s-8) var(--s-9); }
.legal h1 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; }
.legal h2 { margin-top: var(--s-7); font-size: var(--fs-h4); font-weight: 700; }
.legal p, .legal ul { margin-top: var(--s-3); }
.legal ul { list-style: disc; padding-left: var(--s-5); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; }
.legal__meta { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ivory-60); }