/* CodePulse Reviews — landing page styles.
   Sibling to codepulsehq.com: shared navy/teal/lime DNA, with an ember accent
   unique to Reviews.
*/

/* ─── Tokens ─────────────────────────────────────────────────────────── */

:root {
    /* Inherited from codepulsehq.com */
    --ink-950: #0b1220;
    --ink-900: #14202f;
    --ink-navy: #1a2332;
    --ink-700: #2a3649;
    --ink-500: #4b5b74;
    --ink-400: #6b7a93;
    --ink-300: #98a3b5;
    --ink-200: #c7ced8;
    --ink-100: #e2e8f0;
    --paper: #ffffff;
    --paper-soft: #f8fafc;
    --paper-warm: #fafaf7;
    --line: #e6ebf2;
    --line-soft: #eef2f7;

    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;

    --lime-300: #cde316;
    --lime-500: #82c023;
    --lime-700: #35a71c;

    --sky-500: #0ea5e9;
    --sky-600: #0284c7;

    /* New — Reviews accent */
    --ember-300: #fdba74;
    --ember-500: #f97316;
    --ember-600: #ea580c;
    --ember-700: #c2410c;

    /* Severity */
    --sev-critical: #e5484d;
    --sev-important: #f59e0b;
    --sev-suggestion: #0ea5e9;

    /* Gradients */
    --grad-wordmark: linear-gradient(90deg, #35a71c 0%, #82c023 50%, #cde316 100%);
    --grad-pulse: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%);
    --grad-hero: radial-gradient(60% 40% at 70% 20%, rgba(20, 184, 166, 0.18), transparent 70%),
        radial-gradient(50% 50% at 20% 80%, rgba(249, 115, 22, 0.12), transparent 70%);
    --grad-cta-band: linear-gradient(135deg, #14b8a6 0%, #1a2332 60%, #0b1220 100%);

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* Shadow */
    --sh-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
    --sh-md: 0 6px 20px -6px rgba(11, 18, 32, 0.14);
    --sh-lg: 0 20px 50px -18px rgba(11, 18, 32, 0.28);
    --sh-ember: 0 0 0 1px var(--ember-500), 0 18px 48px -18px rgba(249, 115, 22, 0.45);
    --sh-teal: 0 0 0 1px var(--teal-500), 0 16px 40px -16px rgba(20, 184, 166, 0.35);

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* ─── Reset / base ───────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink-950);
}

h1 {
    font-size: clamp(2.25rem, 1rem + 4.5vw, 3.75rem);
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(1.625rem, 0.9rem + 2.4vw, 2.375rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
    color: var(--ink-500);
}

a {
    color: var(--sky-600);
    text-decoration: none;
}

a:hover {
    color: var(--sky-500);
}

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

button,
.btn {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

code, pre {
    font-family: var(--font-mono);
}

/* ─── Layout utilities ───────────────────────────────────────────────── */

.container {
    width: min(100% - 2.5rem, 1200px);
    margin-inline: auto;
}

.section {
    padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}

.section-tight {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal-600);
    padding: 0.35rem 0.75rem;
    background: rgba(20, 184, 166, 0.1);
    border-radius: var(--r-pill);
}

.section-head {
    text-align: center;
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.section-head h2 {
    margin-top: 1rem;
}

.section-head p {
    margin-top: 1rem;
    font-size: 1.125rem;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.15s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--ink-950);
    color: #fff;
    box-shadow: var(--sh-md);
}

.btn-primary:hover {
    background: var(--ink-900);
    transform: translateY(-1px);
    box-shadow: var(--sh-lg);
}

.btn-ember {
    background: var(--ember-500);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.6);
}

.btn-ember:hover {
    background: var(--ember-600);
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -12px rgba(249, 115, 22, 0.7);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--ink-900);
    padding-inline: 0.75rem;
}

.btn-ghost:hover {
    color: var(--ember-600);
}

.btn-outline {
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--line);
}

.btn-outline:hover {
    border-color: var(--ink-700);
    color: var(--ink-950);
}

.btn-lg {
    padding: 0.95rem 1.6rem;
    font-size: 1rem;
    border-radius: var(--r-lg);
}

/* ─── Nav ────────────────────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-block: 0.9rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

.nav.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink-950);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
}

.brand:hover {
    color: var(--ink-950);
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-word {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.brand-word .word-pulse {
    background: var(--grad-wordmark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-word .word-reviews {
    color: var(--ember-500);
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: 1.5rem;
    font-size: 0.925rem;
}

.nav-links a {
    color: var(--ink-500);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--ink-950);
}

.nav-links a[aria-current="page"] {
    color: var(--ink-950);
    font-weight: 600;
    position: relative;
}

.nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 2px;
    background: var(--ember-500);
    border-radius: 2px;
}

.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-switcher {
    position: relative;
}

.product-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.9rem;
    border-radius: var(--r-pill);
    background: var(--paper-soft);
    border: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-900);
}

.product-switcher-trigger::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ember-500);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.product-switcher-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 0.4rem;
    display: none;
}

.product-switcher[data-open="true"] .product-switcher-menu {
    display: block;
}

.product-switcher-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--r-md);
    color: var(--ink-900);
}

.product-switcher-item:hover {
    background: var(--paper-soft);
    color: var(--ink-950);
}

.product-switcher-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-switcher-item small {
    color: var(--ink-500);
    font-size: 0.8rem;
}

.product-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.product-dot.ember { background: var(--ember-500); }
.product-dot.teal  { background: var(--teal-500); }

.mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: #fff;
}

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 3vw, 5rem);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-hero);
    pointer-events: none;
    z-index: -1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.hero-copy h1 {
    margin-bottom: 1.25rem;
}

.hero-sub {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
    color: var(--ink-500);
    max-width: 44ch;
}

.hero-signin {
    margin-top: 1rem;
    font-size: 0.88rem;
    color: var(--ink-400);
}
.hero-signin a {
    color: var(--teal-600);
    font-weight: 500;
    border-bottom: 1px dashed rgba(20, 184, 166, 0.4);
}

.hero-trust {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: var(--ink-400);
}

.hero-trust a {
    color: var(--teal-600);
    font-weight: 600;
    border-bottom: 1px dashed rgba(20, 184, 166, 0.4);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.hero-mock {
    position: relative;
    min-height: 380px;
}

/* Mocked Slack message card */
.slack-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.1rem 1.2rem 1.25rem;
    box-shadow: var(--sh-lg);
    max-width: 440px;
    margin-inline: auto;
}

