@font-face{font-family:'Raleway';font-weight:600;font-display:swap;src:url(fonts/Raleway-SemiBold.ttf) format('truetype')}
@font-face{font-family:'Clarity City';font-weight:400;font-display:swap;src:url(fonts/ClarityCity-Regular.ttf) format('truetype')}
@font-face{font-family:'Clarity City';font-weight:500;font-display:swap;src:url(fonts/ClarityCity-Medium.ttf) format('truetype')}
@font-face{font-family:'Clarity City';font-weight:600;font-display:swap;src:url(fonts/ClarityCity-SemiBold.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-Medium.ttf) format('truetype')}

/* ONBOARDING_PALETTES (OnboardingScenes.tsx); --bar and --callout are web-only surfaces. */
:root,[data-theme=night]{
  --fg:#F4EEF6;--muted:#EDE5F1;--faint:#E0D7E5;--grid:rgba(169,155,179,.07);--ghost:transparent;
  --field-bg:rgba(17,12,22,.65);--field-border:rgba(169,155,179,.28);
  --jet-fill:#2A1530;--jet-shade:#170B1C;--jet-pod:#3A1D40;--jet-edge:rgba(243,113,96,.75);--jet-detail:rgba(244,238,246,.55);
  --contrail:rgba(244,238,246,.85);--cloud-back:#4A1842;--cloud-front:#7A2557;--cloud-edge:rgba(243,113,96,.65);
  --cloud-back-op:.55;--cloud-front-op:.62;
  --hs-body:#2A1530;--hs-shade:#170B1C;--hs-cushion:#3A1D40;--hs-edge:rgba(243,113,96,.7);--hs-halo:rgba(191,49,115,.35);
  --cue:#F37160;--num:#F4EEF6;--bar:rgba(7,6,10,.95);--callout:rgba(243,113,96,.10);--page:#07060A;
  color-scheme:dark;
}
[data-theme=day]{
  --fg:#0F172A;--muted:#0F172A;--faint:#0F172A;--grid:rgba(15,23,42,.06);--ghost:rgba(255,255,255,.72);
  --field-bg:rgba(255,255,255,.82);--field-border:rgba(15,23,42,.16);
  --jet-fill:#1E293B;--jet-shade:#0F172A;--jet-pod:#334155;--jet-edge:rgba(255,255,255,.35);--jet-detail:#BFDBFE;
  --contrail:#FFFFFF;--cloud-back:#FFFFFF;--cloud-front:#FFFFFF;--cloud-edge:transparent;
  --cloud-back-op:.78;--cloud-front-op:1;
  --hs-body:#1E293B;--hs-shade:#0F172A;--hs-cushion:#334155;--hs-edge:rgba(255,255,255,.35);--hs-halo:rgba(255,255,255,.55);
  /* Coral is ~3:1 on the light Day cards; the app's darker shade keeps small text at 4.5:1 there. Section numbers sit on
     the bare sky, where #B93A28 measures 1.66:1 at the top stop (#4B8BE8) and 3.97:1 at the 80% stop (#C3D9FF), so they
     take the full ink (#0F172A: 5.23:1 at the top stop). */
  --cue:#B93A28;--num:#0F172A;--bar:rgba(255,255,255,.92);--callout:rgba(243,113,96,.12);--page:#4B8BE8;
  color-scheme:light;
}
:root{--bar-h:64px;--pad:clamp(20px,4vw,56px);--gap:clamp(96px,12vw,176px)}
*{box-sizing:border-box;margin:0}
html{background:var(--page);scroll-behavior:smooth}
body{font:400 18px/1.55 'Clarity City',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid #F37160;outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:var(--bar-h)}

/* OnboardingBackdrop: Tier 1 layers at night, Alpen Soft Sky by day, under the 44 px grid and radar rings. */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#07060A;background-size:44px 44px,44px 44px,100% 100%,100% 100%,100% 100%;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  linear-gradient(315deg,rgba(8,145,178,.42) 0%,rgba(8,145,178,.28) 18%,rgba(8,145,178,.12) 38%,rgba(8,145,178,0) 60%),
  radial-gradient(ellipse 95% 58% at 0% 12%,rgba(243,113,96,.45) 0%,rgba(243,113,96,.28) 30%,rgba(191,49,115,.18) 62%,rgba(191,49,115,0) 100%),
  linear-gradient(135deg,rgba(243,113,96,.2) 0%,rgba(191,49,115,.38) 28%,rgba(191,49,115,.3) 42%,rgba(118,23,74,.48) 60%,rgba(118,23,74,.24) 78%,rgba(118,23,74,0) 100%)}
