/* ============================================================================
   CallVerifier · Public site
   ----------------------------------------------------------------------------
   One stylesheet for every public page. It replaces landing.css,
   landing-2026.css and landing-2027.css, which had grown into three layers
   overriding each other rule by rule — the reason the site read as three
   different designs stitched together.


   Loads AFTER cv-tokens.css and uses only var(--cv-*), so both themes work
   without this file knowing which one is on.

   ----------------------------------------------------------------------------
   THE IDEA: the page is a test report.

   CallVerifier sells evidence — "here is what your number looked like on six
   networks". So the site is set like a report rather than a brochure:

     1. HAIRLINES, NOT BOXES. A rule between two rows says "these are related"
        just as well as a card does, costs 1px instead of 32px of padding, and
        does not need a shadow to explain itself. Radius is 0 almost
        everywhere; there is no box-shadow in this file.

     2. MONO LABELS, SANS PROSE. Anything that names a thing — a column head,
        a section number, a status — is JetBrains Mono, uppercase, tracked
        out. Anything a human reads in sentences is Inter. The reader can tell
        chrome from content without reading either.

     3. ONE SPINE. Everything lines up on a single left edge. Centred text is
        used once, in nothing.

     4. VERDICTS ARE WORDS. PASS / FLAG / FAIL are set in mono with a colour
        and a 2px accent, not in a rounded pill. A pill is a decoration; the
        word is the data.

   The sections read top to bottom like a document: what it is, proof, what
   you get, how it runs, what it looks like, what it costs, start.
   ============================================================================ */

/* ============================================================================
   01 · BASE
   ============================================================================ */

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--cv-bg);
    color: var(--cv-ink);
    font-family: var(--cv-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* The report look leans on hairlines, which disappear if the browser
       antialiases the text heavily against a mid-tone. */
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--cv-mint);
    outline-offset: 2px;
    border-radius: 2px;
}

.cv-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--cv-mint);
    color: var(--cv-on-mint);
    font: var(--cv-weight-semibold) 0.875rem/1 var(--cv-sans);
}
.cv-skip:focus { left: 0; }

/* Hide from sighted users, keep for screen readers and for SEO text that
   would otherwise duplicate a visible heading. */
.rp-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   02 · LAYOUT
   ----------------------------------------------------------------------------
   One container, one rhythm. --rp-pad is the page gutter and is reused as the
   inset on anything that has to line up with the container's edge from the
   inside, so a full-bleed rule and the text above it share a left edge.
   ============================================================================ */

:root {
    --rp-max:      1180px;
    --rp-pad:      clamp(1.25rem, 4vw, 2.5rem);
    --rp-sec:      clamp(3rem, 6vw, 5rem);     /* space above/below a section */
    --rp-stack:    clamp(1.5rem, 3vw, 2.25rem);/* space between blocks within */
    --rp-measure:  64ch;                        /* readable prose width        */
}

.cv-wrap,
.rp-wrap {
    width: 100%;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding-inline: var(--rp-pad);
}

/* A section is a band of the document with a rule on top. The rule is the
   section break; there is no card, tint or shadow doing that job. */
.rp-sec {
    padding-block: var(--rp-sec);
    border-top: 1px solid var(--cv-line);
}
.rp-sec:first-of-type { border-top: 0; }

/* A section head: mono kicker, plain heading, one line of prose. Always left,
   always the same three parts, so the reader learns the shape once. */
.rp-head { margin-bottom: var(--rp-stack); }

/* .cv-eyebrow is the same thing under the older name, still used by the
   country and trial pages. It had been left with nothing but the ::before
   override below, so it rendered as plain body copy on all three. */
.rp-head__kicker,
.cv-eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-mint-ink);
}

.rp-head__title {
    max-width: 22ch;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.rp-head__sub {
    max-width: var(--rp-measure);
    margin-top: 0.875rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}

/* Head with an action parked on the right at wide widths. */
.rp-head--split { display: grid; gap: 1rem; }
@media (min-width: 60rem) {
    .rp-head--split {
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: end;
    }
    .rp-head--split > :last-child { justify-self: end; }
}

.rp-prose { max-width: var(--rp-measure); color: var(--cv-ink-soft); }
.rp-prose p + p { margin-top: 1rem; }

/* ============================================================================
   03 · TYPE HELPERS
   ============================================================================ */

/* The mono micro-label. Used for column heads, section numbers, statuses,
   anything that names rather than says. */
.rp-label {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-mono { font-family: var(--cv-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   04 · BUTTONS
   ----------------------------------------------------------------------------
   Two only: solid mint for the one action that matters on a screen, and a
   hairline ghost for everything else. A third style would be a third opinion.
   ============================================================================ */

.cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    font-weight: var(--cv-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cv-btn--primary {
    background: var(--cv-mint);
    border-color: var(--cv-mint);
    color: var(--cv-on-mint);
}
.cv-btn--primary:hover { background: var(--cv-mint-d); border-color: var(--cv-mint-d); }

.cv-btn--ghost {
    background: none;
    border-color: var(--cv-line);
    color: var(--cv-ink);
}
.cv-btn--ghost:hover { border-color: var(--cv-ink-mute); background: var(--cv-overlay); }

.cv-btn--sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.cv-btn.w-100 { width: 100%; }

/* A text link that behaves like an action: mono, tracked, with a rule under
   it so it reads as a control without needing a border on four sides. */
.rp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--cv-line);
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cv-mint-ink);
    transition: border-color 0.15s;
}
.rp-link:hover { border-bottom-color: var(--cv-mint); }

.rp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ============================================================================
   05 · STATUS STRIP
   ----------------------------------------------------------------------------
   The thin mono bar above the header. On a report this is the header block of
   the printout: who ran it, when, is everything up.
   ============================================================================ */

.cv-status-strip {
    border-bottom: 1px solid var(--cv-line);
    background: var(--cv-bg);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.cv-status-strip__inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding: 0.5rem var(--rp-pad);
}

.cv-status-strip__left,
.cv-status-strip__right { display: flex; gap: 1.5rem; min-width: 0; }

.cv-dot {
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--cv-mint);
    vertical-align: middle;
}

@media (max-width: 52rem) {
    .cv-status-strip__right { display: none; }
    .d-none-mobile { display: none; }
}

/* ============================================================================
   06 · HEADER / NAV
   ============================================================================ */

.cv-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--cv-line);
    background: var(--cv-veil);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cv-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding: 0.75rem var(--rp-pad);
}

.cv-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
    margin-right: auto;
    flex-shrink: 0; /* the nav may collapse, the brand never squeezes */
}
.cv-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.cv-brand__name { font-size: 1.0625rem; font-weight: var(--cv-weight-bold); letter-spacing: -0.01em; }
.cv-brand__accent { color: var(--cv-mint-ink); }
.cv-brand__tag {
    white-space: nowrap;
    font-family: var(--cv-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.cv-nav { display: flex; align-items: center; gap: 1.25rem; }

/* :not(.cv-btn) matters. Without it this rule, at specificity 0,3,0, beat
   .cv-btn--primary's own colour and painted the nav's solid mint button with
   near-white label text — 1.79:1, in both themes. A nav link and a nav button
   are different objects; only the link gets a link colour. */
.cv-nav > a:not(.cv-btn) {
    white-space: nowrap; /* "Free check" made the nav wrap "What you / get" onto two lines */
    font-size: 0.875rem;
    font-weight: var(--cv-weight-medium);
    color: var(--cv-ink-soft);
    text-decoration: none;
    transition: color 0.15s;
}
.cv-nav > a:not(.cv-btn):hover { color: var(--cv-ink); }

.cv-nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    background: none;
    color: var(--cv-ink);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.cv-lang-selector { position: relative; }
.cv-lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 9rem;
    padding: 0.25rem;
    border: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
}
.cv-lang-dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--cv-ink-soft);
}
.cv-lang-dropdown a:hover { background: var(--cv-overlay); color: var(--cv-ink); }

@media (max-width: 74rem) { /* was 62rem; with "Free check" and the full tagline the row needs ~1180px */
    .cv-nav-toggle { display: inline-flex; }
    .cv-nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem var(--rp-pad) 1.25rem;
        border-bottom: 1px solid var(--cv-line);
        background: var(--cv-bg);
    }
    .cv-nav.is-open { display: flex; }
    .cv-nav > a {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--cv-line-soft);
    }
    .cv-nav > a.cv-btn { margin-top: 0.75rem; border-bottom-width: 1px; justify-content: center; }
}

/* ============================================================================
   07 · THE REPORT PRIMITIVES
   ----------------------------------------------------------------------------
   The one piece of vocabulary the whole site is built from. A report is a
   stack of rows under a column head, separated by hairlines, with a verdict
   in the last column. Everything else on the page is a variation of it.
   ============================================================================ */

/* A sheet is a bordered block of rows. The only border-radius on the site,
   and it is 3px so it reads as paper rather than as a card. */
.rp-sheet {
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-2);
    overflow: hidden;
}

.rp-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

/* A row. Grid rather than flex so every row's columns line up down the
   sheet — the thing that makes it read as a table of results and not as a
   list of chips. */
.rp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6875rem 1rem;
    border-top: 1px solid var(--cv-line-soft);
}
.rp-row:first-child { border-top: 0; }

.rp-row__name {
    font-family: var(--cv-mono);
    font-size: 0.8125rem;
    color: var(--cv-ink-soft);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The verdict. A word, a colour, and a 2px rule to its left. No pill. */
.rp-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.625rem;
    border-left: 2px solid currentColor;
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    font-weight: var(--cv-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.rp-verdict--pass { color: var(--cv-mint-ink); }
.rp-verdict--warn { color: var(--cv-amber-ink); }
.rp-verdict--fail { color: var(--cv-red-ink); }
.rp-verdict--idle { color: var(--cv-ink-mute); }

/* A measurement sitting next to a verdict: right-aligned, tabular, muted. */
.rp-row__metric {
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cv-ink-mute);
    text-align: right;
}

/* The row lays itself out from the sheet's own width, not the window's.
   The sheet shares its column with the handset, so the window stopped being
   any guide to how much room a row actually has — on a wide screen it was
   still being told to use three columns inside 330px, which set the carrier
   names one letter per line. */
.rp-sheet { container-type: inline-size; container-name: rpsheet; }

@container rpsheet (min-width: 22rem) {
    .rp-row {
        grid-template-columns: minmax(0, 1fr) 5.5rem max-content;
    }
}

/* Anything without container query support keeps the old behaviour. */
@supports not (container-type: inline-size) {
    @media (min-width: 40rem) {
        .rp-row {
            grid-template-columns: minmax(0, 1fr) 5.5rem max-content;
        }
    }
}

/* ============================================================================
   08 · HERO
   ----------------------------------------------------------------------------
   Two columns: the claim, and one real report sheet proving it. No animation
   and no illustration — the sheet IS the picture, and it is the product.
   ============================================================================ */

.rp-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--rp-sec); }

