/* ==========================================================================
   Arepo landing page (frontend/index.html)
   Design system: see .gauntlet/landing-parity/WORKBENCH.md "Design system".

   Scene: an ops lead at a 120-person company, mid-morning at a desk in a
   bright office, flicking between vendor tabs between Slack pings, deciding
   in under a minute whether this one is serious enough to forward to IT.
   -> light by default, dark as a deliberate evening variant.

   Colour reference: Pompeian fresco. Limestone ground, paper sheet, warm
   ink, one cinnabar signal. The name comes from the Sator square found at
   Pompeii, so the palette is borrowed from the same walls.

   Sections are organised in commented blocks:  /* === name === * /
   tokens, base, type, buttons, frame, nav, hero, hero-stage, section-head, channels,
   features, how, security, pricing, pricing-compare, faq, cta, footer, ribbon, modal, klaro, motion

   The square is a quiet undercurrent, carried by geometry, never by its letters: the hero
   plaster is ruled into a 5x5 hairline grid, the channel map's five lines meet at one small
   5x5 dot mark (AREPO row in signal), every section opens on a hairline ending in five dots
   with that section's dot marked (1 to 5 down the page), and one caption-size line in the
   footer tells where the name comes from.
   ========================================================================== */

/* === tokens === */
:root {
    /* neutrals, tinted toward the warm hue (h 45-75) */
    --ground:      oklch(0.925 0.009 70);   /* limestone page ground */
    --ground-2:    oklch(0.895 0.011 68);
    --paper:       oklch(0.992 0.003 75);   /* the sheet */
    --surface:     oklch(0.972 0.005 70);   /* quiet inset panel */
    --surface-2:   oklch(0.948 0.007 70);
    --ink:         oklch(0.215 0.014 45);   /* primary text */
    --ink-2:       oklch(0.395 0.014 50);   /* secondary text */
    --ink-3:       oklch(0.485 0.012 55);   /* tertiary text, still >= 4.5:1 on ground */
    --line:        oklch(0.885 0.008 70);   /* hairlines */
    --line-strong: oklch(0.78 0.011 65);    /* outline buttons, inputs */

    /* signal: cinnabar. Used sparingly: primary actions, the mark, citations. */
    --signal:       oklch(0.545 0.185 32);
    --signal-hover: oklch(0.485 0.17 31);
    --on-signal:    oklch(0.992 0.003 75);
    --signal-ink:   oklch(0.5 0.17 32);     /* signal as text on paper */
    --signal-tint:  oklch(0.955 0.025 45);

    /* plaster: the flat Pompeian ochre plane (hero stage, the channel-map mark). The hero
       plaster is ruled into a 5x5 grid in --plaster-line, kept under 1.5:1 so it reads as
       structure. The channel-map mark is 25 dots in --mark-dot, the AREPO row in --signal. */
    --plaster:       oklch(0.845 0.098 80);
    --plaster-line:  oklch(0.79 0.104 76);
    --mark-dot:      oklch(0.42 0.06 45);
    /* closing CTA: a flat Pompeian red wall (pigment moment 2 of 2) */
    --cta-wall:        oklch(0.485 0.152 31);
    --cta-on:          oklch(0.985 0.006 75);   /* text on the wall */
    --cta-on-2:        oklch(0.95 0.022 62);
    --cta-line:        oklch(0.985 0.006 75 / 0.5);
    --cta-wash:        oklch(0.985 0.006 75 / 0.1);
    --cta-band:        oklch(0.2 0.02 35);      /* text on the light button */
    --highlight:    oklch(0.9 0.1 88);      /* ::selection */
    --on-highlight: oklch(0.215 0.014 45);

    --focus: oklch(0.545 0.185 32);
    --shadow-sheet: 0 1px 0 oklch(0.8 0.01 65 / 0.6);
    --shadow-float: 0 1px 2px oklch(0.3 0.03 40 / 0.08), 0 18px 48px -18px oklch(0.3 0.06 38 / 0.45);
    --shadow-pop:   0 1px 2px oklch(0.3 0.03 40 / 0.1), 0 10px 30px -12px oklch(0.3 0.05 38 / 0.35);

    /* type */
    --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-display: clamp(2.75rem, 1.05rem + 5.4vw, 6.25rem);
    --fs-h2:      clamp(2.125rem, 1.35rem + 2.6vw, 3.75rem);
    --fs-h3:      clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
    /* larger h3 step: feature rows, plan names, the rollout head. Kept at >= 1.5x
       below --fs-h2 on phones so the two levels never read as one. */
    --fs-h3-lg:   clamp(1.375rem, 0.95rem + 1.2vw, 2.125rem);
    --fs-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
    --fs-body:    1rem;
    --fs-sm:      0.9375rem;
    --fs-xs:      0.8125rem;

    /* space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(3rem, 1.5rem + 3.7vw, 5rem);
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
    --frame: clamp(0px, -1.4rem + 3.4vw, 1.5rem);   /* ground visible around the sheet */
    --container: 1240px;

    /* radius */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-sheet: clamp(16px, 1.2rem + 0.6vw, 28px);
    --r-pill: 999px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 68px;

    /* legacy aliases (utils.css, version-stamp, anything not yet migrated) */
    --bg-primary: var(--paper);
    --bg-secondary: var(--surface);
    --bg-tertiary: var(--surface-2);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-3);
    --accent-primary: var(--signal);
    --accent-secondary: var(--signal-hover);
    --accent-text: var(--on-signal);
    --border: var(--line);
    --success: oklch(0.52 0.13 150);
    --warning: oklch(0.5 0.12 70);
    --error: oklch(0.53 0.19 27);
    --radius-sm: var(--r-xs);
    --radius-md: var(--r-sm);
    --radius-lg: var(--r-md);

    color-scheme: light;
}

[data-theme="dark"] {
    --ground:      oklch(0.155 0.008 45);   /* volcanic ash */
    --ground-2:    oklch(0.19 0.009 45);
    --paper:       oklch(0.2 0.009 45);
    --surface:     oklch(0.232 0.01 45);
    --surface-2:   oklch(0.268 0.011 45);
    --ink:         oklch(0.945 0.008 70);
    --ink-2:       oklch(0.815 0.01 68);
    --ink-3:       oklch(0.7 0.012 65);
    --line:        oklch(0.31 0.01 45);
    --line-strong: oklch(0.43 0.012 50);

    --signal:       oklch(0.68 0.165 36);
    --signal-hover: oklch(0.74 0.15 38);
    --on-signal:    oklch(0.17 0.012 40);
    --signal-ink:   oklch(0.76 0.135 40);
    --signal-tint:  oklch(0.28 0.04 35);

    --plaster:       oklch(0.37 0.058 66);
    --plaster-line:  oklch(0.435 0.062 68);
    --mark-dot:      oklch(0.8 0.06 75);
    --cta-wall:        oklch(0.375 0.112 30);
    --cta-on:          oklch(0.955 0.01 70);
    --cta-on-2:        oklch(0.88 0.03 62);
    --cta-line:        oklch(0.955 0.01 70 / 0.45);
    --cta-wash:        oklch(0.955 0.01 70 / 0.1);
    --cta-band:        oklch(0.15 0.012 40);
    --highlight:    oklch(0.83 0.11 86);
    --on-highlight: oklch(0.2 0.012 45);

    --focus: oklch(0.76 0.135 40);
    --shadow-sheet: 0 0 0 1px oklch(0.27 0.01 45);
    --shadow-float: 0 1px 0 oklch(0.4 0.012 50 / 0.5) inset, 0 24px 56px -20px oklch(0.05 0.01 40 / 0.85);
    --shadow-pop:   0 1px 0 oklch(0.4 0.012 50 / 0.5) inset, 0 14px 36px -14px oklch(0.05 0.01 40 / 0.8);

    --success: oklch(0.74 0.13 150);
    --warning: oklch(0.8 0.12 80);
    --error: oklch(0.72 0.16 27);

    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

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

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

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

::selection {
    background: var(--highlight);
    color: var(--on-highlight);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink);
}

/* === type === */
h1,
h2,
h3 {
    font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;   /* = --font-display */
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
}

h1 {
    letter-spacing: -0.045em;
    line-height: 0.96;
}

h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.035em;
    line-height: 1.02;
}

h3 {
    font-size: var(--fs-h3);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h4,
h5,
h6 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}

p {
    text-wrap: pretty;
}

