/* ============================================================
   LANDING PAGE, static/css/landing.css

   Reads the --ds-* tokens from design-system.css so the landing page and the
   app are one product, but sets its own scale: the app is a dense working
   surface at a 14px root, the landing page is read once by a stranger, so its
   type is literal px (16px body, running text never under 13px, the headline
   about four times the body) and its spacing is wider. tests/test_design_system.py holds
   design-system.css to the --ds-space and --ds-type scales; this file is
   deliberately outside that. Colours are tokens without exception.

   THE SHEET. The whole page sits on --ds-chrome-bg, the topbar's navy, in
   both themes, with the drawing-sheet grid over it. Every card on it is a
   paper surface (--ds-surface) with the app's own text and status tokens, so
   in each theme the examples look like the result pages they come from.
   The grid on body::before stays still behind the content.

   THE EDGES. In the dark palette the surface and the page are close enough
   that a card needs --ds-border-strong to read as a card; in the light
   palette a card on navy reads by its own brightness and the strong border
   costs nothing. One token for both, so no rule forks on [data-theme].
   ============================================================ */

/* ── THE SHEET ── */
body.landing {
    background: var(--ds-chrome-bg);
    color: var(--ds-text-on-dark);
    font-size: 16px;
    line-height: 1.5;
}

body.landing::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--ds-chrome-wash) 1px, transparent 1px),
        linear-gradient(90deg, var(--ds-chrome-wash) 1px, transparent 1px);
    background-size: 32px 32px;
}

body.landing main,
.landing-footer {
    position: relative;
    z-index: 1;
}

/* ── TOPBAR, landing variant ──
   No sidebar below it, so no sidebar-width brand slot and no burger. The logo
   is the reversed artwork on the bar itself, with the section links beside
   it. */
.topbar--landing {
    gap: var(--ds-space-9);
    padding: 0 var(--ds-space-10);
}

.topbar--landing .topbar-brand {
    width: auto;
    padding: 4px 0;
}

.topbar-nav {
    display: flex;
    gap: var(--ds-space-9);
    margin-left: var(--ds-space-6);
}

.topbar-nav a {
    color: var(--ds-chrome-fg-dim);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
    transition: color 0.18s ease;
}

.topbar-nav a:hover {
    color: var(--ds-chrome-fg);
}

.topbar-nav a:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 4px;
    border-radius: var(--ds-radius-xs);
}

.topbar--landing .topbar-auth-link {
    font-size: 15px;
}

/* ── BUTTONS ──
   Bootstrap's .btn gives the box; these give it the landing page's size and
   the four fills it uses. */
.btn-accent,
.btn-ghost-light,
.btn-navy,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-accent:active,
.btn-ghost-light:active,
.btn-navy:active,
.btn-outline:active {
    transform: scale(0.97);
}

.btn-accent:focus-visible,
.btn-ghost-light:focus-visible,
.btn-navy:focus-visible,
.btn-outline:focus-visible {
    outline: 2px solid var(--ds-secondary);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-accent {
    background: var(--ds-accent);
    border-color: var(--ds-accent-dark);
    color: var(--ds-text-on-accent);
}

.btn-accent:hover {
    background: var(--ds-accent-dark);
    border-color: var(--ds-accent-dark);
    color: var(--ds-text-on-accent);
}

.btn-ghost-light {
    background: transparent;
    border-color: var(--ds-chrome-line);
    color: var(--ds-text-on-dark);
    font-weight: 600;
}

.btn-ghost-light:hover {
    background: var(--ds-chrome-wash);
    border-color: var(--ds-chrome-line);
    color: var(--ds-chrome-fg);
}

.btn-navy {
    background: var(--ds-primary);
    border-color: var(--ds-primary-dark);
    color: var(--ds-solid-fg);
}

.btn-navy:hover {
    background: var(--ds-primary-dark);
    border-color: var(--ds-primary-dark);
    color: var(--ds-solid-fg);
}

.btn-outline {
    background: transparent;
    border-color: var(--ds-border-strong);
    color: var(--ds-heading);
    font-weight: 600;
}

.btn-outline:hover {
    background: var(--ds-surface-sunken);
    border-color: var(--ds-border-strong);
    color: var(--ds-heading);
}

.btn-block {
    width: 100%;
}

/* ── RHYTHM ── */
.landing-section {
    padding: 72px 0;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.section-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ds-text-on-dark);
    margin: 0;
    text-wrap: balance;
}

