/* Modular Toy: the shared layer under every page on modulartoy.cc.
 *
 * It carries the maker's mark (the slim bar at the top, the footer), the
 * layout and type scale, and the handful of components product pages share.
 * It does not carry a product's look: each page sets its own colours and,
 * if it wants one, its own display font, by overriding the tokens below on
 * :root. The bar and footer follow those tokens, so they sit inside each
 * product's palette instead of on top of it.
 *
 * No external fonts, no framework, no build step. The bar and footer
 * themselves are in modulartoy-chrome.css, so a product site with its own
 * stylesheet (Mutineer's) can carry the maker's mark without taking these
 * page-wide styles. A page built on this kit links both files.
 */

:root {
    /* Colour: override these per product. */
    --mt-bg: #0b0d10;
    --mt-surface: #14171c;
    --mt-line: #262b33;
    --mt-fg: #eceae4;
    --mt-muted: #a3a29c;
    --mt-faint: #6f6e69;
    --mt-accent: #f59e0b;
    --mt-accent-fg: #111111;     /* text on an accent-coloured button */

    /* Type: products may set --mt-font-display to a font they load. */
    --mt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
    --mt-font-display: var(--mt-font);
    --mt-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --mt-radius: 12px;
    --mt-wrap: 1080px;
    --mt-gutter: 20px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    background: var(--mt-bg);
    color: var(--mt-fg);
    font-family: var(--mt-font);
    font-size: 17px;
    line-height: 1.55;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 3px; border-radius: 4px; }

.mt-wrap { width: 100%; max-width: var(--mt-wrap); margin: 0 auto; padding: 0 var(--mt-gutter); }
main { flex: 1; }

/* ── Type ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--mt-font-display); line-height: 1.15; letter-spacing: -0.015em; }
h1 { font-size: clamp(34px, 6.2vw, 60px); font-weight: 800; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 750; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.005em; }
.mt-eyebrow {
    font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--mt-accent);
}
.mt-lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--mt-muted); max-width: 36em; }
.mt-muted { color: var(--mt-muted); }
.mt-small { font-size: 14px; }

/* ── Sections ──────────────────────────────────────────────────────── */
.mt-section { padding: clamp(56px, 9vw, 104px) 0; }
.mt-section + .mt-section { border-top: 1px solid var(--mt-line); }
.mt-section > .mt-wrap > h2 + p { margin-top: 12px; }
.mt-section-head { max-width: 40em; margin-bottom: 40px; }
.mt-section-head p { color: var(--mt-muted); margin-top: 12px; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.mt-hero { padding: clamp(56px, 10vw, 120px) 0 clamp(48px, 8vw, 88px); }
.mt-hero h1 { margin-top: 14px; max-width: 14em; }
.mt-hero .mt-lede { margin-top: 20px; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; }
.mt-platforms { margin-top: 18px; font-size: 14px; color: var(--mt-faint); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.mt-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
    background: var(--mt-accent); color: var(--mt-accent-fg);
    transition: filter 0.15s, border-color 0.15s, background 0.15s;
}
.mt-btn:hover { filter: brightness(1.08); }
.mt-btn-ghost { background: transparent; color: var(--mt-fg); border-color: var(--mt-line); }
.mt-btn-ghost:hover { border-color: var(--mt-accent); filter: none; }
.mt-btn[aria-disabled="true"] { background: var(--mt-surface); color: var(--mt-muted); border-color: var(--mt-line); cursor: default; filter: none; }

/* ── Features ──────────────────────────────────────────────────────── */
.mt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.mt-feature {
    background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
    padding: 24px;
}
.mt-feature p { color: var(--mt-muted); margin-top: 8px; font-size: 15.5px; }

/* A two-column block: text beside a picture, stacking on phones. */
.mt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.mt-split + .mt-split { margin-top: clamp(48px, 7vw, 88px); }
.mt-split p { color: var(--mt-muted); margin-top: 12px; }
@media (max-width: 800px) { .mt-split { grid-template-columns: 1fr; } }

.mt-shot {
    border-radius: var(--mt-radius); border: 1px solid var(--mt-line); overflow: hidden;
    background: var(--mt-surface);
}
.mt-shot-phone { max-width: 320px; margin: 0 auto; border-radius: 28px; }
.mt-caption { font-size: 13px; color: var(--mt-faint); margin-top: 10px; text-align: center; }

/* A list of short facts: "Works with", "Doesn't do", specs. */
.mt-facts { list-style: none; padding: 0; display: grid; gap: 10px; }
.mt-facts li { padding-left: 22px; position: relative; color: var(--mt-muted); }
.mt-facts li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--mt-accent); }
.mt-facts li strong { color: var(--mt-fg); }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.mt-faq { display: grid; gap: 10px; max-width: 46em; }
.mt-faq details { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: 18px 20px; }
.mt-faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq summary::after { content: '+'; color: var(--mt-muted); font-weight: 400; }
.mt-faq details[open] summary::after { content: '–'; }
.mt-faq details p { color: var(--mt-muted); margin-top: 10px; }

/* ── Launch notice: until a product ships ──────────────────────────── */
.mt-notify {
    background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
    padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between;
}
.mt-notify p { color: var(--mt-muted); margin-top: 6px; max-width: 34em; }

/* ── Plain document pages: privacy, support, press ─────────────────── */
.mt-doc { max-width: 44em; padding: clamp(40px, 7vw, 80px) 0; }
.mt-doc h1 { font-size: clamp(30px, 5vw, 44px); }
.mt-doc h2 { font-size: 22px; margin-top: 40px; }
.mt-doc p, .mt-doc ul { margin-top: 14px; color: var(--mt-muted); }
.mt-doc li + li { margin-top: 6px; }
.mt-doc strong { color: var(--mt-fg); }
.mt-doc .mt-updated { font-size: 14px; color: var(--mt-faint); margin-top: 10px; }