.rp-hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

@media (min-width: 64rem) {
    /* The right column carries the handset and the report side by side, so
       it takes the larger share — at the old split the report was left with
       about 300px and had to stack every verdict under its carrier. */
    .rp-hero__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        /* Both columns run the full height of the row and the panel sits
           centred in its own, so the shorter of the two is short at both
           ends rather than leaving a hole under one of them. */
        align-items: stretch;
    }
}

.rp-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--cv-line);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-hero__title {
    max-width: 16ch;
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.rp-hero__lede {
    max-width: 52ch;
    margin-top: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}

.rp-hero__actions { margin-top: 1.75rem; }

.rp-hero__note {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--cv-ink-mute);
}

/* The four things it does, as a mono list under the fold line. */
.rp-hero__panel { display: grid; gap: 1.5rem; align-content: center; }

.rp-hero__does {
    display: grid;
    gap: 0;
    margin-top: 0;
    border-top: 1px solid var(--cv-line);
}
.rp-hero__does li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cv-line-soft);
    font-size: 0.875rem;
    color: var(--cv-ink-soft);
}
.rp-hero__does b {
    flex: 0 0 auto;
    min-width: 7.5rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-mint-ink);
}

/* ============================================================================
   09 · METRIC BAR
   ----------------------------------------------------------------------------
   Four numbers on one rule. Dividers between them rather than four boxes.
   ============================================================================ */

.rp-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--cv-line);
    border-bottom: 1px solid var(--cv-line);
}

@media (min-width: 48rem) {
    .rp-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rp-metric {
    padding: 1.25rem var(--rp-pad) 1.25rem 0;
    border-left: 1px solid var(--cv-line);
}
.rp-metric:first-child { border-left: 0; }
.rp-metric:not(:first-child) { padding-left: var(--rp-pad); }

@media (max-width: 47.99rem) {
    .rp-metric:nth-child(odd) { border-left: 0; padding-left: 0; }
    .rp-metric:nth-child(n+3) { border-top: 1px solid var(--cv-line); }
}

.rp-metric__label {
    display: block;
    font-family: var(--cv-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.rp-metric__value {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--cv-mono);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}
.cv-num-accent, .rp-metric__unit { color: var(--cv-mint-ink); }
.rp-metric__sub {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--cv-ink-mute);
}

/* ============================================================================
   10 · LIST SECTIONS
   ----------------------------------------------------------------------------
   Features, steps and cases are all the same object: a numbered entry on a
   rule, with a heading, a line of prose and an optional detail list. One
   class, three uses — which is why the page stops feeling like six designs.
   ============================================================================ */

.rp-entries { border-top: 1px solid var(--cv-line); }

.rp-entry {
    display: grid;
    gap: 0.5rem 2rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
    border-bottom: 1px solid var(--cv-line);
}

@media (min-width: 56rem) {
    .rp-entry {
        grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 0.9fr);
        align-items: start;
    }
}

.rp-entry__num {
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.1em;
    color: var(--cv-mint-ink);
    padding-top: 0.3rem;
}

.rp-entry__title {
    font-size: 1.1875rem;
    font-weight: var(--cv-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-entry__desc {
    max-width: 52ch;
    margin-top: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}

/* The detail column: short mono-led facts, each on its own hairline. */
.rp-entry__facts { align-self: start; }
.rp-entry__facts li {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--cv-line-soft);
    font-size: 0.8125rem;
    color: var(--cv-ink-soft);
}
.rp-entry__facts li:first-child { border-top: 0; }
.rp-entry__facts li::before {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 1px;
    margin-top: 0.55em;
    background: var(--cv-mint);
}

/* ============================================================================
   11 · SCREEN GALLERY
   ============================================================================ */

.rp-screens { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) {
    .rp-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rp-screen { display: flex; flex-direction: column; gap: 0.75rem; }

.rp-screen__frame {
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-2);
    overflow: hidden;
}
.rp-screen__frame img, .rp-screen__frame svg { width: 100%; display: block; }

.rp-screen__title {
    font-size: 1rem;
    font-weight: var(--cv-weight-semibold);
}
.rp-screen__desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--cv-ink-soft);
}

/* ============================================================================
   12 · QUOTE / FIELD NOTE
   ----------------------------------------------------------------------------
   Set as a pulled paragraph with a rule, not as a card with a big curly
   quote mark. These are anonymised patterns, and the typography should not
   oversell them as testimonials.
   ============================================================================ */

.rp-note {
    padding-left: 1rem;
    border-left: 2px solid var(--cv-line);
}
.rp-note__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}
.rp-note__attr {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

/* ============================================================================
   13 · PRICING CATALOG
   ----------------------------------------------------------------------------
   Rebuilt on the rp-* system. The page had stayed on the old component
   classes while the rest of the public site moved, which is why it read as
   a different, busier page: icon tiles, badge wrappers and a six-line
   checklist repeated on all four packs.

   What a credit buys and what a pack costs are both single numbers, so the
   cards are flat, bordered and quiet, and the number is the only loud thing
   on them. One grid gap of --cv-line draws every divider, so the rules do
   not need to know how many cards there are.
   ============================================================================ */

.rp-rates,
.rp-packs {
    display: grid;
    gap: 1px;
    margin-top: 2rem;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-line);
    overflow: hidden;
}
.rp-rates { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.rp-packs { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.rp-rate,
.rp-pack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 1.125rem;
    background: var(--cv-bg-2);
}
.rp-rate--best,
.rp-pack--featured { background: var(--cv-bg-3); }

.rp-rate__name,
.rp-pack__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-rate__flag,
.rp-pack__flag {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--cv-mint-soft);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    color: var(--cv-mint-ink);
}

/* The answer the visitor came for. */
.rp-rate__yield { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.15rem 0 0; }
.rp-rate__num {
    font-size: 2rem;
    font-weight: var(--cv-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cv-ink);
}
.rp-rate__unit {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.rp-rate__desc { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cv-ink-soft); }

.rp-pack__price { display: flex; align-items: baseline; margin: 0.15rem 0 0; color: var(--cv-ink); }
.rp-pack__cur { font-size: 1rem; font-weight: var(--cv-weight-semibold); }
.rp-pack__amt {
    font-size: 2rem;
    font-weight: var(--cv-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}
.rp-pack__credits {
    margin: 0;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--cv-mint-ink);
}
.rp-pack__desc { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cv-ink-soft); }

/* Pushed down so every button in the row sits on one line. */
.rp-pack__go { margin-top: auto; padding-top: 1rem; }
.cv-btn--block { display: flex; width: 100%; }

.rp-head--tight { margin-top: 3.5rem; }
.rp-head__title--sm { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }

/* The worked example, as one sentence rather than a boxed callout. */
.rp-pricing__worked {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    margin: 1rem 0 0;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-2);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cv-ink-soft);
}
.rp-pricing__worked-k {
    flex: none;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-mint-ink);
}

.rp-tip {
    border-bottom: 1px dotted var(--cv-ink-mute);
    cursor: help;
}

/* Said once under the row, not six times inside it. */
.rp-pricing__every {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--cv-ink-soft);
}
.rp-pricing__every li { position: relative; padding-left: 1.1rem; }
.rp-pricing__every li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--cv-mint);
}

.rp-pricing__own { margin-top: 2rem; }
.rp-pricing__own label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.rp-pricing__own-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rp-pricing__own input {
    flex: 1 1 10rem;
    max-width: 14rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-2);
    font-family: var(--cv-mono);
    font-size: 0.875rem;
    color: var(--cv-ink);
}
.rp-pricing__own input:focus-visible {
    outline: 2px solid var(--cv-mint);
    outline-offset: -2px;
}

/* ============================================================================
   14 · CTA BAND
   ============================================================================ */

.rp-cta {
    padding-block: var(--rp-sec);
    border-top: 1px solid var(--cv-line);
    background: var(--cv-bg-2);
}

.rp-cta__grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) {
    .rp-cta__grid { grid-template-columns: minmax(0, 1fr) max-content; }
}

.rp-cta__title {
    max-width: 22ch;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.rp-cta__sub {
    max-width: var(--rp-measure);
    margin-top: 0.75rem;
    font-size: 1rem;
    color: var(--cv-ink-soft);
}

/* ============================================================================
   15 · FORMS
   ============================================================================ */

.rp-field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }

.rp-field label,
.cv-form label {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-field input,
.rp-field textarea,
.rp-field select,
.cv-form input,
.cv-form textarea,
.cv-form select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    background: var(--cv-bg);
    color: var(--cv-ink);
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.rp-field textarea, .cv-form textarea { min-height: 8rem; resize: vertical; }

.rp-field input:focus,
.rp-field textarea:focus,
.cv-form input:focus,
.cv-form textarea:focus {
    border-color: var(--cv-mint);
    outline: none;
}

.rp-field__error { font-size: 0.8125rem; color: var(--cv-red-ink); }

/* ============================================================================
   16 · FOOTER
   ============================================================================ */

.cv-footer {
    padding-block: var(--rp-sec) 1.5rem;
    border-top: 1px solid var(--cv-line);
    font-size: 0.875rem;
    color: var(--cv-ink-soft);
}

.cv-footer__top {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
}
/* Two link columns beside the brand on a tablet, all of them in a row once
   there is width for it. The column count is not hard-coded, because the
   "Free tools" column only appears when a trial is switched on. */
@media (min-width: 48rem) {
    .cv-footer__top {
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 64rem) {
    .cv-footer__top {
        grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(8rem, 1fr));
    }
}

.cv-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
}
.cv-footer__brand-name { font-size: 1.0625rem; font-weight: var(--cv-weight-bold); }
.cv-footer__brand-accent { color: var(--cv-mint-ink); }
.cv-footer__tagline {
    max-width: 42ch;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cv-ink-mute);
}

