/* Contract Verification Page Styles */

.cv-wrapper {
    background: transparent;
    min-height: 100vh;
    padding: 80px 0 0 0;
}

.cv-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 32px;
}
/* Details Column */
.cv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-14);
    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: var(--text-40);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.cv-description {
    font-size: var(--text-18);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}
/* Button */
.cv-button {
    padding: 14px 32px;
    background: var(--mkt-button-face);
    border: none;
    border-radius: var(--radius-md);
    color: var(--mkt-black);
    font-size: var(--text-16);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cv-title {
        font-size: var(--text-32);
    }
}

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

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

    .cv-title {
        font-size: var(--text-28);
    }

    .cv-description {
        font-size: var(--text-16);
    }}

/* ============================================================
   Light mode (theme-aware): white by default on the landing,
   reverts to the dark .cv design when the user picks dark.
   ============================================================ */
.light-landing .cv-title { color: var(--mkt-dark); }
.light-landing .cv-description { color: var(--mkt-text-muted); }
.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) { color: var(--mkt-gray-deep); }
.light-landing .cv-breadcrumb a:hover { color: var(--mkt-dark); }.light-landing .cv-button { background: var(--mkt-ink-deep); color: var(--mkt-white); }
.light-landing .cv-button:hover { background: var(--mkt-slate); }

/* .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. */

/* 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(var(--mkt-divider-rgb), 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: var(--radius-lg);
    /* 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(var(--mkt-divider-rgb), 0.25);
    background: var(--mkt-white);
}

/* 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-grotesk);
    font-size: var(--text-24);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--mkt-white);
    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: var(--text-15);
    line-height: 1.65;
    color: var(--mkt-gray);
    /* 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: var(--text-15);
    line-height: 1.5;
    color: var(--mkt-gray);
}

.uc-page-list li::before {
    content: '\00b7';
    position: absolute;
    left: 0.15rem;
    color: var(--mkt-gray-dim);
}

/* 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: var(--mkt-gray-light);
}

.uc-page-list a {
    color: var(--mkt-link);
    text-decoration: none;
}

.uc-page-list a:hover {
    text-decoration: underline;
}
/* .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: var(--mkt-navy); }
.light-landing .use-case-subtitle { color: var(--mkt-text-muted); }

.light-landing .uc-group-title { color: var(--mkt-text); }
.light-landing .uc-group-text,
.light-landing .uc-page-list li { color: var(--mkt-text-muted); }
.light-landing .uc-page-list li::before { color: var(--mkt-slate-faint); }
.light-landing .uc-page-name { color: var(--mkt-slate); }
/* /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;
}

/* Nested inside .use-case-section (the group pages and the two Danish hubs) the
   bar's own 2rem gutter doubles up with the section's, pulling the crumb 32px
   in from the content edge the tiles and rows sit on. The /usecases bar is a
   sibling of the section, not a child, so it keeps its gutter. */
.use-case-section > .uc-breadcrumb-bar {
    padding: 0;
}

/* Directly under the headline (the Danish hubs) there is no intro paragraph to
   space the two apart, and the crumb ends up 4px off the subtitle. The group
   pages put .uc-intro in between, so they keep their existing rhythm. */
.use-case-header + .uc-breadcrumb-bar {
    margin-top: 1.25rem;
}

/* 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;
}

/* Audience subpages use the same framed surfaces and type as detail pages. */
.usecases-wrapper .use-case-wrapper {
    min-width: 0;
    background: var(--mkt-card-bg);
    border-color: var(--mkt-border);
    color: var(--mkt-text);
}
.usecases-wrapper .use-case-text h3 {
    font-family: var(--font-grotesk);
    font-weight: 500;
    line-height: 1.55;
    color: var(--mkt-text);
}
.usecases-wrapper .use-case-text p { color: var(--mkt-text-muted); }
.usecases-wrapper .use-case-wrapper:not(a)::after { content: none; }
.usecases-wrapper .use-case-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
    .usecases-wrapper .use-case-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .usecases-wrapper .use-case-tiles { grid-template-columns: 1fr; }
}