:root{
  --navy:#101B3F; --navy-2:#1A2A5E; --cream:#F7EBD2; --coral:#FF7A59; --sun:#FFB627; --moon:#CBD3FF;
  --paper:#EEF2EE; --card:#FFFFFF; --ink:#172331; --muted:#5A6774; --line:#D3DAD4; --accent:#F2B705;
  --display:"Bricolage Grotesque","Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--ink);font:700 18px/1 var(--display);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#FFC62B}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy-2)}
.link{font:600 18px/1 var(--display);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* header */
.top{background:var(--navy);color:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.brand{min-width:0;white-space:nowrap;display:flex;align-items:center;gap:12px;text-decoration:none;font:800 22px/1 var(--display);letter-spacing:-.01em;color:var(--cream)}
.brand img{width:40px;height:40px;border-radius:10px}
.top .btn{min-height:44px;padding:0 20px;font-size:16px;white-space:nowrap;flex-shrink:0}

/* hero */
.hero{background:var(--navy);color:var(--cream);padding:56px 0 0}
.hero h1{font:800 clamp(46px,8.2vw,104px)/.96 var(--display);letter-spacing:-.035em;margin:0;max-width:11ch}
.hero .lede{font-size:clamp(19px,2.2vw,24px);line-height:1.45;color:#D9DEEE;max-width:34em;margin:26px 0 0}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:34px}
.hero .fine{color:#AEB8D6;font-size:16px;margin:18px 0 0}
.stage{background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 90px,var(--paper) 90px);padding-top:54px}
.shot{margin:0}
.shot .frame{background:var(--card);border-radius:18px;box-shadow:0 30px 70px -20px rgba(16,27,63,.55),0 0 0 1px rgba(16,27,63,.12);overflow:hidden}
.shot .bar{display:flex;gap:7px;padding:12px 16px;background:#E3E9E4;border-bottom:1px solid var(--line)}
.shot .bar i{width:11px;height:11px;border-radius:50%;background:#C2CAC4;display:block}
.shot img{width:100%;height:auto}
.shot figcaption{color:var(--muted);font-size:15px;margin:14px 4px 0}

/* sections */
section{padding:clamp(64px,9vw,112px) 0}
h2{font:800 clamp(32px,4.6vw,56px)/1.04 var(--display);letter-spacing:-.025em;margin:0;max-width:18ch}
h3{font:700 24px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 10px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:52px}
.cols>div{border-top:5px solid var(--line);padding-top:22px}
.cols>div:nth-child(1){border-color:var(--sun)}
.cols>div:nth-child(2){border-color:var(--coral)}
.cols>div:nth-child(3){border-color:var(--moon)}
.cols p{margin:0;color:#34414E}
.phonepair{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(36px,7vw,96px);align-items:center}
.phone{background:var(--navy);border-radius:42px;padding:12px;box-shadow:0 30px 60px -24px rgba(16,27,63,.6)}
.phone img{border-radius:32px;width:100%;height:auto}
.phonepair p{max-width:32em;color:#34414E}
.phonepair p+p{margin-top:16px}
.steps{list-style:none;counter-reset:s;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--cream);font:800 22px/1 var(--display);margin-bottom:18px}
.steps p{margin:0;color:#34414E}
.also{background:var(--card);border-block:1px solid var(--line)}
.also ul{columns:2;column-gap:56px;list-style:none;padding:0;margin:40px 0 0;max-width:900px}
.also li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--line)}
.cta{background:var(--navy);color:var(--cream)}
.cta h2{max-width:14ch}
.cta p{color:#D9DEEE;max-width:36em}
.cta .btn{margin-top:10px}
footer{background:var(--navy);color:#AEB8D6;border-top:1px solid #26366F;padding:30px 0 44px;font-size:16px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:#E6EAF7}

/* long pages */
.doc{padding:56px 0 96px}
.doc .wrap{max-width:740px}
.doc h1{font:800 clamp(36px,6vw,56px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 8px}
.doc .when{color:var(--muted);margin:0 0 36px}
.doc h2{font:700 26px/1.2 var(--display);letter-spacing:-.01em;margin:40px 0 10px;max-width:none}
.doc p,.doc li{color:#2B3744}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.notfound{min-height:60vh;display:grid;align-content:center;gap:18px;padding:80px 0}
.notfound h1{font:800 clamp(40px,7vw,72px)/1 var(--display);letter-spacing:-.03em;margin:0}

@media (max-width:820px){
  .shot .frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot img{min-width:860px}
  .cols,.steps{grid-template-columns:1fr;gap:34px}
  .phonepair{grid-template-columns:1fr}
  .phone{max-width:340px}
  .also ul{columns:1}
  .hero{padding-top:36px}
  .stage{padding-top:40px;background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 60px,var(--paper) 60px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* hero artwork: the logo, large. In flow on small screens, pinned right on wide ones */
.hero .wrap{position:relative}
.hero-art{display:block;width:210px;height:auto;margin:0 0 6px auto}
@media (min-width:900px){
  .hero .lede{max-width:min(34em,56%)}
  .hero-art{position:absolute;right:-20px;top:-8px;width:min(500px,44vw);margin:0}
}
@media (max-width:480px){
  .brand{font-size:19px;gap:10px}
  .brand img{width:34px;height:34px}
  .top .btn{padding:0 16px;font-size:15px}
}