.cv-footer__col h3 {
    margin-bottom: 0.875rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.cv-footer__col ul { display: grid; gap: 0.5rem; }
.cv-footer__col a { text-decoration: none; color: var(--cv-ink-soft); }
.cv-footer__col a:hover { color: var(--cv-mint-ink); }

.cv-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cv-line);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

/* ============================================================================
   17 · REVEAL
   ----------------------------------------------------------------------------
   A short fade, once, and nothing moves more than 8px. Anything louder turns
   a document into a slideshow and slows the reader down, which is the
   opposite of what this page is for.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
    [data-rp-reveal] {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    [data-rp-reveal].is-in { opacity: 1; transform: none; }
}

/* ============================================================================
   18 · TRIAL "TRY NOW" MENU
   ----------------------------------------------------------------------------
   Styles for <x-trial-try-menu>, which renders either a plain button (one
   trial live) or a button with a dropdown (several). Both shapes are styled
   here so the component works on any public page without its own stylesheet.
   ============================================================================ */

.cv-btn--lg { padding: 0.8125rem 1.5rem; font-size: 1rem; }

.cv-trial-menu { position: relative; display: inline-flex; }

.cv-trial-menu__dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 0.375rem);
    z-index: 50;
    min-width: 11rem;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-3);
}
.cv-trial-menu.is-open .cv-trial-menu__dropdown { display: block; }

.cv-trial-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--cv-line-soft);
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--cv-ink-soft);
}
.cv-trial-menu__item:first-child { border-top: 0; }
.cv-trial-menu__item:hover { background: var(--cv-overlay); color: var(--cv-ink); }
.cv-trial-menu__icon { font-size: 0.75rem; color: var(--cv-mint-ink); }

/* On the collapsed mobile nav the dropdown would be clipped by the panel, so
   it stops floating and simply opens in flow. */
@media (max-width: 74rem) {
    .cv-nav .cv-trial-menu { display: flex; flex-direction: column; margin-top: 0.75rem; }
    .cv-nav .cv-trial-menu__dropdown { position: static; margin-top: 0.375rem; }
}

/* ============================================================================
   19 · DEMO STRIP
   ----------------------------------------------------------------------------
   The "try it without an account" block. It is the one place on the page
   allowed a tinted surface, because it is an offer rather than a statement.
   ============================================================================ */

.rp-demo {
    padding-block: var(--rp-sec);
    border-top: 1px solid var(--cv-line);
    background: var(--cv-bg-2);
}

.rp-demo__grid { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 56rem) {
    .rp-demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 3rem; }
}

.rp-demo__title {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.rp-demo__body { margin-top: 0.875rem; color: var(--cv-ink-soft); }
.rp-demo__body p + p { margin-top: 0.75rem; }

.rp-demo__terms {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--cv-line);
}
.rp-demo__terms li {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--cv-line-soft);
    font-size: 0.875rem;
    color: var(--cv-ink-soft);
}
.rp-demo__terms i { font-size: 0.6875rem; color: var(--cv-mint-ink); }

/* ============================================================================
   20 · CASE LIST
   ============================================================================ */

/* Pulled 1rem wider than the text column so the hover band and the rules
   breathe past the copy instead of stopping dead on it. Safe at every width:
   --rp-pad never falls below 1.25rem. */
.rp-cases {
    border-top: 1px solid var(--cv-line);
    margin-inline: -1rem;
}

.rp-case {
    display: grid;
    gap: 0.5rem 2rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--cv-line);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}
@media (min-width: 56rem) {
    .rp-case { grid-template-columns: 6rem minmax(0, 1fr) max-content; align-items: baseline; }
}
.rp-case:hover { background: var(--cv-overlay); }

.rp-case__label {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.rp-case__title { font-size: 1.0625rem; font-weight: var(--cv-weight-semibold); line-height: 1.35; }
.rp-case__sub { max-width: 60ch; margin-top: 0.3rem; font-size: 0.9375rem; color: var(--cv-ink-soft); }
/* The trailing letter-space after the final letter is real width, so it is
   pulled back to keep "Read" optically flush with the label on the left. */
.rp-case__go {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-mint-ink);
    margin-right: -0.1em;
}

/* ============================================================================
   21 · SMALL PRINT
   ============================================================================ */

.rp-fine {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--cv-ink-mute);
}

/* ============================================================================
   22 · ODDS AND ENDS
   ============================================================================ */

/* The sheet's closing line: the same bar as the head, rules swapped so it
   closes the block instead of opening it. */
.rp-sheet__foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-demo__actions { margin-top: 1.5rem; }

/* A case row's two text lines stack inside one grid cell. */
.rp-case__sub { display: block; }

/* The how-it-runs steps are an <ol>, and the shared .rp-entry__facts rule
   draws a dash before each item. A numbered procedure should be numbered. */
ol.rp-entry__facts { counter-reset: rp-step; }
ol.rp-entry__facts li::before {
    counter-increment: rp-step;
    content: counter(rp-step);
    width: auto;
    height: auto;
    margin-top: 0;
    background: none;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    font-weight: var(--cv-weight-semibold);
    color: var(--cv-mint-ink);
}

/* In "How it runs" the first column holds a word, not a number, so it needs
   room to sit on one line. */
@media (min-width: 56rem) {
    #how-it-works .rp-entry { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 0.9fr); }
}

/* ============================================================================
   23 · LANDING CHAT WIDGET
   ----------------------------------------------------------------------------
   Ported from landing.css, which this file replaces. The geometry is the
   component's own (fixed corner, panel states driven by its script), so it
   comes across as-is; only the surface treatment is restated below to match
   the rest of the site.
   ============================================================================ */




.lc-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; font-family: var(--cv-sans); }

.lc-widget__toggle {
    width: 3.5rem; height: 3.5rem; border-radius: 999px; border: none;
    background: var(--cv-mint); color: var(--cv-on-mint); box-shadow: 0 10px 28px -8px rgba(0, 212, 170, 0.65);
    cursor: pointer; display: grid; place-items: center; font-size: 1.25rem;
}

.lc-widget__panel {
    display: none; position: absolute; right: 0; bottom: calc(100% + 0.75rem);
    width: min(360px, calc(100vw - 2rem)); height: min(520px, calc(100vh - 6rem));
    max-height: min(520px, calc(100vh - 6rem));
    background: var(--cv-bg-3); border: 1px solid var(--cv-line); border-radius: 3px;
    box-shadow: var(--cv-shadow); overflow: hidden; flex-direction: column;
}

.lc-widget.is-open .lc-widget__panel { display: flex; }

.lc-widget__head {
    flex-shrink: 0;
    padding: 0.9rem 1rem; background: linear-gradient(180deg, var(--cv-bg-2) 0%, var(--cv-bg-3) 100%);
    border-bottom: 1px solid var(--cv-line); display: flex; align-items: center; gap: 0.65rem;
}

.lc-widget__head img { width: 28px; height: 28px; }

.lc-widget__head-title { font-weight: 700; font-size: 0.95rem; color: var(--cv-ink); }

.lc-widget__head-sub { font-size: 0.75rem; color: var(--cv-ink-soft); }

.lc-widget__close {
    margin-left: auto; background: transparent; border: none; color: var(--cv-ink-soft);
    cursor: pointer; font-size: 1.1rem; padding: 0.25rem;
}

.lc-widget__messages {
    flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.65rem; background: var(--cv-bg-2);
}

.lc-widget__panel.is-unlocked:not(.has-thread) .lc-widget__messages {
    flex: 0 0 auto; max-height: 38%;
}

.lc-widget__panel.has-thread .lc-widget__messages {
    flex: 1 1 0;
}

.lc-widget__foot {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--cv-line); background: var(--cv-bg-3);
}

.lc-widget__panel.has-thread .lc-widget__foot {
    flex: 0 0 auto;
}

.lc-widget__verified {
    font-size: 0.8rem; color: var(--cv-mint-ink); margin: 0 0 0.75rem; line-height: 1.4;
    padding: 0.55rem 0.7rem; background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.28); border-radius: var(--cv-radius);
}

.lc-widget__foot label { display: block; font-size: 0.78rem; color: var(--cv-ink-soft); margin-bottom: 0.25rem; }

.lc-widget__foot input, .lc-widget__foot textarea {
    width: 100%; margin-bottom: 0.55rem; padding: 0.55rem 0.65rem; border-radius: var(--cv-radius);
    border: 1px solid var(--cv-line); background: var(--cv-bg); color: var(--cv-ink); font-size: 0.88rem;
}

.lc-widget__foot textarea { min-height: 72px; resize: vertical; }

.lc-widget__captcha { display: grid; gap: 0.45rem; margin-bottom: 0.65rem; }

.lc-widget__btn {
    width: 100%; padding: 0.7rem 1rem; border: none; border-radius: var(--cv-radius);
    background: var(--cv-mint); color: var(--cv-on-mint); font-weight: 700; cursor: pointer;
}

.lc-widget__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.lc-widget__note { font-size: 0.78rem; color: var(--cv-ink-mute); margin: 0.45rem 0 0; line-height: 1.4; }

