/* ============================================================================
   Clarilytic.ai public site — "Paper & Thread" design system
   ----------------------------------------------------------------------------
   Light, paper-native identity. Warm paper surfaces, ink text, ONE marigold
   accent used like a highlighter / citation marker, and a recurring
   "citation thread" motif: a fine line connecting an answer to its source.

   Accent rules: marigold (--cl-accent) appears ONLY as highlighter swipes,
   citation marks/chips, thread lines, small dots, and the ".ai" in the
   wordmark (text-sized uses take --cl-accent-ink for AA contrast).
   Primary buttons are ink-filled. No gradients. No glow shadows.

   Sections: 1 tokens · 2 base · 3 primitives · 4 nav · 5 footer
             6 home sections · 7 demo · 8 pricing · 9 trust page
             10 legal + 404 · 11 media · 12 reduced motion
   ========================================================================== */

/* ============================== 1. TOKENS ================================ */
:root {
    /* Paper surfaces */
    --cl-paper: #FAF7F1;
    --cl-paper-raised: #FFFFFF;
    --cl-paper-sunken: #F2EDE3;
    --cl-paper-deep: #1E1B16;

    /* Ink */
    --cl-ink: #211D17;
    --cl-ink-2: #57514A;
    /* Muted text. Was #8A8276 (3.55:1 on --cl-paper), then #777065 — which
       cleared 4.5:1 on --cl-paper and --cl-paper-raised but was measured
       against only those two, and came to 4.20:1 on --cl-paper-sunken. Sunken
       is the footer and every .cl-section--alt band, so axe caught it on five
       of six pages. This token is used as a `color:` in ~39 places; darkened
       to the nearest value clearing 4.5:1 on ALL THREE paper surfaces
       (paper 4.99:1, raised 5.34:1, sunken 4.58:1), so the type still reads
       as muted rather than turning into --cl-ink-2.

       Measure every ink token against all three surfaces, not just the page
       background — that omission is exactly what shipped the last value. */
    --cl-ink-3: #716A60;
    --cl-ink-on-deep: #F5F1E8;
    --cl-ink-on-deep-2: #B9B2A4;

    /* Borders & lines */
    --cl-border: #E4DDCF;
    --cl-border-strong: #CFC6B4;
    /* Boundary of an interactive control (text input, select, choice card).
       WCAG 1.4.11 wants 3:1 for the visual information that identifies a
       control, and --cl-border-strong is 1.59:1 on paper — fine for the card
       and divider edges it mostly draws, not enough when the border is the
       only thing saying "this is a field". Split rather than darkened so the
       decorative edges keep the palette they were designed with. */
    --cl-border-control: #958F82;
    --cl-hairline: rgba(33, 29, 23, 0.10);

    /* THE accent — marigold highlighter (from the gold brand mark) */
    --cl-accent: #F2A900;
    --cl-accent-ink: #8A5A00;
    --cl-accent-wash: #FFEDBF;
    --cl-accent-soft: #FFF7E2;

    /* Semantic */
    --cl-success: #4D7C0F;
    --cl-success-wash: #EFF5E2;
    --cl-warn: #B45309;
    --cl-warn-wash: #FCEEDC;
    --cl-danger: #B3261E;

    /* Type */
    --cl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --cl-font-body: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cl-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    --cl-text-hero: clamp(2.4rem, 5.5vw, 4.2rem);
    --cl-text-h2: clamp(1.7rem, 3.2vw, 2.4rem);
    --cl-text-h3: 1.25rem;
    --cl-text-lede: 1.125rem;
    --cl-text-body: 1rem;
    --cl-text-small: 0.875rem;
    --cl-text-mono: 0.8125rem;
    --cl-text-overline: 0.75rem;

    /* Spacing (4px base) */
    --cl-space-1: 4px;  --cl-space-2: 8px;   --cl-space-3: 12px; --cl-space-4: 16px;
    --cl-space-5: 24px; --cl-space-6: 32px;  --cl-space-7: 48px; --cl-space-8: 64px;
    --cl-space-9: 96px; --cl-space-10: 128px;

    /* Radius — print-like, no blobs */
    --cl-radius-sm: 6px;
    --cl-radius-md: 10px;
    --cl-radius-lg: 14px;
    --cl-radius-full: 999px;

    /* Elevation — borders first, soft warm shadows second */
    --cl-shadow-sm: 0 1px 2px rgba(33, 29, 23, 0.06);
    --cl-shadow-md: 0 1px 3px rgba(33, 29, 23, 0.07), 0 6px 18px rgba(33, 29, 23, 0.06);
    --cl-shadow-lg: 0 2px 4px rgba(33, 29, 23, 0.08), 0 16px 40px rgba(33, 29, 23, 0.10);

    /* No content-width ceiling: the layout uses whatever the browser gives it.
       Readability is protected where it actually lives — the measure of each
       text block (capped in ch on the prose itself) — not by squeezing the
       whole page into a fixed column. */
    --cl-maxw: 100%;
    /* Side margin scales with the viewport so full-width doesn't mean
       edge-to-edge on a large display. */
    --cl-gutter: clamp(var(--cl-space-5), 3vw, 72px);
    --cl-nav-h: 72px;
}

/* ============================== 2. BASE ================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cl-nav-h) + 16px); }

body {
    margin: 0;
    background: var(--cl-paper);
    color: var(--cl-ink);
    font-family: var(--cl-font-body);
    font-size: var(--cl-text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--cl-ink); }
p { margin: 0 0 var(--cl-space-4); color: var(--cl-ink-2); }
a { color: var(--cl-accent-ink); text-decoration: none; }

/* Links inside a block of text must not rely on colour alone (WCAG 1.4.1).
   --cl-accent-ink is 5.08:1–5.93:1 against the paper surfaces, so it is
   readable, but only 1.32:1 against the --cl-ink-2 prose it sits in — far
   under the 3:1 that would let colour carry the distinction by itself. An
   underline is the non-colour cue, so the accent stays as designed.

   Scoped to prose containers rather than all `a`: the nav links, footer link
   columns and button-styled CTAs are direct children of their own containers,
   never of a <p> or <li>, so they keep their undecorated treatment. */
p a, li a { text-decoration: underline; text-underline-offset: 0.15em; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

::selection { background: var(--cl-accent-wash); color: var(--cl-ink); }

:focus-visible {
    outline: 2px solid var(--cl-accent-ink);
    outline-offset: 2px;
    border-radius: var(--cl-radius-sm);
}

/* Skip link (WCAG 2.4.1). Off-screen rather than display:none, so it stays in
   the tab order and in the accessibility tree; it flies in on focus. Clipping
   with a 1px box is the pattern that survives a screen reader's virtual
   cursor, which `visibility: hidden` and `display: none` do not. */
.cl-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--cl-space-3) var(--cl-space-4);
    background: var(--cl-paper-raised);
    color: var(--cl-ink);
    font-weight: 600;
    border: 1px solid var(--cl-border-control);
    border-radius: 0 0 var(--cl-radius-sm) 0;
    box-shadow: var(--cl-shadow-lg);
}
.cl-skiplink:focus {
    left: 0;
}

.cl-page { min-height: 100vh; display: flex; flex-direction: column; }
.cl-page > main, main { flex: 1; }

/* =========================== 3. PRIMITIVES =============================== */
.cl-container {
    max-width: var(--cl-maxw);
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
}