.section-meta {
    font-size: 15px;
    color: var(--ds-chrome-fg-dim);
    margin: 0;
}

/* ── HERO: the claim and the control on the left, the result on the right ── */
.hero {
    padding: 56px 0 64px;
    border-bottom: 1px solid var(--ds-chrome-line);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "title title"
        "text card"
        "play photo";
    gap: 24px 56px;
    align-items: start;
}

.hero__text {
    grid-area: text;
}

.hero__card {
    grid-area: card;
}

.hero__play {
    grid-area: play;
    align-self: start;
}

/* The claim on its own row across both columns: two lines at 1440px, three
   on a phone, where no setting of these eight words above 32px fits two. */
.hero__title {
    grid-area: title;
    font-size: clamp(36px, 20px + 2.9vw, 60px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ds-text-on-dark);
    margin: 0 0 8px;
    text-wrap: balance;
}

/* The standards: the one in use leads with what it assesses; the design codes
   are marked planned in one row. */
.kw-tiles {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--ds-chrome-line);
    border: 1px solid var(--ds-chrome-line);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.kw-tiles > li {
    position: relative;
    background: var(--ds-chrome-bg);
    padding: 12px 16px;
    line-height: 1.3;
    color: var(--ds-text-on-dark);
}

.kw-tiles__lead {
    grid-column: 1 / -1;
    padding: 16px 18px 14px;
}

.kw-tiles__name {
    display: block;
    font-size: 17px;
    font-weight: 700;
}

.kw-tiles__lead .kw-tiles__name {
    font-size: 24px;
    letter-spacing: -0.01em;
}

.kw-tiles__list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--ds-text-on-dark);
}

.kw-tiles__list li {
    padding: 0 12px;
    border-left: 1px solid var(--ds-chrome-line);
}

.kw-tiles__list li:first-child {
    padding-left: 0;
    border-left: 0;
}

.kw-tiles small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--ds-chrome-fg-dim);
}

.kw-tiles__tag {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ds-chrome-fg-dim);
    border: 1px solid var(--ds-chrome-line);
    border-radius: var(--ds-radius-xs);
    padding: 1px 7px;
}

.kw-tiles__planned-row {
    display: block;
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--ds-chrome-fg-dim);
}

.kw-tiles__planned-row .kw-tiles__tag {
    position: static;
    margin-right: 8px;
    vertical-align: 1px;
}

/* One line under the title: what the reader gets, before the tiles. */
.hero__lede {
    margin: 0 0 20px;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ds-text-on-dark);
}

/* What the free account is, under the button that opens it. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Facts in a row, separated by hairlines rather than bullets. */
.hero-facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    font-size: 15px;
    color: var(--ds-chrome-fg-dim);
}

.hero-facts li {
    padding: 0 12px;
    border-left: 1px solid var(--ds-chrome-line);
}

.hero-facts li:first-child {
    padding-left: 0;
    border-left: 0;
}

/* ── HERO CARD: a result, reduced ── */
.hero__card {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-2);
    padding: 20px 24px 16px;
}

.hero__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.result-preview__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-heading);
    margin: 0;
    line-height: 1.3;
}

.hero__report {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-link);
    text-decoration: none;
    white-space: nowrap;
}

.hero__report:hover {
    text-decoration: underline;
    color: var(--ds-link-hover);
}

/* The verdict's rail: the one place the card states the outcome in colour,
   and the class carries it too. */
.hero__verdict {
    padding: 10px 14px;
    border-left: 3px solid var(--ds-pass);
    background: var(--ds-surface-sunken);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    margin-bottom: 14px;
    transition: border-color 0.18s ease;
}

.result-preview__status {
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-pass);
    margin: 0 0 2px;
}

.result-preview__lede {
    font-size: 14px;
    color: var(--ds-text-secondary);
    margin: 0;
}

