/* ============================================================================
 * AIRMORA - public website shared styles
 * ----------------------------------------------------------------------------
 * Design language mirrors the on-device web dashboard (air-monitor-firmware/
 * html_fs/style.css): InterDisplay face, deep-navy background, blue accent,
 * rounded cards. Keep this file the single source of truth for the brand so
 * future pages (API manual, product pages) stay consistent.
 * ========================================================================== */

@font-face {
    font-family: 'InterDisplay';
    src: url('/assets/interdisplay.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-ui: 'InterDisplay', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bg: #080816;
    --bg-header: #0E1525;
    --accent: #266CEE;
    --accent-light: #5B9BFF;
    --secondary: #00CC66;
    --text: #FFFFFF;
    --text-sec: #C8CBDA;
    --text-dim: #8B91A8;
    --error: #FF4444;
    /* Surface system (quiet, premium - not glassmorphism). Default sections are bare on --bg;
       surfaces are used only for contained tools, tables, linked cards and focused callouts. */
    --surface: rgba(255,255,255,0.035);
    --surface-strong: rgba(255,255,255,0.055);
    --surface-accent: #16294F;   /* occasional emphasis only */
    --border-soft: rgba(255,255,255,0.075);
    --border-strong: rgba(255,255,255,0.12);
    --divider: rgba(255,255,255,0.06);
    --bg-card: var(--surface-accent);  /* legacy alias: now an accent surface, not the default block */
    --maxw: 1120px;
    --prose: 680px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: rgba(14, 21, 37, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--divider);
}
.brand {
    /* Match the on-device dashboard brand exactly: Tahoma, regular weight, 2px tracking. */
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-light);
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.15em;
    font-weight: 400;
    letter-spacing: 2px;
}
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; display: block; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
    color: var(--text-sec);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.92em;
    transition: background 0.15s, color 0.15s;
}
.site-nav a:hover { background: rgba(38,108,238,0.12); color: var(--text); text-decoration: none; }
.site-nav a.active { color: var(--accent-light); background: rgba(38,108,238,0.15); }

/* ── Hero ── */
.hero {
    position: relative;
    overflow: hidden;
    padding: 56px 24px 48px;
    text-align: center;
    background:
        radial-gradient(1100px 420px at 50% -120px, rgba(38,108,238,0.30), transparent 70%),
        linear-gradient(180deg, #0B1326 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--divider);
}
.hero-rings {
    position: absolute;
    /* Anchored to a FIXED offset from the hero top (not top:50%), so the rings sit in the
       exact same spot on every page regardless of hero height; shorter heroes just crop the
       bottom (hero has overflow:hidden). Keeps switching between pages from making them jump. */
    top: 175px; left: 50%;
    width: 620px; height: 620px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.5;
}
.hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.hero img.mark { width: 84px; height: 84px; margin-bottom: 18px;
                 filter: drop-shadow(0 6px 22px rgba(38,108,238,0.45)); }
.hero h1 { font-size: 2.1em; font-weight: 700; letter-spacing: 0.5px; }
.hero .tag { color: var(--text-sec); margin-top: 10px; font-size: 1.05em; }
/* Split hero: copy left, product media right (Product now; Home once a real render exists). */
.hero.split { text-align: left; padding: 64px 24px 56px; }
.hero.split .hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,480px); gap: 52px; align-items: center; }
.hero.split .hero-copy h1 { font-size: 2.25em; }
.hero.split .hero-copy .tag { max-width: 520px; }
.hero.split .btn-row { justify-content: flex-start; margin-top: 20px; }
.hero.split .feature-media { width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
/* Eyebrow pill - one consistent treatment everywhere (hero, section heads, cards). */
.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border: 1px solid var(--divider);
    border-radius: 999px;
    font-size: 0.72em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-light);
    background: rgba(38,108,238,0.10);
}

/* ── Layout ── */
main {
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 60px 24px 8px;
}

/* ── Cards ── */
.card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022)),
        var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 30px 32px;
    margin-bottom: 22px;
}
/* Hover lift only on interactive (link) cards. */
a.card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
a.card:hover { transform: translateY(-3px); border-color: rgba(91,155,255,0.32);
               box-shadow: 0 22px 60px rgba(0,0,0,0.28); text-decoration: none; }
