.story-page { background:#f8f7f5; font-weight:400; }
.story-page * { letter-spacing:0; }
.story-page :is(p,li) { font-size:16px; }
.story-page :is(input,select,textarea) { font-weight:400; font-size:16px; }
.story-page :is(button,.seo-button,.seo-header-cta,.seo-nav,.seo-form label) { font-weight:500; }
.story-page :is(.seo-button,.seo-header-cta,.seo-form) { border-radius:8px; }
.story-page section[id] { scroll-margin-top:96px; }
.story-page h1 { margin:20px 0; font-size:46px; line-height:1.15; max-width:950px; }
.story-page h2 { margin:0 0 20px; font-size:34px; line-height:1.2; }
.story-page h3 { font-size:21px; line-height:1.35; margin:0 0 12px; }
.story-page p { color:var(--muted); margin:0 0 18px; }
.story-page a:focus-visible,.story-page button:focus-visible,.story-page summary:focus-visible { outline:3px solid #477b7e; outline-offset:5px; }
.story-intro { padding:52px 0 44px; }
.story-intro > p { max-width:760px; }
.story-kicker { display:block; color:#895365; font-size:12px; font-weight:600; margin-bottom:16px; }
.story-section { padding:64px 0; border-top:1px solid var(--line); }
.story-section.tint { background:#eaf0f1; }
.story-section.lilac { background:#efedf3; }
.story-section .seo-shell > p { max-width:800px; }
.story-screen { margin:32px 0 0; }
.story-screen img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:6px; }
.story-screen figcaption { margin-top:12px; color:var(--muted); font-size:14px; }
.story-screen.compact { max-width:880px; margin-inline:auto; }
.story-screen.phone { max-width:310px; margin:0 auto; }
.story-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; align-items: center; }
.story-columns > * { min-width:0; }
.story-columns.thirds { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; align-items: start; }
.story-columns article { border-top:2px solid #95b4b5; padding-top:24px; }
.story-columns article p:last-child { margin-bottom:0; }
.story-list { margin:24px 0 0; padding:0; list-style:none; }
.story-list li { border-top:1px solid var(--line); padding:18px 0; }
.story-list strong { display:block; margin-bottom:6px; }
.story-list span { color:var(--muted); }
.story-note { border-left:3px solid #a65369; padding:8px 0 8px 22px; margin:24px 0; color:var(--muted); }
.story-note a,.story-source a,.story-section p a { text-decoration:underline; text-underline-offset:3px; }
.story-source { font-size:14px; color:var(--muted); margin-top:20px; }
.story-table-wrap { overflow-x:auto; border:1px solid var(--line); background:#fff; }
.story-table { width:100%; border-collapse:collapse; text-align:left; }
.story-table caption { text-align:left; padding:20px; font-size:20px; font-weight:600; }
.story-table th,.story-table td { padding:20px; border-top:1px solid var(--line); vertical-align:top; font-size:16px; }
.story-table thead th { background:#edf1f5; }
.story-table th:first-child { width:24%; }
.story-table td { width:38%; color:#596273; }
.story-table tbody th { font-weight:500; }
.story-timeline { counter-reset:story-step; padding:0; list-style:none; }
.story-timeline li { counter-increment:story-step; display:grid; grid-template-columns:44px 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.story-timeline li::before { content:counter(story-step,decimal-leading-zero); color:#895365; font-size:22px; }
.story-timeline h3 { margin-bottom:8px; }
.story-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.story-tabs button { min-height:46px; border:1px solid var(--line); padding:10px 16px; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; }
.story-tabs button[aria-selected=true] { background:#e2ecec; border-color:#6f999b; }
.story-tabs button:hover { background:#edf1f4; }
.story-panel[hidden] { display:none; }
.story-panel { animation:story-enter .25s ease both; }
.story-panel .story-columns { align-items:center; }
.story-panel img { width:100%; height:auto; display:block; }
.story-terms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:32px 0; border-block:1px solid var(--line); }
.story-terms div { padding:24px; border-right:1px solid var(--line); }
.story-terms div:first-child { padding-left:0; }
.story-terms div:last-child { border:0; }
.story-terms dt { font-size:34px; font-weight:600; }
.story-terms dd { margin:6px 0 0; color:var(--muted); }
.story-calculator { padding:28px; border:1px solid var(--line); background:#fff; border-radius:8px; display:grid; gap:16px; }
.story-calculator label { display:grid; gap:8px; }
.story-calculator input { width:100%; height:48px; padding:10px; border:1px solid var(--line); border-radius:6px; }
.story-calculator output { font-size:34px; font-weight:600; color:#477b7e; }
.story-page .seo-lead { background:#e8edf4; color:var(--ink); }
.story-page .seo-lead-copy p,.story-page .seo-lead-copy ul { color:var(--muted); }
.story-page .seo-lead-copy li::before { color:#477b7e; }
.story-page .seo-form-consent { font-size:12px!important; font-weight:400!important; }
.story-page .seo-faq h2,.story-page .seo-lead h2 { font-size:34px; }
.story-page .seo-faq summary { font-weight:500; }
.story-page .seo-nav { font-size:14px; }
.story-page .seo-header-inner { gap:20px; }
.story-page .seo-nav { gap:18px; }
.story-day { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:30px; }
.story-day article { padding:22px 0; border-block:1px solid var(--line); }
.story-day time { color:#895365; display:block; margin-bottom:18px; font-size:24px; }
.story-jump { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; }
.story-jump a { text-decoration:underline; text-underline-offset:5px; }
@keyframes story-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(max-width:900px) {
 .story-page h1 { font-size:38px; }
 .story-columns.thirds,.story-day { grid-template-columns:1fr; gap:24px; }
 .story-page .seo-lead-grid { gap:32px; }
}
@media(max-width:600px) {
 .story-page h1 { font-size:32px; }
 .story-page h2,.story-page .seo-faq h2,.story-page .seo-lead h2 { font-size:28px; }
 .story-intro { padding:32px 0; }
 .story-section { padding:44px 0; }
 .story-columns { grid-template-columns:1fr; gap:28px; }
 .story-terms { grid-template-columns:1fr; }
 .story-terms div,.story-terms div:first-child { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }
 .story-table caption { padding:14px; }
 .story-table th,.story-table td { padding:12px 8px; font-size:13px; overflow-wrap:anywhere; }
 .story-table th:first-child { width:25%; }
 .story-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .story-table tbody,.story-table tr { display:block; }
 .story-table tr { display:grid; grid-template-columns:1fr 1fr; }
 .story-table tbody th:first-child { grid-column:1 / -1; width:auto; background:#edf1f5; }
 .story-table td { width:auto; font-size:14px; }
 .story-table td::before { content:attr(data-label); display:block; font-weight:600; color:var(--ink); margin-bottom:8px; }
 .story-page .seo-header-cta { font-size:12px; }
 .story-page .seo-header-inner { gap:10px; }
 .story-screen { margin-top:24px; }
 .story-tabs { display:grid; grid-template-columns:1fr; }
 .story-page .seo-faq { gap:24px; }
}
@media(prefers-reduced-motion:reduce) { .story-panel { animation:none; } }