.lc-widget__error { font-size: 0.8rem; color: #f87171; margin: 0 0 0.5rem; }

body.cv-cookie-open .lc-widget { bottom: calc(1.25rem + 5.5rem); }
@media (max-width: 600px) {

    body.cv-cookie-open .lc-widget { bottom: calc(1.25rem + 7.5rem); }
}
/* Bring the widget into the report language: hairlines and square corners
   instead of the pill-and-shadow treatment it carried on the old sheet. */
.lc-widget__panel {
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    box-shadow: none;
    background: var(--cv-bg-2);
}
.lc-widget__head {
    border-bottom: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
}
.lc-widget__head-title { font-size: 0.9375rem; font-weight: var(--cv-weight-semibold); }
.lc-widget__head-sub {
    font-family: var(--cv-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.lc-widget__toggle { border-radius: 50%; box-shadow: none; border: 1px solid var(--cv-mint); }
.lc-widget__foot { border-top: 1px solid var(--cv-line); }

/* The panel and head were squared when the widget was brought over, but its
   controls were left on the old 8px/14px radii — so the one button a visitor
   actually presses was the only pill left on the site. These finish the job:
   the button is a .cv-btn--primary in all but name, and the fields match the
   .trial-input beside them on the demo pages. */
.lc-widget__btn {
    padding: 0.6875rem 1.25rem;
    border: 1px solid var(--cv-mint);
    border-radius: 2px;
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    font-weight: var(--cv-weight-semibold);
    line-height: 1.2;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.lc-widget__btn:hover:not(:disabled) {
    background: var(--cv-mint-d);
    border-color: var(--cv-mint-d);
}
.lc-widget__foot input,
.lc-widget__foot textarea {
    padding: 0.6875rem 0.75rem;
    border-radius: 2px;
    background: var(--cv-bg);
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.lc-widget__foot input:focus,
.lc-widget__foot textarea:focus { border-color: var(--cv-mint); outline: none; }
.lc-widget__verified { border-radius: 2px; }
.lc-widget__note, .lc-widget__verified { font-size: 0.75rem; color: var(--cv-ink-mute); }
.lc-widget__error { font-size: 0.8125rem; color: var(--cv-red-ink); }

/* ============================================================================
   24 · PRICING CATALOG — the rest of the component
   ----------------------------------------------------------------------------
   The catalog renders its own <section> with its own head, and it is shared
   with /pricing, so it keeps its markup and gets restyled here rather than
   rewritten. Two ideas carry over from the rest of the page: the heads sit
   left rather than centred, and the cards are columns divided by hairlines
   rather than floating tiles.
   ============================================================================ */

.cv-section { padding-block: var(--rp-sec); border-top: 1px solid var(--cv-line); }
.cv-section--alt { background: var(--cv-bg-2); }

.cv-section__head { max-width: none; margin: 0 0 var(--rp-stack); text-align: left; }
.cv-section__head h2 {
    max-width: 22ch;
    margin: 0.75rem 0 0;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.cv-section__head p {
    max-width: var(--rp-measure);
    margin-top: 0.875rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}

/* The eyebrow lost its pulsing dot — an animated indicator next to a static
   heading promises live data the heading does not have. */
.cv-eyebrow::before { content: none; }


/* ============================================================================
   25 · CONTACT FORM
   ============================================================================ */

.cv-contact { display: block; }
.cv-form__row { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
    .cv-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cv-field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.cv-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cv-math-captcha { display: flex; align-items: center; gap: 0.75rem; }
.cv-math-captcha__question {
    font-family: var(--cv-mono);
    font-size: 0.9375rem;
    color: var(--cv-ink);
    white-space: nowrap;
}
.cv-math-captcha input { max-width: 7rem; }



/* ============================================================================
   26 · INNER PAGES
   ----------------------------------------------------------------------------
   Case studies, legal pages and terms. They are documents, so they get the
   one thing a document needs and a landing page does not: a single measured
   column of body text. Everything else is the same vocabulary as the home
   page — mono kickers, hairline rules, no cards.
   ============================================================================ */

/* The old layout wrapped <main> in .mp-main for its padding. The layout no
   longer adds a wrapper, so the padding lives on main itself — except on the
   home page, whose sections set their own vertical rhythm. */
main { display: block; }
body:not(.rp-home) main {
    width: 100%;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--rp-pad) var(--rp-sec);
}

.mp-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.mp-crumb a { text-decoration: none; color: var(--cv-ink-mute); }
.mp-crumb a:hover { color: var(--cv-mint-ink); }
.mp-crumb .sep { opacity: 0.5; }

.mp-page-header {
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--cv-line);
}
.mp-page-header h1 {
    max-width: 24ch;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.mp-kicker {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-mint-ink);
}
.mp-page-header p, .text-muted { color: var(--cv-ink-soft); }

/* ---- Long-form body copy -------------------------------------------------
   One rule set for every block of CMS or case-study HTML, so an editor can
   paste ordinary markup and have it come out looking like the rest of the
   site without knowing any class names. */
.cms-main,
.cs-body,
.cs-intro {
    max-width: var(--rp-measure);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cv-ink-soft);
}
.cms-main > * + *,
.cs-body > * + * { margin-top: 1.125rem; }

/* A legal document's headings are numbered sentences -- "4. Credits,
   billing, and payments" -- so they take the full measure. Capped at 26ch
   they broke onto a second line mid-phrase. */
.cms-main h2, .cs-body h2 {
    margin-top: 2.75rem;
    font-size: 1.375rem;
    font-weight: var(--cv-weight-bold);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--cv-ink);
}
.cms-main h3, .cs-body h3 {
    margin-top: 2rem;
    font-size: 1.0625rem;
    font-weight: var(--cv-weight-semibold);
    color: var(--cv-ink);
}

/* A heading belongs to what follows it, so it sits closer to its own
   paragraph than to the section that ended above. */
.cms-main h2 + *, .cs-body h2 + *,
.cms-main h3 + *, .cs-body h3 + * { margin-top: 0.625rem; }
.cms-main a, .cs-body a, .cs-intro a { color: var(--cv-mint-ink); }

.cms-main ul, .cms-main ol,
.cs-body ul, .cs-body ol { padding-left: 1.25rem; }
.cms-main ul, .cs-body ul { list-style: disc; }
.cms-main ol, .cs-body ol { list-style: decimal; }
.cms-main li, .cs-body li { margin-top: 0.4rem; }

.cms-main table, .cs-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.cms-main th, .cms-main td,
.cs-body th, .cs-body td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--cv-line);
    text-align: left;
}
.cms-main th, .cs-body th {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.cms-main code, .cs-body code {
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    font-family: var(--cv-mono);
    font-size: 0.875em;
}

.cms-main blockquote, .cs-body blockquote {
    padding-left: 1rem;
    border-left: 2px solid var(--cv-line);
    color: var(--cv-ink-soft);
}

/* ---- Case studies --------------------------------------------------------
   The index now lists stories with the same .rp-case rows the home page
   uses, so the two lists are one component; the .cs-hero / .cs-grid /
   .cs-card set they used to need is gone with them. What is left here is
   the document shell a single study is read in.
   -------------------------------------------------------------------------- */

.rp-empty {
    padding: 2.5rem 0;
    border-top: 1px solid var(--cv-line);
    font-size: 0.9375rem;
    color: var(--cv-ink-mute);
}

/* A study is prose, so everything on the page shares the prose column --
   heading included -- instead of a wide hero the body then climbs out of. */
.rp-doc__col { max-width: var(--rp-measure); }

.rp-doc__back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cv-mint-ink);
}
.rp-doc__back:hover { text-decoration: underline; }

.rp-doc__title {
    margin-top: 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.025em;
}
.rp-doc__lead {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}
.rp-doc__body {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cv-line);
}

/* Somewhere to go at the end of the story. */
.rp-doc__foot {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--cv-line);
}
.rp-doc__related {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--cv-line);
}
.rp-doc__related ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.rp-doc__related a { color: var(--cv-ink); text-decoration: none; border-bottom: 1px solid var(--cv-line); }
.rp-doc__related a:hover { border-bottom-color: currentColor; }
.rp-doc__foot-q {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    font-weight: var(--cv-weight-semibold);
    color: var(--cv-ink);
}

.pagination-wrap { margin-top: 2rem; }
.pagination-wrap ul, .pagination { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pagination-wrap a, .pagination-wrap span,
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    font-family: var(--cv-mono);
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--cv-ink-soft);
}
.pagination .active span, .pagination-wrap .active span {
    border-color: var(--cv-mint);
    color: var(--cv-mint-ink);
}

/* ============================================================================
   27 · COUNTRY LANDING PAGES
   ----------------------------------------------------------------------------
   /caller-id-testing/{country}. These are the SEO pages, so they keep their
   headings and FAQ markup exactly as they were and only change clothes. The
   page used to carry its own <head>, header, footer and a block of inline
   <style>; it extends the shared layout now, and these are the classes that
   were left behind.
   ============================================================================ */

.cv-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--rp-sec); }
.cv-hero__copy { max-width: 46rem; }
.cv-hero h1 {
    max-width: 18ch;
    margin-top: 1rem;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.cv-hero__lead {
    max-width: 52ch;
    margin-top: 1.125rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}
.cv-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* The networks we test on: mono chips on a rule, which reads as a list of
   facts rather than as a row of buttons you could press. */
.cv-country-nets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cv-line);
}
.cv-country-net {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

/* What you can test: the same divided-column grid the pricing rates use. */
.cv-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-line);
    overflow: hidden;
}
.cv-fcard {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem 1.25rem;
    background: var(--cv-bg-2);
}
.cv-fcard__icon { font-size: 0.875rem; color: var(--cv-mint-ink); }
.cv-fcard h3 { font-size: 1.0625rem; font-weight: var(--cv-weight-semibold); line-height: 1.3; }
.cv-fcard p { font-size: 0.875rem; line-height: 1.55; color: var(--cv-ink-soft); }
.cv-fcard p:last-child { margin-top: auto; padding-top: 0.5rem; }
.cv-country-reach {
    font-family: var(--cv-mono);
    font-size: 0.6875rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink-mute) !important;
}

.cv-section__head--left { text-align: left; }

/* Coverage: a table of which service reaches where. Rows on hairlines, with
   the ones that cover this country marked by a mint accent rather than a
   tinted row — the tint made the others look switched off. */
.cv-country-reach-table { border-top: 1px solid var(--cv-line); }
.cv-country-reach-row {
    display: grid;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem 0 0.875rem 0.75rem;
    border-bottom: 1px solid var(--cv-line);
    border-left: 2px solid transparent;
}
@media (min-width: 48rem) {
    .cv-country-reach-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.cv-country-reach-row.is-here { border-left-color: var(--cv-mint); }
.cv-country-reach-row strong { display: block; font-size: 0.9375rem; font-weight: var(--cv-weight-semibold); }
.cv-country-reach-row span { font-size: 0.8125rem; color: var(--cv-ink-mute); }
.cv-country-reach-where { font-size: 0.875rem; color: var(--cv-ink-soft); }
.cv-country-reach-tick {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-family: var(--cv-mono);
    font-size: 0.625rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-mint-ink) !important;
}

.cv-country-upcoming {
    margin-top: 1.25rem;
    text-align: left;
    font-size: 0.875rem;
    color: var(--cv-ink-mute);
    opacity: 1;
}
.cv-country-elsewhere { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; margin-top: 1.5rem; }

