:root{
  --ink:#14306b; --ink2:#0d2150; --blue:#2f5fd0; --sky:#dfe8fb;
  --paper:#f6f1e6; --paper2:#efe7d5; --line:#d9cfb8; --text:#1d2433; --muted:#586078;
  --marigold:#f0a531; --coral:#e2603f;
  --coral-text:#b53f25; --coral-text-on-dark:#f58b70; --focus-indicator:var(--ink);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,"Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.6 var(--sans);
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(47,95,208,.07) 31px 32px)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
/* The outline sits outside the control, so match its surrounding section. */
.data,.c-ink,.ribbon,.closing{--focus-indicator:var(--paper)}
:focus-visible{outline:3px solid var(--focus-indicator);outline-offset:3px}

.top{position:sticky;top:0;z-index:10;background:rgba(246,241,230,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 21px var(--serif)}
.brand b{color:var(--blue)}
.brand.small{font-size:16px}
.links{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.links a{color:var(--text);text-decoration:none;font-size:15px}
.links a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:5px}

.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;
  padding:14px 24px;border-radius:4px 14px 4px 14px;box-shadow:4px 4px 0 var(--marigold);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--marigold)}
.btn-sm{padding:9px 16px;font-size:15px;box-shadow:3px 3px 0 var(--marigold)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink),4px 4px 0 var(--sky)}
.btn-light{background:var(--paper);color:var(--ink)}

.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.eyebrow{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-text);margin:0 0 18px}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.08;margin:0}
h1{font-size:clamp(44px,6.2vw,78px);font-weight:600;letter-spacing:-.02em}
h1 em{color:var(--blue);font-style:italic;background:linear-gradient(transparent 68%,rgba(240,165,49,.45) 68%)}
.lede{font-size:19px;color:var(--muted);max-width:34em;margin:26px 0 30px}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.fine{font-size:14px;color:var(--muted);margin-top:22px}
.shot{margin:0;position:relative}
.shot-frame{position:relative;border:2px solid var(--ink);border-radius:6px 22px 6px 22px;overflow:hidden;background:#fbf8f1;box-shadow:14px 14px 0 var(--ink);transform:rotate(-1.2deg);transition:transform .5s}
.shot:hover .shot-frame{transform:rotate(0)}
.shot figcaption{position:relative;margin-top:34px;font:italic 15px var(--serif);color:var(--muted)}

.ribbon{background:var(--ink);color:var(--sky);overflow:hidden;white-space:nowrap;padding:14px 0;font:italic 20px var(--serif)}
.ribbon span{display:inline-block}

.section{padding:110px 24px}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head .num{font:700 14px var(--sans);color:var(--coral-text);margin:0 0 10px;letter-spacing:.1em}
h2{font-size:clamp(32px,4vw,50px);font-weight:600}
.sec-head p:not(.num){color:var(--muted);font-size:18px;margin:16px 0 0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fbf8f1;border:1px solid var(--line);border-radius:4px 18px 4px 18px;padding:30px;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card h3{font-size:25px;margin-bottom:12px}
.card p{margin:0;color:var(--muted)}
.c-wide{grid-column:span 2}
.c-tall{grid-row:span 2;background:var(--sky);border-color:#bccbee}
.c-ink{background:var(--ink);border-color:var(--ink)}
.c-ink h3{color:var(--marigold)} .c-ink p{color:#cdd8f3}
.chips{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:13px;font-weight:600;padding:5px 12px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink)}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:2px solid var(--ink)}
.steps li{counter-increment:s;padding:28px 24px 0 0;position:relative}
.steps li::before{content:counter(s);font:italic 600 56px/1 var(--serif);color:var(--blue);display:block;margin-bottom:14px}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:16px}
.aside{margin-top:44px;padding-left:18px;border-left:4px solid var(--marigold);font:italic 18px var(--serif);color:var(--ink)}

.data{background:var(--ink2);color:#dbe3f6;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(223,232,251,.05) 31px 32px)}
.data h2{color:var(--paper)} .data .sec-head p:not(.num){color:#b3c0e0}
.data .sec-head .num{color:var(--coral-text-on-dark)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(223,232,251,.18);margin:0;border:1px solid rgba(223,232,251,.18)}
.facts div{background:var(--ink2);padding:28px}
.facts dt{font:600 21px var(--serif);color:var(--marigold);margin-bottom:8px}
.facts dd{margin:0;font-size:16px}

.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font:600 22px var(--serif);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:12px 0 0}

.closing{background:var(--blue);border-radius:6px 40px 6px 40px;padding:72px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:64px}
.closing h2{color:var(--paper);max-width:14em}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--line);font-size:15px}
.foot nav{display:flex;gap:12px 22px;flex-wrap:wrap}
.foot a{color:var(--muted)}

.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:44px}
  .grid,.facts{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:32px}
  .links{display:none}
  .nav .btn{margin-left:auto}
}
@media (max-width:767px){
  .grid,.facts,.steps{grid-template-columns:1fr}
  .c-wide,.c-tall{grid-column:auto;grid-row:auto}
  .section{padding:72px 20px}
  .closing{padding:48px 28px}
}
@media (max-width:420px){
  .nav{padding-right:16px;padding-left:16px;gap:10px}
  .nav .brand{font-size:18px;gap:6px}
  .nav .btn-sm{font-size:14px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}