/* === buttons === */
/* .btn + one of: .btn-primary (signal), .btn-secondary (outline), .btn-ink (solid ink).
   Sizes: default 44px, .btn-lg 52px, .btn-sm 38px. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.btn:active {
    transform: translateY(1px);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-lg {
    min-height: 52px;
    padding: 0 1.625rem;
    font-size: 1rem;
    border-radius: var(--r-sm);
}

.btn-sm {
    min-height: 38px;
    padding: 0 0.95rem;
    font-size: 0.875rem;
    border-radius: 9px;
}

.btn-primary {
    background: var(--signal);
    color: var(--on-signal);
}

.btn-primary:hover {
    background: var(--signal-hover);
}

.btn-secondary,
.btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-secondary:hover,
.btn-outline:hover {
    border-color: var(--ink);
    background: var(--surface);
}

.btn-ink {
    background: var(--ink);
    color: var(--paper);
}

.btn-ink:hover {
    background: var(--ink-2);
}

/* text link with a drawn underline */
.link {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.link:hover {
    text-decoration-color: var(--signal);
}

/* === frame === */
/* The page is a paper sheet on a limestone ground. <nav> and <footer> sit on
   the ground; <main> is the sheet. Sections inside the sheet stay transparent. */
main#hero-content {
    display: flow-root;   /* keeps the last section's margin inside the sheet */
    margin: 0 var(--frame);
    /* sections pad their tops only; this closes the sheet under the last one */
    padding-bottom: calc(var(--section-y) * 0.6);
    background: var(--paper);
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-sheet);
    overflow: clip;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* === nav === */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--ground);
}

.nav-container {
    height: var(--nav-h);
    max-width: calc(var(--container) + 2 * var(--gutter) + 2 * var(--frame));
    margin: 0 auto;
    padding: 0 calc(var(--gutter) + var(--frame));
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.75rem);
    position: relative;
}

.logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
}

.logo-word {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    padding-bottom: 2px;
}

#header-version {
    display: inline-flex;
    align-items: center;
}

#header-version:empty {
    display: none;
}

.logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--signal);
    color: var(--on-signal);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.logo-mark svg {
    width: 100%;
    height: 100%;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.nav-links a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 0.4rem 0;
    transition: color 0.15s var(--ease-out);
}

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

/* the section in view (index.js observeNavSections) */
.nav-links a[aria-current="true"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.45em;
}

.nav-links .nav-login-mobile {
    display: none;
}

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

.nav-login {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0.625rem;
    border-radius: var(--r-xs);
}

.nav-login:hover {
    background: var(--ground-2);
}

.theme-toggle {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.theme-toggle:hover {
    background: var(--ground-2);
    color: var(--ink);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    color: var(--ink);
    cursor: pointer;
}

.menu-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 10px;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s var(--ease-out), top 0s;
}

.menu-icon::before { top: 0; }
.menu-icon::after { top: calc(100% - 1.6px); }

.mobile-menu-toggle[aria-expanded="true"] .menu-icon::before {
    transform: translateY(4.2px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .menu-icon::after {
    transform: translateY(-4.2px) rotate(-45deg);
}

@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: inline-grid;
    }

    .nav-login {
        display: none;
    }

    .nav-links {
        position: absolute;
        top: calc(100% - 4px);
        left: calc(var(--frame) + 12px);
        right: calc(var(--frame) + 12px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-pop);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
    }

    .nav-links.mobile-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s;
    }

    .nav-links a {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--ink);
        padding: 0.85rem 0.9rem;
        border-radius: var(--r-sm);
    }

    .nav-links a:hover,
    .nav-links a[aria-current="true"] {
        background: var(--surface);
    }

    .nav-links a[aria-current="true"] {
        text-decoration: none;
    }

    .nav-links .nav-login-mobile {
        display: block;
        margin-top: 0.25rem;
        border-top: 1px solid var(--line);
        border-radius: 0 0 var(--r-sm) var(--r-sm);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 500;
        color: var(--ink-2);
    }
}

@media (max-width: 420px) {
    .nav-actions {
        gap: 0.25rem;
    }
}

@media (max-width: 640px) {
    .nav-cta.btn-sm {
        min-height: 44px;
    }
}

/* === hero === */
/* Spacing is set so the product stage shows in the first fold: at 1440x900 at
   least 40% of #demo, at 390x844 the stage starts right under the buttons. */
.hero {
    padding-top: clamp(2.25rem, 0.75rem + 3.8vw, 4.5rem);
    padding-bottom: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.hero-inner {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hero-title {
    font-size: var(--fs-display);
    max-width: 21ch;
    margin-bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
}

.hero-row {
    display: grid;
    justify-items: start;
    gap: clamp(1.25rem, 0.875rem + 1vw, 2rem);
    padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
}

.hero-lede {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.5rem;
}

.hero-buttons {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.hero-note {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

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

@media (max-width: 860px) {
    .hero-row {
        justify-items: stretch;
        gap: var(--space-5);
    }

    .hero-actions {
        display: grid;
        justify-items: stretch;
    }

    /* side by side while both labels fit, stacked on the narrowest phones */
    .hero-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
        gap: 0.625rem;
    }

    .hero-buttons .btn {
        width: 100%;
        padding-inline: 1rem;
    }

    .hero-note {
        text-align: center;
    }
}

/* === hero-stage === */
/* The product surface. Inside: a channel window (#chat-messages, shipped with the
   first exchange in the HTML; #demo-play; #demo-question, #demo-send) and a
   knowledge-base card that index.js keeps in sync. The channel list lives in the
   proof band below. */
.hero-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto;
    align-items: start;
    column-gap: 0;
    row-gap: var(--space-5);
    /* --edge: the band of plaster around the window and the card, where the grid shows */
    --edge: clamp(2.5rem, 1.1rem + 2.6vw, 3.875rem);
    padding: var(--edge);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--plaster);
}

/* The plaster ruled into a 5x5 grid: the Sator square's geometry without its letters.
   Hairlines one step off the plaster (under 1.5:1), so they read as structure, not
   decoration; the window and the card sit over the middle, the grid shows in the margin. */
.stage-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: none;
    stroke: var(--plaster-line);
    stroke-width: 1px;
}

.stage-grid path {
    vector-effect: non-scaling-stroke;
}

/* channel window */
.stage-window {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    height: clamp(480px, 33.5vw, 500px);
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.window-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.125rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.window-channel {
    display: flex;
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.window-hash {
    color: var(--ink-3);
    font-weight: 500;
}

.window-meta {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* pause / play for the autoplaying demo (WCAG 2.2.2); index.js unhides it */
.window-play {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* a 44px target; the pill it draws is the ::before, 28px tall */
    min-height: 44px;
    margin-block: -8px;
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    isolation: isolate;
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.window-play::before {
    content: '';
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: border-color 0.15s var(--ease-out);
}

.window-play[hidden] {
    display: none;
}

.window-play:hover {
    color: var(--ink);
}

.window-play:hover::before {
    border-color: var(--line-strong);
}

.window-play svg {
    width: 12px;
    height: 12px;
}

.window-play .icon-pause {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.window-play .icon-play {
    display: none;
    fill: currentColor;
}

.window-play.is-paused .icon-pause {
    display: none;
}

.window-play.is-paused .icon-play {
    display: block;
}

.window-play:not([hidden]) + .window-via {
    margin-left: 0;
}

/* the narrowest phones: icon only (its aria-label still names it) */
@media (max-width: 359px) {
    .window-play {
        padding-inline: 0.5rem;
    }

    .window-play-label {
        display: none;
    }
}

.window-via {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

.window-via::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

/* The scroller is column-reverse around one .chat-thread, so the thread sits on the
   composer like a real channel and opens scrolled to the newest message, with or
   without JS; earlier messages stay reachable by scrolling up. */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 3.5rem 0.5rem 1.125rem;   /* right gutter: the source card overlaps it on desktop */
    display: flex;
    flex-direction: column-reverse;
    scrollbar-width: thin;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* earlier messages scroll up under the channel header and fade out there */
.chat-messages {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
}

/* shipped in the HTML (the first exchange and the one above it): no entry animation */
.chat-message.is-history,
.chat-message.is-seed {
    animation: none;
}

.chat-message {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    animation: msgIn 0.45s var(--ease-out) both;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.msg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    background: var(--surface-2);
    color: var(--ink-2);
    overflow: hidden;
}

.message-bot .msg-avatar {
    background: var(--signal);
    color: var(--on-signal);
}

.msg-avatar svg {
    width: 100%;
    height: 100%;
}

.msg-body {
    min-width: 0;
}

.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.msg-author {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--ink);
}

.msg-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: 4px;
    padding: 0 0.3rem;
}

.msg-time {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.message-bubble {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink);
    overflow-wrap: anywhere;   /* a pasted URL or a long unbroken string cannot push the bubble wide */
}

.msg-text {
    white-space: pre-line;
}

/* @Arepo at the start of each question: in a channel the bot answers only when mentioned */
.msg-mention {
    padding: 0 0.2em;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
}

/* the day divider the thread opens under (Slack draws one per day) */
.chat-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-3);
}

.chat-day::before,
.chat-day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* the citation under every answer: the same shape the bots post
   ("Sources:" then "1. filename"), set as file rows */
.message-source {
    margin-top: 0.625rem;
    max-width: 100%;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--ink-2);
}

.message-source .source-label {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.35rem;
}

.source-list {
    list-style: none;
    counter-reset: src;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.source-list li {
    counter-increment: src;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface);
}

.source-list li::before {
    content: counter(src) ".";
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.source-list svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--signal-ink);
}