/* FAQ. <details> styled as rows, so the page reads as a list of questions
   whether or not any of them are open. */
/* Comparison pages (/compare/{slug}). A three-column grid on wide screens;
   on phones each row stacks and the column name is repeated as a label so
   the cell still says which product it describes. */
.cv-compare { border-top: 1px solid var(--cv-line); }
.cv-compare__row {
    display: grid;
    grid-template-columns: 1.1fr 2fr 2fr;
    gap: 1rem 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cv-line);
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
}
.cv-compare__row.is-us { border-left-color: var(--cv-mint); }
.cv-compare__row--head { font-weight: 700; color: var(--cv-ink); }
.cv-compare__label { font-weight: 600; color: var(--cv-ink); }
.cv-compare__cell { color: var(--cv-ink-2, var(--cv-ink)); font-size: 0.95rem; line-height: 1.5; }
.cv-compare__who { display: none; }
.cv-compare__note { font-size: 0.9rem; opacity: 0.8; }
.cv-compare__pick .cv-fcard.is-us { border-color: var(--cv-mint); }
@media (max-width: 720px) {
    .cv-compare__row--head { display: none; }
    .cv-compare__row { grid-template-columns: 1fr; gap: 0.5rem; }
    .cv-compare__who { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.15rem; }
}

.cv-country-faq { border-top: 1px solid var(--cv-line); }
.cv-country-faq details { border-bottom: 1px solid var(--cv-line); }
.cv-country-faq summary {
    padding: 0.9375rem 0;
    font-size: 1rem;
    font-weight: var(--cv-weight-medium);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.cv-country-faq summary::-webkit-details-marker { display: none; }
.cv-country-faq summary::after {
    content: '+';
    font-family: var(--cv-mono);
    color: var(--cv-mint-ink);
}
.cv-country-faq details[open] summary::after { content: '−'; }
.cv-country-faq p {
    max-width: var(--rp-measure);
    padding-bottom: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cv-ink-soft);
}

/* Closing band: same shape as the home page's CTA. */
.cv-band { padding-block: var(--rp-sec); border-top: 1px solid var(--cv-line); background: var(--cv-bg-2); }
.cv-band h2 {
    max-width: 22ch;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.cv-band p { max-width: var(--rp-measure); margin-top: 0.75rem; color: var(--cv-ink-soft); }
.cv-band__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* The catalog's title is an h1 on /pricing and an h2 on the home page, so the
   size comes from the class rather than the tag. */
.cv-section__head h1.pricing-heading-main {
    max-width: 22ch;
    margin: 0.75rem 0 0;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

/* ============================================================================
   28 · DEMO PAGES
   ----------------------------------------------------------------------------
   /try-truecaller, /try-hiya and /try-echo-back. One narrow column with the
   form at the top, because the page has exactly one job and the number field
   should be the first thing a visitor's eye lands on.

   These rules replace the 278-line <style> block in try-reputation and the
   227-line public/partials/trial-page-styles partial, both of which have been
   deleted. The class names are unchanged, so the pages' own scripts — which
   toggle .is-visible and swap .trial-verdict--* — keep working untouched.
   ============================================================================ */

.trial-page { padding-block: clamp(2rem, 5vw, 3.5rem) var(--rp-sec); }

.trial-shell {
    width: 100%;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding-inline: var(--rp-pad);
}

/* The form block. The one sheet on the page, so it keeps the border; the
   sections under it are plain. */
.trial-card {
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-bg-2);
    overflow: hidden;
}

/* Wide enough and the pitch moves beside the form instead of stacking on
   top of it. Stacked in a 46rem column, the page put a block of prose
   between the visitor and the one field they came to fill in, and left
   most of a desktop screen empty either side. */
@media (min-width: 64rem) {
    .trial-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .trial-card__hero {
        border-bottom: 0;
        border-right: 1px solid var(--cv-line);
    }
    .trial-card__hero,
    .trial-card__body { display: flex; flex-direction: column; justify-content: center; }
}

.trial-card__hero {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-bottom: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
}
.trial-card__hero h1 {
    max-width: 18ch;
    margin-top: 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.trial-card__hero p {
    max-width: 54ch;
    margin-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}

.trial-card__body { padding: clamp(1.5rem, 4vw, 2.25rem); }

/* The three promises, as mono facts on a rule rather than rounded chips. */
.trial-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cv-line);
}
.trial-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.trial-pill i { color: var(--cv-mint-ink); }

/* ---- Form ---------------------------------------------------------------- */

.trial-form { display: block; }
.trial-lead-grid { display: grid; gap: 1rem; }
@media (min-width: 36rem) {
    .trial-lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trial-field { display: grid; gap: 0.4rem; }
.trial-field label,
.trial-field-label,
.trial-captcha label {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.trial-input {
    width: 100%;
    padding: 0.6875rem 0.75rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    background: var(--cv-bg);
    color: var(--cv-ink);
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.trial-input:focus { border-color: var(--cv-mint); outline: none; }

/* The country picker sat beside the e-mail field as the one control the
   browser had drawn itself -- different height, different arrow. */
select.trial-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) calc(50% + 0.1rem),
                         calc(100% - 0.7rem)  calc(50% + 0.1rem);
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}
.trial-input:disabled { opacity: 0.55; }

/* The phone number is the point of the page, so it is the one field set
   large and in mono — it reads as a number being entered, not as text. */
.trial-input-row { margin-top: 1rem; }
.trial-input-row .trial-input {
    padding: 0.875rem 0.875rem;
    font-family: var(--cv-mono);
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

.trial-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    background: var(--cv-bg-3);
}
.trial-captcha label { flex: 1 1 8rem; }
.trial-captcha .trial-input { flex: 0 0 5.5rem; max-width: 5.5rem; text-align: center; }

.trial-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cv-ink-soft);
}
.trial-consent input { margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--cv-mint); }
.trial-consent a { color: var(--cv-mint-ink); }

.trial-actions { margin-top: 1.25rem; }
.trial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8125rem 1.5rem;
    border: 1px solid var(--cv-mint);
    border-radius: 2px;
    background: var(--cv-mint);
    color: var(--cv-on-mint);
    font-family: var(--cv-sans);
    font-size: 1rem;
    font-weight: var(--cv-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.trial-btn:hover:not(:disabled) { background: var(--cv-mint-d); border-color: var(--cv-mint-d); }
.trial-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.trial-note { margin-top: 0.875rem; font-size: 0.8125rem; line-height: 1.55; color: var(--cv-ink-mute); }

/* Two of the field labels also carry .trial-note, which is the later rule
   and was winning on size -- so "Your phone number" sat two steps larger
   than "Work email" beside it. */
.trial-field-label { margin-top: 0; font-size: 0.6875rem; }

/* ---- Alerts -------------------------------------------------------------- */

.trial-alert {
    padding: 1rem;
    border: 1px solid var(--cv-line);
    border-left: 2px solid var(--cv-amber);
    border-radius: 2px;
    background: var(--cv-bg-3);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cv-ink-soft);
}
.trial-alert + .trial-alert { margin-top: 0.75rem; }
.trial-alert a { color: var(--cv-mint-ink); }
.trial-alert--notice { border-left-color: var(--cv-mint); }
.trial-alerts { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }

/* ---- Running / result ---------------------------------------------------- */

/* The script adds .is-visible; both start hidden. */
.trial-status { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cv-line); }
.trial-status.is-visible { display: block; }

.trial-status__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--cv-mono);
    font-size: 0.8125rem;
    font-weight: var(--cv-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cv-ink);
}

.trial-spinner {
    flex: 0 0 auto;
    width: 13px; height: 13px;
    border: 2px solid var(--cv-line);
    border-top-color: var(--cv-mint);
    border-radius: 50%;
    animation: trial-spin 0.8s linear infinite;
}
@keyframes trial-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .trial-spinner { animation-duration: 2.4s; }
}

.trial-result { display: none; margin-top: 1.25rem; }
.trial-result.is-visible { display: block; }

/* The verdict. Same vocabulary as the home page's report rows: a word, a
   colour and a rule — not a coloured badge. */
.trial-verdict {
    padding: 0.75rem 0 0.75rem 0.875rem;
    border-left: 3px solid currentColor;
    font-family: var(--cv-mono);
    font-size: 1.125rem;
    font-weight: var(--cv-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.trial-verdict--clean        { color: var(--cv-mint-ink); }
.trial-verdict--spam         { color: var(--cv-red-ink); }
.trial-verdict--suspected    { color: var(--cv-amber-ink); }
.trial-verdict--inconclusive { color: var(--cv-ink-mute); }

.trial-shot { margin-top: 1rem; }
.trial-shot img {
    width: 100%;
    border: 1px solid var(--cv-line);
    border-radius: 3px;
}

.trial-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---- Echo back only ------------------------------------------------------ */

/* The number to dial. It is the instruction the whole page builds up to, so
   it is set as large as the headline and selectable in one go. */
/* Hidden until a test starts. The markup holds an em dash as a placeholder
   and the page's script swaps in the real number, then adds .is-visible — so
   without this rule the panel sits on the page from the first paint telling
   people to "dial this number now" above a dash. */
.trial-dial {
    display: none;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--cv-line);
    border-left: 2px solid var(--cv-mint);
    border-radius: 2px;
    background: var(--cv-bg-3);
}
.trial-dial__number {
    display: block;
    font-family: var(--cv-mono);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: var(--cv-weight-bold);
    letter-spacing: 0.02em;
    color: var(--cv-ink);
    user-select: all;
}
.trial-dial.is-visible { display: block; }
.trial-dial__hint { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--cv-ink-mute); }

/* user-select: all above means one click grabs the whole number to copy.
   Give that selection the brand colours so it reads as "selected, ready to
   copy" rather than as a rendering fault. */
.trial-dial__number::selection { background: var(--cv-mint); color: var(--cv-on-mint); }
.trial-dial__number::-moz-selection { background: var(--cv-mint); color: var(--cv-on-mint); }

.trial-result-score {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--cv-line);
    font-family: var(--cv-mono);
    font-size: 0.8125rem;
    color: var(--cv-ink-soft);
}
.trial-result-audio { margin-top: 1rem; }
.trial-result-audio audio { width: 100%; }

/* ---- The "there is more" block below the card ---------------------------- */

