/* ============================================================================
   Smile Cast — application styles
   Hand-written CSS, no preprocessor and no build step, so what you upload is
   what the browser runs. Mobile-first; the room UI has its own file.
   ========================================================================== */

:root {
    --ink: #12212e;
    --ink-soft: #43525f;
    --ink-muted: #6b7a88;
    --line: #e3e7ec;
    --line-strong: #cfd6de;
    --bg: #ffffff;
    --bg-soft: #f6f7f9;
    --bg-sunken: #eef1f4;
    --brand: #2563eb;
    --brand-dark: #5b3df0;
    --brand-soft: #e8efff;
    --accent: #1f7a8c;
    --ok: #1f7a4d;
    --ok-soft: #e6f4ec;
    --warn: #9a6a00;
    --warn-soft: #fdf3dd;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(18, 33, 46, .06), 0 1px 3px rgba(18, 33, 46, .04);
    --shadow: 0 6px 18px rgba(18, 33, 46, .08);
    --shadow-lg: 0 18px 48px rgba(18, 33, 46, .14);
    --space: 16px;
    --container: 1160px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Kinetic and rhythm tokens. Three values do the work every component used to
       spell out for itself: one motion curve, one duration, and the vertical
       rhythm of a full-width band. --ring is the single focus treatment, so the
       keyboard story cannot drift from component to component. */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur: .18s;
    --section-y: clamp(52px, 6vw, 88px);
    --ring: rgba(37, 99, 235, .45);
    --brand-2: #5b3df0;
    --grad-brand: linear-gradient(120deg, var(--brand), var(--brand-2));
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8edf2;
        --ink-soft: #b9c4cf;
        --ink-muted: #8d9aa6;
        --line: #26313d;
        --line-strong: #33404d;
        --bg: #0f1720;
        --bg-soft: #151f29;
        --bg-sunken: #101a23;
        --brand-soft: #14213a;
        --ok-soft: #10281c;
        --warn-soft: #2c2410;
        --danger-soft: #2e1512;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 6px 18px rgba(0, 0, 0, .45);
        --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
        --ring: rgba(96, 165, 250, .5);
    }
}

/* Explicit light theme: applied when data-theme="light" is set, even while the
   OS is in dark mode. Duplicates the default palette. */
:root[data-theme="light"] {
    --ink: #12212e;
    --ink-soft: #43525f;
    --ink-muted: #6b7a88;
    --line: #e3e7ec;
    --line-strong: #cfd6de;
    --bg: #ffffff;
    --bg-soft: #f6f7f9;
    --bg-sunken: #eef1f4;
    --brand-soft: #e8efff;
    --ok-soft: #e6f4ec;
    --warn-soft: #fdf3dd;
    --danger-soft: #fdecea;
    --shadow-sm: 0 1px 2px rgba(18, 33, 46, .06), 0 1px 3px rgba(18, 33, 46, .04);
    --shadow: 0 6px 18px rgba(18, 33, 46, .08);
    --shadow-lg: 0 18px 48px rgba(18, 33, 46, .14);
}

/* Explicit dark theme: applied when data-theme="dark" is set, even while the
   OS is in light mode. Mirrors the media-query palette above. */
:root[data-theme="dark"] {
    --ink: #e8edf2;
    --ink-soft: #b9c4cf;
    --ink-muted: #8d9aa6;
    --line: #26313d;
    --line-strong: #33404d;
    --bg: #0f1720;
    --bg-soft: #151f29;
    --bg-sunken: #101a23;
    --brand-soft: #14213a;
    --ok-soft: #10281c;
    --warn-soft: #2c2410;
    --danger-soft: #2e1512;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
    --ring: rgba(96, 165, 250, .5);
    color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------- theme toggle ----- */
.theme-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    flex: 0 0 auto; flex-wrap: nowrap;
    background: var(--bg-sunken); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px;
}
.theme-btn { flex: 0 0 auto; }
.theme-btn {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-muted); cursor: pointer;
}
.theme-btn .icon { width: 15px; height: 15px; }
.theme-btn:hover { color: var(--ink); background: var(--bg-soft); }
.theme-btn.is-active { background: var(--bg); color: var(--brand); box-shadow: var(--shadow-sm); }

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg-sunken); padding: .12em .38em; border-radius: 5px; }
pre code { background: none; padding: 0; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-muted); }
.small { font-size: .86rem; }
.lead { font-size: 1.06rem; color: var(--ink-soft); max-width: 62ch; }
#main { flex: 1 0 auto; padding-bottom: 56px; }

/* Selection and focus, once, for the whole product. */
::selection { background: var(--brand-soft); color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Anchor jumps land below the sticky bar instead of behind it. */
html { scroll-padding-top: 86px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff;
    padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- top bar -- */
.topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-inner { display: flex; align-items: center; gap: 18px; min-height: 62px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    object-fit: contain;
}
img.brand-mark { border-radius: 9px; }
.mainnav { display: flex; gap: 2px; flex-wrap: wrap; margin-right: auto; }
.navlink {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-soft);
    font-size: .93rem; font-weight: 550; white-space: nowrap;
}
.navlink .icon { width: 15px; height: 15px; opacity: .7; transition: opacity .12s; }
.navlink:hover .icon, .navlink.is-active .icon { opacity: 1; }
.navlink:hover { background: var(--bg-soft); text-decoration: none; color: var(--ink); }
.navlink.is-active { background: var(--brand-soft); color: var(--brand-dark); }
@media (prefers-color-scheme: dark) { .navlink.is-active { color: var(--brand); } }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* The marketing bar floats over the hero rather than sitting on it as a solid
   strip. Backdrop blur is progressive: without support the browser simply keeps
   the opaque background declared first. */
.topbar-marketing {
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
}
@supports (backdrop-filter: blur(2px)) {
    .topbar-marketing {
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; display: block; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 8px; z-index: 50;
}
.usermenu-panel a, .usermenu-panel .linkish {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius-sm);
    color: var(--ink-soft); font-size: .93rem; width: 100%; text-align: left;
}
.usermenu-panel a .icon, .usermenu-panel .linkish .icon { width: 15px; height: 15px; opacity: .7; }
.usermenu-panel a:hover .icon, .usermenu-panel .linkish:hover .icon { opacity: 1; }
.usermenu-panel a:hover, .usermenu-panel .linkish:hover { background: var(--bg-soft); text-decoration: none; }
.usermenu-head { padding: 10px 11px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 3px; }
.linkish { background: none; border: 0; font: inherit; cursor: pointer; color: var(--ink-soft); }

.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 650; font-size: .78rem; letter-spacing: .02em;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
/* An uploaded portrait fills its avatar and crops to the face, rather than
   leaving a coloured monogram in the same panel the person has a photo for. */
.avatar-photo { object-fit: cover; object-position: center 32%; }
.avatar .portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; border-radius: 50%; display: block; }
.dash-eyebrow.has-avatar { display: inline-flex; align-items: center; gap: 10px; }
.person-line { display: inline-flex; align-items: center; gap: 8px; }
/* The workspace roster on the dashboard: a portrait with the person's name and
   role beside it, so the page names the people it is counting. */
.peoplestrip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.peoplestrip li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.peoplestrip-text { display: grid; line-height: 1.25; min-width: 0; }
.peoplestrip-text strong { font-size: .9rem; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font: inherit; font-weight: 600; font-size: .94rem; cursor: pointer;
    text-align: center; white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease),
        transform .05s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The primary button is a flat gradient rather than one solid colour, so it keeps
   its shape while the shadow does the lifting on hover. */