.source-name {
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
    min-width: 0;
}

.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 0.55rem 0 0.35rem;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: typing 1.2s var(--ease-out) infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.demo-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0.875rem 0.625rem;
    padding: 0.25rem 0.25rem 0.25rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    flex-shrink: 0;
    transition: border-color 0.15s var(--ease-out);
}

.demo-input:focus-within {
    border-color: var(--ink);
}

.demo-input input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--ink);
    padding: 0.5rem 0;
}

.demo-input input:focus {
    outline: none;
}

.demo-input input::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.demo-input button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--signal);
    color: var(--on-signal);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out);
}

.demo-input button:hover:not(:disabled) {
    background: var(--signal-hover);
}

.demo-input button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.demo-input button svg {
    width: 16px;
    height: 16px;
}

/* suggested questions under the input; the last one is a question the samples cannot
   answer, so the visitor sees the decline */
.demo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 0.875rem 0.875rem;
    flex-shrink: 0;
}

.demo-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}

.demo-chip:hover {
    border-color: var(--line-strong);
    background: var(--paper);
    color: var(--ink);
}

@media (pointer: coarse), (max-width: 640px) {
    .demo-chip {
        min-height: 44px;
        padding-inline: 0.875rem;
    }
}

/* the deliberate test: dashed, so it reads as "try this one" rather than a fourth topic */
.demo-chip-test {
    border-style: dashed;
    border-color: var(--line-strong);
    background: transparent;
}

/* phones: two rows of two, so no label is cut mid-word */
@media (max-width: 520px) {
    .demo-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.375rem;
        padding-inline: 0.75rem;
    }

    .demo-chip {
        justify-content: center;
        padding-inline: 0.5rem;
    }
}

/* knowledge-base card: the documents behind the channel. index.js puts
   .is-cited on the rows the latest answer listed as sources. */
.stage-source {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: clamp(2rem, 4vw, 3.75rem);
    margin-left: -2.5rem;
    position: relative;
    z-index: 2;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.kb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.kb-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.kb-sub {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.kb-count {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
}

.kb-list {
    list-style: none;
    padding: 0.375rem;
}

.kb-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.7rem;
    align-items: center;
    padding: 0.42rem 0.625rem;
    border-radius: var(--r-sm);
    transition: background-color 0.35s var(--ease-out);
}

.kb-list li + li {
    margin-top: 1px;
}

.kb-icon {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-2);
    transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.kb-icon svg {
    width: 16px;
    height: 16px;
}

.kb-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-meta {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--ink-3);
    line-height: 1.3;
}

.kb-state {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 0.75rem;
    font-weight: 600;
}

.kb-ready {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink-3);
}

.kb-ready::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.kb-cited {
    display: none;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--signal);
    color: var(--on-signal);
}

.kb-list li.is-cited {
    background: var(--surface);
}

.kb-list li.is-cited .kb-icon {
    background: var(--signal-tint);
    color: var(--signal-ink);
}

.kb-list li.is-cited .kb-ready {
    display: none;
}

.kb-list li.is-cited .kb-cited {
    display: inline-block;
}

/* between the stacked layout and wide desktop the window is too narrow to
   tuck the card over its edge without covering the channel chip */
@media (min-width: 861px) and (max-width: 1180px) {
    .stage-source {
        margin-left: 1rem;
    }

    .chat-messages {
        padding-right: 1.125rem;
    }
}

@media (max-width: 520px) {
    .chat-message {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 0.625rem;
    }

    .msg-avatar {
        width: 30px;
        height: 30px;
    }

    .source-list {
        display: grid;
        justify-items: start;
    }

    .source-list svg {
        display: none;
    }

    .source-list li {
        font-size: 0.75rem;
    }

    .kb-meta,
    .kb-sub {
        display: none;
    }

    .kb-icon {
        grid-row: 1;
        width: 28px;
        height: 28px;
    }

    .kb-state {
        grid-row: 1;
    }
}

@media (max-width: 860px) {
    .hero-stage {
        --edge: 1.5rem;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        row-gap: 0;
        border-radius: var(--r-md);
    }

    .stage-window {
        grid-column: 1;
        grid-row: 1;
        height: 500px;
    }

    .chat-messages {
        padding-right: 1rem;
    }

    .window-meta {
        display: none;
    }

    .stage-source {
        grid-column: 1;
        grid-row: 2;
        margin: 0.75rem 0 0 0.5rem;
    }

    .kb-list li {
        padding: 0.45rem 0.5rem;
    }
}

/* phones: room for the second row of chips */
@media (max-width: 520px) {
    .stage-window {
        height: 580px;
    }
}

/* === section-head === */
/* Sections are padded at the top only. Each opens on a course line: a hairline that ends in
   five small dots with that section's dot in signal (channels 1, how 2, security 3,
   pricing 4, FAQ 5). The feature rows continue the
   channel section, so they have no course or header of their own. The headers vary by
   section: stacked over a map (channels), a side column beside a runbook (how), heading
   beside facts (security), the h2-left/sentence-right split (.section-header, pricing
   only) and a sticky side head (FAQ). No kickers, no accent words. */
.channels,
.how-it-works,
.faq,
.pricing {
    padding: var(--section-y) var(--gutter) 0;
}

.features {
    padding: clamp(3rem, 1.75rem + 2.6vw, 4.25rem) var(--gutter) 0;
}

/* the line takes 1px of the flow and ends in a row of five dots (the square's five rows),
   that section's dot in signal: channels 1, how 2, security 3, pricing 4, FAQ 5 */
.course {
    position: relative;
    max-width: var(--container);
    height: 1px;
    margin: 0 auto clamp(2rem, 1.5rem + 1.6vw, 3rem);
}

.course::before {
    content: '';
    position: absolute;
    left: 0;
    right: calc(1.5rem + var(--space-3));
    top: 0;
    height: 1px;
    background: var(--line);
}

.course-mark {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
}

.course-mark i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--line-strong);
}

.course-mark[data-row="1"] i:nth-child(1),
.course-mark[data-row="2"] i:nth-child(2),
.course-mark[data-row="3"] i:nth-child(3),
.course-mark[data-row="4"] i:nth-child(4),
.course-mark[data-row="5"] i:nth-child(5) {
    background: var(--signal-ink);
}

.sec-head {
    max-width: var(--container);
    margin: 0 auto clamp(2rem, 1.25rem + 2.2vw, 3rem);
}

.sec-head h2 {
    max-width: 20ch;
}

.sec-head p {
    margin-top: var(--space-4);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 66ch;
}

