/* spotterlifts.com — the shared site shell.
   Tokens come straight from the app's Theme.swift so the site and the app cannot drift.
   Layout, type and accessibility rules follow docs/WEBSITE_PLAN.md ("Visual direction"):
   1120px max width, 20px/48px gutters, system sans, 17px body at 1.55, cards only for FAQs.
   No scripts anywhere: the content-security policy forbids them, and the mobile menu is a
   <details> disclosure so it works without JavaScript. */

:root{
  --bg:#0B0E12; --surface:#151A20; --accent:#3D8BFF; --accent-pressed:#2F76E6; --ink:#06090D;
  --text:#F4F6FA; --text-2:#B7C0CE; --text-3:#9BA8BA;
  --line:rgba(255,255,255,.08);
  --max:1120px; --gutter:20px; --section:64px; --group:24px;
}
@media (min-width:768px){
  :root{ --gutter:48px; --section:96px; }
}

*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  background:var(--bg); color:var(--text); min-height:100svh;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
strong,b{font-weight:700}

/* Visible focus everywhere. Blue buttons swap to a light ring so the ring stays visible on blue. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn-primary:focus-visible{outline-color:var(--text)}

@media (prefers-reduced-motion:no-preference){
  a,.btn,.menu summary{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
}

.container{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* Skip link: off-screen until focused. */
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:12px 16px;border-radius:12px;
      background:var(--accent);color:var(--ink);font-weight:700;text-decoration:none}
.skip:focus-visible{top:12px;outline-color:var(--text)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:20;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding-block:8px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);text-decoration:none;
       font-size:15px;font-weight:800;letter-spacing:4px;text-indent:0}
.brand img{width:30px;height:auto;flex:none}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:4px}
.nav-links{display:none;align-items:center;gap:4px;list-style:none;margin-right:8px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:10px;
             color:var(--text-2);font-weight:600;text-decoration:none}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--accent)}

/* Mobile menu: a disclosure, no script. The panel hangs from the header's bottom edge. */
.menu{position:static}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;
              padding:10px 12px;border-radius:10px;color:var(--text-2);font-weight:600;-webkit-user-select:none;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:hover,.menu[open] summary{color:var(--text)}
.menu-icon{width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;flex:none}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}
.menu-panel{position:absolute;right:var(--gutter);top:calc(100% + 8px);min-width:220px;padding:8px;
            background:var(--surface);border:1px solid var(--line);border-radius:14px;
            box-shadow:0 16px 40px rgba(0,0,0,.45);list-style:none}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:10px;
              color:var(--text);font-weight:600;text-decoration:none}
.menu-panel a:hover{background:rgba(255,255,255,.05)}
.menu-panel a[aria-current="page"]{color:var(--accent)}

@media (min-width:768px){
  .brand{font-size:16px;letter-spacing:5px}
  .brand img{width:34px}
  .nav-links{display:flex}
  .menu{display:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;
     border-radius:12px;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover,.btn-primary:active{background:var(--accent-pressed)}
.btn-secondary{color:var(--text);border:1px solid rgba(255,255,255,.2)}
.btn-secondary:hover{border-color:var(--accent);color:var(--text)}
.btn-compact{padding:8px 14px;font-size:15px}
.btn-large{min-height:52px;padding:14px 24px;font-size:17px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--group)}

/* ---------- Page structure (inner pages; the homepage keeps its own hero styles) ---------- */
main{flex:1;position:relative}
.page{padding-block:var(--section)}
.page-head{max-width:70ch}
.page h1{font-size:clamp(34px,7vw,48px);font-weight:600;letter-spacing:-.6px;line-height:1.1;text-wrap:balance}
.page h2{font-size:clamp(28px,4vw,36px);font-weight:600;letter-spacing:-.4px;line-height:1.15;text-wrap:balance}
.page h3{font-size:20px;font-weight:700;line-height:1.3}
.lede{margin-top:16px;font-size:clamp(19px,2.4vw,21px);color:var(--text-2);text-wrap:pretty}
.section{margin-top:var(--section)}
.section > * + *{margin-top:var(--group)}
.prose{max-width:70ch}
.prose > * + *{margin-top:16px}
.prose p,.prose li{color:var(--text-2)}
.prose ul{padding-left:1.2em}
.muted{color:var(--text-3);font-size:16px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3)}