.cl-section { padding: var(--cl-space-9) 0; }
.cl-section--tight { padding: var(--cl-space-8) 0; }
.cl-section--alt { background: var(--cl-paper-sunken); }
.cl-section--deep { background: var(--cl-paper-deep); }

.cl-section-head { max-width: 720px; margin-bottom: var(--cl-space-7); }
.cl-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.cl-overline {
    font-size: var(--cl-text-overline);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    margin-bottom: var(--cl-space-3);
}

.cl-h2 {
    font-family: var(--cl-font-display);
    font-size: var(--cl-text-h2);
    font-weight: 540;
    font-variation-settings: "opsz" 60;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--cl-space-4);
}

.cl-lede {
    font-size: var(--cl-text-lede);
    line-height: 1.6;
    color: var(--cl-ink-2);
}

/* Buttons — ink-filled primary; the accent is evidence, not a button color */
.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-2);
    padding: 12px 22px;
    border-radius: var(--cl-radius-md);
    border: 1px solid transparent;
    font-family: var(--cl-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    white-space: nowrap;
}
.cl-btn:hover { transform: translateY(-1px); }
.cl-btn:active { transform: translateY(0); }

.cl-btn--primary { background: var(--cl-ink); color: var(--cl-paper); }
.cl-btn--primary:hover { background: #33302A; }

.cl-btn--ghost {
    background: transparent;
    border-color: var(--cl-border-strong);
    color: var(--cl-ink);
}
.cl-btn--ghost:hover { background: var(--cl-paper-raised); border-color: var(--cl-ink-3); }

/* On the ink-dark deep band */
.cl-btn--inverted { background: var(--cl-paper); color: var(--cl-ink); }
.cl-btn--inverted:hover { background: #FFFFFF; }
.cl-btn--ghost-on-deep {
    background: transparent;
    border-color: rgba(245, 241, 232, 0.35);
    color: var(--cl-ink-on-deep);
}
.cl-btn--ghost-on-deep:hover { border-color: rgba(245, 241, 232, 0.7); background: rgba(245, 241, 232, 0.06); }

.cl-btn--sm { padding: 9px 16px; font-size: 0.875rem; }
.cl-btn--lg { padding: 15px 28px; font-size: 1rem; }
.cl-btn--block { width: 100%; }

.cl-cta-row { display: flex; gap: var(--cl-space-3); flex-wrap: wrap; }

/* Highlighter swipe — sits behind text like a real marker */
mark.cl-mark {
    background: linear-gradient(transparent 28%, var(--cl-accent-wash) 28% 92%, transparent 92%);
    color: inherit;
    padding: 0 2px;
}

/* Thread rule — section divider: hairline with a centered marigold dot */
.cl-thread-rule {
    position: relative;
    height: 1px;
    background: var(--cl-hairline);
    max-width: var(--cl-maxw);
    margin: 0 auto;
}
.cl-thread-rule::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--cl-accent);
}

/* Citation chip — mono marker with marigold dot */
.cl-cite {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 6px;
    margin: 0 2px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    background: var(--cl-accent-soft);
    font-family: var(--cl-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cl-accent-ink);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
    vertical-align: baseline;
    line-height: 1.5;
}
.cl-cite::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cl-accent);
    flex: none;
}
.cl-cite:hover { border-color: var(--cl-accent); }
.cl-cite--active { border-color: var(--cl-accent); background: var(--cl-accent-wash); }

/* Animated thread-underline for proof links */
.cl-link-thread {
    font-weight: 600;
    color: var(--cl-accent-ink);
    background-image: linear-gradient(var(--cl-accent), var(--cl-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 240ms ease;
    padding-bottom: 2px;
}
.cl-link-thread:hover { background-size: 100% 2px; }

/* Scroll reveal — JS adds .cl-reveal--in via IntersectionObserver */
.cl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
.cl-reveal--in { opacity: 1; transform: none; }

/* Thread overlay svg (demo) — populated by js/site.js */
svg.cl-thread-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}
.cl-thread-svg__line { fill: none; stroke: var(--cl-accent); stroke-width: 1.5; stroke-linecap: round; }
.cl-thread-svg__dot { fill: var(--cl-accent); }
.cl-thread-svg__ring { fill: var(--cl-paper-raised); stroke: var(--cl-accent); stroke-width: 1.5; }

/* ============================== 4. NAV =================================== */
.cl-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--cl-nav-h);
    background: rgba(250, 247, 241, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cl-hairline);
}
.cl-nav__inner {
    max-width: var(--cl-maxw);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
    display: flex;
    align-items: center;
    gap: var(--cl-space-6);
}
.cl-brand { display: inline-flex; align-items: center; gap: 10px; }
.cl-brand__mark { width: 30px; height: 30px; border-radius: 8px; }
.cl-brand__text {
    font-family: var(--cl-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cl-ink);
    letter-spacing: -0.01em;
}
.cl-brand__ai { color: var(--cl-accent-ink); }

.cl-nav__links { display: flex; gap: var(--cl-space-5); margin-left: auto; }
.cl-nav__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cl-ink-2);
    padding: 6px 2px;
    transition: color 160ms ease;
}
.cl-nav__link:hover { color: var(--cl-ink); }
.cl-nav__link--active { color: var(--cl-ink); box-shadow: inset 0 -2px 0 var(--cl-accent); }

.cl-nav__actions { display: flex; align-items: center; gap: var(--cl-space-3); }
.cl-nav__signin {
    background: none;
    border: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cl-ink-2);
    cursor: pointer;
    padding: 8px 10px;
}
.cl-nav__signin:hover { color: var(--cl-ink); }

.cl-nav__burger {
    display: none;
    background: none;
    border: none;
    color: var(--cl-ink);
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
}
.cl-nav__burger svg { width: 100%; height: 100%; }
/* Both burger icons ship in the markup and CSS picks one. The nav is static
   SSR now, so there is no C# @if to swap them at runtime. */
.cl-nav__burger-close { display: none; }
.cl-nav--open .cl-nav__burger-open { display: none; }
.cl-nav--open .cl-nav__burger-close { display: block; }

/* ============================== 5. FOOTER ================================ */
.cl-footer {
    background: var(--cl-paper-sunken);
    border-top: 1px solid var(--cl-border);
    padding: var(--cl-space-8) 0 var(--cl-space-6);
    margin-top: auto;
}
.cl-footer__top { display: flex; gap: var(--cl-space-8); flex-wrap: wrap; }
.cl-footer__brand { max-width: 280px; }
.cl-footer__brand p { margin-top: var(--cl-space-4); font-size: var(--cl-text-small); color: var(--cl-ink-3); }
.cl-footer__cols { display: flex; gap: var(--cl-space-8); flex-wrap: wrap; margin-left: auto; }
.cl-footer__col { display: flex; flex-direction: column; gap: var(--cl-space-3); min-width: 140px; }
.cl-footer__col h2, .cl-footer__col h5 {
    font-size: var(--cl-text-overline);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    margin-bottom: var(--cl-space-1);
}
.cl-footer__col a { font-size: var(--cl-text-small); color: var(--cl-ink-2); }
.cl-footer__col a:hover { color: var(--cl-ink); }
.cl-footer__bottom {
    margin-top: var(--cl-space-7);
    padding-top: var(--cl-space-5);
    border-top: 1px solid var(--cl-hairline);
    font-size: var(--cl-text-small);
    color: var(--cl-ink-3);
}

/* ========================== 6. HOME SECTIONS ============================= */