.trial-more { margin-top: var(--rp-sec); padding-top: var(--rp-sec); border-top: 1px solid var(--cv-line); }
.trial-more__head h2 {
    max-width: 22ch;
    margin-top: 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.trial-more__head p { max-width: var(--rp-measure); margin-top: 0.875rem; color: var(--cv-ink-soft); }

.trial-more__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    margin-top: var(--rp-stack);
    border: 1px solid var(--cv-line);
    border-radius: 3px;
    background: var(--cv-line);
    overflow: hidden;
}

.trial-contact { margin-top: 1.5rem; font-size: 0.875rem; color: var(--cv-ink-mute); }
.trial-contact a { color: var(--cv-mint-ink); }

/* ---- Slim chrome --------------------------------------------------------- */

.cv-header--minimal .cv-header__inner { gap: 1rem; }
.cv-footer--minimal { padding-block: var(--rp-sec) 1.5rem; }
.cv-footer--minimal .cv-footer__bottom { padding-top: 0; border-top: 0; }
.cv-footer__minimal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.cv-footer__minimal-links a { text-decoration: none; color: var(--cv-ink-mute); }
.cv-footer__minimal-links a:hover { color: var(--cv-mint-ink); }

/* At phone width the slim header's call to action ran off the right edge —
   it is a long label ("Get full access — 10 free credits") next to a brand
   that was wrapping to three lines. The row wraps instead: brand and toggle
   stay on the first line, the button takes the second one in full. */
@media (max-width: 36rem) {
    .cv-header--minimal .cv-header__inner { flex-wrap: wrap; row-gap: 0.625rem; }
    .cv-header--minimal .cv-brand__tag { display: none; }
    .cv-header--minimal .cv-btn {
        flex: 1 1 100%;
        white-space: normal;
        text-align: center;
    }
}

/* ============================================================================
   29 · ONE BUTTON
   ----------------------------------------------------------------------------
   The site had grown three button vocabularies: .cv-btn across the marketing
   pages, .trial-btn on the demo pages and .auth-button on login, register and
   the password screens — the last two rounded, gradient-filled and shadowed
   while .cv-btn was flat and square. Same control, three looks, and a visitor
   crossing from the landing page to signup saw the brand change under them.

   They share one definition here. The class names stay, because they are
   spread across views and some are referenced by scripts; what changes is
   that there is now a single place where a button's shape is decided.
   ============================================================================ */

.cv-btn,
.trial-btn,
.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    font-weight: var(--cv-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Solid: the one action that matters on a screen. */
.cv-btn--primary,
.trial-btn,
.auth-button:not(.auth-button--oauth) {
    background: var(--cv-mint);
    border-color: var(--cv-mint);
    color: var(--cv-on-mint);
}
.cv-btn--primary:hover,
.trial-btn:hover:not(:disabled),
.auth-button:not(.auth-button--oauth):hover:not(:disabled) {
    background: var(--cv-mint-d);
    border-color: var(--cv-mint-d);
    /* No transform and no glow on hover. A button that lifts off the page
       belongs to a different design than one drawn with a hairline. */
    box-shadow: none;
    transform: none;
}

/* Hairline: everything else. */
.cv-btn--ghost,
.auth-button--oauth {
    background: none;
    border-color: var(--cv-line);
    color: var(--cv-ink);
}
.cv-btn--ghost:hover,
.auth-button--oauth:hover {
    border-color: var(--cv-ink-mute);
    background: var(--cv-overlay);
    box-shadow: none;
    transform: none;
}

.cv-btn:disabled,
.trial-btn:disabled,
.auth-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* The demo pages' and auth pages' primary buttons span their form. */
.trial-btn,
.auth-button { width: 100%; }
.auth-button--oauth { justify-content: flex-start; gap: 0.75rem; }

/* ============================================================================
   30 · AUTH PAGES
   ----------------------------------------------------------------------------
   Login, register, forgot password, reset password, verify email.

   These replace the 469-line <style> block that used to sit in
   layouts/auth.blade.php, which carried the old look: radial mint gradients
   behind a grid overlay, 14px cards with drop shadows, 999px pills. The
   layout is kept — a panel of context beside the form reads well and gives
   the page something to say — but it is drawn the same way as the rest of
   the site now.
   ============================================================================ */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--cv-bg);
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem var(--rp-pad);
    border-bottom: 1px solid var(--cv-line);
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.auth-home-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--cv-ink-mute); }
.auth-home-link:hover { color: var(--cv-mint-ink); }
.auth-topbar__right { display: flex; align-items: center; gap: 1.25rem; }
.auth-topbar__issue::before { content: none; }

.auth-wrapper {
    flex: 1;
    display: grid;
    align-content: center;
    gap: 0;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--rp-pad);
}
@media (min-width: 56rem) {
    .auth-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}

/* The context panel. Flat, with a hairline between it and the form rather
   than a gradient and a shadow around each half. */
.auth-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--cv-line);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: var(--cv-bg-2);
}
@media (min-width: 56rem) {
    .auth-visual { border-bottom: 1px solid var(--cv-line); border-right: 0; border-radius: 3px 0 0 3px; }
}
.auth-visual::before { content: none; }
.auth-visual h1 {
    max-width: 16ch;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.auth-visual p { max-width: 44ch; margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.6; color: var(--cv-ink-soft); }

.auth-visual__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cv-line);
}
.auth-visual__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.auth-visual__pill i { color: var(--cv-mint-ink); }

.auth-stats { display: grid; gap: 0; border-top: 1px solid var(--cv-line); }
.auth-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 0 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.auth-stat small {
    display: block;
    font-family: var(--cv-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.auth-stat__value {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--cv-mono);
    font-size: 1.25rem;
    font-weight: var(--cv-weight-bold);
    color: var(--cv-ink);
}

/* The form side. */
.auth-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--cv-line);
    border-radius: 0 0 3px 3px;
    background: var(--cv-bg-2);
    box-shadow: none;
}
@media (min-width: 56rem) {
    .auth-card { border-radius: 0 3px 3px 0; }
}
.auth-card header { margin-bottom: 1.5rem; }
.auth-card header h2 {
    margin-top: 1rem;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: var(--cv-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.auth-card header p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--cv-ink-soft); }

.auth-subtle { font-size: 0.875rem; color: var(--cv-ink-mute); }

.auth-form { display: grid; gap: 1rem; }

.auth-credit-note {
    padding: 0.875rem;
    border: 1px solid var(--cv-line);
    border-left: 2px solid var(--cv-mint);
    border-radius: 2px;
    background: var(--cv-bg-3);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cv-ink-soft);
}
.auth-credit-note strong { color: var(--cv-ink); }

.auth-form label,
.auth-form .form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.auth-form .form-control {
    width: 100%;
    padding: 0.6875rem 0.75rem;
    border: 1px solid var(--cv-line);
    border-radius: 2px;
    background: var(--cv-bg);
    color: var(--cv-ink);
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.15s;
}
.auth-form .form-control::placeholder { color: var(--cv-ink-mute); }
.auth-form .form-control:focus { border-color: var(--cv-mint); outline: none; box-shadow: none; }

.auth-form .form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.auth-form .form-check-input { margin-top: 0.15rem; accent-color: var(--cv-mint); }
.auth-form .form-check-label {
    font-family: var(--cv-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cv-ink-soft);
}

.auth-social { display: grid; gap: 0.625rem; }
.auth-button--oauth__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 2px;
    box-shadow: none;
}
.auth-button--oauth__icon svg { width: 18px; height: 18px; }
.auth-button--oauth__label { font-weight: var(--cv-weight-semibold); }

/* "or continue with email" — a caption sitting on a rule. */
.auth-divider {
    position: relative;
    margin: 0.25rem 0;
    text-align: center;
    font-family: var(--cv-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}
.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: var(--cv-line);
}
.auth-divider::after { content: none; }
.auth-divider span { position: relative; padding: 0 0.75rem; background: var(--cv-bg-2); }

.auth-links-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.auth-links-inline a { text-decoration: none; color: var(--cv-ink-soft); }
.auth-links-inline a:hover { color: var(--cv-mint-ink); }

/* Alerts and field errors. */
.auth-card .alert {
    padding: 0.875rem;
    border: 1px solid var(--cv-line);
    border-left: 2px solid var(--cv-line);
    border-radius: 2px;
    background: var(--cv-bg-3);
    font-size: 0.875rem;
    line-height: 1.55;
}
.auth-card .alert-success { border-left-color: var(--cv-mint); color: var(--cv-ink-soft); }
.auth-card .alert-error,
.auth-card .alert-danger { border-left-color: var(--cv-red); color: var(--cv-ink-soft); }

.auth-form .invalid-feedback,
.auth-form .error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--cv-red-ink);
}
.auth-form .is-invalid { border-color: var(--cv-red); }
.auth-form .is-invalid:focus { border-color: var(--cv-red); box-shadow: none; }

/* =======================================================================
   31  PRODUCT SCREENS
   These four are photographs of the running app, captured from a demo
   company whose numbers and results are invented (see
   MarketingShotsSeeder). They replaced hand-drawn SVG mockups, which
   looked like the product without ever being it.

   A raster image cannot follow the page the way the drawings did, so each
   screen is captured twice and the theme picks one. Both are in the markup
   and both are lazy, so the one that is never shown costs a request only
   if the visitor switches.
   ======================================================================= */
.rp-screen__img { display: block; width: 100%; height: auto; }
/* .rp-screen__frame img (above) sets display:block on every image in the
   frame and has one more selector part than a single class, so it was
   outranking the hide rule below regardless of source order. Scoped under
   .rp-screen__frame here too, to the same specificity, so this wins instead. */
.rp-screen__frame .rp-screen__img--dark { display: none; }

:root[data-theme="dark"] .rp-screen__frame .rp-screen__img--dark  { display: block; }
:root[data-theme="dark"] .rp-screen__frame .rp-screen__img--light { display: none; }

/* ============================================================================
   32 · REGISTER FORM CONTROLS
   ----------------------------------------------------------------------------
   The register page and the two social-register pages (Google, Microsoft)
   each carried their own <style> block, and the select-field rules were
   copied verbatim into all three. They live here once instead, next to the
   rest of the auth styling, so the three pages cannot drift apart.
   ============================================================================ */