/* Numbered steps: the number sits in a small ring, the text wraps beside it. */
.steps{list-style:none;counter-reset:step;max-width:70ch}
.steps li{position:relative;counter-increment:step;padding-left:56px;min-height:40px}
.steps li + li{margin-top:var(--group)}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
                  display:flex;align-items:center;justify-content:center;
                  background:var(--surface);border:1px solid var(--line);color:var(--accent);font-weight:700;font-size:16px}
.steps strong{display:block;color:var(--text);font-size:19px;line-height:1.3;margin-bottom:4px;padding-top:6px}
.steps p{color:var(--text-2)}

/* FAQ cards: the only place a card is allowed on inner pages. */
.faq-list,.card-list{list-style:none;display:grid;gap:16px}
@media (min-width:768px){.faq-list,.card-list{grid-template-columns:1fr 1fr}}
.faq,.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.faq p,.card p{margin-top:8px;color:var(--text-2)}
.faq p + p{margin-top:12px}
.faq ol{margin-top:8px;padding-left:1.2em;color:var(--text-2)}
.faq li + li{margin-top:6px}

/* Centered short pages (404). */
.page-center{display:flex;align-items:center;justify-content:center;text-align:center}
.page-center .container{max-width:640px}
.page-center .lede{margin-inline:auto}
.page-center .actions{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:32px 40px;font-size:15px;color:var(--text-3)}
/* Plain spacing between links, no separator glyphs: a "·" pseudo-element lands at the start of the
   next row when the list wraps at phone widths. */
.footer-links{list-style:none;display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:0}
.footer-links li{display:flex;align-items:center}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none;
                border-bottom:1px solid rgba(255,255,255,.16);line-height:1.2;padding-block:1px}
.footer-links a:hover{color:var(--text);border-color:var(--accent)}
.copyright{margin-top:12px}

/* ---------- Legal pages (/privacy/, /terms/, /health-data/, /delete-account/) ---------- */
/* Legal body copy runs at 16px and no wider than 70ch (docs/WEBSITE_PLAN.md, "Type"). Every
   legal page is a DRAFT until counsel signs off: the banner below is deliberately loud, and it is
   removed only when the effective date is real. */
.legal{max-width:70ch;font-size:16px}
.legal > * + *{margin-top:14px}
.legal h2{margin-top:44px;font-size:clamp(22px,3vw,26px);font-weight:700;letter-spacing:-.2px;line-height:1.2;
          scroll-margin-top:24px}
.legal h3{margin-top:26px;font-size:18px;font-weight:700;line-height:1.3}
.legal p,.legal li,.legal td,.legal th,.legal dd{color:var(--text-2)}
.legal ul,.legal ol{padding-left:1.25em}
.legal li + li{margin-top:6px}
.legal dt{color:var(--text);font-weight:700;margin-top:12px}
.legal dd{margin-top:2px}
.legal .meta{color:var(--text-3);font-size:15px}
/* Unresolved facts are double-bracketed so they can be grepped and so no reader mistakes them for
   final text. */