.section-header {
    max-width: var(--container);
    margin: 0 auto clamp(2rem, 1.25rem + 2.2vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-5) clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.section-header h2 {
    max-width: 16ch;
}

.section-header p {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 44ch;
}

@media (max-width: 860px) {
    .section-header {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* === channels === */
/* One knowledge base behind every channel. Channels on the left; their five lines meet at
   one small mark (the square's 5x5 geometry as dots, AREPO row in signal); one line leaves
   it for a bracket around all five sample documents, so no channel pairs with one file. */
.square-map {
    --cell: clamp(3.25rem, 2.3rem + 1.6vw, 3.75rem);
    --sq-pad: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem);
    --stub: clamp(3rem, 1rem + 4.6vw, 6.5rem);
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-3);
}

.sm-label {
    grid-row: 1;
    align-self: end;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.sm-label-ch { grid-column: 1; }
.sm-label-docs { grid-column: 3; }

.sm-channels,
.sm-docs {
    grid-row: 2;
    list-style: none;
    display: grid;
    grid-template-rows: repeat(5, var(--cell));
    padding-block: var(--sq-pad);
    border-top: 1px solid var(--line-strong);
}

.sm-channels { grid-column: 1; }
.sm-docs { grid-column: 3; }

.sm-channels li,
.sm-docs li {
    position: relative;
    display: grid;
    align-items: center;
    column-gap: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.sm-channels li {
    grid-template-columns: 1.625rem minmax(0, 1fr) auto;
}

.sm-docs li {
    grid-template-columns: 1rem minmax(0, 1fr);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.sm-docs li span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-docs svg {
    width: 16px;
    height: 16px;
    fill: none;
    color: var(--ink-2);
}

.sm-mark {
    width: 22px;
    height: 22px;
    fill: var(--ink);
}

.sm-name {
    display: grid;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ink);
}

.sm-name small {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-3);
}

/* which plan a channel starts on (service/src/utils/tier-limits.ts) */
.plan-tag {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-2);
    white-space: nowrap;
}

.plan-tag.is-all {
    border-color: transparent;
    background: var(--surface-2);
    color: var(--ink);
}

/* the hub: fan in, the mark, one line out to the bracket around the documents. It has the
   lists' padding and top rule, so the fan's five ends meet the five channel rows. */
.sm-hub {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: var(--stub) auto var(--stub);
    grid-template-rows: minmax(0, 1fr);
    /* exactly the lists' height (five rows, padding, top rule), so the fans' ends land on
       the row centres; the fans' own viewBox must not size the row */
    height: calc(5 * var(--cell) + 2 * var(--sq-pad) + 1px);
    align-items: center;
    margin: 0;
    padding-block: var(--sq-pad);
    border-top: 1px solid transparent;
}

.sm-fan {
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1px;
}

.sm-fan path {
    vector-effect: non-scaling-stroke;
}

.sm-kb {
    position: relative;
    margin-inline: var(--space-2);
}

.sm-dots {
    display: grid;
    grid-template-columns: repeat(5, 8px);
    grid-auto-rows: 8px;
    gap: 12px;
    padding: 12px;
    border-radius: var(--r-sm);
    background: var(--plaster);
}

.sm-dots i {
    border-radius: 50%;
    background: var(--mark-dot);
}

.sm-dots .is-arepo {
    background: var(--signal);
}

/* under the mark, out of the flow so the fan stays centred on the tile */
.sm-kb figcaption {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    width: 13rem;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    line-height: 1.45;
    text-align: center;
    color: var(--ink-3);
}

.channels-early {
    max-width: var(--container);
    margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.channels-early b {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.channels-early .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* narrower desktops: the tag drops under the channel name */
@media (max-width: 1180px) {
    .sm-channels li {
        grid-template-columns: 1.625rem minmax(0, 1fr);
    }

    .sm-channels .plan-tag {
        grid-column: 2;
        justify-self: start;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink-2);
    }

    .sm-name {
        font-size: 1rem;
    }
}

/* one column: the channels, the mark with its caption, then the documents as chips */
@media (max-width: 860px) {
    .square-map {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 0;
    }

    .sm-label-ch { grid-column: 1; grid-row: 1; margin-bottom: var(--space-3); }
    .sm-channels { grid-column: 1; grid-row: 2; }
    .sm-hub { grid-column: 1; grid-row: 3; }
    .sm-label-docs { grid-column: 1; grid-row: 4; margin: 0 0 var(--space-3); }
    .sm-docs { grid-column: 1; grid-row: 5; }

    .sm-hub {
        display: block;
        height: auto;
        padding-block: var(--space-6);
        border: 0;
    }

    .sm-fan {
        display: none;
    }

    .sm-kb {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin: 0;
    }

    .sm-dots {
        grid-template-columns: repeat(5, 6px);
        grid-auto-rows: 6px;
        gap: 8px;
        padding: 10px;
        flex-shrink: 0;
    }

    .sm-kb figcaption {
        position: static;
        width: auto;
        transform: none;
        text-align: left;
    }

    .sm-channels {
        grid-template-rows: none;
        padding-block: 0;
    }

    .sm-channels li {
        grid-template-columns: 1.625rem minmax(0, 1fr) auto;
        padding-block: 0.7rem;
    }

    .sm-channels .plan-tag {
        grid-column: 3;
        justify-self: end;
        padding: 0.2rem 0.6rem;
        border: 1px solid var(--line-strong);
    }

    .sm-channels .plan-tag.is-all {
        border-color: transparent;
        background: var(--surface-2);
    }

    .sm-docs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0;
        border: 0;
    }

    .sm-docs li {
        display: inline-flex;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem 0.3rem 0.45rem;
        border: 1px solid var(--line);
        border-radius: var(--r-xs);
        background: var(--surface);
        font-size: var(--fs-xs);
    }

    .channels-early span {
        flex-basis: 100%;
        order: 1;
    }

    .channels-early b {
        flex-basis: 100%;
        margin-bottom: 0.2rem;
    }

    .channels-early .link {
        order: 2;
    }
}

/* === features === */
/* Three rows. Rows 1 and 2 alternate copy and a product fragment in a quiet inset panel
   (row 1 puts the fragment on the left); row 3 is wide: copy across the top, then the
   widget and the Slack post it raised side by side. Fragment classes are prefixed fx-;
   they reuse the hero's vocabulary (paper cards, hairline heads, chips, "Sources:" +
   numbered filenames). */
.fx-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.feature-rows {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    gap: clamp(2.75rem, 1.25rem + 2.6vw, 3.75rem);
}

.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 0.5rem + 5vw, 6rem);
    align-items: stretch;
}

.feature-row:nth-child(odd) .feature-visual {
    order: -1;
}

.feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
}

.feature-copy h3 {
    font-size: var(--fs-h3-lg);
    letter-spacing: -0.032em;
    line-height: 1.08;
    max-width: 24ch;
}

.feature-intro p {
    margin-top: var(--space-4);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 46ch;
}

.feature-intro p b {
    font-weight: 600;
    color: var(--ink);
}

.feature-points {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    margin-bottom: var(--space-5);
}

.feature-points li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 0.75rem;
    max-width: 52ch;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-2);
}

.feature-points svg {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-points b {
    font-weight: 600;
    color: var(--ink);
}

/* Row 2: the content modes as a ruled term list instead of icon bullets */
.feature-modes {
    display: grid;
    max-width: 60ch;
    border-top: 1px solid var(--line);
}

.feature-modes > div {
    display: grid;
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
    column-gap: var(--space-5);
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
}

.feature-modes dt {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}

.feature-modes dd {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-2);
}

@media (max-width: 1100px) {
    .feature-modes > div {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.2rem;
    }
}

/* Row 3: two short answers side by side, split by a hairline */
.feature-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 52ch;
}

.feature-pair > div + div {
    padding-left: var(--space-5);
    margin-left: var(--space-5);
    border-left: 1px solid var(--line);
}

.feature-pair dt {
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.feature-pair dd {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-2);
}

@media (max-width: 600px) {
    .feature-pair {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-4);
    }

    .feature-pair > div + div {
        padding: var(--space-4) 0 0;
        margin: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

/* the inset panel that holds each fragment */
.feature-visual {
    position: relative;
    margin: 0;
    min-height: clamp(20rem, 12rem + 13vw, 26rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 0.5rem + 1.6vw, 1.875rem);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink);
}

[data-theme="dark"] .feature-visual {
    background: var(--ground);
}

.feature-visual svg {
    display: block;
}

/* shared message parts */
.fx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink-2);
}

.fx-avatar.is-bot {
    background: var(--signal);
    color: var(--on-signal);
}

.fx-avatar svg {
    width: 100%;
    height: 100%;
}

.fx-msg {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 0.75rem;
}

.fx-msg-body {
    min-width: 0;
}

.fx-msg-body p + p {
    margin-top: 0.4rem;
}

.fx-meta {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.fx-meta b {
    font-weight: 700;
}

.fx-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: 4px;
    padding: 0 0.3rem;
}

.fx-time {
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* "Sources:" then numbered filenames, as the bots post them */
.fx-sources {
    margin-top: 0.7rem;
    font-size: var(--fs-xs);
    line-height: 1.3;
}

.fx-sources > b {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.fx-sources ol {
    list-style: none;
    counter-reset: fxsrc;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fx-sources li {
    counter-increment: fxsrc;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface);
    font-weight: 600;
}

.fx-sources li::before {
    content: counter(fxsrc) ".";
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.fx-sources.is-plain li::before {
    content: counter(fxsrc) ". ";
    white-space: pre;
}

.fx-sources li svg {
    width: 14px;
    height: 14px;
    color: var(--signal-ink);
}

/* email posts the same list as plain lines */
.fx-sources.is-plain ol {
    display: block;
}

.fx-sources.is-plain li {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 400;
    color: var(--ink-2);
}

.fx-sources.is-plain li + li {
    margin-top: 0.15rem;
}

.fx-chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-2);
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--paper);
    white-space: nowrap;
}

/* Row 1: a Discord server, cropped at the panel's right edge */
.fv-discord {
    align-items: flex-start;
    padding-right: 0;
}

