/* ============================================================
   Marbles — marketing site styles
   Tokens lifted from the app's DESIGN.md ("Gasoline Alley").
   Warm cream paper, asphalt ink, a single fixed brick-red accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Garage palette */
    --cream:      #f5f1e6;  /* the page */
    --card:       #ffffff;  /* cards on paper */
    --parchment:  #ede7d9;  /* elevated surfaces */
    --ink:        #1a1916;  /* asphalt — primary text */
    --ink-soft:   #6b675e;  /* oil — secondary text */
    --dust:       #a8a399;  /* tertiary text, mono labels */
    --seam:       #dcd5c7;  /* hairline borders */

    /* Brick is the anchor accent — fixed, per the Brick Rule. */
    --brick:      #9c2b23;
    --brick-ink:  #9c2b23;  /* same; readable on cream */

    /* Track-type accents — used only as small chips, never as buttons. */
    --street:     #1e5bc6;  /* electric blue */
    --road:       #5b6b3c;  /* racing olive */
    --oval:       #9c2b23;  /* brick red */
    --victory:    #0e7a3c;

    --border: var(--seam);

    --radius-card: 20px;
    --radius-card-sm: 16px;

    /* Spacing — mirrors the app's xs..content ramp. */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 48px;
    --space-5xl: 64px;
    --space-6xl: 96px;

    /* Type. ui-rounded resolves to SF Pro Rounded on Apple platforms.
       Body uses SF Pro Text for reading clarity; mono is the timing-sheet voice. */
    --font-display: ui-rounded, "SF Pro Rounded", "SF Compact Rounded",
        system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo,
        "Roboto Mono", monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--brick-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Layout ---------- */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
}

/* A tracked-out monospaced caps label — the timing-sheet voice. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dust);
}

/* ---------- Nav ---------- */
.site-nav {
    padding: var(--space-2xl) 0;
}
.site-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
}
.brand-mark {
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 9px;
    border: 1px solid var(--seam);
}
.nav-links {
    display: flex;
    gap: var(--space-3xl);
    font-size: 15px;
    color: var(--ink-soft);
    font-weight: 500;
}
.nav-links a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
    padding: var(--space-4xl) 0 var(--space-6xl);
}
.hero .container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-5xl);
    align-items: center;
}
.hero .eyebrow { margin-bottom: var(--space-lg); }
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 0 var(--space-xl);
}
.hero h1 .accent { color: var(--brick-ink); }
.hero p.lede {
    font-size: 19px;
    color: var(--ink-soft);
    margin: 0 0 var(--space-3xl);
    max-width: 480px;
}
.cta-row {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- App Store badge (Coming soon — non-active placeholder) ---------- */
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 14px;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    box-shadow: 0 6px 16px -8px rgba(26, 25, 22, 0.35);
}
.app-store-badge.is-soon {
    cursor: default;
    opacity: 0.92;
}
.app-store-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.app-store-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}
.app-store-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
.app-store-name {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.cta-note {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- Hero visual: framed iPhone screenshot ---------- */
.hero-visual {
    display: flex;
    justify-content: center;
}
.phone {
    /* Subtle iPhone bezel. The screenshot already has the iOS status bar,
       so the frame is just the phone body. */
    width: 100%;
    max-width: 312px;
    padding: 10px;
    border-radius: 48px;
    background: var(--ink);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 30px 60px -20px rgba(26, 25, 22, 0.28),
        0 12px 24px -12px rgba(26, 25, 22, 0.18);
}
.phone-screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 38px;
    background: var(--cream);
}

/* ---------- Feature trio ---------- */
.features {
    padding: var(--space-5xl) 0;
    border-top: 1px solid var(--border);
}
.features-head {
    max-width: 640px;
    margin: 0 0 var(--space-4xl);
}
.features-head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: var(--space-md) 0 0;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.feature-card {
    background: var(--card);
    border: 1px solid var(--seam);
    border-radius: var(--radius-card);
    padding: var(--space-2xl);
}
.feature-card h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: var(--space-lg) 0 var(--space-sm);
}
.feature-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
}
.feature-icon {
    width: 40px;
    height: 40px;
    color: var(--brick);
}

/* Track-type chips — the legibility companion to the color system. */
.chip-row {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}
.chip {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    padding: 4px 10px;
    border-radius: 100px;
}
.chip--street { background: var(--street); }
.chip--road   { background: var(--road); }
.chip--oval   { background: var(--oval); }

/* ---------- Widgets showcase ---------- */
.showcase {
    padding: var(--space-5xl) 0;
    border-top: 1px solid var(--border);
}
.showcase .container {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-5xl);
    align-items: center;
}
.showcase-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: var(--space-md) 0 var(--space-lg);
}
.showcase-copy p {
    margin: 0 0 var(--space-lg);
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.6;
    max-width: 460px;
}
.showcase-copy p:last-child { margin-bottom: 0; }
.showcase-visual { display: flex; justify-content: center; }
.showcase-visual .phone { max-width: 300px; }

/* ---------- Closing pitch line ---------- */
.pitch {
    position: relative;
    padding: var(--space-6xl) 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
}
.pitch-track {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 90%);
    height: auto;
    fill: none;
    stroke: var(--brick);
    stroke-width: 14;
    opacity: 0.10;
    pointer-events: none;
}
.pitch .container { position: relative; }
.pitch-line {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-4xl) 0 var(--space-5xl);
    color: var(--ink-soft);
    font-size: 14px;
}
.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: space-between;
    align-items: center;
}
.site-footer a:hover { color: var(--ink); }
.footer-links { display: flex; gap: var(--space-2xl); }

/* ---------- Privacy / Terms pages ---------- */
.legal {
    max-width: 720px;
    margin: var(--space-2xl) auto var(--space-6xl);
    padding: 0 var(--space-2xl);
}
.legal h1 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: var(--space-3xl) 0 var(--space-sm);
}
.legal .updated {
    color: var(--ink-soft);
    font-size: 14px;
    margin-bottom: var(--space-3xl);
}
.legal h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: var(--space-3xl) 0 var(--space-sm);
    letter-spacing: -0.015em;
}
.legal h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: var(--space-xl) 0 var(--space-xs);
    letter-spacing: -0.01em;
    color: var(--ink);
}
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; }
.legal code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--parchment);
    padding: 1px 5px;
    border-radius: 5px;
}
.legal a { color: var(--brick-ink); text-decoration: underline; }
.legal-back { margin-top: var(--space-4xl); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .hero { padding: var(--space-3xl) 0 var(--space-5xl); }
    .hero .container { grid-template-columns: 1fr; gap: var(--space-4xl); }
    .feature-grid { grid-template-columns: 1fr; }
    .showcase .container { grid-template-columns: 1fr; gap: var(--space-4xl); }
    .showcase-visual { order: -1; }
    .pitch { padding: var(--space-5xl) 0; }
}
@media (max-width: 480px) {
    .nav-links { font-size: 14px; gap: var(--space-xl); }
}