/* ============================================================
   Base: reset + document defaults + typography.
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* Prevent iOS rubber-band overscroll bounce on the whole document. */
    overscroll-behavior: none;
}

body {
    font-family: var(--font-sans);
    font-size:   var(--fs-base);
    line-height: var(--lh-body);
    color:       var(--ink);
    background:  var(--paper);
    min-height:  100vh;
    min-height:  100svh;
    /* Respect the phone's safe area on both ends */
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* Safety net: nothing on the page should force horizontal scroll */
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* ============================================================
   Native-app feel — apply to every touchable element.
   These prevent the tell-tale "this is actually a web page" cues:
   - No blue tap-highlight flash
   - No double-tap-to-zoom
   - No long-press context menu on buttons
   - No accidental text selection while tapping
   ============================================================ */

button,
a,
[role="button"],
.chip,
[data-open-waitlist],
[data-close-waitlist] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

button, input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
}

button { cursor: pointer; }

a {
    color: inherit;
    text-decoration: none;
}

/* Hover color only on devices with a real pointer — on iPhone a tapped
   link would otherwise stay "stuck" in its hover color. */
@media (hover: hover) {
    a:hover { color: var(--accent); }
}

[hidden] { display: none !important; }

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ---- Type utilities ---- */

.h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
}

.h2 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
}

.h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    font-weight: 600;
}

.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ink-3);
}

.body-lg { font-size: var(--fs-lg); line-height: var(--lh-body); }
.meta    { font-size: var(--fs-sm); color: var(--ink-3); }
.mono    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Layout containers ---- */

.container {
    width: 100%;
    max-width: var(--max-w-content);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.app-frame {
    width: 100%;
    max-width: var(--max-w-app);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

/* Vertical rhythm */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.stack-xl > * + * { margin-top: var(--sp-10); }