/* Migraine Watch — shared styles for the landing and privacy pages.
   No external fonts or assets, so both pages work from any static host. */

:root {
    --accent: #b05c3b;
    --accent-strong: #8e1b1b;
    --bg: #fdfaf8;
    --surface: #ffffff;
    --border: #e7ddd7;
    --text: #241d1a;
    --text-muted: #6b5e57;
    --shadow: 0 1px 3px rgb(36 29 26 / 8%), 0 8px 24px rgb(36 29 26 / 6%);
    --radius: 14px;
    --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #e48d6c;
        --accent-strong: #f08b8b;
        --bg: #16120f;
        --surface: #201a16;
        --border: #362c26;
        --text: #f3ece8;
        --text-muted: #b3a49b;
        --shadow: none;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.65;
    /* Fluid base size: readable on a phone, not oversized on a desktop. */
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

/* Every section shares one gutter, so nothing touches the edge on a narrow screen. */
.wrap {
    width: min(100% - 2.5rem, 1080px);
    margin-inline: auto;
}

.wrap--narrow {
    width: min(100% - 2.5rem, var(--measure));
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-thickness: 2px;
}

h1,
h2,
h3 {
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
    margin: 0 0 0.5em;
}

h2 {
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    margin: 2.5em 0 0.6em;
}

h3 {
    font-size: 1.1rem;
    margin: 0 0 0.35em;
}

/* ---------- Site header ---------- */

.site-header {
    padding: 1.5rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 22%;
}

/* Mirrors the wordmark on the app's Settings screen: a bold serif, with the second half
   in the same terracotta the pressure chart is drawn in. */
.wordmark {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.wordmark-accent {
    color: var(--accent);
}

/* ---------- Hero ---------- */

/* A full-bleed tinted band that the hero content sits inside, fading back into the page so
   there is no hard seam where it ends. */
.hero {
    position: relative;
    padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 5.5rem);
    background:
        radial-gradient(120% 80% at 80% 0%, rgb(176 92 59 / 10%), transparent 60%),
        linear-gradient(180deg, rgb(176 92 59 / 7%), transparent 100%);
    border-bottom: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
    .hero {
        background:
            radial-gradient(120% 80% at 80% 0%, rgb(228 141 108 / 10%), transparent 60%),
            linear-gradient(180deg, rgb(228 141 108 / 6%), transparent 100%);
    }
}

/* Stacked on a phone, side by side once there is room for the copy to keep its measure.
   The breakpoint is the one place a fixed width is warranted: it is set by how narrow the
   text column can get before it reads badly, not by any particular device. */
.hero-layout {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (min-width: 46rem) {
    .hero-layout {
        grid-template-columns: 1fr minmax(0, 22rem);
    }
}

.shot {
    justify-self: center;
    position: relative;
}

/* A soft wash of the brand colour behind the phone, so it reads as sitting in the hero
   rather than pasted on top of it. */
.shot::before {
    content: "";
    position: absolute;
    inset: -12% -18%;
    background: radial-gradient(closest-side, rgb(176 92 59 / 22%), transparent 100%);
    z-index: -1;
}

/* ---------- Phone frame ---------- */

.device {
    position: relative;
    /* Sized so the screenshot's own UI text stays legible rather than to fit a column:
       below about 20rem the chart labels and banner copy shrink past reading size. */
    width: min(100%, 21.5rem);
    margin-inline: auto;
    padding: 0.55rem;
    border-radius: 2.4rem;
    background: linear-gradient(160deg, #4a3f39, #241d1a 45%, #12100e);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 14%),
        0 2px 6px rgb(36 29 26 / 18%),
        0 26px 50px -12px rgb(36 29 26 / 38%);
}

.device-screen {
    position: relative;
    border-radius: 1.95rem;
    overflow: hidden;
    /* Kills the descender gap under an inline image, which would show as a dark sliver. */
    line-height: 0;
    background: #fdfaf8;
}

.device-screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* Power and volume keys, drawn rather than imaged so they scale with the frame. */
.device::after,
.device::before {
    content: "";
    position: absolute;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(#5b4f47, #2b231f);
}

.device::before {
    right: -2px;
    top: 22%;
    height: 8%;
}

.device::after {
    right: -2px;
    top: 33%;
    height: 13%;
}

@media (prefers-color-scheme: dark) {
    .device {
        background: linear-gradient(160deg, #3a322c, #1a1512 45%, #0d0b0a);
        box-shadow:
            inset 0 0 0 1px rgb(255 255 255 / 10%),
            0 26px 50px -12px rgb(0 0 0 / 60%);
    }

    .shot::before {
        background: radial-gradient(closest-side, rgb(228 141 108 / 16%), transparent 100%);
    }
}

.hero p.lede {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0 0 2rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn--primary {
    background: var(--accent);
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    .btn--primary {
        color: #1b120e;
    }
}

.btn--primary:hover {
    filter: brightness(1.08);
}

.btn--ghost {
    border-color: var(--border);
    color: var(--text);
}

.btn--ghost:hover {
    border-color: var(--accent);
}

/* Google's badge is supplied artwork and must not be recoloured, redrawn or given a border.
   The PNG already carries the clear space its guidelines require, so it only needs sizing —
   the 40px floor is their stated minimum height for the badge itself. */
.play-badge {
    display: inline-block;
    line-height: 0;
}

.play-badge img {
    width: auto;
    height: clamp(3.25rem, 3rem + 1vw, 3.75rem);
    max-width: 100%;
}

.play-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- Feature grid ---------- */

/* auto-fit + minmax gives one column on a phone and two or three further up,
   without a single width breakpoint to maintain. */
.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.card p {
    margin: 0;
    color: var(--text-muted);
}

/* ---------- Privacy highlight ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 4vw, 2rem);
    margin: 3rem 0;
}

.panel h2 {
    margin-top: 0;
}

.panel :last-child {
    margin-bottom: 0;
}

/* ---------- Prose (privacy policy) ---------- */

.prose {
    padding-bottom: 3rem;
}

.prose h2 {
    padding-top: 0.4em;
    border-top: 1px solid var(--border);
}

/* The bare h3 is sized for the feature cards, where it sits flush at the top of its box.
   In running text it needs room above it to read as a subheading rather than a stray line. */
.prose h3 {
    margin-top: 1.8em;
}

.prose ul {
    padding-left: 1.2rem;
}

.prose li + li {
    margin-top: 0.4em;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: 0.95em;
}

.prose th,
.prose td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

.prose th {
    font-weight: 650;
}

/* A table is the one thing likely to overflow a 320px screen, so let it scroll
   inside its own box rather than pushing the page sideways. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.updated {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0;
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0 3rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.site-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

:where(a, .btn):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}