/* styles.css — 62vs70.com full stylesheet (authoritative). * The above-the-fold subset (:root, base, .site-header*, .hero*) is * mirrored inline in index.html's for LCP — keep both in sync * (see docs/build.md). Calm institutional look: paper background, * Source Serif 4 headlines, deep green accent, card-based results. */ :root{ --accent:#1f5c4d;--accent-deep:#16443a;--accent-soft:#e7efe9;--accent-tint:#f1f6f2; --line-62:#b06a3c;--line-70:var(--accent);--line-fra:#8a8578; --paper:#faf8f4;--paper-2:#f3f0e9;--card:#fff; --ink:#21201c;--ink-2:#4b4942;--ink-3:#75726a; --line:#e4e0d6;--line-2:#d4cfc2;--warn:#9a6a16; --serif:"Source Serif 4",Georgia,serif; --sans:"Libre Franklin",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --radius:12px;--radius-sm:8px; --shadow-sm:0 1px 2px rgba(33,32,28,.05),0 1px 3px rgba(33,32,28,.04); --shadow:0 4px 16px rgba(33,32,28,.06),0 1px 3px rgba(33,32,28,.05); --maxw:1180px; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:"tnum" 1,"lnum" 1} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------- Header ---------- */ .site-header{border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:saturate(1.1) blur(8px);position:sticky;top:0;z-index:40} .site-header__inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px} .brand{display:flex;align-items:center;gap:11px} .brand__mark{width:38px;height:38px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);flex:none} .brand__mark span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.02;font-size:11px} .brand__mark span svg{margin:0} .brand__name{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em} .brand__name .tld{color:var(--ink-3);font-weight:500} .site-nav{margin-left:auto;display:flex;gap:26px;align-items:center} .site-nav a{color:var(--ink-2);font-size:14.5px;font-weight:500} .site-nav .nav-flag{font-size:12.5px;color:var(--ink-3);font-weight:500} /* ---------- Hero ---------- */ .hero{padding:56px 0 36px} .hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:52px;align-items:center} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:9px;margin-bottom:18px} .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block} .hero h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:18px} .hero h1 em{font-style:normal;color:var(--accent)} .hero__sub{font-size:19px;color:var(--ink-2);max-width:34ch;margin-bottom:26px;text-wrap:pretty} .hero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13.5px;color:var(--ink-3);padding-top:20px;border-top:1px solid var(--line)} .hero__meta b{color:var(--ink-2);font-weight:600} .hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)} .hero__art{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 20px 16px} .hero__art-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .hero__art-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .hero__art-note{font-size:12px;color:var(--ink-3)} /* ---------- Main layout (calculator + sidebar) ---------- */ .layout{max-width:var(--maxw);margin:0 auto;padding:8px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start} .col-main{min-width:0;display:flex;flex-direction:column;gap:24px} .col-side{position:sticky;top:88px} /* ---------- Calculator ---------- */ .calc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden} .calc__bar{height:4px;background:linear-gradient(90deg,var(--line-62),var(--accent))} .calc__body{padding:26px 28px 30px} .calc__title{display:flex;align-items:center;gap:12px} .calc__title h2{font-size:25px} .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:3px 9px;font-weight:600} .calc__hint{color:var(--ink-3);font-size:14px;margin:6px 0 22px} .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field.span-2{grid-column:1 / -1} .field label{font-size:14px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px} .field label .opt{font-weight:500;font-size:12px;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em} .help{font-size:12.5px;color:var(--ink-3);line-height:1.5} .help a{font-weight:600} .control{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 13px;transition:border-color .12s,box-shadow .12s} .control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} select.control{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px} .input-money{position:relative} .input-money::before{content:"$";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:16px;pointer-events:none} .input-money .control{padding-left:24px} .segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:3px;gap:3px} .segmented button{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink-2);background:transparent;border:0;border-radius:6px;padding:9px 8px;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s} .segmented button[aria-pressed="true"]{background:var(--card);color:var(--accent);font-weight:600;box-shadow:var(--shadow-sm)} .subform{grid-column:1 / -1;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px 20px;margin-top:4px} .subform-head{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:14px} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 14px} .tr-label{font-size:14px;color:var(--ink-2)} .switch{position:relative;display:inline-block;width:42px;height:24px;flex:none} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{position:absolute;inset:0;background:var(--line-2);border-radius:24px;transition:background .15s;cursor:pointer} .switch .track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .15s} .switch input:checked + .track{background:var(--accent)} .switch input:checked + .track::before{transform:translateX(18px)} .switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--accent-soft)} .pia-estimator{margin-top:10px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);padding:0 14px} .pia-estimator summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent);padding:11px 0;list-style:none} .pia-estimator summary::-webkit-details-marker{display:none} .pia-estimator[open]{padding-bottom:14px} .est-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .est-out{grid-column:1 / -1;background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .btn{font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;transition:background .12s} .btn:hover{background:var(--accent-deep)} .btn-ghost{background:transparent;color:var(--accent)} .btn-ghost:hover{background:var(--accent-soft)} /* ---------- Results ---------- */ .results{display:flex;flex-direction:column;gap:22px} .result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px 26px} .result-card>h3{font-size:20px;margin-bottom:4px} .result-card .rc-sub{color:var(--ink-3);font-size:14px;margin:0 0 18px;max-width:62ch} .disclaimer-inline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.5} .disclaimer-inline svg{flex:none;margin-top:2px;color:var(--ink-3)} .result-card.breakeven{padding:0;overflow:hidden} .breakeven__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 26px 8px;flex-wrap:wrap} .breakeven__verdict .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .breakeven__verdict .big{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.05;margin:4px 0 8px} .breakeven__verdict .big em{font-style:normal;color:var(--accent)} .breakeven__verdict .cap{font-size:14.5px;color:var(--ink-2);max-width:46ch} .legend{display:flex;flex-direction:column;gap:7px} .legend .li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap} .legend .swatch{width:18px;height:4px;border-radius:2px;flex:none} .chart-host{padding:6px 22px 12px} .scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .scn{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 16px;background:var(--paper)} .scn.is-best{border-color:var(--accent);background:var(--accent-tint);box-shadow:0 0 0 1px var(--accent)} .scn__best-flag{position:absolute;top:-10px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--accent);border-radius:20px;padding:3px 9px} .scn__age{display:flex;align-items:baseline;gap:6px} .scn__age .n{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--ink);line-height:1} .scn.is-best .scn__age .n{color:var(--accent)} .scn__age .u{font-size:12.5px;color:var(--ink-3)} .scn__tag{font-size:12.5px;color:var(--ink-3);margin:3px 0 14px;font-weight:500} .scn__row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:5px 0;border-top:1px solid var(--line)} .scn__row .k{color:var(--ink-3)} .scn__row .v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .callout{background:var(--accent-tint);border:1px solid var(--accent-soft);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:13px 16px;font-size:14.5px;color:var(--ink-2);line-height:1.55} .callout b{color:var(--ink)} .grid2x2{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px} .g-cell{border-radius:var(--radius-sm);padding:14px 14px;display:flex;flex-direction:column;justify-content:center} .g-corner{background:transparent} .g-head,.g-rowhead{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--paper-2);align-items:center} .g-head{text-align:center} .g-val{background:var(--paper);border:1px solid var(--line);text-align:center;align-items:center} .g-val .amt{font-family:var(--serif);font-size:21px;font-weight:600;font-variant-numeric:tabular-nums} .g-val .sub{font-size:11px;color:var(--ink-3);margin-top:2px;text-transform:uppercase;letter-spacing:.05em} .g-val.is-best{border-color:var(--accent);background:var(--accent-tint)} .g-val.is-best .amt{color:var(--accent)} .g-val.is-worst{border-color:var(--line-2)} .g-val.is-worst .amt{color:var(--ink-3)} .grid-takeaway{margin-top:14px;font-size:14.5px;color:var(--ink-2)} .survivor__rows{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .sv{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)} .sv.is-best{border-color:var(--accent);background:var(--accent-tint)} .sv .age{font-size:14px;color:var(--ink-2)} .sv .amt{font-family:var(--serif);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums} .sv.is-best .amt{color:var(--accent)} .taxbar{height:14px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line-2);overflow:hidden;margin:8px 0 6px} .taxbar .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:8px;transition:width .25s} .tax-legend{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)} .sensitivity{display:flex;flex-direction:column;gap:16px} .slider-row{display:flex;align-items:center;gap:18px} .sv-age{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--accent);flex:none;min-width:120px} .sv-age small{font-family:var(--sans);font-size:13px;color:var(--ink-3);font-weight:500} .sensitivity input[type=range]{flex:1;accent-color:var(--accent);height:6px} /* ---------- Explainer ---------- */ .section{padding:30px 0 6px} .prose{max-width:760px} .section-head{margin-bottom:14px} .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:8px} .prose h2{font-size:30px;margin-bottom:6px} .prose h3{font-size:20px;margin:26px 0 8px} .prose p{color:var(--ink-2);margin:0 0 14px} .prose .lead{font-size:19px;color:var(--ink);margin-bottom:18px} .prose strong{color:var(--ink);font-weight:600} .fra-table{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:15px} .fra-table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:8px 12px;border-bottom:1.5px solid var(--line-2)} .fra-table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)} .fra-table tr.is-you td{background:var(--accent-tint);color:var(--ink);font-weight:600} .fra-table tr.is-you td:first-child{border-left:3px solid var(--accent)} .faq{max-width:820px;margin:0 auto} .faq__item{border-bottom:1px solid var(--line)} .faq__q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);padding:18px 36px 18px 0;position:relative} .faq__q::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-65%) rotate(45deg);transition:transform .18s} .faq__item.open .faq__q::after{transform:translateY(-35%) rotate(-135deg)} .faq__a{overflow:hidden;max-height:0;transition:max-height .22s ease} .faq__a-inner{padding:0 0 18px} .faq__a-inner p{color:var(--ink-2);font-size:15.5px;margin:0 0 10px} .faq__a-inner p:last-child{margin-bottom:0} a.ext::after{content:"↗";font-size:.8em;margin-left:3px;color:var(--ink-3)} /* ---------- Ad slots ---------- */ .ad-slot{margin:8px auto;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px} .ad-slot-label{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .ad-slot:has(ins[data-ad-status="filled"]) .ad-slot-label{display:block} .ad-slot ins[data-ad-status="unfilled"]{display:none} .ad-slot--top-banner{min-height:90px} .ad-slot--pre-result{min-height:250px} .ad-slot--mid-content{min-height:90px} .ad-slot--sidebar{min-height:600px} .ad-note{display:none} .mobile-sticky{display:none} .ms-close{display:none} /* ---------- Footer ---------- */ .site-footer{margin-top:48px;border-top:1px solid var(--line);background:var(--paper-2);padding:44px 0 28px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px} .footer-brand p{color:var(--ink-3);font-size:14px;margin:14px 0 0;max-width:36ch;line-height:1.55} .footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:14px} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .footer-col a{color:var(--ink-2);font-size:14.5px} .footer-col a:hover{color:var(--accent)} .footer-divider{border:0;border-top:1px solid var(--line);margin:32px 0 20px} .footer-legal p{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:0;max-width:none} .footer-legal b{color:var(--ink-2)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap} .footer-bottom .copy{font-size:12.5px;color:var(--ink-3)} .privacy-link{background:transparent;border:0;color:var(--ink-2);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;padding:0} .privacy-link:hover{color:var(--accent);text-decoration:underline} /* ---------- Privacy modal ---------- */ .modal-scrim{position:fixed;inset:0;background:rgba(33,32,28,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;opacity:0;pointer-events:none;transition:opacity .16s} .modal-scrim.open{opacity:1;pointer-events:auto} .modal{background:var(--card);border-radius:var(--radius);box-shadow:0 24px 64px rgba(33,32,28,.28);width:min(620px,100%);max-height:86vh;display:flex;flex-direction:column;transform:translateY(8px);transition:transform .16s} .modal-scrim.open .modal{transform:none} .modal__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)} .modal__head h3{font-size:19px} .modal__close{background:transparent;border:0;font-size:24px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px} .modal__close:hover{color:var(--ink)} .modal__body{padding:20px 24px;overflow-y:auto} .modal__body h4{font-size:15px;margin:18px 0 6px} .modal__body p,.modal__body li{font-size:14px;color:var(--ink-2);line-height:1.55} .modal__body p{margin:0 0 10px} .modal__body .short{background:var(--accent-tint);border-radius:var(--radius-sm);padding:13px 16px;color:var(--ink-2)} .modal__body ul{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px} .modal__foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end} #root-loading{max-width:var(--maxw);margin:0 auto;padding:80px 24px;color:var(--ink-3);font-family:var(--mono);font-size:13px} /* ---------- 404 page ---------- */ .notfound{max-width:520px;margin:14vh auto;padding:0 24px;text-align:center} .notfound .eyebrow{justify-content:center} .notfound h1{font-size:38px;margin-bottom:12px} .notfound p{color:var(--ink-2);margin-bottom:18px} /* ---------- Responsive ---------- */ @media(max-width:980px){ .layout{grid-template-columns:1fr} .col-side{display:none} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} } @media(max-width:860px){ .hero{padding:36px 0 24px} .hero__grid{grid-template-columns:1fr;gap:30px} .hero__sub{max-width:none} } @media(max-width:680px){ .field-grid{grid-template-columns:1fr} .est-grid{grid-template-columns:1fr 1fr} .scenarios{grid-template-columns:1fr} .grid2x2{grid-template-columns:1fr;gap:6px} .g-head,.g-corner{display:none} .g-val{flex-direction:row;justify-content:space-between;text-align:left} .calc__body{padding:22px 18px 24px} .result-card{padding:20px 18px} .breakeven__head{padding:20px 18px 6px} .chart-host{padding:6px 12px 12px} .footer-grid{grid-template-columns:1fr} .slider-row{flex-direction:column;align-items:stretch;gap:10px} } @media(max-width:720px){ .site-nav{gap:16px} .site-nav a,.site-nav .nav-flag{display:none} } /* ---------- Mobile sticky ad ---------- */ @media(max-width:980px){ body.has-sticky{padding-bottom:64px} .mobile-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line-2);box-shadow:0 -2px 12px rgba(33,32,28,.08);align-items:center;justify-content:center;min-height:56px;padding:4px 0} .mobile-sticky .ms-inner{display:flex;flex-direction:column;align-items:center} .mobile-sticky .ms-close{display:flex;position:absolute;top:-12px;right:8px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font-size:16px;line-height:1;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)} } @media print{ .site-header,.site-nav,.ad-slot,.mobile-sticky,.col-side,.site-footer .footer-col,.privacy-link{display:none!important} body{background:#fff} .result-card,.calc{box-shadow:none;border-color:#ccc;break-inside:avoid} }