/* Investment Path – sections
   Principles, the how-it-works copy, the assumption stack, scroll reveal.
   ========================================================================== */

/* Three panes rather than one ruled band: each article now carries the page's
   glass (see 01-shell.css) so the trend line runs behind it, and hairline
   dividers between abutting panes would read as a seam. */
.landing-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.landing-principles article {
    position: relative;
    min-height: 235px;
    padding: 37px clamp(25px, 3vw, 44px);
}

.principle-number {
    color: var(--accent-2-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.landing-principles h2 {
    margin-top: 41px;
    font-size: 17px;
    letter-spacing: -0.025em;
}

.landing-principles p {
    max-width: 290px;
    margin-top: 10px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.7;
}

.landing-how {
    min-height: 660px;
    display: grid;
    grid-template-columns: 1fr minmax(390px, 0.8fr);
    align-items: center;
    gap: clamp(60px, 9vw, 130px);
    padding: 110px 0;
}

.landing-section-copy h2 {
    max-width: 680px;
    margin-top: 17px;
    font-size: clamp(34px, 4.7vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.landing-section-copy > p:not(.landing-kicker) {
    max-width: 610px;
    margin-top: 23px;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.8;
}

.landing-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    color: var(--accent-2-text) !important;
    font-size: 12px;
    font-weight: 760;
    text-underline-offset: 4px;
}

.landing-text-link span {
    transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .landing-text-link:hover span {
        transform: translateX(4px);
    }
}

.assumption-stack {
    display: grid;
    gap: 10px;
    perspective: 700px;
}

.assumption-stack article {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 18px;
    /* Fill and backdrop-filter come from the shared glass in 01-shell.css. */
    border-radius: 17px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.assumption-stack article:nth-child(1) { transform: rotate(-1.2deg); }
.assumption-stack article:nth-child(2) { transform: translateX(20px); }
.assumption-stack article:nth-child(3) { transform: rotate(1deg); }

.assumption-stack article:hover {
    z-index: 1;
    border-color: var(--border-strong);
    transform: translateY(-4px) scale(1.01);
}

.assumption-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.assumption-dot.green { background: var(--green); box-shadow: 0 0 14px rgba(52, 211, 153, 0.55); }
.assumption-dot.purple { background: var(--accent); box-shadow: 0 0 14px rgba(99, 102, 241, 0.55); }
.assumption-dot.cyan { background: var(--cyan); box-shadow: 0 0 14px rgba(34, 211, 238, 0.55); }

.assumption-stack article div {
    display: grid;
    gap: 4px;
}

.assumption-stack strong {
    font-size: 12px;
}

.assumption-stack small {
    color: var(--text-faint);
    font-size: 9.5px;
}

.assumption-stack article > span:last-child {
    color: var(--text-faint);
    font-size: 17px;
    font-weight: 750;
}

/* Revealing a section by fading the section itself would make it a backdrop
   root, and a glass pane can only frost what lies outside its own backdrop
   root – every pane in the section would stop working for the length of the
   transition and the trend line would show through raw. So the fade never
   lands on an element that contains a pane: it goes on the panes where they
   are elements in their own right, and one level deeper where a pane is a
   ::before. An element's *own* opacity is harmless, which is why
   .path-preview never had this problem. See 01-shell.css.

   Movement is separate on purpose. .assumption-stack keeps it, because its
   cards carry their own fanned rotations that a translate here would wipe –
   and a transform on an ancestor does not form a backdrop root, only opacity
   does. The JS only toggles .is-visible; none of this is visible to it. */
.landing-principles.reveal-on-scroll > article,
.landing-how.reveal-on-scroll > .landing-section-copy > *,
.landing-how.reveal-on-scroll > .landing-section-copy::before,
.landing-how.reveal-on-scroll > .assumption-stack > article {
    opacity: 0;
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.landing-principles.reveal-on-scroll > article,
.landing-how.reveal-on-scroll > .landing-section-copy > *,
.landing-how.reveal-on-scroll > .landing-section-copy::before,
.landing-how.reveal-on-scroll > .assumption-stack {
    transform: translateY(20px);
}

.landing-how.reveal-on-scroll > .assumption-stack {
    transition: transform 0.65s ease;
}

.landing-principles.reveal-on-scroll.is-visible > article,
.landing-how.reveal-on-scroll.is-visible > .landing-section-copy > *,
.landing-how.reveal-on-scroll.is-visible > .landing-section-copy::before,
.landing-how.reveal-on-scroll.is-visible > .assumption-stack > article {
    opacity: 1;
}

.landing-principles.reveal-on-scroll.is-visible > article,
.landing-how.reveal-on-scroll.is-visible > .landing-section-copy > *,
.landing-how.reveal-on-scroll.is-visible > .landing-section-copy::before,
.landing-how.reveal-on-scroll.is-visible > .assumption-stack {
    transform: none;
}

/* ---------- Guided questions ---------- */