.result-preview__lede span {
    font-family: var(--ds-font-mono);
    font-weight: 700;
    color: var(--ds-heading);
}

.hero__verdict.is-fail {
    border-left-color: var(--ds-fail);
}

.hero__verdict.is-fail .result-preview__status {
    color: var(--ds-fail);
}

.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 4px;
    align-items: end;
}

.hero__metrics dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-muted);
    line-height: 1.3;
}

.hero__metrics dt .sym {
    font-style: italic;
    font-size: 1.05em;
}

.hero__metrics dd {
    margin: 2px 0 0;
    font-family: var(--ds-font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--ds-heading);
    font-variant-numeric: tabular-nums;
}

.hero__chart {
    max-width: 500px;
    margin: 0 auto;
}

/* ── CHARTS ──
   Shared by the FAD and the thickness profile. Thin lines, mono ticks, and
   colour only where it carries meaning: the acceptable region, the point,
   the limits. */
.lp-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-grid {
    fill: none;
    stroke: var(--ds-border-subtle);
    stroke-width: 1;
}

.lp-axis {
    fill: none;
    stroke: var(--ds-border-strong);
    stroke-width: 1;
}

.lp-tick {
    fill: var(--ds-text-muted);
    font-family: var(--ds-font-mono);
    font-size: 10px;
}

.lp-axis-label {
    fill: var(--ds-text-secondary);
    font-size: 12px;
    font-style: italic;
}

.lp-annot {
    fill: var(--ds-text-secondary);
    font-size: 10.5px;
}

.lp-sub {
    font-size: 8px;
}

.lp-fad-area {
    fill: var(--ds-pass);
    fill-opacity: 0.08;
}

.lp-fad-curve {
    fill: none;
    stroke: var(--ds-heading);
    stroke-width: 1.75;
}

.lp-cutoff {
    fill: none;
    stroke: var(--ds-heading);
    stroke-width: 1.25;
    stroke-dasharray: 2 3;
}

.lp-load {
    fill: none;
    stroke: var(--ds-secondary);
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
}

.lp-hit {
    fill: var(--ds-surface);
    stroke: var(--ds-secondary);
    stroke-width: 1.5;
}

.lp-point {
    fill: var(--ds-pass);
    stroke: var(--ds-surface);
    stroke-width: 2;
    transition: cx 0.12s ease, cy 0.12s ease;
}

.lp-point--fail {
    fill: var(--ds-fail);
}

.lp-point--min {
    fill: var(--ds-secondary);
}

.lp-profile {
    fill: none;
    stroke: var(--ds-secondary);
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.lp-profile-area {
    fill: var(--ds-secondary);
    fill-opacity: 0.08;
}

.lp-required {
    fill: none;
    stroke: var(--ds-fail);
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
}

.lp-average {
    fill: none;
    stroke: var(--ds-review);
    stroke-width: 2;
}

/* ── THE CRACK-DEPTH CONTROL: a card of its own under the claim ── */
.hero__play {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    padding: 14px 16px 12px;
}

.fad-play {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 16px;
    align-items: stretch;
}

.fad-play__control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.fad-play__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    margin: 0;
}

.fad-play__label .sym {
    font-style: italic;
}

/* A vertical range: deeper is lower, like the crack in the wall beside it. */
.fad-play__range {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    width: 28px;
    height: 120px;
    flex: 1 1 auto;
    margin: 2px 0;
    accent-color: var(--ds-secondary);
    cursor: ns-resize;
}

.fad-play__range:focus-visible {
    outline: 2px solid var(--ds-secondary);
    outline-offset: 4px;
    border-radius: var(--ds-radius-xs);
}