.ph{color:#FFD68A;background:rgba(255,196,84,.10);border-radius:4px;padding:0 4px;font-weight:600}
.toc{padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.toc p{color:var(--text-3);font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.toc ol{margin-top:8px;padding-left:1.25em;columns:1}
@media (min-width:640px){.toc ol{columns:2;column-gap:32px}}
.toc li{break-inside:avoid;margin-top:4px}
.toc a{color:var(--text-2);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.legal table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.legal th,.legal td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal th{color:var(--text);font-weight:700;background:var(--surface)}
.legal tr:last-child td{border-bottom:0}
.callout{padding:16px 20px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 14px 14px 0}
.callout p{color:var(--text-2)}
.callout p + p{margin-top:10px}

/* ---------- Product homepage ---------- */
/* Structure follows docs/WEBSITE_PLAN.md ("Homepage copy (in order)") and the layout ruling
   ("Homepage layout", 2026-09-13): flat treatment with no accent wash, a 55/45 split hero, alternating
   image sides on desktop with heading → copy → image on mobile, the full-screen capture only in the
   hero (22px corners), readable interface crops in the feature sections (no second rounding, no
   bezels, no shadows), and an open centered closing section. */
.hero-section{padding-block:var(--section) 0}
.hero-grid{display:grid;gap:40px;align-items:center}
.hero-copy h1{font-size:clamp(40px,7.5vw,64px);font-weight:600;letter-spacing:-1.2px;line-height:1.05;text-wrap:balance}
.hero-copy .lede{max-width:34ch}
/* "Join the beta" is the only filled button; "See it in action ↓" is a text link with a 44px target. */
.hero-copy .actions{align-items:center;gap:8px 24px}
.link-action{display:inline-flex;align-items:center;min-height:44px;padding:10px 4px;font-size:16px;font-weight:600;
             color:var(--accent);text-decoration:none}
.link-action:hover{text-decoration:underline}
.link-action span{margin-left:6px}
.availability{margin-top:var(--group);color:var(--text-3);font-size:16px}
.hero-shot{max-width:280px;margin-inline:auto;width:100%}
@media (min-width:768px){
  .hero-grid{grid-template-columns:11fr 9fr;gap:56px}
  .hero-shot{max-width:320px;margin-inline:0;justify-self:end}
}
.shot{margin:0}
.shot img{width:100%;height:auto;display:block}
.shot-full img{border-radius:22px;background:#000}
.shot figcaption{margin-top:10px;font-size:14px;color:var(--text-3);text-align:center}
.feature{padding-block:var(--section) 0}
/* In-page anchor targets (Home #demo, the Features sections) clear the header when jumped to. */
.feature[id],[id="how"]{scroll-margin-top:24px}
.feature-grid{display:grid;gap:32px;align-items:center}
.feature-copy h2{font-size:clamp(28px,4vw,36px);font-weight:600;letter-spacing:-.4px;line-height:1.15;text-wrap:balance}
.feature-copy p{margin-top:16px;color:var(--text-2);max-width:52ch;text-wrap:pretty}
.feature-copy .note{margin-top:16px;font-size:15px;color:var(--text-3)}
/* Interface crops run wider than a phone so the text stays readable. DOM order is copy then image,
   which is the mobile order; desktop alternates sides with grid placement only. */
.feature-shot{max-width:360px;margin-inline:auto;width:100%}
@media (min-width:768px){
  /* Copy stays vertically CENTRED beside its image (Astra 2026-09-16: top-aligning short copy
     beside a tall image "merely relocates the empty space"). The fix for dead space is bounding
     the image, below. */
  .feature-grid{grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:64px}
  .feature-grid.flip{grid-template-columns:minmax(300px,420px) minmax(0,1fr)}
  .feature-grid.flip .feature-copy{order:2}
  /* Height cap: the whole screenshot treatment is at most 560px or 70% of the viewport, whichever
     is smaller, aspect ratio kept, and the WRAPPER SHRINKS WITH IT. Capping only the <img> height
     letterboxed a tall phone capture inside an empty 420px box. So the figure's width is derived
     from the image's own aspect ratio instead: set --ar (width / height) on each figure, and a tall
     capture simply becomes narrow. The <img> keeps width:100%/height:auto, which preserves lazy
     loading and the pre-load aspect ratio (width:auto makes an unloaded lazy image measure 0x0). */
  .feature-shot{margin-inline:auto;max-width:min(420px, calc(min(560px, 70vh) * var(--ar, 10)))}
}
}
/* Compact text-only section until a real Apple Watch capture exists. */
.feature-compact .feature-copy{max-width:60ch}
.closing{padding-block:80px var(--section);text-align:center}
@media (min-width:768px){.closing{padding-top:112px}}
.closing h2{font-size:clamp(28px,4vw,36px);font-weight:600;letter-spacing:-.4px;line-height:1.15}
.closing .actions{justify-content:center}
.closing .data-note{margin-top:var(--group);max-width:52ch;margin-inline:auto;color:var(--text-3);font-size:15px}

/* Marketing cards (Home breadth, Features privacy close). Same treatment as .faq — one card look
   site-wide — but the heading is styled by the CARD, not by an ancestor wrapper. */
.card h3{font-size:20px;font-weight:700;line-height:1.3}
.card .link-action{margin-top:8px;padding-inline:0}
.card-list{margin-top:var(--group)}
/* A section that needs more than one capture (the Watch section: two Watch screens and a Live
   Activity). Watch captures keep their rounded face; the pair sits side by side above the wider
   lock-screen card. */
.shot-stack{display:grid;gap:16px}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shot-watch img{border-radius:34px;background:#000}
.jump{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:var(--group)}
.shot-stack > .shot img{border-radius:22px}
@media (min-width:768px){.card-list-3{grid-template-columns:repeat(3,1fr)}}

/* Screenshot placeholder (replace before launch) */
.shot-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:var(--ar,0.66);border:2px dashed currentColor;opacity:.6;text-align:center;padding:1rem;margin:0}
.shot-placeholder span{font-size:.875rem}