.slack-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.slack-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ink-navy);
    overflow: hidden;
    flex-shrink: 0;
}

.slack-avatar::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 2px solid rgba(20, 184, 166, 0.5);
    animation: pulse-ring 2.2s var(--ease-out) infinite;
    pointer-events: none;
}

.slack-meta {
    font-size: 0.78rem;
    color: var(--ink-400);
    margin-top: 0.15rem;
}

.slack-meta strong {
    color: var(--ink-900);
    font-weight: 600;
    margin-right: 0.4rem;
}

.slack-meta .tag {
    display: inline-block;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    background: var(--line-soft);
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: 1px;
}

.slack-body {
    margin-top: 0.85rem;
    font-size: 0.93rem;
    color: var(--ink-900);
}

.slack-body .pr-title {
    font-weight: 600;
    color: var(--ink-950);
    margin-bottom: 0.25rem;
}

.slack-body .pr-sum {
    color: var(--ink-500);
    margin-bottom: 0.85rem;
}

.sev-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.sev-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink-900);
}

.sev-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.sev-pill.critical { background: rgba(229, 72, 77, 0.12); color: var(--sev-critical); }
.sev-pill.important { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.sev-pill.suggestion { background: rgba(14, 165, 233, 0.12); color: var(--sev-suggestion); }

.slack-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-soft);
}

.slack-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--r-md);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--line);
    color: var(--ink-700);
    background: #fff;
}

.slack-btn.primary {
    background: var(--ember-500);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(249, 115, 22, 0.6);
}

/* Floating GitHub diff callout */
.diff-callout {
    position: absolute;
    right: -18px;
    bottom: -24px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    transform: rotate(-3deg);
    padding: 0.75rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.diff-callout-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--ink-500);
}

.diff-line {
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-700);
}

.diff-line.add { background: rgba(20, 184, 166, 0.1); color: #0f766e; }
.diff-line.del { background: rgba(229, 72, 77, 0.08); color: #991b1b; }

.diff-note {
    margin-top: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--ember-500);
    background: rgba(249, 115, 22, 0.08);
    color: var(--ember-700);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    border-radius: 4px;
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.8; }
    70% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ─── Capability strip ───────────────────────────────────────────────── */

.capability-strip {
    padding-block: 1.25rem;
    border-block: 1px solid var(--line);
    background: var(--paper-soft);
}

.capability-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 3vw, 3rem);
    font-size: 0.88rem;
    color: var(--ink-500);
}

.capability-row .capability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.capability-row .capability svg {
    color: var(--teal-600);
}

/* ─── How it works ───────────────────────────────────────────────────── */

.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    position: relative;
}

.how-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.4rem;
    transition: border-color 0.2s, transform 0.2s var(--ease-out);
}

.how-step:hover {
    border-color: var(--ink-200);
    transform: translateY(-2px);
}

.how-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ink-950);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.how-step h3 {
    margin-bottom: 0.5rem;
}

/* ─── Feature — 5-axis radar ─────────────────────────────────────────── */

.radar-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.radar-box {
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.radar-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.radar-svg .axis-label {
    font: 600 11px var(--font-sans);
    fill: var(--ink-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.radar-svg .ring {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}

.radar-svg .spoke {
    stroke: var(--line-soft);
    stroke-width: 1;
}

.radar-svg .area {
    fill: rgba(20, 184, 166, 0.22);
    stroke: var(--teal-500);
    stroke-width: 2;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center;
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.radar-svg.is-visible .area {
    opacity: 1;
    transform: scale(1);
}

.radar-svg .dot {
    fill: var(--teal-500);
}

.axis-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.85rem;
}

.axis-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    color: var(--ink-700);
}

.axis-list li strong {
    color: var(--ink-950);
    font-weight: 600;
}

.axis-list li .axis-bullet {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 2px;
}

/* ─── Feature — severity-tagged diff ─────────────────────────────────── */

.diff-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.diff-mock {
    background: #0d1117;
    border-radius: var(--r-xl);
    padding: 1.25rem;
    box-shadow: var(--sh-lg);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: #c9d1d9;
    position: relative;
}

.diff-mock .file {
    font-size: 0.75rem;
    color: #8b949e;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid #21262d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diff-mock .code-line {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    line-height: 1.55;
}

.diff-mock .ln {
    color: #6e7681;
    text-align: right;
    user-select: none;
}

.diff-mock .code-line.add { background: rgba(46, 160, 67, 0.15); }
.diff-mock .code-line.del { background: rgba(248, 81, 73, 0.15); }

.code-line .kw { color: #ff7b72; }
.code-line .fn { color: #d2a8ff; }
.code-line .str { color: #a5d6ff; }
.code-line .num { color: #79c0ff; }
.code-line .cm { color: #8b949e; font-style: italic; }

.diff-comment {
    margin: 0.4rem 0.4rem 0.4rem 2.75rem;
    background: #161b22;
    border: 1px solid #30363d;
    border-left: 3px solid var(--sev-critical);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #c9d1d9;
}

.diff-comment .sev-pill {
    margin-bottom: 0.35rem;
}

.diff-comment.important { border-left-color: var(--sev-important); }
.diff-comment.suggestion { border-left-color: var(--sev-suggestion); }

/* ─── Feature — auto-fix ─────────────────────────────────────────────── */

.autofix-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.autofix-card {
    background: var(--ink-navy);
    color: #dbe5f3;
    border-radius: var(--r-xl);
    padding: 2rem;
    box-shadow: var(--sh-lg);
    position: relative;
    overflow: hidden;
}

.autofix-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 100% at 100% 0%, rgba(249, 115, 22, 0.25), transparent 55%);
    pointer-events: none;
}

.autofix-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

.autofix-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    font-size: 0.92rem;
}

.autofix-steps li strong {
    color: #fff;
    font-weight: 600;
    display: block;
}

.autofix-steps li small {
    color: rgba(219, 229, 243, 0.7);
    font-size: 0.85rem;
}

.autofix-step-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--teal-400);
}

.autofix-step-icon.ember { color: var(--ember-500); background: rgba(249, 115, 22, 0.15); }

/* ─── Cross-promo ────────────────────────────────────────────────────── */

.crosspromo {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
    border-block: 1px solid var(--line);
}

.crosspromo-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.crosspromo-copy .eyebrow {
    color: var(--lime-700);
    background: rgba(53, 167, 28, 0.1);
}

.crosspromo-copy h2 {
    margin-top: 1rem;
}

.crosspromo-copy p {
    margin-top: 1rem;
    font-size: 1.05rem;
}

.crosspromo-copy .crosspromo-cta {
    margin-top: 1.75rem;
}

.crosspromo-visual {
    position: relative;
    aspect-ratio: 5 / 4;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.5rem;
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.cp-tile {
    position: absolute;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.75rem 0.9rem;
    box-shadow: var(--sh-sm);
    font-size: 0.78rem;
}

.cp-tile-label {
    font-size: 0.68rem;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.cp-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-950);
    letter-spacing: -0.015em;
}

.cp-tile.metric-a { top: 12%; left: 6%; }
.cp-tile.metric-b { top: 14%; right: 8%; }
.cp-tile.metric-c { bottom: 30%; left: 18%; }

.cp-tile-spark {
    margin-top: 0.35rem;
    height: 24px;
    width: 70px;
    color: var(--teal-500);
}

.cp-arrow {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ember-500);
    font-size: 1.4rem;
}

.cp-review-card {
    position: absolute;
    bottom: 8%;
    right: 6%;
    width: 56%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.75rem 0.9rem;
    box-shadow: var(--sh-md);
    font-size: 0.78rem;
}

.cp-review-card .title {
    font-weight: 600;
    color: var(--ink-950);
    margin-bottom: 0.25rem;
}

.cp-review-card .row {
    display: flex;
    justify-content: space-between;
    color: var(--ink-500);
    font-size: 0.72rem;
}

/* ─── Security strip ─────────────────────────────────────────────────── */

.security-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.security-card {
    padding: 1.25rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-card .icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-600);
}

