
:root { --ink:#17202a; --mut:#6b7480; --line:#e4e7ec; --ok:#0a7d33; --warn:#a15c00; --bad:#b3261e;
        --acc:#0b6b5e; --bg:#ffffff; --soft:#f6f8fa; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       color:var(--ink); background:var(--bg); }
main { max-width: 880px; margin: 0 auto; padding: 24px 20px 60px; }
header.top { display:flex; gap:20px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); }
.wordmark { font-weight:700; text-decoration:none; color:var(--ink); letter-spacing:.2px; }
header.top nav { display:flex; gap:14px; }
header.top a { color:var(--ink); text-decoration:none; }
header.top nav a:hover { color:var(--acc); }
.preview-tag { margin-left:auto; font-size:12px; color:var(--mut); border:1px dashed var(--line);
               padding:2px 8px; border-radius:99px; }
h1 { font-size:28px; line-height:1.25; margin:18px 0 6px; }
.sub { color:var(--mut); margin-top:0; }
.btn { display:inline-block; background:var(--acc); color:#fff; padding:10px 16px; border-radius:8px;
       text-decoration:none; border:0; font-size:16px; cursor:pointer; }
table.chart { width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; }
.chart th, .chart td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.chart th { font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); }
.chip { display:inline-block; font-size:12px; padding:1px 8px; border-radius:99px; vertical-align:middle; }
.chip-free { background:#e7f4ea; color:var(--ok); }
.chip-paid { background:#fdeeee; color:var(--bad); }
.chip-ok { background:#e7f4ea; color:var(--ok); }
.chip-warn { background:#fff3e0; color:var(--warn); }
.chip-muted { background:var(--soft); color:var(--mut); }
.seg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:20px 0; }
.seg-card { border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--soft); }
.seg-card h3 { margin:0 0 8px; font-size:16px; }
.note { font-size:13.5px; color:var(--mut); margin:4px 0; }
.source { font-size:13px; margin:8px 0 0; }
.source a { color:var(--acc); }
.muted { color:var(--mut); }
details.faq { border-bottom:1px solid var(--line); padding:10px 0; }
details.faq summary { cursor:pointer; font-weight:600; }
details.faq p { color:#333; }
.capture { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px; margin:30px 0 10px; }
.capture h3 { margin-top:0; }
.capture-form { display:flex; gap:10px; flex-wrap:wrap; }
.capture-form input[type=email] { flex:1 1 240px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; }
.capture-form button { background:var(--ink); color:#fff; border:0; border-radius:8px; padding:10px 16px; cursor:pointer; }
.check-box { border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--soft); margin:18px 0; }
.check-box label { display:block; margin:10px 0 4px; font-weight:600; font-size:14px; }
.check-box select, .check-box input { padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:15px; width:100%; max-width:340px; }
.dims-inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; max-width:520px; }
.verdict { border-radius:12px; padding:16px 18px; margin:14px 0; border:1px solid var(--line); }
.verdict h3 { margin:0 0 6px; font-size:17px; }
.verdict p { margin:6px 0; }
.v-fit { background:#e7f4ea; border-color:#bfe3c8; }
.v-tight { background:#fff3e0; border-color:#f3ddb5; }
.v-no { background:#fdeeee; border-color:#f2c1be; }
.v-info { background:var(--soft); }
footer { border-top:1px solid var(--line); margin-top:40px; padding:18px 20px; font-size:13.5px; color:var(--mut); }
.guides { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:20px 0; }
.manual { border-top:1px dashed var(--line); margin-top:14px; padding-top:8px; }
.manual summary { cursor:pointer; font-weight:600; font-size:14px; color:var(--mut); }
