:root {
    --ink: #0a0a0b;
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --line: rgba(10, 10, 14, 0.10);
    --line-strong: rgba(10, 10, 14, 0.16);
    --muted: #6b7280;
    --accent: #43554A;
    --accent-dark: #35443B;
    --accent-soft: #E7EDDF;
    --sage: #5C6B5F;
    --gold: #C9AF74;
    --shadow: 0 1px 2px rgba(10, 10, 14, 0.05), 0 10px 28px rgba(10, 10, 14, 0.06);
    --shadow-hover: 0 2px 6px rgba(10, 10, 14, 0.07), 0 18px 44px rgba(10, 10, 14, 0.10);
    --radius-xl: 14px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --max-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    color: var(--muted);
    line-height: 1.7;
}

h1, h2, h3, strong, .eyebrow, .button, .mini-label, .nav-cta {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3 {
    letter-spacing: -0.022em;
    font-weight: 700;
}

h1 {
    letter-spacing: -0.03em;
}

.page-shell {
    max-width: calc(var(--max-width) + 64px);
    margin: 0 auto;
    padding: 24px 32px 48px;
}

.site-header {
    position: sticky;
    top: 16px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    margin-bottom: 28px;
    background: rgba(255, 250, 245, 0.82);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-lockup img {
    width: 44px;
    height: 44px;
}

.brand-lockup strong,
.brand-lockup span {
    display: block;
}

.brand-lockup span {
    font-size: 0.85rem;
    color: var(--muted);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.site-nav a,
.nav-menu__trigger {
    font-weight: 600;
}

.nav-menu {
    position: relative;
}

.nav-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    color: var(--ink);
    font: inherit;
    font-family: "Inter", sans-serif;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.nav-menu__trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.65;
}

.nav-menu:hover .nav-menu__trigger,
.nav-menu:focus-within .nav-menu__trigger,
.nav-menu__trigger:hover {
    background: rgba(17, 20, 24, 0.06);
}

.nav-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 6px;
    width: min(360px, calc(100vw - 40px));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 250, 245, 0.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.nav-menu:hover .nav-menu__panel,
.nav-menu:focus-within .nav-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu__panel a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
}

.nav-menu__panel a:hover,
.nav-menu__panel a:focus {
    background: rgba(140, 163, 145, 0.1);
}

.nav-menu__panel strong {
    font-size: 0.95rem;
    line-height: 1.15;
}

.nav-menu__panel span {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.nav-cta {
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
}

.main-wrap {
    display: grid;
    gap: 28px;
}

.main-wrap > * {
    min-width: 0;
}

.spotlight,
.cta-panel,
.story-band,
.content-page {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.content-page h1 {
    margin: 0 0 16px;
    font-size: clamp(2.6rem, 5vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.lede {
    max-width: 60ch;
    font-size: 1.08rem;
}

.eyebrow,
.mini-label {
    display: inline-block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.77rem;
    font-weight: 700;
}

.eyebrow {
    margin-bottom: 12px;
    color: var(--accent-dark);
}

.mini-label {
    color: var(--sage);
}

.hero-actions,
.cta-actions,
.download-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #8CA391 100%);
    color: #fff;
    box-shadow: 0 16px 30px rgba(67, 85, 74, 0.24);
}

.button-secondary {
    background: var(--surface-strong);
    border-color: var(--line);
}

.button-disabled {
    color: rgba(17, 20, 24, 0.58);
    background: rgba(17, 20, 24, 0.06);
    border-color: rgba(17, 20, 24, 0.08);
    cursor: not-allowed;
}

.button-disabled:hover {
    transform: none;
}

.pulse-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.pulse-strip > div,
.download-card,
.prose-card,
.community-form-card,
.topic-card,
.feature-card,
.shot-card {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.topic-card__meta,
.field-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.status {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-calm {
    background: rgba(201, 175, 116, 0.2);
    color: #775b18;
}

.spotlight,
.cta-panel,
.story-band,
.content-page {
    padding: 36px;
}

.section-heading {
    margin-bottom: 24px;
}

.section-heading.narrow {
    max-width: 760px;
}

.section-heading h2,
.section-heading h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: 0;
}

.feature-grid,
.install-grid,
.two-column-panels,
.comparison-hero {
    display: grid;
    gap: 18px;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card h3,
.shot-card h3 {
    margin-top: 0;
}

.shot-card img {
    border-radius: 18px;
    border: 1px solid rgba(17, 20, 24, 0.08);
    box-shadow: 0 20px 40px rgba(17, 20, 24, 0.14);
}

.shot-card__copy {
    margin-top: 16px;
}

.cta-panel {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.text-link {
    margin-top: 16px;
    display: inline-flex;
    color: var(--accent-dark);
    font-weight: 800;
}

.content-page {
    display: grid;
    gap: 24px;
}

.download-card {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.download-handoff {
    max-width: 1040px;
    margin-inline: auto;
}

.download-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 28px;
    border: 1px solid rgba(67, 85, 74, 0.2);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(227, 235, 222, 0.85), rgba(255, 250, 245, 0.96));
    box-shadow: var(--shadow);
}

.download-status-card__mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--sage);
    color: white;
    font-size: 2rem;
    font-weight: 800;
}

.download-status-card h2,
.install-card--numbered h2 {
    margin: 8px 0 10px;
}

.install-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.install-card.install-card--numbered {
    position: relative;
    padding-top: 58px;
    align-content: start;
}

.install-step-number {
    position: absolute;
    top: 18px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}

.publisher-check {
    display: grid;
    gap: 4px;
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    background: rgba(223, 195, 131, 0.18);
}

.publisher-check span {
    color: var(--sage);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.download-safety-note,
.download-companion-callout {
    margin-top: 24px;
}

.two-column-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.install-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.install-command {
    overflow-x: auto;
    margin: 14px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: #111418;
    color: #f7f3ec;
    font-size: 0.92rem;
}

.community-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}

.comparison-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparison-hero__card {
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.comparison-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17, 20, 24, 0.08);
    background: var(--surface-strong);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(17, 20, 24, 0.08);
}

.comparison-table th {
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    background: rgba(17, 20, 24, 0.04);
}

.community-feed {
    display: grid;
    gap: 18px;
}

.reply-list,
.reply-form {
    margin-top: 18px;
}

.reply-list {
    display: grid;
    gap: 12px;
}

.reply-card {
    padding: 14px;
    border-radius: 16px;
    background: rgba(140, 163, 145, 0.08);
}

.community-form-card form,
.crm-signup-form,
.reply-form,
.download-card,
.prose-card,
.site-footer {
    display: grid;
    gap: 12px;
}

/* A prose card is a grid item and a grid container. Keep its min-content
   width from expanding either grid; fenced code scrolls locally without edits. */
.prose-card {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.prose-card pre {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.legal-copy {
    gap: 18px;
}

.legal-copy h2 {
    margin: 10px 0 0;
    font-size: 1.25rem;
}

.legal-copy p {
    margin: 0;
}

.legal-copy a {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

input,
textarea {
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(17, 20, 24, 0.12);
    border-radius: 14px;
}

textarea {
    resize: vertical;
}

.crm-signup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.crm-signup-form,
.crm-signup-summary {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.crm-signup-form label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.crm-signup-form label > span:first-child {
    font-size: 0.88rem;
}

.crm-billing-choice {
    display: grid;
    gap: 8px;
    margin: 16px 0 8px;
    padding: 12px 14px;
    border: 1px solid rgba(17, 20, 24, 0.12);
    border-radius: var(--radius-lg);
}

.crm-billing-choice legend {
    padding: 0 6px;
    font-size: 0.88rem;
    font-weight: 700;
}

.crm-signup-form .crm-billing-choice label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.crm-price-summary {
    margin: 8px 0 4px;
    font-weight: 700;
}

.field-hint,
.validation-summary,
.signup-status-list span {
    font-size: 0.88rem;
}

.field-hint {
    color: var(--muted);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.validation-summary {
    color: #9f1239;
    font-weight: 700;
}

.crm-signup-summary {
    display: grid;
    gap: 14px;
}

.crm-signup-summary h2,
.crm-signup-summary p {
    margin: 0;
}

.price-line {
    color: var(--accent-dark);
    font-size: 1.35rem;
    font-weight: 800;
}

.check-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.check-list li {
    padding-left: 26px;
    position: relative;
    color: var(--muted);
    line-height: 1.5;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-dark);
    font-weight: 900;
}

.provision-flow,
.signup-status-list {
    display: grid;
    gap: 10px;
}

.provision-flow span,
.signup-status-list div {
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(67, 85, 74, 0.06);
    border: 1px solid rgba(67, 85, 74, 0.12);
}

.signup-status-list div {
    display: grid;
    gap: 3px;
}

.signup-status-list span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.alert-warning {
    background: rgba(250, 204, 21, 0.2);
    color: #713f12;
}

.alert-danger {
    background: rgba(244, 63, 94, 0.12);
    color: #9f1239;
}

.community-note {
    margin: 0;
    font-size: 0.92rem;
}

.alert {
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
}

.alert-success {
    background: rgba(140, 163, 145, 0.14);
    color: #35544b;
}

.alert-error {
    background: rgba(244, 63, 94, 0.12);
    color: #9f1239;
}

.alert-info {
    background: rgba(56, 120, 170, 0.12);
    color: #1e4d6b;
}

/* ASP.NET validation tag helpers on the signup, billing and license forms emit this class. */
.text-danger {
    color: #9f1239;
    font-weight: 600;
}

.site-footer {
    grid-template-columns: minmax(220px, 300px) 1fr;
    align-items: start;
    gap: 28px 40px;
    margin-top: 8px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 250, 245, 0.8);
}

.footer-links {
    display: flex;
    gap: 10px 20px;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

@media (max-width: 980px) {
    .cta-panel,
    .download-card,
    .community-layout,
    .crm-signup-layout,
    .site-footer {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-grid,
    .install-grid,
    .two-column-panels,
    .comparison-hero {
        grid-template-columns: 1fr;
    }

    .pulse-strip {
        grid-template-columns: 1fr;
    }

    .install-guide-grid {
        grid-template-columns: 1fr;
    }

    .home-feature-roulette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-shell {
        padding: 16px 14px 32px;
    }

    .download-status-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .site-header {
        position: static;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-nav {
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }

    .nav-menu__panel {
        position: static;
        width: 100%;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .nav-menu:focus-within .nav-menu__panel,
    .nav-menu:hover .nav-menu__panel {
        display: grid;
    }

    .spotlight,
    .cta-panel,
    .content-page {
        padding: 22px;
    }

    .content-page h1 {
        font-size: 2.4rem;
    }

    .field-row {
        flex-direction: column;
    }

    .home-feature-roulette {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .home-feature-card {
        min-height: auto;
    }
}

/* ---------- Visual primitives (chips, stat tiles, capability cards) ---------- */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(140, 163, 145, 0.12);
    color: #35544b;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: "Inter", sans-serif;
}

.chip--accent {
    background: rgba(67, 85, 74, 0.12);
    color: var(--accent-dark);
}

.chip--gold {
    background: rgba(201, 175, 116, 0.22);
    color: #775b18;
}

.chip--ink {
    background: rgba(17, 20, 24, 0.08);
    color: var(--ink);
}

.glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(67, 85, 74, 0.12), rgba(201, 175, 116, 0.16));
    color: var(--accent-dark);
    flex-shrink: 0;
}

.glyph--sage {
    background: linear-gradient(135deg, rgba(140, 163, 145, 0.16), rgba(140, 163, 145, 0.06));
    color: #35544b;
}

.glyph--ink {
    background: linear-gradient(135deg, rgba(17, 20, 24, 0.85), rgba(17, 20, 24, 0.65));
    color: #f7f3ec;
}

/* Icon-led feature card — bigger than capability-tile, denser than old prose card. */
.icon-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.icon-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.icon-card__head h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.icon-card__head .eyebrow {
    margin-bottom: 0;
    font-size: 0.7rem;
}

.icon-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.icon-card .chip-row {
    margin-top: 4px;
}

.learn-more-link {
    color: var(--accent-dark);
    font-weight: 800;
    font-size: 0.84rem;
    text-decoration: none;
    margin-top: 4px;
}

.learn-more-link:hover {
    text-decoration: underline;
}

.feature-detail {
    display: grid;
    gap: 42px;
}

.feature-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 28px;
    align-items: stretch;
}

.feature-detail-hero__copy,
.feature-detail-hero__problem,
.feature-detail-panel,
.feature-example-card {
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.feature-detail-hero__copy {
    padding: clamp(28px, 5vw, 56px);
}

.feature-detail-hero__copy h1 {
    margin: 0;
    max-width: 900px;
}

.feature-detail-hero__problem {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 26px;
}

.feature-detail-hero__problem h2 {
    margin: 8px 0 0;
    font-size: 1.05rem;
    letter-spacing: 0;
}

.feature-detail-hero__problem p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.feature-detail-band {
    display: grid;
    gap: 18px;
}

.feature-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.feature-detail-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(17, 20, 24, 0.07);
    color: var(--ink);
    line-height: 1.45;
}

.feature-detail-check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--sage);
    margin-top: 1px;
}

.feature-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-example-card {
    padding: 22px;
}

.feature-example-card h3 {
    margin: 0 0 16px;
    font-size: 1.12rem;
}

.feature-example-card dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.feature-example-card dt {
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.feature-example-card dd {
    margin: 3px 0 0;
    color: var(--muted);
    line-height: 1.48;
}

.feature-detail-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.feature-detail-panel {
    padding: 24px;
}

.feature-detail-panel h2 {
    margin: 6px 0 16px;
}

.feature-detail-panel ol {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.58;
}

.feature-detail-panel li + li {
    margin-top: 10px;
}

.feature-output-grid,
.feature-related-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.feature-output-pill {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(140, 163, 145, 0.11);
    color: #35544b;
    font-weight: 800;
    text-align: center;
}

.feature-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-related-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
    color: inherit;
    text-decoration: none;
}

.feature-related-card strong {
    font-size: 1rem;
}

.feature-related-card span:last-child {
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 980px) {
    .feature-detail-hero,
    .feature-detail-two-col,
    .feature-example-grid,
    .feature-related-grid {
        grid-template-columns: 1fr;
    }

    .feature-detail-list,
    .feature-output-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .feature-detail-list,
    .feature-output-grid {
        grid-template-columns: 1fr;
    }
}

/* Big-number stat tiles, used on hero + download. */
.stat-tile {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.stat-tile__value {
    font-family: "Inter", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
}

.stat-tile__label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.stat-tile__hint {
    font-size: 0.74rem;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* Scenario rail: three steps with icons and a connecting line. */
.scenario {
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.scenario h3 {
    margin: 0 0 16px;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.scenario-rail {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
}

.scenario-step {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
}

.scenario-step strong {
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
}

.scenario-step span {
    font-size: 0.85rem;
    color: var(--ink);
}

.scenario-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0.7;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Use-case rows: scenario-styled cards, leaner than original use-case-card. */
.usecase-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.usecase-card h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.usecase-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.usecase-card p + p {
    margin-top: 6px;
}

.usecase-card .label {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
    margin-right: 6px;
    font-weight: 700;
}

/* Tighter homepage feature grid: 4 columns of icon-cards. */
.feature-grid--icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Section heading helper for tight intros. */
.section-heading.tight {
    margin-bottom: 16px;
}

.section-heading h2.compact {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: 8px;
}

.section-heading p.tagline {
    margin: 0;
    color: var(--muted);
    max-width: 60ch;
}

/* Story blocks: plain-language framing before the feature catalog. */
.story-band {
    display: grid;
    gap: 20px;
}

.story-band--strong {
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.14), rgba(201, 175, 116, 0.10)),
        var(--surface);
}

.home-feature-roulette {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.home-feature-card {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 175px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.home-feature-card strong {
    font-size: 1.02rem;
    line-height: 1.15;
}

.home-feature-card span:last-child {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.42;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.story-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.story-card h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
}

.story-card p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.55;
}

.workflow-grid {
    display: grid;
    gap: 14px;
}

.workflow-card {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.workflow-card h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
}

.workflow-card p {
    margin: 8px 0 0;
    font-size: 0.93rem;
    line-height: 1.55;
}

.workflow-card p strong {
    color: var(--ink);
}

.workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-card {
    align-content: start;
}

.verdict {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.verdict h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.verdict ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.verdict li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    font-size: 0.9rem;
    color: var(--muted);
}

.verdict li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--accent);
}

/* Screenshot mosaic: 2-column dense, with caption underneath. */
.shot-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.shot-mosaic .shot-card {
    padding: 14px;
}

.shot-mosaic .shot-card__copy {
    margin-top: 10px;
}

.shot-mosaic .shot-card h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.shot-mosaic .shot-card p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Compact CTA panel variant. */
.cta-panel--slim {
    padding: 24px 28px;
}

.cta-panel--slim h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: 0;
}

.cta-panel--slim p {
    margin: 4px 0 0;
}

/* Install grid v2: dense, with copy-to-clipboard cue. */
.install-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.install-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.install-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.install-card .install-command {
    margin: 0;
}

.install-card .hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

/* Setup-help row: small tiles linking to OAuth walkthroughs. */
.help-tile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
    font-size: 0.92rem;
}

.help-tile strong {
    display: block;
}

.help-tile span {
    color: var(--muted);
    font-size: 0.84rem;
}

.help-tile a {
    color: var(--accent-dark);
    font-weight: 700;
}

/* Mobile collapse for the new layouts. */
@media (max-width: 980px) {
    .feature-grid--icons,
    .scenario-grid,
    .shot-mosaic,
    .story-grid,
    .workflow-grid,
    .install-grid--compact {
        grid-template-columns: 1fr;
    }

    .scenario-rail {
        grid-template-columns: 1fr;
    }

    .scenario-arrow {
        transform: rotate(90deg);
    }

}

/* ---------- Technology page primitives ---------- */

/* Anchor chips: navigable jump-links, styled like chips but clickable. */
.anchor-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.anchor-row a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(17, 20, 24, 0.06);
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 160ms ease;
}

.anchor-row a:hover {
    background: rgba(67, 85, 74, 0.14);
    color: var(--accent-dark);
}

/* Monospace tool name + signature line, used in the primitives section. */
.tool-card {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.tool-card code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--accent-dark);
    font-weight: 600;
}

.tool-card .tool-card__hint {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Numbered step list — used for diagrammatic flows (tool-use loop, etc.) */
.step-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step-list li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.step-list li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, #8CA391 100%);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
}

.step-list strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.step-list span {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.45;
}

/* Provider matrix: lighter-weight than comparison-table. */
.provider-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.provider-table th,
.provider-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(17, 20, 24, 0.06);
    font-size: 0.88rem;
}

.provider-table th {
    font-family: "Inter", sans-serif;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: rgba(17, 20, 24, 0.03);
}

.provider-table td:first-child {
    font-weight: 700;
}

.provider-table code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--accent-dark);
}