.btn-primary {
    background: var(--brand); background-image: var(--grad-brand); border-color: transparent; color: #fff;
    box-shadow: 0 1px 2px rgba(18, 33, 46, .10), 0 6px 18px rgba(37, 99, 235, .22);
}
.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 2px 4px rgba(18, 33, 46, .14), 0 12px 28px rgba(37, 99, 235, .30);
}
.btn-primary:active { filter: brightness(.98); box-shadow: 0 1px 2px rgba(18, 33, 46, .14); }
.btn-ghost { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink-muted); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm { padding: 7px 12px; font-size: .87rem; }
.btn-lg { padding: 13px 22px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- containers -- */
.section { padding: var(--section-y) 0; }
.section-title { text-align: center; margin-bottom: 26px; letter-spacing: -.02em; }
.page-head { padding: 34px 0 20px; }
.page-head h1 { margin-bottom: .3em; }

.card {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(18, 33, 46, .05), 0 1px 3px rgba(18, 33, 46, .04);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 0; }

.grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
    /* A soft brand glow behind the product shot, falling off to the page colour.
       Both stops are tokens, so it follows the theme instead of being a fixed
       tint that looks wrong in one of them. */
    background:
        radial-gradient(58% 68% at 84% 0%, var(--brand-soft), transparent 72%),
        linear-gradient(170deg, var(--bg-soft) 0%, var(--bg) 62%);
    border-bottom: 1px solid var(--line);
    padding: clamp(40px, 6vw, 68px) 0 clamp(44px, 6vw, 72px);
}
.hero-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero-inner { grid-template-columns: 1.15fr .85fr; } }
.pill {
    display: inline-block; background: var(--brand-soft); color: var(--brand-dark);
    border-radius: 999px; padding: 5px 13px; font-size: .82rem; font-weight: 600; margin-bottom: 16px;
}
@media (prefers-color-scheme: dark) { .pill { color: var(--brand); } }
.hero h1 { margin-bottom: .4em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }

/* Join-by-code on the homepage: the quickest way into a call, so it sits with
   the hero actions rather than behind another click. */
.hero-join { margin: 0 0 8px; }
.hero-join-note { max-width: 56ch; margin: 0 0 6px; }

/* The hero product shot: a dark room panel with a chrome strip, a grid of real
   participant portraits, and a control bar. It is decorative (aria-hidden), so
   the images carry empty alt text and the labels stay visible for everyone. */
/* Deliberately theme-independent: this is a picture of the meeting room, which
   is dark in both themes. Using --ink here turned the shot white in dark mode. */
