/* ── fonts ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("/site/fonts/manrope-400.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("/site/fonts/manrope-600.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("/site/fonts/manrope-700.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("/site/fonts/manrope-800.woff2") format("woff2");
}

/* ── tokens ──────────────────────────────────────────────────────────── */
:root{
  --ink:#0B1220;
  --navy:#193A73;
  --slate:#64748B;
  --muted:#64748B;
  --soft:#7A8CA5;
  --surface:#FFFFFF;
  --border:#D7E2EE;
  --page:#F8FAFC;
  --primary:#46A9B7;
  --primary-ink:#0B1220;
  --accent:#21798C;        /* earth-teal, one step darker than #2E90A6 so 11px text meets AA */
  --accent-dark:#7DD3E0;
  --dark:#0F1B2D;
  --deep:#0B1220;
  --dark-line:rgba(255,255,255,.12);
  --dark-panel:rgba(255,255,255,.06);
  --dark-muted:rgba(255,255,255,.72);
  --head-h:64px;
  --shell:1120px;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ── base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:inherit}
p{margin:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
[id]{scroll-margin-top:var(--head-h)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

.skip{
  position:absolute;left:16px;top:-64px;z-index:100;
  background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:999px;
  border:1px solid var(--border);font-weight:600;
}
.skip:focus{top:12px;text-decoration:none}

/* ── wordmark ────────────────────────────────────────────────────────── */
.wordmark{
  display:inline-block;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  transform:scaleY(.9);transform-origin:center;line-height:1;
}
.wordmark .sky,.wordmark .tribe{color:inherit}

/* ── header ──────────────────────────────────────────────────────────── */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head-h);
  background:rgba(11,18,32,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;color:#fff;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.site-head .shell{display:flex;align-items:center;gap:20px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-size:17px}
.brand:hover{text-decoration:none}
.brand img{width:20px;height:24px;object-fit:contain}
.brand .mark-blue{display:none}
.site-nav{display:flex;gap:26px;margin:0 auto;font-size:14px;font-weight:600}
.site-nav a{color:rgba(255,255,255,.82);white-space:nowrap}
.site-nav a:hover{color:#fff;text-decoration:none}
.site-head .btn{margin-left:auto}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:var(--primary-ink);font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  transition:transform .15s ease,background .15s ease;
}
.btn:hover{text-decoration:none;background:#3D9DAB;transform:translateY(-1px)}

.site-head.is-scrolled,.site-head.is-solid{
  background:rgba(255,255,255,.92);border-bottom-color:var(--border);color:var(--ink);
}
.site-head.is-scrolled .site-nav a,.site-head.is-solid .site-nav a{color:var(--muted)}
.site-head.is-scrolled .site-nav a:hover,.site-head.is-solid .site-nav a:hover{color:var(--ink)}
.site-head.is-scrolled .mark-white,.site-head.is-solid .mark-white{display:none}
.site-head.is-scrolled .mark-blue,.site-head.is-solid .mark-blue{display:block}
.site-head.is-scrolled .wordmark .sky,.site-head.is-solid .wordmark .sky{color:var(--slate)}
.site-head.is-scrolled .wordmark .tribe,.site-head.is-solid .wordmark .tribe{color:var(--navy)}

@media (max-width:900px){
  :root{--head-h:102px}
  .site-head{height:auto}
  .site-head .shell{flex-wrap:wrap;height:auto;row-gap:0;padding-bottom:0}
  .site-head .brand{min-height:64px}
  .site-nav{display:flex;order:9;width:100%;margin:0;gap:18px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--head-h) + 56px) 24px 160px;
  background:var(--deep);color:#fff;overflow:hidden;text-align:center;
}
@media (min-height:0){.hero{min-height:max(640px,100svh)}}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  z-index:0;user-select:none;pointer-events:none;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,18,32,.78) 0%,rgba(11,18,32,.52) 45%,rgba(11,18,32,.38) 72%,rgba(11,18,32,.6) 100%);
}
.hero .shell{position:relative;z-index:2;max-width:820px;display:flex;flex-direction:column;align-items:center}
.hero-mark{width:79px;height:96px;object-fit:contain;margin-bottom:22px;filter:drop-shadow(0 6px 24px rgba(11,18,32,.5))}
.hero h1{font-size:clamp(44px,7vw,72px);font-weight:800;text-shadow:0 2px 24px rgba(11,18,32,.6)}
.hero h1 .wordmark{letter-spacing:.04em}
.hero .tagline{
  margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(11,18,32,.6);
}
.hero .lead{
  margin-top:24px;max-width:60ch;font-size:clamp(17px,2vw,19px);line-height:1.6;
  color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(11,18,32,.7);
}
.hero .stores{margin-top:36px;justify-content:center}
.hero .fine{margin-top:22px;font-size:13px;color:rgba(255,255,255,.7);text-shadow:0 1px 12px rgba(11,18,32,.7)}
.swoop{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;width:100%;
  height:clamp(56px,9vw,140px);display:block;pointer-events:none;
}
.swoop path{fill:var(--page)}
@media (max-width:600px){.hero-bg{object-position:50% 38%}}

