.guide-layout { width:min(calc(100% - 40px),1180px); margin:auto; padding:40px 0 80px; }
.guide-nav { display:flex; gap:24px; align-items:center; font-size:15px; }
.guide-nav a, .guide-breadcrumb a, .guide-toc a { color:var(--cream-soft); text-underline-offset:5px; }
.guide-breadcrumb { display:flex; gap:12px; font-size:14px; margin:10px 0 36px; }
.guide-hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding-bottom:60px; }
.guide-intro h1 { font-size:clamp(36px,4.5vw,58px); line-height:1.12; letter-spacing:-.045em; margin:0 0 28px; overflow-wrap:anywhere; }
.guide-lead { font-size:21px; line-height:1.6; max-width:65ch; color:var(--cream-soft); }
.guide-intro p:not(.guide-lead), .calc-note { color:var(--cream-soft); font-size:14px; }
.guide-byline { margin:28px 0 12px; }
.calculator { padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:18px; scroll-margin-top:100px; }
.calculator h2 { font-size:22px; margin:0 0 22px; letter-spacing:-.025em; }
.calc-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.calc-field label { display:block; font-size:14px; line-height:1.4; margin-bottom:8px; color:var(--cream-soft); }
.calc-field input { width:100%; min-width:0; border:1px solid var(--muted); background:var(--ink); color:var(--cream); border-radius:8px; padding:11px 12px; font:inherit; font-variant-numeric:tabular-nums; }
.calc-field select { width:100%; min-width:0; max-width:100%; padding:12px; min-height:48px; border:1px solid var(--muted); border-radius:10px; background:var(--ink); color:var(--cream); font:inherit; font-size:16px; }
.calc-units:empty { display:none; }
.calc-field input { min-height:48px; font-size:16px; }
.calc-result div:first-child { padding-bottom:14px; border-bottom:1px solid var(--line); }
.calc-result div:first-child dd { color:var(--gold); font-size:27px; font-weight:600; }
.guide-app-example { padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calculator .button { cursor:pointer; font:inherit; padding:11px 22px; min-height:46px; border:0; background:var(--gold); color:var(--ink); }
.calc-result { margin:26px 0 22px; padding:4px 0 4px 18px; border-left:3px solid var(--gold); }
.calc-result div { display:grid; grid-template-columns:1fr 1fr; align-items:baseline; gap:16px; margin:9px 0; }
.calc-result dt { color:var(--cream-soft); font-size:14px; }
.calc-result dd { margin:0; font-size:22px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.calc-note { line-height:1.55; margin-bottom:0; }
.calc-error { padding:14px; border:1px solid var(--gold); color:var(--cream); }
.guide-body { display:grid; grid-template-columns:240px minmax(0,1fr); gap:70px; border-top:1px solid var(--line); }
.guide-toc { padding:38px 0; display:flex; flex-direction:column; gap:18px; align-self:start; position:sticky; top:80px; font-size:14px; }
.guide-copy { max-width:74ch; }
.guide-copy section { padding:32px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.guide-copy h2 { font-size:30px; letter-spacing:-.035em; line-height:1.25; margin:0 0 22px; }
.guide-copy p, .guide-copy li { color:var(--cream-soft); line-height:1.75; }
.guide-copy a, .guide-app a:not(.app-store-badge) { color:var(--gold); text-underline-offset:4px; }
.guide-copy summary { cursor:pointer; font-weight:600; padding:14px 0; }
.guide-copy details { border-bottom:1px solid var(--line); }
.guide-app { display:flex; align-items:start; gap:24px; padding:36px; margin-top:54px; border:1px solid var(--line); border-radius:18px; }
.guide-app>img { border-radius:14px; flex-shrink:0; }
.guide-app h2 { margin:0; font-size:26px; line-height:1.3; }
.guide-app p { max-width:70ch; color:var(--cream-soft); }
.hub-intro { max-width:820px; margin:32px 0 50px; }
.guide-directory { padding:0; list-style:none; }
.guide-directory li { border-top:1px solid var(--line); }
.guide-directory li:last-child { border-bottom:1px solid var(--line); }
.guide-directory a { display:block; padding:28px 0; text-decoration:none; }
.guide-directory h2 { font-size:28px; line-height:1.3; margin:0 0 10px; }
.guide-directory p { max-width:75ch; color:var(--cream-soft); margin:10px 0; }
.guide-directory span { color:var(--gold); text-decoration:underline; text-underline-offset:4px; }
@media(max-width:900px) { .guide-hero { gap:30px; } .calc-fields { grid-template-columns:1fr; gap:14px; } .guide-body { grid-template-columns:190px minmax(0,1fr); gap:30px; } }
@media(max-width:650px) { .guide-layout { width:calc(100% - 28px); padding-top:18px; } .guide-hero,.guide-body { grid-template-columns:1fr; gap:24px; } .guide-intro h1 { font-size:38px; } .guide-lead { font-size:19px; } .guide-nav { gap:12px; font-size:12px; } .guide-page .nav { width:calc(100% - 28px); gap:14px; } .guide-nav a:first-child { max-width:110px; } .calculator { padding:22px; } .calc-fields { grid-template-columns:1fr; } .guide-toc { position:static; padding:24px 0 0; } .guide-copy h2 { font-size:27px; } .guide-app { padding:24px; flex-direction:column; } .calc-result dd { font-size:20px; } .calc-result div { grid-template-columns:1fr 1fr; gap:8px; } }

@media(max-width:650px) { .guide-hero .guide-intro h1 { font-size:32px; margin-bottom:18px; } .guide-hero .guide-lead { font-size:17px; line-height:1.5; } .guide-hero .guide-byline { margin-top:18px; } .calc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; } .calc-units { grid-template-columns:1fr; } .calc-result div { grid-template-columns:1fr; gap:3px; margin:14px 0; } }
@media(max-width:359px) { .calc-fields { grid-template-columns:1fr; } }