/* ============================================================
   Evenly Health — shared design system (Editorial Transparency)
   Display: Newsreader (serif) · Body/UI: system sans
   Brand tokens are canonical — do not introduce new colors.
   ============================================================ */

:root{
  --navy:#1a2e44; --teal:#0e7c7b; --teal-dark:#0a5f5e;
  --bg:#f7f9f9; --ink:#22303c; --muted:#5a6b7a;
  --hairline:#e3e9ec; --card:#ffffff; --navy-soft:#22405f;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure:34em;
  --maxw:1080px;
  /* motion */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out for entrances/UI */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --dur-fast:.15s;    /* hover / color changes */
  --dur-press:.16s;   /* button press feedback */
  --dur-base:.2s;     /* small state transitions */
  --dur-reveal:.45s;  /* scroll-reveal entrance */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wide{ max-width:var(--maxw); }
a{ color:var(--teal-dark); }
img{ max-width:100%; }

/* accessible skip link */
.skip{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 14px; z-index:100; border-radius:0 0 6px 0; }
.skip:focus{ left:0; }

/* ---- Kickers / small-caps section labels ---- */
.kicker{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--teal-dark);
  margin-bottom:14px;
}
.kicker::after{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--teal); vertical-align:middle; margin-left:10px; opacity:.6;
}
.kicker.center{ text-align:center; }
.kicker.center::after{ display:block; margin:10px auto 0; }