.fad-play__value {
    font-family: var(--ds-font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fad-play__ratio {
    font-family: var(--ds-font-mono);
    font-size: 13px;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

/* The wall section follows the theme, like the diagram above it. */
.crack-sketch {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ds-border-subtle);
    border-radius: var(--ds-radius-sm);
}

.cs-plate {
    fill: var(--ds-surface);
}

.cs-wall {
    fill: var(--ds-surface-sunken);
}

.cs-crack {
    fill: var(--ds-surface);
    stroke: var(--ds-fail);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.cs-crack.is-fail {
    stroke-width: 2;
}

.cs-line {
    fill: none;
    stroke: var(--ds-border-strong);
    stroke-width: 1.25;
}

.cs-dash {
    fill: none;
    stroke: var(--ds-text-muted);
    stroke-width: 0.9;
    stroke-dasharray: 24 6 2 6;
}

.cs-dim {
    fill: none;
    stroke: var(--ds-text-secondary);
    stroke-width: 1;
}

.cs-head {
    fill: var(--ds-text-secondary);
}

.cs-label {
    fill: var(--ds-text);
    font-family: var(--ds-font);
    font-size: 14px;
}

.cs-note {
    fill: var(--ds-text-muted);
    font-family: var(--ds-font);
    font-size: 10px;
}

/* ── THE ASSESSMENT DASHBOARD, as a still ── */
.app-shot {
    background: var(--ds-bg);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-2);
    padding: 14px 16px 2px;
    overflow: hidden;
}

.shot-card {
    margin-bottom: 12px;
}

.shot-title {
    font-weight: 500;
    color: var(--ds-text);
}

.shot-muted {
    color: var(--ds-text-muted);
}

.app-shot .ds-table th,
.app-shot .ds-table td {
    padding: 10px 12px;
    font-size: 14px;
    white-space: normal;
}

.app-shot .ds-table thead th,
.app-shot .ds-table td:has(.status-badge),
.app-shot .ds-table td:has(.part-badge),
.app-shot .ds-table td:has(.u-type-sm) {
    white-space: nowrap;
}

/* ── EXAMPLES, as the result page lays them out ──
   A wide table and a figure side by side, the chart across the full width
   under them. */
.example-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
}

.example-panel {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

.example-panel--full {
    grid-column: 1 / -1;
}

.example-panel--figure .example-panel__body {
    display: flex;
    align-items: center;
}

.example-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 16px 20px 0;
}

.example-panel__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-heading);
    margin: 0;
}

.example-panel__meta {
    font-size: 13px;
    color: var(--ds-text-muted);
}

.example-panel__body {
    flex: 1 1 auto;
    padding: 14px 20px;
    overflow-x: auto;
}

.example-panel__body--chart {
    padding: 0;
    overflow: visible;
}

.example-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--ds-text);
}

.example-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    text-align: left;
    padding: 0 8px 8px 0;
    border-bottom: 1px solid var(--ds-border);
}

.example-table td {
    padding: 9px 8px 9px 0;
    border-bottom: 1px solid var(--ds-border-subtle);
    vertical-align: middle;
}

.example-table tr:last-child td {
    border-bottom: 0;
}

.example-table .num {
    text-align: right;
    font-family: var(--ds-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.example-table th.num {
    font-family: var(--ds-font);
}

.example-table .sym {
    font-style: italic;
    color: var(--ds-text-secondary);
}

.example-table .is-governing td {
    background: var(--ds-surface-sunken);
}

.example-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-secondary);
    border: 1px solid var(--ds-border);
    vertical-align: 1px;
}

/* A utilization bar under the percentage: 100% is the limit. The widths
   are classes because the CSP blocks inline style. */
.util {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--ds-pass);
    font-weight: 600;
}

.util__bar {
    display: block;
    height: 3px;
    width: 64px;
    background: linear-gradient(90deg, var(--ds-pass) var(--util), var(--ds-border-subtle) var(--util));
}

.util__bar--40 { --util: 40%; }
.util__bar--50 { --util: 50%; }
.util__bar--59 { --util: 59%; }
.util__bar--75 { --util: 75%; }

/* The Part 10 chart, drawn by the result page's own script inside a landing
   panel: no second card around it, no time-scale control (years is the one
   scale shown), and the keyboard inspector only while a marker has focus. */
.cr-chart-card--landing {
    border: 0;
    margin: 0;
    background: transparent;
}

.cr-chart-card--landing .cr-chart-card__body {
    padding: 4px 20px 14px;
}

.cr-chart-card--landing .cr-chart-host:not(:focus-within) .cr-chart-inspector {
    display: none;
}

/* The chart's stylesheet displays the control as flex, which beats the hidden
   attribute. */
