/* Jot — site stylesheet (rebuilt 2026-09-16)
   Bright, minimal, glass. One accent (the app's amber). Light and dark
   (2026-10-25): every color is a token below; dark follows the system until
   the nav's toggle picks one (theme.js sets data-theme on <html>).
   Used by index.html, privacy/index.html and 404.html. */

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

:root {
    color-scheme: light;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --ink-3: #a1a1a6;
    --bg: #fbfbfd;
    --accent: #ff9e29;
    --accent-ink: #b8620a;
    --accent-soft: rgba(255, 158, 41, 0.14);
    /* The headline's colored words: the app's amber, deep enough to read on white. */
    --headline-accent: #e98500;
    --line: rgba(0, 0, 0, 0.07);
    --glass: rgba(255, 255, 255, 0.58);
    --glass-strong: rgba(255, 255, 255, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 12px 40px rgba(60, 40, 10, 0.08);
    --shadow-lg: 0 2px 2px rgba(0, 0, 0, 0.04), 0 30px 80px rgba(60, 40, 10, 0.14);
    --glass-inset: rgba(255, 255, 255, 0.9);
    --chip: rgba(255, 255, 255, 0.7);
    --chip-edge: rgba(255, 255, 255, 0.95);
    --chip-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(60, 40, 10, 0.06);
    --card: rgba(255, 255, 255, 0.62);
    --card-shadow: inset 0 1px 0 #fff, 0 6px 22px rgba(60, 40, 10, 0.05);
    --hover: rgba(0, 0, 0, 0.04);
    --button: #1d1d1f;
    --button-hover: #000;
    --button-ink: #fff;
    --body-text: #3a3a3c;
    --sun: none;
    --moon: block;
    /* The app's pictures come in a light and a dark take (home.js swaps the video). */
    --light-only: block;
    --dark-only: none;
    /* Behind the phone pictures while they load, and the hero's first frame
       (2026-10-27: a CSS background, so the dark page never fetches or shows
       the light one; the video has no poster attribute). */
    --shot-bg: #fbfbfd;
    --hero-poster: url("shots/capture-poster.jpg");
    --radius: 24px;
    --container: 1040px;
    --prose: 680px;
    /* After Apple's: the system font on Windows, Android and Linux
       (2026-10-26; they fell back to Arial). */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --rounded: ui-rounded, "SF Pro Rounded", var(--font);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #f5f5f7;
        --ink-2: #a1a1a6;
        --ink-3: #8e8e93;
        --bg: #0c0b0a;
        --accent-ink: #ffb45c;
        --accent-soft: rgba(255, 158, 41, 0.16);
        --headline-accent: #ffa733;
        --line: rgba(255, 255, 255, 0.09);
        --glass: rgba(34, 32, 30, 0.55);
        --glass-strong: rgba(46, 44, 41, 0.78);
        --glass-edge: rgba(255, 255, 255, 0.08);
        --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 2px 2px rgba(0, 0, 0, 0.3), 0 30px 80px rgba(0, 0, 0, 0.5);
        --glass-inset: rgba(255, 255, 255, 0.06);
        --chip: rgba(255, 255, 255, 0.06);
        --chip-edge: rgba(255, 255, 255, 0.1);
        --chip-shadow: none;
        --card: rgba(255, 255, 255, 0.05);
        --card-shadow: none;
        --hover: rgba(255, 255, 255, 0.07);
        --button: #f5f5f7;
        --button-hover: #fff;
        --button-ink: #111;
        --body-text: #d1d1d6;
        --sun: block;
        --moon: none;
        --light-only: none;
        --dark-only: block;
        --shot-bg: #161513;
        --hero-poster: url("shots/capture-dark-poster.jpg");
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #8e8e93;
    --bg: #0c0b0a;
    --accent-ink: #ffb45c;
    --accent-soft: rgba(255, 158, 41, 0.16);
    --headline-accent: #ffa733;
    --line: rgba(255, 255, 255, 0.09);
    --glass: rgba(34, 32, 30, 0.55);
    --glass-strong: rgba(46, 44, 41, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 2px rgba(0, 0, 0, 0.3), 0 30px 80px rgba(0, 0, 0, 0.5);
    --glass-inset: rgba(255, 255, 255, 0.06);
    --chip: rgba(255, 255, 255, 0.06);
    --chip-edge: rgba(255, 255, 255, 0.1);
    --chip-shadow: none;
    --card: rgba(255, 255, 255, 0.05);
    --card-shadow: none;
    --hover: rgba(255, 255, 255, 0.07);
    --button: #f5f5f7;
    --button-hover: #fff;
    --button-ink: #111;
    --body-text: #d1d1d6;
    --sun: block;
    --moon: none;
    --light-only: none;
    --dark-only: block;
    --shot-bg: #161513;
    --hero-poster: url("shots/capture-dark-poster.jpg");
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--accent-soft); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Glass ---------- */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-inset), var(--shadow);
}