/* Hero callout for the Technology page. */
.tech-hero {
    display: grid;
    gap: 12px;
}

.tech-hero h1 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    letter-spacing: 0;
    line-height: 1.0;
}

.tech-hero .lede {
    margin: 0;
    max-width: 64ch;
}

/* Section variants for the tech page — slimmer than .spotlight. */
.tech-section {
    padding: 28px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: 90px;
}

.tech-section h2 {
    margin: 0 0 4px;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    letter-spacing: 0;
}

.tech-section .tagline {
    margin-bottom: 18px;
}

.tech-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.tech-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Technical white paper page. */
.whitepaper-hero {
    padding: clamp(30px, 5vw, 52px);
}

.whitepaper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.whitepaper-meta span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f8fafc;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.whitepaper-split {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
    gap: 18px;
    align-items: start;
}

.whitepaper-copy {
    display: grid;
    gap: 12px;
}

.whitepaper-copy p,
.whitepaper-paragraph {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.whitepaper-paragraph {
    margin-bottom: 18px;
}

.whitepaper-after-steps {
    margin-top: 18px;
}

.whitepaper-callout {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(67, 85, 74, 0.18);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}

.whitepaper-callout strong {
    color: var(--accent-dark);
    font-size: 0.95rem;
}

.whitepaper-callout p {
    margin: 0;
    color: #243b53;
    font-size: 0.9rem;
    line-height: 1.6;
}

.whitepaper-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.whitepaper-flow__step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.whitepaper-flow__step strong {
    font-size: 1rem;
    line-height: 1.2;
}

.whitepaper-flow__step p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.whitepaper-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.whitepaper-principle {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.whitepaper-principle strong {
    font-size: 0.98rem;
    line-height: 1.25;
}

.whitepaper-principle p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.whitepaper-hero,
.whitepaper-hero .tech-hero,
.whitepaper-split,
.whitepaper-copy,
.whitepaper-callout,
.whitepaper-flow,
.whitepaper-flow__step,
.whitepaper-principles,
.whitepaper-principle {
    min-width: 0;
}

@media (max-width: 980px) {
    .tool-grid,
    .tech-grid-2,
    .tech-grid-3,
    .whitepaper-split,
    .whitepaper-flow,
    .whitepaper-principles {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    .whitepaper-hero,
    .tech-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 22px 16px;
    }

    .whitepaper-hero .tech-hero h1,
    .whitepaper-hero .tech-hero .lede,
    .tech-section h2,
    .whitepaper-copy p,
    .whitepaper-paragraph,
    .whitepaper-callout p,
    .whitepaper-flow__step p,
    .whitepaper-principle p {
        overflow-wrap: anywhere;
    }
}

/* Schematic screenshots for the guided-setup walkthrough pages (ConnectGoogle,
   ConnectOutlook). Zero-PII SVGs live at /images/guided-setup/; these rules
   give them a consistent framed look inside the prose cards. */
.walkthrough-shot {
    margin: 0 0 1rem 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.walkthrough-shot img {
    display: block;
    width: 100%;
    height: auto;
    background: #f6f7fb;
}
.walkthrough-shot figcaption {
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    color: var(--ink-soft, #5f6368);
    background: rgba(0, 0, 0, 0.025);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---------- Email system page ---------- */

.email-hero-page--visual {
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.14), rgba(201, 175, 116, 0.1)),
        var(--surface);
}

.email-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
}

.email-hero__copy {
    display: grid;
    align-content: center;
}

.email-hero__copy h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.6vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.channel-map {
    display: grid;
    gap: 14px;
}

.channel-map__cluster,
.channel-map__outcomes {
    display: grid;
    gap: 10px;
}

.channel-map__cluster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channel-pill,
.outcome-pill,
.channel-map__hub {
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.channel-pill,
.outcome-pill {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
}

.channel-pill strong,
.outcome-pill strong,
.channel-map__hub strong {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.channel-map__hub {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 8px;
    padding: 18px;
    box-shadow: 0 22px 44px rgba(17, 20, 24, 0.14);
    position: relative;
}

.channel-map__hub::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 2px;
    height: 14px;
    background: linear-gradient(180deg, var(--sage), var(--accent));
}

.channel-map__hub .glyph {
    grid-row: span 2;
    width: 46px;
    height: 46px;
}

.channel-map__hub span:last-child {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.channel-map__outcomes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.channel-map__outcomes .glyph {
    width: 32px;
    height: 32px;
}

.tech-facts-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tech-fact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.tech-fact-card h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.tech-fact-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.email-screenshot-story {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 14px;
}

.screenshot-panel,
.screenshot-panel-stack {
    display: grid;
    gap: 12px;
}

.screenshot-panel {
    align-content: start;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.screenshot-panel img {
    width: 100%;
    border-bottom: 1px solid rgba(17, 20, 24, 0.08);
}

.screenshot-panel--wide img {
    border-bottom: 0;
}

.screenshot-panel__callouts {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.callout-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(17, 20, 24, 0.08);
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.callout-pill svg {
    width: 16px;
    height: 16px;
    color: var(--accent-dark);
}

.screenshot-panel__caption {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.screenshot-panel__caption strong {
    font-size: 0.92rem;
    line-height: 1.25;
}

.email-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.email-feature-tile {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 205px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.email-feature-tile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.email-feature-tile__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 700;
}

.email-feature-tile h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.email-feature-tile p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .email-hero,
    .email-screenshot-story,
    .email-feature-grid,
    .tech-facts-strip {
        grid-template-columns: 1fr;
    }

    .channel-map__cluster,
    .channel-map__outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-feature-tile {
        min-height: auto;
    }
}

/* ---------- Feature story pages ---------- */

.feature-story-hero,
.feature-screenshot-pair,
.feature-story-grid,
.feature-fact-band {
    display: grid;
    gap: 14px;
}

.feature-story-hero {
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.13), rgba(201, 175, 116, 0.11)),
        var(--surface);
}

.feature-story-hero__copy h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.feature-story-hero__shot {
    margin: 0;
}

.feature-story-hero__shot img,
.feature-screenshot-card img {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17, 20, 24, 0.08);
    box-shadow: 0 20px 40px rgba(17, 20, 24, 0.14);
}

.cleanup-proof {
    max-width: 1100px;
    margin: 28px auto 0;
    overflow: hidden;
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 38px rgba(20, 37, 63, 0.1);
}

.cleanup-proof img {
    display: block;
    width: 100%;
    height: auto;
}

.cleanup-proof figcaption {
    padding: 14px 18px;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.5;
}

.feature-story-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-story-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-story-card,
.feature-fact-card,
.feature-screenshot-card {
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.feature-story-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 190px;
    padding: 20px;
}

.feature-story-card h2,
.feature-screenshot-card h2,
.feature-fact-band h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.feature-story-card p,
.feature-screenshot-card p,
.feature-fact-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.feature-fact-band {
    grid-template-columns: 0.75fr 1.25fr;
    align-items: center;
    padding: 28px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(67, 85, 74, 0.1), rgba(140, 163, 145, 0.1)),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.feature-fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.feature-fact-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    background: var(--surface-strong);
}

.feature-fact-card strong {
    font-size: 1rem;
}

.feature-screenshot-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-screenshot-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.feature-screenshot-card div {
    display: grid;
    gap: 8px;
}

@media (max-width: 980px) {
    .feature-story-hero,
    .feature-story-grid,
    .feature-story-grid--three,
    .feature-fact-band,
    .feature-fact-grid,
    .feature-screenshot-pair {
        grid-template-columns: 1fr;
    }

    .feature-story-card {
        min-height: auto;
    }
}

/* ---------- Agent employees page ---------- */

.agent-employee-bridge,
.employee-setup-strip,
.employee-model-band {
    display: grid;
    gap: 14px;
}

.agent-employee-bridge {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.13), rgba(201, 175, 116, 0.12)),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.agent-employee-bridge h2,
.employee-model-copy h2 {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.agent-employee-bridge p,
.employee-model-copy p {
    margin: 0;
}

.employee-hero-page {
    background:
        linear-gradient(135deg, rgba(67, 85, 74, 0.11), rgba(140, 163, 145, 0.14)),
        var(--surface);
}

.employee-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
}

.employee-hero__copy h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.employee-hero__shot {
    margin: 0;
}

.employee-hero__shot img {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17, 20, 24, 0.08);
    box-shadow: 0 20px 40px rgba(17, 20, 24, 0.14);
}

