/* v0.2 */
/* ============================================================
   JAROMEAL — DESIGN SYSTEM
   style.css — shared across all pages
   To restyle the entire site: edit the :root block below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PALETTE — Primary teal ramp
     ---------------------------------------------------------- */
  --color-deep-ocean:   #0D3D4A;
  --color-harbor:       #145E72;
  --color-primary:      #1B8099;
  --color-bright-teal:  #2AACC4;
  --color-sky-tint:     #7DD4E2;

  /* Accent / depth ramp */
  --color-midnight:     #1A2E44;
  --color-slate:        #2C4F6B;
  --color-steel:        #4A8FA8;
  --color-mist:         #D4EEF4;
  --color-ice:          #F0F7F9;

  /* Neutrals */
  --color-ink:          #1C1C1E;
  --color-charcoal:     #3A3A3C;
  --color-mid:          #8E8E93;
  --color-light:        #D1D1D6;
  --color-fog:          #F5F5F7;

  /* Surfaces */
  --color-surface-light: #F0F7F9;
  --color-surface-dark:  #0D1F2A;

  /* ----------------------------------------------------------
     SEMANTIC ROLES
     Change these to retheme the site without touching HTML.
     ---------------------------------------------------------- */
  --bg:              var(--color-ice);
  --bg-card:         #ffffff;
  --bg-dark:         var(--color-deep-ocean);
  --bg-dark-alt:     var(--color-surface-dark);
  --text-primary:    var(--color-ink);
  --text-secondary:  var(--color-charcoal);
  --text-muted:      var(--color-mid);
  --text-inverse:    #ffffff;
  --accent:          var(--color-primary);
  --accent-bright:   var(--color-bright-teal);
  --accent-dark:     var(--color-harbor);
  --border:          var(--color-mist);
  --border-strong:   var(--color-sky-tint);

  /* Semantic roles — component-level */
  --bg-pill:         var(--color-ice);
  --text-pill:       var(--color-harbor);
  --bg-badge:        var(--color-mist);
  --text-badge:      var(--color-harbor);
  --text-accent-on-dark: var(--color-bright-teal);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Active: Outfit
     To swap font: change --font-display and --font-body.

     Alternatives (uncomment one pair):
       DM Sans:            'DM Sans', sans-serif
       Plus Jakarta Sans:  'Plus Jakarta Sans', sans-serif
       Nunito:             'Nunito', sans-serif
     ---------------------------------------------------------- */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Outfit', sans-serif;

  /* --font-display: 'DM Sans', sans-serif; */
  /* --font-body:    'DM Sans', sans-serif; */

  /* --font-display: 'Plus Jakarta Sans', sans-serif; */
  /* --font-body:    'Plus Jakarta Sans', sans-serif; */

  /* --font-display: 'Nunito', sans-serif; */
  /* --font-body:    'Nunito', sans-serif; */

  /* ----------------------------------------------------------
     TYPE SCALE
     ---------------------------------------------------------- */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  /* ----------------------------------------------------------
     SHAPE
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #0D1F2A;
    --bg-card:         #1A2E44;
    --text-primary:    #F0F7F9;
    --text-secondary:  #D4EEF4;
    --text-muted:      #A8CDD8;
    --border:          #2C4F6B;
    --border-strong:   #4A8FA8;

    /* Component-level dark overrides */
    --bg-pill:         #2C4F6B;
    --text-pill:       #7DD4E2;
    --bg-badge:        #2C4F6B;
    --text-badge:      #7DD4E2;
    --accent:          #2AACC4;
    --text-accent-on-dark: #2AACC4;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* ============================================================
   TYPOGRAPHY — Semantic tags
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: 720px;
}

.section {
  padding: var(--space-2xl) 0;
}

.section--dark {
  background: var(--bg-dark);
}

.section--ice {
  background: var(--color-ice);
}

