@font-face{font-family:Geist;src:url(/assets/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#FFFFFF; --paper:#F3F6FA; --text:#14202E; --muted:#51627A; --line:#CBD6E3;
  --navy:#1E3A5F; --navy-deep:#122640; --accent:#1E3A5F; --sky:#8FB4DB; --on-accent:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A0E13; --paper:#10171F; --text:#EDEDED; --muted:#A9B8CA; --line:#26364A;
    --accent:#7FA6CF; --on-accent:#0A0E13;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Geist,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;font-size:18px;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:28px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;border-radius:6px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* Buttons */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:13px 24px;border-radius:6px;border:2px solid transparent;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#E6EDF5}
.btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1)}

/* Hero: split, with the rings as a large quiet graphic */
.hero{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 85% 40%,rgba(93,136,179,.28),transparent 70%)}
.rings{--rings-rest:.22;--rings-peak:.7;position:absolute;right:-90px;top:50%;width:620px;max-width:60vw;transform:translateY(-50%);color:#8FB4DB;opacity:var(--rings-rest);pointer-events:none;overflow:visible}
/* Intro: the two rings fly in from opposite sides, lock together, then settle into the quiet background graphic.
   Pure CSS, runs once, and is skipped for visitors who ask their device for less motion. */
@media (prefers-reduced-motion:no-preference){
  .rings{animation:ringsShow 3.6s ease-out both}
  .rings path{transform-box:view-box}
  .rings .r-left{transform-origin:36.08px 50.36px;animation:ringFromLeft 1.9s cubic-bezier(.22,.8,.3,1) both}
  .rings .r-right{transform-origin:63.92px 49.64px;animation:ringFromRight 1.9s cubic-bezier(.22,.8,.3,1) both}
}
@keyframes ringFromLeft{0%{transform:translateX(-95px) rotate(-240deg);opacity:0}25%{opacity:1}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes ringFromRight{0%{transform:translateX(95px) rotate(240deg);opacity:0}25%{opacity:1}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes ringsShow{0%{opacity:0}20%{opacity:var(--rings-peak)}60%{opacity:var(--rings-peak)}100%{opacity:var(--rings-rest)}}
.hero .wrap{position:relative}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.bar img{height:30px;width:auto;display:block}
.bar a.link{color:#DCE6F1;text-decoration:none;font-size:15px;font-weight:500}
.bar a.link:hover{color:#fff}
.hero-body{padding-block:84px 72px;max-width:700px}
.tag{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--sky);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.tag::before{content:"";width:34px;height:2px;background:var(--sky)}
h1{font-size:clamp(36px,6vw,62px);line-height:1.06;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:clamp(18px,2.3vw,21px);color:#D3DFEC;margin-top:26px;max-width:600px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* Number strip under the hero */
.strip{position:relative;border-top:1px solid rgba(255,255,255,.18);background:rgba(8,18,32,.5)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .cell{padding:26px 24px 28px 0}
.strip .cell+.cell{padding-left:28px;border-left:1px solid rgba(255,255,255,.18)}
.strip b{display:block;font-size:clamp(34px,4.6vw,52px);line-height:1;font-weight:600;letter-spacing:-.02em;color:#fff}
.strip span{display:block;margin-top:8px;font-size:15px;color:#BFD0E3}

/* Sections: open layout, label on the left and content on the right */
section{padding-block:84px}
section+section{border-top:1px solid var(--line)}
.paper{background:var(--paper)}
.split{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px}
.label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:14px}
h2{font-size:clamp(28px,4vw,40px);line-height:1.14;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.body-lg{font-size:20px;color:var(--muted);max-width:660px}
.rule-list{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.rule-list li{display:grid;grid-template-columns:60px 1fr;gap:8px 12px;padding:22px 0;border-bottom:1px solid var(--line)}
.rule-list .n{font-size:15px;font-weight:600;color:var(--accent);padding-top:4px}
.rule-list h3{font-size:21px;line-height:1.3;font-weight:600;margin-bottom:6px}
.rule-list p{color:var(--muted);font-size:17px;max-width:560px}

/* AI flow: four stops on one line */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;position:relative}
.flow::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:2px;background:var(--line)}
.flow li{position:relative;padding:48px 28px 0 0}
.flow li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--paper)}
.flow h3{font-size:22px;font-weight:600;margin-bottom:8px}
.flow p{color:var(--muted);font-size:16.5px}
.assurance{margin-top:44px;padding:18px 22px;border-left:4px solid var(--accent);background:var(--bg);font-weight:600;max-width:560px}

/* Four areas: two by two, ruled not boxed */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px}
.area{padding:24px 0;border-top:2px solid var(--accent)}
.area h3{font-size:22px;font-weight:600;margin-bottom:6px}
.area p{color:var(--muted);font-size:17px}

/* Sectors: three columns divided by thin vertical rules */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.cols3>div{padding:30px 30px 8px 0}
.cols3>div+div{padding-left:30px;border-left:1px solid var(--line)}
.cols3 h3{font-size:22px;line-height:1.25;font-weight:600;margin-bottom:12px}
.cols3 p{color:var(--muted);font-size:17px}

.honest ul{margin-top:18px;display:grid;gap:12px;list-style:none}
.honest li{padding-left:28px;position:relative;color:var(--muted)}
.honest li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--accent)}
.honest h2.sm{font-size:26px;margin-top:0}
.social{display:flex;gap:14px;list-style:none;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;color:var(--accent);text-decoration:none;transition:background .15s,color .15s,transform .15s}
.social a:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}
.pilot .social a{color:#fff}
.pilot .social a:hover{background:#fff;color:var(--navy)}
.follow{margin-top:34px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#BFD0E3}
footer .social{margin-top:0}


.pilot{background:var(--navy);color:#fff;border-top:0;position:relative;overflow:hidden}
.pilot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 360px at 90% 120%,rgba(143,180,219,.3),transparent 70%)}
.pilot .wrap{position:relative}
.pilot h2{font-size:clamp(32px,5vw,50px)}
.pilot p{color:#D3DFEC;font-size:20px;max-width:620px;margin-top:20px}
.pilot .mail{font-size:16px;color:#BFD0E3;margin-top:24px}
.pilot .mail a{color:#fff}
footer{padding-block:34px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:20px}
  .flow{grid-template-columns:1fr 1fr;row-gap:36px}
  .flow::before{display:none}
  .flow li{padding-top:36px}
  .areas{grid-template-columns:1fr}
  .cols3{grid-template-columns:1fr}
  .cols3>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .cols3>div{padding-right:0}
  .rings{--rings-rest:.14;--rings-peak:.38;right:-8vw;width:80vw;max-width:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero-body{padding-block:48px 44px}
  section{padding-block:56px}
  .strip .wrap{grid-template-columns:1fr}
  .strip .cell{padding:18px 0}
  .strip .cell+.cell{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .flow{grid-template-columns:1fr}
  .bar a.link{display:none}
  .rule-list li{grid-template-columns:44px 1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ---- Inner pages (About, Contact, Privacy, Thanks) ---- */
.nav{display:flex;gap:26px;align-items:center}
.pagehead{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 85% 0%,rgba(93,136,179,.28),transparent 70%)}
.pagehead .wrap{position:relative}
.page-title{padding-block:44px 64px;max-width:760px}
.pagehead h1{font-size:clamp(34px,5vw,52px)}
.pagehead .lead{margin-top:20px}
.page-body{padding-block:72px}
.prose{max-width:720px}
.prose h2{font-size:26px;line-height:1.25;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);font-size:18px;margin-bottom:14px}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose strong{color:var(--text)}
.notice{padding:18px 22px;border-left:4px solid var(--accent);background:var(--paper);font-weight:600;max-width:560px;margin-top:28px}
.contact-grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px}
form.contact{display:grid;gap:22px;max-width:640px}
.field label{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text)}
.field input:focus,.field textarea:focus{outline:3px solid var(--sky);outline-offset:1px;border-color:var(--accent)}
.field textarea{min-height:190px;resize:vertical}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.btn-solid{background:var(--accent);color:var(--on-accent);cursor:pointer;font-family:inherit;justify-self:start}
.btn-solid:hover{filter:brightness(1.12)}
.fine{font-size:15px;color:var(--muted);max-width:560px}
footer a{color:var(--accent)}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .page-body{padding-block:48px}
}
@media (max-width:560px){
  .bar img{height:24px}
  .nav{gap:16px}
  .nav a.link{display:inline;font-size:14px}
  .nav a.hide-sm{display:none}
}

.prose h3{font-size:20px;line-height:1.3;margin:26px 0 6px;font-weight:600}
.prose ol{padding-left:24px;margin-bottom:14px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose .related{list-style:none;padding-left:0}
.updated{font-size:15px;color:var(--muted);margin-top:22px}
.cols3 h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent)}
.nav a.pilot-link{white-space:nowrap;border:1.5px solid rgba(255,255,255,.7);border-radius:6px;padding:6px 12px;font-weight:600}
.nav a.pilot-link:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){.nav a.pilot-link{padding:4px 8px;font-size:13px}}