.cr-chart-card--landing .cr-chart-time-scale {
    display: none;
}

/* ── PICTURES: a real inspection beside the calculation it belongs to ──
   One per panel, inside the card edge. A photo is cropped to 2.4:1 so the
   set reads as one; a scan is data and is shown whole at its own ratio. A
   numbered mark in the corner links to the credit the licence asks for, in
   the footer's picture credits. */
.lp-pic {
    display: block;
    position: relative;
    margin: 0;
}

.lp-pic img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.4 / 1;
    object-fit: cover;
    background: var(--ds-surface-sunken);
}

.lp-pic--scan img {
    aspect-ratio: auto;
}

/* The picture's footnote number in its corner, linking to the credit in the
   page foot (.footer-credits). */
.lp-pic__note {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--ds-text-on-dark);
    background: var(--ds-overlay);
    border-radius: var(--ds-radius-xs);
    text-decoration: none;
    opacity: 0.55;
}

.lp-pic__note:hover,
.lp-pic__note:focus-visible {
    opacity: 1;
}

/* The hero's: a card of its own under the result, beside the slider. */
.hero__photo {
    grid-area: photo;
    align-self: start;
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

/* In an example panel: head, picture, data. */
.example-panel > .lp-pic {
    margin-top: 14px;
}

.example-panel > .lp-pic + .example-panel__body {
    padding-top: 16px;
}

/* The creep panel is full width, so its picture takes the left third beside
   the chart rather than a 540px band above it. */
.example-panel--full .example-panel__body--chart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
}

.example-panel--full .lp-pic--side {
    position: relative;
    margin: 14px 0 14px 20px;
}

.example-panel--full .lp-pic--side img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--ds-radius-md);
}

/* ── PLANS: a comparison table, or cards on a phone ── */
.compare-wrap {
    position: relative;
    overflow-x: auto;
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
}

.compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.compare th,
.compare td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--ds-border-subtle);
}

.compare thead tr:first-child th {
    font-size: 20px;
    font-weight: 700;
    color: var(--ds-heading);
    padding-top: 22px;
    border-bottom: 0;
}

.compare tbody th {
    font-weight: 500;
    color: var(--ds-text-secondary);
    width: 30%;
}

.compare__price th {
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.compare__price td {
    border-bottom: 1px solid var(--ds-border);
    padding-bottom: 18px;
}

.compare__amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-heading);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.compare__unit,
.compare__muted {
    font-size: 14px;
    color: var(--ds-text-muted);
}

a.compare__muted {
    color: var(--ds-link);
}

.compare .yes {
    color: var(--ds-pass);
    font-weight: 700;
}

.compare .no {
    color: var(--ds-text-muted);
}

.compare tfoot td {
    padding: 18px 20px 22px;
    border-bottom: 0;
}

.compare tfoot th {
    border-bottom: 0;
}

/* The held plan, and the notes that take a button's place */
.plan-current {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-pass);
}

.compare__note {
    display: block;
    font-size: 13px;
    color: var(--ds-text-muted);
    line-height: 1.45;
    max-width: 28ch;
}

.compare__note--current {
    color: var(--ds-text-secondary);
}

.plan-cards {
    display: none;
}

.plan {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    padding: 28px;
}

.plan--lead {
    border-color: var(--ds-primary);
}

.plan__name {
    font-size: 20px;
    font-weight: 700;
    color: var(--ds-heading);
    margin: 0 0 10px;
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 20px;
}

.plan__price .compare__amount {
    font-size: 28px;
    line-height: 1;
}

.plan__features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex: 1 1 auto;
}

.plan__features li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 15px;
    color: var(--ds-text);
    line-height: 1.5;
}

.plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 9px;
    height: 2px;
    background: var(--ds-pass);
}

.plan__features li.is-legacy {
    font-weight: 650;
    color: var(--ds-heading);
}

.plan__features li.is-legacy::before {
    background: var(--ds-accent);
    height: 3px;
}

.plan .compare__note {
    margin-top: 4px;
}

/* ── CLOSE ── */
.landing-cta {
    padding: 64px 0;
    border-top: 1px solid var(--ds-chrome-line);
    text-align: center;
    color: var(--ds-text-on-dark);
}