.security-card h4 {
    font-size: 0.98rem;
    color: var(--ink-950);
    margin: 0;
}

.security-card p {
    font-size: 0.88rem;
    color: var(--ink-500);
    margin: 0;
}

/* ─── Pricing ────────────────────────────────────────────────────────── */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.pricing-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: transform 0.2s var(--ease-out), border-color 0.2s;
}

.pricing-card:hover {
    border-color: var(--ink-200);
    transform: translateY(-2px);
}

.pricing-card.featured {
    border-color: transparent;
    box-shadow: var(--sh-ember);
}

.pricing-card.featured::before {
    content: "Most popular";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    background: var(--ember-500);
    color: #fff;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.pricing-card h3 {
    font-size: 1.05rem;
}

.price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-950);
}

.price-unit {
    color: var(--ink-400);
    font-size: 0.85rem;
}

.pricing-card .tagline {
    font-size: 0.85rem;
    color: var(--ink-500);
    min-height: 2.25rem;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--ink-700);
    flex-grow: 1;
}

.pricing-card ul li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.5rem;
    align-items: start;
}

.pricing-card ul li::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background: rgba(20, 184, 166, 0.14);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 5.2l2 2 4-4.4' fill='none' stroke='%230d9488' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.pricing-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-400);
}

/* ─── FAQ ────────────────────────────────────────────────────────────── */

.faq-list {
    max-width: 760px;
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq-item[open] {
    border-color: var(--ink-200);
    box-shadow: var(--sh-sm);
}

.faq-item summary {
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    color: var(--ink-950);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--ink-500);
    border-bottom: 2px solid var(--ink-500);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease-out);
}

.faq-item[open] summary::after {
    transform: rotate(-135deg);
}

.faq-body {
    padding: 0 1.25rem 1.25rem;
    color: var(--ink-500);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ─── Final CTA band ─────────────────────────────────────────────────── */

.cta-band {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
    background: var(--grad-cta-band);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(40% 60% at 75% 30%, rgba(249, 115, 22, 0.35), transparent 60%);
    pointer-events: none;
}

.cta-band h2 {
    color: #fff;
    max-width: 20ch;
    margin-inline: auto;
}

.cta-band p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 50ch;
    margin: 1rem auto 0;
}

.cta-band .hero-cta-row {
    justify-content: center;
    margin-top: 2rem;
}

.cta-band .btn-ember {
    box-shadow: 0 18px 40px -12px rgba(249, 115, 22, 0.7);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */

.footer {
    padding-block: 3rem 2rem;
    background: var(--ink-950);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.75);
}

.footer a:hover {
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand p {
    margin-top: 0.85rem;
    max-width: 30ch;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
}

.footer-col h5 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.footer-col ul li a {
    font-size: 0.9rem;
}

.footer-legal {
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    flex-wrap: wrap;
}

/* ─── App shell (authenticated pages) ────────────────────────────────── */

.app-main {
    padding-block: clamp(2rem, 1.5rem + 1vw, 3rem) clamp(3rem, 2rem + 2vw, 5rem);
    background: var(--paper-soft);
    min-height: calc(100vh - 80px);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.page-header-copy h1 {
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem);
    margin-bottom: 0.35rem;
}

.page-header-copy p {
    font-size: 0.95rem;
    max-width: 58ch;
}

.page-header-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* Generic card used in app pages */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem;
}

.card h2,
.card h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--ink-950);
}

.card h3 .hint {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-400);
    margin-left: 0.5rem;
}

.card + .card {
    margin-top: 1.25rem;
}

/* Inside a grid, the gap already spaces siblings — the stacked-card margin
   above would shift the second column down 20px relative to the first. */
.card-grid > .card + .card {
    margin-top: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Install-status rows: Slack / GitHub cards */
.status-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper-soft);
    margin-bottom: 0.75rem;
}

.status-row:last-child { margin-bottom: 0; }

.status-row .status-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-700);
    flex-shrink: 0;
}

.status-row .status-body {
    flex: 1;
    min-width: 0;
}

.status-row .status-body strong {
    display: block;
    font-size: 0.95rem;
    color: var(--ink-950);
    font-weight: 600;
}