.fx-app {
    width: calc(100% + 3rem);
    display: grid;
    grid-template-columns: 9.75rem minmax(0, 1fr);
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.fx-rail {
    padding: 0.875rem 0.625rem;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.fx-server {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.375rem 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.fx-server-mark {
    width: 18px;
    height: 18px;
    color: var(--ink-2);
}

.fx-rail-label {
    padding: 0 0.375rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-3);
}

.fx-channels {
    list-style: none;
    display: grid;
    gap: 1px;
}

.fx-channels li {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-channels li.is-active {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
}

.fx-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fx-pane-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 3.25rem 0.7rem 1.125rem;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.fx-via {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}

.fx-via svg {
    width: 13px;
    height: 13px;
}

.fx-hash {
    color: var(--ink-3);
    font-weight: 500;
    margin-right: 0.2rem;
}

.fx-thread {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 3.25rem 0.5rem 1.125rem;
}

.fx-thread .fx-msg + .fx-used,
.fx-thread .fx-used + .fx-msg {
    margin-top: -0.55rem;
}

.fx-used {
    position: relative;
    padding-left: 2.8rem;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.fx-used b {
    font-weight: 600;
    color: var(--ink-2);
}

.fx-used-hook {
    position: absolute;
    left: 1rem;
    top: 0.55rem;
    width: 1.4rem;
    height: 0.8rem;
    border: 1px solid var(--line-strong);
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 6px;
}

.fx-mention,
.fx-used .fx-cmd {
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-2);
    border-radius: 4px;
    padding: 0 0.2rem;
}

.fx-composer {
    margin: 0.5rem 1rem 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink-3);
}

/* Row 2: email bot settings, wired to the reply it sent */
.fx-settings {
    width: min(100%, 24rem);
    padding: 1rem 1.125rem 1.125rem;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
}

.fx-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    line-height: 1.3;
}

.fx-card-head b {
    display: block;
    font-weight: 700;
}

.fx-card-head div {
    min-width: 0;
}

.fx-card-head div span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-ch-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-2);
}

.fx-ch-icon svg {
    width: 16px;
    height: 16px;
}

.fx-field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-3);
}

.fx-segment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3px;
    padding: 3px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.fx-segment span {
    display: grid;
    place-items: center;
    padding: 0.4rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: center;
    color: var(--ink-2);
}

.fx-segment .is-on {
    background: var(--paper);
    border-color: var(--line-strong);
    color: var(--ink);
    font-weight: 600;
}


.fx-wire {
    display: block;
    width: 1px;
    height: 1.75rem;
    background: var(--line-strong);
}

.fx-mail {
    width: min(100%, 27rem);
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.fx-mail-head {
    padding: 0.95rem 1.125rem 0.8rem;
    border-bottom: 1px solid var(--line);
}

.fx-mail-subject {
    margin-bottom: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fx-mail-row {
    font-size: var(--fs-xs);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-mail-row span {
    display: inline-block;
    width: 2.75rem;
    color: var(--ink-3);
}

.fx-mail-body {
    padding: 0.95rem 1.125rem 1.1rem;
}

/* Row 3 (wide): the widget conversation, wired to the handoff request it posted in Slack */
.feature-row-wide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.feature-row-wide .feature-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 0.5rem + 5vw, 6rem);
    align-items: end;
}

.feature-row-wide .feature-pair {
    max-width: none;
}

.feature-row.feature-row-wide .feature-visual {
    order: 0;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

.feature-row-wide .fx-wire {
    width: clamp(1.5rem, 4vw, 3.5rem);
    height: 1px;
    flex-shrink: 0;
}

.feature-row-wide .fx-settings {
    align-self: center;
}

.fx-wchat {
    display: grid;
    gap: 0.5rem;
}

.fx-wmsg {
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px 12px 12px 4px;
    background: var(--surface-2);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.fx-wmsg.is-visitor {
    justify-self: end;
    border-radius: 12px 12px 4px 12px;
    background: var(--ink);
    color: var(--paper);
}

.fx-slackcard {
    width: min(100%, 27rem);
    padding: 1.125rem 1.125rem 1.2rem;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
}

.fx-slackcard p {
    margin-top: 0.4rem;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-2);
}

.fx-slackcard p b {
    color: var(--ink);
    font-weight: 700;
}

.fx-handoff-title {
    margin-top: 0.15rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.fx-transcript {
    margin-top: 0.6rem;
    font-size: var(--fs-xs);
}

.fx-transcript b {
    display: block;
    margin-bottom: 0.3rem;
}

.fx-transcript code {
    display: block;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: normal;
    color: var(--ink-2);
}

.fx-slackcard .fx-handoff-ctx {
    font-size: 0.75rem;
    color: var(--ink-3);
}

@media (max-width: 1180px) {
    .fx-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-rail {
        display: none;
    }
}

@media (max-width: 900px) {
    .feature-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-6);
    }

    .feature-row:nth-child(odd) .feature-visual {
        order: 0;
    }

    .feature-copy {
        padding-block: 0;
        gap: var(--space-6);
    }

    .feature-copy h3 {
        max-width: 20ch;
    }

    .feature-visual {
        min-height: 0;
    }

    .feature-row-wide .feature-copy {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-5);
    }

    .feature-row.feature-row-wide .feature-visual {
        flex-direction: column;
    }

    .feature-row-wide .fx-wire {
        width: 1px;
        height: 1.75rem;
    }
}

@media (max-width: 600px) {
    .feature-visual {
        padding: 1.25rem 1rem;
        border-radius: var(--r-md);
    }

    /* phones: the Discord window sits whole inside its panel, no crop */
    .fv-discord {
        padding-right: 1rem;
    }

    .fx-app {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .fx-rail {
        display: none;
    }

    .fx-thread,
    .fx-pane-bar {
        padding-right: 1rem;
    }

    /* phones: the Discord window ends after the reply (no composer) */
    .fv-discord .fx-composer {
        display: none;
    }

    /* the transcript repeats the question the widget card shows right above it */
    .fx-transcript,
    .fx-slackcard .fx-handoff-ctx {
        display: none;
    }

    /* the content modes are the ruled list right above; the reply carries the point */
    .fv-email .fx-settings,
    .fv-email .fx-wire {
        display: none;
    }

    /* the full bot address wraps instead of ending in an ellipsis */
    .fx-card-head div span,
    .fx-mail-row {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* === how === */
/* Setup and rollout as one flow in three columns: a side head, a ruled runbook of five
   steps (number, what to do, where it lives in the dashboard), and the answer people get
   once a channel is connected (a Telegram chat with the shared bot).
   <=1100px: the head goes on top, steps and chat side by side. <=760px: one column, and
   the chat drops its two activation bubbles. #docs (the old rollout anchor) is the list. */
.how-layout {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 3.3fr) minmax(0, 5fr) minmax(0, 3.9fr);
    gap: var(--space-6) clamp(2rem, 0.5rem + 3.2vw, 4rem);
    align-items: start;
}

.how-head h2 {
    max-width: 11ch;
}

.how-head p {
    margin-top: var(--space-5);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 30ch;
}

.how-head .how-help {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.how-steps {
    list-style: none;
    border-top: 1px solid var(--line-strong);
}

.how-steps li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-3);
    padding-block: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 6rem;
}

.how-n {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--signal-ink);
    font-variant-numeric: tabular-nums;
}

/* h3 with its dashboard path on the same line, the sentence under both */
.how-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-4);
}

.how-text h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-h3);
    margin-bottom: 0.3rem;
}

.how-text p {
    grid-column: 1 / -1;
}

.how-text p {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 52ch;
}

.how-text .how-where {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    padding: 0.2rem 0.7rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}

.how-where > span + span::before {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    margin: 0 0.55rem 0.1rem 0.4rem;
    border-top: 1.5px solid var(--ink-3);
    border-right: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
}

.how-then {
    margin-bottom: var(--space-3);
    padding-top: 0.2rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

/* the answer: a Telegram chat with the shared bot */
.fl-tg {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--ink);
}

