/* slab.ski — the landing page for Slab.
   Brand tokens follow native/Slab/Design/Tokens.swift: ink, logo yellow, snow blue.
   Geist at regular and medium weight only. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #070a11;
  --ink-2: #0e131d;
  --ink-3: #161c28;
  --paper: #f2f4f7;
  --white: #ffffff;
  --accent: #ffd016;
  --data: #4ba8e8;
  --text: #070a11;
  --text-2: #4a5160;
  --on-ink: #ffffff;
  --on-ink-2: rgba(255, 255, 255, 0.66);
  --hair: rgba(7, 10, 17, 0.1);
  --hair-ink: rgba(255, 255, 255, 0.12);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--on-ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.hl { color: var(--accent); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 3; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.lockup { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.lockup img { width: 28px; height: 28px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--on-ink-2); }
.nav-links a:hover { color: var(--on-ink); }
.nav-links .store { color: var(--ink); }

/* ---------- buttons ---------- */
.store { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease; }
.store:hover { transform: translateY(-1px); }
.store svg { width: 18px; height: 18px; }
.nav-links .store { padding: 9px 16px 9px 13px; font-size: 14px; }
.nav-links .store svg { width: 15px; height: 15px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero-photo { position: absolute; inset: 0; background: url("/assets/photos/welcome.jpg") 72% 30% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,17,0.92) 0%, rgba(7,10,17,0.7) 38%, rgba(7,10,17,0.05) 72%), linear-gradient(0deg, rgba(7,10,17,0.95) 0%, rgba(7,10,17,0) 40%); }
.hero .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(56px, 9vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(48px, 8.4vw, 112px); max-width: 9.5em; }
.hero .lede { margin-top: 24px; max-width: 30em; font-size: clamp(18px, 1.6vw, 21px); color: rgba(255,255,255,0.8); }
.hero .cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.hero .cta small { font-size: 14px; color: var(--on-ink-2); }
.hero-phone { width: clamp(220px, 24vw, 320px); border-radius: 28px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }

/* ---------- stats band ---------- */
.stats { border-top: 1px solid var(--hair-ink); border-bottom: 1px solid var(--hair-ink); background: var(--ink-2); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 32px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--hair-ink); }
.stat b { display: block; font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--on-ink-2); }

/* ---------- screens strip ---------- */
.screens { padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 8vw, 96px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.section-head h2 { font-size: clamp(36px, 5vw, 64px); max-width: 11em; }
.section-head p { max-width: 24em; color: var(--on-ink-2); }
.strip { margin-top: 48px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 20px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
@media (min-width: 1240px) { .strip { padding-left: calc((100vw - var(--max)) / 2 + var(--gutter)); padding-right: calc((100vw - var(--max)) / 2 + var(--gutter)); } }
.strip img { flex: 0 0 auto; width: clamp(220px, 22vw, 300px); border-radius: 18px; scroll-snap-align: start; scroll-margin-left: var(--gutter); }

/* ---------- features ---------- */
.features { background: var(--paper); color: var(--text); padding: clamp(72px, 10vw, 136px) 0; }
.features .section-head p { color: var(--text-2); }
.grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; }
.feature { background: var(--white); padding: 32px 28px 36px; }
.feature .icon { width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--accent); display: grid; place-items: center; }
.feature .icon svg { width: 20px; height: 20px; }
.feature h3 { margin-top: 22px; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.feature p { margin-top: 10px; color: var(--text-2); font-size: 16px; }

/* ---------- pro ---------- */
.pro { position: relative; overflow: hidden; background: var(--ink); }
.pro .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(72px, 10vw, 128px); }
.pro-photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: url("/assets/photos/pass.jpg") 50% 40% / cover no-repeat; }
.pro .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.pro h2 { margin-top: 24px; font-size: clamp(36px, 5vw, 64px); }
.pro .lede { margin-top: 20px; color: var(--on-ink-2); max-width: 30em; }
.pro ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; }
.pro li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair-ink); }
.pro li:last-child { border-bottom: 1px solid var(--hair-ink); }
.pro li svg { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.pro .fine { margin-top: 24px; font-size: 14px; color: var(--on-ink-2); }

/* ---------- safety + closing ---------- */
.safety { background: var(--ink-2); border-top: 1px solid var(--hair-ink); }
.safety .wrap { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.safety svg { width: 26px; height: 26px; color: var(--accent); margin-top: 2px; }
.safety p { max-width: 52em; color: var(--on-ink-2); font-size: 16px; }
.safety strong { font-weight: 500; color: var(--on-ink); }

.closing { position: relative; overflow: hidden; text-align: left; }
.closing-photo { position: absolute; inset: 0; background: url("/assets/photos/splash.jpg") 50% 35% / cover no-repeat; opacity: 0.55; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(7,10,17,0.4) 60%, rgba(7,10,17,0.8) 100%); }
.closing .wrap { position: relative; z-index: 2; padding-top: clamp(96px, 14vw, 180px); padding-bottom: clamp(72px, 10vw, 120px); }
.closing h2 { font-size: clamp(44px, 7vw, 96px); max-width: 9em; }
.closing .cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }
.closing .cta small { font-size: 14px; color: var(--on-ink-2); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hair-ink); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--on-ink-2); }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--on-ink); }

/* ---------- legal page ---------- */
.legal { background: var(--paper); color: var(--text); }
.legal .nav { position: static; background: var(--ink); color: var(--on-ink); }
.legal main { padding: clamp(48px, 8vw, 96px) 0; }
.legal article { max-width: 720px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); }
.legal .meta { margin-top: 16px; color: var(--text-2); font-size: 15px; }
.legal h2 { margin-top: 48px; font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
.legal p, .legal li { color: #2a303b; }
.legal p { margin-top: 14px; }
.legal ul { margin: 14px 0 0; padding-left: 20px; }
.legal li { margin-top: 8px; }
.legal li strong, .legal p strong { font-weight: 500; color: var(--text); }
.legal a { color: var(--text); text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-phone { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .pro .wrap { grid-template-columns: 1fr; }
  .pro-photo { aspect-ratio: 16 / 10; }
  .section-head { flex-direction: column; align-items: start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav-links a:not(.store) { display: none; }
  .hero { min-height: 92svh; }
  .hero-photo { background-position: 62% 30%; }
  .hero::after { background: linear-gradient(0deg, rgba(7,10,17,0.96) 0%, rgba(7,10,17,0.75) 45%, rgba(7,10,17,0.15) 80%); }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--hair-ink); }
  .grid { grid-template-columns: 1fr; }
  .feature { padding: 26px 22px 28px; }
  .strip img { width: 68vw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .store { transition: none; } }