.card h2 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--accent-light);
    margin-bottom: 12px;
}
/* Icon headings keep the glyph inline (not flex) so text-align still applies in centred cards. */
.card h2 svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 8px; stroke: var(--accent-light); }
/* Prominent "feature" card heading - one consistent size for lead cards (IAQ teaser, promise, etc.). */
.card h2.feature { font-size: 1.5em; margin: 12px 0 12px; }
.card h3 { font-size: 1em; color: var(--text); margin: 16px 0 6px; font-weight: 600; }
.card p { color: var(--text-sec); margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card ul { color: var(--text-sec); margin: 6px 0 10px 20px; }
.card li { margin-bottom: 6px; }
.card strong { color: var(--text); }

.lead { font-size: 1.05em; color: var(--text-sec); }

/* ── Info rows (component / license tables) ── */
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    font-size: 0.95em;
}
.info-row:last-child { border-bottom: none; }
.info-row .lbl { color: var(--text-sec); }
.info-row .val { color: var(--text); font-weight: 600; text-align: right; }
/* Specs page: calm technical label/value table (no dividers - spacing + the two-column rhythm separate rows). */
.specs .info-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 0;
    font-size: 0.95em;
}
.specs .info-row .lbl {
    color: var(--text-sec);
    font-size: 0.86em;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.012em;
}
.specs .info-row .val {
    color: #FFFFFF;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
}
@media (max-width: 600px) {
    .specs .info-row { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
    .specs .info-row .lbl { font-size: 0.82em; }
}

/* ── Spec table (3-column reference, e.g. Accuracy & calibration): value-dominant, clear hierarchy ── */
.spectable { width: 100%; border-collapse: collapse; margin: 8px 0 6px; }
.spectable th {
    text-align: left;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 18px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.spectable th:last-child, .spectable td:last-child { padding-right: 0; }
.spectable td {
    padding: 18px 18px 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    vertical-align: top;
    color: var(--text-sec);
    font-size: 0.95em;
}
.spectable tbody tr:last-child td { border-bottom: 0; }
.spectable .s-name { display: block; color: #FFFFFF; font-weight: 600; }
.spectable .s-model { display: block; color: var(--text-sec); font-weight: 400; font-size: 0.86em; margin-top: 3px; }
.spectable .s-val { display: block; color: #FFFFFF; font-weight: 600; }
.spectable .s-sub { display: block; color: var(--text-sec); font-size: 0.86em; margin-top: 3px; }
@media (max-width: 600px) {
    .spectable th, .spectable td { font-size: 0.85em; padding: 14px 12px 14px 0; }
}

/* Notes bullet list (replaces dense disclaimer paragraphs) */
.notes-h { color: var(--text-dim); font-size: 0.72em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 20px 0 10px; }
ul.notes { list-style: none; margin: 0; padding: 0; }
ul.notes li { position: relative; padding-left: 20px; color: var(--text-sec); margin-bottom: 9px; }
ul.notes li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-light); }
ul.notes li:last-child { margin-bottom: 0; }

/* Distinct info notice: accent-tinted box with an icon (stands apart from plain card text) */
.notice {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 20px;
    background: rgba(38,108,238,0.08);
    border: 1px solid rgba(38,108,238,0.22);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text-sec);
    font-size: 0.92em;
}
.notice svg { flex-shrink: 0; width: 18px; height: 18px; stroke: var(--accent-light); margin-top: 1px; }

/* Chips as a checklist (specs highlights + trust strip): accent check before each */
.specchips.checks .chip::before { content: "\2713"; color: var(--accent-light); font-weight: 700; margin-right: 7px; }

/* Sensor rows: model-first hierarchy (the model number is the trust signal, so lead with it) */
.specs .v-main { font-weight: 600; color: #FFFFFF; }
.specs .v-sub { color: var(--text-sec); font-size: 0.9em; font-weight: 400; }

/* Tabular figures make numeric specs feel engineered */
.specs .info-row .val, .spectable td, .ztable td, .cmp td, .vstable td { font-variant-numeric: tabular-nums; }

/* Compact "AIRMORA vs typical" comparison (surfaces the differentiators) */
.vstable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95em; }
.vstable th, .vstable td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; vertical-align: top; }
.vstable thead th { font-size: 0.72em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-light); }
.vstable tbody tr:last-child td { border-bottom: 0; }
.vstable td:first-child { color: #FFFFFF; font-weight: 600; }
.vstable td:last-child { color: var(--text-dim); }
.vstable th:first-child, .vstable td:first-child { width: 50%; background: rgba(38,108,238,0.05); }

/* Footer: secondary legal link line (Privacy / Legal / Licenses grouped, quieter) */
.foot-legal-links { margin-top: 10px; font-size: 0.82em; }
.foot-legal-links a { color: var(--text-dim); }
.foot-legal-links a:hover { color: var(--text-sec); }

/* App Store / Google Play badges. The Google badge carries built-in clear-space padding,
   so it needs a larger height than the App Store badge to balance the visible pill. */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.store-badges a { display: inline-block; transition: opacity .15s ease, transform .15s ease; }
.store-badges a:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; }
.store-badges img { display: block; width: auto; }
.store-badges .as { height: 50px; }
.store-badges .gp { height: 75px; }