.status-row .status-body small {
    color: var(--ink-500);
    font-size: 0.82rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.status-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-chip.ok { background: rgba(20, 184, 166, 0.12); color: var(--teal-600); }
.status-chip.ok::before { background: var(--teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22); }

.status-chip.warn { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.status-chip.warn::before { background: #f59e0b; }

.status-chip.err { background: rgba(229, 72, 77, 0.12); color: var(--sev-critical); }
.status-chip.err::before { background: var(--sev-critical); }

.status-chip.muted { background: var(--line-soft); color: var(--ink-500); }
.status-chip.muted::before { background: var(--ink-300); }

/* Stat tiles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
}

.stat-tile {
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-tile.soft { background: var(--paper-soft); }

.stat-tile .stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
}

.stat-tile .stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-950);
    line-height: 1.1;
}

.stat-tile .stat-sub {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-top: 0.1rem;
}

.stat-tile .stat-value.critical { color: var(--sev-critical); }
.stat-tile .stat-value.teal { color: var(--teal-600); }
.stat-tile .stat-value.ember { color: var(--ember-600); }

/* Usage bar (app version — different class name to avoid collision with
   dashboard Pico style still used by analytics) */
.usage-meter {
    background: var(--line-soft);
    border-radius: var(--r-pill);
    height: 10px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.usage-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-400));
    transition: width 0.4s var(--ease-out);
}

.usage-meter-fill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.usage-meter-fill.over { background: linear-gradient(90deg, var(--sev-critical), #f87171); }

.usage-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--ink-500);
}

.usage-meta strong {
    color: var(--ink-950);
    font-weight: 600;
}

/* Alerts */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.alert.success {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.25);
    color: var(--teal-600);
}

.alert.error {
    background: rgba(229, 72, 77, 0.06);
    border-color: rgba(229, 72, 77, 0.25);
    color: var(--sev-critical);
}

.alert.info {
    background: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.2);
    color: var(--sky-600);
}

.alert.warn {
    background: rgba(249, 115, 22, 0.06);
    border-color: rgba(249, 115, 22, 0.25);
    color: var(--ember-700);
}

/* Trial / seat banner: richer alert with icon + headline + body copy.
   Distinguished by a left-accent bar that picks up the alert variant. */
.trial-banner {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    border-left-width: 4px;
}
.trial-banner .trial-banner-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
.trial-banner .trial-banner-body { flex: 1; min-width: 0; }
.trial-banner .trial-banner-headline {
    font-weight: 600;
    margin-bottom: 0.15rem;
    color: var(--ink-950);
}
.trial-banner .trial-banner-detail {
    font-size: 0.88rem;
    color: var(--ink-500);
    line-height: 1.5;
}
.trial-banner.ok {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.2);
    border-left-color: var(--teal-500);
    color: var(--teal-600);
}
.trial-banner.ok .trial-banner-icon { color: var(--teal-500); }
.trial-banner.warn {
    background: rgba(249, 115, 22, 0.06);
    border-color: rgba(249, 115, 22, 0.25);
    border-left-color: var(--ember-500);
}
.trial-banner.warn .trial-banner-icon { color: var(--ember-500); }
.trial-banner.warn .trial-banner-headline { color: var(--ember-700); }
.trial-banner.err {
    background: rgba(229, 72, 77, 0.05);
    border-color: rgba(229, 72, 77, 0.25);
    border-left-color: var(--sev-critical);
}
.trial-banner.err .trial-banner-icon { color: var(--sev-critical); }
.trial-banner.err .trial-banner-headline { color: var(--sev-critical); }

/* Seat summary: hero stat on the seats page, shows N/M with a meter. */
.seats-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card, 0 1px 2px rgba(15, 23, 42, 0.04));
    margin-bottom: 1.25rem;
}
.seats-hero .seats-hero-main {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.seats-hero .seats-hero-big {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink-950);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.seats-hero .seats-hero-cap {
    font-size: 1.15rem;
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
}
.seats-hero .seats-hero-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.seats-hero .seats-hero-progress { flex: 1; min-width: 120px; max-width: 380px; }
.seats-hero .seats-hero-cost {
    text-align: right;
    font-size: 0.82rem;
    color: var(--ink-500);
}
.seats-hero .seats-hero-cost strong {
    display: block;
    color: var(--ink-950);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .seats-hero {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .seats-hero .seats-hero-cost { text-align: left; }
}

/* Inline seat row used on /dashboard/seats for active + pending lists —
   lighter than table.admin, matches the tenant-side card aesthetic. */
.seat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.seat-row:last-child { border-bottom: 0; }
.seat-row .seat-login {
    font-weight: 600;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.seat-row .seat-meta {
    font-size: 0.8rem;
    color: var(--ink-400);
    margin-top: 0.15rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.seat-row .seat-meta .seat-meta-label { color: var(--ink-300); }

/* Small status pills used in seat rows + main dashboard for seat_mode chips. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--paper-soft);
    color: var(--ink-500);
    border: 1px solid var(--line-soft);
}
.chip.ok { background: rgba(20, 184, 166, 0.1); color: var(--teal-600); border-color: rgba(20, 184, 166, 0.25); }
.chip.warn { background: rgba(249, 115, 22, 0.1); color: var(--ember-700); border-color: rgba(249, 115, 22, 0.25); }
.chip.err { background: rgba(229, 72, 77, 0.08); color: var(--sev-critical); border-color: rgba(229, 72, 77, 0.25); }
.chip.muted { background: var(--paper-soft); color: var(--ink-400); }

/* Inline number input + button row (used by "Change purchased seats"). */
.input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.input-row .form-control { flex: 0 0 110px; }

/* ── Member-select autocomplete (admins page) ──────────────────── */
.member-select {
    position: relative;
    flex: 1;
    min-width: 0;
}
.member-select .form-control { flex: unset; width: 100%; }

/* Search field: icon-padded on the left, chevron affordance on the right. */
.member-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.member-search-wrap .member-search-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-300);
    pointer-events: none;
    transition: color 0.15s ease;
}
.member-search-wrap .member-chevron {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-300);
    pointer-events: none;
    transition: transform 0.2s var(--ease-out), color 0.15s ease;
}
.member-search-wrap.is-open .member-chevron { transform: translateY(-50%) rotate(180deg); }
.member-search-wrap:focus-within .member-search-icon,
.member-search-wrap:focus-within .member-chevron { color: var(--ember-600); }

.member-search-wrap .form-control {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

/* Selected-member chip — replaces the input once a user picks someone. */
.member-chip {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.55rem 0.5rem 0.6rem;
    background: linear-gradient(
        180deg,
        rgba(20, 184, 166, 0.08) 0%,
        rgba(20, 184, 166, 0.04) 100%
    );
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: var(--r-md);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
    min-height: 44px;
}
.member-chip.is-visible { display: flex; }
.member-chip .member-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff;
}
.member-chip .member-chip-login {
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-chip .member-chip-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-600);
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-pill);
    background: rgba(20, 184, 166, 0.12);
}
.member-chip .member-chip-clear {
    background: transparent;
    border: 0;
    padding: 0.3rem;
    margin: 0;
    border-radius: var(--r-sm);
    color: var(--ink-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.member-chip .member-chip-clear:hover {
    background: rgba(11, 18, 32, 0.06);
    color: var(--ink-900);
}
.member-chip .member-chip-clear:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ember-500);
}

