/* 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 {
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.uc-intro-lead strong {
    font-weight: 600;
    color: var(--text-primary);
}

.uc-intro-sub {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

/* 2rem horizontal padding matches .use-case-section (styles.css), so the first
   column's text lands on the same left edge as the heading and intro above it.
   The grid then cancels that padding again with an equal negative margin, which
   is what lets the rules run the full width of the page. */
.uc-groups-section {
    padding: 1rem 2rem 7rem;
    overflow-x: clip;
}

.uc-groups {
    --cols: 5;
    --rule: rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    /* Pulled out by one column-padding so the first column's text still lands
       on the container's content edge despite every column being padded. */
    margin: 0 -2rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
}

.uc-group-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 2.5rem 2rem;
    /* Every column carries a top and left rule; the negative margins push the
       outermost ones past the container edge where overflow:hidden clips them,
       so the column count can change at any breakpoint with no nth-child rules. */
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    margin-left: -1px;
    margin-top: -1px;
}

.uc-group-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0;
}

/* The tagline is the three-word label ("Contracts, agreements, cases"); the
   text below it is the segment description. Two weights so a column scans as
   label-then-detail rather than as one grey block. */
.uc-group-tagline {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4a4a4a;
    margin: 0 0 0.75rem;
}

.uc-group-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #9a9a9a;
    margin: 0 0 1.5rem;
}

.uc-group-link {
    margin-top: auto;
    padding-top: 0.5rem;
    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;
    border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
    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-groups { --rule: rgba(0, 0, 0, 0.1); }
.light-landing .uc-group-title { color: #1a202c; }
.light-landing .uc-group-text { color: #4a5568; }
.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; }
.light-landing .uc-empty { border-color: rgba(0, 0, 0, 0.1); }

/* Same ladder as .coverage-strip: 1024 tablet, 768 phone, 480 small phone. */
@media (max-width: 1024px) {
    .uc-groups { --cols: 3; }
}

@media (max-width: 768px) {
    .uc-groups { --cols: 2; }
    .uc-intro-lead { font-size: 1.1875rem; }
}

@media (max-width: 480px) {
    .uc-groups { --cols: 1; }
    /* One column per row, so there is nothing to align the link against. */
    .uc-group-link { margin-top: 0; }
}