:root{ --ink:#eef1f7; --ink-soft:#a7b0c2; --paper:#0a0c11; --paper-raised:#12151d; --paper-raised-2:#181c26; --copper:#3e7bfa; --copper-strong:#75a1ff; --copper-soft:rgba(62,123,250,.16); --slate:#7d8598; --line:#232734; --line-strong:#333a4a; --good:#3ddc9a; } /* Light palette — matches the main app's [data-theme="light"] tokens exactly. A tiny inline script in (see the article/hub template) reads the same 'certo_theme' localStorage key the main app writes, so switching themes on the main site carries over here too (same origin, shared storage) — without it these pages were stuck dark regardless of the visitor's actual preference or system setting. */ :root[data-theme="light"]{ --ink:#151822; --ink-soft:#4b5468; --paper:#f6f7fb; --paper-raised:#ffffff; --paper-raised-2:#eef1f7; --copper:#3159d1; --copper-strong:#1d47b8; --copper-soft:rgba(49,89,209,.10); --slate:#666f85; --line:#e3e6ee; --line-strong:#ccd1e0; --good:#1f9d6c; } *{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font-family:'Public Sans',-apple-system,BlinkMacSystemFont,sans-serif; line-height:1.65; } .wrap{max-width:780px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:1040px;margin:0 auto;padding:0 24px} a{color:var(--copper-strong);text-decoration:none} a:hover{text-decoration:underline} .topbar{border-bottom:1px solid var(--line);padding:20px 0} .topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .brand-word{display:block;height:22px;width:auto} .brand-word text{fill:var(--ink)} .brand-word tspan{fill:var(--copper)} .topbar nav{display:flex;gap:20px;align-items:center} .topbar nav a{color:var(--ink-soft);font-size:13.5px;font-weight:600} .topbar nav a:hover{color:var(--ink);text-decoration:none} .topbar .cta{background:var(--copper);color:#fff;padding:8px 16px;border-radius:8px;font-weight:700;font-size:13.5px} .topbar .cta:hover{background:var(--copper-strong);text-decoration:none} main{padding:48px 0 80px} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--copper-strong);margin:0 0 10px} h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,4vw,40px);margin:0 0 14px;line-height:1.15} .dek{color:var(--ink-soft);font-size:16.5px;margin:0 0 8px;max-width:640px} .byline{color:var(--slate);font-size:13px;margin:18px 0 40px} h2{font-family:'Public Sans',sans-serif;font-weight:800;font-size:20px;margin:38px 0 12px} h3{font-family:'Public Sans',sans-serif;font-weight:700;font-size:16px;margin:26px 0 8px;color:var(--ink)} p,li{color:var(--ink-soft);font-size:15.5px} ul,ol{padding-left:22px} li{margin-bottom:6px} strong{color:var(--ink)} .breadcrumbs{color:var(--slate);font-size:12.5px;margin:0 0 24px} .breadcrumbs a{color:var(--slate)} .notice{ background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:12px; padding:16px 20px;font-size:13.5px;color:var(--slate);margin:32px 0; } .notice strong{color:var(--ink-soft)} .quick-answer{ background:var(--copper-soft);border:1px solid var(--copper);border-radius:12px; padding:18px 22px;margin:22px 0 34px; } .quick-answer .eyebrow{margin-bottom:8px;color:var(--copper-strong)} .quick-answer p{margin:0;color:var(--ink);font-size:15.5px;font-weight:500} .cta-box{ background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:14px; padding:24px 26px;margin:40px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; } .cta-box h3{margin:0 0 4px;font-size:17px} .cta-box p{margin:0;font-size:14px} .cta-box .btn{ background:var(--copper);color:#fff;padding:11px 20px;border-radius:9px;font-weight:700;font-size:14px; white-space:nowrap;flex:0 0 auto; } .cta-box .btn:hover{background:var(--copper-strong);text-decoration:none} .cta-box-alt{background:transparent;border:1px dashed var(--line-strong)} .btn-alt{background:transparent;color:var(--copper-strong);border:1px solid var(--copper)} .btn-alt:hover{background:var(--copper-soft);text-decoration:none} .mid-cta{ background:var(--paper-raised-2);border-left:3px solid var(--copper);border-radius:0 8px 8px 0; padding:12px 16px;margin:22px 0;font-size:14px;color:var(--ink-soft); } .mid-cta a{font-weight:700} .faq-item{border-top:1px solid var(--line);padding:18px 0} .faq-item:first-child{border-top:0} .faq-item h3{margin:0 0 8px} .faq-item p{margin:0} .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px} .tag{background:var(--paper-raised-2);color:var(--ink-soft);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600} .related{background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:14px;padding:22px 24px;margin-top:44px} .related h3{margin-top:0} .related ul{margin:0;padding-left:20px} .related li{margin-bottom:8px} /* Hub page */ .hub-hero{padding:20px 0 12px} .category-block{margin-bottom:44px} .category-block h2{margin-top:0;font-size:19px;border-bottom:1px solid var(--line);padding-bottom:12px} .article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px} @media (max-width:640px){.article-grid{grid-template-columns:1fr}} .article-card{ display:block;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:12px; padding:18px 20px;color:var(--ink); } .article-card:hover{border-color:var(--copper);text-decoration:none} .article-card h3{margin:0 0 6px;font-size:15.5px;color:var(--ink)} .article-card p{margin:0;font-size:13.5px;color:var(--slate)} footer{border-top:1px solid var(--line);padding:24px 0;color:var(--slate);font-size:12.5px} footer .wrap-wide{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} footer a{color:var(--slate)}