.fl-tg-bar {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.fl-tg-bar .fx-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.fl-tg-name {
    display: grid;
    line-height: 1.25;
}

.fl-tg-name b {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.fl-tg-name span {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.fl-tg-via {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}

.fl-tg-via svg {
    width: 12px;
    height: 12px;
}

.fl-tg-thread {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    background: var(--surface);
}

.fl-tg-day {
    align-self: center;
    padding: 0.1rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}

.fl-bubble {
    max-width: 82%;
    padding: 0.55rem 0.75rem 0.45rem;
    border-radius: 12px 12px 12px 4px;
    background: var(--paper);
    box-shadow: 0 1px 1px oklch(0.3 0.03 40 / 0.08);
}

.fl-bubble p + p {
    margin-top: 0.35rem;
}

.fl-bubble > b {
    display: block;
    margin-bottom: 0.2rem;
}

.fl-bubble time {
    display: block;
    margin-top: 0.15rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.fl-bubble.is-out {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    background: var(--ink);
    color: var(--paper);
}

.fl-bubble.is-out time {
    color: inherit;
    opacity: 0.72;
}

.fl-cmd {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.fl-src {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
}

.fl-src b {
    display: block;
    color: var(--ink);
}

.fl-src span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--signal-ink);
}

.fl-tg-composer {
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
}

@media (max-width: 1100px) {
    .how-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .how-head {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--space-7);
        align-items: end;
    }

    .how-head h2 {
        max-width: 16ch;
        grid-row: 1 / span 2;
    }

    .how-head .how-help {
        margin-top: var(--space-3);
    }
}

@media (max-width: 760px) {
    .how-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .how-head {
        display: block;
    }

    .how-head .how-help {
        margin-top: var(--space-3);
        padding-top: 0;
        border-top: 0;
    }

    .fl-bubble.is-setup,
    .fl-tg-day {
        display: none;
    }

    /* the dashboard path goes under the sentence instead of beside the heading */
    .how-text {
        grid-template-columns: minmax(0, 1fr);
    }

    .how-text .how-where {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 0.6rem;
    }

    .fl-bubble {
        max-width: 90%;
    }

    .fl-tg-composer {
        display: none;
    }
}

/* === security === */
/* After How it works. Heading, the two contacts and three plain facts stay in view; the
   IT material (spec sheet, DPA terms, subprocessors) is one native <details> disclosure,
   "For your IT team", that opens without JS. */
.security {
    padding: var(--section-y) var(--gutter) 0;
}

.security-top,
.it-pack {
    max-width: var(--container);
    margin-inline: auto;
}

.trust-actions .link,
.subprocessors-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.it-pack {
    margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
    border-block: 1px solid var(--line-strong);
}

.it-pack summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem var(--space-5);
    min-height: 44px;
    padding-block: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
    list-style: none;
    cursor: pointer;
}

.it-pack summary::-webkit-details-marker {
    display: none;
}

.it-pack-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.it-pack-sub {
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.it-pack-body {
    padding: var(--space-4) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.it-pack .subprocessors {
    border-bottom: 0;
    padding-bottom: 0;
}

.it-pack[open] .it-pack-body {
    animation: discloseIn 0.35s var(--ease-out);
}

@media (max-width: 760px) {
    .it-pack summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .it-pack-sub {
        grid-column: 1;
        grid-row: 2;
    }

    .it-pack-icon {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* heading and facts share one top line */
.security-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-7) clamp(2rem, 6vw, 6.5rem);
    align-items: start;
}

.security-head h2 {
    max-width: 15ch;
}

.security-head p {
    margin-top: var(--space-5);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 36ch;
}

.trust-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
}

.trust-facts {
    list-style: none;
    /* line the first fact's cap height up with the h2's */
    padding-top: 0.55rem;
}

.trust-facts li + li {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.trust-facts h3 {
    font-size: var(--fs-h3);
    line-height: 1.25;
}

.trust-facts p {
    margin-top: 0.45rem;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 52ch;
}

/* spec sheet: two hairline-ruled lists. The value (a named standard or a
   written term) on the left, what it covers on the right. No tiles. */
.spec-sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) clamp(2rem, 5vw, 5rem);
}

.spec-title {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.spec {
    margin: 0;
}

.spec > div {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
    gap: 0.25rem var(--space-5);
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
}

.spec dt {
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
    color: var(--ink);
}

.spec dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-2);
}

/* named subprocessors, from the published list: the title and the link to the
   full list on one line, six named companies on a ruled row under them */
.subprocessors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-5) var(--space-7);
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding-block: var(--space-5);
    border-block: 1px solid var(--line);
}

.subprocessors-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.subprocessors-title span {
    margin-left: 0.35em;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink-3);
}

.subprocessor-list {
    grid-column: 1 / -1;
    grid-row: 2;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
}

.subprocessor-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.subprocessor-list svg {
    flex: none;
    width: 22px;
    height: 22px;
    fill: var(--ink);
}

.subprocessor-list .is-glyph svg {
    fill: var(--ink-2);
}

.subprocessor-list span {
    display: grid;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--ink-3);
    white-space: nowrap;
}

.subprocessor-list b {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.subprocessors-more {
    font-size: var(--fs-sm);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .spec > div {
        grid-template-columns: minmax(8.5rem, 9.5rem) minmax(0, 1fr);
        gap: 0.25rem var(--space-4);
    }

    .subprocessor-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: var(--space-5);
    }
}

@media (max-width: 860px) {
    .spec-sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    .security-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .trust-facts {
        padding-top: 0;
    }
}

@media (max-width: 640px) {
    .spec > div {
        grid-template-columns: 8.75rem minmax(0, 1fr);
        gap: 0.25rem var(--space-4);
    }

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

    .subprocessors-title span {
        display: block;
        margin: 0.25rem 0 0;
    }

    .subprocessor-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .subprocessor-list li {
        padding-block: 0.7rem;
    }

    .subprocessor-list li + li {
        border-top: 1px solid var(--line);
    }

    .subprocessor-list span {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex: 1;
        gap: var(--space-3);
    }

    .subprocessors-more {
        grid-row: 3;
    }

    .trust-actions {
        gap: var(--space-2) var(--space-5);
    }

    .security-head h2 {
        max-width: none;
    }
}

/* === pricing === */
/* One ruled sheet, not four cards: plans are columns divided by hairlines,
   and every row (flag, name, description, price, button, channels, features,
   fair-use note) lines up across columns through subgrid. The featured plan (the
   catalog's recommended one) is the only raised panel. The cards are generated
   by frontend/pricing/render.cjs from the plan catalog (pricing:sync), so every
   rule here keys on classes, never on a plan, a price or a bullet. */
.pricing-grid {
    --plan-pad: clamp(1.25rem, 0.6rem + 1.1vw, 1.75rem);
    /* Pull the columns out by their padding so plan text lines up with the
       section heading; never further than the container allows. */
    margin: 0 max(calc(-1 * var(--plan-pad)), calc((100% - var(--container)) / 2 - var(--plan-pad)));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    row-gap: 0;
}

.pricing-card {
    position: relative;
    grid-row: span 8;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: var(--plan-pad) var(--plan-pad) calc(var(--plan-pad) + 0.25rem);
    border: 1px solid transparent;
    border-radius: var(--r-md);
}

/* Hairline dividers between columns, drawn inside the gutter so the
   featured panel's own border never doubles up with them. */
.pricing-card + .pricing-card::before {
    content: '';
    position: absolute;
    top: var(--plan-pad);
    bottom: var(--plan-pad);
    left: -1px;
    width: 1px;
    background: var(--line);
}

.pricing-card.featured::before,
.pricing-card.featured + .pricing-card::before {
    display: none;
}

.pricing-card.featured {
    background: var(--surface);
    border-color: var(--line-strong);
}

.pricing-flag {
    min-height: 1.625rem;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
}

.pricing-badge {
    width: fit-content;
    padding: 0.25rem 0.625rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.pricing-badge.promo-badge {
    border-color: transparent;
    background: var(--signal-tint);
    color: var(--signal-ink);
}

.pricing-tier {
    font-size: var(--fs-h3-lg);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 var(--space-3);
}

.pricing-description {
    margin: 0 0 var(--space-5);
    max-width: 24ch;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 2.1rem + 1.6vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums;
}

.pricing-price sup {
    align-self: flex-start;
    margin: 0.14em 0.04em 0 0;
    font-size: 0.46em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: baseline;
    color: var(--ink-2);
}

/* The period. render.cjs and js/pricing.js both build [data-pricing-price] as
   span.pricing-qualifier?, span.original-price?, sup, text, span, so the period
   is always last. */
.pricing-price > span:last-child {
    margin-left: 0.3rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-3);
}

/* "from" on quoted plans, set like the period so the figure stays the object */
.pricing-price .pricing-qualifier {
    margin-right: 0.4rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-3);
}

.pricing-price .original-price {
    align-self: center;
    margin-right: 0.6rem;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.pricing-cta {
    margin-bottom: var(--space-5);
}

.pricing-cta .btn {
    width: 100%;
}

/* Which channels each plan answers in (bot limits from service/src/utils/tier-limits.ts).
   Its own subgrid row, so the rule under it lines up across the plans. */
.pricing-channels {
    margin: 0 0 var(--space-5);
    max-width: 30ch;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
}

.pricing-channels span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.3;
}

.pricing-features {
    list-style: none;
    margin: 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.pricing-card.featured .pricing-features {
    border-top-color: var(--line-strong);
}

.pricing-features li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* The document limit sets the price, so it leads each plan's list as a figure. */
.pricing-features li.pricing-limit {
    display: block;
    padding-bottom: var(--space-4);
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.2;
}

.pricing-limit b {
    margin-inline: 0.12em;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.35rem + 0.7vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    font-variant-numeric: lining-nums;
    color: var(--ink);
}

.pricing-card.featured .pricing-limit {
    border-bottom-color: var(--line-strong);
}

.pricing-check {
    width: 1rem;
    height: 1rem;
    margin-top: 0.14rem;
    flex-shrink: 0;
    color: var(--ink-2);
}

.pricing-card.featured .pricing-check {
    color: var(--signal-ink);
}

/* The fair-use threshold behind "Unlimited questions": its own subgrid row, so the
   notes share one line across the plans that have one. */
.pricing-footnote {
    margin: 0;
    padding-top: var(--space-5);
    max-width: 32ch;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.pricing-note {
    max-width: var(--container);
    margin: var(--space-5) auto 0;
    text-align: right;
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.pricing-note .link {
    color: var(--ink-2);
}

/* Two plans per row: dividers only inside each row. */
@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-5);
    }
}