/* ---------- Nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 24px 0;
}
.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    border-radius: 999px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: auto; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 999px;
}
.nav-links a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.nav-links .pill {
    color: var(--button-ink);
    background: var(--button);
    padding: 8px 14px;
    margin-left: 4px;
}
.nav-links .pill:hover { background: var(--button-hover); color: var(--button-ink); }
/* Light / dark: a moon in light (tap for dark), a sun in dark. */
.theme-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); background: var(--hover); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: var(--sun); }
.theme-toggle .moon { display: var(--moon); }

/* ---------- App Store badge ---------- */
/* Apple's own artwork (app-store-badge.svg, from developer.apple.com's
   marketing guidelines, unmodified; 2026-10-26 it replaced a hand-built
   look-alike button). Their rules: use only that artwork, don't modify,
   angle or animate it, at least 40 px tall, clear space a quarter of its
   height. The black badge is the preferred one and its gray border reads on
   the dark theme too, so it's the same in both. */
.store-badge { display: inline-block; }
.store-badge img { height: 52px; width: auto; }

/* ---------- Hero ---------- */
.hero {
    padding: 72px 0 40px;
    text-align: center;
}
.app-icon {
    width: 108px;
    height: 108px;
    margin: 0 auto 28px;
    border-radius: 26px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 1px 1px rgba(0, 0, 0, 0.04),
        0 18px 50px rgba(60, 40, 10, 0.16);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.app-icon img { width: 62%; height: auto; }
.hero h1 {
    font-size: clamp(40px, 7vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    max-width: 12ch;
    margin: 0 auto 20px;
}
.hero h1 .dim, .hero h1 em { color: var(--headline-accent); font-style: normal; }
/* The colored half on its own line: "Write it down." / "Sort it as you type." */
.hero h1 em { display: block; }
.hero .lede {
    font-size: clamp(18px, 2.2vw, 21px);
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 34ch;
    margin: 0 auto 30px;
}
.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/* What Jot doesn't do, as plain facts under the download button (2026-10-26:
   more prominent than the small grey line it replaced). */
.hero-facts {
    list-style: none;
    margin: 34px auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 700px;
}
.hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 11px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--chip-edge);
    box-shadow: var(--chip-shadow);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.hero-facts svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Screenshots ---------- */
/* Real screenshots (rendered from the app, 3x). The hero one sits in a
   glass frame; the step cards crop the top of theirs. */
/* 322 px draws the hero video 300 px wide: 600 device pixels on a 2x
   screen, exactly half the 1200 the recording is cropped to, so text
   scales evenly (2026-10-26; at 628 px some strokes came out lighter than
   others), and 900 on a 3x one. Narrower, it takes the container's width
   (2026-10-27): 84vw drew it at 293 px on a 375 px iPhone, a rescale; this
   keeps 300 down to a 370 px screen. */
.shot-wrap {
    margin: 64px auto 0;
    width: min(322px, 100vw - 48px);
    position: relative;
}
/* An iPhone-shaped frame: a thin titanium bezel with a lighter rim, the
   Dynamic Island drawn over the status bar, and the three side buttons.
   The screen corners are ~14% of the screen width, like the device, so
   nothing inside the safe area is clipped. */
.shot {
    position: relative;
    border-radius: 15.5%/7.4%;
    padding: 11px;
    background: linear-gradient(150deg, #5a5a60 0%, #2c2c30 35%, #1b1b1e 70%, #2a2a2e 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.22),
        inset 0 0 0 4px rgba(0, 0, 0, 0.55),
        0 2px 2px rgba(0, 0, 0, 0.06),
        0 30px 70px rgba(40, 30, 10, 0.22);
}
.hero-video { cursor: pointer; }
.shot img,
.shot video {
    width: 100%;
    height: auto;
    border-radius: 14% / 6.5%;
    display: block;
    background: var(--shot-bg);
}
.shot .hero-video { background: var(--shot-bg) var(--hero-poster) center / cover no-repeat; }
.shot .island {
    position: absolute;
    top: 19px;
    left: 50%;
    width: 31%;
    height: 27px;
    transform: translateX(-50%);
    background: #050505;
    border-radius: 999px;
}
.shot-wrap .side {
    position: absolute;
    width: 3px;
    background: linear-gradient(90deg, #3a3a3f, #1c1c1f);
    border-radius: 2px;
}
.shot-wrap .side.l1 { left: -3px; top: 17%; height: 26px; }
.shot-wrap .side.l2 { left: -3px; top: 24%; height: 52px; }
.shot-wrap .side.l3 { left: -3px; top: 33%; height: 52px; }
.shot-wrap .side.r1 { right: -3px; top: 27%; height: 76px; background: linear-gradient(90deg, #1c1c1f, #3a3a3f); }

/* Four smaller phones in a row (the themes section): a pattern, a
   gradient, a photo and a mesh. On a phone they swipe (Responsive, below). */
.shots-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.shot.small { padding: 7px; border-radius: 15.5%/7.4%; }
.shot.small .island { top: 12px; height: 17px; }
.shot.small img { border-radius: 14% / 6.5%; }

/* ---------- Sections ---------- */
.section { padding: 96px 0 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 14px;
}
h2 {
    font-size: clamp(30px, 4.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
}
.section-head p {
    margin-top: 14px;
    font-size: 18px;
    color: var(--ink-2);
    max-width: 44ch;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Steps: Capture → Sort → Export ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.step {
    border-radius: var(--radius);
    padding: 26px 26px 28px;
}
/* One Lucide line icon per step, in the accent (2026-10-25; replaced the
   hand-drawn, then geometric, line drawings). */
.step .glyph {
    height: 60px;
    margin-bottom: 18px;
    color: var(--accent);
}
.step .glyph svg { width: 60px; height: 60px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 700; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
/* ---------- Made for the moment: moments scrolling by, then three features
   with a screenshot each (2026-10-25; the first version had a full phone
   and a video per feature; these are half the height). ---------- */
.marquee {
    overflow: hidden;
    margin: -16px 0 36px;
    padding: 6px 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: marquee 190s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* home.js moves the row itself (the CSS animation is the fallback). */
.marquee-track.scripted { animation: none; }
/* The list is in the track twice; moving left by one copy (half the track
   plus half a gap) lands exactly where it started. */
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }
.marquee .moment {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--chip-edge);
    box-shadow: var(--chip-shadow);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}
/* With Reduce Motion the row stands still and wraps, three rows at most
   (2026-10-28: all 21 moments made a column 1,060 px tall on a phone, 378 px
   at 900). A chip is 42.5 px tall with 10 px between rows, so 8 + 3 rows + 6
   ends before the fourth row starts. Phones and tablets get one row to swipe
   instead (Responsive, below). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee { -webkit-mask-image: none; mask-image: none; padding: 8px 24px 6px; margin-bottom: 44px; max-height: 161px; }
    .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .marquee .moment[aria-hidden] { display: none; }
}
.features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.feature { border-radius: var(--radius); padding: 14px 14px 24px; }
/* 614 × 535 stills: exactly 2x the drawn width at full size. Visibility's
   is three strips (visible, faded, hidden), each labeled, with the card
   showing through the gaps so the states don't run together. */
.feature img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line);
}
.states {
    display: grid;
    gap: 6px;
    border-radius: 14px;
    overflow: hidden;
}
.states figure { position: relative; }
.states img { border-radius: 0; box-shadow: none; }
/* Level with the category title, where the strip is empty: the note's line
   runs under the label when it's long (2026-10-26). */
.states figcaption {
    position: absolute;
    top: 30%;
    right: 10px;
    transform: translateY(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* Stash's second picture (2026-10-26: the two labeled pictures
   weren't clear): one label, with an arrow down to the dot on the Stashed
   Notes button that starts a little below it (not from under it).
   The arrow is drawn in the picture's own coordinates, so the label is sized
   in the picture's width (cqw) and keeps the same place in it at any size. */
.states .pointing { container-type: inline-size; }
.states .pointing figcaption {
    top: 34%;
    left: 66%;
    right: auto;
    transform: none;
    font-size: 3.75cqw;
    padding: 1.25cqw 3.1cqw;
}
.states .arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #e98500;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature .light-only { display: var(--light-only); }
.feature .dark-only { display: var(--dark-only); }
.feature h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 700; margin: 18px 8px 0; }
.feature p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 6px 8px 0; }
@media (max-width: 900px) {
    .features { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* ---------- Also ---------- */
.also {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.also p a { color: var(--accent-ink); font-weight: 600; }
.also .item {
    border-radius: 20px;
    padding: 18px 18px 16px;
}
.also .ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}
.also .ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.also h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.also p { font-size: 14px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }

/* ---------- Bands ---------- */
.band {
    border-radius: var(--radius);
    padding: 44px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
}
.band h2 { font-size: clamp(26px, 3.4vw, 34px); }
.band p { color: var(--ink-2); font-size: 17px; margin-top: 10px; max-width: 40ch; }
/* Text only, no right-hand column. */
.band.solo { grid-template-columns: 1fr; }
.band.solo p { max-width: 62ch; }
/* Privacy and Price side by side (2026-10-26: one above the other, each
   left half its width empty), stacked on narrow screens. */
.bands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.bands .band { align-content: start; }

/* Add to Reminders / Add to Calendar (2026-10-28, PROPOSED): one band, the
   words beside one still made from the App Store card's captures: the note
   with the Attach menu open, and Apple's New Event screen filled in from it
   lifted over the empty middle. 844 × 1025, 2x its widest drawn size. */
.band.inbox { grid-template-columns: 1fr minmax(0, 380px); gap: 48px; }
.band.inbox p { max-width: 34ch; }
.inbox-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.inbox-shot .light-only { display: var(--light-only); }
.inbox-shot .dark-only { display: var(--dark-only); }

/* ---------- CTA ---------- */
.cta {
    padding: 120px 0 80px;
    text-align: center;
}
.cta .app-icon { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 22px; }
.cta h2 { margin-bottom: 8px; }
.cta p { color: var(--ink-2); font-size: 18px; margin-bottom: 26px; }

/* ---------- Footer ---------- */
footer { padding: 0 24px 40px; }
.foot {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-3);
}
.foot nav { display: flex; gap: 18px; }
.foot nav a { color: var(--ink-2); }

/* ---------- Prose pages (FAQ, Privacy) ---------- */
main.prose { max-width: var(--prose); margin: 0 auto; padding: 56px 24px 80px; }
.page-header { margin-bottom: 36px; }
.page-header h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 700; }
.page-header p { margin-top: 10px; font-size: 18px; color: var(--ink-2); }
.toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}
.toc a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--chip-edge);
    box-shadow: var(--chip-shadow);
}
.toc a:hover { text-decoration: none; background: var(--glass-strong); }
.content h2 {
    font-size: 26px;
    margin: 48px 0 18px;
    scroll-margin-top: 90px;
}
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.content p { color: var(--body-text); font-size: 17px; line-height: 1.65; margin-bottom: 14px; }
.content ul { padding-left: 22px; margin-bottom: 14px; color: var(--body-text); font-size: 17px; line-height: 1.65; }
.content li { margin-bottom: 6px; }
.content strong { color: var(--ink); }
/* What you type, like "- " or "=" (2026-10-28: in curly quotes the space
   inside read as a typo). */
.content code {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: var(--ink);
    background: var(--hover);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
}
.faq-item {
    border-radius: 20px;
    padding: 22px 24px 10px;
    margin-bottom: 14px;
    background: var(--card);
    border: 1px solid var(--chip-edge);
    box-shadow: var(--card-shadow);
}
.faq-item p:last-child { margin-bottom: 12px; }
.faq-item p + p { margin-top: 12px; } /* answers with two paragraphs (2026-10-28) */
/* The home page's FAQ: every answer out in the open (2026-10-26:
   no expand / collapse; questions opened on tap from 2026-10-01). */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.faq-list p { color: var(--body-text); font-size: 17px; line-height: 1.65; }
.content .updated { color: var(--ink-3); font-size: 14px; }

/* ---------- Keyboard pause buttons ---------- */
/* home.js puts one on the hero recording and one on the moments row
   (2026-10-27): a click or tap pauses them, but that needs a pointer. They
   show only while they have keyboard focus. The row's sits outside .marquee,
   whose mask and overflow would hide it. */
.marquee-wrap { position: relative; }
.motion-toggle {
    position: absolute;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--chip-edge);
    border-radius: 999px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.motion-toggle:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.shot .motion-toggle { left: 50%; bottom: 6%; transform: translateX(-50%); }
.marquee-wrap .motion-toggle { left: 24px; top: calc(50% - 4px); transform: translateY(-50%); }

/* ---------- Responsive ---------- */
/* Last in the file on purpose: these override the rules above at the same
   specificity, so a block placed before its base rule does nothing (the
   phone layout of Everything else broke that way, 2026-10-26). */
@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; }
    .band { grid-template-columns: 1fr; padding: 32px 26px; }
    .band.inbox { grid-template-columns: 1fr; gap: 26px; }
    .inbox-shot { width: 100%; max-width: 380px; margin: 0 auto; }
    .bands { grid-template-columns: 1fr; }
    .also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Reduce Motion on a phone or tablet: the moments are one still row you swipe,
   like the looks in Make it yours, rather than rows of one or two (2026-10-28). */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
    .marquee { max-height: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 24px 14px; margin-bottom: 36px; }
    .marquee::-webkit-scrollbar { display: none; }
    .marquee-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
}
/* On a phone the four looks become a swipeable row (2026-10-25): stacked,
   they were three screens of scrolling. The feature cards become one column
   of compact rows, icon beside the text. */
@media (max-width: 700px) {
    .also { grid-template-columns: 1fr; gap: 10px; }
    .also .item {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 14px;
        padding: 14px 16px;
    }
    .also .ic { grid-row: span 2; margin-bottom: 0; }
    .also p { margin-top: 2px; }
    .shots-row {
        display: flex;
        gap: 16px;
        max-width: none;
        margin: 0 -24px;
        padding: 8px 24px 40px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 24px;
        scrollbar-width: none;
    }
    .shots-row::-webkit-scrollbar { display: none; }
    .shots-row .shot.small { flex: 0 0 66%; scroll-snap-align: center; }
}
@media (max-width: 560px) {
    .nav { padding: 10px 12px 0; }
    .nav-links a:not(.pill) { display: none; }
    .hero { padding-top: 48px; }
    .section { padding-top: 72px; }
    .hero-facts { gap: 6px; }
    .hero-facts li { font-size: 14px; padding: 7px 12px 7px 9px; gap: 5px; }
    .hero-facts svg { width: 14px; height: 14px; }
}