/* Contract Verification Page Styles */

.cv-wrapper {
    background: var(--bg-dark-surface);
    min-height: 100vh;
    padding: 80px 0 0 0;
}

.cv-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 32px;
}

.cv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* Image Column */
.cv-image-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Long Text Section */
.cv-long-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-chat-area);
    padding: 32px;
    border-radius: 8px;
}

.cv-long-text h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cv-long-text p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Details Column */
.cv-details-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.cv-breadcrumb a,
.cv-breadcrumb a:link,
.cv-breadcrumb a:visited {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.cv-breadcrumb a:hover {
    color: var(--text-primary);
}

.cv-breadcrumb span:not(:last-child) {
    color: var(--text-muted);
}

.cv-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.cv-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.cv-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-chat-area);
    padding: 32px;
    border-radius: 8px;
}

.cv-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cv-list li {
    font-size: 1rem;
    color: var(--text-secondary);
    padding-left: 24px;
    position: relative;
    line-height: 1.6;
}

.cv-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
}

/* Steps */
.cv-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cv-step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cv-step-number {
    width: auto;
    min-width: 40px;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    line-height: 1.125rem;
}

.cv-step-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.125rem;
}

.cv-step-item p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Button */
.cv-button {
    padding: 14px 32px;
    background: #E5E5E5;
    border: none;
    border-radius: 8px;
    color: #000000;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

/* Security Notice */
.cv-security-notice {
    background: var(--bg-chat-area);
    border: none;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cv-security-notice i {
    font-size: 1.5rem;
    color: #E5E5E5;
    flex-shrink: 0;
}

.cv-security-notice p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Legal Disclaimer */
.cv-legal-disclaimer {
    background: var(--bg-chat-area);
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cv-legal-disclaimer i {
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.cv-legal-disclaimer p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.cv-legal-disclaimer strong {
    color: var(--text-secondary);
}

/* Example Questions */
.cv-examples li {
    font-style: italic;
    color: var(--text-muted);
}

.cv-examples li::before {
    content: '"';
    color: var(--text-muted);
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cv-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cv-image-column {
        position: relative;
        top: 0;
    }

    .cv-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .cv-wrapper {
        padding-top: 60px;
    }

    .cv-container {
        padding: 24px 20px;
    }

    .cv-title {
        font-size: 1.75rem;
    }

    .cv-description {
        font-size: 1rem;
    }

    .cv-section h2 {
        font-size: 1.125rem;
    }

    .cv-details-column {
        gap: 24px;
    }
}

/* ============================================================
   Light mode (theme-aware): white by default on the landing,
   reverts to the dark .cv design when the user picks dark.
   ============================================================ */
.light-landing .cv-wrapper { background: #ffffff; }
.light-landing .cv-long-text,
.light-landing .cv-section,
.light-landing .cv-security-notice,
.light-landing .cv-legal-disclaimer {
    background: #f5f6f8;
    border: 1px solid rgba(0, 0, 0, 0.07);
}
.light-landing .cv-title,
.light-landing .cv-long-text h3,
.light-landing .cv-section h2,
.light-landing .cv-step-item h3,
.light-landing .cv-step-number { color: #181818; }
.light-landing .cv-description,
.light-landing .cv-long-text p,
.light-landing .cv-list li,
.light-landing .cv-step-item p,
.light-landing .cv-security-notice p { color: #4a5568; }
.light-landing .cv-breadcrumb,
.light-landing .cv-breadcrumb a,
.light-landing .cv-breadcrumb a:link,
.light-landing .cv-breadcrumb a:visited,
.light-landing .cv-breadcrumb span:not(:last-child),
.light-landing .cv-legal-disclaimer p,
.light-landing .cv-legal-disclaimer i,
.light-landing .cv-examples li { color: #5a5a5a; }
.light-landing .cv-breadcrumb a:hover { color: #181818; }
.light-landing .cv-legal-disclaimer strong { color: #2d3748; }
.light-landing .cv-list li::before { color: #345d9a; }
.light-landing .cv-security-notice i { color: #345d9a; }
.light-landing .cv-button { background: #14171D; color: #ffffff; }
.light-landing .cv-button:hover { background: #2d3748; }

/* ---------------------------------------------------------------------------
   /usecases audience groups (Sophie's layout, 2026-08-11)

   The index is organised by team rather than by topic: an intro, then a ruled
   five-column strip, one column per audience. The strip deliberately mirrors
   .coverage-strip on the landing page (styles.css) — same rule-drawing trick,
   same breakpoint ladder — so the two pages read as one system. It is a
   separate class rather than a reuse because the landing strip is dark-first
   and carries flag/button variants this page has no use for.
   --------------------------------------------------------------------------- */

.uc-intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 60ch;
    margin: 2rem 0 0;
}

/* .uc-intro-lead was the /usecases index intro paragraph, dropped 2026-08-25.
   .uc-intro / .uc-intro-sub stay: UsecaseGroupPage.svelte still renders them.
   The shared hero-subheading selector in styles.css still lists .uc-intro-lead;
   left alone because that sheet is the brand's, not this page's. */

/* Type comes from the shared hero subheading rule in styles.css, so this
   reads at the same size as the second paragraph in the /security hero. */
.uc-intro-sub {
    color: var(--text-secondary);
    margin: 0;
}

/* Vertical only. The horizontal gutter moved onto .uc-groups so that element
   is the same shape as /platform's .container — max-width 1100 with the 2rem
   padding INSIDE it — and the two pages centre on the same measure. */
.uc-groups-section {
    padding: 1rem 0 7rem;
    overflow-x: clip;
}

/* One box per group, stacked down the page. Replaced the five-column rule grid
   on 2026-08-25: at five columns the description was a 20-character-wide grey
   block nobody read, and a group with no use-case pages looked identical to one
   with eight. */
.uc-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 1100px is the site content measure (brand-style-guide §5). CENTRED, not
       left-pinned: /platform runs the same measure through a centred
       .container, and pinning this one to the left gutter left ~340px of dead
       space down the right at 1500px while /platform sat balanced. The h1 above
       is centred to match, so there is no left edge left to share. */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Boxes became rules on 2026-08-27: a bordered card per group read as five
   equal-weight tiles, and the use-case links had nowhere to live. A hairline
   between rows carries the same separation without the frame.
   Column widths, gap, padding and hairline are /platform's .platform-row
   verbatim, so a group row and a capability row are the same object. The
   hairline is a neutral grey rather than a themed token for the reason that
   sheet gives: one declaration reads on both themes, where an alpha-white
   needed a .light-landing override to not vanish on a white page. */
.uc-group-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    padding: 56px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.uc-group-row:last-child {
    border-bottom: 0;
}

/* Walkthrough capture below a group's example list, filling the text column
   exactly: left edge on the bullets, right edge on the row's. No max-width —
   the column measure IS the intended width, so capping it would only reopen
   the question of what to align the remainder to. */
.uc-group-video {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1.75rem;
    border-radius: 12px;
    /* The same neutral grey the row hairlines use, so the frame round the
       capture is the same line that separates the groups. */
    border: 1px solid rgba(128, 128, 128, 0.25);
    background: #ffffff;
}

/* Serif, matching the display face on the content pages. The link is the whole
   heading so the group page is reachable without a separate "Learn more". */
.uc-group-title {
    font-family: var(--font-serif-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
}

.uc-group-title a {
    color: inherit;
    text-decoration: none;
}

.uc-group-title a:hover {
    text-decoration: underline;
}

.uc-group-body {
    min-width: 0;
}

.uc-group-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #9a9a9a;
    /* Capped: the right-hand column is wide enough to run this to ~100
       characters a line otherwise. */
    max-width: 68ch;
    margin: 0;
}

/* Middot markers rather than discs — the list is a set of entry points, not
   prose bullets, and the lighter mark keeps the link colour dominant. */
.uc-page-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    max-width: 68ch;
}

.uc-page-list li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #9a9a9a;
}

.uc-page-list li::before {
    content: '\00b7';
    position: absolute;
    left: 0.15rem;
    color: #6a6a6a;
}

/* An example with no page behind it. Same weight as a link so the label still
   reads as a label, but in the body colour rather than the link colour — a
   blue word that does not click is worse than a plain one. */
.uc-page-name {
    color: #d4d4d4;
}

.uc-page-list a {
    color: #4a6fd4;
    text-decoration: none;
}

.uc-page-list a:hover {
    text-decoration: underline;
}

.uc-group-link {
    display: inline-block;
    margin-top: 0.875rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    color: #c8c8c8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.uc-group-link:hover {
    color: #ffffff;
}

.uc-group-link span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.uc-group-link:hover span {
    transform: translateX(3px);
}

.uc-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 60ch;
    margin: 2.5rem 0 0;
    padding: 2rem;
    /* The same neutral grey the row hairlines use. Was var(--rule, alpha-white),
       but --rule only ever existed on .uc-groups and this box renders inside
       .use-case-section, so the fallback was the live value and the var was
       indirection to nothing. --rule is gone now; this is what it resolved to,
       stated once for both themes. */
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
}

.uc-empty p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

/* .use-case-title / .use-case-subtitle (styles.css) are white-on-dark only, and
   this page forces the light theme on mount — without these the h1 is white on
   a white background and reads as a missing heading. */
.light-landing .use-case-title { color: #1a202c; }
.light-landing .use-case-subtitle { color: #4a5568; }

.light-landing .uc-group-title { color: #1a202c; }
.light-landing .uc-group-text,
.light-landing .uc-page-list li { color: #4a5568; }
.light-landing .uc-page-list li::before { color: #a0aec0; }
.light-landing .uc-page-list a { color: #2b4fb5; }
.light-landing .uc-page-name { color: #2d3748; }
.light-landing .uc-group-link { color: #2d3748; }
.light-landing .uc-group-link:hover { color: #1a202c; }
.light-landing .uc-intro-lead strong { color: #1a202c; }
.light-landing .uc-intro-lead,
.light-landing .uc-intro-sub,
.light-landing .uc-empty p { color: #4a5568; }

/* /platform's breakpoint, not the old 768: the heading column is 280px there
   and here, so the two pages start crowding at the same width and should
   collapse at the same one. */
@media (max-width: 860px) {
    .uc-group-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 36px 0;
    }
}

/* Breadcrumb bar: sits above the boxes rather than beside the headline, so the
   hero is the title alone. Same 1100px measure as .uc-groups, centred on it,
   so the right-aligned crumb lands on the rows' right edge instead of floating
   out at the viewport's. */
.uc-breadcrumb-bar {
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    padding: 0 2rem;
}
.uc-breadcrumb-bar .cv-breadcrumb {
    justify-content: flex-end;
}

/* The hero used to carry a two-paragraph intro; with only the h1 left, the
   shared .use-case-section bottom padding leaves ~100px of dead air above the
   breadcrumb. Page-local so other pages using .use-case-section are untouched. */
.usecases-wrapper .use-case-section {
    padding-bottom: 1rem;
    /* Same centred 1100px column as .uc-groups below it, so the headline and
       the rows share one measure the way /platform's hero and capability rows
       do. The shared rule keeps align-self: flex-start for other pages. */
    max-width: 1100px;
    margin: 0 auto;
}
/* Centred like /platform's hero headline. .use-case-header is a flex row
   (headline + an optional "show all" link) with space-between, which pins a
   lone headline hard left and ignores text-align — so the flex line has to be
   centred as well as the text inside it. */
.usecases-wrapper .use-case-header {
    margin-bottom: 0;
    justify-content: center;
    text-align: center;
}