/* --- 6.1 Hero --- */
.cl-hero { padding: var(--cl-space-9) 0 var(--cl-space-8); }
.cl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--cl-space-8);
    align-items: center;
}
.cl-hero__h1 {
    font-family: var(--cl-font-display);
    font-size: var(--cl-text-hero);
    font-weight: 560;
    font-variation-settings: "opsz" 110;
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin-bottom: var(--cl-space-5);
}
.cl-hero__sub {
    font-size: var(--cl-text-lede);
    line-height: 1.6;
    max-width: 56ch;
    margin-bottom: var(--cl-space-6);
}
.cl-hero__micro {
    margin-top: var(--cl-space-4);
    font-size: var(--cl-text-small);
    color: var(--cl-ink-3);
}

.cl-hero__visual { position: relative; }
.cl-hero__thread { display: block; width: 100%; height: 72px; overflow: visible; }

/* Mini source card — the hero thread's terminus */
.cl-source-card {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    box-shadow: var(--cl-shadow-md);
    padding: var(--cl-space-4) var(--cl-space-5);
    transform: rotate(-0.6deg);
}
.cl-source-card__name {
    font-family: var(--cl-font-mono);
    font-size: var(--cl-text-mono);
    color: var(--cl-ink-3);
    margin-bottom: var(--cl-space-3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-source-card__name::before {
    content: "";
    width: 8px;
    height: 10px;
    flex: none;
    border: 1px solid var(--cl-border-strong);
    border-radius: 2px;
    background: var(--cl-paper);
}
.cl-source-card__line {
    font-size: var(--cl-text-small);
    line-height: 1.7;
    color: var(--cl-ink-2);
    margin: 0;
}

/* --- 6.2 Felt problem --- */
.cl-prose { max-width: 65ch; margin: 0 auto; }
.cl-problem .cl-h2 { margin-bottom: var(--cl-space-5); }
.cl-problem p { font-size: var(--cl-text-lede); line-height: 1.7; }
.cl-problem__kicker {
    font-family: var(--cl-font-display);
    font-style: italic;
    font-size: 1.35rem;
    font-weight: 480;
    color: var(--cl-ink);
    margin-top: var(--cl-space-6);
    line-height: 1.5;
}

/* --- 6.3 Artifacts grid --- */
/* Every feature gets the same card: artifact mock on top at a fixed height, then
   title, then description. Uniform by design — the old version mixed span-2 and
   span-3 cells in a 6-column grid, which left gaps mid-grid and let one cell run
   five times taller than its neighbours. Column count is set per breakpoint (see
   section 11) rather than auto-fit, so a row is never one lonely card. */
.cl-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cl-space-4);
}
.cl-bento__cell {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-sm);
    padding: var(--cl-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.cl-bento__cell:hover { box-shadow: var(--cl-shadow-md); transform: translateY(-2px); }
.cl-bento__cell h3 { font-size: var(--cl-text-h3); font-weight: 600; }
.cl-bento__cell p { font-size: var(--cl-text-small); line-height: 1.6; margin: 0; }
/* Push any trailing link to the card's baseline so links line up across a row. */
.cl-bento__cell p:last-of-type { flex: 1 0 auto; }

/* Bento mocks — tiny believable artifact renderings, never icons.
   Fixed height, not min-height: it is what makes every title in a row sit on the
   same line. 184px clears the tallest mock at its worst wrap (the narrowest card
   the grid produces, ~311px in the 3-column band); overflow:hidden is a guard
   against future copy, not a layout tool — nothing is clipped today. */
.cl-bmock {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-paper);
    padding: var(--cl-space-4);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cl-ink-2);
    height: 184px;
    overflow: hidden;
}
.cl-bmock__mono { font-family: var(--cl-font-mono); font-size: 0.6875rem; color: var(--cl-ink-3); }
.cl-bmock__title { font-family: var(--cl-font-display); font-weight: 560; font-size: 0.9375rem; color: var(--cl-ink); margin-bottom: 4px; }
.cl-bmock__bar { height: 6px; border-radius: 3px; background: var(--cl-paper-sunken); margin: 6px 0; }
.cl-bmock__bar--short { width: 60%; }
.cl-bmock__hl {
    background: linear-gradient(transparent 20%, var(--cl-accent-wash) 20% 90%, transparent 90%);
    padding: 0 2px;
    color: var(--cl-ink);
}
.cl-bmock__chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--cl-font-mono); font-size: 0.625rem; color: var(--cl-accent-ink);
    border: 1px solid var(--cl-border); border-radius: var(--cl-radius-full);
    background: var(--cl-accent-soft); padding: 0 6px;
}
.cl-bmock__chip::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cl-accent); }

/* timeline mock */
.cl-bmock--timeline { display: flex; flex-direction: column; gap: 6px; }
.cl-bmock__event { display: flex; align-items: baseline; gap: 8px; }
.cl-bmock__event::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-accent); flex: none; align-self: center; }
.cl-bmock__date { font-family: var(--cl-font-mono); font-size: 0.625rem; color: var(--cl-ink-3); flex: none; }

/* compare mock */
.cl-bmock--compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-bmock--compare > div { border-left: 2px solid var(--cl-border); padding-left: 8px; }
.cl-bmock--compare > div:last-child { border-left-color: var(--cl-accent); }

/* person mock */
.cl-bmock__avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--cl-paper-sunken); border: 1px solid var(--cl-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--cl-font-display); font-weight: 600; font-size: 0.6875rem; color: var(--cl-ink-2);
    margin-right: 8px; vertical-align: middle;
}

/* --- 6.3b Passport explorer ("Follow the thread") --- */
.cl-passport {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
    padding: var(--cl-space-6);
}

/* Trail bar — hops as marigold dots joined by short thread lines */
.cl-passport__trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cl-space-2);
    margin-bottom: var(--cl-space-5);
    padding-bottom: var(--cl-space-4);
    border-bottom: 1px solid var(--cl-hairline);
}
.cl-passport__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: var(--cl-text-small);
    font-weight: 600;
    color: var(--cl-ink-3);
    cursor: pointer;
}
.cl-passport__crumb::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--cl-accent);
    background: var(--cl-paper-raised);
    flex: none;
}
.cl-passport__crumb:not(:first-child) {
    position: relative;
    padding-left: 28px;
}
.cl-passport__crumb:not(:first-child)::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 20px;
    height: 1.5px;
    background: var(--cl-accent);
}
.cl-passport__crumb:hover { color: var(--cl-ink); }
.cl-passport__crumb--current { color: var(--cl-ink); cursor: default; }
.cl-passport__crumb--current::before { background: var(--cl-accent); }
.cl-passport__trail .cl-demo__bar-reset { margin-left: auto; }

.cl-passport__panels {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: var(--cl-space-6);
    align-items: start;
}

