/* Build Broom — see DESIGN.md. Colours come from the app's Aurora theme; the safety four are semantic and are
   never spent on decoration. No grid, no monospace as a UI voice, no figure numbering: all three belong to the
   nearest competitor, and DESIGN.md says why. */

:root {
    --ground: #F6F5FA;
    --surface: #FFFFFF;
    --sunk: #EEECF5;
    --ink: #1A1230;
    --ink-dim: #5B5570;
    --accent: #6B3FD4;
    --on-accent: #FFFFFF;
    --mark: #0E8C82;
    --rule: #DDD8EA;
    --safe: #1E7A4C;
    --caution: #A56A00;
    --risky: #C0392B;
    --info: #5B5570;
    --glow-a: rgba(107, 63, 212, .13);
    --glow-b: rgba(14, 140, 130, .09);
    /* Two layers. The tight one is the hairline: a capture carries its corners as transparency, so it cannot
       take a border, and without an edge a white popover on a near-white page has nothing to sit against. A
       1px drop-shadow follows the alpha, so it draws that edge along the window's real curve. */
    --drop: drop-shadow(0 1px 1px rgba(26, 18, 48, .22)) drop-shadow(0 14px 26px rgba(26, 18, 48, .16));
    --serif: "Source Serif 4", Iowan Old Style, Georgia, serif;
    --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #14161C;
        --surface: #1B1E27;
        --sunk: #101218;
        --ink: #EEF0F6;
        --ink-dim: #9A9FAE;
        --accent: #B48CF6;
        --on-accent: #1A1230;
        --mark: #6FE3D6;
        --rule: rgba(238, 240, 246, .14);
        --safe: #63DD9D;
        --caution: #F4B25F;
        --risky: #FF7B7B;
        --info: #9A9FAE;
        --glow-a: rgba(180, 140, 246, .20);
        --glow-b: rgba(111, 227, 214, .12);
        --drop: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* height:auto is not optional. The captures carry width/height attributes so the browser can reserve their
   space before they load; those attributes also map to the CSS height property, so with max-width alone the
   width shrinks while the height stays pinned and every screenshot stretches vertically. */
img { max-width: 100%; height: auto; display: block; }

p { margin: 0; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
    text-wrap: balance;
    letter-spacing: -.012em;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.skip {
    position: absolute;
    left: -9999px;
    background: var(--accent);
    color: var(--on-accent);
    padding: 10px 16px;
    border-radius: 8px;
}
.skip:focus { left: 16px; top: 16px; z-index: 10; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.sec { padding-block: 96px; }
.sec + .sec { border-top: 1px solid var(--rule); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.lede { max-width: 60ch; color: var(--ink-dim); font-size: 1.2rem; margin-top: 18px; }
.body { max-width: 64ch; color: var(--ink-dim); margin-top: 16px; }
.body + .body { margin-top: 14px; }

/* A capture already carries its own silhouette. Its real window corners are transparent in the PNG, cut to the
   continuous curve macOS actually draws — see scripts/site-images.py. So the wrapper must not impose a second,
   smaller corner of its own: a border and a 14px radius sit outside a ~31px window corner and leave a wedge of
   surface showing in every corner, fenced by a hairline that does not follow the window. That is what "wrongly
   cut corners" looks like, and the App Store panels avoid it by clipping and stroking the same path.

   So: no border, no radius, no background — and drop-shadow rather than box-shadow, because it follows the
   alpha channel instead of the border box, which puts the shadow under the window's true curve. */
.plate { filter: var(--drop); }

/* masthead */
.site { display: flex; align-items: center; gap: 12px; padding-block: 22px; }
.site img { width: 34px; height: 34px; flex: none; }
.site b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.site nav { margin-left: auto; display: flex; gap: 20px; font-size: .92rem; }
.site nav a { color: var(--ink-dim); text-decoration: none; }
.site nav a:hover { color: var(--ink); }

/* hero — one soft aurora, which is Aurora's own description of itself */
.hero { position: relative; padding-block: 56px 84px; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 120%;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 30% 20%, var(--glow-a) 0%, transparent 70%),
        radial-gradient(45% 45% at 78% 8%, var(--glow-b) 0%, transparent 72%);
}
.hero > * { position: relative; }
.hero img.mark { width: 112px; height: 112px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
.hero .said { color: var(--ink-dim); font-size: .95rem; margin-top: 16px; }

.proof {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-dim);
}
.proof b { color: var(--ink); font-weight: 600; }

/* the page's one recurring device: a sentence the rules engine actually writes */
.judges { margin-top: 34px; max-width: 46ch; }
.judge {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.45;
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}
.judge:last-of-type { border-bottom: 0; }
.judges .note { font-family: var(--sans); font-size: .85rem; color: var(--ink-dim); margin-top: 18px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(-2px); }

.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.row.flip > .rowtext { order: 2; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px; }

.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; margin-top: 38px; }
.state h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; display: flex; align-items: center; gap: 9px; }
.state p { font-family: var(--serif); font-size: 1.08rem; color: var(--ink-dim); margin-top: 8px; }

.pops { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 36px; }
.pops figure { margin: 0; max-width: 270px; }
.pops img { filter: var(--drop); }
figcaption { font-size: .85rem; color: var(--ink-dim); margin-top: 10px; }

.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 38px; }
.theme img { filter: var(--drop); }
.theme h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; margin-top: 14px; }
.theme p { font-family: var(--serif); color: var(--ink-dim); margin-top: 6px; font-size: 1.02rem; }

/* the only monospace on the site, because it is code */
.cli {
    font-family: var(--mono);
    background: var(--sunk);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px;
    margin-top: 26px;
    font-size: .88rem;
    overflow-x: auto;
}
.cli .p { color: var(--accent); }

.get { text-align: center; }
.get img { width: 88px; height: 88px; margin: 0 auto 20px; }
.price { font-size: .9rem; color: var(--ink-dim); margin-top: 18px; }
.badge {
    display: inline-block;
    margin-top: 14px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 15px 34px;
    border-radius: 10px;
    text-decoration: none;
}
.req { font-size: .85rem; color: var(--ink-dim); margin-top: 16px; }

/* prose pages: privacy, support */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: 48px; }
.prose h2:first-of-type { margin-top: 32px; }
.prose p, .prose ul { color: var(--ink-dim); margin-top: 16px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .stamp { font-size: .85rem; margin-top: 10px; }

.table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.table td { color: var(--ink-dim); }
.scroller { overflow-x: auto; }

footer { border-top: 1px solid var(--rule); padding-block: 38px; font-size: .85rem; color: var(--ink-dim); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer a { color: var(--ink-dim); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 1023px) {
    .row { grid-template-columns: 1fr; gap: 34px; }
    .row.flip > .rowtext { order: 0; }
    .sec { padding-block: 70px; }
}

@media (max-width: 639px) {
    body { font-size: 16px; }
    .wrap { padding-inline: 16px; }
    .sec { padding-block: 54px; }
    .hero { padding-block: 36px 56px; }
    .hero img.mark { width: 88px; height: 88px; }
    .site nav { gap: 14px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}