.employee-setup-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.employee-setup-step,
.employee-example-card,
.employee-model-band,
.boss-rule-card {
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.employee-setup-step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px;
}

.employee-setup-step h2 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.employee-setup-step p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.employee-example-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.employee-example-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px;
}

.employee-example-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
}

.employee-example-card h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.employee-example-card p {
    margin: 0;
}

.employee-can-do {
    display: grid;
    gap: 8px;
}

.employee-can-do__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.58);
}

.employee-can-do__item svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--sage);
}

.employee-can-do__item p {
    font-size: 0.88rem;
    line-height: 1.45;
}

.employee-tech-box,
.employee-boss-box {
    padding: 13px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    line-height: 1.45;
}

.employee-tech-box {
    background: rgba(140, 163, 145, 0.11);
    color: var(--muted);
}

.employee-boss-box {
    background: rgba(67, 85, 74, 0.1);
    color: var(--accent-dark);
}

.employee-tech-box strong,
.employee-boss-box strong {
    color: var(--ink);
}

.employee-model-band {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    padding: 28px;
}

.employee-model-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.model-person {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 7px;
    min-height: 150px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.model-person--boss {
    box-shadow: 0 18px 34px rgba(17, 20, 24, 0.13);
}

.model-person strong {
    font-size: 1rem;
}

.model-person span:last-child {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

.model-link {
    color: var(--accent-dark);
}

.model-link svg {
    width: 24px;
    height: 24px;
}

.boss-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.boss-rule-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
}

.boss-rule-card strong {
    font-size: 1rem;
}

.boss-rule-card p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .agent-employee-bridge,
    .employee-hero,
    .employee-setup-strip,
    .employee-example-grid,
    .employee-model-band,
    .employee-model-diagram,
    .boss-rule-grid {
        grid-template-columns: 1fr;
    }

    .agent-employee-bridge {
        align-items: start;
    }

    .model-link {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 720px) {
    .channel-map__cluster,
    .channel-map__outcomes {
        grid-template-columns: 1fr;
    }

    .screenshot-panel__callouts {
        position: static;
        padding: 12px;
        background: rgba(255, 255, 255, 0.5);
    }
}

/* ---------- Agents page ---------- */

.message-agent-bridge,
.agent-flow-section,
.agent-screenshot-band {
    display: grid;
    gap: 14px;
}

.message-agent-bridge {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(67, 85, 74, 0.1), rgba(140, 163, 145, 0.12)),
        var(--surface);
    box-shadow: var(--shadow);
}