/* The passport card */
.cl-passport__card {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-paper);
    padding: var(--cl-space-5);
}
.cl-passport__header { display: flex; align-items: center; gap: var(--cl-space-3); margin-bottom: var(--cl-space-3); }
.cl-passport__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cl-paper-sunken);
    border: 1px solid var(--cl-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cl-font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--cl-ink-2);
    flex: none;
}
.cl-passport__name { font-family: var(--cl-font-display); font-weight: 560; font-size: 1.25rem; color: var(--cl-ink); }
.cl-passport__kind {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    padding: 1px 8px;
    margin-top: 2px;
}
.cl-passport__stats {
    font-family: var(--cl-font-mono);
    font-size: var(--cl-text-mono);
    color: var(--cl-ink-3);
    padding-bottom: var(--cl-space-3);
    margin-bottom: var(--cl-space-3);
    border-bottom: 1px solid var(--cl-hairline);
}
.cl-passport__label {
    font-size: var(--cl-text-overline);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    margin: var(--cl-space-4) 0 var(--cl-space-2);
}
.cl-passport__docs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl-passport__docs li {
    font-family: var(--cl-font-mono);
    font-size: 0.75rem;
    color: var(--cl-ink-2);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-wrap: anywhere;
}
.cl-passport__docs li::before {
    content: "";
    width: 8px;
    height: 10px;
    flex: none;
    border: 1px solid var(--cl-border-strong);
    border-radius: 2px;
    background: var(--cl-paper-raised);
}
.cl-passport__connections { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.cl-passport__conn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
    padding: 8px 14px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius-md);
    background: var(--cl-paper-raised);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.cl-passport__conn:hover { border-color: var(--cl-accent); background: var(--cl-accent-soft); }
.cl-passport__conn--fact { cursor: default; border-style: dashed; background: transparent; }
.cl-passport__conn--fact:hover { border-color: var(--cl-border-strong); background: transparent; }
.cl-passport__conn-name { font-size: var(--cl-text-small); font-weight: 600; color: var(--cl-ink); }
.cl-passport__conn-rel { font-size: 0.75rem; color: var(--cl-ink-3); }

/* The discovery panel */
.cl-passport__discovery { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-passport__finding { font-size: var(--cl-text-body); line-height: 1.7; color: var(--cl-ink-2); margin: 0; }
.cl-passport__closing {
    margin-top: var(--cl-space-3);
    padding-top: var(--cl-space-4);
    border-top: 1px solid var(--cl-hairline);
}
.cl-passport__closing-line {
    font-family: var(--cl-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cl-ink);
    margin-bottom: var(--cl-space-3);
}

/* --- 6.4 Use-case picker --- */
.cl-lenses__tabs {
    display: flex;
    gap: var(--cl-space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--cl-space-6);
}
.cl-lens-tab {
    padding: 9px 18px;
    border-radius: var(--cl-radius-full);
    border: 1px solid var(--cl-border-strong);
    background: transparent;
    font-size: var(--cl-text-small);
    font-weight: 600;
    color: var(--cl-ink-2);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.cl-lens-tab:hover { background: var(--cl-paper-raised); color: var(--cl-ink); }
/* :hover outranks a bare class — restate the active look for hovered state too */
.cl-lens-tab--active,
.cl-lens-tab--active:hover {
    background: var(--cl-ink);
    border-color: var(--cl-ink);
    color: var(--cl-paper);
}

.cl-lens {
    max-width: 760px;
    margin: 0 auto;
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-md);
    padding: var(--cl-space-6);
}
.cl-lens__scenario {
    font-family: var(--cl-font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--cl-ink-2);
    margin-bottom: var(--cl-space-5);
}

.cl-miniqa { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-miniqa__q {
    align-self: flex-end;
    max-width: 80%;
    background: var(--cl-paper-sunken);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md) var(--cl-radius-md) var(--cl-radius-sm) var(--cl-radius-md);
    padding: var(--cl-space-3) var(--cl-space-4);
    font-size: var(--cl-text-small);
    font-weight: 500;
    color: var(--cl-ink);
}
.cl-miniqa__a {
    align-self: flex-start;
    max-width: 92%;
    border-left: 2px solid var(--cl-accent);
    padding: var(--cl-space-1) var(--cl-space-4);
    font-size: var(--cl-text-body);
    line-height: 1.7;
    color: var(--cl-ink-2);
}
.cl-miniqa__a .cl-cite { cursor: default; }

.cl-lenses__note {
    text-align: center;
    max-width: 640px;
    margin: var(--cl-space-6) auto 0;
    font-size: var(--cl-text-small);
    color: var(--cl-ink-3);
}

/* --- 6.5 Trust strip --- */
.cl-truststrip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cl-space-6);
}
.cl-truststrip__col h3 {
    font-size: var(--cl-text-h3);
    font-weight: 600;
    margin-bottom: var(--cl-space-3);
}
.cl-truststrip__col p { font-size: var(--cl-text-small); line-height: 1.7; }

/* --- 6.6 Deep band: founder note + final CTA --- */
.cl-deepband { color: var(--cl-ink-on-deep); }
.cl-deepband .cl-overline { color: var(--cl-ink-on-deep-2); }
.cl-deepband h2, .cl-deepband h3 { color: var(--cl-ink-on-deep); }
.cl-deepband p { color: var(--cl-ink-on-deep-2); }

.cl-founder__body {
    max-width: 62ch;
    font-family: var(--cl-font-display);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.75;
}
.cl-founder__body p { color: var(--cl-ink-on-deep); opacity: 0.92; }
.cl-founder__sig {
    margin-top: var(--cl-space-6);
    font-family: var(--cl-font-body);
    font-size: var(--cl-text-small);
    color: var(--cl-ink-on-deep-2);
}
.cl-founder__sig strong { color: var(--cl-ink-on-deep); font-weight: 600; }

/* --- 6.7 Pricing teaser --- */
.cl-teaser { text-align: center; max-width: 620px; margin: 0 auto; }
.cl-teaser .cl-h2 { margin-bottom: var(--cl-space-4); }
.cl-teaser p { font-size: var(--cl-text-lede); }

/* --- 6.8 FAQ --- */
.cl-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cl-space-6) var(--cl-space-8);
}
.cl-faq__item h3, .cl-faq__item h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--cl-space-2); }
/* Measure cap on the answer text itself — the column is free to be as wide as
   the display allows; a 200-character line just isn't readable. */
.cl-faq__item p { font-size: var(--cl-text-small); line-height: 1.7; margin: 0; max-width: 72ch; }

/* --- 6.9 Final CTA --- */
.cl-finalcta { text-align: center; max-width: 640px; margin: 0 auto; }
.cl-finalcta .cl-h2 { font-size: var(--cl-text-h2); margin-bottom: var(--cl-space-4); }
.cl-finalcta .cl-cta-row { justify-content: center; margin-top: var(--cl-space-5); }

/* =============================== 7. DEMO ================================= */
.cl-demo__honesty-wrap { text-align: center; }
.cl-demo__honesty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto var(--cl-space-5);
    padding: 7px 16px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    background: var(--cl-accent-soft);
    font-size: var(--cl-text-small);
    color: var(--cl-ink-2);
}
.cl-demo__honesty::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cl-accent);
    flex: none;
}

.cl-demo__desk {
    position: relative;
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
    padding: var(--cl-space-6);
    min-height: 380px;
}

