/* Components: hero, path steps, cards, tabs, chart, prompts, FAQ, sign-up, consent, inner pages */

@keyframes s-fade { from { opacity: 0; } to { opacity: 1; } }

/* Hero */
.s-hero { background: var(--tone-sand); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.s-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.s-hero__media { position: relative; max-width: 560px; margin: 0 auto; width: 100%; }
.s-hero__blob { position: absolute; inset: 6% -4% -5% 5%; background: var(--tone-sand-deep); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
.s-hero__img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: url(#s-blob-clip); }
.s-hero__lead { font-size: 1.15rem; color: var(--tone-ink-soft); max-width: 34rem; }
.s-hero__call { margin: 1.4rem 0 0; font-size: 1.08rem; }
.s-hero__call a { font-weight: 700; white-space: nowrap; }
.s-hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.s-hero__facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.s-hero__facts .s-icon { color: var(--tone-teal); }
@media (min-width: 56em) {
  .s-hero__grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
}

/* Intro under hero */
.s-intro { padding: 3.5rem 0 1rem; }
.s-intro__text { font-size: 1.12rem; max-width: 46rem; }

/* Guided path with vertical timeline */
.s-path { position: relative; padding: 1rem 0 2rem; }
.s-path__step { position: relative; padding: 2.5rem 0 3rem; scroll-margin-top: 1rem; }
.s-path__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.s-path__num {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  font: 600 1.6rem/1 var(--tone-font-head); color: var(--tone-white); background: var(--tone-teal);
  box-shadow: 0 0 0 6px var(--tone-white), 0 0 0 8px var(--tone-teal-soft);
}
.s-path__title { margin: 0; }
.s-path__lead { font-size: 1.1rem; max-width: 46rem; color: var(--tone-ink-soft); }
@media (min-width: 64em) {
  .s-path { padding-left: 6.5rem; }
  .s-path::before {
    content: ""; position: absolute; left: 2.95rem; top: 3.5rem; bottom: 4rem; width: 4px;
    background: repeating-linear-gradient(to bottom, var(--tone-teal) 0 14px, transparent 14px 24px);
    border-radius: 2px; opacity: 0.45;
  }
  .s-path__num { position: absolute; left: -6.5rem; top: 2.2rem; width: 4.5rem; height: 4.5rem; margin-left: 0.7rem; font-size: 1.9rem; }
  .s-path__head { min-height: 4.5rem; }
}

/* Step 1: three legs */
.s-legs { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.s-legs__card {
  display: flex; flex-direction: column; padding: 2rem 1.6rem 1.6rem; min-height: 100%;
  background: var(--tone-white); border: 1px solid var(--tone-line); border-top: 6px solid var(--tone-teal);
  border-radius: var(--tone-radius); box-shadow: var(--tone-shadow);
}
.s-legs__card--two { border-top-color: var(--tone-coral); }
.s-legs__card--three { border-top-color: #6b8f71; }
.s-legs__icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--tone-teal-soft); color: var(--tone-teal); }
.s-legs__card--two .s-legs__icon { background: var(--tone-coral-soft); color: var(--tone-coral-text); }
.s-legs__card--three .s-legs__icon { background: #e7efe6; color: #3f6447; }
.s-legs__text { color: var(--tone-ink-soft); }
@media (min-width: 52em) { .s-legs { grid-template-columns: repeat(3, 1fr); } }

.s-ticks { margin: auto 0 0; padding: 0; list-style: none; }
.s-ticks__item { position: relative; padding: 0 0 0 2.1rem; margin-bottom: 0.65rem; }
.s-ticks__item::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.45rem; width: 0.95rem; height: 0.5rem;
  border-left: 3px solid var(--tone-teal); border-bottom: 3px solid var(--tone-teal); transform: rotate(-45deg);
}

/* Step 2: tabs */
.s-tabs__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.s-tabs__btn {
  min-height: 4rem; padding: 0.6rem 1rem;
  font: 700 1.08rem/1.3 var(--tone-font-body); color: var(--tone-teal);
  background: var(--tone-white); border: 2px solid var(--tone-teal); border-radius: var(--tone-radius); cursor: pointer;
}
.s-tabs__btn:hover { background: var(--tone-teal-soft); color: var(--tone-teal-deep); text-decoration: underline; }
.s-tabs__btn--active, .s-tabs__btn[aria-selected="true"] { background: var(--tone-teal); color: var(--tone-white); box-shadow: var(--tone-shadow); }
.s-tabs__btn--active:hover, .s-tabs__btn[aria-selected="true"]:hover { background: var(--tone-teal-deep); color: var(--tone-white); }
.s-tabs__panel { padding: 2rem 1.6rem; background: var(--tone-sand); border-radius: var(--tone-radius); animation: s-fade 0.35s ease-out; }
.s-tabs__panel[hidden] { display: none; }
.s-tabs__panel h3 { font-size: 1.35rem; }
@media (min-width: 48em) { .s-tabs__list { grid-template-columns: repeat(4, 1fr); } .s-tabs__panel { padding: 2.25rem 2.5rem; } }

/* Step 3: inflation */
.s-inflation { display: grid; gap: 2rem; align-items: start; }
.s-inflation__chart { margin: 0; padding: 1.25rem; background: var(--tone-white); border: 1px solid var(--tone-line); border-radius: var(--tone-radius); box-shadow: var(--tone-shadow); }
.s-inflation__chart figcaption { font-size: 0.9rem; color: var(--tone-ink-soft); margin-top: 0.6rem; }
.s-chart { display: block; width: 100%; height: auto; font-family: var(--tone-font-body); }
.s-chart__grid { stroke: #e5ddcf; stroke-width: 1; }
.s-chart__axis { fill: var(--tone-ink-soft); font-size: 15px; }
.s-chart__line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.s-chart__line--two { stroke: var(--tone-teal); }
.s-chart__line--three { stroke: var(--tone-coral-text); stroke-dasharray: 9 6; }
.s-chart__label { font-size: 17px; font-weight: 700; }
.s-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; }
.s-legend__swatch { display: inline-block; width: 1.8rem; height: 0; margin-right: 0.45rem; vertical-align: middle; border-top: 4px solid var(--tone-teal); }
.s-legend__swatch--three { border-top: 4px dashed var(--tone-coral-text); }
.s-note { padding: 1.1rem 1.3rem; background: var(--tone-coral-soft); border-left: 5px solid var(--tone-coral); border-radius: var(--tone-radius); font-size: 0.97rem; }
.s-note p:last-child { margin-bottom: 0; }
@media (min-width: 60em) { .s-inflation { grid-template-columns: 1.1fr 1fr; } }

/* Step 4: family conversation */
.s-family { display: grid; gap: 2rem; align-items: start; }
.s-family__photo { border-radius: var(--tone-radius); box-shadow: var(--tone-shadow); width: 100%; }
.s-prompts { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: prompt; }
.s-prompts__card {
  position: relative; margin: 0; padding: 1.1rem 1.3rem 1.1rem 3.6rem;
  background: var(--tone-white); border: 1px solid var(--tone-line); border-radius: var(--tone-radius); box-shadow: var(--tone-shadow);
}
.s-prompts__card::before {
  content: "\201C"; position: absolute; left: 1rem; top: 0.3rem;
  font: 600 3rem/1 var(--tone-font-head); color: var(--tone-coral);
}
.s-prompts__quote { margin: 0; font-family: var(--tone-font-head); font-size: 1.1rem; }
.s-prompts__why { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--tone-ink-soft); }
@media (min-width: 60em) { .s-family { grid-template-columns: 0.85fr 1.15fr; } .s-family__aside { position: sticky; top: 1.5rem; } }

/* Step 5: FAQ (always visible) */
.s-faq { margin: 0; padding: 0; list-style: none; counter-reset: faq; }
.s-faq__item { counter-increment: faq; position: relative; padding: 1.5rem 0 1.25rem 3.6rem; border-bottom: 1px solid var(--tone-line); }
.s-faq__item:last-child { border-bottom: 0; }
.s-faq__item::before {
  content: counter(faq); position: absolute; left: 0; top: 1.45rem;
  display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font: 700 1.05rem/1 var(--tone-font-body); color: var(--tone-teal); background: var(--tone-teal-soft);
}
.s-faq__q { font-size: 1.22rem; margin-bottom: 0.5rem; }
.s-faq__a { margin: 0; }

/* Step 6: sign-up */
.s-signup { display: grid; gap: 2rem; align-items: start; }
.s-signup__form { padding: clamp(1.4rem, 4vw, 2.5rem); background: var(--tone-sand); border-radius: var(--tone-radius); }
.s-signup__row { display: grid; gap: 0 1.25rem; }
.s-signup__offer { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.s-signup__offer li { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.6rem; }
.s-signup__offer .s-icon { color: var(--tone-teal); margin-top: 0.1rem; }
.s-privacy {
  padding: 1.75rem 1.6rem; background: var(--tone-white); border: 2px solid var(--tone-teal-soft);
  border-radius: var(--tone-radius); box-shadow: var(--tone-shadow);
}
.s-privacy__icon { display: flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--tone-teal-soft); color: var(--tone-teal); margin-bottom: 1rem; }
.s-privacy__title { font-size: 1.3rem; }
.s-privacy p:last-child { margin-bottom: 0; }
.s-basic-info { margin-top: 2rem; }
@media (min-width: 40em) { .s-signup__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .s-signup { grid-template-columns: 1.6fr 1fr; } .s-privacy { position: sticky; top: 1.5rem; } }

/* Consent dialog: role=dialog covers the screen with a dimmed backdrop */
.s-consent {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(20, 33, 37, 0.62); animation: s-fade 0.3s ease-out;
}
.s-consent[hidden] { display: none; }
.s-consent__box {
  width: 100%; max-width: 42rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--tone-white); border-radius: var(--tone-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.s-consent__title { font-size: 1.5rem; display: flex; align-items: center; gap: 0.7rem; }
.s-consent__title .s-icon { color: var(--tone-coral-text); }
.s-consent__text { font-size: 0.98rem; }
.s-consent__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.s-consent__btn {
  flex: 1 1 0; min-height: 3.6rem; padding: 0.7rem 1.2rem;
  font: 700 1.05rem/1.2 var(--tone-font-body); color: var(--tone-white);
  background: var(--tone-teal); border: 2px solid var(--tone-teal); border-radius: var(--tone-radius); cursor: pointer;
}
.s-consent__btn:hover { background: var(--tone-teal-deep); border-color: var(--tone-teal-deep); color: var(--tone-white); text-decoration: underline; }
.s-consent__prefs { margin-top: 1.25rem; padding: 1.25rem; background: var(--tone-sand); border-radius: var(--tone-radius); animation: s-fade 0.3s ease-out; }
.s-consent__prefs[hidden] { display: none; }
.s-consent__option { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--tone-line); }
.s-consent__option:last-of-type { border-bottom: 0; }
.s-consent__option-name { font-weight: 700; display: block; }
.s-consent__option-desc { display: block; font-size: 0.9rem; color: var(--tone-ink-soft); }
.s-switch { flex: none; width: 3.4rem; height: 1.9rem; margin: 0.2rem 0 0; appearance: none; -webkit-appearance: none; position: relative; border-radius: 1rem; background: #8a9a9e; cursor: pointer; }
.s-switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--tone-white); transition: left 0.2s ease; }
.s-switch:checked { background: var(--tone-teal); }
.s-switch:checked::after { left: 1.7rem; }
.s-switch:disabled { opacity: 0.6; cursor: not-allowed; }
.s-switch:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--tone-teal-soft); }
.s-consent__save { margin-top: 1rem; width: 100%; }
@media (min-width: 40em) { .s-consent__actions { flex-direction: row; } }

