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

   Reads the --ds-* tokens from design-system.css so the marketing page and
   the app are one product, but sets its own scale: the app is a dense
   working surface, the landing page is the first thing a stranger sees.
   tests/test_design_system.py holds design-system.css to the --ds-space and
   --ds-type scales; this file is deliberately outside that, which is why the
   sizes below are literal.

   Three locks, kept on purpose:

   THEME. Navy at both ends, paper in the middle. The hero and the closing
   band plus footer are dark, everything between them is light. Sections do
   not alternate; a reader should never feel they walked onto a second site
   halfway down.

   ACCENT. One accent, --ds-accent (amber). It marks the primary action and
   nothing else. The secondary blue is structure, not accent.

   SHAPE. Every corner is square, because the app overrides every Bootstrap
   radius to 0. The only round things on the page are dots, which are dots.
   ============================================================ */

/* ── SHARED RHYTHM ── */
.landing-hero,
.landing-section,
.landing-cta {
    --landing-gutter: 96px;
}

.landing-section {
    padding: var(--landing-gutter) 0;
}

/* A tint inside the light half, rather than a jump to dark. Two adjacent
   sections are separated by a shade and a hairline, not by inversion. */
.section-tint {
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}

.section-head {
    max-width: 46rem;
    margin-bottom: 56px;
}

.section-title {
    font-size: 2rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ds-primary);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.section-subtitle {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ds-text-muted);
    max-width: 62ch;
    margin-bottom: 0;
}

/* ── HERO ── */
.landing-hero {
    background: var(--ds-primary);
    color: var(--ds-text-on-dark);
    padding: 72px 0 88px;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--ds-accent);
}

.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
}

/* dvh, not vh: on iOS Safari the address bar makes vh taller than the space
   actually available, so the CTA lands below the fold on first paint and
   the page jumps when the bar retracts. */
.hero-row {
    min-height: 52dvh;
    row-gap: 48px;
}

.hero-overline {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-accent-light);
    margin-bottom: 1.25rem;
}

.hero-title {
    font-size: clamp(2.1rem, 4.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    color: var(--ds-text-on-dark);
    text-wrap: balance;
    max-width: 22ch;
}

/* The headline is two sentences and each one owns a line, so the break is a
   property of the sentence rather than of the viewport. A hard <br> did this
   before and broke at one width only; a ch cap did it by accident and would
   have given four lines the moment the copy changed length, which it just
   did. Block display is the version that cannot drift. */
.hero-highlight {
    display: block;
    color: var(--ds-accent-light);
}

.hero-subtitle {
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(241,245,249,0.74);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions .btn-primary {
    padding: 13px 30px;
    font-weight: 650;
    background: var(--ds-accent);
    border-color: var(--ds-accent-dark);
    color: var(--ds-text-on-accent);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

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

.hero-actions .btn-outline-light {
    padding: 13px 30px;
    font-weight: 600;
    color: rgba(241,245,249,0.88);
    border-color: rgba(255,255,255,0.32);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.hero-actions .btn-outline-light:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* A press should feel like a press. 1px, not a bounce. */
.hero-actions .btn:active,
.landing-cta .btn:active {
    transform: translateY(1px);
}

/* ── HERO FIGURE ── */
.hero-visual {
    margin: 0;
}

.hero-fad-card {
    background: var(--ds-primary-dark);
    border: 1px solid rgba(255,255,255,0.12);
}

.fad-card-header {
    background: rgba(0,0,0,0.22);
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* The three window dots are gone. They dressed a real diagram up as a
   screenshot of an application window, which it is not. */
.fad-card-title {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(241,245,249,0.62);
}

.fad-card-body {
    padding: 22px;
}

.fad-svg {
    width: 100%;
    height: auto;
    display: block;
}

.fad-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.fad-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(241,245,249,0.6);
}

.fad-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.fad-dot--pass { background: var(--ds-pass); }
.fad-dot--marginal { background: var(--ds-review); }
.fad-dot--fail { background: var(--ds-fail); }

/* .64, not .55: measured against --ds-primary the lower alpha composites to
   4.39:1 at 11.5px, which is under AA for body text. */
.hero-caption {
    margin-top: 14px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(241,245,249,0.64);
    max-width: 42ch;
}

/* ── STEP SPINE ──
   A numbered sequence on a rule, not three cards in a row. The rule is the
   spine; each number sits on it. The steps are ordered, and a row reads
   left to right, so the eye follows the procedure instead of comparing
   three equal boxes. */
.step-spine {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 54rem;
    border-left: 1px solid var(--ds-border);
}

.step-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 0 0 44px 32px;
    position: relative;
}

.step-row:last-child {
    padding-bottom: 0;
}

.step-number {
    /* tabular figures so 1, 2 and 3 occupy the same width and the headings
       to their right start on one line. */
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-secondary);
    color: #fff;
    /* pulled onto the spine so the rule passes through the marker */
    margin-left: -51px;
    margin-right: -19px;
}

.step-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.step-body p {
    color: var(--ds-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 58ch;
    margin-bottom: 0;
}

/* ── PARTS INDEX ──
   The one grid on the page, and it earns it: eight items that are a real
   index, each a link into the product. Light now, not a dark band dropped
   into the middle of a light page. */
.mechanism-card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 18px 20px;
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.mechanism-card:hover {
    border-color: var(--ds-secondary);
    background: #fff;
    text-decoration: none;
}

.mechanism-card:focus-visible {
    outline: 2px solid var(--ds-secondary);
    outline-offset: 2px;
}

.mechanism-name {
    flex-grow: 1;
    font-weight: 600;
    font-size: 0.93rem;
    line-height: 1.35;
    color: var(--ds-primary);
}

.mechanism-arrow {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--ds-border-strong);
    transition: transform 0.18s ease, color 0.18s ease;
}

.mechanism-card:hover .mechanism-arrow {
    transform: translateX(3px);
    color: var(--ds-secondary);
}

/* ── SPEC LIST ──
   Four rows, so a definition list is the right component rather than four
   more cards. One hairline between rows, none above the first or below the
   last, so the group reads as a group and not as a table. */
.spec-list {
    margin: 0;
}

.spec-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 24px;
    padding: 20px 0;
}

.spec-row + .spec-row {
    border-top: 1px solid var(--ds-border);
}

.spec-row dt {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ds-primary);
    line-height: 1.5;
}

