:root {
  --bg: #F4F0E4;
  --ink: #17140D;
  --ink-soft: #5C5648;
  --ink-faint: #6E6757;
  --accent: #1F7A45;
  --accent-ink: #1F5C33;
  --accent-tint: #E1EFE1;
  --line: rgba(27, 24, 17, 0.09);
  --header: 76px;
  --max: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 30; height: var(--header);
  background: rgba(244, 240, 228, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.brand img { width: 42px; height: 42px; border-radius: 11px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(27, 24, 17, .4); }
.btn-accent { background: var(--accent); color: #FBFAF4; }
.btn-dark { background: var(--ink); color: #FBFAF4; min-height: 56px; padding: 0 26px; border-radius: 14px; font-size: 17px; }
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.glow-a { width: 620px; height: 620px; right: -120px; top: -80px; background: rgba(166, 211, 160, .38); }
.glow-b { width: 520px; height: 520px; left: -200px; bottom: -220px; background: rgba(190, 222, 180, .35); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: calc(100vh - var(--header)); padding-top: 20px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px 0 60px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; background: var(--accent-tint); color: var(--accent-ink);
  font-weight: 600; font-size: 15px; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(46, 154, 82, .28);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9A52; }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; }
.hero .lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); max-width: 480px; }
.hero-stage { height: calc(100vh - var(--header)); min-height: 560px; margin-right: -8vw; }

model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; }
model-viewer::part(default-progress-bar) { display: none; }
.poster { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Flat phone frame: posters and small screens. */
.phone {
  position: relative; width: 260px; aspect-ratio: 603 / 1311; border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #2E2B27, #0E0D0B);
  box-shadow: 0 50px 80px -34px rgba(27, 24, 17, .45), 0 8px 24px -10px rgba(27, 24, 17, .25), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.phone::after { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 30%; height: 3.2%; min-height: 18px; border-radius: 999px; background: #050507; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; }

/* Intro */
.section-intro { text-align: center; max-width: 780px; margin: 0 auto; padding: 120px 28px 40px; }
.section-intro h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
.section-intro p { margin-top: 16px; font-size: 20px; color: var(--ink-soft); }

/* Story: tall section, pinned stage. --steps is set from the markup by script. */
.story { position: relative; height: calc(var(--steps, 6) * 90vh + 100vh); }
.story-pin { position: sticky; top: var(--header); height: calc(100vh - var(--header)); overflow: hidden; }
.story-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.story-text { position: relative; height: 340px; padding-left: 44px; }
.story-dots { position: absolute; left: 0; top: 50%; transform: translateY(-50%); list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.story-dots li { width: 6px; height: 6px; border-radius: 99px; background: rgba(27, 24, 17, .2); transition: height .35s ease, background-color .35s ease; }
.story-dots li.is-active { height: 34px; background: var(--accent); }
.step { position: absolute; left: 44px; right: 0; top: 50%; display: flex; flex-direction: column; gap: 18px; opacity: 0; will-change: opacity, transform; }
.step .icon { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-tint); display: grid; place-items: center; }
.step h3 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; max-width: 480px; }
.step p { font-size: 20px; color: var(--ink-soft); max-width: 440px; }
.step .shot { display: none; }
.story-stage { height: 100%; margin-right: -6vw; }

/* Gallery */
.gallery { background: #FFFEFA; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 110px 0 120px; overflow: hidden; }
.gallery-head { text-align: center; }
.gallery-head h2 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -0.03em; font-weight: 800; line-height: 1.05; }
.gallery-head p { margin-top: 14px; font-size: 20px; color: var(--ink-soft); }
.gallery-track { display: flex; gap: 26px; width: max-content; padding: 64px 32px 20px; will-change: transform; }
.gallery-track img { width: 230px; aspect-ratio: 603 / 1311; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 50px -28px rgba(27, 24, 17, .45), 0 0 0 1px var(--line); }

/* CTA */
.cta { padding: 110px 32px 120px; }
.cta-card {
  border-radius: 34px; padding: 110px 32px; text-align: center;
  background: radial-gradient(90% 80% at 50% 120%, #DCEBD9 0%, #EEF1E4 50%, #F7F4EA 100%);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta-card h2 { font-size: clamp(36px, 4.6vw, 58px); letter-spacing: -0.035em; font-weight: 800; line-height: 1.04; }
.cta-card p { font-size: 20px; color: var(--ink-soft); max-width: 520px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 34px 0 44px; font-size: 15px; color: var(--ink-faint); }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer nav a { color: var(--ink); font-weight: 500; }
.site-footer nav a:hover { color: var(--accent); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.fineprint { font-size: 14px; color: var(--ink-faint); max-width: 480px; }

/* Small screens: the story still pins, stacked — phone on top, text below, dots in a row. */
@media (max-width: 900px) {
  :root { --header: 64px; }
  .wrap { padding: 0 20px; }
  .brand { font-size: 19px; }
  .brand img { width: 36px; height: 36px; }
  .site-header .btn { min-height: 40px; padding: 0 16px; font-size: 15px; transition: opacity .3s ease, transform .3s ease; }
  /* The header button stays hidden while the hero's own download button is on screen. */
  .hero-cta-visible .site-header .btn { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .hero-copy { padding: 30px 0 0; gap: 20px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 56px); }
  .hero-stage { height: 520px; min-height: 0; margin: 0 -20px; }
  .glow-a { width: 380px; height: 380px; right: -160px; top: 120px; }
  .section-intro { padding: 88px 24px 24px; }
  .section-intro h2 { font-size: clamp(30px, 8.4vw, 44px); }
  .section-intro p { font-size: 17px; }

  .story { height: calc(var(--steps, 6) * 75svh + 100svh); }
  .story-pin { height: calc(100svh - var(--header)); }
  .story-grid { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
  .story-stage { order: -1; flex: 0 0 56%; margin: 0 -20px; }
  .story-text { flex: 1 1 auto; height: auto; padding: 0 0 44px; }
  .story-dots { top: auto; bottom: 18px; left: 50%; transform: translateX(-50%); flex-direction: row; }
  .story-dots li.is-active { width: 34px; height: 6px; }
  .step { left: 0; top: 46%; gap: 12px; }
  .step .icon { width: 44px; height: 44px; border-radius: 13px; }
  .step h3 { font-size: clamp(26px, 7.2vw, 36px); }
  .step p { font-size: 16px; }

  .gallery { padding: 80px 0 90px; }
  .gallery-head h2 { font-size: clamp(30px, 8.4vw, 44px); }
  .gallery-head p { font-size: 17px; }
  .gallery-track { gap: 18px; padding-top: 44px; }
  .gallery-track img { width: 150px; border-radius: 20px; }
  .cta { padding: 80px 20px 90px; }
  .cta-card { padding: 64px 22px; border-radius: 28px; }
  .cta-card h2 { font-size: clamp(32px, 8.8vw, 46px); }
  .cta-card p { font-size: 17px; }
  .site-footer .row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .gallery-track { transform: none !important; overflow-x: auto; width: auto; }
  .gallery { overflow-x: auto; }
}

/* ── Dark field theme ─────────────────────────────────────────
   The page sits on the same violet lattice as www.maxsalvato.com/apps/
   (drawn by field.js), on a lighter ground: #1C1930 against /apps/' #0A0912.
   Everything below turns the light page into light-on-dark. The green accent
   stays for filled buttons; where green is text or a mark on the dark ground
   it takes a lighter tint so it keeps its contrast. */
:root {
  --bg: #1C1930;
  --ink: #EDE8DC;
  --ink-soft: rgba(237, 232, 220, .74);
  --ink-faint: rgba(237, 232, 220, .56);
  --accent: #1F7A45;
  --accent-light: #7ED69A;
  --accent-ink: #9BE3B2;
  --accent-tint: rgba(76, 192, 122, .14);
  --line: rgba(255, 255, 255, .1);
}
body { background: var(--bg); }
::selection { background: rgba(160, 152, 255, .4); }
:focus-visible { outline-color: var(--accent-light); }

.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.field-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: overlay; }

.site-header { background: rgba(28, 25, 48, .74); }
.btn:hover { box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6); }
.btn-dark { background: var(--ink); color: #1C1930; }
.btn-accent { color: #F6F4EC; }

.glow-a { background: rgba(120, 110, 255, .2); }
.glow-b { background: rgba(76, 192, 122, .14); }
.badge { box-shadow: inset 0 0 0 1px rgba(126, 214, 154, .3); }
.badge::before { background: var(--accent-light); }

.phone { box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .7), 0 8px 24px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .09); }

.story-dots li { background: rgba(255, 255, 255, .22); }
.story-dots li.is-active { background: var(--accent-light); }
.step .icon svg[stroke] { stroke: var(--accent-light); }
.step .icon svg[fill="#1F7A45"] { fill: var(--accent-light); }

.gallery { background: rgba(255, 255, 255, .035); }
.gallery-track img { box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .75), 0 0 0 1px var(--line); }

.cta-card {
  background: radial-gradient(90% 80% at 50% 120%, rgba(76, 192, 122, .24) 0%, rgba(120, 110, 255, .08) 50%, rgba(255, 255, 255, .03) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.site-footer nav a:hover { color: var(--accent-light); }

/* ── Rails header ─────────────────────────────────────────────
   The www.maxsalvato.com header: no bar, two quiet rails in the corners, set
   in Geist Mono. Left, the path back through the site (slvt001.com / apps /
   autonest); right, the Abu Dhabi clock and the download chip, built like the
   homepage's outlined buttons. The header keeps its sticky slot so the story
   still pins under it, but its ground is a fade, so content dissolves before
   it reaches the rails. Shared with /apps/autonest/privacy. */
:root { --header: 64px; }
.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 400; }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(28, 25, 48, .95) 0%, rgba(28, 25, 48, .78) 55%, rgba(28, 25, 48, 0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
}
.rail { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .5); min-width: 0; }
.rail a { color: rgba(255, 255, 255, .5); transition: color .3s ease; white-space: nowrap; }
.rail a:hover, .rail a:focus-visible { color: #fff; }
.rail a[aria-current="page"] { color: rgba(255, 255, 255, .82); }
.rail :focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.rail-home { display: inline-flex; align-items: center; gap: 9px; }
.rail-arw { display: inline-block; width: 0; overflow: hidden; opacity: 0;
            transition: width .35s cubic-bezier(.2, .8, .3, 1), opacity .3s ease; }
.rail-home:hover .rail-arw, .rail-home:focus-visible .rail-arw { width: 1.3em; opacity: 1; }
.pip { width: 5px; height: 5px; border-radius: 50%; background: #E8E1D3; flex: none; }
.rail-sep { opacity: .45; }
.rail--tr { gap: 18px; }
.rail-clock { white-space: nowrap; }
.rail-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px;
  border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
  color: var(--accent-light) !important;
  transition: background-color .3s ease, color .3s ease, opacity .3s ease, transform .3s ease;
}
.rail-cta svg { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.rail-cta:hover { background: var(--accent-light); color: #10261A !important; }
.rail-cta:hover svg { transform: translate(3px, -3px); }
.rail-cta[aria-disabled="true"] { cursor: default; }
.rail-cta[aria-disabled="true"]:hover { background: rgba(126, 214, 154, .12); color: var(--accent-light) !important; }
.rail-cta[aria-disabled="true"]:hover svg { transform: none; }

@media (max-width: 900px) {
  :root { --header: 56px; }
  .site-header { padding: 0 16px; }
  .rail-clock, .rail-domain, .rail-sep--first { display: none; }
  .mono { letter-spacing: .12em; }
  .rail-cta { padding: 8px 11px; }
  .hero-cta-visible .rail-cta { opacity: 0; transform: translateY(-6px); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-arw, .rail-cta, .rail-cta svg { transition: none; }
}

/* The hero's second glow (bottom left) is gone; kept hidden in case an older
   cached copy of the HTML still carries the element. */
.glow-b { display: none; }

/* ── Launch screen ───────────────────────────────────────────
   The app's gold splash (LaunchScreenView.swift), held over the page until
   the 3D phone and its screens are loaded. Colours are the app's own assets:
   PosterGold #EF9F27, OnGoldText #1A1712. Shown only when the head script
   marks the page as booting, so a page without JS never sees it; and if
   loader.js never runs, the failsafe animations below clear it anyway. */
.boot { display: none; }
.booting { overflow: hidden; animation: boot-unlock 0s 16s forwards; }
.booting .boot {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; padding: 0 30px max(46px, env(safe-area-inset-bottom));
  background: #EF9F27; color: #1A1712;
  animation: boot-failsafe .4s ease 16s forwards;
}
@keyframes boot-unlock { to { overflow: visible; } }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }

.boot-centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.boot-logo {
  display: block; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 26px;
  background: none; cursor: pointer; overflow: hidden;
  box-shadow: 0 8px 22px rgba(35, 26, 8, .22);
  transition: transform .1s ease-out, box-shadow .1s ease-out;
  animation: boot-settle .5s ease-out both;
}
.boot-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boot-logo:focus-visible { outline: 3px solid #1A1712; outline-offset: 4px; }
.boot.is-pressed .boot-logo { transform: scale(.9); box-shadow: 0 1px 2px rgba(35, 26, 8, .22); }
.boot-word { margin-top: 16px; display: flex; flex-direction: column; gap: 5px; animation: boot-settle .5s ease-out .08s both; }
.boot-word strong { font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.boot-word span { font-size: 14px; font-weight: 600; opacity: .7; }

.boot-stack { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 9px; }
.boot-kicker { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
               opacity: .55; animation: boot-fade .5s ease-out both; }
.boot-row { display: flex; align-items: center; gap: 10px; animation: boot-row .4s ease-out both; }
.boot-row:nth-child(2) { animation-delay: .3s; }
.boot-row:nth-child(3) { animation-delay: .42s; }
.boot-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(26, 23, 18, .12);
            display: grid; place-items: center; flex: none; }
.boot-name { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.boot-val { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11.5px; opacity: .62; font-variant-numeric: tabular-nums; }
.boot-rule { position: relative; height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(26, 23, 18, .16); overflow: hidden; }
.boot-rule i { position: absolute; inset: 0; border-radius: 2px; background: #1A1712;
               transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.boot-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0;
             border: 3px solid rgba(26, 23, 18, .45); border-radius: 50%;
             transform: translate(-50%, -50%); pointer-events: none; }
.boot.is-fading { transition: opacity .35s ease-out; opacity: 0; }

@keyframes boot-settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes boot-fade { from { opacity: 0; } to { opacity: .55; } }
@keyframes boot-row { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .boot-logo, .boot-word, .boot-kicker, .boot-row { animation: none; }
  .boot-kicker { opacity: .55; }
}

/* Sticky fix (Safari). body { overflow-x: hidden } makes body a scroll
   container whenever its overflow is not propagated to the viewport, which is
   exactly what happens while the launch screen locks <html>. Safari then pins
   the sticky header and the story to body instead of the viewport, and neither
   ever sticks. clip hides the sideways spill without creating a scroll
   container; hidden stays as the fallback for browsers without clip. */
body { overflow-x: hidden; overflow-x: clip; }

/* The fade alone let scrolling text show through behind the rails; the
   header's own band is now near-solid, and the fade runs just below it. */
.site-header { background: rgba(28, 25, 48, .97); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 25, 48, .97), rgba(28, 25, 48, 0));
}