/* Flow diagrams ("How it works", privacy path): stages joined by arrows */
.flow { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 10px; }
.flow-step {
    flex: 1 1 0; min-width: 150px; max-width: 250px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022)), var(--surface);
    border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 16px; text-align: center;
}
.flow-step .fs-h { display: block; color: var(--accent-light); font-size: 0.7em; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.flow-step .fs-b { display: block; color: #FFFFFF; font-weight: 600; font-size: 0.95em; line-height: 1.35; }
.flow-step .fs-s { display: block; color: var(--text-sec); font-size: 0.84em; margin-top: 5px; line-height: 1.4; }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent-light); font-size: 1.4em; flex: 0 0 auto; opacity: .7; }
@media (max-width: 860px) {
    .flow { flex-direction: column; align-items: stretch; }
    .flow-step { max-width: 420px; width: 100%; margin: 0 auto; }
    .flow-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* Glimpse cards (home teaser): image on top, short caption, whole card links to the product */
.glimpse-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.glimpse-card .feature-media { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; }
.glimpse-card .gc-body { padding: 18px 20px; }
.glimpse-card .gc-body h3 { margin: 0 0 6px; }
.glimpse-card .gc-body p { margin-bottom: 8px; }

/* Product availability / lead-time line (driven by LEAD_TIME_WEEKS on the product page) */
.lead-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-sec); font-size: 0.92em; }
.lead-time::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); flex-shrink: 0; }
.lead-time.in-stock::before { background: var(--secondary); }