.bridge-copy h2 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 2.8vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.bridge-copy p {
    margin: 0;
}

.bridge-copy .button {
    margin-top: 18px;
}

.bridge-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.bridge-node {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 7px;
    min-height: 150px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
}

.bridge-node--strong {
    box-shadow: 0 18px 34px rgba(17, 20, 24, 0.13);
}

.bridge-node strong {
    font-size: 1rem;
}

.bridge-node span:last-child {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

.bridge-arrow {
    color: var(--accent-dark);
}

.bridge-arrow svg {
    width: 24px;
    height: 24px;
}

.agent-hero-page {
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.15), rgba(201, 175, 116, 0.12)),
        var(--surface);
}

.agent-hero {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 28px;
    align-items: center;
}

.agent-hero__copy h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.agent-hero__shot {
    margin: 0;
}

.agent-hero__shot img,
.agent-shot-card img {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(17, 20, 24, 0.08);
    box-shadow: 0 20px 40px rgba(17, 20, 24, 0.14);
}

.agent-flow-section {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agent-flow-step,
.agent-job-card,
.agent-shot-card,
.agent-guardrail {
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.agent-flow-step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px;
}

.agent-flow-step h2,
.agent-shot-card h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.agent-flow-step p,
.agent-shot-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.agent-job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.agent-job-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
}