/* One plan per row: plans stack, separated by a full-width hairline. */
@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-3);
    }

    .pricing-grid {
        --plan-pad: 1.25rem;
        margin-inline: 0;
    }

    /* name and description on the left, the price beside them on the right */
    .pricing-card {
        grid-row: auto;
        display: grid;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "flag flag"
            "name price"
            "desc price"
            "cta cta"
            "chan chan"
            "feat feat"
            "foot foot";
        column-gap: var(--space-4);
        padding-inline: 0;
    }

    .pricing-flag { grid-area: flag; }
    .pricing-tier { grid-area: name; }
    .pricing-description { grid-area: desc; }
    .pricing-price { grid-area: price; align-self: start; justify-content: flex-end; }
    .pricing-cta { grid-area: cta; }
    .pricing-channels { grid-area: chan; }
    .pricing-features { grid-area: feat; }
    .pricing-footnote { grid-area: foot; padding-top: var(--space-4); max-width: none; }

    /* The raised panel stays inside the page gutter; its text is inset by its
       own padding. */
    .pricing-card.featured {
        margin-inline: 0;
        padding-inline: 1rem;
    }

    .pricing-card + .pricing-card::before {
        top: calc(var(--space-3) / -2 - 1px);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    .pricing-flag:empty,
    .pricing-flag:not(:has(> :not([hidden]))) {
        display: none;
    }

    .pricing-flag {
        margin-bottom: var(--space-3);
    }

    .pricing-cta,
    .pricing-channels {
        margin-bottom: var(--space-4);
    }

    .pricing-features {
        gap: 0.5rem;
        padding-top: var(--space-4);
    }

    .pricing-features li.pricing-limit {
        padding-bottom: var(--space-3);
    }

    .pricing-description {
        max-width: none;
        margin-bottom: var(--space-5);
    }

    .pricing-price {
        margin: 0;
        font-size: 2.5rem;
    }

    .pricing-description {
        margin-bottom: var(--space-4);
    }

    .pricing-channels {
        max-width: none;
    }

    .pricing-note {
        text-align: left;
    }
}

/* === pricing-compare === */
/* "Compare every plan feature by feature": the catalog's full matrix (the generated
   pricing:begin matrix region) behind the same native disclosure as "For your IT
   team". A hairline table on paper; the capability column stays put while the plan
   columns scroll on narrow screens. */
.plan-compare {
    margin-top: clamp(2.5rem, 1.75rem + 2vw, 3.5rem);
}

.plan-matrix-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
}

.plan-matrix-scroll:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.plan-matrix {
    width: 100%;
    min-width: 44rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    font-variant-numeric: tabular-nums lining-nums;
}

.plan-matrix-caption {
    caption-side: top;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    text-align: left;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.plan-matrix th,
.plan-matrix td {
    padding: 0.7rem var(--space-5);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.plan-matrix thead th {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.plan-matrix-price {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink-3);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0;
}

.plan-matrix .plan-matrix-group th {
    padding-top: var(--space-5);
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.plan-matrix tbody th {
    color: var(--ink);
    font-weight: 500;
}

.plan-matrix .plan-yes {
    color: var(--ink);
}

.plan-matrix .plan-no {
    color: var(--ink-3);
}

.plan-matrix tbody tr:last-child > * {
    border-bottom: 0;
}

/* the capability column stays in view while the plans scroll sideways */
.plan-matrix thead th:first-child,
.plan-matrix tbody tr:not(.plan-matrix-group) > th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
}

.plan-matrix thead th:first-child {
    width: 28%;
    background: var(--surface);
}

@media (max-width: 640px) {
    .plan-matrix th,
    .plan-matrix td {
        padding-inline: var(--space-4);
    }

    .plan-matrix tbody tr:not(.plan-matrix-group) > th {
        min-width: 9.5rem;
    }

    /* the caption scrolls with the table: keep its text inside the first screen */
    .plan-matrix-caption {
        padding-right: max(var(--space-4), calc(100% - 20rem));
    }
}

/* === faq === */
/* Heading and a way to ask on the left; a hairline accordion with large questions on
   the right. Each item is a native <details>, so answers open without JS. */
.faq-layout {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7) clamp(2rem, 1rem + 5vw, 7rem);
    align-items: start;
}

.faq-head {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
}

.faq-head h2 {
    max-width: 12ch;
}

.faq-head p {
    margin-top: var(--space-5);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 34ch;
}

.faq-head .btn {
    margin-top: var(--space-6);
}

.faq-container {
    border-top: 1px solid var(--line-strong);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-question {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    padding: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) 0;
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
    cursor: pointer;
}

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

.faq-q-text {
    max-width: 44ch;
}

/* the drawn plus that turns into a filled minus (FAQ items and the IT disclosure) */
.faq-icon,
.it-pack-icon {
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: -0.2rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.faq-icon::before,
.faq-icon::after,
.it-pack-icon::before,
.it-pack-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 1.5px;
    margin: -0.75px 0 0 -0.375rem;
    border-radius: 1px;
    background: var(--ink);
    transition: transform 0.35s var(--ease-out), background-color 0.25s var(--ease-out);
}

.faq-icon::after,
.it-pack-icon::after {
    transform: rotate(90deg);
}

.faq-question:hover .faq-icon,
.it-pack summary:hover .it-pack-icon {
    border-color: var(--ink);
}

.faq-item[open] .faq-icon,
.it-pack[open] .it-pack-icon {
    background: var(--ink);
    border-color: var(--ink);
}

.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after,
.it-pack[open] .it-pack-icon::before,
.it-pack[open] .it-pack-icon::after {
    background: var(--paper);
}

.faq-item[open] .faq-icon::after,
.it-pack[open] .it-pack-icon::after {
    transform: rotate(0deg);
}

.faq-answer > p {
    padding: 0 4.5rem clamp(1.5rem, 1.2rem + 0.8vw, 2rem) 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 64ch;
}

.faq-item[open] .faq-answer {
    animation: discloseIn 0.35s var(--ease-out);
}

@media (max-width: 860px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-head {
        position: static;
    }

    .faq-answer > p {
        padding-right: 0;
    }

    .faq-head h2 {
        max-width: none;
    }
}

/* === cta === */
/* The closing panel sits on the ground below the sheet, the same width as the sheet: a
   flat Pompeian red wall (no gradient, no grain) carrying the headline on the left and
   the sentence and the two buttons on the right, on one baseline. */
.cta {
    margin: max(var(--frame), 0.75rem) var(--frame) 0;
    padding: clamp(3rem, 1.75rem + 3.4vw, 5rem) var(--gutter);
    border-radius: var(--r-sheet);
    color: var(--cta-on);
    background: var(--cta-wall);
}

.cta-inner {
    max-width: var(--container);
    margin: 0 auto;
}

.cta-copy {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "title lede"
        "title actions";
    grid-template-rows: 1fr auto;
    gap: var(--space-5) clamp(2rem, 1rem + 4vw, 6rem);
    align-items: end;
}

.cta h2 {
    grid-area: title;
    align-self: end;
    color: var(--cta-on);
    max-width: 17ch;
}

.cta h2 span {
    display: block;
}

.cta-lede {
    grid-area: lede;
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: 44ch;
    color: var(--cta-on-2);
}

.cta-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* the largest object on the wall */
.cta-btn-main {
    min-width: 13.5rem;
    background: var(--cta-on);
    color: var(--cta-band);
}

.cta-btn-main:hover {
    background: var(--cta-on-2);
}

.cta-btn-alt {
    color: var(--cta-on);
    border-color: var(--cta-line);
}

.cta-btn-alt:hover {
    border-color: var(--cta-on);
    background: var(--cta-wash);
}

.cta :focus-visible {
    outline-color: var(--cta-on);
}

@media (max-width: 860px) {
    .cta-copy {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "lede"
            "actions";
        grid-template-rows: none;
        gap: 0;
    }

    .cta h2 {
        margin-bottom: var(--space-5);
    }

    .cta-lede {
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 520px) {
    .cta-actions .cta-btn-main {
        flex: 1 1 100%;
    }
}

/* === footer === */
/* Sits on the ground under the CTA panel: brand block left, four link groups
   in one row right, then a ruled legal row: copyright + build version, the
   legal pages, the studio credit. */
footer {
    background: var(--ground);
    color: var(--ink-2);
    padding: clamp(2.75rem, 2rem + 2.2vw, 3.75rem) calc(var(--gutter) + var(--frame)) var(--space-6);
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-7) var(--space-6);
}

.footer-brand {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    width: fit-content;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.045em;
}

.footer-logo .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.footer-brand p {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
    max-width: 30ch;
}

/* the page's one line about the square: caption size, the five words in small caps */
.footer-brand p.footer-name {
    max-width: 34ch;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-3);
}

