:root { --paper:#f7f5ef; --panel:#fff; --ink:#16243a; --muted:#566274; --line:#dfdbcf; --accent:#1c5a8a; --accent-ink:#fff;
  --navy:#17304f; --navy-2:#1f3d63; --gold:#f3c969; --soft:#eef1f3;
  --red:#a8281f; --red-bg:#fbe9e6; --amber:#80530a; --amber-bg:#fcf1d8; --green:#1b6a3c; --green-bg:#e4f3e8; --grey:#566274; --grey-bg:#edeff1;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
@media (prefers-color-scheme: dark) { :root { --paper:#10161f; --panel:#18212d; --ink:#e8ecf1; --muted:#a2aebc; --line:#2b3644; --accent:#7db8e4; --accent-ink:#0d1520;
  --soft:#202b38; --red:#ff9c92; --red-bg:#3c1f1d; --amber:#f0c674; --amber-bg:#35291295; --green:#84d6a2; --green-bg:#17301f; --grey:#a2aebc; --grey-bg:#262f3b; } }
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--sans); }
a { color:var(--accent) }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:3px }
h1, h2, h3 { font-family:var(--serif); line-height:1.2; font-weight:700; letter-spacing:-.005em }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px }
.skip { position:absolute; left:-999px } .skip:focus { left:12px; top:12px; background:var(--panel); padding:8px 12px; z-index:5 }

