:root{
  --bg:#F7F7F7; --card:#FFFFFF; --ink:#0C0D0E;
  --body:rgba(12,13,14,.8); --muted:rgba(12,13,14,.66); --faint:rgba(12,13,14,.5); --hair:rgba(12,13,14,.09);
  --accent:#FF5A1F; --accent-text:#C9410B;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --num:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --lift:0 0 0 1px rgba(12,13,14,.1);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.7;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent-text)}
a:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

.nav{position:sticky; top:0; z-index:50; background:rgba(247,247,247,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--hair)}
.nav-in{max-width:1080px; height:64px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav-logo img{height:26px; width:auto; display:block; mix-blend-mode:multiply}
.nav-links{display:flex; align-items:center; gap:22px; font-size:15px}
.nav-links a{color:var(--muted); text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:999px; background:var(--ink); color:#fff!important;
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap}
.nav-cta:hover{background:#26282B}
@media (max-width:560px){.nav-links .hide-sm{display:none}}

main{max-width:720px; margin:0 auto; padding:56px 24px 40px}
.crumbs{font-size:14px; color:var(--faint); margin-bottom:22px}
.crumbs a{color:var(--faint); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.kicker{font-family:var(--num); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-text); margin:0 0 14px}
h1,h2,h3{font-weight:700; letter-spacing:-.03em; line-height:1.12; text-wrap:balance; margin:0}
h1{font-size:clamp(34px,5vw,52px); margin-bottom:18px}
h2{font-size:clamp(24px,3vw,32px); margin:52px 0 14px}
h3{font-size:21px; margin:32px 0 8px}
p{margin:0 0 18px; color:var(--body)}
.lede{font-size:clamp(19px,2vw,22px); line-height:1.55; color:var(--muted); margin-bottom:10px}
.meta{font-size:14px; color:var(--faint); margin:0 0 34px}
ul,ol{padding-left:22px; margin:0 0 20px; color:var(--body)}
li{margin:0 0 8px}
strong{color:var(--ink); font-weight:600}
hr{border:0; height:1px; background:var(--hair); margin:48px 0}

.box{background:var(--card); border-radius:16px; box-shadow:var(--lift); padding:26px 28px; margin:30px 0}
.box p:last-child{margin-bottom:0}
.tbl{overflow-x:auto; margin:24px 0 28px; background:var(--card); border-radius:14px; box-shadow:var(--lift)}
table{width:100%; border-collapse:collapse; font-size:16px; min-width:520px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--hair); vertical-align:top}
th{font-size:13px; font-family:var(--num); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:400}
tr:last-child td{border-bottom:0}

.cta{background:var(--ink); color:#fff; border-radius:20px; padding:36px 32px; margin:56px 0 16px; text-align:center}
.cta h2{color:#fff; margin:0 0 10px}
.cta p{color:rgba(255,255,255,.72); margin:0 auto 22px; max-width:46ch}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:58px; padding:0 40px; border-radius:12px;
  background:var(--accent); color:#fff; font-size:16px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:3px solid #fff; outline-offset:4px}

.cards{display:grid; gap:14px; margin:30px 0}
.card{display:block; background:var(--card); border-radius:16px; box-shadow:var(--lift); padding:24px 26px; text-decoration:none; color:var(--ink);
  transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.card h2{font-size:22px; margin:0 0 8px}
.card p{margin:0; font-size:16px; color:var(--muted)}

.related{margin-top:40px}
.related h2{font-size:20px; margin:0 0 12px}

footer{max-width:1080px; margin:0 auto; padding:34px 24px 50px; border-top:1px solid var(--hair); font-size:14px; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between}
footer a{color:var(--faint); text-decoration:none}
footer a:hover{color:var(--ink)}