.section--teal {
  background: var(--color-primary);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  background: var(--color-deep-ocean);
  border-bottom: 1px solid var(--color-harbor);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav__logo em {
  color: var(--color-bright-teal);
  font-style: normal;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-sky-tint);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: #fff;
  text-decoration: none;
}

.nav__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  border: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.nav__cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

/* Mobile nav */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-sky-tint);
  transition: var(--transition-fast);
}

.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--color-deep-ocean);
  border-top: 1px solid var(--color-harbor);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  gap: var(--space-md);
}

.nav__mobile.is-open {
  display: flex;
}

.nav__mobile .nav__link {
  font-size: var(--text-base);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-harbor);
}

.nav__mobile .nav__cta {
  text-align: center;
  padding: 12px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

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

.btn--ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 9px 18px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--color-deep-ocean);
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(42, 172, 196, 0.07);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(20, 94, 114, 0.15);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-bright-teal);
  margin-bottom: var(--space-md);
  display: block;
}

.hero h1 {
  color: #fff;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-sky-tint);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 500px;
}

.hero__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================================
   BRANCH / AUDIENCE SPLIT
   ============================================================ */

.branch {
  background: var(--bg-card);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--border);
}

.branch p {
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

.branch__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.branch__tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-mist);
  background: var(--color-ice);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.branch__tile:hover {
  border-color: var(--accent);
  background: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.branch__tile--dark {
  background: var(--color-deep-ocean);
  border-color: var(--color-harbor);
}

.branch__tile--dark:hover {
  border-color: var(--color-bright-teal);
  background: var(--color-midnight);
}

.branch__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.branch__tile--dark .branch__label {
  color: var(--color-sky-tint);
}

.branch__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  flex: 1;
}

.branch__tile--dark .branch__title {
  color: #fff;
}

.branch__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.branch__tile--dark .branch__body {
  color: var(--color-mist);
}

.branch__arrow {
  display: flex;
  justify-content: flex-end;
}

.branch__arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform var(--transition-fast);
}

.branch__tile:hover .branch__arrow-circle {
  transform: translateX(3px);
}

.branch__tile--dark .branch__arrow-circle {
  background: var(--color-bright-teal);
  color: var(--color-deep-ocean);
}

/* ============================================================
   HOW IT WORKS — STEPS
   ============================================================ */

/* @agent:StepsSection:authority */
.steps {
  background: var(--bg);
  padding: var(--space-2xl) 0;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
}

.step__num {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.step__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   PERSONALIZATION
   ============================================================ */

.personalization {
  background: var(--bg-card);
  padding: var(--space-2xl) 0;
}

.personalization__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.personalization__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.pill {
  font-size: var(--text-sm);
  font-weight: 400;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  color: var(--text-pill);
  background: var(--bg-pill);
  transition: var(--transition-fast);
  cursor: default;
}

.pill--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* @agent:MealBuilder:authority */
.meal-builder {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.meal-builder__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.meal-builder__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.meal-builder__row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.meal-builder__row-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.meal-builder__options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.meal-builder__opt {
  font-size: var(--text-xs);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
}

.meal-builder__opt--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   PRIVACY STRIP
   ============================================================ */

.privacy-strip {
  background: var(--color-primary);
  padding: var(--space-xl) 0;
  text-align: center;
}

.privacy-strip h3 {
  color: #fff;
  margin-bottom: var(--space-sm);
}

.privacy-strip p {
  color: var(--color-mist);
  max-width: 480px;
  margin: 0 auto;
  font-size: var(--text-base);
}

/* ============================================================
   FOR DOCTORS & DIETITIANS
   ============================================================ */

/* Scroll offset for sticky nav */
#doctor-section,
#dietitian-section,
#signup {
  scroll-margin-top: 80px;
}

/* @agent:ProfessionalsSection:authority */
.professionals {
  background: var(--bg);
  padding: var(--space-2xl) 0;
}

.professionals__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.professionals__panel {
  padding: var(--space-md) var(--space-lg) var(--space-lg) 0;
}

.professionals__panel h3 {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.professionals__panel p {
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.doctors__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-badge);
  color: var(--text-badge);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

/* ============================================================
   SIGNUP CTA
   ============================================================ */

/* @agent:SignupCta:authority */
.signup-cta {
  background: var(--color-deep-ocean);
  padding: var(--space-2xl) 0;
}

.signup-cta__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.signup-cta h2 {
  color: var(--text-inverse);
  margin-bottom: var(--space-sm);
}

.signup-cta p {
  color: var(--color-sky-tint);
  margin-bottom: var(--space-md);
  font-size: var(--text-base);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.signup-form__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 13px var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-harbor);
  background: rgba(255,255,255,0.07);
  color: var(--text-inverse);
  outline: none;
  box-sizing: border-box;
}

.signup-form__input::placeholder { color: var(--color-mid); }
.signup-form__input:focus { border-color: var(--color-bright-teal); }

.signup-form__checks-label {
  font-size: var(--text-base);
  color: var(--color-sky-tint);
  margin-bottom: var(--space-sm);
  display: block;
}

.signup-form__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.signup-form__check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-sky-tint);
  cursor: pointer;
}

