:root { color-scheme: light; --ink:#0e213b; --muted:#52667c; --line:#dbe4ec; --paper:#fff; --canvas:#f4f8fb; --blue:#087cbc; --blue-dark:#075d96; --orange:#ffb21a; --orange-dark:#e89200; }
* { box-sizing:border-box; } html { background:var(--canvas); } body { margin:0; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; } a { color:var(--blue-dark); text-underline-offset:.16em; } a:hover { color:var(--ink); } a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.skip-link { position:absolute; top:-4rem; left:1rem; z-index:10; padding:.6rem .9rem; background:#fff; } .skip-link:focus { top:1rem; }
.site-header { background:var(--ink); color:#fff; border-bottom:4px solid var(--orange); } .bar { width:min(1120px,calc(100% - 2rem)); min-height:74px; margin:0 auto; display:flex; gap:1.5rem; align-items:center; justify-content:space-between; } .brand { color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; } .mark { width:28px; height:28px; position:relative; display:grid; place-items:center; overflow:hidden; border:2px solid #fff; color:#fff; font-size:.65rem; letter-spacing:-.07em; } .mark::before { content:""; position:absolute; width:42px; height:10px; background:var(--orange); transform:rotate(-45deg); } .mark span { position:relative; z-index:1; text-shadow:0 1px 2px #000; } nav { display:flex; flex-wrap:wrap; gap:1rem; font-size:.92rem; } nav a { color:#fff; text-decoration:none; } nav a[aria-current="page"],nav a:hover { color:var(--orange); }
main { width:min(1120px,calc(100% - 2rem)); margin:0 auto; } .hero { padding:6.5rem 0 4.25rem; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:3rem; align-items:center; } .eyebrow { margin:0 0 .8rem; color:var(--blue-dark); font-weight:800; font-size:.79rem; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3 { color:var(--ink); line-height:1.1; letter-spacing:-.035em; } h1 { max-width:780px; margin:0; font-size:clamp(2.4rem,7vw,4.8rem); } h2 { margin:0 0 1rem; font-size:clamp(1.55rem,3vw,2.35rem); } h3 { margin:0 0 .35rem; font-size:1.05rem; } .lede { max-width:680px; color:var(--muted); font-size:clamp(1.1rem,2vw,1.32rem); } .button { display:inline-block; margin-top:.5rem; padding:.76rem 1.05rem; border-radius:.35rem; background:var(--blue); color:#fff; font-weight:750; text-decoration:none; box-shadow:0 4px 0 var(--blue-dark); } .button:hover { color:#fff; background:var(--blue-dark); transform:translateY(1px); box-shadow:0 3px 0 #044b79; }
.capture-card { padding:1.3rem; background:var(--paper); border:1px solid var(--line); box-shadow:0 20px 45px rgba(14,33,59,.12); } .capture-bar { padding:.55rem .75rem; background:var(--ink); color:#fff; font-size:.84rem; border-radius:.18rem .18rem 0 0; } .capture-body { padding:1.1rem; border:1px solid var(--line); border-top:0; background:linear-gradient(135deg,#f9fcff 0%,#edf5fa 100%); } .capture-tools { display:flex; flex-wrap:wrap; gap:.45rem; } .tool { padding:.4rem .55rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:.2rem; font-size:.75rem; font-weight:700; } .tool.accent { color:#562b9e; background:#f0e9ff; border-color:#d5c5fa; } .tool.gold { background:#fff2cb; border-color:#f5d275; } .capture-line { height:9px; margin-top:.95rem; border-radius:99px; background:#cbd9e5; } .capture-line.short { width:62%; } .capture-footer { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; font-size:.76rem; color:var(--muted); } .capture-button { padding:.45rem .65rem; background:var(--orange); border-radius:.2rem; color:var(--ink); font-weight:800; }
.section { padding:4.75rem 0; border-top:1px solid var(--line); } .section-inner { max-width:780px; } .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.8rem; } .feature { padding:1.25rem; background:#fff; border:1px solid var(--line); border-top:4px solid var(--blue); } .feature:nth-child(2) { border-top-color:var(--orange-dark); } .feature:nth-child(3) { border-top-color:#7254d6; } .feature p,.notice p { margin:0; color:var(--muted); font-size:.94rem; } .notice { margin-top:1.5rem; padding:1rem 1.1rem; border-left:4px solid var(--orange); background:#fff7e6; }
.article { max-width:800px; padding:4.5rem 0 5rem; } .article h1 { font-size:clamp(2.2rem,5vw,3.6rem); } .article h2 { margin-top:2.7rem; font-size:1.45rem; } .article p,.article li { color:#35495e; } .article li+li { margin-top:.55rem; } .article .effective { color:var(--muted); font-size:.92rem; } .article .callout { margin:1.7rem 0; padding:1.15rem; border:1px solid #b9d4e7; background:#edf8ff; } .site-footer { padding:2rem 0; background:var(--ink); color:#dbe7f0; } .site-footer .bar { min-height:auto; align-items:flex-start; } .site-footer p { margin:0; font-size:.85rem; } .site-footer a { color:#fff; }
@media (max-width:700px) { .bar { min-height:64px; gap:.8rem; } nav { gap:.65rem; } .hero { grid-template-columns:1fr; padding:3.6rem 0; gap:2rem; } .grid { grid-template-columns:1fr; } .section,.article { padding:3.2rem 0; } }