.spec-row dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ds-text-muted);
}

/* ── WHO IT IS FOR ──
   Prose in two columns. No cards and no icons: a hard hat, a factory, a
   briefcase and a graduation cap said nothing the heading did not already
   say, and four boxed rectangles made four sentences look like a product
   comparison. */
.persona-grid h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ds-primary);
    margin-bottom: 0.5rem;
    padding-top: 14px;
    border-top: 2px solid var(--ds-primary);
    line-height: 1.35;
}

.persona-grid p {
    color: var(--ds-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 46ch;
    margin-bottom: 0;
}

/* ── CLOSE ── */
.landing-cta {
    background: var(--ds-primary);
    color: var(--ds-text-on-dark);
    padding: var(--landing-gutter) 0;
    border-top: 2px solid var(--ds-accent);
    text-align: center;
}

.cta-title {
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.cta-subtitle {
    font-size: 1.02rem;
    color: rgba(241,245,249,0.75);
    margin: 0 auto 2rem;
    max-width: 34ch;
    line-height: 1.7;
}

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

.landing-cta .btn-light {
    background: var(--ds-accent);
    border-color: var(--ds-accent-dark);
    color: var(--ds-text-on-accent);
    font-weight: 700;
    padding: 13px 34px;
    transition: background 0.18s ease, transform 0.18s ease;
}

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

.landing-cta .btn-outline-light {
    font-weight: 600;
    padding: 13px 34px;
    color: rgba(241,245,249,0.88);
    border-color: rgba(255,255,255,0.32);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.landing-cta .btn-outline-light:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* ── FOOTER ── */
.landing-footer {
    background: var(--ds-primary-dark);
    color: rgba(241,245,249,0.75);
    padding: 56px 0 24px;
}

.landing-footer h2 {
    color: var(--ds-text-on-dark);
    margin-bottom: 14px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-desc {
    color: rgba(241,245,249,0.55);
    line-height: 1.7;
    max-width: 44ch;
}

/* inline-block plus padding, so the tap target is the full row rather than
   the 15px cap height of the text. Measured at 375px before the change: all
   thirteen footer links were 15px tall, against E7's 44px floor. The padding
   is vertical only, so the columns keep their left edge. */
.footer-link {
    display: inline-block;
    padding: 14px 0;
    color: rgba(241,245,249,0.65);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.18s ease;
}

/* E7 asks for 8px between touch targets, not only 44px targets. Without this
   the fifteen footer links stack edge to edge and a mis-tap lands on the
   neighbour. */
.landing-footer .list-unstyled li + li {
    margin-top: 8px;
}

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

/* Was 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. */
.footer-fineprint {
    color: rgba(241,245,249,0.58);
}

/* ── RESPONSIVE ──
   Only the three breakpoints in shared/design_tokens.py. A fourth would
   fail tests/test_design_system.py, and rightly: mobile_sidebar.js matches
   on the same widths. */
@media (max-width: 991.98px) {
    .landing-hero,
    .landing-section,
    .landing-cta {
        --landing-gutter: 68px;
    }

    .landing-hero {
        padding: 56px 0 68px;
    }

    .hero-row {
        min-height: 0;
    }

    .hero-title {
        max-width: 20ch;
    }

    .section-head {
        margin-bottom: 40px;
    }

    .spec-row {
        grid-template-columns: 9rem 1fr;
        gap: 18px;
    }
}

@media (max-width: 767.98px) {
    .landing-hero,
    .landing-section,
    .landing-cta {
        --landing-gutter: 52px;
    }

    .landing-hero {
        padding: 44px 0 52px;
    }

    .section-title,
    .cta-title {
        font-size: 1.6rem;
    }

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

    /* The number moves above its heading rather than beside it, and the
       spine goes with it, because a 38px marker plus a heading does not fit
       a 375px column without the heading wrapping to three lines. */
    .step-spine {
        border-left: 0;
    }

    .step-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 0 36px 0;
    }

    .step-number {
        margin-left: 0;
        margin-right: 0;
    }

    .spec-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}