/* Dropdown surface — animated, layered. */
.member-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    scrollbar-width: thin;
}
.member-dropdown.is-open {
    display: block;
    animation: memberDropIn 140ms var(--ease-out);
}
@keyframes memberDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* A tiny header above the results, naming the org. */
.member-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem 0.45rem;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
    border-bottom: 1px solid var(--line-soft);
}
.member-dropdown-header .member-count {
    margin-left: auto;
    color: var(--ink-300);
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
}

.member-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--ink-900);
    position: relative;
    transition: background 0.12s ease, transform 0.12s ease;
}
.member-option:hover { background: var(--paper-soft); }
.member-option.is-active {
    background: rgba(20, 184, 166, 0.08);
    box-shadow: inset 2px 0 0 var(--teal-500);
}
.member-option.is-active .member-option-login { color: var(--teal-600); }
.member-option-login {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.member-option-enter {
    color: var(--ink-300);
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}
.member-option.is-active .member-option-enter {
    opacity: 1;
    color: var(--teal-600);
}

.member-option--empty,
.member-option--error {
    display: block;
    padding: 1rem 0.85rem;
    text-align: center;
    cursor: default;
}
.member-option--empty:hover,
.member-option--error:hover { background: transparent; }
.member-option-emoji {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    filter: grayscale(0.2);
}
.member-option-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 0.2rem;
}
.member-option-hint {
    font-size: 0.82rem;
    color: var(--ink-400);
    line-height: 1.4;
}

.member-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--paper-soft);
    box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.06);
}

/* Loading skeleton: three shimmering rows while the fetch is in flight. */
.member-skeleton {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
}
.member-skeleton-avatar,
.member-skeleton-bar {
    background: linear-gradient(
        90deg,
        var(--paper-soft) 0%,
        var(--line-soft) 50%,
        var(--paper-soft) 100%
    );
    background-size: 200% 100%;
    animation: memberShimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
.member-skeleton-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}
.member-skeleton-bar {
    height: 10px;
    flex: 1;
}
.member-skeleton-bar.is-short { max-width: 40%; }
@keyframes memberShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.member-error[hidden] { display: none; }
.member-error {
    margin-top: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    color: var(--ember-700);
    background: rgba(249, 115, 22, 0.07);
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: var(--r-sm);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.45;
}
.member-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ember-500);
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    margin-top: 1px;
}

/* Forms */
.form-stack {
    display: grid;
    gap: 1.5rem;
}

.form-group {
    display: grid;
    gap: 0.55rem;
}

.form-group > legend,
.form-group > .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-700);
    padding: 0;
    margin-bottom: 0.1rem;
}

.form-help {
    font-size: 0.82rem;
    color: var(--ink-400);
    margin-top: -0.1rem;
}

.form-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--ink-900);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:hover { border-color: var(--ink-200); }

.form-control:focus {
    outline: 0;
    border-color: var(--ember-500);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}

.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.radio-card {
    position: relative;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    cursor: pointer;
    display: grid;
    gap: 0.2rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.radio-card:hover { border-color: var(--ink-200); }

.radio-card input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.radio-card strong {
    display: block;
    font-weight: 600;
    color: var(--ink-950);
    font-size: 0.95rem;
}

.radio-card small {
    color: var(--ink-500);
    font-size: 0.82rem;
}

.radio-card input[type="radio"]:checked + .radio-card-body::before,
.radio-card:has(input:checked)::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--ember-500);
    border-radius: inherit;
    pointer-events: none;
}

.radio-card:has(input:checked) {
    background: rgba(249, 115, 22, 0.04);
}

.checkbox-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.checkbox-card:hover { border-color: var(--ink-200); }

.checkbox-card input[type="checkbox"] {
    margin: 0.15rem 0 0 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--ember-500);
    cursor: pointer;
}

.checkbox-card-body {
    display: grid;
    gap: 0.25rem;
}

.checkbox-card-body strong {
    font-weight: 600;
    color: var(--ink-950);
    font-size: 0.95rem;
}

.checkbox-card-body small {
    color: var(--ink-500);
    font-size: 0.82rem;
    line-height: 1.45;
}

.checkbox-card:has(input:checked) {
    background: rgba(249, 115, 22, 0.04);
    border-color: var(--ember-500);
}

/* Provider + Model are only shown in Specific review mode. Hide them
   entirely when Smart is chosen so the form stays focused on one decision
   at a time. */
.fallback-group {
    display: grid;
    gap: 1.25rem;
}

.fallback-group.is-fallback { display: none; }

/* Disabled radio cards (provider not available because the user hasn't
   supplied a key for that provider). Still visible for affordance, but
   not selectable. */
.radio-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface, #fafbfc);
}

.radio-card.is-disabled input[type="radio"] { cursor: not-allowed; }

/* Greyed-out dropdown options for models that don't match the chosen
   provider — still visible so users can see what's on offer elsewhere. */
select.form-control option:disabled {
    color: var(--ink-300);
}

/* BYOK key fields: "Saved" badge + inline Test/Remove buttons. */
.byok-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-700);
}

.byok-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.byok-badge-empty {
    background: rgba(100, 116, 139, 0.12);
    color: var(--ink-500);
    font-family: inherit;
}

.byok-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.byok-input { flex: 1; }

.btn-sm {
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.btn-danger {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.2);
}

.btn-danger:hover {
    background: rgba(185, 28, 28, 0.08);
    border-color: #b91c1c;
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

/* Cost / analytics stat layout used in settings */
.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.data-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
    background: var(--paper-soft);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

/* Upsell block */
.upsell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(20, 184, 166, 0.06));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}

.upsell strong {
    color: var(--ink-950);
    display: block;
    margin-bottom: 0.15rem;
}

.upsell p {
    color: var(--ink-500);
    font-size: 0.88rem;
    margin: 0;
}

/* Empty / gated state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--paper-soft);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
}

.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-600);
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin-bottom: 0.4rem;
    color: var(--ink-950);
}

.empty-state p {
    max-width: 42ch;
    margin: 0 auto 1.25rem;
}

/* ─── Analytics page ─────────────────────────────────────────────────── */

/* Month stepper in page header */
.month-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.2rem;
}

.month-stepper a,
.month-stepper button,
.month-stepper span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    color: var(--ink-700);
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 30px;
}