/* ---- Display type ---- */
.display{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:600;
  color:var(--navy); line-height:1.08; letter-spacing:-.012em;
}
h1.display{ font-size:clamp(2.1rem, 6vw, 3.4rem); line-height:1.06; margin-bottom:20px; }
h2.display{ font-size:clamp(1.7rem, 4vw, 2.4rem); margin-bottom:16px; }
h3.display{ font-size:clamp(1.25rem, 2.6vw, 1.5rem); margin-bottom:8px; }
.lead{ font-size:clamp(1.05rem, 2.5vw, 1.2rem); color:var(--ink); max-width:var(--measure); }
.prose p{ margin-bottom:14px; max-width:var(--measure); color:#37485a; }
.prose p.wide-p{ max-width:44em; }

/* ---- Navigation ---- */
.site-nav{ position:sticky; top:0; z-index:50; background:rgba(247,249,249,.9); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--hairline); }
.nav-inner{ display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; padding:14px 22px; max-width:var(--maxw); margin:0 auto; }
.logo{ font-family:var(--sans); font-weight:700; font-size:1.83rem; color:var(--navy); letter-spacing:-.01em; line-height:1; text-decoration:none; margin-right:auto; }
.logo b{ color:var(--teal); font-weight:700; }
.nav-links{ display:flex; gap:22px; align-items:center; }
.nav-links a{ font-size:.92rem; font-weight:600; color:var(--ink); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--navy); border-color:var(--teal); }
.nav-cta{ font-family:var(--sans); font-size:.86rem; font-weight:700; color:#fff; background:var(--teal); border-radius:999px; padding:9px 16px; text-decoration:none; white-space:nowrap; transition:background var(--dur-fast) ease, transform var(--dur-press) var(--ease-out); }
.nav-cta:hover{ background:var(--teal-dark); }
.nav-cta:active{ transform:scale(0.97); }
@media (max-width:760px){
  .nav-inner{ gap:12px 16px; padding:12px 20px; }
  .logo{ margin-right:auto; }
  .nav-links{ order:3; width:100%; gap:16px; flex-wrap:wrap; padding-top:4px; border-top:1px solid var(--hairline); margin-top:2px; }
  .nav-links a{ font-size:.86rem; }
}

/* ---- ECG hairline motif ---- */
.ecg{ display:block; width:100%; height:26px; margin:0; }
.ecg path{ fill:none; stroke:var(--teal); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ecg.draw path{ stroke-dasharray:1320; stroke-dashoffset:1320; animation:ecgdraw 2s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes ecgdraw{ to{ stroke-dashoffset:0; } }
.rule{ border:0; border-top:1px solid var(--hairline); }

/* ---- Section rhythm ---- */
section.band{ padding:56px 0; border-top:1px solid var(--hairline); }
section.band:first-of-type{ border-top:0; }
section.band.tint{ background:#eef4f4; }
section.band.navy{ background:var(--navy); color:#d5dee6; }
.section-head{ max-width:44em; margin-bottom:26px; }
.section-head .lead{ color:var(--muted); }

/* ---- Home hero spread ---- */
.hero{ padding:40px 0 8px; }
.spread{ display:grid; grid-template-columns:1fr; gap:40px; }
.feature{ min-width:0; display:flex; flex-direction:column; }
.feature-foot{ margin-top:34px; }
.feature-rule{ border:0; border-top:1px solid var(--hairline); margin:0 0 26px; }
.pullquote{
  font-family:var(--serif); font-optical-sizing:auto; font-style:italic;
  font-weight:400; color:var(--navy);
  font-size:clamp(1.5rem, 4.6vw, 2.1rem); line-height:1.18;
  letter-spacing:-.01em; padding-left:20px; border-left:2px solid var(--teal); margin:2px 0 6px;
}
.pullquote cite{ display:block; font-family:var(--sans); font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.link-underline{ display:inline-block; font-weight:600; font-size:.98rem; color:var(--teal-dark); text-decoration:none; border-bottom:1px solid var(--teal); padding-bottom:2px; }
.link-underline:hover{ color:var(--navy); border-color:var(--navy); }

.aside{ min-width:0; }
.price-figure{ margin:0 0 26px; }
.price-amount{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price{ font-family:var(--serif); font-optical-sizing:auto; font-weight:600; font-size:clamp(3.2rem, 12vw, 4.4rem); line-height:.9; color:var(--teal-dark); letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; }
.price-per{ font-size:.9rem; color:var(--muted); max-width:12em; line-height:1.35; }
.price-rule{ border:0; border-top:1px solid var(--navy); margin:18px 0 14px; opacity:.85; }
.planned-pill{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark); border:1px solid var(--teal); border-radius:999px; padding:5px 12px; }
.price-note{ font-size:.82rem; color:var(--muted); line-height:1.5; margin:12px 0 0; max-width:22em; }
.price-note strong{ color:var(--teal-dark); font-weight:600; }

/* points / ledger list */
ul.points{ list-style:none; margin:22px 0 0; }
ul.points li{ position:relative; padding:13px 0 13px 26px; border-top:1px solid var(--hairline); font-size:.96rem; color:var(--ink); }
ul.points li:first-child{ border-top:0; }
ul.points li::before{ content:""; position:absolute; left:0; top:1.35em; width:14px; height:2px; background:var(--teal); border-radius:2px; }

/* ---- Watch coda (homepage video, pre-waitlist) ---- */
.watch-coda{ max-width:400px; margin:0 auto; text-align:center; }
.watch-coda .video-frame{ border-radius:4px; overflow:hidden; background:var(--navy); box-shadow:0 14px 34px rgba(26,46,68,.14); }
.watch-coda video{ display:block; width:100%; height:auto; aspect-ratio:1/1; }
.watch-coda .video-note{ font-family:var(--sans); font-size:.74rem; color:var(--muted); letter-spacing:.02em; margin-top:10px; }

/* ---- Buttons ---- */
.btn{ display:inline-block; font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:.02em; text-decoration:none; text-align:center; cursor:pointer; border:0; border-radius:2px; padding:14px 22px; transition:background .15s ease, color .15s ease, transform var(--dur-press) var(--ease-out); }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); }
.btn-ghost{ background:transparent; color:var(--teal-dark); border:1px solid var(--teal); }
.btn-ghost:hover{ background:#eef4f4; }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 26px; font-size:1.02rem; }

/* ---- Principle / feature cards ---- */
.grid{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:4px; overflow:hidden; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.cell{ background:var(--card); padding:26px 24px; }
.cell .num{ font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--teal-dark); display:block; margin-bottom:10px; font-variant-numeric:lining-nums tabular-nums; }
.cell h3{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.18rem; line-height:1.2; margin-bottom:8px; }
.cell p{ color:#41525f; font-size:.96rem; }

/* stacked list of principles with hairline dividers */
.stack{ border-top:1px solid var(--hairline); }
.stack .item{ padding:22px 0; border-bottom:1px solid var(--hairline); display:grid; grid-template-columns:1fr; gap:6px; }
.stack .item h3{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.2rem; }
.stack .item p{ color:#41525f; font-size:.98rem; max-width:52em; }
@media (min-width:720px){ .stack .item{ grid-template-columns:230px 1fr; gap:28px; align-items:start; } }

/* how-it-works steps */
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:4px; overflow:hidden; }
.step{ background:var(--card); padding:26px 24px; position:relative; }
.step .step-n{ font-family:var(--serif); font-weight:600; color:var(--teal); font-size:1.6rem; line-height:1; display:block; margin-bottom:12px; font-variant-numeric:lining-nums; }
.step h3{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.15rem; margin-bottom:6px; }
.step p{ color:#41525f; font-size:.95rem; }

/* ---- FAQ ---- */
.faq details{ border-top:1px solid var(--hairline); padding:6px 0; }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{ list-style:none; cursor:pointer; padding:16px 34px 16px 0; position:relative; font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:14px; font-family:var(--sans); font-weight:400; font-size:1.4rem; color:var(--teal); transform-origin:center; transition:transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
@media (prefers-reduced-motion:reduce){ .faq summary::after{ transition:none; } }
.faq .answer{ padding:0 0 18px; color:#41525f; max-width:52em; }
.faq .answer p{ margin-bottom:10px; }

/* ---- Learn hub cards ---- */
.hub{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:720px){ .hub{ grid-template-columns:1fr 1fr; } }
.hub a.article{ display:block; background:var(--card); border:1px solid var(--hairline); border-radius:6px; padding:24px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.hub a.article:hover{ border-color:var(--teal); }
.hub .article .tag{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--teal-dark); }
.hub .article h3{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.25rem; line-height:1.2; margin:10px 0 8px; }
.hub .article p{ color:#41525f; font-size:.95rem; }
.hub .article.soon{ opacity:.6; pointer-events:none; }

/* ---- Enrollment card (frozen form lives here) ---- */
form.enroll{ background:var(--card); border:1px solid var(--hairline); padding:26px 24px 28px; border-radius:2px; }
form.enroll h2{ font-family:var(--serif); font-optical-sizing:auto; font-weight:600; color:var(--navy); font-size:1.5rem; line-height:1.12; letter-spacing:-.01em; margin-bottom:8px; }
form.enroll p.formsub{ color:var(--muted); font-size:.92rem; margin-bottom:6px; }
label{ display:block; font-family:var(--sans); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin:20px 0 7px; }
input[type=email], select{ width:100%; padding:12px 13px; border:1px solid var(--hairline); border-radius:2px; font-size:1rem; font-family:var(--sans); color:var(--ink); background:var(--card); line-height:1.3; }
input[type=email]::placeholder{ color:#93a2ad; }
select{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e7c7b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
input[type=email]:hover, select:hover{ border-color:#c2ced4; }
form.enroll button{ width:100%; margin-top:24px; padding:15px; background:var(--teal); color:#fff; border:0; border-radius:2px; font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .15s ease, transform var(--dur-press) var(--ease-out); }
form.enroll button:hover{ background:var(--teal-dark); }
form.enroll button:active{ transform:scale(0.98); }
.trust{ font-size:.82rem; color:var(--muted); margin-top:12px; line-height:1.45; }
.hidden{ display:none; }

/* ---- Disclaimer ---- */
.disclaimer{ font-size:.8rem; color:var(--muted); line-height:1.55; max-width:60em; }
.disclaimer.boxed{ border-top:1px solid var(--hairline); padding-top:22px; margin:40px auto 0; }

/* ---- Document / legal pages ---- */
.doc{ max-width:720px; }
.doc h1{ font-family:var(--serif); font-optical-sizing:auto; font-weight:600; color:var(--navy); font-size:clamp(1.7rem,4vw,2.2rem); line-height:1.15; margin-bottom:6px; }
.doc .date{ color:var(--muted); font-size:.9rem; margin-bottom:24px; }
.doc h2{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1.2rem; margin:28px 0 8px; }
.doc p, .doc li{ color:#3d4d5c; font-size:.98rem; margin-bottom:10px; }
.doc ul, .doc ol{ padding-left:22px; margin-bottom:12px; }
.doc li{ margin-bottom:6px; }
.doc a{ color:var(--teal-dark); }

/* ---- Confirmation (thanks) ---- */
.confirm{ text-align:center; max-width:560px; margin:0 auto; padding:26px 0; }
.confirm .badge{ display:block; width:64px; height:64px; margin:0 auto 24px; transform-origin:center; animation:badgeIn .5s var(--ease-out) both; }
@keyframes badgeIn{ from{ opacity:0; transform:scale(0.9); } to{ opacity:1; transform:scale(1); } }
/* Tier 2: stroke-draw the checkmark after the disc lands (path carries pathLength="1") */
.confirm .badge path{ stroke-dasharray:1; stroke-dashoffset:1; animation:badgeDraw .6s var(--ease-out) .22s both; }
@keyframes badgeDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .confirm .badge{ animation:none; }
  .confirm .badge path{ animation:none; stroke-dashoffset:0; }
}
.confirm h1{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:clamp(1.8rem,4.4vw,2.4rem); line-height:1.12; margin-bottom:14px; }
.confirm p{ color:#41525f; max-width:460px; margin:0 auto 12px; }

/* ---- Focus (visible keyboard affordance) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:2px; }
input[type=email]:focus, select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,123,.14); }

/* ---- Footer colophon ---- */
footer.colophon{ background:var(--navy); color:#c8d3dc; margin-top:0; }
.colophon-inner{ padding:44px 0 40px; }
.colophon-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:720px){ .colophon-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; } }
.colophon-mark{ font-family:var(--sans); font-weight:700; font-size:1.15rem; color:#fff; margin-bottom:12px; letter-spacing:-.01em; }
.colophon-mark b{ color:#5fb7b6; }
.colophon .blurb{ font-size:.86rem; color:#a9b7c2; max-width:26em; line-height:1.6; }
.colophon h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:#7f909d; margin-bottom:12px; font-weight:700; }
.colophon ul{ list-style:none; }
.colophon li{ margin-bottom:9px; }
.colophon a{ color:#e7edf1; text-decoration:none; font-size:.9rem; }
.colophon a:hover{ color:#fff; text-decoration:underline; }
.colophon .fine{ border-top:1px solid #2c405a; margin-top:34px; padding-top:20px; font-size:.78rem; color:#8fa0ac; line-height:1.6; }
.colophon .fine a{ color:#c8d3dc; }

/* ---- Utilities ---- */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:14px; } .mt-2{ margin-top:24px; } .mt-3{ margin-top:36px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

/* ---- Desktop layouts ---- */
@media (min-width:820px){
  .hero{ padding:52px 0 8px; }
  .spread{ grid-template-columns:1.06fr .94fr; gap:0; align-items:stretch; }
  .feature{ padding-right:54px; }
  .feature-foot{ margin-top:auto; }
  .aside{ border-left:1px solid var(--hairline); padding-left:54px; }
  section.band{ padding:68px 0; }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr 1fr 1fr; }
  .steps{ grid-template-columns:repeat(4, 1fr); }
}
@media (min-width:820px) and (max-width:1040px){
  .steps{ grid-template-columns:1fr 1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ecg.draw path{ animation:none; stroke-dashoffset:0; }
}

/* ============================================================
   Design-upgrade addendum (story-rail, reveal, nav, hover lift)
   Appended — existing rules above are unchanged.
   ============================================================ */

/* ---- Visually-hidden utility (a11y live region) ---- */
.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; }

/* ---- Scroll-reveal ---- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Nav scrolled state ---- */
.site-nav{ transition:box-shadow .2s ease; }
.site-nav.scrolled{ box-shadow:0 1px 12px rgba(26,46,68,.08); }

/* ---- Hover lift: cards + article links (pointer devices only — touch taps fire a sticky false hover) ---- */
.cell{ transition:transform .15s ease, box-shadow .15s ease; }
.hub .article{ transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine){
  .cell:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(26,46,68,.07); position:relative; z-index:1; }
  .hub .article:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,46,68,.08); }
}
@media (prefers-reduced-motion:reduce){
  .cell:hover, .hub .article:hover{ transform:none; }  /* keep shadow/border affordance, drop the lift */
}

/* ---- Story rail (carousel) ---- */
.storyrail-band{ padding-bottom:0; }
.storyrail{ position:relative; margin-top:6px; }
.storyrail-viewport{ overflow:hidden; }
.storyrail-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:16px;
  padding:4px 22px 22px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.storyrail-track::-webkit-scrollbar{ display:none; }
.storyrail-track:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; border-radius:4px; }

.story-slide{
  position:relative;
  flex:0 0 88%;
  scroll-snap-align:center;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  border-radius:4px;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--hairline);
}
.story-slide.is-navy{ background:var(--navy); border-color:var(--navy); }
.story-slide.is-teal{ background:var(--teal-dark); border-color:var(--teal-dark); }

.story-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.story-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(26,46,68,.32) 0%, rgba(26,46,68,.6) 45%, rgba(26,46,68,.88) 100%);
}

.story-content{ position:relative; z-index:2; padding:32px 28px 36px; max-width:34em; color:#fff; }
.story-slide.is-navy .story-content, .story-slide.is-teal .story-content{ color:#fff; }
.story-label{ font-family:var(--sans); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:#bfdbda; margin-bottom:14px; }
.story-key{ font-family:var(--serif); font-optical-sizing:auto; font-weight:600; font-size:clamp(1.5rem, 4vw, 2.2rem); line-height:1.16; letter-spacing:-.01em; color:#fff; margin-bottom:14px; }
.story-support{ font-family:var(--sans); font-size:1rem; line-height:1.55; color:#e5edf0; max-width:30em; }
.storyrail-cta{ display:inline-block; margin-top:22px; }

.storyrail-controls{ display:flex; align-items:center; justify-content:center; gap:18px; padding-top:8px; }
.storyrail-btn{
  width:40px; height:40px; border-radius:999px; border:1px solid var(--hairline); background:var(--card);
  color:var(--navy); font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.storyrail-btn:hover{ border-color:var(--teal); color:var(--teal-dark); background:#eef4f4; }
.storyrail-dots{ display:flex; gap:8px; }
.storyrail-dot{ width:9px; height:9px; border-radius:999px; border:1px solid var(--teal); background:transparent; padding:0; cursor:pointer; transition:background .15s ease, transform .15s ease; }
.storyrail-dot[aria-selected="true"]{ background:var(--teal); transform:scale(1.15); }

@media (min-width:820px){
  .story-slide{ flex:0 0 76%; min-height:440px; }
  .story-content{ padding:52px 60px 58px; }
}

@media (prefers-reduced-motion:reduce){
  .storyrail-track{ scroll-behavior:auto; }
}

/* ---- Photo banner (about.html hero image, reuses story-photo/story-overlay) ---- */
.photo-banner{ position:relative; margin-top:28px; min-height:220px; border-radius:4px; overflow:hidden; border:1px solid var(--hairline); }
@media (min-width:820px){
  .photo-banner{ min-height:340px; }
}

/* ---- Language toggle (nav) ---- */
.nav-lang{ font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--muted); text-decoration:none; letter-spacing:.04em; }
.nav-lang:hover{ color:var(--navy); }