:root { --red:#e1000f; --ink:#171310; --paper:#f7f5ef; --card:#fffefa; --line:#e4dfd3; --muted:#746d63; --radius:8px; }
* { box-sizing:border-box; } html { background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; }.shell { width:min(760px,calc(100% - 32px)); margin:auto; padding:20px 0 10px; }.topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 0 28px; }.brand img { display:block; width:158px; height:auto; }.top-note { padding-bottom:2px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; text-decoration:none; }.top-note:hover { color:var(--red); border-color:var(--red); }
.loading,.error { padding:32px 0; color:var(--muted); font-size:14px; text-align:center; }.error { color:#b70000; }.intro-block { padding:4px 0 24px; }.meta { display:flex; gap:9px; margin-bottom:12px; color:var(--red); font:800 14px 'Barlow Condensed',sans-serif; letter-spacing:.1em; text-transform:uppercase; }.meta-separator { color:var(--muted); }.intro-block h1 { margin:0; font:42px/.98 'Archivo Black',sans-serif; letter-spacing:-.045em; }.privacy { display:flex; gap:10px; margin-top:0; padding:15px 16px; color:var(--muted); background:#eeece5; border-radius:var(--radius); font-size:12px; line-height:1.55; }.privacy > span:first-child { color:var(--red); }.privacy b { color:var(--ink); }
.section { margin-top:36px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }.section-heading h2 { margin:0; font:27px/1 'Archivo Black',sans-serif; letter-spacing:-.04em; }.section-heading p { margin:0; color:var(--muted); font-size:12px; }.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.comparison-card,.progress-card,.measurement-list,.action { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }.comparison-card { padding:20px; }.card-label { margin-bottom:16px; color:var(--muted); font:800 13px 'Barlow Condensed',sans-serif; letter-spacing:.08em; text-transform:uppercase; }.comparison-values { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:9px; }.comparison-values span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; }.comparison-values strong { font:28px/1 'Archivo Black',sans-serif; letter-spacing:-.04em; }.comparison-arrow { padding-bottom:4px; color:var(--muted); }.difference { margin-top:17px; color:var(--red); font-size:12px; font-weight:700; }
.progress-card { padding:22px; }.chart-wrap { position:relative; height:230px; overflow:hidden; border-bottom:1px solid var(--line); }.chart { width:100%; height:100%; overflow:visible; }.chart-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }.chart-axis { stroke:var(--line); stroke-width:1; }.chart-line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.chart-label { fill:var(--muted); font:11px Inter,sans-serif; }.chart-empty { position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; }.chart-empty.is-visible { display:flex; }.chart-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:15px; }.legend-item { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }.legend-item i { width:8px; height:8px; border-radius:50%; }
.measurement-list { overflow:hidden; }.measurement-row { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; align-items:center; gap:8px; padding:15px 17px; border-bottom:1px solid var(--line); font-size:12px; }.measurement-row:last-child { border-bottom:0; }.measurement-row > span { color:var(--ink); font-weight:600; }.measurement-row strong { color:var(--muted); font:20px 'Barlow Condensed',sans-serif; }.measurement-row b { color:var(--red); font-size:11px; text-align:right; }
.actions { display:grid; gap:10px; }.action { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; text-decoration:none; transition:transform .18s ease,border-color .18s ease; }.action:hover { transform:translateY(-2px); border-color:var(--red); }.action-copy strong { display:block; margin-bottom:5px; font-size:14px; }.action-copy span { color:var(--muted); font-size:12px; }.action-arrow { color:var(--red); font-size:22px; }.next-note { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }.next-note strong { color:var(--ink); }footer { padding:34px 0 8px; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width:560px) { .shell { padding-top:16px; }.intro-block h1 { font-size:35px; }.comparison-grid { grid-template-columns:1fr; }.section-heading { align-items:start; flex-direction:column; gap:7px; }.measurement-row { grid-template-columns:1.25fr .9fr .9fr 1fr; padding:14px 12px; }.measurement-row strong { font-size:18px; }.top-note { font-size:11px; } }