/* Product price + intro-offer block (driven by the script in the product hero) */
.price-block { margin: 18px 0 4px; }
.price-now { font-size: 2em; font-weight: 700; color: #FFFFFF; }
.price-was { font-size: 1.05em; color: var(--text-dim); text-decoration: line-through; margin-left: 10px; }
.price-tax { color: var(--text-dim); font-size: 0.85em; margin-left: 10px; }
.price-note { display: block; color: var(--text-sec); font-size: 0.9em; margin-top: 8px; }
.price-ship { display: block; color: var(--text-sec); font-size: 0.9em; margin-top: 6px; }
.price-ship b { color: var(--secondary); font-weight: 600; }
.price-fine { display: block; color: var(--text-dim); font-size: 0.8em; margin-top: 6px; }

/* Multi-pack cards */
.pack { text-align: center; display: flex; flex-direction: column; }
.pack h3 { color: var(--text); margin-bottom: 10px; font-size: 1.05em; }
.pack-price { font-size: 1.9em; font-weight: 700; color: #FFFFFF; }
.pack-sub { color: var(--text-dim); font-size: 0.85em; margin: 6px 0 18px; }
.pack .btn { margin-top: auto; }
.pack.featured { border-color: rgba(91,155,255,0.45); }

/* Error pages (404 / 500): big red pill - tinted red fill + a brighter red border */
.err-code {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 26px;
    border: 1.5px solid rgba(255,68,68,0.55);   /* border: brighter red tone */
    border-radius: 999px;
    background: rgba(255,68,68,0.12);            /* fill: deeper, subtle red tone */
    color: #FF5C5C;
    font-size: 2.4em;
    font-weight: 800;
    letter-spacing: 1px;
}
.price-note b { color: var(--accent-light); font-weight: 600; }
.price-note .promo { display: inline-block; background: rgba(38,108,238,0.12); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 8px; font-weight: 700; letter-spacing: 0.5px; color: #FFFFFF; }

/* Deep-linked / anchored <details> clear the sticky header when scrolled to */
.lic { scroll-margin-top: 80px; }

/* Spec value tooltips: hover/focus popover with a fuller explanation (links allowed). */
.spec-tip {
    position: relative;
    cursor: help;
}
.spec-tip::after {
    content: "i";
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 6px;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 9px; font-style: italic; font-weight: 700; line-height: 1;
    vertical-align: 1px; opacity: 0.38;
    transition: opacity 0.15s ease;
}
.spec-tip:hover::after, .spec-tip:focus-within::after { opacity: 0.85; }
.spec-tip > .tip {
    position: absolute;
    left: 0;
    top: calc(100% + 7px);
    z-index: 40;
    width: max-content;
    max-width: min(300px, 78vw);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)), #0c0c1c;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-sec);
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
/* Transparent bridge across the gap so the pointer can reach links inside the tip. */
.spec-tip > .tip::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 7px; }
.spec-tip:hover > .tip,
.spec-tip:focus-visible > .tip,
.spec-tip:focus-within > .tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.spec-tip > .tip a { color: var(--accent-light); }
.spec-tip > .tip a:hover { text-decoration: underline; }
/* Top highlight chips double as tooltip triggers: centre the tip under the chip, no info-dot. */
.specchips .spec-tip { cursor: help; }
.specchips .spec-tip::after { display: none; }
.specchips .spec-tip > .tip { left: 50%; right: auto; transform: translate(-50%, -4px); text-align: left; font-weight: 400; }
.specchips .spec-tip:hover > .tip,
.specchips .spec-tip:focus-visible > .tip,
.specchips .spec-tip:focus-within > .tip { transform: translate(-50%, 0); }
/* Right column: anchor tips to the right edge so they don't overflow off-screen. */
.specs .grid-2 > div:last-child .spec-tip > .tip { left: auto; right: 0; }
@media (max-width: 860px) {
    .specs .grid-2 > div:last-child .spec-tip > .tip { left: 0; right: auto; }
}

/* ── Pills / badges ── */
.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    background: rgba(0,204,102,0.15);
    color: var(--secondary);
}

/* ── License text blocks ── */
.lic { margin-top: 14px; }
.lic summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-light);
    padding: 10px 0;
    list-style: none;
}
.lic summary::-webkit-details-marker { display: none; }
.lic summary::before { content: '▸ '; color: var(--text-dim); }
.lic[open] summary::before { content: '▾ '; }
.lic pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8em;
    line-height: 1.55;
    color: var(--text-sec);
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    overflow-x: auto;
}