/* Custom select. The native arrow is removed and .select-caret is drawn in
   its place, so the control matches the text inputs beside it. */
.select-field { position: relative; }

.select-field select {
    width: 100%;
    padding-right: 2.5rem;
    background-color: var(--cv-bg-3);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-field .select-caret {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--cv-ink-mute);
}

/* Fields the social flows prefill from the provider and will not let you
   edit — the name and email that came back with the OAuth token. */
.form-control[readonly] {
    background-color: var(--cv-sunken);
    color: var(--cv-ink-soft);
}

/* The agent / company switch at the top of the register form. */
.registration-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    background: var(--cv-sunken);
}

.registration-toggle .toggle-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.85rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--cv-ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: all 0.18s ease-in-out;
}

.registration-toggle .toggle-option i { font-size: 1.25rem; }

.registration-toggle .toggle-option.active {
    border-color: var(--cv-mint);
    background: var(--cv-bg-3);
    color: var(--cv-mint-ink);
    box-shadow: 0 4px 12px var(--cv-mint-glow);
}

/* The sections the switch shows and hides. display: contents keeps them out
   of the layout entirely, so the gap before "Company name" and the one
   between "Company name" and "Country" match every other field-to-field gap
   in the .auth-form grid instead of stacking an extra box's margins. */
.agent-only,
.company-only { display: contents; }

.agent-only > *,
.company-only > * { animation: cv-field-fade-in 0.2s ease-in-out; }

@keyframes cv-field-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The note that explains what an agent account can do. */
.agent-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.25rem;
    border: 1px solid var(--cv-mint);
    background: var(--cv-mint-soft);
    color: var(--cv-ink);
}

.agent-info i {
    margin-top: 0.35rem;
    font-size: 1.25rem;
}

/* Bot bait: off-screen rather than hidden, so a crawler still fills it. */
.register-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .registration-toggle {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .registration-toggle .toggle-option {
        padding: 0.7rem 0.5rem;
        font-size: 0.7rem;
    }

    .agent-info {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .agent-info i { margin-top: 0; }
}

/* ============================================================================
   33 · COOKIE CONSENT
   ----------------------------------------------------------------------------
   This banner had no rules anywhere — not in cv-public.css and not in any of
   the three sheets it replaced. It only ever appears when analytics are
   switched on, which is why it went unnoticed: with analytics off it is
   never rendered, and with them on it dropped in as unstyled browser
   defaults over the page. It is drawn like the rest of the site now.
   ============================================================================ */

.cv-cookie {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    border-top: 1px solid var(--cv-line);
    background: var(--cv-bg-2);
}
.cv-cookie[hidden] { display: none; }

.cv-cookie__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: var(--rp-max);
    margin-inline: auto;
    padding: 1rem var(--rp-pad);
}

.cv-cookie__text { flex: 1 1 28rem; }
.cv-cookie__text strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
    font-weight: var(--cv-weight-semibold);
}
.cv-cookie__text p {
    margin: 0;
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--cv-ink-soft);
}
.cv-cookie__text a { color: var(--cv-mint-ink); }

/* The two buttons carry equal weight on purpose: under the GDPR the refusal
   has to be as easy to reach as the acceptance, so "Reject" is a real button
   beside it and not a muted link underneath. */
.cv-cookie__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.cv-cookie__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--cv-sans);
    font-size: 0.9375rem;
    font-weight: var(--cv-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cv-cookie__btn--primary {
    border-color: var(--cv-mint);
    background: var(--cv-mint);
    color: var(--cv-on-mint);
}
.cv-cookie__btn--primary:hover {
    border-color: var(--cv-mint-d);
    background: var(--cv-mint-d);
}

.cv-cookie__btn--ghost {
    border-color: var(--cv-line);
    background: none;
    color: var(--cv-ink);
}
.cv-cookie__btn--ghost:hover {
    border-color: var(--cv-ink-mute);
    background: var(--cv-overlay);
}

@media (max-width: 40rem) {
    .cv-cookie__actions { width: 100%; }
    .cv-cookie__btn { flex: 1 1 10rem; }
}

/* ============================================================================
   34 · HERO SHEET — THE LIVE SCAN
   ----------------------------------------------------------------------------
   The sheet in the hero runs its own scan rather than sitting there as a
   picture of one. Three numbers, three reputations: the point being that
   the only way to know which one you are holding is to check it.

   Every state below is additive. With the script off, none of these classes
   is ever applied and the sheet renders as the finished report it already
   was, which is also what a crawler sees.
   ============================================================================ */





.rp-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}


/* Nothing above may move for anyone who has asked for less motion. The
   sheet still switches between numbers — it just arrives already finished. */
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================================
   35 · THE HANDSET
   ----------------------------------------------------------------------------
   A phone drawn in CSS — no image, so it costs nothing and themes itself —
   showing the lock screen the person you are calling is looking at. The
   table beside it says what each network returns; this says what that
   actually looks like in the second before someone declines.

   It is aria-hidden: every value on the screen is already in the table, and
   a screen reader should hear the report once, not twice.
   ============================================================================ */

.rp-stage { display: grid; gap: 0.75rem; }

/* The three checks, across the top. Each says what it answers, because
   "CNAM" on its own means nothing to half the people who need it. */
/* ---- The check picker ---------------------------------------------------
   Five names on one line. Each tab carried its own sentence of blurb at
   first, which at five tabs was a block of text the size of the report
   underneath it; the sentence now appears once, under the strip, for
   whichever check is open.
   -------------------------------------------------------------------------- */

.rp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--cv-line);
}

.rp-tabs__tab {
    padding: 0.4375rem 0.6875rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cv-ink-mute);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.rp-tabs__tab:hover { color: var(--cv-ink-soft); }
.rp-tabs__tab:focus-visible { outline: 2px solid var(--cv-mint); outline-offset: -2px; }

.rp-tabs__tab.is-active {
    border-bottom-color: var(--cv-mint);
    color: var(--cv-mint-ink);
}

.rp-tabs__say {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cv-ink-soft);
}

/* Under them: who to ask on the left, what they show on the right. */
.rp-stage__grid { display: grid; gap: 1rem; }

@media (min-width: 34rem) {
    .rp-stage__grid {
        grid-template-columns: minmax(0, 1fr) 18rem;
        align-items: stretch;
    }
}

/* On a phone the handset goes first: it is the answer, and the list of
   networks underneath it is the question. */
@media (max-width: 33.999rem) {
    .rp-phone { order: -1; }
}

.rp-phone { justify-self: center; width: 100%; max-width: 18rem; }

.rp-phone__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    padding: 0.4rem;
    border: 1px solid var(--cv-line);
    border-radius: 1.4rem;
    background: var(--cv-bg-3);
}

/* The notch. Small enough to read as one and not as a dent. */
.rp-phone__notch {
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4.25rem;
    height: 1.05rem;
    border-radius: 0 0 0.6rem 0.6rem;
    background: var(--cv-bg-3);
    z-index: 2;
}

.rp-phone__screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* A handset's own proportions, near enough: squatter than this and it
       reads as a tablet, and the column it sits in goes short. */
    min-height: 34rem;
    padding: 0.75rem 1rem 1.25rem;
    border: 1px solid var(--cv-line-soft);
    border-radius: 1.05rem;
    background: var(--cv-bg);
    overflow: hidden;
}

.rp-phone__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--cv-mono);
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    color: var(--cv-ink-mute);
}
.rp-phone__bar-icons { display: inline-flex; align-items: center; gap: 0.25rem; }
.rp-phone__sig,
.rp-phone__batt {
    display: inline-block;
    height: 0.4rem;
    border-radius: 1px;
    background: var(--cv-ink-mute);
}
.rp-phone__sig  { width: 0.6rem; }
.rp-phone__batt { width: 0.9rem; }

/* The screen's middle. Centred, and sized so the label can run to two lines
   without the accept/decline keys moving. */
.rp-phone__call {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
}