.signup-form__check input {
  accent-color: var(--color-bright-teal);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.signup-form__btn {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 13px var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.signup-form__btn:hover { opacity: 0.88; }

.signup-cta__availability {
  font-size: var(--text-xs);
  color: var(--color-mid);
  font-style: italic;
}

.signup-note {
  font-size: var(--text-xs);
  color: var(--color-mid);
  margin-top: var(--space-sm);
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-deep-ocean);
  border-top: 1px solid var(--color-harbor);
  padding: var(--space-xl) 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-sky-tint);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.footer__logo em {
  color: var(--color-bright-teal);
  font-style: normal;
}

.footer__links {
  display: flex;
  gap: var(--space-lg);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-mid);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-sky-tint);
  text-decoration: none;
}

.footer__legal {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-mid);
  line-height: 1.6;
  border-top: 1px solid var(--color-harbor);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
}

/* ============================================================
   HOW IT WORKS PAGE — HERO
   ============================================================ */

/* @agent:HiwHero:authority */
.hiw-hero {
  background: var(--color-deep-ocean);
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.hiw-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(42,172,196,0.07);
  pointer-events: none;
}

.hiw-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.hiw-hero h1 {
  color: var(--text-inverse);
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.hiw-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-sky-tint);
  line-height: 1.6;
  max-width: 500px;
}

/* ============================================================
   HOW IT WORKS PAGE — VERTICAL STEPS
   ============================================================ */

/* @agent:VerticalSteps:authority */
.vsteps {
  background: var(--bg-card);
  padding: var(--space-2xl) 0;
}

.vsteps__list {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.vstep {
  display: flex;
  gap: var(--space-lg);
}

.vstep__spine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vstep__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vstep__line {
  width: 1.5px;
  flex: 1;
  min-height: 24px;
  background: var(--border);
  margin-top: 6px;
}

.vstep:last-child .vstep__line {
  display: none;
}

.vstep__content {
  padding-top: 6px;
  padding-bottom: var(--space-xl);
  flex: 1;
}

.vstep__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-badge);
  color: var(--text-badge);
  margin-bottom: var(--space-sm);
}

.vstep__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.vstep__body {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 520px;
}

/* ============================================================
   HOW IT WORKS PAGE — BUILDER CARD
   ============================================================ */

/* @agent:BuilderCard:authority */
.builder-section {
  background: var(--bg);
  padding: var(--space-2xl) 0;
}

.builder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 560px;
  margin-top: var(--space-xl);
}

.builder-card__header {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-badge);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-badge);
}