/* ── store buttons ───────────────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stores.center{justify-content:center}
.store{
  display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;
  border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;
  background:rgba(11,18,32,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-align:left;line-height:1.15;transition:background .15s ease,border-color .15s ease;
}
.store:hover{text-decoration:none;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.store svg{width:22px;height:22px;flex:none}
.store small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.store b{display:block;font-weight:700;font-size:15px}
.band--light .store{border-color:var(--border);color:var(--ink);background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.band--light .store:hover{background:var(--page);border-color:var(--soft)}
.band--light .store small{color:var(--muted);opacity:1}
.band--light .store svg{color:var(--accent)}
.band--dark .store{background:var(--dark-panel)}

/* ── sections ────────────────────────────────────────────────────────── */
.band{padding:clamp(64px,9vw,120px) 0}
.band--light{background:var(--page);color:var(--ink)}
.band--light + .band--light{padding-top:0}
.band--dark{background:var(--dark);color:#fff}
.eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.band--dark .eyebrow{color:var(--accent-dark)}
.band h2{font-size:clamp(30px,4.5vw,52px);line-height:1.05;letter-spacing:-.01em;max-width:22ch}
.band h2,.close h2,.close .quote{text-wrap:balance}
.center h2{margin-left:auto;margin-right:auto}
.lead{margin-top:18px;font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch}
.band--dark .lead{color:var(--dark-muted)}
.section-head{margin-bottom:44px}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  padding:26px 24px 28px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);
}
.band--dark .card{background:var(--dark-panel);border-color:var(--dark-line)}
.card h3{font-size:18px;font-weight:700;letter-spacing:-.005em;line-height:1.25}
.card p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.band--dark .card p{color:var(--dark-muted)}
@media (max-width:1000px){.cards,.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards,.cards--3{grid-template-columns:1fr}}

.stores-row{margin-top:48px}