/* Stage A — scenario picker */
.cl-demo__scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cl-space-4);
}
.cl-demo-scn {
    text-align: left;
    background: var(--cl-paper);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: var(--cl-space-5);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-2);
}
.cl-demo-scn:hover { border-color: var(--cl-accent); box-shadow: var(--cl-shadow-md); transform: translateY(-2px); }
.cl-demo-scn__folder {
    font-family: var(--cl-font-mono);
    font-size: var(--cl-text-mono);
    color: var(--cl-ink-3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-demo-scn__folder::before {
    content: "";
    width: 14px; height: 11px; flex: none;
    border: 1px solid var(--cl-border-strong);
    border-radius: 2px 4px 2px 2px;
    background: var(--cl-accent-soft);
}
.cl-demo-scn__title { font-size: 1.0625rem; font-weight: 600; color: var(--cl-ink); }
.cl-demo-scn__count { font-size: var(--cl-text-small); color: var(--cl-ink-3); }

/* Stage bar — current folder + reset */
.cl-demo__bar {
    display: flex;
    align-items: center;
    gap: var(--cl-space-3);
    margin-bottom: var(--cl-space-5);
    padding-bottom: var(--cl-space-4);
    border-bottom: 1px solid var(--cl-hairline);
}
.cl-demo__bar-folder {
    font-family: var(--cl-font-mono);
    font-size: var(--cl-text-mono);
    color: var(--cl-ink-2);
}
.cl-demo__bar-reset {
    margin-left: auto;
    background: none;
    border: none;
    font-size: var(--cl-text-small);
    font-weight: 600;
    color: var(--cl-accent-ink);
    cursor: pointer;
    padding: 4px 8px;
}
.cl-demo__bar-reset:hover { text-decoration: underline; }

/* Stage B/C — panels */
.cl-demo__panels {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--cl-space-6);
    align-items: start;
}

.cl-demo-chat { display: flex; flex-direction: column; gap: var(--cl-space-4); }
.cl-demo-chat__hint { font-size: var(--cl-text-small); color: var(--cl-ink-3); margin: 0; }
.cl-demo-chat__chips { display: flex; flex-direction: column; gap: var(--cl-space-2); align-items: flex-start; }
.cl-chip {
    padding: 10px 16px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius-full);
    background: var(--cl-paper);
    font-size: var(--cl-text-small);
    font-weight: 500;
    color: var(--cl-ink);
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.cl-chip:hover { border-color: var(--cl-accent); background: var(--cl-accent-soft); }

.cl-demo-msg--q {
    align-self: flex-end;
    max-width: 88%;
    background: var(--cl-paper-sunken);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md) var(--cl-radius-md) var(--cl-radius-sm) var(--cl-radius-md);
    padding: var(--cl-space-3) var(--cl-space-4);
    font-size: var(--cl-text-small);
    font-weight: 500;
    color: var(--cl-ink);
}
.cl-demo-msg--a {
    border-left: 2px solid var(--cl-accent);
    padding: var(--cl-space-1) 0 var(--cl-space-1) var(--cl-space-4);
    font-size: var(--cl-text-body);
    line-height: 1.75;
    color: var(--cl-ink-2);
    min-height: 1.75em;
}
.cl-demo-chat__cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--cl-accent);
    vertical-align: text-bottom;
    animation: cl-blink 0.9s steps(2) infinite;
}
@keyframes cl-blink { 50% { opacity: 0; } }

.cl-demo-chat__more { display: flex; flex-direction: column; gap: var(--cl-space-2); align-items: flex-start; margin-top: var(--cl-space-2); }

/* Source panel */
.cl-demo-source { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-demo-source__label {
    font-size: var(--cl-text-overline);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    margin: 0;
}
.cl-demo-doc {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-paper);
    padding: var(--cl-space-4);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cl-demo-doc--active { border-color: var(--cl-accent); box-shadow: var(--cl-shadow-md); }
.cl-demo-doc__name {
    font-family: var(--cl-font-mono);
    font-size: 0.75rem;
    color: var(--cl-ink-3);
    margin-bottom: var(--cl-space-2);
    overflow-wrap: anywhere;
}
.cl-demo-doc__text { font-size: var(--cl-text-small); line-height: 1.7; color: var(--cl-ink-2); margin: 0; }
.cl-demo-doc__text .cl-mark { color: var(--cl-ink); }

.cl-demo-source__placeholder {
    border: 1px dashed var(--cl-border-strong);
    border-radius: var(--cl-radius-md);
    padding: var(--cl-space-6);
    text-align: center;
    font-size: var(--cl-text-small);
    color: var(--cl-ink-3);
}

/* Mobile inline snippet connector (no JS thread below 720px). Hidden on
   desktop, where the source panel + drawn thread carry the citation. */
.cl-demo-doc--inline { display: none; margin-top: var(--cl-space-2); position: relative; }
.cl-demo-doc--inline::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 24px;
    width: 1.5px;
    height: 12px;
    background: var(--cl-accent);
}

/* Stage D — artifact beat */
.cl-demo__artifact {
    margin-top: var(--cl-space-6);
    padding-top: var(--cl-space-5);
    border-top: 1px solid var(--cl-hairline);
    display: flex;
    align-items: center;
    gap: var(--cl-space-5);
    flex-wrap: wrap;
}
.cl-demo__artifact-lead { font-size: var(--cl-text-body); font-weight: 600; color: var(--cl-ink); margin: 0; }

.cl-artifact-card {
    background: var(--cl-paper);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    box-shadow: var(--cl-shadow-sm);
    padding: var(--cl-space-4);
    min-width: 220px;
    max-width: 300px;
}
.cl-artifact-card__logo { width: 28px; height: 8px; border-radius: 2px; background: var(--cl-accent-wash); margin-bottom: var(--cl-space-2); }
.cl-artifact-card__title { font-family: var(--cl-font-display); font-weight: 560; font-size: 0.9375rem; color: var(--cl-ink); margin-bottom: var(--cl-space-2); }
.cl-artifact-card__line { font-size: 0.75rem; line-height: 1.6; color: var(--cl-ink-2); margin: 0 0 4px; display: flex; gap: 6px; align-items: baseline; }
.cl-artifact-card__line::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cl-accent); flex: none; align-self: center; }

.cl-artifact-timeline { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.cl-artifact-timeline__event { display: flex; align-items: baseline; gap: 8px; font-size: 0.75rem; color: var(--cl-ink-2); }
.cl-artifact-timeline__event::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-accent); flex: none; align-self: center; }
.cl-artifact-timeline__date { font-family: var(--cl-font-mono); font-size: 0.6875rem; color: var(--cl-ink-3); flex: none; min-width: 52px; }