.rp-phone__via {
    font-family: var(--cv-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

/* The one word the whole product is about. */
.rp-phone__label {
    font-size: 1.375rem;
    font-weight: var(--cv-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.rp-phone__label--pass { color: var(--cv-ink); }
.rp-phone__label--warn { color: var(--cv-amber-ink); }
.rp-phone__label--fail { color: var(--cv-red-ink); }

.rp-phone__num {
    font-family: var(--cv-mono);
    font-size: 0.6875rem;
    color: var(--cv-ink-soft);
}
.rp-phone__state {
    margin-top: 0.25rem;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-phone__keys {
    display: flex;
    justify-content: center;
    gap: 2.75rem;
    padding-top: 0.75rem;
}
.rp-phone__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
}
.rp-phone__key--no  { background: var(--cv-red); }
.rp-phone__key--yes { background: var(--cv-mint); }

/* The glyph sits on a saturated key, so it takes the page's own dark
   surface rather than the theme's ink, which inverts under light. */
.rp-phone__icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #0b1929;
}
.rp-phone__key--no .rp-phone__icon { transform: rotate(135deg); }

/* The label swapping as the scan moves from network to network. */
.rp-phone__label.is-swap { animation: rp-phone-swap 0.26s ease-out; }
@keyframes rp-phone-swap {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-phone__label.is-swap { animation: none; }
}

/* ---- The handset's three screens ----------------------------------------
   One frame, three states, switched by data-rp-screen. CNAM is a lock
   screen with a name on it, SMS is a message that did or did not arrive as
   sent, and echo back is a call in progress with your own line coming back.
   -------------------------------------------------------------------------- */

/* CNAM: the label is the loudest thing on the screen, because it is the
   loudest thing on the real one. */
.rp-phone__screen[data-rp-screen="call"] .rp-phone__label { font-size: 1.375rem; }

/* SMS: the message arrives as a bubble, left-aligned like a received one,
   and the sender ID sits above it where the handset puts it. */
.rp-phone__screen[data-rp-screen="sms"] .rp-phone__call {
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 1rem;
    text-align: left;
}
.rp-phone__screen[data-rp-screen="sms"] .rp-phone__label {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cv-line);
    border-radius: 0.5rem 0.5rem 0.5rem 1px;
    background: var(--cv-bg-3);
    font-family: var(--cv-mono);
    font-size: 0.8125rem;
    font-weight: var(--cv-weight-semibold);
}
.rp-phone__screen[data-rp-screen="sms"] .rp-phone__num,
.rp-phone__screen[data-rp-screen="sms"] .rp-phone__state { align-self: flex-start; }

/* Echo back: a call that is already up, so the label is a running timer and
   a little meter sits under it. */
.rp-phone__screen[data-rp-screen="audio"] .rp-phone__label {
    font-family: var(--cv-mono);
    font-size: 1.625rem;
    letter-spacing: 0.04em;
}
.rp-phone__screen[data-rp-screen="audio"] .rp-phone__call::after {
    content: '';
    width: 4.5rem;
    height: 1.1rem;
    margin-top: 0.35rem;
    background: repeating-linear-gradient(
        to right,
        currentColor 0 2px,
        transparent 2px 5px
    );
    color: var(--cv-mint);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}

/* ---- The screening-app screen ------------------------------------------
   What Truecaller or Hiya paints over an incoming call: a banner carrying
   the label, then the number underneath. Drawn from our own tokens -- the
   app is named in text and none of its artwork is reproduced.
   -------------------------------------------------------------------------- */

.rp-phone__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-family: var(--cv-mono);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.rp-phone__flag[hidden] { display: none; }
.rp-phone__flag--pass { background: var(--cv-mint-soft); color: var(--cv-mint-ink); }
.rp-phone__flag--warn { background: var(--cv-amber-soft); color: var(--cv-amber-ink); }
.rp-phone__flag--fail { background: var(--cv-red-soft);   color: var(--cv-red-ink); }

/* A shield, so the banner reads as a warning without any borrowed glyph. */
.rp-phone__shield {
    width: 0.5rem;
    height: 0.6rem;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
}

/* On a sweep the banner carries the source, so the via line would repeat it. */
.rp-phone__screen[data-rp-screen="label"] .rp-phone__via { display: none; }
.rp-phone__screen[data-rp-screen="label"] .rp-phone__label { font-size: 1.5rem; }
.rp-phone__screen[data-rp-screen="label"] .rp-phone__num {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--cv-ink);
}

/* The keys are hidden on the SMS screen: there is no call to answer. */
.rp-phone__keys[hidden] { display: none; }

/* ---- The network picker -------------------------------------------------
   The report used to be a table and is a set of controls now: the handset
   shows the result, and these choose whose result it is. A dot carries the
   verdict at a glance; the word itself is on the screen beside it, and in
   each button's aria-label for anyone not looking at the screen.
   -------------------------------------------------------------------------- */

.rp-sheet { display: flex; flex-direction: column; }

/* The list takes the slack, and each row takes an equal share of it, so a
   three-row check fills the same column a four-row one does. Centring the
   rows instead left a band of empty panel above and below them. */
.rp-picker { display: flex; flex-direction: column; flex: 1; }
.rp-pick   { flex: 1 0 auto; min-height: 2.5rem; }

.rp-pick {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0.875rem;
    border: 0;
    border-top: 1px solid var(--cv-line-soft);
    border-left: 2px solid transparent;
    background: none;
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    text-align: left;
    color: var(--cv-ink-soft);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.rp-pick:first-child { border-top: 0; }
.rp-pick:hover { background: var(--cv-overlay); color: var(--cv-ink); }
.rp-pick:focus-visible { outline: 2px solid var(--cv-mint); outline-offset: -2px; }

.rp-pick.is-active {
    border-left-color: var(--cv-mint);
    background: var(--cv-bg-3);
    color: var(--cv-ink);
}

.rp-pick__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
}
.rp-pick__dot--pass { background: var(--cv-mint); }
.rp-pick__dot--warn { background: var(--cv-amber); }
.rp-pick__dot--fail { background: var(--cv-red); }

.rp-pick__name { min-width: 0; overflow-wrap: anywhere; }

/* The arrow only shows on the row being looked at, so the list stays quiet. */
.rp-pick__go {
    opacity: 0;
    color: var(--cv-mint-ink);
    transition: opacity 0.15s;
}
.rp-pick:hover .rp-pick__go,
.rp-pick.is-active .rp-pick__go { opacity: 1; }


/* ---- The reading --------------------------------------------------------
   Under the list: what you registered, what the chosen network actually
   shows, and how long it took. The gap between the first two lines is the
   entire argument for the product, so they sit directly above each other.
   -------------------------------------------------------------------------- */

.rp-detail {
    margin: 0;
    padding: 0.875rem;
    border-top: 1px solid var(--cv-line);
    background: var(--cv-bg-3);
}

.rp-detail__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding-block: 0.1875rem;
}

.rp-detail dt {
    font-family: var(--cv-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cv-ink-mute);
}

.rp-detail dd {
    margin: 0;
    min-width: 0;
    font-family: var(--cv-mono);
    font-size: 0.75rem;
    color: var(--cv-ink-soft);
    overflow-wrap: anywhere;
}

/* The one line that is a verdict rather than a fact. */
.rp-detail__verdict {
    font-weight: var(--cv-weight-semibold);
    letter-spacing: 0.04em;
}
.rp-detail__verdict--pass { color: var(--cv-mint-ink); }
.rp-detail__verdict--warn { color: var(--cv-amber-ink); }
.rp-detail__verdict--fail { color: var(--cv-red-ink); }

/* ── The handset on the free-check pages ────────────────────────────
   A phone showing what the lookup finds: idle until you type, ringing
   while it runs, then the label the app actually returned. Plain markup
   and CSS; the page script only swaps a class and two lines of text. */
.trial-phone {
    position: relative;
    width: 12.5rem;
    margin: 1.75rem 0 0;
    padding: 0.55rem;
    border: 1px solid var(--cv-line);
    border-radius: 2rem;
    background: var(--cv-bg);
}

.trial-phone__notch {
    position: absolute; top: 0.95rem; left: 50%; transform: translateX(-50%);
    width: 3.2rem; height: 0.4rem; border-radius: 1rem; background: var(--cv-bg-3);
}

.trial-phone__screen {
    display: grid; gap: 0.35rem; justify-items: center; align-content: center;
    min-height: 15rem; padding: 2.1rem 0.9rem 1.2rem; border-radius: 1.5rem; text-align: center;
    background: linear-gradient(170deg, #12304a 0%, #0a1726 100%);
    color: #fff;
}

.trial-phone__caption { margin: 0; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.trial-phone__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.2rem; height: 3.2rem; margin: 0.35rem 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); font-size: 1.2rem; color: rgba(255, 255, 255, 0.75);
}
.trial-phone__number {
    margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--cv-mono); font-size: 0.95rem; font-weight: 600;
}
.trial-phone__label {
    margin: 0.2rem 0 0; padding: 0.2rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 2px;
    font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);
}

.trial-phone.is-ringing { animation: trialRing 1.6s ease-out infinite; }
.trial-phone.is-clean .trial-phone__label { border-color: #00d4aa; color: #7ff0d8; background: rgba(0, 212, 170, 0.12); }
.trial-phone.is-suspected .trial-phone__label { border-color: #f2b705; color: #ffd966; background: rgba(242, 183, 5, 0.12); }
.trial-phone.is-spam .trial-phone__label { border-color: #ff6b81; color: #ff9aa9; background: rgba(255, 107, 129, 0.14); }
.trial-phone.is-spam .trial-phone__screen { background: linear-gradient(170deg, #3a1420 0%, #1a0a12 100%); }

@keyframes trialRing {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.35); }
    100% { box-shadow: 0 0 0 1.1rem rgba(0, 212, 170, 0); }
}
@media (prefers-reduced-motion: reduce) { .trial-phone.is-ringing { animation: none; } }

@media (max-width: 575.98px) {
    .trial-phone { width: 10.5rem; margin-top: 1.25rem; }
    .trial-phone__screen { min-height: 12.5rem; }
}

/* Centred in the hero, and the screen keeps its own light-on-dark text
   whatever colour the hero paragraphs inherit in the light theme. */
.trial-card__hero .trial-phone { margin: 1.75rem auto 0; }
.trial-card__hero .trial-phone__screen { color: #fff; }
.trial-card__hero .trial-phone__caption { color: rgba(255, 255, 255, 0.7); }
.trial-card__hero .trial-phone__number { color: #fff; font-size: 1rem; }
.trial-card__hero .trial-phone__label { color: rgba(255, 255, 255, 0.85); }
.trial-card__hero .trial-phone.is-clean .trial-phone__label { color: #7ff0d8; }
.trial-card__hero .trial-phone.is-suspected .trial-phone__label { color: #ffd966; }
.trial-card__hero .trial-phone.is-spam .trial-phone__label { color: #ff9aa9; }

/* Narrower and taller, like a real handset. */
.trial-card__hero .trial-phone { width: 10rem; padding: 0.45rem; border-radius: 1.8rem; }
.trial-card__hero .trial-phone__screen { min-height: 20rem; padding: 2rem 0.7rem 1.4rem; gap: 0.3rem; border-radius: 1.4rem; }
.trial-card__hero .trial-phone__caption { font-size: 0.62rem; }
.trial-card__hero .trial-phone__avatar { width: 2.8rem; height: 2.8rem; }
.trial-card__hero .trial-phone__number { font-size: 0.85rem; }
.trial-card__hero .trial-phone__label { font-size: 0.72rem; }
@media (max-width: 575.98px) {
    .trial-card__hero .trial-phone { width: 8.5rem; }
    .trial-card__hero .trial-phone__screen { min-height: 16rem; }
}

/* Bigger: wider and taller together. */
.trial-card__hero .trial-phone { width: 14rem; padding: 0.55rem; border-radius: 2.2rem; }
.trial-card__hero .trial-phone__screen { min-height: 26rem; padding: 2.4rem 1rem 1.8rem; gap: 0.45rem; border-radius: 1.7rem; }
.trial-card__hero .trial-phone__notch { width: 3.6rem; height: 0.45rem; }
.trial-card__hero .trial-phone__caption { font-size: 0.7rem; }
.trial-card__hero .trial-phone__avatar { width: 3.6rem; height: 3.6rem; font-size: 1.4rem; }
.trial-card__hero .trial-phone__number { font-size: 1.05rem; }
.trial-card__hero .trial-phone__label { font-size: 0.82rem; padding: 0.25rem 0.8rem; }
@media (max-width: 575.98px) {
    .trial-card__hero .trial-phone { width: 11rem; }
    .trial-card__hero .trial-phone__screen { min-height: 20rem; }
}