.month-stepper a:hover {
    background: var(--paper-soft);
    color: var(--ink-950);
}

.month-stepper .month-label {
    font-weight: 600;
    color: var(--ink-950);
    padding-inline: 0.85rem;
    white-space: nowrap;
}

.month-stepper a[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* Demo-mode banner */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1rem;
    border: 1px dashed var(--ember-500);
    background: rgba(249, 115, 22, 0.06);
    color: var(--ember-700);
    border-radius: var(--r-md);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.demo-banner strong {
    color: var(--ember-700);
    font-weight: 600;
}

/* KPI strip */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-tile {
    position: relative;
    padding: 1.1rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.25rem;
    min-height: 140px;
}

.kpi-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.kpi-tile .kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
}

.kpi-tile .kpi-value {
    font-size: clamp(1.5rem, 1rem + 1.2vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-950);
    line-height: 1.1;
    margin-top: 0.25rem;
}

.kpi-tile .kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.kpi-tile .kpi-sub {
    font-size: 0.78rem;
    color: var(--ink-400);
}

.kpi-sparkline {
    display: block;
    width: 72px;
    height: 24px;
    flex-shrink: 0;
}

.delta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem 0.15rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    white-space: nowrap;
    line-height: 1;
}

.delta-chip svg { width: 12px; height: 12px; }

.delta-chip.good { background: rgba(20, 184, 166, 0.12); color: var(--teal-600); }
.delta-chip.bad { background: rgba(229, 72, 77, 0.1); color: var(--sev-critical); }
.delta-chip.neutral { background: var(--line-soft); color: var(--ink-500); }
.delta-chip.new { background: rgba(249, 115, 22, 0.1); color: var(--ember-600); }

/* Two-column chart row */
.rhythm-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.chart-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.25rem 1.5rem;
}

.chart-card h3 {
    margin-bottom: 0.2rem;
}

.chart-card .chart-sub {
    font-size: 0.85rem;
    color: var(--ink-400);
    margin: 0 0 1rem;
}

.chart-wrap {
    position: relative;
    height: 240px;
}

/* Calendar heatmap */
.heatmap {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.6rem;
    align-items: start;
}

.heatmap-days {
    display: grid;
    grid-auto-rows: 22px;
    gap: 4px;
    padding-top: 20px;
    font-size: 0.72rem;
    color: var(--ink-400);
}

.heatmap-weeks {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 22px;
    gap: 4px;
    overflow-x: auto;
}

.heatmap-week {
    display: grid;
    grid-template-rows: 16px repeat(7, 22px);
    gap: 4px;
}

.heatmap-month-label {
    font-size: 0.7rem;
    color: var(--ink-400);
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
}

.heatmap-cell {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--line-soft);
    transition: transform 0.12s;
}

.heatmap-cell[data-level="0"] { background: #eef2f7; }
.heatmap-cell[data-level="1"] { background: rgba(20, 184, 166, 0.22); }
.heatmap-cell[data-level="2"] { background: rgba(20, 184, 166, 0.5); }
.heatmap-cell[data-level="3"] { background: var(--teal-500); }
.heatmap-cell[data-level="4"] { background: var(--ember-500); }

.heatmap-cell.blank { background: transparent; }

.heatmap-cell:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ink-400);
    margin-top: 0.85rem;
    justify-content: flex-end;
}

.heatmap-legend-swatches {
    display: inline-flex;
    gap: 3px;
}

.heatmap-legend-swatches span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Cost stack (stacked horizontal bar) */
.cost-stack {
    display: grid;
    gap: 1rem;
}

.cost-stack-bar {
    position: relative;
    height: 36px;
    background: var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
}

.cost-stack-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    position: relative;
    transition: flex 0.4s var(--ease-out);
    overflow: hidden;
    white-space: nowrap;
}

.cost-stack-seg.platform { background: linear-gradient(90deg, var(--teal-500), var(--teal-400)); }
.cost-stack-seg.byok { background: linear-gradient(90deg, var(--teal-600), var(--teal-500)); }
.cost-stack-seg.container { background: linear-gradient(90deg, var(--ember-500), var(--ember-600)); }

.cost-stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    font-size: 0.85rem;
}

.cost-stack-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-700);
}

.cost-stack-legend-item::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: currentColor;
}

.cost-stack-legend-item strong {
    color: var(--ink-950);
    font-weight: 600;
    margin-left: 0.15rem;
}

.cost-stack-legend-item.platform { color: var(--teal-500); }
.cost-stack-legend-item.byok { color: var(--teal-600); }
.cost-stack-legend-item.container { color: var(--ember-500); }
.cost-stack-legend-item > * { color: var(--ink-700); }
.cost-stack-legend-item > ::first-letter { color: inherit; }

.cost-stack-legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Reviewee leaderboard (SVG bars) */
.leaderboard {
    display: grid;
    gap: 0.55rem;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.92rem;
}

.leaderboard-row .author {
    color: var(--ink-950);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-bar {
    position: relative;
    height: 22px;
    background: var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}

.leaderboard-bar-fill {
    position: absolute;
    inset: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-500), var(--ember-500));
    border-radius: inherit;
    transition: width 0.4s var(--ease-out);
}

.leaderboard-bar-rr {
    position: absolute;
    inset: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.22);
    border-radius: inherit;
    mix-blend-mode: multiply;
}

.leaderboard-row .count {
    color: var(--ink-700);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 52px;
    text-align: right;
}

.leaderboard-row .count small {
    color: var(--ink-400);
    font-weight: 400;
    display: block;
    font-size: 0.72rem;
}

/* Table inside a card */
.card .data-table {
    margin-top: 0.75rem;
}

details.progressive-disclosure {
    margin-top: 1rem;
}

details.progressive-disclosure > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ink-500);
    list-style: none;
    padding: 0.35rem 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

details.progressive-disclosure > summary::-webkit-details-marker { display: none; }

details.progressive-disclosure > summary::after {
    content: "▾";
    font-size: 0.7rem;
    transition: transform 0.15s;
}

details.progressive-disclosure[open] > summary::after {
    transform: rotate(180deg);
}

/* Time-saved card (non-BYOK value-prop) */
.time-saved-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(45, 212, 191, 0.02));
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: var(--r-lg);
    margin-bottom: 1.5rem;
}

.time-saved-card .ts-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-400));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px rgba(20, 184, 166, 0.4);
}

.time-saved-card .ts-body {
    flex: 1;
    display: grid;
    gap: 0.2rem;
}

.time-saved-card .ts-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal-600);
}