.cta-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    color: var(--ds-text-on-dark);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ── FOOTER ── */
.landing-footer {
    background: var(--ds-chrome-bg);
    border-top: 1px solid var(--ds-chrome-line);
    color: var(--ds-chrome-fg-dim);
    padding: 56px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 5fr 3fr 2fr 2fr;
    gap: 32px;
}

.landing-footer h2 {
    color: var(--ds-text-on-dark);
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
}

.landing-footer h2.footer-brand {
    font-size: 20px;
}

.footer-desc {
    color: var(--ds-chrome-fg-dim);
    line-height: 1.7;
    max-width: 44ch;
    font-size: 14px;
    margin: 0;
}

.landing-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* E7 asks for 8px between touch targets, not only 44px targets. */
.landing-footer li + li {
    margin-top: 8px;
}

/* inline-block plus padding, so the tap target is the full row rather than
   the cap height of the text. Vertical only, so the columns keep their left
   edge. */
.footer-link {
    display: inline-block;
    padding: 10px 0;
    color: var(--ds-chrome-fg-dim);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.footer-link:hover {
    color: var(--ds-accent-light);
}

.footer-rule {
    border: 0;
    border-top: 1px solid var(--ds-chrome-line);
    opacity: 1;
    margin: 32px 0 20px;
}

/* --ds-chrome-fg-dim, not Bootstrap's .text-muted, which composited to
   4.45:1 on the footer and so sat just under AA. The copyright and the "not
   affiliated with API or ASME" line are the two strings a lawyer would ask
   about, so they are not the place to be a shade under. tests/test_landing_page.py
   measures this rule. */
.footer-fineprint {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--ds-chrome-fg-dim);
}

/* Picture credits: the footnotes the marks on the pictures link to. */
.footer-credits {
    margin: 16px 0 0;
    padding: 0 0 0 20px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ds-chrome-fg-dim);
}

.footer-credits li {
    scroll-margin-top: 24px;
}

.landing-footer .footer-credits li + li {
    margin-top: 2px;
}

.footer-credits a {
    color: inherit;
}

/* ── PUBLIC PAGES: Assessments, News, About us ──
   The landing page's sheet with paper cards on it, as the examples are. */
.topbar-nav a[aria-current="page"] {
    color: var(--ds-text-on-dark);
}

.site-page {
    min-height: 60vh;
}

.site-page .section-meta a,
.footer-version {
    color: var(--ds-accent-light);
}

.site-standards,
.site-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    align-items: start;
    gap: 16px;
}

.site-card {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    padding: 20px 24px;
}

.site-card p {
    margin: 0 0 8px;
}

.site-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--ds-text);
}

.site-card__title a {
    color: inherit;
}

.site-card__meta {
    font-size: 14px;
    color: var(--ds-text-muted);
}

.site-card__list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.site-card__list li + li {
    margin-top: 8px;
}

.site-card__list a,
.site-article__body a,
.site-article__back a {
    color: var(--ds-link);
}

.site-card__part,
.site-card__planned {
    font-size: 14px;
    color: var(--ds-text-muted);
}

.site-news {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    max-width: 760px;
}

.site-level {
    font-weight: 700;
}

.site-level--breaking {
    color: var(--ds-fail);
}

.site-article {
    max-width: 760px;
}

.site-article__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--ds-text);
}

.site-article__body h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 24px 0 8px;
}

.site-article__body p,
.site-article__body ul {
    margin: 0 0 12px;
}

.site-article__back {
    margin-top: 24px;
}

.site-person {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.site-person__photo,
.site-person__initials {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.site-person__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-chrome-bg);
    color: var(--ds-text-on-dark);
    font-size: 30px;
    font-weight: 700;
}

.site-company {
    margin-top: 16px;
    max-width: 480px;
}

/* ── RESPONSIVE ──
   Only the three breakpoints in shared/design_tokens.py. */
/* ── CRACK GROWTH: the flaw grown to failure, one curve per initial depth, a slider over the cycles ──
   The palette classes (clf-point-color-N) set --clf-sensitivity-point-color per curve; the baseline sets it here. */
.growth-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    padding: 14px 20px 18px;
}