.footer-name span {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    color: var(--ink-2);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-7) var(--space-6);
}

.footer-col h3 {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.footer-col ul {
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.footer-col a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.footer-col a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.footer-contact {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-strong);
    max-width: 22rem;
}

.footer-contact li {
    display: grid;
    gap: 0.125rem;
}

.footer-contact span {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.footer-contact a {
    color: var(--ink);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.footer-bottom {
    max-width: var(--container);
    margin: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-strong);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3) var(--space-6);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.footer-legal {
    margin-left: auto;
}

.footer-legal ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.footer-credit {
    padding-left: var(--space-6);
    border-left: 1px solid var(--line-strong);
}

.footer-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.footer-legal-link {
    color: var(--ink-2);
    text-decoration: none;
}

.footer-legal-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* VersionStamp (#index-version) ships its own greys; keep it legible on the ground */
#index-version .version-stamp,
#index-version .version-text {
    color: var(--ink-3) !important;
    opacity: 1 !important;
    background: transparent !important;
    border-color: var(--line-strong) !important;
}

@media (max-width: 1100px) {
    .footer-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
    }

    .footer-legal {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0 0 var(--space-2);
    }

    .footer-credit {
        padding-left: 0;
        border-left: 0;
    }
}

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

/* stacked but still wide: brand line left, contacts right, one ruled band */
@media (min-width: 641px) and (max-width: 960px) {
    .footer-brand {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-7);
        padding-bottom: var(--space-6);
        border-bottom: 1px solid var(--line);
    }

    .footer-contact {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 640px) {
    /* one group per row; each group's links flow along the line as 44px targets */
    .footer-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .footer-col ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-5);
    }

    .footer-legal ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-5);
    }

    /* 44px tap targets on phones: each link is its own full-height row */
    .footer-col h3 {
        margin-bottom: var(--space-2);
    }

    .footer-col ul {
        row-gap: 0;
    }

    .footer-col a,
    .footer-contact a,
    .footer-legal-link,
    .footer-logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    .footer-contact {
        row-gap: var(--space-2);
    }
}

/* === ribbon === */
/* #ribbon-badge: a quiet "Beta" tag docked beside the wordmark in the nav, so it
   never floats over page content (the old fixed bottom-left pill covered the
   demo's bot avatar at 390px). Hover/focus (fine pointers) or tap (index.js
   toggles .is-expanded) opens a small note below it. Hidden on narrow phones,
   where the nav has no room for it. */
.ribbon-badge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: calc(0.5rem - clamp(1rem, 3vw, 2.75rem));   /* cancels .nav-container's gap */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* a real button (keyboard and screen readers reach the note and its link); 24px drawn,
   with a taller hit area */
.ribbon-badge-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 24px;
    padding: 0 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.ribbon-badge-pill::after {
    content: '';
    position: absolute;
    inset: -10px -4px;
}

.ribbon-badge-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--signal);
}

.ribbon-badge:hover .ribbon-badge-pill,
.ribbon-badge.is-expanded .ribbon-badge-pill {
    color: var(--ink);
    border-color: var(--ink-3);
}

.ribbon-badge-text-wrapper {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: min(280px, calc(100vw - 32px));
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem 0.95rem;
    border-radius: var(--r-md);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}

.ribbon-badge-text {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-2);
}

.ribbon-badge-cta {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 0.8rem;
    border-radius: 8px;
    background: var(--signal);
    color: var(--on-signal);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s var(--ease-out);
}

.ribbon-badge-cta:hover {
    background: var(--signal-hover);
}

.ribbon-badge.is-expanded .ribbon-badge-text-wrapper {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
    .ribbon-badge:hover .ribbon-badge-text-wrapper,
    .ribbon-badge:focus-within .ribbon-badge-text-wrapper {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s;
    }
}

@media (max-width: 520px) {
    .ribbon-badge {
        display: none;
    }
}

/* === modal === */
.demo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: oklch(0.18 0.015 40 / 0.6);
    animation: fadeIn 0.2s var(--ease-out);
}

.demo-modal.show {
    display: flex;
}

.demo-modal-content {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-float);
    animation: modalIn 0.35s var(--ease-out);
}

.demo-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink-2);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.demo-modal-close:hover {
    background: var(--surface);
    color: var(--ink);
}

.demo-modal-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.demo-modal h2 {
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    margin-bottom: 0.6rem;
    padding-right: 2.5rem;
}

.demo-modal p {
    color: var(--ink-2);
    margin-bottom: var(--space-6);
}

.demo-form-group {
    margin-bottom: var(--space-4);
}

.demo-form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.demo-form-group input,
.demo-form-group select,
.demo-form-group textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.demo-form-group input:focus,
.demo-form-group select:focus,
.demo-form-group textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--signal-tint);
}

.demo-form-group input::placeholder,
.demo-form-group textarea::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.demo-form-group select {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23857a70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.demo-form-group textarea {
    resize: vertical;
    min-height: 104px;
    line-height: 1.5;
}

.demo-form-group small {
    display: block;
    margin-top: 0.4rem;
    color: var(--ink-3);
    font-size: var(--fs-xs);
}

.demo-submit-btn {
    width: 100%;
    min-height: 50px;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--signal);
    color: var(--on-signal);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out);
}

.demo-submit-btn:hover:not(:disabled) {
    background: var(--signal-hover);
}

.demo-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.demo-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in oklch, var(--on-signal) 30%, transparent);
    border-top-color: var(--on-signal);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.demo-submit-btn:disabled .demo-spinner {
    display: block;
}

.demo-success {
    display: none;
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.demo-success.show {
    display: block;
    animation: fadeIn 0.3s var(--ease-out);
}

.demo-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--signal-tint);
    color: var(--signal-ink);
    font-size: 1.75rem;
    font-weight: 700;
}

.demo-success-subtext {
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.demo-success-close {
    margin-top: var(--space-5);
}

/* sits right above the submit button, where the failed action was */
.demo-error {
    display: none;
    padding: 0.85rem 1rem;
    margin: var(--space-4) 0 0;
    scroll-margin-bottom: 5rem;
    border: 1px solid color-mix(in oklch, var(--error) 35%, transparent);
    border-radius: var(--r-sm);
    background: color-mix(in oklch, var(--error) 8%, var(--paper));
    color: var(--error);
    font-size: var(--fs-sm);
}

.demo-error.show {
    display: block;
}

.legal-consent a {
    color: var(--signal-ink);
}

/* the consent checkbox answers to its whole label: a 44px-tall row */
.demo-modal .legal-consent {
    align-items: center;
    gap: 0.625rem;
    margin-top: var(--space-2);
}

.demo-modal .legal-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--signal);
}

.demo-modal .legal-consent label {
    display: block;
    min-height: 44px;
    padding-block: 0.7rem;
    margin: 0;
    line-height: 1.5;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-2);
}

/* === klaro === */
.klaro .cookie-notice {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-pop) !important;
}

.klaro .cookie-notice .cn-body {
    padding: 1.1rem 1.25rem !important;
}

.klaro .cookie-notice-content,
.klaro .cookie-notice .cn-body p {
    color: var(--ink-2) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.klaro .cookie-modal .cm-modal {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-float) !important;
}

.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer,
.klaro .cm-purpose {
    border-color: var(--line) !important;
}

.klaro .cookie-modal .cm-header h1 {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em !important;
}

.klaro .cookie-modal .cm-body,
.klaro .cm-list-description {
    color: var(--ink-2) !important;
}

.klaro .cm-list-label {
    color: var(--ink) !important;
    font-weight: 500 !important;
}

.klaro .cm-btn,
.klaro .cookie-notice .cn-buttons button {
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.1rem !important;
}

.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons {
    background: transparent !important;
}

.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-buttons button.cm-btn-success,
.klaro .cookie-notice .cn-buttons button.cn-accept,
.klaro .cookie-notice .cn-buttons button:last-child:not(.cm-btn-decline) {
    background: var(--signal) !important;
    color: var(--on-signal) !important;
    border: none !important;
}

.klaro .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cn-buttons button.cm-btn-decline,
.klaro .cookie-notice .cn-buttons button:first-child {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
}

.klaro .cm-btn.cm-btn-info,
.klaro .cookie-notice .cn-learn-more {
    background: transparent !important;
    color: var(--signal-ink) !important;
    border: none !important;
    text-decoration: underline !important;
}

.klaro .cm-switch input:checked + .cm-switch-container {
    background: var(--signal) !important;
}

.klaro .cm-switch .cm-switch-container {
    background: var(--surface-2) !important;
}

/* === motion === */
.fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
    transform: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* <details> content: a short fade down as it opens */
@keyframes discloseIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

    .fade-in {
        opacity: 1;
        transform: none;
    }
}

/* Plan tags are filled from the pricing catalog by js/pricing.js; hide them until then (and without JS). */
.plan-tag:empty { display: none; }