.mock-room { background: #0b1016; border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-lg); }
.mock-chrome { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; font-size: .76rem; }
.mock-live {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    background: rgba(31, 122, 77, .22); color: #7fe0ab; font-weight: 650;
}
.mock-livedot { width: 7px; height: 7px; border-radius: 50%; background: #35c47f; box-shadow: 0 0 0 3px rgba(53, 196, 127, .2); }
.mock-title { color: #e8edf2; font-weight: 650; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-quality { display: inline-flex; align-items: center; gap: 5px; color: #9fb0c0; }
.mock-quality .icon { width: 13px; height: 13px; }
.mock-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff8f86; font-family: var(--mono); font-weight: 650; }
.mock-recdot { width: 8px; height: 8px; border-radius: 50%; background: #e5483c; animation: sc-rec 1.6s ease-in-out infinite; }
@keyframes sc-rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mock-recdot { animation: none; } }

.mock-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-tile {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
    background: linear-gradient(140deg, #1f7a8c, #12212e);
}
.mock-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mock-name {
    position: absolute; left: 8px; bottom: 8px; z-index: 1;
    background: rgba(9, 14, 20, .62); color: #fff; font-size: .77rem; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
}
.mock-mic {
    position: absolute; right: 8px; bottom: 8px; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(9, 14, 20, .62); color: #e8edf2;
}
.mock-mic .icon { width: 13px; height: 13px; }
.mock-mic-off { color: #ffb4ac; }

.mock-ctl { display: flex; align-items: center; gap: 8px; padding: 14px 4px 2px; }
.mock-ctl-btn {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #cbd5e1;
}
.mock-ctl-btn .icon { width: 16px; height: 16px; }
.mock-ctl-btn.is-on { background: rgba(255, 255, 255, .17); color: #fff; }
.mock-ctl-btn.is-leave { background: #b3261e; color: #fff; }
.mock-label { margin-left: auto; color: #9aa7b4; font-size: .78rem; font-family: var(--mono); white-space: nowrap; }

/* -------------------------------------------------------------- features -- */
/* Compact cards on purpose: ten of them scan as a grid of capabilities, where
   six short essays read as a wall. The numbers a reader might not believe are in
   the capability band further down, which says where they come from. */
.feature-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.feature-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
    box-shadow: 0 1px 2px rgba(18, 33, 46, .04);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px;
    background: var(--brand-soft); color: var(--brand-dark);
}
@media (prefers-color-scheme: dark) { .feature-icon { color: var(--brand); } }
.feature-icon .icon { width: 18px; height: 18px; }
.feature-card h3 { font-size: .97rem; margin-bottom: .3em; }
.feature-card p { margin: 0; color: var(--ink-soft); font-size: .87rem; line-height: 1.5; }
.feature-card code { font-size: .84em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 5px; }

/* ------------------------------------------------------------ suite band -- */
/* The four products, named. Four equal columns on a wide screen, two on a
   tablet and one on a phone; the bullet list is pinned to the bottom of each
   card so the rows line up however long the prose runs. */
.suite { padding: var(--section-y) 0 6px; }
.suite-head { display: grid; gap: 10px; margin-bottom: 30px; }
@media (min-width: 900px) { .suite-head { grid-template-columns: 1.05fr 1fr; align-items: end; gap: 30px; } }
.suite-title { text-align: left; margin-bottom: 0; }
.suite-lede { margin: 0; max-width: 54ch; font-size: 1.02rem; }
.suite-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .suite-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.suite-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(18, 33, 46, .05);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* A hairline of the brand gradient across the top edge, so the four cards read as
   one product family rather than four unrelated panels. */
.suite-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: var(--grad-brand);
}
.suite-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.suite-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.suite-icon {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: var(--brand-soft); color: var(--brand-dark);
}
@media (prefers-color-scheme: dark) { .suite-icon { color: var(--brand); } }
.suite-icon .icon { width: 20px; height: 20px; }
.suite-tag {
    font-size: .71rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted);
}
.suite-card h3 { font-size: 1.06rem; margin-bottom: .35em; }
.suite-card p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin-bottom: 14px; }
.suite-points { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 7px; font-size: .88rem; }
.suite-points li { position: relative; padding-left: 21px; color: var(--ink-soft); }
.suite-points li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 13px; height: 13px;
    background: var(--brand);
    -webkit-mask: url("../img/icon-check.svg") center / contain no-repeat;
            mask: url("../img/icon-check.svg") center / contain no-repeat;
}
.suite-points code { font-size: .85em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 5px; }

/* --------------------------------------------------------------- pricing -- */
.pricing-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pricing-card {
    position: relative; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 4px;
}
.pricing-card-featured { border-color: var(--brand); box-shadow: var(--shadow); }
.pricing-flag {
    position: absolute; top: -11px; left: 22px; background: var(--brand); color: #fff;
    font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em;
}
.pricing-card h3 { margin-bottom: .1em; }
.price { margin: 12px 0 16px; }
.price-amount { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.price-period { color: var(--ink-muted); font-size: .9rem; }
.plan-facts { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
/* The label and its value sit on one line when they fit. When a value carries
   a caveat it is too long to share the row, so it wraps to its own line rather
   than squeezing the label into a stack of single words. */
.plan-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .89rem; }
.plan-facts dt { color: var(--ink-muted); white-space: nowrap; }
.plan-facts dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; flex: 1 1 auto; }
.feature-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.feature-list li { padding-left: 24px; position: relative; color: var(--ink-soft); }
.feature-list li::before {
    content: ""; position: absolute; left: 0; top: .18em; width: 15px; height: 15px;
    background: var(--ok);
    -webkit-mask: url("../img/icon-check.svg") center / contain no-repeat;
            mask: url("../img/icon-check.svg") center / contain no-repeat;
}
.pricing-card .btn { margin-top: auto; }
.pricing-note { text-align: center; margin-top: 22px; }

/* Plan facts carry two numbers — what the plan promises and what a room holds
   today. The caveat is deliberately quiet, not hidden. */
.plan-caveat { display: block; margin-top: 6px; line-height: 1.5; }

/* ------------------------------------------------------------- developer -- */
.developer-strip { background: #0a1119; color: #e8edf2; padding: 52px 0; }
.developer-strip h2 { color: #fff; }
.developer-strip .lead { color: #b9c4cf; }
.developer-strip-inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 980px) { .developer-strip-inner { grid-template-columns: 1fr 1fr; } }
.codeblock {
    margin: 0; background: #0a1119; border: 1px solid #26313d; border-radius: var(--radius);
    padding: 18px; overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.65; color: #d7e0ea;
}

/* The dark band's secondary button: the light theme's .btn-ghost is a white card
   and would glow against #0a1119. */
.btn-ghost-invert { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-ghost-invert:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Developer tabs. Radio inputs are the siblings of both the labels and the
   panels, so :checked switches with no script — the same technique as the screen
   gallery above. If it ever stops working the first panel is what remains. */
.devtabs { position: relative; min-width: 0; }
.devtabs .devtab-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.devtabs-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.devtabs-labels .devtab {
    padding: 7px 14px; border: 1px solid transparent; border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: #9aa7b4; cursor: pointer;
    user-select: none; white-space: nowrap;
}
.devtabs-labels .devtab:hover { color: #fff; background: rgba(255, 255, 255, .08); }
#devtab-rest:checked ~ .devtabs-labels label[for="devtab-rest"],
#devtab-sdk:checked ~ .devtabs-labels label[for="devtab-sdk"],
#devtab-hooks:checked ~ .devtabs-labels label[for="devtab-hooks"] {
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff;
}
#devtab-rest:focus-visible ~ .devtabs-labels label[for="devtab-rest"],
#devtab-sdk:focus-visible ~ .devtabs-labels label[for="devtab-sdk"],
#devtab-hooks:focus-visible ~ .devtabs-labels label[for="devtab-hooks"] {
    outline: 2px solid #93c5fd; outline-offset: 2px;
}
.devtabs-panels .devtab-panel { display: none; }
#devtab-rest:checked ~ .devtabs-panels .devtab-panel[data-devtab="rest"],
#devtab-sdk:checked ~ .devtabs-panels .devtab-panel[data-devtab="sdk"],
#devtab-hooks:checked ~ .devtabs-panels .devtab-panel[data-devtab="hooks"] { display: block; }
.devtabs-note { margin: 12px 0 0; color: #9aa7b4; font-size: .82rem; line-height: 1.6; }
.devtabs-note code { background: rgba(255, 255, 255, .1); color: #d7e0ea; padding: 1px 5px; border-radius: 5px; font-size: .95em; }

/* -------------------------------------------------------------- solutions -- */
.solutions { padding: 52px 0 8px; }
.solutions-head { display: grid; gap: 12px; margin-bottom: 26px; }
@media (min-width: 900px) { .solutions-head { grid-template-columns: 1.15fr 1fr; align-items: end; } }
.solutions-intro h2 { margin: 0; }
.solutions-lede { margin: 0; max-width: 52ch; }
.solution-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .solution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.solution-card {
    /* The default tone, overridden by the .tone-* class on the same element. It
       has to be declared here and not on .solution-art below: a custom property
       set on the child wins over the one it would have inherited from the card,
       so every tile would render in the brand gradient. */
    --tone-a: var(--brand);
    --tone-b: var(--brand-dark);
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px;
    box-shadow: 0 1px 2px rgba(18, 33, 46, .05);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
/* Each card's art is the workspace's own photograph, cropped to 4:3 by the file
   and again by object-fit for narrower cards. The tone gradient stays underneath
   as the fallback, so a card whose image has not arrived yet is a coloured panel
   rather than a white hole. */
.solution-art {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3; max-height: 240px;
    border-radius: var(--radius); margin-bottom: 14px; color: #fff;
    background:
        radial-gradient(120% 130% at 18% 0%, rgba(255, 255, 255, .3), transparent 62%),
        linear-gradient(135deg, var(--tone-a), var(--tone-b));
}
.solution-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.tone-sky { --tone-a: #2563eb; --tone-b: #5b3df0; }
.tone-violet { --tone-a: #7c3aed; --tone-b: #a21caf; }
.tone-teal { --tone-a: #0d9488; --tone-b: #0e7490; }
.tone-amber { --tone-a: #d97706; --tone-b: #b45309; }
.solution-card h3 { margin-bottom: .3em; }
.solution-card p { margin: 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.55; }
.solutions-foot { margin: 22px auto 0; text-align: center; }

/* --------------------------------------------------------------- cta band -- */
.cta-band { padding: 40px 0 56px; }
.cta-panel {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
    padding: 30px 34px; border-radius: var(--radius-lg); color: #fff; box-shadow: var(--shadow-lg);
    background:
        radial-gradient(140% 170% at 0% 0%, rgba(255, 255, 255, .24), transparent 58%),
        linear-gradient(120deg, var(--brand), var(--brand-dark));
}
.cta-copy h2 { color: #fff; margin: 0 0 6px; }
.cta-copy p { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, .88); }
.cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-btn { background: #fff; color: var(--brand-dark); font-weight: 700; }
.cta-btn:hover { background: rgba(255, 255, 255, .9); color: var(--brand-dark); text-decoration: none; }
.cta-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta-link:hover { color: #fff; }

/* A small caps label above a heading. */
.eyebrow {
    display: block; margin: 0 0 8px; font-size: .74rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--brand-dark);
}
.eyebrow-invert { color: #93c5fd; }

/* -------------------------------------------------------------- install --- */
.installpage { max-width: 780px; margin: 0 auto; padding: 8px 0 40px; }
.installpage .lead { max-width: none; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.checklist li > span:last-child { display: grid; }
.check-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.check-icon .icon { width: 13px; height: 13px; }

.checklist .ok .check-icon { background: var(--ok-soft); color: var(--ok); }
.checklist .warn .check-icon { background: var(--warn-soft); color: var(--warn); }
.checklist .fail .check-icon { background: var(--danger-soft); color: var(--danger); }

/* BIMI records on the admin health page: a name, a type, and a copy button over
   the value an operator pastes into their DNS provider. */
.bimi-records { display: grid; gap: 16px; margin: 12px 0 18px; }
.bimi-record-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.bimi-record-head code { font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; }
.bimi-record-head .btn { margin-left: auto; }
.bimi-record .codeblock { white-space: pre-wrap; overflow-wrap: anywhere; }
.statgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 22px 0; }
.stat {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.stat-value { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink-soft); font-size: .84rem; font-weight: 600; }
/* The line under a number is what stops it being decoration: it is computed from
   the same aggregate the number is, so it always has something true to say. */
.stat-context { color: var(--ink-muted); font-size: .78rem; margin-top: 6px; }
.numbered { padding-left: 20px; display: grid; gap: 12px; }

/* ------------------------------------------------------------------ auth -- */
.authpage { max-width: 460px; margin: 40px auto; }
.authcard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.authcard-wide { max-width: 620px; }
.authcard h1 { font-size: 1.6rem; }
.authlinks { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; font-size: .9rem; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }

/* The hidden attribute must win over our own display rules, otherwise anything
   with a layout class (such as .stack) stays visible when hidden. */
[hidden] { display: none !important; }
legend { font-size: .84rem; padding: 0 6px; }

/* ----------------------------------------------------------------- forms -- */
.field { display: grid; gap: 6px; }
.field-label { font-size: .89rem; font-weight: 600; }
.field-hint { font-size: .82rem; color: var(--ink-muted); }
.field-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="datetime-local"], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--brand); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-muted); }
textarea { min-height: 96px; resize: vertical; }
.checkbox { display: flex; align-items: center; gap: 9px; font-size: .92rem; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--brand); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 6px; font-size: .9rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .field-hint { max-width: 52ch; }
input[type="checkbox"].switch { width: 40px; height: 22px; accent-color: var(--brand); }

/* ---------------------------------------------------------------- alerts -- */
.flashstack { margin-top: 16px; }
.alert { border-radius: var(--radius-sm); padding: 12px 15px; font-size: .93rem; border: 1px solid transparent; margin-bottom: 12px; }
.alert.has-icon { display: flex; gap: 10px; align-items: flex-start; }
.alert-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.alert-icon .icon { width: 18px; height: 18px; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-body > p:first-child { margin-top: 0; }
.alert-title { font-weight: 650; margin: 0 0 4px; }
.alert-list { margin: 0; padding-left: 20px; }
.alert-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.alert-info { background: var(--bg-soft); color: var(--ink-soft); border-color: var(--line-strong); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.alert :is(a) { color: inherit; font-weight: 600; }

/* --------------------------------------------------------------- icons ---- */
.icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
.icon-lg { width: 1.5em; height: 1.5em; vertical-align: -.3em; }
a .icon, .btn .icon { vertical-align: -.18em; }


.badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem;
    font-weight: 650; letter-spacing: .02em; background: var(--bg-sunken); color: var(--ink-soft);
}
.badge-soft { background: var(--brand-soft); color: var(--brand-dark); }
@media (prefers-color-scheme: dark) { .badge-soft { color: var(--brand); } }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------------ tabs -- */
/* ---------------------------------------------------------------- admin nav --
   The panel sidebar. It renders from the layout so every admin screen has it;
   below 900px it becomes a horizontally scrollable strip instead of a column,
   because a fixed sidebar on a phone eats the screen it is meant to help. */
.admin-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 6px; }
.admin-main { min-width: 0; }

.admin-nav {
    position: sticky;
    top: 78px;
    padding: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.admin-nav-title {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 6px 12px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280);
}
.admin-nav-title .icon { width: 15px; height: 15px; }
.admin-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.admin-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 11px; color: inherit; text-decoration: none;
    border: 1px solid transparent;
}
.admin-nav-link:hover { background: var(--bg); border-color: var(--line); }
.admin-nav-link.is-active { background: var(--bg); border-color: var(--line); box-shadow: inset 3px 0 0 var(--brand, #E4572E); }
.admin-nav-link.is-active .admin-nav-label { font-weight: 650; }
.admin-nav-icon { display: inline-flex; flex: 0 0 auto; }
.admin-nav-icon .icon { width: 17px; height: 17px; }
.admin-nav-text { display: grid; gap: 1px; min-width: 0; }
.admin-nav-label { font-size: 14px; line-height: 1.25; }
.admin-nav-hint { font-size: 11.5px; line-height: 1.25; color: var(--muted, #6b7280); }
.admin-nav-foot { margin: 12px 4px 2px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.admin-nav-foot a { display: inline-flex; align-items: center; gap: 7px; }
.admin-nav-foot .icon { width: 15px; height: 15px; }

/* The empty-state / attention rows the admin overview leans on. */
.admin-attention { display: grid; gap: 8px; }
.admin-attention-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* ----------------------------------------------------------- admin polish --
   Shared touches that make the panel feel of one piece: an icon beside every
   page title, a live "pulse" for rooms with people in them, and a consistent
   right-aligned action cell so a row of buttons never jumps between tables. */
.admin-main .page-head h1 { display: flex; align-items: center; gap: 10px; }
.admin-main .page-head h1 .icon { width: 1.15em; height: 1.15em; color: var(--brand-dark); }

/* A live room reads at a glance, without a second colour being invented. */
.live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok); margin-right: 6px; vertical-align: middle;
    box-shadow: 0 0 0 0 var(--ok-soft); animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-indicator { display: inline-flex; align-items: center; margin-left: 8px; color: var(--ok); font-weight: 600; }

/* A whole row that is live gets a quiet tint so it is findable when scanning. */
table.data tbody tr.row-live td { background: color-mix(in srgb, var(--ok-soft) 45%, transparent); }
table.data tbody tr.row-live:hover td { background: var(--ok-soft); }

.row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }

.card-live { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.card-live .card-head h2 .icon { color: var(--ok); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 5px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; }
.tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600;
    color: var(--ink-muted); text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.tab .icon { width: 15px; height: 15px; opacity: .85; }
.tab:hover { color: var(--ink); background: var(--bg-sunken); }
.tab.is-active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
.tab.is-active .icon { color: var(--brand-dark); opacity: 1; }

/* ---------------------------------------------------------------- tables -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { background: var(--bg-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 650; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--dur) var(--ease); }
table.data tbody tr:hover td { background: var(--bg-soft); }
/* The header stays put while a long table scrolls under it. */
table.data thead th { position: sticky; top: 0; z-index: 1; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 30px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-soft); }

/* --------------------------------------------------------- trend chart ----- */
/* Bars are sized from the data as a percentage of the window's busiest day, so
   a bar is only ever as tall as that day was busy. */
.trend { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 6px 2px 0; }
.trend-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.trend-bar { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--brand); min-height: 2px; transition: background .15s ease; }
.trend-col:hover .trend-bar { background: var(--brand-dark); }
.trend-bar.is-empty { background: var(--line-strong); }

/* A colour field with a live swatch beside it, so the stored accent is visible
   without opening a picker. */
.colorfield { display: flex; align-items: center; gap: 10px; }
.colorfield-swatch { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.colorfield input { flex: 1 1 auto; }

/* Workspace logo: a live preview beside the upload control, so the stored mark
   is visible before a new one is chosen. */
.logo-field { display: flex; align-items: flex-start; gap: 12px; }
.logo-field-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logo-preview {
    width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
    object-fit: contain; background: var(--bg);
}
.logo-preview-empty {
    display: grid; place-items: center; font-weight: 700; font-size: 1.2rem;
    color: var(--brand-dark); background: var(--brand-soft);
}

/* The workspace logo worn as a chip in the account menu. */
.workspace-chip { display: inline-flex; align-items: center; gap: 6px; }
.workspace-chip-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }

/* A card that stands in for a paid feature the current plan does not carry. */
.card-locked { border-style: dashed; border-color: var(--line-strong); background: var(--bg-soft); }
.card-locked .card-head h2 .icon { color: var(--ink-muted); }

/* ----------------------------------------------------------------- meter -- */
.meter { background: var(--bg-sunken); border-radius: 999px; height: 8px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.meter-ok > span { background: var(--ok); }
.meter-warn > span { background: var(--warn); }
.meter-danger > span { background: var(--danger); }

/* ----------------------------------------------------------- device check -- */
.device-check { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin: 18px 0; align-items: start; }
.device-preview { position: relative; aspect-ratio: 16 / 9; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.device-preview video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.device-preview-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; margin: 0; }
.device-meter { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.device-meter > span { display: block; height: 100%; width: 0; background: var(--ink-muted); border-radius: 999px; transition: width .08s linear, background .2s ease; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
@media (max-width: 820px) { .device-check { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ docs -- */
.doc { max-width: 78ch; }
.doc h2 { margin-top: 34px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.callout { background: var(--bg-soft); border-left: 3px solid var(--brand); padding: 16px 18px; border-radius: var(--radius-sm); margin: 20px 0; }
.callout p:last-child { margin-bottom: 0; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; color: var(--ink-soft); }

/* -------------------------------------------------------------- playground -- */
.playground-form { display: grid; gap: 14px; margin-top: 16px; }
.playground-params { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.playground-params:empty { display: none; }
.playground-form textarea {
    width: 100%; font-family: var(--mono); font-size: .82rem; line-height: 1.55;
    padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--bg-sunken); color: var(--ink); resize: vertical;
}
.playground-form textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.playground-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.playground-result { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.playground-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.playground-h3 { margin: 16px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.playground .codeblock { max-height: 340px; overflow: auto; margin: 0; }

/* ---------------------------------------------------------------- errors -- */
.errorpage { max-width: 620px; margin: 60px auto; text-align: center; }
.errorcode { font-size: 3.4rem; font-weight: 750; color: var(--brand); margin: 0; letter-spacing: -.03em; }
.erroractions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* --------------------------------------------------------------- footers -- */
.sitefooter { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 22px 0; margin-top: auto; }
.sitefooter-inner { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; }

/* The signed-out footer is a map of the site, so it is a grid of link columns
   rather than one row. Signed in, the single line above is what stays. */
.sitefooter-map { padding: 46px 0 24px; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }
.footer-brand .brand { margin-bottom: 12px; }
.footer-tagline { margin: 0 0 12px; max-width: 42ch; color: var(--ink-soft); font-size: .92rem; }
.footer-meta { margin: 0; }
.footer-col-title {
    margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-muted);
}
.footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--ink-soft); font-size: .92rem; }
.footer-col a:hover { color: var(--brand-dark); }
.footer-bottom {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
}
.footer-bottom p { margin: 0; }
.footer-bottom-links { display: flex; gap: 16px; flex-wrap: wrap; }

.plain-body { background: var(--bg-soft); }
.plain-header { padding: 20px; text-align: center; }
.plain-header .brand { justify-content: center; }
.plain-main { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 20px 60px; flex: 1 0 auto; }
.plain-footer { padding: 20px; text-align: center; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ utilities --- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.inline-form { display: inline; }
.copyrow { display: flex; gap: 8px; align-items: center; }
.copyrow input { font-family: var(--mono); font-size: .85rem; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ------------------------------------------------------- lists & rows ----- */
.datalist { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------ mobile ----- */
/* The 860px-and-under experience: single column, reachable controls, tables
   that scroll instead of blowing out the layout. */
@media (max-width: 860px) {
    body { font-size: 15px; }
    .container { padding: 0 14px; }

    /* Topbar: stack brand + actions, let the nav scroll horizontally. */
    .topbar-inner { gap: 10px; padding: 8px 0; min-height: 0; }
    .mainnav {
        order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: 0;
        padding-bottom: 2px;
    }
    .mainnav::-webkit-scrollbar { display: none; }
    .navlink { flex: 0 0 auto; padding: 7px 9px; }
    .topbar-actions { margin-left: auto; }
    .topbar-actions form { display: none; } /* the dashboard keeps its own button */

    /* The marketing bar stacks brand, actions and a scrolling nav into three
       rows on a phone, which is already a lot of the viewport. A translucent,
       blurred strip blurs whatever slides under it — legible over a hero, a
       smeared band over a table. It goes opaque here, and the blur (a real GPU
       cost on a phone) goes with it. */
    .topbar-marketing {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .page-head { padding: 22px 0 14px; }
    .section { padding: 30px 0; }

    /* Cards and grids collapse to one column with tighter gutters. */
    .card { padding: 16px; }
    .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 12px; }
    .stat-value { font-size: 1.25rem; }

    /* Data tables scroll inside their wrapper rather than overflowing. */
    .table-wrap { margin: 0 -14px; border-left: 0; border-right: 0; border-radius: 0; }
    table.data th, table.data td { padding: 9px 12px; }

    /* Datalist rows wrap instead of squeezing. */
    .datalist li { flex-wrap: wrap; }

    /* Forms: single column, 16px inputs so iOS does not zoom on focus. */
    .field-row { grid-template-columns: 1fr; gap: 12px; }
    input[type="text"], input[type="email"], input[type="password"], input[type="url"],
    input[type="number"], input[type="search"], input[type="datetime-local"], select, textarea {
        font-size: 16px;
    }
    .btn { padding: 11px 16px; }
    .btn-block { width: 100%; }

    .hero { padding: 34px 0 38px; }
    .hero-actions .btn { flex: 1 1 auto; }

    .tabs { border-radius: var(--radius-sm); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 0 0 auto; }

    .copyrow { flex-wrap: wrap; }
    .copyrow input { flex: 1 1 100%; }

    .feature-card:hover, .pricing-card:hover { transform: none; }
}

@media (max-width: 480px) {
    .statgrid { grid-template-columns: 1fr 1fr; }
    .theme-toggle { order: -1; }
    .brand-name { font-size: .95rem; }
    /* Keep brand + toggle + auth buttons on one 320px line. */
    .topbar-actions { gap: 6px; }
    .topbar-actions .btn { padding: 8px 11px; font-size: .84rem; }
    .theme-btn { width: 26px; height: 26px; }
}
.datalist li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.datalist li:last-child { border-bottom: 0; padding-bottom: 0; }
.datalist a { font-weight: 600; }
.person { display: inline-flex; align-items: center; gap: 9px; }
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.waiting-pulse { display: flex; justify-content: center; padding: 18px 0; }
.waiting-pulse .avatar { animation: sc-pulse 1.8s ease-in-out infinite; }
@keyframes sc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .82; } }

.filterbar, .pagination { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; }
.pagination { margin-top: 16px; }
.searchbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.searchbar input { max-width: 340px; }
.searchbar select { width: auto; min-width: 150px; }
.roleform { display: inline-flex; gap: 6px; align-items: center; }
.roleform select { width: auto; }
.webhookrow { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.webhookrow:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- chat log --- */
.chatlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chatlog li { font-size: .92rem; }
.chatlog-name { font-weight: 650; margin-right: 6px; }
.chatlog-system { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 12px; }

/* ------------------------------------------------------------- timeline --- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
.timeline li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ sparkline --- */
.sparkline { display: flex; align-items: flex-end; gap: 5px; height: 90px; padding: 8px 0; }
.spark-bar { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; background: var(--bg-sunken); border-radius: 4px; }
.spark-bar span { display: block; width: 100%; background: var(--brand); border-radius: 4px; min-height: 2px; }

/* --------------------------------------------------------------- lobby ---- */
.lobby { display: grid; gap: 22px; padding-top: 26px; }
@media (min-width: 900px) { .lobby { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.lobby-main h1 { margin-bottom: .3em; }
.lobby-main { display: grid; gap: 18px; align-content: start; }
.lobby-side { display: grid; gap: 18px; }

/* A workspace's own mark at the top of its meeting join page. */
.lobby-brand { display: flex; align-items: center; gap: 12px; }
.lobby-brand-logo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: contain; }
.lobby-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }

/* --------------------------------------------------------------- embed ---- */
.embed-body { background: #0f1720; color: #e8edf2; display: grid; place-items: center; min-height: 100vh; margin: 0; }
.embed-lobby { padding: 24px; width: 100%; max-width: 420px; }
.embed-card {
    background: #151f29; border: 1px solid #26313d; border-radius: var(--radius-lg);
    padding: 26px; box-shadow: var(--shadow-lg); text-align: center;
}
.embed-card h1 { font-size: 1.3rem; margin: 12px 0 6px; color: #fff; }
.embed-card .muted { color: #8d9aa6; }
.embed-card .field-label { color: #cfd8e3; text-align: left; display: block; }
.embed-card form { text-align: left; }
.embed-card .stack { margin-top: 18px; }

/* ------------------------------------------------- dashboard & admin chrome -- */
.dash-hero {
    background: linear-gradient(140deg, var(--brand-soft) 0%, var(--bg) 58%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    margin: 0 0 22px;
}
.dash-hero-copy { max-width: 720px; }
.dash-eyebrow {
    margin: 0 0 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-dark);
}
.dash-hero h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2rem); }
.dash-sub { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.dash-trial {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 8px; font-size: .92rem; color: var(--ink-soft);
}
.dash-trial .badge { display: inline-flex; align-items: center; gap: 5px; }
.dash-trial .icon { width: 13px; height: 13px; }
.dash-hero .hero-actions { margin: 18px 0 14px; }

/* ---------------------------------------------------------- first-run tour -- */

/* The card floats over the page and the page underneath keeps working: this is a
   pointer, not a modal. It sits bottom-left on phones where a corner card would
   otherwise be the only thing on screen. */
.onboard {
    position: fixed; left: 20px; bottom: 20px; z-index: 60;
    width: min(360px, calc(100vw - 40px));
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px;
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.onboard[hidden] { display: none; }
.onboard-head { display: flex; align-items: center; gap: 8px; }
.onboard-head strong { flex: 1 1 auto; font-size: .98rem; }
.onboard-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.onboard-x {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px;
    padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-muted); cursor: pointer;
}
.onboard-x:hover { background: var(--bg-sunken); color: var(--ink); }
.onboard-x .icon { width: 15px; height: 15px; }
/* The close control is a link, because the tour is a sequence of real pages and
   every control on the card is navigable. A button never needed this. */
a.onboard-x { text-decoration: none; }
.onboard-body { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.onboard-foot { display: flex; justify-content: flex-end; gap: 8px; }
.onboard-foot [hidden] { display: none; }

/* The control the current step is talking about. The ring is the same brand
   colour as the button it is pointing at, so the two read as one instruction. */
.is-touring {
    outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-lg);
    scroll-margin: 90px;
}

/* A workspace's logo in the dashboard hero, above the greeting. */
.dash-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dash-brand-logo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg); border: 1px solid var(--line); }
.dash-brand-name { font-weight: 700; color: var(--ink); }

.joinform {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 6px 6px 12px;
    max-width: 520px;
}
.joinform input { border: 0; background: transparent; flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.joinform input:focus { outline: none; box-shadow: none; }
.joinform-icon { color: var(--ink-muted); display: inline-flex; }
.joinform:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.stat-icon .icon { width: 17px; height: 17px; }
.stat-link { display: flex; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.stat-link:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }

/* The four things this page is opened to do: one intent per tile, sized so the
   primary action reads first without being the only one that looks clickable. */
.dashtiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 22px; }
.dashtile {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--bg); overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dashtile:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
/* The primary tile is a form — a meeting is started with a POST — so the button
   inside it is what fills the tile. */
.dashtile-btn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 16px 18px; border: 0; background: none; font: inherit; color: inherit;
    text-align: left; cursor: pointer;
}
form.dashtile { padding: 0; }
.dashtile-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-color: transparent; }
.dashtile-primary .dashtile-body strong { color: #fff; }
.dashtile-primary .dashtile-hint { color: rgba(255, 255, 255, .82); }
.dashtile-primary .dashtile-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.dashtile-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand-dark);
}
.dashtile-icon .icon { width: 18px; height: 18px; }
.dashtile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashtile-body strong { font-size: .96rem; }
.dashtile-hint { color: var(--ink-muted); font-size: .78rem; }

/* The trend line and the next meeting, side by side. On its own the chart keeps
   the full width rather than leaving a hole where a card is not. */
.dash-split { display: grid; gap: 18px; margin: 0 0 22px; }
@media (min-width: 900px) {
    .dash-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.spark { display: block; width: 100%; height: 64px; margin: 4px 0 10px; overflow: visible; }
.spark-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* A tint of the line's own colour rather than --brand-soft: in dark mode the soft
   brand is all but identical to the card behind it, so the fill would vanish. */
.spark-area { fill: var(--brand); fill-opacity: .14; }
.dash-next { background: linear-gradient(150deg, var(--brand-soft) 0%, var(--bg) 62%); border-color: var(--line-strong); }
.dash-next-title { margin: 0 0 6px; font-size: 1.25rem; }
.dash-next .btn-row { margin-top: 14px; }
.dash-next .copyrow { margin-top: 10px; }

.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head h2 .icon { color: var(--brand-dark); }

.nextup { display: grid; gap: 18px; border-color: var(--line-strong); }
.nextup-eyebrow {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 4px; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark);
}
.nextup-title { margin: 0 0 6px; }
.nextup-actions { display: grid; gap: 10px; }
.nextup-actions .copyrow { margin: 0; }
@media (min-width: 760px) {
    .nextup { grid-template-columns: 1fr auto; align-items: center; }
    .nextup-actions { min-width: 260px; }
}

/* ----------------------------------------------------------- utilities ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
    /* A phone-sized panel: the sidebar becomes a swipeable strip along the top. */
    .admin-shell { grid-template-columns: 1fr; gap: 16px; }
    .admin-nav { position: static; padding: 10px; }
    .admin-nav-list {
        display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    }
    .admin-nav-list li { flex: 0 0 auto; }
    .admin-nav-hint, .admin-nav-title, .admin-nav-foot { display: none; }
    .admin-nav-link { white-space: nowrap; }
}

@media print {
    .topbar, .sitefooter, .btn, .admin-nav { display: none !important; }
    .admin-shell { grid-template-columns: 1fr; }
}

/* ============================================================================
   Marketing homepage
   Full-bleed bands. The hero shows the product with real portraits; the tour
   rebuilds the app's own screens from the same tokens, and the capability band
   states plainly what is and is not switched on.
   ========================================================================== */

/* A short honesty list under the hero buttons. */
.trust-row {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--ink-soft);
}
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row .icon { width: 15px; height: 15px; color: var(--ok); }

/* ---------------------------------------------------------- screen tour --- */
.tour { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.section-intro { max-width: 62ch; margin: -10px auto 34px; text-align: center; font-size: 1.04rem; line-height: 1.6; }

/* The tabs are real radio inputs, so the gallery works with no JavaScript and
   every panel is reachable by keyboard. The inputs are visually hidden but
   focusable; their label lights up on :focus-visible. */
.shots { position: relative; }
.shot-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.shot-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    padding: 6px; margin: 0 auto 22px; width: fit-content; max-width: 100%;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
}
.shot-tab {
    padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600;
    color: var(--ink-muted); cursor: pointer; user-select: none; white-space: nowrap;
}
.shot-tab:hover { color: var(--ink); background: var(--bg-sunken); }

#shot-room:checked ~ .shot-tabs label[for="shot-room"],
#shot-chat:checked ~ .shot-tabs label[for="shot-chat"],
#shot-wait:checked ~ .shot-tabs label[for="shot-wait"],
#shot-rec:checked ~ .shot-tabs label[for="shot-rec"],
#shot-dev:checked ~ .shot-tabs label[for="shot-dev"],
#shot-dash:checked ~ .shot-tabs label[for="shot-dash"],
#shot-first:checked ~ .shot-tabs label[for="shot-first"] {
    background: var(--brand); color: #fff; box-shadow: var(--shadow-sm);
}
#shot-room:focus-visible ~ .shot-tabs label[for="shot-room"],
#shot-chat:focus-visible ~ .shot-tabs label[for="shot-chat"],
#shot-wait:focus-visible ~ .shot-tabs label[for="shot-wait"],
#shot-rec:focus-visible ~ .shot-tabs label[for="shot-rec"],
#shot-dev:focus-visible ~ .shot-tabs label[for="shot-dev"],
#shot-dash:focus-visible ~ .shot-tabs label[for="shot-dash"],
#shot-first:focus-visible ~ .shot-tabs label[for="shot-first"] {
    outline: 2px solid var(--brand); outline-offset: 2px;
}

.shot-stage { max-width: 920px; margin: 0 auto; }
.shot { display: none; margin: 0; }
#shot-room:checked ~ .shot-stage .shot[data-shot="room"],
#shot-chat:checked ~ .shot-stage .shot[data-shot="chat"],
#shot-wait:checked ~ .shot-stage .shot[data-shot="wait"],
#shot-rec:checked ~ .shot-stage .shot[data-shot="rec"],
#shot-dev:checked ~ .shot-stage .shot[data-shot="dev"],
#shot-dash:checked ~ .shot-stage .shot[data-shot="dash"],
#shot-first:checked ~ .shot-stage .shot[data-shot="first"] { display: block; }

.shot-frame {
    overflow: hidden; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.shot-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.shot-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.shot-url {
    margin: 0 auto; font-family: var(--mono); font-size: .75rem; color: var(--ink-muted);
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
}
.shot-body { padding: 20px; display: grid; align-content: start; gap: 14px; min-height: 280px; }
.shot-body-room { background: #0b1016; padding: 14px; gap: 0; }
.shot-body-panel { background: var(--bg-soft); }
.shot figcaption { margin-top: 14px; text-align: center; color: var(--ink-muted); font-size: .88rem; }

/* Room tiles inside the tour reuse the hero's portrait idea at screen size. */
.sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #141c25; }
/* A 16:9 tile showing a 4:3 photograph: the crop is taken from higher up the
   frame than centre, which is where the face is. */
.sc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.sc-tile span {
    position: absolute; left: 8px; bottom: 8px; background: rgba(9, 14, 20, .62);
    color: #fff; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.sc-roombar { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }
.sc-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #cbd5e1; }
.sc-ic .icon { width: 16px; height: 16px; }
.sc-ic.is-on { background: rgba(255, 255, 255, .18); color: #fff; }
.sc-ic.is-leave { background: #b3261e; color: #fff; }

.sc-panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.sc-panel .tabs { margin-bottom: 14px; }
.sc-panel .chatlog { max-height: 200px; overflow: hidden; }

.sc-wait-head { display: flex; align-items: center; gap: 10px; }
.sc-wait-list { margin: 0; }
.sc-wait-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.sc-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-sm);
    background: var(--brand); color: #fff; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.sc-btn .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.sc-btn-ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }

/* The dashboard shot is the signed-in home page rendered at screen width, so it
   reuses the page's own components — the hero, the action tiles, the stat grid,
   the trend card and its Sparkline. Only the generous page-scale spacing is
   tightened, so the whole home page fits one screen instead of one screenshot. */
.shot-body-dash { gap: 18px; }
.shot-body-dash .dash-hero { padding: 20px; margin: 0; }
.shot-body-dash .dash-hero h3 { margin: 0 0 6px; font-size: 1.25rem; }
.shot-body-dash .dashtiles { margin: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.shot-body-dash .dashtile { padding: 13px 15px; }
.shot-body-dash .statgrid { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.shot-body-dash .stat-value { font-size: 1.45rem; }
.shot-body-dash .dash-split { margin: 0; }
.shot-body-dash .dash-next-title { font-size: 1.15rem; margin: 0 0 6px; }
.shot-body-dash .card-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .98rem; }
.shot-body-dash .card-head h4 .icon { width: 16px; height: 16px; color: var(--brand-dark); }
/* The tour card is the one thing that moves for the shot: it floats over a real
   page, and in a picture of one it sits in the flow with the rest. */
.shot-body-dash .onboard { position: static; width: auto; box-shadow: var(--shadow); max-width: 520px; }
.shot-body-first .checklist { font-size: .9rem; }

.shot-body-dev { gap: 10px; }
.sc-dev-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-dev-row code { font-size: .88rem; }
.sc-method { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: var(--ok-soft); color: var(--ok); padding: 3px 9px; border-radius: 6px; }
.shot-body-dev .codeblock { font-size: .78rem; }
.shot-body .statgrid { margin: 0; }
.shot-body .timeline { margin: 0; }

/* ------------------------------------------------- capability (honesty) --- */
.capband { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.capgrid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 700px) { .capgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .capgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cap { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.cap dt { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 7px; }
.cap dt .icon { width: 16px; height: 16px; color: var(--brand-dark); flex: 0 0 auto; }
.cap dd { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.cap-foot { text-align: center; margin: 26px auto 0; max-width: 72ch; }

/* ------------------------------------------------------------- polish ---- */
/* Grid columns default to min-content sizing, so a nowrap label inside the
   product shot would otherwise hold the whole hero wider than the phone. */
.hero-inner > * { min-width: 0; }

:is(a, summary, .shot-tab):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 700px) {
    .tour, .capband { padding: 36px 0; }
    .solutions { padding: 36px 0 4px; }
    .cta-band { padding: 28px 0 40px; }
    .cta-panel { padding: 24px; }
    .solution-art { max-height: 210px; }
    .footer-grid { gap: 24px; }
    .sitefooter-map { padding: 34px 0 20px; }
    .shot-tabs { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-sm); }
    .shot-tabs::-webkit-scrollbar { display: none; }
    .shot-tab { flex: 0 0 auto; }
    .shot-bar { padding: 8px 10px; }
    .shot-body { padding: 14px; min-height: 0; }
    .shot-url { font-size: .68rem; padding: 3px 10px; }
    /* The chrome already carries Live / quality / REC, so the code label is the
       one thing worth dropping to keep the control bar on a single line. */
    .mock-chrome .mock-title, .mock-label { display: none; }
    .mock-ctl-btn { width: 27px; height: 27px; }
    .mock-ctl-btn .icon { width: 14px; height: 14px; }
    .mock-ctl-btn.is-leave { margin-left: auto; }
    .sc-ic { width: 30px; height: 30px; }
}

/* ------------------------------------------------------- legal & oauth --- */
/* Long-form documents read best in a single measure, so they get their own
   narrower column inside the layout's container. */
.legal { max-width: 760px; margin: 8px auto 0; }
.legal-head { margin-bottom: 8px; }
.legal h1 { font-size: 2rem; margin-bottom: 4px; }
.legal h2 { font-size: 1.15rem; margin-top: 32px; }
.legal ul { margin: 8px 0 0; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal .lede { font-size: 1.05rem; color: var(--ink-soft); }
.legal code { background: var(--bg-sunken); padding: 1px 5px; border-radius: 5px; font-family: var(--mono); font-size: .85em; }
.legal-note { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ============================================================================
   The partner strip

   Pure CSS, no JavaScript: it is decorative social proof, so it must not be
   able to break the page, and it must stop for anyone who asked for less
   motion. The track holds two identical lists and slides by exactly half its
   own width, so the seam is always off-screen and the loop never visibly jumps.
   ========================================================================== */
.partners { padding: 52px 0 58px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.partners-head { display: grid; gap: 10px; margin-bottom: 28px; }
.partners-head .section-title { margin: 0; }
.partners-head .section-intro { margin: 0; }

.partners-marquee {
    overflow: hidden;
    /* Fade the edges rather than slicing a logo in half at the viewport. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track { display: flex; width: max-content; animation: partners-scroll 46s linear infinite; }

/* Pausing on hover or focus is not decoration: it is what makes a moving strip
   usable by someone who wants to actually look at, or click, one logo. */
.partners-marquee:hover .partners-track,
.partners-marquee:focus-within .partners-track { animation-play-state: paused; }

.partners-list { display: flex; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.partner { display: flex; align-items: center; flex: 0 0 auto; }
.partner img {
    width: auto;
    height: 38px;
    max-width: 168px;
    object-fit: contain;
    /* One texture by default, full colour on hover — which doubles as the signal
       that this particular logo is a real link. */
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease;
}
.partner a:hover img,
.partner a:focus-visible img { filter: grayscale(0); opacity: 1; }

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (min-width: 760px) { .partner img { height: 44px; } }

/* Reduced motion: no animation at all, and the strip turns into an ordinary
   scrollable row with the duplicate dropped, so every logo is still reachable
   and none is shown twice. */
@media (prefers-reduced-motion: reduce) {
    .partners-track { animation: none; }
    .partners-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .partners-list[aria-hidden="true"] { display: none; }
    .partner img { filter: none; opacity: 1; }
}

/* The thumbnail in the admin table. */
.partner-thumb {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 4px;
}

/* A divider used inside the admin settings forms. */
.sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* Google button: a full-width secondary button above the email form, with a
   rule-and-label separator so the two ways in read as alternatives. */
.oauth-row { margin: 4px 0 0; }
.btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); font-weight: 600; }
.btn-oauth:hover { background: var(--bg-soft); }
.oauth-logo { flex: 0 0 auto; }
.oauth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-muted); font-size: .82rem; }
.oauth-sep::before, .oauth-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ------------------------------------------------------- reduced motion --- */
/* Last, so it wins: nothing on this site animates for someone who asked the OS
   not to animate things. The partner strip and the recording dot keep their own
   opt-outs above, which this does not disturb. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   ADMIN CONSOLE KIT
   ----------------------------------------------------------------------------
   Everything below is scoped to the panel, or defines a piece of shared chrome
   the panel is the only caller of. It is the one place the admin screens draw
   their shapes from: a page header, stat tiles, section cards with a ruled head,
   sub-tabs, table refinements, form furniture and the settings jump list.

   The panel used to grow per-screen: three screens rendered a tab strip with no
   styles at all, the drive report laid its tiles out as a plain stack, and two
   screens spelled the same grid two different ways (`.statgrid` / `.stat-grid`).
   Defining the missing classes and unifying the rest here is what makes the
   seven screens read as one product instead of seven.
   ============================================================================ */

/* --------------------------------------------------------------- page head --
   A rule under the head separates the title from the content that scrolls, and
   the action cluster is pinned to the right so the primary action is in the same
   place on every screen. */
.admin-main .page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 6px 0 18px; margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.admin-main .page-head > div { min-width: 0; }
.admin-main .page-head h1 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 6px; font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.02em;
}
.admin-main .page-head h1 .icon { width: 1.1em; height: 1.1em; color: var(--brand-dark); }
.admin-main .page-head .muted { margin: 0; max-width: 72ch; }
.admin-main .page-head > .btn-row { flex: 0 0 auto; }
.admin-main .page-head .btn-row { flex-wrap: wrap; }

/* Section heads above a group of cards (the overview's "Platform"). */
.admin-main .section-title {
    text-align: left; margin: 0 0 14px; font-size: .82rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}

/* ------------------------------------------------------------ section cards --
   One ruled head shape for every block: the title, a one-line summary and any
   right-aligned action all sit on a hairline, so a screen of cards scans as a
   list of labelled sections rather than a stack of boxes. */
.admin-main .card { padding: 20px 22px; }
.admin-main .card-head {
    align-items: center; padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.admin-main .card-head > :last-child { margin-bottom: 0; }
.admin-main .card-head h2, .admin-main .card-head h3 { font-size: 1.05rem; }
.admin-main .card > h2:first-child {
    padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
    font-size: 1.05rem; display: flex; align-items: center; gap: 8px;
}
.admin-main .card > h2:first-child .icon { color: var(--brand-dark); }
.admin-main .card > h2:first-child + .card-head { border-top: 0; }

/* ------------------------------------------------------------- stat tiles --
   A number, its label, and optionally an icon and a link. The value is what the
   eye lands on first; the tile lifts on hover only when it is a link. */
.admin-main .statgrid,
.admin-main .stat-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    margin: 0 0 22px;
}
.admin-main .stat {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 18px 18px 16px; margin: 0;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.admin-main .stat .stat-value {
    font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.admin-main .stat .stat-label {
    font-size: .82rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em;
}
.admin-main .stat .stat-context { margin-top: 2px; }
.admin-main .stat .stat-icon {
    position: absolute; top: 14px; right: 14px; margin: 0;
    width: 32px; height: 32px; border-radius: 10px;
}
/* A tile that answers a question in a colour: ok / warn / danger. */
.admin-main .stat.is-ok { border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); }
.admin-main .stat.is-ok .stat-value { color: var(--ok); }
.admin-main .stat.is-warn { border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); }
.admin-main .stat.is-warn .stat-value { color: var(--warn); }
.admin-main .stat.is-danger { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); }
.admin-main .stat.is-danger .stat-value { color: var(--danger); }
.admin-main a.stat, .admin-main .stat-link { text-decoration: none; color: inherit; }
.admin-main a.stat:hover, .admin-main .stat-link:hover {
    border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- sub-tabs --
   The tab strip the content screens share. A segmented control: the active tab
   is a raised chip, the rest are quiet until hovered. */
.subtabs {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    padding: 4px; margin: 0 0 22px;
    background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px;
}
.subtab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 999px;
    font-size: .89rem; font-weight: 600; color: var(--ink-muted); text-decoration: none;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.subtab .icon { width: 15px; height: 15px; opacity: .85; }
.subtab:hover { color: var(--ink); background: var(--bg); }
.subtab.is-active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.subtab.is-active .icon { color: var(--brand-dark); opacity: 1; }

/* --------------------------------------------------------- media gallery --
   One card per image slot, in a grid. The preview keeps a fixed height so the
   cards line up however different the images are. */
.mediagrid {
    display: grid; gap: 18px; margin: 0 0 18px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.media-card { display: flex; flex-direction: column; margin: 0; }
.media-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 150px; margin: 0 0 14px; padding: 14px;
    background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.media-preview img { max-height: 190px; }
.media-card .badge { flex: 0 0 auto; }

/* ------------------------------------------------------- content groups --
   The texts registry rendered as one fieldset per group, with a chip legend. */
.content-group { background: var(--bg-soft); }
.content-group legend {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); color: var(--ink-soft); font-size: .8rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.content-group .field-label { display: flex; align-items: center; gap: 8px; }
.content-group .field + .field { margin-top: 2px; }
@media (min-width: 900px) {
    .content-group { display: grid; gap: 14px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-group > legend { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- settings --
   A jump list at the top of the long settings screen, and a rule between the
   groups inside a card. */
.admin-anchors {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.admin-anchors a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); color: var(--ink-soft); font-size: .84rem; font-weight: 600;
    text-decoration: none;
}
.admin-anchors a:hover { border-color: var(--line-strong); color: var(--ink); background: var(--bg-soft); }
.admin-main .card[id] { scroll-margin-top: 90px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
hr.rule { border: 0; border-top: 1px dashed var(--line); margin: 18px 0; }
.preset-row { flex-wrap: wrap; }
.preset-row .btn.is-active { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }

/* ------------------------------------------------------------- table polish --
   A better read for long admin tables: a sticky, slightly inset header, roomier
   rows, and an action cell that never wraps a button off its own line. */
.admin-main table.data th { padding: 10px 14px; }
.admin-main table.data td { padding: 12px 14px; }
.admin-main table.data td code { font-size: .82rem; }
.admin-main table.data .row-actions,
.admin-main table.data .btn-row { justify-content: flex-end; }
.admin-main .table-wrap { margin-bottom: 18px; }
.admin-main .table-wrap:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- form furniture --
   `.field-help` is the alias the admin screens actually write; `.field-hint` is
   the canonical name further up. Alias it here so both read the same. */
.field-help { font-size: .82rem; color: var(--ink-muted); }
.admin-main .stack { gap: 18px; }
.admin-main .checkbox { align-items: flex-start; line-height: 1.5; }
.admin-main .checkbox input { margin-top: 1px; }
.admin-main .btn-row { flex-wrap: wrap; }

/* ------------------------------------------------------------ mobile ------
   Two columns of settings cards become one; the tile grid tightens up. */
@media (max-width: 860px) {
    .admin-main .page-head { align-items: flex-start; }
    .admin-main .statgrid, .admin-main .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .admin-main .stat { padding: 14px; }
    .admin-main .stat .stat-value { font-size: 1.35rem; }
    .admin-main .stat .stat-icon { position: static; margin-bottom: 8px; }
    .mediagrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- admin nav --
   The sidebar is grouped (Platform / Commerce / System) so eleven links scan as
   three short lists rather than one long one. The active row keeps a brand bar
   and a raised surface, and its icon takes the brand colour. */
.admin-nav-groups { display: grid; gap: 16px; }
.admin-nav-group-label {
    margin: 0 6px 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.admin-nav-link.is-active {
    background: var(--bg); box-shadow: inset 3px 0 0 var(--brand), var(--shadow-sm);
}
.admin-nav-link.is-active .admin-nav-icon .icon { color: var(--brand-dark); }

/* A single-step top margin, used between a rule and the control under it. */
.mt-1 { margin-top: 8px; }

/* A phone-sized panel: the groups fold into one wrapping strip of pills, because
   three separate scrollers stacked on a phone is worse than one row. */
@media (max-width: 900px) {
    .admin-nav-groups { display: flex; flex-wrap: wrap; gap: 6px; }
    .admin-nav-list { display: contents; }
    .admin-nav-group-label { display: none; }
}