/* ── split layout ────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center}
.split--flip{grid-template-columns:300px minmax(0,1fr)}
.split--flip .split-copy{order:2}
.split--flip .split-frame{order:1}
.split .cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
.split-frame{display:flex;flex-direction:column;align-items:center;justify-self:center}
.split-frame figcaption{margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:.02em;text-align:center}
.band--dark .split-frame figcaption{color:rgba(255,255,255,.5)}
@media (max-width:900px){
  .split,.split--flip{grid-template-columns:1fr;gap:40px}
  .split-copy{display:contents}
  .split-copy > .rv:first-child{order:1}
  .split-frame{order:2;margin:0 auto}
  .split .cards{order:3;margin-top:0}
  .ladder-ways{order:4}
  .ladder-note{order:5}
}
@media (max-width:600px){.split .cards{grid-template-columns:1fr}}

/* ── device frame ────────────────────────────────────────────────────── */
.device{
  width:280px;max-width:100%;padding:10px;border-radius:40px;margin:0;
  background:#0B1220;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 48px -16px rgba(11,18,32,.45);
}
.band--dark .device{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 24px 48px -12px rgba(0,0,0,.6)}
.device img{width:100%;border-radius:32px;background:#0B1220}
.device img.crop{object-fit:cover;object-position:top}
.device img.crop-replay{aspect-ratio:800/1624}
.device img.crop-explore{aspect-ratio:800/1486}
@media (max-width:600px){
  .device{width:min(280px,calc(100vw - 48px))}
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px;font-size:17px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:6px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq details p{padding:0 40px 22px 4px;font-size:16px;line-height:1.65;color:var(--muted)}

/* ── closing + footer ────────────────────────────────────────────────── */
.close{background:var(--deep);color:#fff;padding:clamp(72px,9vw,120px) 0 clamp(64px,8vw,96px)}
.close .quote{
  max-width:26ch;margin:0 auto;font-size:clamp(22px,3vw,32px);font-weight:600;line-height:1.3;
  letter-spacing:-.01em;color:rgba(255,255,255,.62);
}
.close h2{margin-top:36px;font-size:clamp(30px,4.5vw,52px)}
.close .line{margin-top:16px;font-size:18px;color:var(--dark-muted)}
.close .stores{margin-top:36px}
.close .fine{margin-top:20px;font-size:13px;color:rgba(255,255,255,.55)}
.site-foot{
  background:var(--deep);padding:36px 0 44px;border-top:1px solid var(--dark-line);
  font-size:14px;color:rgba(255,255,255,.62);
}
.site-foot .shell{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.site-foot img{width:18px;height:22px;object-fit:contain;opacity:.9}
.site-foot nav{display:flex;gap:8px;margin-left:auto;align-items:center}
.site-foot a{color:rgba(255,255,255,.78);display:inline-block;padding:11px 4px}
.site-foot a:hover{color:#fff}
.site-foot .dot{color:rgba(255,255,255,.3)}
.site-foot .mail{margin-left:18px}
@media (max-width:600px){
  .site-foot nav{margin-left:0;width:100%;flex-wrap:wrap;gap:4px 12px}
  .site-foot .mail{margin-left:0;width:100%}
}

/* ── legal / plain pages ─────────────────────────────────────────────── */
.page{padding:calc(var(--head-h) + 56px) 0 clamp(64px,9vw,120px)}
.prose{max-width:720px;margin:0 auto;padding:0 24px}
.prose h1{font-size:clamp(32px,5vw,48px);line-height:1.05}
.prose .note{margin-top:14px;font-size:15px;color:var(--muted)}
.prose h2{font-size:22px;margin-top:40px}
.prose p{margin-top:14px;font-size:16px;line-height:1.7;color:#334155}
.prose ul{margin:12px 0 0;padding-left:22px;color:#334155;line-height:1.7}
.prose li{margin-top:6px}
.prose a{font-weight:600}

/* ── reveal on scroll ────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .btn,.store,.faq summary::after{transition:none}
}

/* ── stripe glyph + ladder list (journey page) ───────────────────────── */
.stripe-badge{
  display:inline-flex;align-items:flex-end;gap:3px;padding:0 4px;margin-bottom:14px;
  border-radius:4px;background:rgba(18,18,18,.88);
}
.stripe-badge i{display:block;width:4px;height:22px;background:rgba(122,132,144,.42)}
.stripe-badge i.on{background:#f2bc14}
.ladder-ways{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;
  font-size:14px;line-height:1.5;color:var(--muted);
}
.ladder-ways li{position:relative;padding-left:16px}
.ladder-ways li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:2px;background:var(--accent)}
.ladder-ways b{font-weight:700;color:var(--ink)}
.ladder-ways li:last-child:nth-child(odd){grid-column:1/-1}
.ladder-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.band--dark .ladder-ways{color:var(--dark-muted)}
.band--dark .ladder-ways b{color:#fff}
.band--dark .ladder-ways li::before{background:var(--accent-dark)}
.split .cards > .card:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:600px){
  .ladder-ways{grid-template-columns:1fr}
  .split .cards > .card:last-child:nth-child(odd){grid-column:auto}
}
.split-frame{margin:0} /* drop the UA figure margin, which widened the split column past the phone width */
/* Log in placeholder until app.skytribe.org exists */
.head-login{font-size:14px;font-weight:600;color:rgba(255,255,255,.72);margin-left:auto;cursor:default}
.site-nav + .head-login{margin-left:0}
.site-head.is-scrolled .head-login,.site-head.is-solid .head-login{color:var(--muted)}
@media (max-width:900px){.head-login{display:none}}