.top { background:var(--panel); border-bottom:1px solid var(--line) }
.top .wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px }
.brand { display:inline-flex; align-items:center; gap:9px; font:700 19px var(--serif); color:var(--ink); text-decoration:none; margin-right:auto }
.mark { width:30px; height:30px; flex:none }
.top nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:15px }
.top nav a { color:var(--ink); text-decoration:none } .top nav a:hover { color:var(--accent); text-decoration:underline }
.top nav a[aria-current=page] { font-weight:700 }
.btn { display:inline-block; font:600 16px var(--sans); padding:11px 20px; border-radius:7px; text-decoration:none; border:1px solid transparent; cursor:pointer; text-align:center }
.btn.primary { background:var(--gold); color:#17243a } .btn.primary:hover { background:#f7d683 }
.btn.solid { background:var(--accent); color:var(--accent-ink) } .btn.solid:hover { filter:brightness(1.1) }
.btn.ghost { border-color:currentColor; color:inherit; background:transparent }
.top nav a.btn { padding:7px 14px; font-size:15px; background:var(--accent); color:var(--accent-ink); text-decoration:none }

.hero { background:var(--navy); color:#f4f6f9; padding:64px 0 72px }
.hero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center }
.hero h1 { font-size:clamp(34px,5vw,52px); margin:0 0 18px; color:#fff }
.hero p.lead { font-size:20px; line-height:1.5; margin:0 0 26px; color:#d6deea }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap }
.hero .fine { color:#b6c3d4; font-size:14px; margin:14px 0 0 }
@media (max-width:860px) { .hero .wrap { grid-template-columns:1fr; gap:32px } .hero { padding:40px 0 48px } }

.preview { background:var(--panel); color:var(--ink); border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.28); overflow:hidden; font-size:14.5px }
.preview .bar { display:flex; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--soft); color:var(--muted); font-size:13px; border-bottom:1px solid var(--line) }
.preview .item { padding:11px 14px; border-bottom:1px solid var(--line) } .preview .item:last-child { border:0 }
.preview .head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-weight:600 }
.preview .note { color:var(--muted); font-size:13.5px; margin-top:2px }
.badge { display:inline-block; white-space:nowrap; padding:2px 9px; border-radius:10px; font:600 12.5px var(--sans) }
.b-red { background:var(--red-bg); color:var(--red) } .b-amber { background:var(--amber-bg); color:var(--amber) }
.b-green { background:var(--green-bg); color:var(--green) } .b-grey { background:var(--grey-bg); color:var(--grey) }

.band { padding:60px 0 } .band.alt { background:var(--panel); border-block:1px solid var(--line) }
.band h2 { font-size:clamp(26px,3.4vw,34px); margin:0 0 12px } .band p.intro { font-size:19px; max-width:680px; margin:0 0 30px; color:var(--muted) }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px }
.cols h3 { font-size:20px; margin:0 0 6px } .cols p { margin:0; color:var(--muted) }
.num { display:inline-flex; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center; background:var(--navy); color:var(--gold); font:700 16px var(--serif); margin-bottom:10px }
.split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start } @media (max-width:800px) { .split { grid-template-columns:1fr; gap:24px } }
.figures { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin:0 0 14px }
.figure { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px }
.band.alt .figure { background:var(--paper) }
.figure b { display:block; font:700 36px var(--serif); color:var(--ink) } .figure span { color:var(--muted); font-size:14.500px; line-height:1.35; display:block }
.fine { color:var(--muted); font-size:14px }
.quote { font:400 clamp(22px,3vw,29px)/1.35 var(--serif); margin:0 0 14px; max-width:780px }
.closing { background:var(--navy); color:#f4f6f9; padding:52px 0; text-align:center } .closing h2 { color:#fff; font-size:32px; margin:0 0 10px } .closing p { color:#d6deea; margin:0 0 22px }

.page { padding:36px 0 64px }
.prose { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:32px clamp(18px,4vw,44px); max-width:820px; margin:0 auto; min-width:0 }
.prose h1 { font-size:clamp(30px,4vw,40px); margin:0 0 8px } .prose h2 { font-size:23px; margin:32px 0 8px } .prose h3 { font-size:18px; margin:22px 0 4px }
.prose .sub { color:var(--muted); font-size:18px; margin-top:0 } .prose li { margin:5px 0 }
.prose code, .prose pre { background:var(--soft); border-radius:4px; font:14px ui-monospace,Consolas,Menlo,monospace }
.prose code { padding:1px 5px; overflow-wrap:anywhere } .prose pre { padding:12px 14px; overflow-x:auto } .prose pre code { padding:0; background:none; overflow-wrap:normal }
.table-wrap { overflow-x:auto } table { border-collapse:collapse; width:100%; font-size:15.500px; margin:12px 0 } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top } th { font-weight:700 }
.callout { background:var(--soft); border-left:4px solid var(--accent); padding:12px 16px; border-radius:0 6px 6px 0; margin:18px 0 }
.docs { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start } @media (max-width:820px) { .docs { grid-template-columns:minmax(0,1fr) } }
.docs .prose { max-width:none; margin:0 }
.side { position:sticky; top:14px; font-size:15px } @media (max-width:820px) { .side { position:static } }
.side b { display:block; font:700 14px var(--sans); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px }
.side a { display:block; padding:6px 10px; border-radius:6px; color:var(--ink); text-decoration:none } .side a:hover { background:var(--soft) }
.side a[aria-current=page] { background:var(--navy); color:#fff }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin:22px 0 } .plan { border:1px solid var(--line); border-radius:10px; padding:16px }
.plan h3 { margin:0 0 6px; font-size:19px } .plan .price { font:700 28px var(--serif) } .plan p { font-size:15px; margin:10px 0 0 } .plan .sub { font-size:14px; margin:0 }
.cta { display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:600; padding:11px 20px; border-radius:7px; text-decoration:none }
details { border-bottom:1px solid var(--line); padding:12px 0 } summary { cursor:pointer; font:700 18px var(--serif) } details p { margin:8px 0 2px }

footer.foot { background:var(--panel); border-top:1px solid var(--line); padding:30px 0; font-size:14.500px; color:var(--muted) }
footer.foot .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap } footer.foot p { margin:0; max-width:430px }
footer.foot ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0; max-width:520px } footer.foot a { color:inherit }