/* Inner pages */
.s-pagehead { background: var(--tone-sand); padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; }
.s-pagehead__lead { font-size: 1.15rem; color: var(--tone-ink-soft); max-width: 44rem; margin: 0; }
.s-page { padding: 3rem 0 4rem; }
.s-prose h2 { font-size: 1.55rem; margin-top: 2.2rem; }
.s-prose h3 { margin-top: 1.6rem; }
.s-prose ul, .s-prose ol { padding-left: 1.4rem; }
.s-prose li { margin-bottom: 0.45rem; }
.s-updated { font-size: 0.92rem; color: var(--tone-ink-soft); }

.s-split { display: grid; gap: 2.5rem; align-items: start; }
.s-split__photo { width: 100%; border-radius: var(--tone-radius); box-shadow: var(--tone-shadow); }
@media (min-width: 58em) { .s-split { grid-template-columns: 1.4fr 1fr; } .s-split--flip { grid-template-columns: 1fr 1.4fr; } }

.s-values { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.s-values__item { padding: 1.4rem; background: var(--tone-white); border: 1px solid var(--tone-line); border-radius: var(--tone-radius); box-shadow: var(--tone-shadow); }
.s-values__item .s-icon { color: var(--tone-teal); margin-bottom: 0.5rem; }
.s-values__item h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.s-values__item p { margin: 0; font-size: 0.97rem; }
@media (min-width: 46em) { .s-values { grid-template-columns: repeat(2, 1fr); } }

.s-address { padding: 1.6rem; background: var(--tone-sand); border-radius: var(--tone-radius); font-style: normal; }
.s-address__line { display: flex; gap: 0.8rem; align-items: flex-start; margin: 0 0 1rem; }
.s-address__line:last-child { margin-bottom: 0; }
.s-address__line .s-icon { color: var(--tone-teal); }
.s-address__line a { font-weight: 700; overflow-wrap: anywhere; }
.s-hours { margin-top: 2rem; }

.s-thanks { text-align: center; padding: 4rem 0 5rem; }
.s-thanks__icon { width: 5rem; height: 5rem; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tone-teal-soft); color: var(--tone-teal); }
.s-thanks__steps { text-align: left; max-width: 36rem; margin: 2rem auto; }
.s-thanks__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.s-path__sub { margin-top: 2.25rem; }
.s-mission__title { margin-top: 3.5rem; }
.s-mission__team { margin-top: 3.5rem; }
.s-prose code, .s-table code { font-size: 0.9em; background: var(--tone-sand); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
.s-prose .s-footer__link { padding: 0; font-size: inherit; color: var(--tone-teal); text-decoration-color: currentColor; }
.s-family__aside p { margin-top: 1rem; }
.s-consent__box:focus { outline: none; }
.s-inflation > *, .s-split > *, .s-signup > *, .s-family > *, .s-hero__grid > *, .s-legs > * { min-width: 0; }