.website-body {
  --navy: #172a4a; --coral: #ff6b6b; --emerald: #00c896; --ocean: #148ead;
  --sunny: #ffd166; --mist: #f2f6f9; --slate: #45566e; --line: #d9e2ec;
  margin: 0; background: #fff; color: var(--navy);
  font-family: "Nunito", "Baloo 2", "Avenir Next Rounded", "Segoe UI", system-ui, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.website-body h1, .website-body h2, .website-body h3, .website-body h4 {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif; letter-spacing: -.02em; line-height: 1.08;
}
.website-body :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.website-btn { display: inline-block; text-decoration: none; font-weight: 800; border-radius: 10px; padding: 9px 18px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; font-size: .95rem; }
.website-btn--coral { background: var(--coral); border-color: var(--coral); color: var(--navy); }
.website-btn--ghost { background: #fff; }
.website-btn--outline-white { background: transparent; color: #fff; border-color: #fff; }
.website-btn--large { padding: 12px 22px; }
.website-btn:hover { filter: brightness(.96); }

.website-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.97); border-bottom: 1.5px solid var(--line); }
.website-header__in { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 26px; }
.website-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.45rem; }
.website-nav { display: flex; gap: 20px; margin-left: auto; }
.website-nav a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: .95rem; }
.website-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.website-header__actions { display: flex; gap: 10px; align-items: center; margin-left: 6px; }
.website-header__actions form { display: inline; }
.website-user { font-weight: 800; }
@media (max-width: 860px) { .website-nav { display: none; } .website-header__actions .website-btn--ghost { display: none; } }

.website-story { --stage-bg: #f4f0e7; --stage-ink: #20392c; --stage-accent: #234b35; --stage-soft: #e7ecdc; background: var(--stage-bg); color: var(--stage-ink); transition: background .7s ease; }
.website-story__grid { max-width: 1180px; margin: 0 auto; padding: 56px 24px 64px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.website-chapter { margin-bottom: 44px; }
.website-mission-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--stage-accent); margin: 0 0 6px; }
.website-mission-title { font-size: clamp(2.3rem, 5.4vw, 4.2rem); margin: 0; }
.website-mission-copy { font-size: 1.12rem; max-width: 36ch; margin: 14px 0 0; }
.website-theme-tag { display: inline-block; margin-top: 16px; font-size: .85rem; font-weight: 800; border: 1.5px solid var(--stage-accent); color: var(--stage-accent); border-radius: 999px; padding: 5px 12px; }
.website-story__meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.website-count { font-family: "Baloo 2", sans-serif; font-weight: 800; white-space: nowrap; }
.website-progress { height: 6px; background: rgba(23,42,74,.14); border-radius: 99px; flex: 1; overflow: hidden; max-width: 280px; }
.website-progress i { display: block; height: 100%; width: 20%; background: var(--stage-accent); border-radius: 99px; transition: width .45s ease; }
.website-dots { display: flex; gap: 8px; margin-top: 16px; }
.website-dots button { width: 34px; height: 6px; border: 0; border-radius: 99px; background: rgba(23,42,74,.18); cursor: pointer; padding: 0; }
.website-dots button[aria-current="true"] { background: var(--stage-accent); }
.website-story__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.website-scroll-hint { font-size: .85rem; opacity: .75; margin: 16px 0 0; }

/* Enhanced (JS): pinned stage, one chapter at a time. Chapters swap inside a
   fixed-height region; progress, dots and CTAs flow below it and never overlap. */