/* ============================== 8. PRICING =============================== */
.cl-price-grid {
    display: grid;
    /* Columns divide whatever width the container has — no px cap, which is what
       left ~290px of every row empty while the feature lines inside the cards
       wrapped. Four paid tiers land as a balanced 2×2, and go 4-across once that
       gives each card more room than the 2×2 does at this width (see below). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cl-space-5);
    justify-content: center;
    margin-top: var(--cl-space-6);
}
.cl-price {
    position: relative;
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-sm);
    padding: var(--cl-space-6);
    display: flex;
    flex-direction: column;
}
.cl-price--featured { border-color: var(--cl-border-strong); box-shadow: var(--cl-shadow-lg); }
.cl-price__ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cl-ink);
    color: var(--cl-paper);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 14px;
    border-radius: var(--cl-radius-full);
}
.cl-price__name { font-family: var(--cl-font-display); font-size: 1.35rem; font-weight: 560; margin-bottom: var(--cl-space-2); }
.cl-price__desc { font-size: var(--cl-text-small); color: var(--cl-ink-2); min-height: 44px; }
.cl-price__amount { margin: var(--cl-space-3) 0 var(--cl-space-1); }
.cl-price__num { font-family: var(--cl-font-display); font-size: 2.6rem; font-weight: 560; color: var(--cl-ink); }
.cl-price__per { color: var(--cl-ink-3); font-size: var(--cl-text-body); }
.cl-price__note { font-size: 0.8125rem; color: var(--cl-ink-3); margin-bottom: var(--cl-space-5); }
.cl-price__features { list-style: none; margin: var(--cl-space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-price__features li { display: flex; align-items: baseline; gap: 10px; font-size: var(--cl-text-small); color: var(--cl-ink-2); }
.cl-price__features li svg { flex: none; align-self: center; width: 16px; height: 16px; color: var(--cl-success); }
.cl-price__features strong { color: var(--cl-ink); }

.cl-contact-strip {
    margin-top: var(--cl-space-7);
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    padding: var(--cl-space-5) var(--cl-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-5);
    flex-wrap: wrap;
}
.cl-contact-strip h2, .cl-contact-strip h3 { font-size: var(--cl-text-h3); font-weight: 600; margin-bottom: 4px; }
.cl-contact-strip p { margin: 0; font-size: var(--cl-text-small); }

.cl-compare-wrap { overflow-x: auto; }
.cl-compare { width: 100%; border-collapse: collapse; background: var(--cl-paper-raised); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-lg); overflow: hidden; }
.cl-compare th, .cl-compare td {
    text-align: left;
    padding: var(--cl-space-3) var(--cl-space-5);
    border-bottom: 1px solid var(--cl-hairline);
    font-size: var(--cl-text-small);
    color: var(--cl-ink-2);
}
.cl-compare th { font-weight: 600; color: var(--cl-ink); background: var(--cl-paper-sunken); }
.cl-compare__feat { background: var(--cl-accent-soft); }
.cl-compare__group td {
    font-size: var(--cl-text-overline);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
    background: var(--cl-paper);
    padding-top: var(--cl-space-4);
}
.cl-compare .dash { color: var(--cl-ink-3); }
.cl-compare svg { vertical-align: middle; width: 16px; height: 16px; color: var(--cl-success); }

/* CTA band (pricing page) */
.cl-cta { background: var(--cl-paper-deep); border-radius: var(--cl-radius-lg); }
.cl-cta__inner { text-align: center; padding: var(--cl-space-8) var(--cl-space-6); }
.cl-cta__inner h2 { font-family: var(--cl-font-display); font-size: var(--cl-text-h2); font-weight: 540; color: var(--cl-ink-on-deep); margin-bottom: var(--cl-space-3); }
.cl-cta__inner p { color: var(--cl-ink-on-deep-2); margin-bottom: var(--cl-space-5); }
.cl-cta .cl-cta-row { justify-content: center; }

/* ============================ 9. TRUST PAGE ============================== */
.cl-trustpage { max-width: 720px; margin: 0 auto; }
.cl-trustpage__reviewed { font-family: var(--cl-font-mono); font-size: var(--cl-text-mono); color: var(--cl-ink-3); margin-bottom: var(--cl-space-6); }
.cl-trustpage h1 {
    font-family: var(--cl-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 560;
    line-height: 1.12;
    letter-spacing: -0.012em;
    margin-bottom: var(--cl-space-4);
}
.cl-trustpage h2 {
    font-family: var(--cl-font-display);
    font-size: 1.45rem;
    font-weight: 560;
    margin: var(--cl-space-7) 0 var(--cl-space-3);
}
.cl-trustpage p { line-height: 1.75; }
.cl-trustpage ul { color: var(--cl-ink-2); line-height: 1.8; padding-left: 1.2em; }
.cl-trustpage li { margin-bottom: var(--cl-space-2); }
.cl-trustpage .cl-thread-rule { margin: var(--cl-space-7) 0; }
.cl-trustpage__short {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-sm);
    padding: var(--cl-space-5) var(--cl-space-6);
    margin: var(--cl-space-6) 0;
}
.cl-trustpage__short h2 { margin-top: 0; font-size: 1.1rem; }
.cl-trustpage__links { margin-top: var(--cl-space-7); display: flex; gap: var(--cl-space-5); }

/* =========================== 10. LEGAL + 404 ============================= */
.cl-legal { max-width: 760px; margin: 0 auto; }
.cl-legal__meta { font-family: var(--cl-font-mono); font-size: var(--cl-text-mono); color: var(--cl-ink-3); }
.cl-legal__notice {
    background: var(--cl-warn-wash);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: var(--cl-space-4) var(--cl-space-5);
    color: var(--cl-ink-2);
    font-size: var(--cl-text-small);
}
.cl-legal h1, .cl-legal h2, .cl-legal h3 { font-family: var(--cl-font-display); font-weight: 560; margin: var(--cl-space-6) 0 var(--cl-space-3); }
.cl-legal h4 { font-family: var(--cl-font-display); font-weight: 560; font-size: var(--cl-text-body); margin: var(--cl-space-5) 0 var(--cl-space-2); }
.cl-legal p, .cl-legal li { color: var(--cl-ink-2); line-height: 1.75; }
.cl-legal table { border-collapse: collapse; width: 100%; }
.cl-legal th, .cl-legal td { border: 1px solid var(--cl-border); padding: var(--cl-space-2) var(--cl-space-3); font-size: var(--cl-text-small); }

/* Body-fragment hooks. These mirror Clarilytic.App/wwwroot/css/legal.css — the
   published document is one HTML fragment rendered by both sites, so a class it
   uses that only one site styles is a rendering bug waiting for the next publish.
   That is exactly what happened here: these three were missing while Terms was
   published as a PDF, so nothing rendered the fragment and nobody noticed. */
.cl-legal__toc {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: var(--cl-space-4) var(--cl-space-5);
    margin: var(--cl-space-5) 0;
}
.cl-legal__toc h4 { margin: 0 0 var(--cl-space-2); }
.cl-legal__toc ol { padding-left: var(--cl-space-5); margin: 0; }
.cl-legal__toc li { line-height: 1.6; }
.cl-legal ol.cl-legal__list { padding-left: var(--cl-space-5); margin: var(--cl-space-3) 0; }
.cl-legal li + li { margin-top: var(--cl-space-2); }

/* Warranty disclaimers and the liability cap are stored in sentence case and
   uppercased here, matching the App. Conspicuousness is the point — these
   clauses are only enforceable if they stand out from the surrounding text. */
.cl-legal__caps {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--cl-ink-1);
}

/* Inline PDF legal documents (pdf.js). pdfViewer.js sets each page wrapper to
   a fixed pixel width; constrain it responsively here. */
.legal-pdf-host { width: 100%; margin-top: var(--cl-space-4); }
.legal-pdf-host .pdf-page-wrapper {
    width: 100% !important;
    max-width: 820px;
    margin: 0 auto var(--cl-space-4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--cl-border);
    border-radius: 4px;
    overflow: hidden;
}
.legal-pdf-host canvas { width: 100% !important; height: auto !important; }
.legal-pdf-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--cl-text-small);
    font-weight: 600;
    color: var(--cl-marigold, #C77D0A);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 8px;
    margin-bottom: var(--cl-space-3);
}
.legal-pdf-download:hover { text-decoration: underline; }

.cl-notfound {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-4);
    text-align: center;
    padding: var(--cl-space-8) var(--cl-space-5);
}
.cl-notfound__code {
    font-family: var(--cl-font-display);
    font-size: 5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--cl-ink);
}
.cl-notfound__code mark { background: linear-gradient(transparent 35%, var(--cl-accent-wash) 35% 90%, transparent 90%); color: inherit; }
.cl-notfound h1, .cl-notfound h2 { font-size: 1.4rem; }
.cl-notfound p { color: var(--cl-ink-2); max-width: 380px; }