.time-saved-card .ts-value {
    font-size: clamp(2rem, 1.4rem + 1.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink-950);
    line-height: 1;
}

.time-saved-card .ts-value small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-500);
    margin-left: 0.4rem;
}

.time-saved-card .ts-sub {
    font-size: 0.88rem;
    color: var(--ink-500);
}

.time-saved-card .ts-note {
    font-size: 0.78rem;
    color: var(--ink-400);
    margin-top: 0.35rem;
}

/* Weekday distribution card */
.weekday-bars {
    display: grid;
    gap: 0.55rem;
}

.weekday-row {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
}

.weekday-row .wd-label {
    color: var(--ink-700);
    font-weight: 500;
}

.weekday-row .wd-bar {
    position: relative;
    height: 20px;
    background: var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}

.weekday-row .wd-bar-fill {
    position: absolute;
    inset: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-500), var(--ember-500));
    border-radius: inherit;
    transition: width 0.4s var(--ease-out);
}

.weekday-row.peak .wd-label {
    color: var(--ember-600);
    font-weight: 600;
}

.weekday-row .wd-count {
    color: var(--ink-700);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

.weekday-row.zero .wd-bar-fill {
    background: var(--line);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .hero-grid,
    .radar-wrap,
    .diff-wrap,
    .autofix-wrap,
    .crosspromo-grid {
        grid-template-columns: 1fr;
    }

    .hero-mock {
        margin-top: 2rem;
    }

    .how-grid { grid-template-columns: 1fr; }
    .security-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }

    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .rhythm-grid { grid-template-columns: 1fr; }
}

.mobile-only { display: none; }

@media (max-width: 720px) {
    .nav-links { display: none; }
    .mobile-toggle { display: inline-flex; }
    .product-switcher,
    .nav-right > .btn-ghost,
    .nav-right > .btn-outline { display: none; }
    .nav-right { gap: 0.5rem; }
    .nav-right .btn-ember { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
    .mobile-only { display: block; }

    .hero-cta-row { flex-direction: column; align-items: stretch; }
    .hero-cta-row .btn { width: 100%; }

    .security-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .diff-callout { display: none; }

    .footer-legal { flex-direction: column; align-items: flex-start; }

    .kpi-strip { grid-template-columns: 1fr; }
    .leaderboard-row { grid-template-columns: 72px 1fr auto; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Seats: refined hero + CTAs ─────────────────────────────────────── */

.seats-hero {
    position: relative;
    overflow: hidden;
}

.seats-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(20, 184, 166, 0.05), transparent 60%),
        radial-gradient(520px 180px at 100% 100%, rgba(249, 115, 22, 0.04), transparent 60%);
    pointer-events: none;
}

.seats-hero > * { position: relative; z-index: 1; }

.seats-hero .seats-hero-big {
    font-size: 2.4rem;
    letter-spacing: -0.02em;
}

.seats-hero .seats-hero-cap {
    font-size: 1.25rem;
    color: var(--ink-300);
    margin-left: 0.15rem;
}

.seats-hero-available {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-pill);
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-600);
    border: 1px solid rgba(20, 184, 166, 0.18);
    font-variant-numeric: tabular-nums;
}

.seats-hero-available.tight {
    background: rgba(249, 115, 22, 0.08);
    color: var(--ember-700);
    border-color: rgba(249, 115, 22, 0.25);
}

.seats-hero-available.full {
    background: rgba(229, 72, 77, 0.08);
    color: var(--sev-critical);
    border-color: rgba(229, 72, 77, 0.25);
}

.seats-hero .seats-hero-progress { max-width: 420px; }

.seats-hero .usage-meter { height: 12px; }

.seats-hero .seats-hero-cost {
    padding-left: 1.25rem;
    border-left: 1px solid var(--line-soft);
    min-width: 160px;
}

.seats-hero .seats-hero-cost strong { font-size: 1.6rem; }

.seats-hero .seats-hero-cost-note {
    display: block;
    margin-top: 0.1rem;
    color: var(--ink-400);
}

@media (max-width: 720px) {
    .seats-hero .seats-hero-cost {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line-soft);
        padding-top: 1rem;
        margin-top: 0.5rem;
    }
}

/* Seats trial banner — lift the CTA into a real button */
.trial-banner {
    padding: 1.1rem 1.25rem;
}

.trial-banner-actions {
    margin-top: 0.9rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Tighten card grid so the two cards read as a balanced pair */
.card-grid.seats-split > .card {
    display: flex;
    flex-direction: column;
}

.card-grid.seats-split > .card > form {
    margin-top: auto;
}

.card-grid.seats-split .input-row {
    align-items: stretch;
}

.card-grid.seats-split .input-row .form-control { flex: 1 1 auto; max-width: 140px; }

.card-grid.seats-split .card-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Seat row — avatars + subtle hover */
.seat-row {
    padding: 0.85rem 0.5rem;
    border-radius: var(--r-md);
    transition: background 0.15s;
    margin-inline: -0.5rem;
}
.seat-row:hover { background: var(--paper-soft); }
.seat-row:last-child { border-bottom: 0; }

.seat-row .seat-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
}

.seat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--teal-500), #0ea5a0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.seat-avatar.pending {
    background: linear-gradient(135deg, var(--ember-500), var(--ember-600));
}

.seat-row .seat-login a:hover { color: var(--ember-600); text-decoration: underline; }

.seat-empty-hint {
    padding: 1.5rem 1rem;
    background: var(--paper-soft);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    color: var(--ink-500);
    font-size: 0.9rem;
    text-align: center;
}

/* "Change purchased seats" — stepper + live cost preview */
.seats-buy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.seat-stepper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.seat-stepper:focus-within {
    border-color: var(--ember-500);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}

.seat-stepper-btn {
    background: var(--paper-soft);
    color: var(--ink-700);
    border: 0;
    border-inline: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font: inherit;
}

.seat-stepper-btn:first-child { border-inline: 0; border-right: 1px solid var(--line); }
.seat-stepper-btn:last-child { border-inline: 0; border-left: 1px solid var(--line); }

.seat-stepper-btn:hover:not(:disabled) {
    background: #fff;
    color: var(--ember-600);
}

.seat-stepper-btn:disabled {
    color: var(--ink-300);
    cursor: not-allowed;
    background: var(--paper-soft);
}

.seat-stepper-input-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    background: #fff;
}