.agent-job-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.agent-job-card h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.agent-job-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.agent-tech-note {
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(140, 163, 145, 0.1);
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.agent-tech-note strong {
    color: var(--ink);
}

.agent-screenshot-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-shot-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.agent-shot-card div {
    display: grid;
    gap: 8px;
}

.agent-guardrail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.agent-guardrail {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
}

.agent-guardrail strong {
    font-size: 1rem;
}

.agent-guardrail p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .message-agent-bridge,
    .bridge-flow,
    .agent-hero,
    .agent-flow-section,
    .agent-job-grid,
    .agent-screenshot-band,
    .agent-guardrail-grid {
        grid-template-columns: 1fr;
    }

    .bridge-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

/* ---------- Homepage everyday-language doorway ---------- */
.story-band--bugged {
    background: rgba(255, 250, 245, 0.86);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 32px;
    margin: 28px 0;
}

.bugged-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
}

/* ---------- Solutions page ---------- */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.solution-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.solution-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.solution-card__head h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.3;
}

.solution-card__head .glyph {
    color: var(--accent-dark);
}

.solution-card__pain,
.solution-card__help {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}

.solution-card__help {
    color: var(--ink);
}

.persona-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.persona-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    position: relative;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.persona-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.persona-card strong {
    font-size: 1rem;
}

.persona-card p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.persona-card__arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--muted);
}

.reassure-band {
    margin: 28px 0;
    padding: 28px;
    border-radius: var(--radius-xl);
    background: rgba(140, 163, 145, 0.08);
    border: 1px solid var(--line);
}

.reassure-band__copy {
    max-width: 760px;
    margin-bottom: 18px;
}

.reassure-band__copy h2 {
    margin: 0 0 8px;
}

.reassure-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.reassure-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
}

.reassure-card strong {
    font-size: 1rem;
    line-height: 1.35;
}

.reassure-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* ---------- FAQ page ---------- */
.faq-group {
    margin: 26px 0;
}

.faq-group__heading {
    margin-bottom: 12px;
}

.faq-group__heading h2 {
    margin: 4px 0 0;
    font-size: 1.4rem;
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    padding: 16px 18px;
    transition: border-color 0.15s ease;
}

