/* A visitor's `/`: the drafting page with a headline above it and the proof
   below it. Drawn in the Line's ink and pencil, so the first screen a runner
   sees is the same notebook the plan lives in. */

.cp-page--landing .cp-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.04;
}

.cp-page--landing .cp-hero { max-width: 720px; }

.lp-section {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--rule);
}

.lp-section .container { max-width: 1240px; }

.lp-title {
    margin: var(--space-2) 0 var(--space-4);
    font: 700 clamp(1.6rem, 3vw, 2.25rem)/1.15 var(--font-display);
    color: var(--ink);
    text-wrap: balance;
}

.lp-adapt {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

.lp-story { display: grid; gap: var(--space-3); color: var(--ink-soft); }
.lp-story > p { margin: 0; max-width: 38em; }

.lp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.lp-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.lp-sw { display: inline-block; width: 26px; }
.lp-sw--ink { border-top: 3px solid var(--ink); }
.lp-sw--pencil { border-top: 2px dashed var(--pencil); }
.lp-sw--coach { width: 3px; height: 16px; background: var(--coach); }

.lp-connect { display: grid; gap: var(--space-3); margin-top: var(--space-4); justify-items: start; }
.lp-note { margin: 0; font-size: var(--text-sm); }
.lp-note a { color: var(--coach); }

.lp-prereqs { font-size: var(--text-sm); }
.lp-prereqs summary { cursor: pointer; color: var(--ink-soft); font-weight: var(--weight-medium); }
.lp-prereqs ul { margin: var(--space-3) 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.lp-prereqs p { margin: 0; color: var(--pencil); }

/* The adjustment, drawn as the Line draws a rewrite: the old distance struck
   in pencil, the new one inked, the reason in the margin. */
.lp-rewrite {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    background: var(--paper-raised);
    display: grid;
    gap: var(--space-4);
}

.lp-rewrite figcaption { display: grid; gap: var(--space-1); }
.lp-rewrite figcaption strong { font: 600 var(--text-lg)/1.25 var(--font-display); color: var(--ink); }
.lp-rewrite dl { margin: 0; display: grid; }

.lp-rewrite dl div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--pencil-faint);
}

.lp-rewrite dt { color: var(--ink-soft); }
.lp-rewrite dd { margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.lp-rewrite dd s { color: var(--pencil); margin-right: var(--space-2); }
.lp-rewrite dd strong { color: var(--coach); }

.lp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    border-top: 3px solid var(--ink);
}

.lp-facts div { padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.lp-facts h3 { margin: 0; font: 600 var(--text-md)/1.3 var(--font-display); color: var(--ink); }
.lp-facts p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.lp-cta { margin-top: var(--space-8); }

@media (max-width: 860px) {
    .lp-section { padding: var(--space-10) 0; }
    .lp-adapt { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .lp-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
}