[data-theme=day] .backdrop{background-size:44px 44px,44px 44px,100% 100%;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  linear-gradient(180deg,#4B8BE8 0%,#76A9FA 45%,#C3D9FF 80%,#F5F8FF 100%)}
.backdrop svg{position:absolute;inset:0;width:100%;height:100%}

.bar{position:sticky;top:0;z-index:10;height:var(--bar-h);background:var(--bar)}
.bar-in{height:100%;max-width:1328px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:clamp(12px,3vw,40px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 22px/1 'Raleway',sans-serif;letter-spacing:-.02em;margin-right:auto}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 1px var(--field-border)}
.links{display:flex;gap:clamp(14px,2.4vw,32px)}
.links a{font-weight:500;font-size:15px;text-decoration:none;color:var(--muted);transition:color .15s}
.links a:hover{color:var(--fg)}
.theme{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border:0;border-radius:22px;background:var(--ghost);color:var(--fg);font:500 15px/20px 'Clarity City',sans-serif;cursor:pointer;transition:transform .15s}
.theme:active{transform:scale(.985)}
.theme .i-sun,[data-theme=day] .theme .i-moon{display:none}
[data-theme=day] .theme .i-sun{display:block}

.wrap{max-width:1328px;margin:0 auto;padding:0 var(--pad)}
main{flex:1}
h1,h2{font-family:'Raleway',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(32px,3.9vw,56px)}
.lede{color:var(--muted);margin-top:20px;max-width:34em}

.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px)}
.scene{display:flex;justify-content:center}
.art{display:block;width:100%;height:auto}
.hero{padding-top:clamp(24px,4vw,48px)}
.hero .split{grid-template-columns:7fr 5fr;min-height:calc(100svh - var(--bar-h) - 48px)}
.hero h1{font-size:clamp(27px,4.3vw,64px);line-height:1.06}
@media (min-width:360px){.hero h1 span{white-space:nowrap}}
.art-jet{max-width:560px}
.art-headset{max-width:440px}
.art-horizon{max-width:600px}
/* Ink on the brand coral: 5.25:1 at rest (#EB5642), 6.49:1 on the lighter hover coral (#F37160). */
.cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;margin-top:36px;border-radius:26px;background:#EB5642;color:#1A0F1E;font-weight:600;font-size:16px;letter-spacing:.01em;text-decoration:none;transition:background .15s,transform .15s}
.cta:hover{background:#F37160}
.cta:active{transform:scale(.985)}
.cta svg{transition:transform .15s}
.cta:hover svg{transform:translateX(3px)}
.section{margin-top:var(--gap)}

.cards{list-style:none;padding:0;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{padding:24px;border-radius:20px;background:var(--field-bg);border:1px solid var(--field-border)}
.card-top{display:flex;align-items:center;gap:12px}
.badge{width:36px;height:36px;border-radius:18px;background:rgba(243,113,96,.15);color:#F37160;display:grid;place-items:center;flex:none}
.step{font-weight:600;font-size:14px;color:var(--cue)}
.card h3{font-weight:600;font-size:19px;line-height:1.3;margin-top:20px}
.card p{font-size:16px;line-height:1.55;color:var(--muted);margin-top:10px}
.notice{font-size:14px;line-height:1.5;color:var(--muted);margin-top:28px;max-width:62em}

.pricing .split{align-items:start}
.plans{display:grid;gap:12px}
.plan{border-radius:14px;background:var(--field-bg);border:1px solid var(--field-border);padding:6px 20px}
.plan-head,.plan-rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px 0}
.plan-head h3,.row-label{font-weight:600;font-size:17px;line-height:1.3}
.plan-sum{font-size:15px}
.plan-rows{list-style:none;padding:0 0 6px}
.plan-rows li{min-height:48px;flex-wrap:wrap;column-gap:16px;row-gap:2px}
.row-label{font-weight:500}
.row-detail{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.fine{font-size:14px;color:var(--muted);margin-top:4px}

.foot{margin-top:var(--gap);padding:32px 0 40px}
.foot p{font-size:14px;color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover,.foot a[aria-current]{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.legal{padding-top:clamp(40px,6vw,88px)}
.doc{max-width:680px;margin:0 auto;padding:0 var(--pad);box-sizing:content-box}
.doc h1{font-size:clamp(34px,4vw,52px)}
.eff{font:500 13px/16px 'IBM Plex Mono',Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.callout{margin-top:36px;border-left:3px solid #F37160;border-radius:8px;padding:16px 20px;background:var(--callout);font-weight:500;font-size:17px;line-height:1.5}
.doc section{margin-top:40px}
.doc h2{font-family:'Clarity City',sans-serif;font-size:21px;line-height:1.35;letter-spacing:0}
.num{font:500 .9em 'IBM Plex Mono',Menlo,monospace;color:var(--num);margin-right:.2em}
.doc section p{color:var(--muted);margin-top:10px;font-size:17px;line-height:1.6}
.doc ul{margin-top:12px;padding-left:22px;color:var(--muted);font-size:17px;line-height:1.6}
.doc li+li{margin-top:6px}
.doc li::marker{color:#F37160}

/* Scene loops (OnboardingScenes.tsx useSceneLoop periods); paused while offscreen. */
.drift-back,.drift-front,.puff,.climb,.blink,.wave,.halo,.pitch,.bank{transform-box:fill-box}
.drift-back{animation:drift 14s ease-in-out infinite}
.drift-front{animation:drift 17s ease-in-out infinite reverse}
.puff{animation:puff 2.4s ease-in-out infinite}
.climb{animation:climb 6s ease-in-out infinite}
.blink{animation:blink 1.6s linear infinite}
.wave{transform-origin:center;animation:speak 1.2s ease-in-out infinite}
.halo{transform-origin:center;animation:halo 2s ease-in-out infinite}
.pitch{transform:translateY(-14px);animation:pitch 2.2s ease-in-out infinite}
.bank{transform:translateX(-10px);animation:bank 3.4s ease-in-out infinite}
.cloud-edge{fill:var(--cloud-edge)}
@keyframes drift{50%{transform:translateX(-8px)}}
@keyframes puff{50%{opacity:.12}}
@keyframes climb{50%{transform:translate(4px,-6px)}}
@keyframes blink{0%,49.99%{opacity:1}50%,100%{opacity:.15}}
@keyframes speak{50%{transform:scaleY(.55)}}
@keyframes halo{50%{transform:scale(1.18);opacity:.45}}
@keyframes pitch{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}
@keyframes bank{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
.scene:not(.live) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}html{scroll-behavior:auto}}

@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .split,.hero .split{grid-template-columns:1fr;min-height:0}
  .art-col{order:2}
  .art-jet,.art-headset,.art-horizon{max-width:440px}
  .hero h1{font-size:clamp(27px,6.6vw,56px)}
}
@media (max-width:600px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .bar-in{gap:14px}
  .brand{font-size:19px;gap:8px}
  .brand img{width:26px;height:26px}
  .links a,.theme{font-size:14px}
  .theme{padding:0 10px}
  .card{padding:20px}
  .plan-head h3,.row-label{font-size:16px}
}