.growth-baseline {
    --clf-sensitivity-point-color: var(--ds-heading);
}

.growth-life {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0;
}

.growth-life dt {
    font-size: 13px;
    color: var(--ds-text-muted);
    margin: 0;
}

.growth-life dd {
    font-family: var(--ds-font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-heading);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.growth-chart__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-muted);
    margin: 0 0 4px;
}

.growth-chart__title .sym {
    font-style: italic;
}

.growth-curve {
    fill: none;
    stroke: var(--clf-sensitivity-point-color);
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.growth-mark {
    fill: var(--clf-sensitivity-point-color);
    stroke: var(--ds-surface);
    stroke-width: 1.5;
}

.growth-fail {
    fill: none;
    stroke: var(--ds-fail);
    stroke-width: 2;
}

.growth-legend {
    grid-column: 1 / -1;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.growth-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* A key: the curve's line with the marker the cycle slider moves along it. */
.growth-legend__key {
    position: relative;
    flex: none;
    width: 28px;
    height: 10px;
}

.growth-legend__key::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid var(--clf-sensitivity-point-color);
    transform: translateY(-50%);
}

.growth-legend__key::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--clf-sensitivity-point-color);
    box-shadow: 0 0 0 1.5px var(--ds-surface);
    transform: translate(-50%, -50%);
}

.growth-legend__cross {
    color: var(--ds-fail);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.growth-play {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    align-items: center;
}

.growth-play__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-muted);
    margin: 0;
}

.growth-play__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ds-secondary);
}

.growth-play__range:focus-visible {
    outline: 2px solid var(--ds-secondary);
    outline-offset: 4px;
    border-radius: var(--ds-radius-xs);
}

.growth-play__values {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--ds-font-mono);
    font-size: 14px;
    color: var(--ds-heading);
    font-variant-numeric: tabular-nums;
}

.growth-play__values .sym {
    font-style: italic;
}

@media (max-width: 991.98px) {
    .topbar-nav {
        display: none;
    }

    .growth-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero {
        padding: 32px 0 40px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "title"
            "text"
            "card"
            "play"
            "photo";
        gap: 24px;
    }

    /* The creep picture goes back above its chart, as a band like the others */
    .example-panel--full .example-panel__body--chart {
        grid-template-columns: minmax(0, 1fr);
    }

    .example-panel--full .lp-pic--side {
        margin: 14px 20px 0;
    }

    .example-panel--full .lp-pic--side img {
        position: static;
        height: auto;
        aspect-ratio: 2.4 / 1;
    }

    .example-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .landing-section {
        padding: 48px 0;
    }

    .section-title,
    .cta-title {
        font-size: 26px;
    }

    .hero {
        padding: 32px 0 40px;
    }

    .hero__card {
        padding: 16px 14px 12px;
    }

    .hero-actions .btn,
    .cta-actions .btn {
        width: 100%;
    }

    /* Metrics as label and value rows */
    .hero__metrics {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .hero__metrics > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .hero__metrics dd {
        font-size: 20px;
    }

    .hero__chart .lp-annot {
        display: none;
    }

    .fad-play {
        gap: 0 10px;
    }

    /* The still keeps title, type and result */
    .app-shot .ds-table th:nth-child(3),
    .app-shot .ds-table td:nth-child(3),
    .app-shot .ds-table th:nth-child(4),
    .app-shot .ds-table td:nth-child(4),
    .app-shot .ds-table th:nth-child(6),
    .app-shot .ds-table td:nth-child(6),
    .app-shot .ds-table th:nth-child(7),
    .app-shot .ds-table td:nth-child(7) {
        display: none;
    }

    .app-shot .ds-table td:has(.part-badge) {
        white-space: normal;
    }

    /* The chart fits the panel instead of scrolling */
    .cr-chart-card--landing .cr-chart-plot-wrap svg {
        min-width: 0;
        width: 100%;
        height: auto;
    }

    .cr-chart-card--landing .cr-chart-card__body {
        padding: 4px 8px 10px;
    }

    /* Plans as cards */
    .plans-table {
        display: none;
    }

    .plan-cards {
        display: grid;
        gap: 14px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}