.seat-stepper-input {
    width: 3ch;
    min-width: 3ch;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink-950);
    background: transparent;
    border: 0;
    outline: 0;
    font-variant-numeric: tabular-nums;
    padding: 0;
    font-family: inherit;
    appearance: textfield;
    -moz-appearance: textfield;
}

.seat-stepper-input::-webkit-outer-spin-button,
.seat-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.seat-stepper-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.seats-buy-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: var(--r-md);
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
}

.seats-buy-preview-left {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.seats-buy-preview-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.seats-buy-preview-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink-950);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    transition: color 0.15s;
}

.seats-buy-preview-delta {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-pill);
    background: rgba(148, 163, 184, 0.12);
    color: var(--ink-500);
    border: 1px solid transparent;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.seats-buy-preview-delta.is-up {
    background: rgba(249, 115, 22, 0.1);
    color: var(--ember-700);
    border-color: rgba(249, 115, 22, 0.2);
}

.seats-buy-preview-delta.is-down {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-600);
    border-color: rgba(20, 184, 166, 0.2);
}

.seats-buy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.seats-buy-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.seats-buy-note {
    display: inline-flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-500);
    line-height: 1.45;
}

.seats-buy-note svg {
    color: var(--ink-300);
    margin-top: 2px;
    flex-shrink: 0;
}

.seats-buy-note strong {
    color: var(--ink-900);
    font-weight: 600;
}

.seats-buy-empty {
    margin-top: 1rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--paper-soft);
}

/* Section dividers on seats page — give the lists a visual anchor */
.seats-section-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.5rem 0 0.75rem;
}

.seats-section-label h3 { margin: 0; font-size: 1rem; }

.seats-section-label .hint { font-size: 0.82rem; color: var(--ink-400); }

/* ─── Upgrade page: real pricing cards ───────────────────────────────── */

.upgrade-shell {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* Segmented monthly/yearly control */
.cycle-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    gap: 4px;
    align-items: center;
    position: relative;
}

.cycle-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.cycle-toggle label {
    cursor: pointer;
    padding: 0.55rem 1.05rem;
    border-radius: var(--r-pill);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-500);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cycle-toggle label .save-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem;
    border-radius: var(--r-pill);
    background: rgba(20, 184, 166, 0.14);
    color: var(--teal-600);
    text-transform: uppercase;
}

.cycle-toggle input:checked + label {
    background: #fff;
    color: var(--ink-950);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px -6px rgba(15, 23, 42, 0.12);
}

.cycle-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.25rem 0 0.5rem;
}

.cycle-toolbar-hint {
    font-size: 0.85rem;
    color: var(--ink-500);
}

/* Plan card grid */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.25rem 1.35rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s, background 0.15s;
    min-height: 100%;
}

.plan-card input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.plan-card:hover {
    border-color: var(--ink-200);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25);
}

.plan-card:has(input:checked) {
    border-color: var(--ember-500);
    box-shadow: 0 0 0 1px var(--ember-500), 0 20px 40px -24px rgba(249, 115, 22, 0.35);
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.03), rgba(249, 115, 22, 0));
}

.plan-card.is-popular {
    border-color: rgba(20, 184, 166, 0.35);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.04), rgba(20, 184, 166, 0));
}

.plan-card.is-popular:has(input:checked) {
    border-color: var(--ember-500);
}

.plan-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-950);
    color: #fff;
    padding: 0.25rem 0.7rem;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.4);
}

.plan-ribbon::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-400);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25);
}

.plan-name {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.plan-card.is-popular .plan-name { color: var(--teal-600); }
.plan-card:has(input:checked) .plan-name { color: var(--ember-600); }

.plan-price {
    margin-top: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.plan-price strong {
    font-size: 2.2rem;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--ink-950);
    line-height: 1;
}

.plan-price .plan-price-unit {
    font-size: 0.85rem;
    color: var(--ink-400);
    font-weight: 500;
}

.plan-price-alt {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-400);
}

.plan-blurb {
    margin-top: 0.9rem;
    color: var(--ink-500);
    font-size: 0.88rem;
    line-height: 1.5;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.plan-features li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--ink-700);
    line-height: 1.4;
}

.plan-features li .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-600);
    background: rgba(20, 184, 166, 0.12);
    flex-shrink: 0;
    margin-top: 1px;
}

.plan-features li .muted {
    color: var(--ink-300);
    background: var(--line-soft);
}

.plan-features li.muted { color: var(--ink-400); }

.plan-card .plan-selected-tag {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--line);
    font-size: 0.78rem;
    color: var(--ink-400);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s, transform 0.2s;
}

.plan-card:has(input:checked) .plan-selected-tag {
    color: var(--ember-600);
    opacity: 1;
    transform: translateY(0);
}

/* Reassurance strip under the plan grid */
.trust-strip {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--ink-500);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px dashed var(--line);
}

.trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.trust-strip span svg { color: var(--teal-600); }

.upgrade-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.upgrade-summary {
    font-size: 0.9rem;
    color: var(--ink-500);
}

.upgrade-summary strong { color: var(--ink-950); font-weight: 700; }

/* ─── Privacy / Terms: TOC + summary callout ─────────────────────────── */

.policy-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .policy-shell { grid-template-columns: 1fr; gap: 1.5rem; }
}

.policy-toc {
    position: sticky;
    top: 96px;
    padding: 1rem 0.25rem;
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .policy-toc {
        position: static;
        border-left: 0;
        padding-left: 0;
        padding-top: 0;
        border-top: 1px solid var(--line);
        max-height: none;
    }
}

.policy-toc h6 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 0.5rem;
}

.policy-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.policy-toc a {
    display: block;
    padding: 0.3rem 0;
    color: var(--ink-500);
    font-size: 0.88rem;
    line-height: 1.35;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.75rem;
    transition: color 0.15s, border-color 0.15s;
}

.policy-toc a:hover,
.policy-toc a.is-active {
    color: var(--ink-950);
    border-left-color: var(--ember-500);
}

.policy-tldr {
    padding: 1.15rem 1.2rem;
    margin: 0 0 2rem;
    border: 1px solid rgba(20, 184, 166, 0.25);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0));
    border-radius: var(--r-lg);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.9rem;
    align-items: start;
}

.policy-tldr .tldr-icon {
    color: var(--teal-600);
    margin-top: 2px;
}

.policy-tldr strong {
    display: block;
    color: var(--ink-950);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.policy-tldr p { margin: 0.3rem 0 0; color: var(--ink-700); font-size: 0.92rem; line-height: 1.55; }

.policy-page h3 {
    scroll-margin-top: 96px;
}