.faq-item[open] {
    border-color: var(--accent);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

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

.faq-item__q {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.4;
}

.faq-item__chev {
    color: var(--muted);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-item__chev {
    transform: rotate(-90deg);
}

.faq-item p {
    margin: 12px 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---------- First day page ---------- */
.firstday-rail {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.firstday-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.firstday-step__mark {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: rgba(67, 85, 74, 0.10);
    color: var(--accent-dark);
}

.firstday-step__mark span {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
}

.firstday-step__mark small {
    font-size: 0.74rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.firstday-step__body {
    display: grid;
    gap: 8px;
}

.firstday-step__body h2 {
    margin: 0;
    font-size: 1.18rem;
}

.firstday-step__body .glyph {
    color: var(--accent-dark);
}

.firstday-step__body p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
}

.firstday-step__reassure {
    padding: 10px 12px;
    background: rgba(140, 163, 145, 0.10);
    border-left: 3px solid var(--sage);
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.88rem !important;
}

.ifthis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.ifthis-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
}

.ifthis-card strong {
    font-size: 1rem;
}

.ifthis-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.firstweek-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.firstweek-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.firstweek-item strong {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: var(--accent-dark);
}

.firstweek-item span {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---------- Getting started page ---------- */
.getting-started-usecase {
    gap: 14px;
}

.getting-started-prompt {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #f8fafc;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.5;
}

.getting-started-prompt code {
    color: var(--accent-dark);
    white-space: normal;
}

.getting-started-mini-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 1.2rem;
}

.getting-started-mini-list li {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .solution-grid,
    .persona-grid,
    .reassure-grid,
    .ifthis-grid {
        grid-template-columns: 1fr;
    }

    .firstday-step {
        grid-template-columns: 1fr;
    }

    .firstday-step__mark {
        justify-self: start;
        padding: 8px 14px;
    }

    .firstday-step__mark span {
        font-size: 1.1rem;
    }
}

/* ---------- Lawyers page ---------- */

.legal-hero-page {
    background:
        linear-gradient(135deg, rgba(140, 163, 145, 0.14), rgba(201, 175, 116, 0.12)),
        var(--surface);
}

.legal-hero {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 28px;
    align-items: center;
}

.legal-hero__copy h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.legal-case-card,
.legal-flow-step,
.legal-use-card,
.legal-practice-band,
.legal-guardrail {
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.legal-case-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(17, 20, 24, 0.02), rgba(17, 20, 24, 0.06)),
        var(--surface-strong);
}

.legal-case-card__header,
.legal-review-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.legal-case-card__header strong,
.legal-case-card__header span,
.legal-review-row strong,
.legal-review-row span {
    display: block;
}

.legal-case-card__header span,
.legal-review-row span {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.legal-case-card__section {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
}

.legal-timeline {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-timeline li {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.62);
}

.legal-timeline strong {
    color: var(--accent-dark);
}

.legal-timeline span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

.legal-review-row {
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.62);
}

.legal-flow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.legal-flow-step {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px;
}

.legal-flow-step h2 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.legal-flow-step p,
.legal-use-card p,
.legal-guardrail p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.legal-use-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.legal-use-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
}

.legal-use-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.legal-use-card h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.legal-practice-band {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 22px;
    align-items: center;
    padding: 28px;
}

.legal-practice-band__copy h2 {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.legal-practice-band__copy p {
    margin: 0;
}

.legal-practice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legal-practice-pill {
    padding: 10px 13px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid rgba(17, 20, 24, 0.08);
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.legal-guardrail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.legal-guardrail {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
}

.legal-guardrail strong {
    font-size: 1rem;
}

@media (max-width: 980px) {
    .legal-hero,
    .legal-flow-strip,
    .legal-use-grid,
    .legal-practice-band,
    .legal-guardrail-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Crisp modern theme (2026-06 reground)
   Flat near-white surfaces, single indigo accent, hairline borders,
   restrained shadows. Appended last so it wins over warm-era rules.
   ===================================================================== */

/* Primary action: flat indigo, lift on hover */
.button-primary,
.nav-cta {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    box-shadow: none;
}

.button-primary:hover,
.nav-cta:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: 0 6px 18px rgba(67, 85, 74, 0.28);
    transform: translateY(-1px);
}

.button-secondary {
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    box-shadow: none;
}

.button-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

/* Eyebrows / mini-labels: quiet indigo */
.eyebrow,
.mini-label {
    color: var(--accent);
}

/* Icon tiles: warm brand wash, ink primaries. The glyph SVGs carry their own
   fixed warm accents (orange/gold/teal), so never force a fill here. */
.glyph {
    background: linear-gradient(135deg, rgba(67, 85, 74, 0.10), rgba(201, 175, 116, 0.16));
    color: var(--ink);
    border: none;
}

.glyph--sage {
    background: linear-gradient(135deg, rgba(140, 163, 145, 0.16), rgba(140, 163, 145, 0.06));
    color: var(--ink);
    border: none;
}

.glyph svg,
.glyph--sage svg {
    color: inherit;
}

/* Flatten every warm decorative wash into a clean white panel */
.email-hero-page--visual,
.feature-story-hero,
.feature-fact-band,
.agent-employee-bridge,
.employee-hero-page,
.message-agent-bridge,
.agent-hero-page,
.legal-hero-page,
.legal-case-card {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* Full-bleed accent section: faint indigo tint, not a card */
.story-band--strong {
    background: #E7EDDF;
    border: 1px solid rgba(67, 85, 74, 0.14);
    box-shadow: none;
}

/* Card families: white, hairline border, no resting shadow */
.story-card,
.home-feature-card,
.feature-story-card,
.shot-card,
.workflow-card,
.feature-card,
.usecase-card,
.scenario,
.verdict,
.icon-card,
.comparison-hero__card {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Lift only the interactive (linked) cards on hover */
a.home-feature-card:hover,
a.shot-card:hover,
a.story-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

/* Header: clean white with a hairline and light blur */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    backdrop-filter: saturate(1.1) blur(8px);
    box-shadow: none;
}

/* Footer: solid white panel */
.site-footer {
    background: #fff;
}

/* Nav dropdown panels: crisp white card */
.nav-menu__panel {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* Stat tiles and console meta: flat */
.stat-tile {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
}

/* CTA panel: confident indigo block */
.cta-panel {
    background: var(--ink);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    color: #fff;
}

.cta-panel h2,
.cta-panel .eyebrow {
    color: #fff;
}

.cta-panel p {
    color: rgba(255, 255, 255, 0.72);
}

.cta-panel .button-primary {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}

.cta-panel .button-primary:hover {
    background: #E7EDDF;
    border-color: #E7EDDF;
}

.cta-panel .button-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.cta-panel .button-secondary:hover {
    border-color: #fff;
    color: #fff;
}

/* Chips: quiet neutral, accent variant indigo */
.chip {
    background: #f3f4f6;
    border: 1px solid var(--line);
    color: var(--muted);
}

.chip--accent {
    background: var(--accent-soft);
    border-color: rgba(67, 85, 74, 0.2);
    color: var(--accent-dark);
}

/* ---- Worked examples ("See it work") ---- */
.example {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: 8px;
}

.example__step {
    padding: 22px 26px;
    border-top: 1px solid var(--line);
}

.example__step:first-child {
    border-top: none;
}

.example__label {
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}

.example__q {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink);
}

.example__note {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.example__status {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    background: var(--accent-soft);
    border: 1px solid rgba(67, 85, 74, 0.18);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.example__status .glyph {
    color: var(--ink);
}

.example__status p {
    margin: 0;
    color: #243b53;
    line-height: 1.6;
    font-size: 0.95rem;
}

.example__status em {
    color: var(--accent-dark);
    font-style: italic;
}

.example__notes {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.example__notes li {
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.example-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.example-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.example-table th,
.example-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.example-table th {
    font-family: inherit;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: #f8fafc;
}

.example-table tr:last-child td {
    border-bottom: none;
}

.example-table td code,
.example-table th code {
    font-size: 0.82rem;
    color: var(--accent-dark);
}

.example-table .src {
    white-space: nowrap;
    color: var(--accent-dark);
    font-weight: 600;
}

.example-email {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}

.example-email__head {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 4px;
}

.example-email__head span {
    font-size: 0.88rem;
    color: var(--muted);
}

.example-email__head span strong {
    color: var(--ink);
    font-weight: 600;
}

.example-email__body {
    padding: 18px 20px;
    margin: 0;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
}

.example-email__body sup {
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.72rem;
}

.example__caption {
    margin: 16px 2px 0;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.6;
}

/* =====================================================================
   2026-07 restructure: simplified header + grouped footer
   ===================================================================== */

.brand-lockup strong {
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

.brand-lockup img {
    width: 38px;
    height: 38px;
}

.site-nav {
    gap: 4px;
}

.site-nav > a {
    padding: 9px 10px;
    border-radius: 8px;
    white-space: nowrap;
    color: var(--ink);
}

.site-nav > a:hover {
    background: rgba(17, 20, 24, 0.06);
}

.site-nav > a.nav-cta {
    margin-left: 8px;
    background: var(--accent);
    color: #fff;
}

.site-nav > a.nav-cta:hover {
    background: var(--accent-dark);
}

.nav-menu__trigger {
    white-space: nowrap;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.site-nav-toggle__icon,
.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.site-nav-toggle__icon {
    position: relative;
}

.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
    position: absolute;
    left: 0;
    content: "";
}

.site-nav-toggle__icon::before {
    top: -6px;
}

.site-nav-toggle__icon::after {
    top: 6px;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__icon {
    background: transparent;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Footer: brand column + grouped link columns + bottom bar */
.site-footer {
    display: block;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 28px 36px;
    align-items: start;
}

.footer-brand {
    display: grid;
    gap: 8px;
    align-content: start;
}

.footer-brand p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
}

.footer-col {
    display: grid;
    gap: 7px;
    align-content: start;
}

.footer-col h4 {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-col a {
    font-size: 0.89rem;
    color: var(--ink);
    opacity: 0.82;
    width: fit-content;
}

.footer-col a:hover {
    opacity: 1;
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}

.footer-bottom__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    max-width: 100%;
}

.footer-bottom__links a:hover {
    color: var(--accent);
}

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Founder pull-quote */
.founder-quote {
    margin: 4px 0 18px;
    padding: 20px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px var(--radius-lg) var(--radius-lg) 6px;
    max-width: 720px;
}

.founder-quote p {
    margin: 0 0 8px;
    font-size: 1.12rem;
    line-height: 1.55;
    font-weight: 600;
    color: var(--ink);
}

.founder-quote cite {
    font-style: normal;
    font-size: 0.88rem;
    color: var(--muted);
}

/* Official skills repository */
.skills-repository {
    padding: 44px;
}

.skills-repository__assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 28px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--line);
}

.skills-repository__assurance > div {
    display: grid;
    gap: 5px;
    padding: 18px;
    background: #fff;
}

.skills-repository__assurance strong {
    color: var(--ink);
    font-size: 0.95rem;
}

.skills-repository__assurance span {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.skills-repository__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.skill-repository-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 264px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.skill-repository-card__head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.skill-repository-card__functions {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.skill-repository-card h2 {
    margin: 14px 0 8px;
    font-size: 1.18rem;
}

.skill-repository-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.skill-repository-card__permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0;
}

.skill-repository-card .button {
    margin-top: auto;
}

.skills-repository__install {
    margin-top: 28px;
    padding: 28px;
    border: 1px solid rgba(67, 85, 74, 0.16);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}

.skills-repository__install h2 {
    margin: 8px 0 12px;
    font-size: 1.35rem;
}

.skills-repository__install ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .skills-repository__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .skills-repository { padding: 28px 20px; }
    .skills-repository__assurance,
    .skills-repository__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }

    .brand-lockup {
        min-width: 0;
    }

    .js .site-nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    .js .site-nav {
        display: none;
    }

    .js .site-nav.site-nav--open {
        display: flex;
    }

    .site-nav > a,
    .nav-menu,
    .nav-menu__trigger {
        width: 100%;
    }

    .site-nav > a,
    .nav-menu__trigger {
        min-height: 42px;
        text-align: left;
    }

    .site-nav > a.nav-cta {
        margin-left: 0;
        text-align: center;
    }

    .nav-menu__panel {
        max-width: 100%;
    }

    .footer-bottom__links {
        gap: 10px 16px;
    }
}

/* Homepage visual proof */
.visual-proof {
    max-width: 1440px;
    margin: 34px auto;
    padding: clamp(26px, 4vw, 54px);
    border: 1px solid rgba(67, 85, 74, 0.18);
    border-radius: var(--radius-xl);
    background: #eef6ff;
}

.screenshot-zoomable {
    cursor: zoom-in;
}

.video-zoomable {
    cursor: zoom-in;
}

.screenshot-lightbox {
    width: min(96vw, 1500px);
    max-width: none;
    padding: 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: #101318;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.screenshot-lightbox::backdrop {
    background: rgba(7, 11, 18, 0.78);
}

.screenshot-lightbox img,
.screenshot-lightbox video {
    display: block;
    width: 100%;
    max-height: 86vh;
    object-fit: contain;
}

.screenshot-lightbox video {
    background: #0f172a;
}

.screenshot-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 20, 24, 0.82);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* =====================================================================
   Talavine conversion homepage: one causal story, progressive detail
   ===================================================================== */

.home-demo {
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    margin: 0 auto 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.home-conversion-hero__visual {
    position: relative;
    z-index: 1;
}

.home-conversion-hero__visual {
    margin: 0;
    padding: clamp(6px, 1vw, 12px);
    border: 1px solid rgba(18, 22, 27, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 30px 72px rgba(35, 42, 48, 0.18);
}

.home-conversion-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(18, 22, 27, 0.08);
}

.home-conversion-hero__visual figcaption,
.home-demo__frame figcaption {
    padding: 10px 4px 2px;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.evidence-map {
    position: relative;
    min-width: 0;
    margin: 30px 0 0;
    padding: clamp(20px, 2.5vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(165, 180, 252, 0.3);
    border-radius: 22px;
    background:
        radial-gradient(circle at 11% 8%, rgba(56, 189, 248, 0.15), transparent 24%),
        radial-gradient(circle at 86% 88%, rgba(52, 211, 153, 0.13), transparent 22%),
        rgba(8, 15, 30, 0.72);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 32px 80px rgba(3, 7, 18, 0.3);
}

.evidence-map::after {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    pointer-events: none;
}

.evidence-map > * {
    position: relative;
    z-index: 1;
}

.home-demo__links {
    display: flex;
    align-items: center;
    gap: 14px 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.home-demo {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
    gap: clamp(28px, 4vw, 62px);
    align-items: center;
    padding: clamp(30px, 4.5vw, 66px);
    background: linear-gradient(140deg, #f8fafc, #fff);
}

.home-demo h2 {
    margin: 10px 0 15px;
    font-size: clamp(2rem, 3.1vw, 3.3rem);
    line-height: 1.04;
}

.home-demo__copy > p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.67;
}

.home-demo__checks {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.home-demo__checks li {
    position: relative;
    padding-left: 27px;
    line-height: 1.5;
}

.home-demo__checks li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    content: "✓";
    color: #fff;
    background: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
}

.home-demo__frame {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(20, 37, 63, 0.14);
}

.home-demo__frame video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 10px;
    background: #0f172a;
}

.home-demo__frame img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

/* Alternate the media side on the middle problem section */
.home-demo--flip {
    grid-template-columns: minmax(460px, 1.18fr) minmax(0, 0.82fr);
}

.home-demo--flip .home-demo__frame {
    order: -1;
}

@media (max-width: 1120px) {
    .home-demo {
        grid-template-columns: 1fr;
    }

    .home-conversion-hero__visual {
        max-width: 880px;
        transform: none;
    }

}

@media (max-width: 760px) {
    .home-demo {
        margin-bottom: 22px;
        padding: 24px 20px;
        border-radius: 15px;
    }

    .home-demo__links {
        align-items: stretch;
        flex-direction: column;
    }

    .home-demo__links .button {
        width: 100%;
        text-align: center;
    }

    .evidence-map {
        padding: 18px 16px;
        border-radius: 17px;
    }

    .home-demo__frame {
        min-width: 0;
    }
}

/* ── Marshal Bee mascot ─────────────────────────────────────────────────
   The animated hero bee. Motion is event-driven and restrained: one fly-in
   on load, an occasional blink, and a cap tip + wing buzz on hover. All of
   it collapses to a static pose under prefers-reduced-motion. */

.sm-bee .sm-bee__all,
.sm-bee .sm-bee__eyes,
.sm-bee .sm-bee__cap,
.sm-bee .sm-bee__wing-l,
.sm-bee .sm-bee__wing-r {
    transform-box: fill-box;
}

.sm-bee .sm-bee__all {
    transform-origin: center;
    animation: sm-bee-flyin 1s cubic-bezier(0.2, 0.8, 0.3, 1) 1;
}

.sm-bee .sm-bee__eyes {
    transform-origin: center;
    animation: sm-bee-blink 7s infinite;
}

.sm-bee .sm-bee__wing-l {
    transform-origin: 85% 85%;
    animation: sm-bee-flap-l 0.16s ease-in-out 8 alternate;
}

.sm-bee .sm-bee__wing-r {
    transform-origin: 15% 85%;
    animation: sm-bee-flap-r 0.16s ease-in-out 8 alternate;
}

.sm-bee .sm-bee__cap {
    transform-origin: 20% 90%;
}

.sm-bee:hover .sm-bee__cap {
    animation: sm-bee-tip 0.8s ease 1;
}

.sm-bee:hover .sm-bee__wing-l {
    animation: sm-bee-flap-l 0.16s ease-in-out 6 alternate;
}

.sm-bee:hover .sm-bee__wing-r {
    animation: sm-bee-flap-r 0.16s ease-in-out 6 alternate;
}

.sm-bee.sm-bee--celebrate .sm-bee__cap {
    animation: sm-bee-tip 0.8s ease 1;
}

.sm-bee.sm-bee--celebrate .sm-bee__wing-l {
    animation: sm-bee-flap-l 0.16s ease-in-out 6 alternate;
}

.sm-bee.sm-bee--celebrate .sm-bee__wing-r {
    animation: sm-bee-flap-r 0.16s ease-in-out 6 alternate;
}

.download-bee {
    margin-bottom: 10px;
}

.download-bee .sm-bee {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    box-shadow: var(--shadow);
}

.brand-lockup img {
    transition: transform 0.25s ease;
}

.brand-lockup:hover img {
    transform: rotate(-6deg) translateY(-1px);
}

@keyframes sm-bee-flyin {
    0% { transform: translate(-46px, 30px) rotate(-14deg); opacity: 0; }
    55% { transform: translate(4px, -3px) rotate(3deg); opacity: 1; }
    100% { transform: none; }
}

@keyframes sm-bee-blink {
    0%, 95.5%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(0.1); }
}

@keyframes sm-bee-flap-l {
    from { transform: rotate(4deg); }
    to { transform: rotate(-16deg); }
}

@keyframes sm-bee-flap-r {
    from { transform: rotate(-4deg); }
    to { transform: rotate(16deg); }
}

@keyframes sm-bee-tip {
    0%, 100% { transform: none; }
    35% { transform: rotate(-16deg) translateY(-3px); }
    60% { transform: rotate(-12deg) translateY(-2.5px); }
}

@media (prefers-reduced-motion: reduce) {
    .sm-bee .sm-bee__all,
    .sm-bee .sm-bee__eyes,
    .sm-bee .sm-bee__wing-l,
    .sm-bee .sm-bee__wing-r,
    .sm-bee:hover .sm-bee__cap,
    .sm-bee:hover .sm-bee__wing-l,
    .sm-bee:hover .sm-bee__wing-r,
    .sm-bee.sm-bee--celebrate .sm-bee__cap,
    .sm-bee.sm-bee--celebrate .sm-bee__wing-l,
    .sm-bee.sm-bee--celebrate .sm-bee__wing-r {
        animation: none;
    }

    .brand-lockup img,
    .brand-lockup:hover img {
        transition: none;
        transform: none;
    }
}

/* ── Header fixes: no peek-through above the floating card, and no cramped
   mid-width collisions ─────────────────────────────────────────────────── */

/* The brand never yields space; overflow is handled by the menu toggle. */
.brand-lockup {
    flex-shrink: 0;
}

/* The sticky header floats 16px below the viewport top, which let page text
   scroll past in that gap and reappear above the card. This shim paints the
   gap (and the shell's side padding) in the page background so content
   passes cleanly underneath. Desktop only: below 720px the header is static. */
@media (min-width: 721px) {
    .site-header::before {
        content: "";
        position: absolute;
        left: -32px;
        right: -32px;
        bottom: calc(100% - 1px);
        height: 18px;
        background: #fafafa;
    }
}

/* Between the phone layout and full desktop, the full nav no longer fits
   beside the brand. Use the same Menu toggle as mobile, opening as a compact
   dropdown card under the header instead of reflowing the whole header. */
@media (min-width: 721px) and (max-width: 1080px) {
    .js .site-nav-toggle {
        display: inline-flex;
    }

    .js .site-nav {
        display: none;
    }

    .js .site-nav.site-nav--open {
        display: flex;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: min(340px, 92vw);
        padding: 10px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow-hover);
    }

    .js .site-nav.site-nav--open > a,
    .js .site-nav.site-nav--open .nav-menu,
    .js .site-nav.site-nav--open .nav-menu__trigger {
        width: 100%;
        text-align: left;
    }

    .js .site-nav.site-nav--open > a.nav-cta {
        margin-left: 0;
        text-align: center;
    }

    .js .site-nav.site-nav--open .nav-menu__panel {
        position: static;
        width: 100%;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
    }

    .js .site-nav.site-nav--open .nav-menu:hover .nav-menu__panel,
    .js .site-nav.site-nav--open .nav-menu:focus-within .nav-menu__panel {
        display: grid;
    }
}
/* Double-opt-in audience signup. The provider stays behind this site's same-origin relay. */
.audience-page { max-width: 980px; margin-inline: auto; }
.audience-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 3rem; align-items: start; }
.audience-form, .audience-status { padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.audience-form { display: grid; gap: 1rem; }
.audience-form label { display: grid; gap: .45rem; font-weight: 650; color: var(--ink); }
.audience-form input { width: 100%; padding: .82rem .9rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.audience-form input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.audience-form button:disabled { opacity: .65; cursor: wait; }
.audience-result { min-height: 1.5rem; margin: 0; font-weight: 650; }
.audience-privacy { margin: 0; color: var(--muted); font-size: .9rem; }
.audience-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.audience-status { max-width: 680px; margin: 3rem auto; text-align: center; }
.audience-status--success { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
@media (max-width: 760px) { .audience-layout { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Walkthrough requests reuse the signup layout, not its newsletter consent or storage. */
.walkthrough-form select, .walkthrough-form textarea { width: 100%; min-width: 0; padding: .82rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.walkthrough-form textarea { resize: vertical; }
.walkthrough-form select:focus, .walkthrough-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.walkthrough-page .audience-form, .walkthrough-page .audience-status { min-width: 0; border: 1px solid var(--line); box-shadow: var(--shadow); }
.walkthrough-form input { min-width: 0; }
.walkthrough-form .field-row > label { flex: 1; min-width: 0; }
.walkthrough-page button:disabled { cursor: not-allowed; }
.walkthrough-page .validation-summary-valid { display: none; }

/* ── Worker tutorial (/WorkerTutorial) ─────────────────────────────────────
   A step-by-step build page with one real-app clip at the top. The clip is a
   silent autoplay loop with no controls, so nothing ever covers the app. */
.worker-tutorial__frame {
    margin: 32px auto 0;
    /* Near 1:1 with the 1320px-wide capture, so the app UI inside it stays
       readable. Narrowing this is what made the first cut illegible. */
    max-width: 1200px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(20, 37, 63, 0.14);
}

.worker-tutorial__frame video {
    display: block;
    width: 100%;
    /* Matches the rendered frame (1320x960). The frame already reserves clear
       space below the app image, so native controls never cover the product. */
    aspect-ratio: 1320 / 960;
    object-fit: contain;
    border-radius: 10px;
    background: #f4f5f2;
}

.worker-tutorial__frame figcaption {
    padding: 10px 4px 2px;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.worker-tutorial__card,
.worker-tutorial__note {
    margin-top: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.worker-tutorial__note {
    margin-top: 16px;
    padding: 20px;
    background: rgba(140, 163, 145, 0.08);
}

.worker-tutorial__quote {
    margin: 12px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--accent);
    background: rgba(67, 85, 74, 0.08);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 16px;
}

/* The standing-instructions block is authored as literal text the reader
   copies, so its line breaks have to survive. */
.worker-tutorial__quote--long {
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: auto;
}

.worker-tutorial__list {
    margin: 8px 0 16px 18px;
    line-height: 1.8;
}

.worker-tutorial__cycle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.worker-tutorial__step {
    position: relative;
    margin: 0;
    padding: 24px 20px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.worker-tutorial__step h3 {
    margin: 10px 0 8px;
    font-size: 1.02rem;
}

.worker-tutorial__step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.worker-tutorial__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

@media (max-width: 760px) {
    .worker-tutorial__frame { padding: 6px; border-radius: 12px; }
    .worker-tutorial__card,
    .worker-tutorial__note { padding: 20px; }
    .worker-tutorial__quote--long { font-size: 14px; }
}

/* ── Tutorial menu (/tutorials) ────────────────────────────────────────────
   Cards come from Services/TutorialCatalog.cs. The shot is the finished work,
   captured from the real app by the tutorial's own recording generator, so it
   cannot drift from the video. */
.tutorial-grid {
    display: grid;
    /* Two across on a desktop container. Narrower columns would shrink the app
       screenshot past the point where it reads as anything. */
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.tutorial-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.tutorial-card__shot {
    display: block;
    background: #eceee9;
    border-bottom: 1px solid var(--line);
}

.tutorial-card__shot img {
    display: block;
    width: 100%;
    height: auto;
    /* Matches the app-capture ratio, so a screenshot recorded by a tutorial's
       generator shows whole rather than cropped down to its title bar. Cards
       still line up when a future tutorial captures something squarer. */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.tutorial-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
}

.tutorial-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.tutorial-card__level {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
}

.tutorial-card__length { color: var(--muted); }

.tutorial-card h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.tutorial-card h2 a {
    color: inherit;
    text-decoration: none;
}

.tutorial-card h2 a:hover,
.tutorial-card h2 a:focus-visible { text-decoration: underline; }

.tutorial-card__summary {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.tutorial-card__outcome {
    margin: 0;
    padding: 12px 14px;
    border-left: 4px solid var(--accent);
    background: rgba(67, 85, 74, 0.08);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.93rem;
    line-height: 1.5;
}

.tutorial-card .button { margin-top: 6px; align-self: flex-start; }

.tutorial-index__note { margin-top: 32px; padding: 28px; }

.tutorial-index__list {
    margin: 12px 0 16px 18px;
    line-height: 1.8;
}

/* Back link on a tutorial page, above the title. */
.tutorial-back {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.tutorial-shortcut {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

@media (max-width: 900px) {
    .tutorial-grid { grid-template-columns: 1fr; gap: 18px; }
    .tutorial-card__body { padding: 18px 18px 20px; }
    .tutorial-index__note { padding: 20px; }
}

/* ── Learn page: tutorials lead, agent-maintained topics follow ───────────── */
/* Both sit under the manifest's own <h1>, so they are section headings, not a
   second and third hero. Left at default size they stack three display-scale
   headlines before any content appears. */
.learn-lede { margin-top: 36px; }
.learn-rest { margin-top: 64px; }

.learn-lede h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.1rem);
    line-height: 1.15;
}

.learn-rest h2 {
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    line-height: 1.2;
}

.learn-lede .tagline,
.learn-rest p {
    margin-top: 10px;
}

.learn-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

/* Deliberately small: these are categories to browse, not the main event. */
.learn-topic-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 14px);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease;
}

.learn-topic-card:hover,
.learn-topic-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.learn-topic-card__title {
    font-weight: 700;
    font-size: 1rem;
}

.learn-topic-card__copy {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .learn-topic-grid { grid-template-columns: 1fr; }
}