/* ── Buttons ── */
.btn {
    display: inline-block;
    padding: 11px 22px;
    background: var(--accent);
    color: #fff;
    border-radius: 7px;
    font-weight: 500;
    transition: background 0.15s;
}
.btn:hover { background: #1f5fd0; text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--border, #3A4E78); color: var(--text); }
.btn.ghost:hover { background: rgba(38,108,238,0.12); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── Footer ── */
footer {
    margin-top: 40px;
    padding: 28px 24px;
    border-top: 1px solid var(--divider);
    background: var(--bg-header);
    color: var(--text-dim);
    font-size: 0.82em;
    text-align: center;
    line-height: 1.7;
}
footer .foot-links { margin-bottom: 10px; }
footer .foot-links a { color: var(--text-sec); margin: 0 10px; }
footer .legal { max-width: 640px; margin: 0 auto; }

/* ── Nav "Buy now" button ── */
.site-nav .nav-buy {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.site-nav .nav-buy:hover { background: #1f5fd0; color: #fff; }

/* ── Section scaffolding ── */
.section { padding: 0; }
.section + .section { margin-top: 64px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: 1.75em; font-weight: 700; letter-spacing: 0.2px; }
.section-head p { color: var(--text-sec); margin-top: 12px; font-size: 1.02em; }
.center { text-align: center; }
/* Prose width control - keeps reading lines comfortable inside wide layouts. */
.prose { max-width: var(--prose); }
.prose p { color: var(--text-sec); margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); }
.prose .callout { margin-top: 16px; }
.prose .btn-row { margin-top: 18px; }
.section-head p, .lead { max-width: var(--prose); }
.section-head p { margin-left: auto; margin-right: auto; }
/* Cards inside grids rely on the grid gap, not their own bottom margin. */
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }

/* ── Generic grids ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

/* ── Pillars ── */
.pillar { text-align: left; }
.pillar .ic {
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(38,108,238,0.14); margin-bottom: 14px;
}
.pillar .ic svg { width: 24px; height: 24px; stroke: var(--accent-light); }
.pillar h3 { color: var(--text); font-size: 1.15em; margin-bottom: 6px; }
.pillar p { color: var(--text-sec); font-size: 0.95em; }
.pillar a.more { display: inline-block; margin-top: 10px; font-size: 0.9em; }

/* ── Sensor reading tiles (mirror the device dashboard) ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tile {
    background: var(--bg); border: 1px solid var(--divider); border-radius: 10px;
    padding: 16px; text-align: center;
}
.tile .t-label { color: var(--text-dim); font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; }
.tile .t-val { font-size: 1.8em; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tile .t-unit { color: var(--text-dim); font-size: 0.8em; }
.tile .t-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: 8px; }

/* ── IAQ colour scale bar ── */
.iaq-scale { margin: 8px 0 4px; }
.iaq-scale .bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; }
/* Six equal-width zone segments - matches the device IAQ indicator (LEVEL_WIDTH, equal per zone). */
.iaq-scale .bar span { display: block; flex: 1; }
/* Ticks: one label per equal segment, right-aligned to its boundary (matches the equal bands). */
.iaq-scale .ticks { display: flex; color: var(--text-dim); font-size: 0.72em; margin-top: 5px; }
.iaq-scale .ticks span { flex: 1; text-align: right; }

/* ── Zone / breakpoint table ── */
.ztable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92em; }
.ztable th, .ztable td { padding: 14px 15px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Zones table is descriptive (not numeric) - left-align so the colour chip sits next to its header. */
.ztable.zones th, .ztable.zones td { text-align: left; }
.ztable thead th { color: var(--text-sec); font-weight: 600; background: rgba(255,255,255,0.04); }
.ztable tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.ztable tbody tr:last-child td { border-bottom: none; }
.ztable td:first-child, .ztable th:first-child { text-align: left; }
.ztable .zlabel { display: inline-flex; align-items: center; gap: 8px; }
.ztable .zchip { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.table-wrap { overflow-x: auto; }

/* ── Feature rows (alternating) ── */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin: 0; }
.feature-row + .feature-row { margin-top: 64px; }
.feature-row.flip .feature-media { order: 2; }
.feature-media {
    background:
        radial-gradient(440px 220px at 30% 12%, rgba(38,108,238,0.16), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid var(--border-soft); border-radius: 16px;
    min-height: 280px; display: flex; align-items: center; justify-content: center;
    padding: 24px; color: var(--text-sec);
}
.feature-media img { max-width: 100%; height: auto; border-radius: 10px; }
/* Visible photo placeholder - describes the shot to drop in. Swap the whole div for an <img>. */
.feature-media.photo-ph { flex-direction: column; gap: 8px; font-size: 0.88em; line-height: 1.55; text-align: center; color: var(--text-sec); }
.feature-media.photo-ph::before { content: "PHOTO PLACEHOLDER"; color: var(--accent-light); font-weight: 700; letter-spacing: 1.5px; font-size: 0.78em; }
.feature-text h3 { font-size: 1.45em; margin-bottom: 10px; }
.feature-text p { color: var(--text-sec); max-width: 540px; }

/* ── Callout (honest framing / notes) ── */
.callout {
    border-left: 3px solid var(--accent);
    background: rgba(38,108,238,0.07);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px; margin: 16px 0; color: var(--text-sec); font-size: 0.92em;
}
.callout.warn { border-left-color: #FFB020; background: rgba(255,176,32,0.07); }

/* ── Steps ── */
ol.steps { color: var(--text-sec); margin: 6px 0 0 20px; }
ol.steps li { margin-bottom: 8px; }

/* ── CTA band ── */
.cta-band {
    margin: 56px 0 8px; padding: 34px 28px; text-align: center;
    background:
        radial-gradient(700px 240px at 50% -30px, rgba(38,108,238,0.13), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022)), var(--surface);
    border: 1px solid var(--border-soft); border-radius: 18px;
}
.cta-band h2 { font-size: 1.6em; }
.cta-band p { color: var(--text-sec); margin: 8px auto 18px; max-width: 560px; }

/* ── IAQ calculator + breakdown ── */
.calc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: start; }
.calc-field { margin-bottom: 16px; }
.calc-field label { display: flex; justify-content: space-between; color: var(--text-sec); font-size: 0.9em; margin-bottom: 6px; }
.calc-field label b { color: var(--text); font-variant-numeric: tabular-nums; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.calc-result { text-align: center; padding: 18px; border-radius: 12px; border: 1px solid var(--divider); background: var(--bg); }
.calc-result .big { font-size: 3.2em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-result .lvl { font-weight: 600; margin-top: 4px; }
.bd-row { display: grid; grid-template-columns: 92px 1fr 54px; gap: 10px; align-items: center; margin-top: 10px; font-size: 0.9em; }
.bd-row .bd-name { color: var(--text-sec); }
.bd-row .bd-name .raw { display: block; color: var(--text-dim); font-size: 0.82em; }
.bd-track { height: 10px; border-radius: 5px; background: var(--bg-header); overflow: hidden; }
.bd-fill { height: 100%; border-radius: 5px; transition: width 0.2s, background 0.2s; }
.bd-sub { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bd-row.driver .bd-name { color: var(--text); font-weight: 600; }
.bd-row.driver .bd-sub::after { content: ' ◀'; color: var(--accent-light); }
.driver-note { margin-top: 14px; font-size: 0.9em; color: var(--text-sec); }

/* ── Comparison table ── */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92em; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; }
.cmp thead th { background: rgba(255,255,255,0.04); color: var(--text-sec); font-weight: 600; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td.yes { color: var(--secondary); font-weight: 600; }
.cmp td.no { color: var(--text-dim); }
.cmp td:first-child { color: var(--text-sec); }
.cmp th:first-child { width: 36%; }
.cmp .me { color: var(--accent-light); font-weight: 700; }
.cmp th.me { background: rgba(38,108,238,0.14); border-radius: 10px 10px 0 0; }
.cmp td:nth-child(2) { background: rgba(38,108,238,0.035); }

/* ── Founder's Batch bar ── */
.founder-bar {
    background: rgba(0,204,102,0.055);
    border: 1px solid rgba(0,204,102,0.22);
    border-radius: 12px;
    padding: 11px 18px;
    margin: 0 auto 30px;
    max-width: 760px;
    text-align: center;
    font-size: 0.9em;
    color: var(--text-sec);
}
.founder-bar strong { color: var(--secondary); }
.founder-bar a { margin-left: 6px; white-space: nowrap; }

/* ── Spec chips (airy sensor/spec highlights) ── */
.specchips { display: flex; flex-wrap: wrap; gap: 10px; }
.specchips .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-soft);
    font-size: 0.85em; color: var(--text-sec);
}
.specchips .chip b { color: var(--text); font-weight: 600; }
.specchips .chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Stat figures ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.stat { text-align: center; }
.stat .n { font-size: 2.1em; font-weight: 800; color: var(--accent-light); line-height: 1; letter-spacing: -0.5px; }
.stat .l { color: var(--text-sec); font-size: 0.9em; margin-top: 8px; }

/* ── Bare-section helpers ── */
.section-intro { max-width: var(--prose); margin: 0 auto; text-align: center; }
.section-intro .lead { margin: 0 auto; }
.surface { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022)), var(--surface);
           border: 1px solid var(--border-soft); border-radius: 16px; padding: 30px 32px; }

/* ── Focus + motion ── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .hero.split .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 28px; }
    .hero.split .hero-copy .eyebrow { display: inline-block; }
    .hero.split .btn-row { justify-content: center; }
    .hero.split .feature-media { order: 2; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 760px) {
    .calc-grid { grid-template-columns: 1fr; }
    .feature-row { grid-template-columns: 1fr; gap: 24px; }
    .feature-row + .feature-row { margin-top: 44px; }
    .feature-row.flip .feature-media { order: 0; }
    .section + .section { margin-top: 48px; }
}
@media (max-width: 600px) {
    .site-header { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .site-nav { justify-content: center; }
    .hero { padding: 44px 16px 38px; }
    .hero h1 { font-size: 1.7em; }
    .section-head h2 { font-size: 1.4em; }
    main { padding: 36px 16px 8px; }
    .card { padding: 22px 20px; }
    .info-row { flex-direction: column; gap: 2px; }
    .info-row .val { text-align: left; }
}