/* Paceport — paceport.app
   Tokens follow the Paceport design system (Night theme). */
:root{
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --ink:#0b1230;--navy:#121b40;--night-blue:#1d3a8a;--orange:#ff7a1a;--orange-text:#ff7a1a;
  --gold:#e2b866;--mint:#2fd8a8;--coral:#ff4d6d;--focus:#3d7bff;
  --line:rgba(255,255,255,.10);--muted:rgba(255,255,255,.64);--faint:rgba(255,255,255,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--sf);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:#fff}a:hover{color:#ffc9a3}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.w{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.sec{padding-block:128px}
.k{margin:0;font:600 14px/18px var(--sf);color:var(--orange-text);letter-spacing:.2px}
.h1{margin:0;font:600 clamp(48px,6.4vw,92px)/.94 var(--sf);letter-spacing:-.04em;text-wrap:balance}
.h1 .dim{color:rgba(255,255,255,.55)}
.h2{margin:0;font:600 clamp(36px,4.4vw,60px)/1 var(--sf);letter-spacing:-.035em;text-wrap:balance}
.h3{margin:0;font:600 22px/28px var(--sf);letter-spacing:-.01em}
.p{margin:0;font:400 19px/29px var(--sf);color:var(--muted);max-width:32em}
.sm{margin:0;font:400 14px/20px var(--sf);color:var(--faint)}
.num{font:600 30px/34px var(--sf);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border:0;border-radius:999px;font:600 17px/22px var(--sf);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-o{background:var(--orange);color:var(--ink)}.btn-o:hover{color:var(--ink);background:#ff8c3a}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{color:var(--ink);background:#e9ecf5}
.btn[disabled]{opacity:.6;cursor:progress}
.fld{flex:1 1 220px;min-width:0;height:52px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:400 17px/22px var(--sf)}
.fld::placeholder{color:rgba(255,255,255,.55)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.form-note{margin:0;font:400 13px/19px var(--sf);color:var(--faint);max-width:40em}
.form-note a{color:rgba(255,255,255,.75)}
.status{min-height:20px;margin:0;font:500 15px/20px var(--sf)}
.status.ok{color:var(--mint)}.status.err{color:#ff8fa3}

.glass{background:rgba(11,18,48,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12)}
.icon{border-radius:22.5%}
.phone{width:100%;aspect-ratio:1206/2622;padding:2.6%;border-radius:13%/6%;background:#05081a;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.45)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11%/5.1%}

/* header */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;height:88px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{font:600 19px/24px var(--sf);letter-spacing:-.2px}
.nav{display:flex;align-items:center;gap:32px;font:500 15px/20px var(--sf)}
.navl{display:flex;gap:32px}
.navl a{text-decoration:none;color:rgba(255,255,255,.75)}

/* hero */
.hero{position:relative;overflow:hidden;min-height:860px}
.hero-img{position:absolute;right:0;top:0;width:74%;height:100%;object-fit:cover;object-position:50% 40%;transition:opacity .35s ease}
.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#0b1230 0%,#0b1230 28%,rgba(11,18,48,.8) 44%,rgba(11,18,48,.12) 70%,rgba(11,18,48,0) 100%)}
.hero-body{position:relative;padding-top:104px;padding-bottom:140px}
.hero-copy{max-width:640px;display:flex;flex-direction:column;gap:28px}
.hud{position:absolute;left:64%;top:300px;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:18px}
.hud .l{font:600 11px/14px var(--sf);letter-spacing:1px;color:rgba(255,255,255,.6)}
.hud .v{font:600 34px/38px var(--sf);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.hud .g{font:500 14px/18px var(--sf);color:var(--coral)}
.hud .g.even{color:var(--mint)}
.hero-foot{position:absolute;left:0;right:0;bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.pills{display:flex;gap:8px}
.pill{height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:500 15px/20px var(--sf);cursor:pointer}
.pill[aria-pressed="true"]{border-color:#fff;background:#fff;color:var(--ink);font-weight:600}
.attr{font:400 12px/16px var(--sf);color:rgba(255,255,255,.55)}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .w{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:32px;gap:16px 32px;padding-block:26px;font:500 15px/20px var(--sf);color:rgba(255,255,255,.66)}

.split{display:flex;flex-wrap:wrap;align-items:center;gap:72px}
.split.rev{flex-direction:row-reverse}
.split>.c{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:22px}
.split>.a{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.stack{display:flex;flex-direction:column;gap:40px}
.intro{display:flex;flex-direction:column;gap:18px;max-width:640px}

.cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.city{position:relative;margin:0;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:var(--navy)}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.city figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 20px 20px;background:linear-gradient(0deg,rgba(11,18,48,.92),rgba(11,18,48,0));display:grid;gap:4px}
.city figcaption .sm{color:rgba(255,255,255,.72)}

.quote{margin:0;font:600 clamp(32px,4vw,54px)/1.08 var(--sf);letter-spacing:-.03em;max-width:17em;text-wrap:balance}
.quote .dim{color:rgba(255,255,255,.5)}
.facts{display:flex;flex-wrap:wrap;gap:16px 56px;align-items:baseline}
.facts>span{display:grid;gap:2px}

.ghosts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--navy);border:1px solid var(--line);border-radius:24px}
.ghost{padding:28px;display:flex;flex-direction:column;gap:28px}
.ghost .sm{font-size:15px;color:var(--muted)}

.big66{font:600 clamp(96px,12vw,168px)/.85 var(--sf);letter-spacing:-.06em;color:var(--orange)}
.sticky{position:sticky;top:24px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.rows .h3{font-size:19px}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.plan{padding:36px;display:flex;flex-direction:column;gap:24px}
.plan.light{background:#fff;color:var(--ink);border-color:#fff}
.plan .price{font-size:44px;line-height:48px}
.plan .per{font:500 17px/22px var(--sf);color:#4a5070}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.chk{display:flex;gap:12px;align-items:flex-start;font:400 17px/24px var(--sf);color:rgba(255,255,255,.86)}
.plan.light .chk{color:var(--ink)}
.chk svg{flex:none;margin-top:4px}

.end{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1230 0%,#0f1a44 40%,#1d3a8a 80%,#3a3f7a 100%)}
.end .w{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.end .form{justify-content:center;width:100%}

.foot .w{display:flex;flex-direction:column;gap:20px;padding-block:40px 48px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:24px;font:500 14px/18px var(--sf)}
.foot nav a{color:rgba(255,255,255,.7);text-decoration:none}
.legal{margin:0;font:400 12px/18px var(--sf);color:var(--faint);max-width:72em}

/* simple content pages */
.doc{max-width:720px;margin:0 auto;padding:40px max(24px,env(safe-area-inset-left,0px)) 120px}
.doc h1{margin:24px 0 8px;font:600 44px/1.05 var(--sf);letter-spacing:-.03em}
.doc h2{margin:40px 0 10px;font:600 22px/28px var(--sf)}
.doc p,.doc li{font:400 17px/27px var(--sf);color:rgba(255,255,255,.8)}
.doc ul{padding-left:20px}
.doc .updated{color:var(--faint);font-size:14px}
.doc .note{padding:14px 18px;border-radius:14px;background:var(--navy);border:1px solid var(--line);font-size:15px}

/* Hero on wide screens: tie the image and HUD to the 1200px content column, not the viewport */
@media (min-width:761px){
  .hero-img{left:calc(max(24px,50% - 600px) + 480px);right:auto;width:calc(100% - max(24px,50% - 600px) - 480px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .hero-fade{background:linear-gradient(0deg,rgba(11,18,48,.75) 0,rgba(11,18,48,0) 28%)}
  .hud{left:calc(max(24px,50% - 600px) + 820px)}
}
@media (min-width:1600px){
  .hero-img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 82%,transparent 100%);width:1020px}
}

@media (max-width:1020px){.cities{grid-template-columns:repeat(2,minmax(0,1fr))}.ghosts{grid-template-columns:minmax(0,1fr)}.hud{display:none}}
@media (max-width:760px){
  .sec{padding-block:88px}.navl{display:none}
  .hero{min-height:0}.hero-img{width:100%;opacity:.55}.hero-fade{background:linear-gradient(180deg,rgba(11,18,48,.6),#0b1230 82%)}
  .hero-body{padding-top:56px;padding-bottom:120px}
  .plans{grid-template-columns:minmax(0,1fr)}
  .rows li{grid-template-columns:56px minmax(0,1fr);row-gap:4px}.rows li>.d{grid-column:2}
  .split{gap:48px}.pills{display:none}.sticky{position:static}
}
.form .status{flex-basis:100%}.form .status:empty{display:none}