.builder-card__row {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.builder-card__row:last-child {
  border-bottom: none;
}

.builder-card__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.builder-card__options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.builder-opt {
  font-size: var(--text-xs);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
}

.builder-opt--active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}

.builder-opt--none {
  color: var(--text-muted);
}

/* ============================================================
   HOW IT WORKS PAGE — NO LOCK-IN
   ============================================================ */

.nolockin {
  background: var(--bg-card);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border);
}

.nolockin__inner {
  max-width: 560px;
}

/* ============================================================
   HOW IT WORKS PAGE — FAQ
   ============================================================ */

/* @agent:FaqAccordion:authority */
.faq {
  background: var(--bg);
  padding: var(--space-2xl) 0;
}

.faq__list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  margin-top: 1px;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.faq__item.is-open .faq__icon {
  background: var(--accent);
  color: var(--text-inverse);
  transform: rotate(45deg);
}

.faq__body {
  display: none;
  padding: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 24px + var(--space-md));
}

.faq__item.is-open .faq__body {
  display: block;
}

.faq__body p {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
}

.faq__body a {
  color: var(--accent);
}

/* ============================================================
   COMING SOON
   ============================================================ */

/* @agent:ComingSoon:authority */
.coming-soon {
  padding: var(--space-3xl) 0;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.coming-soon__inner {
  max-width: 480px;
  margin: 0 auto;
}

.coming-soon h1 {
  margin-bottom: var(--space-md);
}

.coming-soon p {
  font-size: var(--text-lg);
  color: var(--text-muted);
}

/* ============================================================
   LEGAL
   ============================================================ */

/* @agent:LegalPage:authority */
.legal-hero {
  background: var(--color-deep-ocean);
  padding: var(--space-2xl) 0 var(--space-xl);
}

.legal-hero h1 {
  color: var(--text-inverse);
  margin-bottom: var(--space-sm);
}

.legal-hero p {
  color: var(--color-sky-tint);
  font-size: var(--text-lg);
  max-width: 480px;
}

.legal-section {
  padding: var(--space-2xl) 0;
}

.legal-section + .legal-section {
  border-top: 1px solid var(--border);
}

.legal-section--ice {
  background: var(--color-ice);
}

.legal-inner {
  max-width: 680px;
}

.legal-updated {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.legal-block {
  margin-bottom: var(--space-xl);
}

.legal-block:last-child {
  margin-bottom: 0;
}

.legal-block h4 {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.legal-block p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.75;
}

.legal-block p + p {
  margin-top: var(--space-sm);
}

.contact-box {
  background: var(--color-ice);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

.contact-box__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.contact-box__value {
  font-size: var(--text-sm);
  color: var(--accent);
}

.disclaimer-box {
  background: var(--color-deep-ocean);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

.disclaimer-box p {
  font-size: var(--text-sm);
  color: var(--color-sky-tint);
  line-height: 1.75;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-center        { text-align: center; }
.text-muted         { color: var(--text-muted); }
.text-bright        { color: var(--color-bright-teal); }
.section-heading-gap { margin-top: var(--space-sm); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --text-4xl: 2.25rem;
    --text-3xl: 1.75rem;
    --text-2xl: 1.375rem;
  }

  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .hero {
    padding: var(--space-2xl) 0;
  }

  .hero__sub {
    font-size: var(--text-base);
  }

  .branch__grid {
    grid-template-columns: 1fr;
  }

  .steps__grid {
    grid-template-columns: 1fr 1fr;
  }

  .personalization__inner {
    grid-template-columns: 1fr;
  }

  .professionals__grid {
    grid-template-columns: 1fr;
  }

  .hiw-hero {
    padding: var(--space-2xl) 0;
  }

  .hiw-hero__sub {
    font-size: var(--text-base);
  }

  .vstep__title {
    font-size: var(--text-lg);
  }
}

@media (max-width: 480px) {
  .steps__grid {
    grid-template-columns: 1fr;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    text-align: center;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}