/* ============================== 11. MEDIA ================================ */
/* Wide displays: four tiers in one row. The crossover is where the 2×2 starts
   looking empty rather than roomy — past ~1600px each of two cards is 780px+ of
   mostly whitespace, while four still get ~354px, which is a normal pricing
   card. Checked both ways in a browser at 1600 and 1920. */
@media (min-width: 1600px) {
    .cl-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cl-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .cl-hero__grid { grid-template-columns: 1fr; gap: var(--cl-space-6); }
    .cl-hero__visual { padding-top: 0; max-width: 480px; }
    .cl-hero__thread { display: none; }
    .cl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-truststrip { grid-template-columns: 1fr; }
    .cl-price-grid { grid-template-columns: minmax(0, 460px); }
}

@media (max-width: 720px) {
    .cl-section { padding: var(--cl-space-8) 0; }
    .cl-nav__links {
        display: none;
        position: absolute;
        top: var(--cl-nav-h);
        left: 0;
        right: 0;
        background: var(--cl-paper);
        border-bottom: 1px solid var(--cl-border);
        flex-direction: column;
        gap: 0;
        padding: var(--cl-space-3) var(--cl-space-5);
        box-shadow: var(--cl-shadow-md);
    }
    .cl-nav--open .cl-nav__links { display: flex; }
    .cl-nav__links .cl-nav__link { padding: var(--cl-space-3) 0; border-bottom: 1px solid var(--cl-hairline); }
    .cl-nav__burger { display: block; }
    .cl-nav__signin { display: none; }

    .cl-demo__panels { grid-template-columns: 1fr; }
    .cl-demo__scenarios { grid-template-columns: 1fr; }
    .cl-demo__desk { padding: var(--cl-space-4); }
    .cl-demo-source { display: none; }
    .cl-demo-doc--inline { display: block; }
    .cl-passport { padding: var(--cl-space-4); }
    .cl-passport__panels { grid-template-columns: 1fr; }
    .cl-bento { grid-template-columns: minmax(0, 1fr); }
    .cl-faq { grid-template-columns: 1fr; }
    .cl-footer__top { flex-direction: column; }
    .cl-footer__cols { margin-left: 0; gap: var(--cl-space-6); }
    .cl-lenses__tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--cl-space-2); }
    .cl-lens-tab { flex: none; }
    .cl-lens { padding: var(--cl-space-5); }
}

@media (max-width: 420px) {
    .cl-container { padding: 0 var(--cl-space-4); }
    .cl-cta-row { flex-direction: column; align-items: stretch; }
    .cl-cta-row .cl-btn { width: 100%; }
}

/* ========================= 12. REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .cl-reveal { opacity: 1; transform: none; }
    .cl-demo-chat__cursor { animation: none; }
}

/* ==================== 13. AUTHORING SHOWCASE + DEMO ======================
   The ink-dark showcase band (a lit paper "page" on the desk) and the
   guided drafting demo. Reuses the demo desk vocabulary; cl-author__side
   replaces cl-demo-source on the right so it survives the mobile hide. */

/* On the dark band the highlighter swipe must flip its text to ink —
   inherited on-deep white on the pale wash is unreadable. Solid wash, not
   the gradient: its transparent slivers would swallow ink glyphs on dark. */
.cl-deepband mark.cl-mark {
    background: var(--cl-accent-wash);
    color: var(--cl-ink);
}

/* Showcase band */
.cl-authero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--cl-space-8);
    align-items: center;
}
.cl-authero__points {
    list-style: none;
    margin: var(--cl-space-5) 0 var(--cl-space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
}
.cl-authero__points li {
    display: flex;
    gap: 10px;
    color: var(--cl-ink-on-deep-2);
    font-size: var(--cl-text-body);
}
.cl-authero__points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cl-accent);
    flex: none;
    align-self: center;
}

/* The lit page — a raised paper card on the dark desk */
.cl-authero__mock {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
    padding: var(--cl-space-5);
    max-width: 460px;
    justify-self: center;
    width: 100%;
}
.cl-authero__mock-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cl-space-2);
    padding-bottom: var(--cl-space-3);
    margin-bottom: var(--cl-space-3);
    border-bottom: 1px solid var(--cl-hairline);
    font-family: var(--cl-font-mono);
    font-size: 0.75rem;
    color: var(--cl-ink-3);
}
.cl-authero__mock-page {
    margin-top: var(--cl-space-4);
    border-left: 2px solid var(--cl-accent);
    padding-left: var(--cl-space-4);
}
.cl-authero__mock-text {
    font-size: var(--cl-text-small);
    line-height: 1.7;
    color: var(--cl-ink-2);
    margin: 0 0 var(--cl-space-2);
}

/* Outline rows — shared by the showcase mock and the demo */
.cl-author__outline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cl-author__sec {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--cl-text-small);
    color: var(--cl-ink-2);
}
.cl-author__sec::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--cl-border-strong);
    background: var(--cl-paper-raised);
    flex: none;
}
.cl-author__sec-state {
    margin-left: auto;
    font-family: var(--cl-font-mono);
    font-size: 0.6875rem;
    color: var(--cl-ink-3);
    flex: none;
}
.cl-author__sec--briefed::before { border-color: var(--cl-accent); }
.cl-author__sec--drafting::before {
    border-color: var(--cl-accent);
    background: var(--cl-accent);
    animation: clAuthorPulse 900ms ease-in-out infinite;
}
.cl-author__sec--drafting .cl-author__sec-state { color: var(--cl-accent-ink); }
.cl-author__sec--drafted { color: var(--cl-ink); }
.cl-author__sec--drafted::before {
    border-color: var(--cl-accent);
    background: var(--cl-accent);
}
@keyframes clAuthorPulse { 50% { opacity: 0.35; } }

/* Demo: two scenario cards, not three */
.cl-author__scenarios { grid-template-columns: repeat(2, 1fr); }

/* Demo: featured section drafting on the page */
.cl-author__featured { margin-top: var(--cl-space-2); }
.cl-author__featured-h {
    font-family: var(--cl-font-display);
    font-weight: 560;
    font-size: 1.0625rem;
    color: var(--cl-ink);
    margin: 0 0 var(--cl-space-2);
}
.cl-author__note {
    margin-top: var(--cl-space-3);
    border: 1px dashed var(--cl-border-strong);
    border-radius: var(--cl-radius-md);
    background: var(--cl-accent-soft);
    padding: 10px 14px;
    font-size: var(--cl-text-small);
    color: var(--cl-ink-2);
}

/* Demo: right panel (interview, then example sources) */
.cl-author__side {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
    align-items: flex-start;
}
.cl-author__side .cl-demo-doc { width: 100%; }
.cl-author__qa {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
    width: 100%;
}
.cl-author__q {
    font-size: var(--cl-text-small);
    font-weight: 600;
    color: var(--cl-ink);
    margin: 0 0 4px;
}
.cl-author__a {
    background: var(--cl-paper-sunken);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 8px 12px;
    font-size: var(--cl-text-small);
    color: var(--cl-ink-2);
}

@media (max-width: 980px) {
    .cl-authero { grid-template-columns: 1fr; gap: var(--cl-space-6); }
    .cl-authero__mock { justify-self: start; }
}
@media (max-width: 720px) {
    .cl-author__scenarios { grid-template-columns: 1fr; }
}

