/* Investment Path – homepage
   One hierarchy: what this is, one way in, a photograph of the running
   application, three decisions and two promises. The page it replaced carried
   four question cards, three worked examples, four topic cards and six
   capability tiles, which is seventeen places to click and no answer to
   "what is this?". The guided planner below remains its own component.
   ========================================================================== */

/* The shared hero holds a full viewport open, which the question grid below
   it used to fill. This one ends on the preview, so a floor that tall left a
   screenful of nothing between the picture and the first section. It keeps a
   generous minimum rather than none: the hero is still meant to be the whole
   of a first screen. */
.home-lead-hero {
    min-height: min(calc(100vh - 88px), 720px);
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
    align-items: center;
    padding-bottom: var(--space-fluid-xl);
}

.home-preview,
.home-example-card,
.home-closing-card {
    border: 1px solid var(--border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 55%),
        color-mix(in srgb, var(--surface-solid) 58%, transparent);
    box-shadow: var(--elevation-raised);
    backdrop-filter: blur(22px) saturate(190%);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
}

/* ---------- The photograph ---------- */

.home-preview {
    min-width: 0;
    margin: 0;
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    animation: landingRise var(--motion-slow) 90ms var(--ease-out) both;
}

/* `height: auto` beside the intrinsic `width`/`height` attributes: the
   attributes reserve the right box before the file arrives, and this lets it
   scale once it has. Without both, the copy beside it jumps. */
.home-preview-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.home-preview figcaption {
    margin-top: var(--space-lg);
    color: var(--text-faint);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

/* ---------- Sections ---------- */

.home-capabilities,
.home-examples,
.home-closing {
    scroll-margin-top: 100px;
}

.home-capabilities { padding: 0 0 var(--space-fluid-xl); }
.home-examples { padding: 0 0 var(--space-fluid-xl); }

.home-capabilities > h2 {
    max-width: 640px;
    margin-bottom: var(--space-2xl);
    font-size: var(--display-sm);
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.home-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.5fr);
    align-items: end;
    gap: var(--space-fluid-xl);
    margin-bottom: var(--space-3xl);
}

.home-section-head > * { min-width: 0; }

.home-section-head h2 {
    max-width: 700px;
    margin-top: var(--space-lg);
    overflow-wrap: anywhere;
    font-size: var(--display-lg);
    line-height: 1.03;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.home-section-head > a {
    justify-self: end;
    color: var(--accent-2-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
}

/* ---------- What it models ---------- */

.home-simulator-capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--border);
    list-style: none;
}

.home-simulator-capabilities li {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-2xl);
    background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
}

.home-simulator-capabilities strong {
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.home-simulator-capabilities span {
    color: var(--text-dim);
    font-size: var(--font-size-xs);
    line-height: 1.55;
}

/* ---------- Three decisions ---------- */

.home-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
}

.home-example-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-fluid-md);
    border-radius: var(--radius-xl);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out);
}

.home-example-card > p {
    color: var(--accent-2-text);
    font-size: var(--font-size-2xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-example-card h3 {
    font-size: var(--font-size-lg);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-example-card > span {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* The inputs the example actually rests on. The card used to describe the
   scenario in a sentence and leave its 900,000 opening balance in the link,
   which is the one number that decides whether the plan works - so the
   assumptions are listed where the claim is made. Two columns of label and
   figure, collapsing to a stack where that no longer fits. */
.home-example-assumptions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs) var(--space-md);
    margin: 0;
    font-size: var(--font-size-sm);
}

.home-example-assumptions dt {
    color: var(--text-dim);
}

.home-example-assumptions dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 420px) {
    .home-example-assumptions {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-example-assumptions dd {
        margin-bottom: var(--space-2xs);
        text-align: left;
    }
}

.home-example-card > strong {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-lg);
    color: var(--accent-2-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.home-example-card i {
    font-style: normal;
    transition: transform var(--motion-base) var(--ease-out);
}

/* ---------- The two promises ---------- */

.home-closing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    padding: 0 0 var(--space-4xl);
}

.home-closing-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-fluid-md);
    border-radius: var(--radius-xl);
}

.home-closing-card > p {
    color: var(--text-faint);
    font-size: var(--font-size-sm);
}

.home-closing-card h3 {
    max-width: 34ch;
    font-size: var(--font-size-xl);
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.home-closing-card > span {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.home-closing-card > a { margin-top: var(--space-md); }

@media (hover: hover) and (pointer: fine) {
    .home-example-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--accent-2) 35%, var(--border));
    }

    .home-example-card:hover i { transform: translateX(4px); }
    .home-section-head > a:hover { text-decoration: underline; }
}

@media (max-width: 980px) {
    .home-lead-hero { grid-template-columns: minmax(0, 1fr); }
    .home-preview { width: min(100%, 760px); margin-inline: auto; }
    .home-section-head { grid-template-columns: 1fr; gap: var(--space-xl); }
    .home-section-head > a { justify-self: start; }
    .home-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .home-capabilities { padding-top: var(--space-2xl); }
    .home-example-grid,
    .home-closing { grid-template-columns: 1fr; }

    /* Nothing to do to the picture here: the `<picture>` hands a phone a
       photograph taken at a phone's width, so it is already the right shape
       and the type in it is already legible. This used to draw the wide
       desktop shot 176% of the card's width and clip a band out of it, which
       enlarged the type by cropping the chart away. */
    .home-preview { padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
    .home-preview { animation: none; }
    .home-example-card,
    .home-example-card i { transition: none; }
}