.website-story--enhanced { height: 540vh; }
.website-story--enhanced .website-story__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; }
.website-story--enhanced .website-story__grid { align-items: center; width: 100%; padding-top: 76px; }
.website-story--enhanced .website-chapters { position: relative; height: clamp(22rem, 54vh, 31rem); }
.website-story--enhanced .website-chapter { position: absolute; inset: 0 auto auto 0; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.website-story--enhanced .website-chapter.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.website-story--enhanced .website-story__meta { margin-top: 18px; }
@media (max-width: 860px) { .website-story--enhanced .website-chapters { height: clamp(22rem, 50vh, 30rem); }
  .website-story--enhanced .website-story__sticky { align-items: flex-start; }
  .website-story--enhanced .website-story__grid { padding-top: 64px; } }

.website-stage { position: relative; min-height: 540px; }
.website-halo { position: absolute; inset: 2% 6% auto; height: 76%; border-radius: 50%; background: var(--stage-soft); transition: background .7s; }
.website-phone { position: absolute; left: 50%; top: 50%; width: min(290px, 70vw); aspect-ratio: 9/19; transform: translate(-50%,-50%); background: #101c30; border-radius: 38px; padding: 11px; box-shadow: 0 24px 50px rgba(23,42,74,.28); z-index: 3; }
.website-phone__screen { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #fff; }
.website-phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42%; height: 20px; background: #101c30; border-radius: 0 0 12px 12px; z-index: 5; }
.website-screen { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; background: #fff; }
.website-screen.is-active { opacity: 1; pointer-events: auto; }
.website-screen__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.website-polaroid { position: absolute; width: 112px; margin: 0; background: #fff; padding: 7px 7px 20px; box-shadow: 0 12px 28px rgba(23,42,74,.20); z-index: 4; border-radius: 4px; }
.website-polaroid .website-ph { height: 78px; border-radius: 2px; }
.website-polaroid figcaption { font-size: .62rem; font-weight: 800; color: var(--slate); margin-top: 5px; text-align: center; }
.website-polaroid--a { left: 0; top: 8%; rotate: -7deg; } .website-polaroid--b { right: 0; top: 20%; rotate: 6deg; } .website-polaroid--c { left: 4%; bottom: 6%; rotate: 5deg; }
@media (max-width: 860px) {
  .website-story__grid { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .website-mission-copy { margin-inline: auto; } .website-story__meta, .website-dots, .website-story__cta { justify-content: center; }
  .website-stage { min-height: 380px; } .website-phone { width: min(200px, 56vw); } .website-polaroid { width: 80px; } .website-polaroid .website-ph { height: 52px; }
  .website-polaroid--c { display: none; }
}
.website-section { padding: 84px 24px; }
.website-section--mist { background: var(--mist); }
.website-wrap { max-width: 1180px; margin: 0 auto; }
.website-section h2, .website-cta h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0; }
.website-num { color: var(--coral); }
.website-lede { font-size: 1.13rem; color: var(--slate); max-width: 58ch; margin: 14px 0 0; }
.website-steps { margin-top: 42px; border-top: 1.5px solid var(--line); }
.website-step { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 26px; padding: 28px 0; border-bottom: 1.5px solid var(--line); align-items: start; }
.website-step b { font-family: "Baloo 2", sans-serif; font-size: 2.1rem; }
.website-step h3 { margin: 4px 0 6px; font-size: 1.32rem; }
.website-step p { margin: 0; color: var(--slate); max-width: 46ch; }
.website-step__detail { font-size: .95rem; }
@media (max-width: 760px) { .website-step { grid-template-columns: 48px 1fr; } .website-step__detail { grid-column: 2; } }

.website-theme-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 20px; }
.website-theme-tabs button { font: inherit; font-weight: 800; border: 1.5px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.website-theme-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.website-theme-preview { border-radius: 18px; padding: clamp(22px, 4vw, 42px); display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin-bottom: 20px; transition: background .5s; }
.website-theme-preview h3 { font-size: 1.8rem; margin: 0 0 8px; }
.website-theme-preview p { margin: 0; }
.website-themes--enhanced .website-theme-preview { display: none; }
.website-themes--enhanced .website-theme-preview.is-active { display: grid; }
.website-theme-card { border-radius: 14px; padding: 22px; box-shadow: 0 16px 36px rgba(23,42,74,.14); }
.website-theme-card ul { margin: 12px 0 0; padding-left: 18px; } .website-theme-card li { margin: 5px 0; }
.website-swatches { display: flex; gap: 8px; margin-top: 16px; }
.website-swatches i { width: 32px; height: 32px; border-radius: 9px; display: block; border: 1px solid rgba(0,0,0,.12); }
@media (max-width: 760px) { .website-theme-preview, .website-themes--enhanced .website-theme-preview.is-active { grid-template-columns: 1fr; } }

.website-shots { display: grid; gap: 38px; margin-top: 42px; }
.website-shot { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; }
.website-shot:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.website-shot:nth-child(even) .website-browser { order: 2; }
.website-browser { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(23,42,74,.12); }
.website-browser__bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1.5px solid var(--line); background: var(--mist); }
.website-browser__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.website-browser img { display: block; width: 100%; height: auto; }
.website-shot h3 { font-size: 1.45rem; margin: 0 0 8px; }
.website-shot p { color: var(--slate); margin: 0; max-width: 44ch; }
.website-tag { font-size: .8rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 6px !important; }
@media (max-width: 760px) { .website-shot, .website-shot:nth-child(even) { grid-template-columns: 1fr; } .website-shot:nth-child(even) .website-browser { order: 0; } }

.website-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.website-split > div { padding: 32px; }
.website-split > div + div { border-left: 1.5px solid var(--line); background: var(--navy); color: #fff; }
.website-split > div + div p { color: #c8d4e6; }
.website-split h3 { font-size: 1.35rem; margin: 0 0 12px; }
.website-split ul { margin: 0; padding-left: 20px; } .website-split li { margin: 8px 0; }
@media (max-width: 760px) { .website-split { grid-template-columns: 1fr; } .website-split > div + div { border-left: 0; border-top: 1.5px solid var(--line); } }

.website-faq { max-width: 760px; margin-top: 34px; }
.website-faq details { border-bottom: 1.5px solid var(--line); padding: 16px 0; }
.website-faq summary { font-weight: 800; cursor: pointer; font-size: 1.05rem; }
.website-faq p { color: var(--slate); margin: 8px 0 0; }

.website-cta { background: var(--navy); color: #fff; padding: 82px 24px; text-align: center; }
.website-cta h2 { max-width: 20ch; margin: 0 auto; color: #fff; }
.website-cta p { color: #c8d4e6; max-width: 52ch; margin: 16px auto 28px; }
.website-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.website-footer { padding: 26px 24px; text-align: center; color: var(--slate); font-size: .88rem; border-top: 1.5px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .website-story, .website-chapter, .website-screen, .website-theme-preview { transition: none !important; }
}