/* ==================== 14. FEATURE SHOWCASE BANDS ========================
   Same shape as the Authoring band — argument on one side, a full-size
   artifact on the other — but on paper rather than the ink desk, so three
   showcases in a row don't read as three identical dark slabs. Sides
   alternate down the page via --flip. */
/* minmax(0, …) throughout: a bare 1fr floors at min-content, which lets the
   copy column refuse to shrink and push the page sideways on a phone. */
.cl-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--cl-space-8);
    align-items: center;
}
/* The artifact leads on flipped bands. Source order keeps the copy first so
   a screen reader and a narrow viewport both get the argument before the
   evidence; only the visual order swaps. */
.cl-showcase--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.cl-showcase--flip .cl-showcase__copy { order: 2; }
.cl-showcase--flip .cl-showcase__art { order: 1; }

.cl-showcase__points {
    list-style: none;
    margin: var(--cl-space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
}
.cl-showcase__points li {
    display: flex;
    gap: 10px;
    color: var(--cl-ink-2);
    font-size: var(--cl-text-body);
}
/* Aligned to the first line, not the item's centre — these points run to two
   lines, and a centred dot drifts into the gap between them. */
.cl-showcase__points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cl-accent);
    flex: none;
    align-self: flex-start;
    margin-top: 0.55em;
}

.cl-showcase__art {
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
    padding: var(--cl-space-5);
    width: 100%;
}
.cl-showcase__art-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cl-space-2);
    padding-bottom: var(--cl-space-3);
    margin-bottom: var(--cl-space-4);
    border-bottom: 1px solid var(--cl-hairline);
    font-family: var(--cl-font-mono);
    font-size: 0.75rem;
    color: var(--cl-ink-3);
}
.cl-showcase__caption {
    margin: var(--cl-space-4) 0 0;
    font-size: 0.75rem;
    color: var(--cl-ink-3);
}

/* --- Answer-grid artifact: a real table, because that is the product --- */
/* Four columns cannot compress below ~410px; on a phone the table scrolls
   inside its own card rather than pushing the page sideways (same treatment
   as the pricing comparison table). */
.cl-agrid-wrap { overflow-x: auto; }
.cl-agrid { width: 100%; min-width: 380px; border-collapse: collapse; font-size: var(--cl-text-small); }
.cl-agrid th, .cl-agrid td {
    text-align: left;
    padding: 10px var(--cl-space-3);
    border-bottom: 1px solid var(--cl-hairline);
    vertical-align: top;
}
.cl-agrid th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-ink-3);
}
.cl-agrid td { color: var(--cl-ink-2); }
.cl-agrid tr:last-child td { border-bottom: 0; }
.cl-agrid__doc { font-family: var(--cl-font-mono); font-size: 0.6875rem; color: var(--cl-ink-3); }
.cl-agrid__none { color: var(--cl-ink-3); }

/* --- Stress-test artifact: findings ranked, absences included --- */
.cl-stress { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-stress__row { display: flex; gap: var(--cl-space-3); align-items: baseline; }
.cl-stress__sev {
    flex: none;
    width: 62px;
    font-family: var(--cl-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--cl-radius-sm);
    text-align: center;
    border: 1px solid var(--cl-border);
    color: var(--cl-ink-3);
}
.cl-stress__sev--critical { border-color: var(--cl-accent); color: var(--cl-accent-ink); background: var(--cl-accent-wash); }
.cl-stress__sev--high { border-color: var(--cl-accent); color: var(--cl-accent-ink); }
.cl-stress__find { font-size: var(--cl-text-small); color: var(--cl-ink); margin: 0 0 2px; font-weight: 600; }
.cl-stress__why { font-size: 0.75rem; color: var(--cl-ink-2); margin: 0; }

@media (max-width: 980px) {
    .cl-showcase,
    .cl-showcase--flip { grid-template-columns: minmax(0, 1fr); gap: var(--cl-space-6); }
    /* Argument before evidence once the band stacks, on every band. */
    .cl-showcase--flip .cl-showcase__copy { order: 1; }
    .cl-showcase--flip .cl-showcase__art { order: 2; }
}

/* ─────────────────────────────────────────────────────────────
   Pilot-phase announcement bar (invite-only pilot). Soft marigold
   wash — accent stays a highlighter tint, not a solid fill.
   ───────────────────────────────────────────────────────────── */
.cl-pilotbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-3);
    flex-wrap: wrap;
    background: var(--cl-accent-soft);
    border-bottom: 1px solid var(--cl-border-strong);
    color: var(--cl-ink-2);
    font-size: var(--cl-text-small);
    padding: var(--cl-space-2) var(--cl-space-4);
    text-align: center;
}

.cl-pilotbar__text strong { color: var(--cl-ink); }

.cl-pilotbar__cta {
    color: var(--cl-accent-ink);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Pilot-access request form (/pilot) — paper-native, ink-on-paper inputs.
   ---------------------------------------------------------------------------- */
.cl-pilot { max-width: 680px; }
.cl-pilot-intro { margin-bottom: var(--cl-space-7); }
.cl-pilot-intro .cl-lede { margin-top: var(--cl-space-3); }

.cl-form { display: flex; flex-direction: column; gap: var(--cl-space-5); }
.cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-4); }
@media (max-width: 560px) { .cl-field-row { grid-template-columns: 1fr; } }

.cl-field { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.cl-field-label { font-size: var(--cl-text-small); font-weight: 600; color: var(--cl-ink-2); }
.cl-req { color: var(--cl-accent-ink); margin-left: 2px; }

.cl-input {
    width: 100%;
    font-family: var(--cl-font-body);
    font-size: var(--cl-text-body);
    color: var(--cl-ink);
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border-control);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cl-input::placeholder { color: var(--cl-ink-3); }
.cl-input:focus {
    outline: none;
    border-color: var(--cl-accent-ink);
    box-shadow: 0 0 0 3px var(--cl-accent-wash);
}
.cl-textarea { resize: vertical; min-height: 96px; }
select.cl-input { appearance: none; cursor: pointer; }

/* Account-type choice — two selectable cards backed by radio inputs. */
.cl-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-4); }
@media (max-width: 560px) { .cl-choice-row { grid-template-columns: 1fr; } }

.cl-choice {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--cl-paper-raised);
    border: 1px solid var(--cl-border-control);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cl-choice:hover { border-color: var(--cl-accent-ink); }
.cl-choice--active {
    border-color: var(--cl-accent-ink);
    box-shadow: 0 0 0 3px var(--cl-accent-wash);
}
.cl-choice input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.cl-choice-title { font-weight: 600; color: var(--cl-ink); }
.cl-choice-sub { font-size: var(--cl-text-small); color: var(--cl-ink-3); }

/* Honeypot — off-screen, never shown to a human. */
.cl-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.cl-turnstile { min-height: 65px; }

.cl-form-error {
    color: var(--cl-danger);
    font-size: var(--cl-text-small);
    margin: 0;
}
.cl-form-actions { margin-top: var(--cl-space-2); }
.cl-form-fineprint { font-size: var(--cl-text-small); color: var(--cl-ink-3); margin: 0; }

/* Success state */
.cl-pilot-done { text-align: center; max-width: 520px; margin: var(--cl-space-8) auto; }
.cl-pilot-done p { margin: var(--cl-space-4) 0 var(--cl-space-6); color: var(--cl-ink-2); }
.cl-pilot-check {
    width: 56px; height: 56px; margin: 0 auto var(--cl-space-4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--cl-success);
    background: var(--cl-success-wash); border-radius: 50%;
}