/* Investment Path – responsive
   Breakpoints, coarse pointers and reduced motion for the landing pages.
   ========================================================================== */

@media (max-width: 980px) {
    /* The trend line is stretched to the viewport by
       preserveAspectRatio="none", so once the hero stops being two columns
       there is no wide empty right-hand side left to hold it: the glyph
       compresses into a near-vertical scratch straight through the buttons.
       The corner glows stay, so the page keeps its depth. */
    .landing-path {
        display: none;
    }

    .landing-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 58px;
        padding: 76px 0 100px;
    }

    /* Once the hero and the how-it-works section stack, a capped block is a
       lone column in a full-width row: without the auto margin it sits hard
       against the left edge while .path-preview centres directly below it.
       Harmless when the cap was only holding a line length, obvious now that
       each block carries a visible glass pane. */
    .landing-hero-copy {
        max-width: 760px;
        margin-inline: auto;
    }

    .path-preview {
        width: min(100%, 650px);
        min-height: 0;
        margin-inline: auto;
    }

    .landing-how {
        grid-template-columns: 1fr;
    }

    .assumption-stack {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .guide-layout {
        grid-template-columns: 1fr;
    }

    .guide-step-tabs {
        display: flex;
        scroll-padding-inline: 6px;
        scroll-snap-type: x proximity;
    }

    .guide-step-tabs li {
        flex: 0 0 128px;
        scroll-snap-align: center;
    }

    .guide-recap {
        position: relative;
        top: auto;
        min-height: 315px;
    }

    .recap-timeline {
        margin-top: 44px;
    }

    .recap-return {
        margin-top: 33px;
    }

    .guided-result-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .landing-content {
        width: min(100% - 30px, 1180px);
    }

    .landing-hero {
        padding: 55px 0 78px;
    }

    .landing-hero h1 {
        font-size: clamp(42px, 13vw, 64px);
    }

    .landing-principles {
        grid-template-columns: 1fr;
    }

    .landing-principles article {
        min-height: 190px;
    }

    .landing-principles article + article {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .landing-principles h2 {
        margin-top: 28px;
    }

    .landing-how {
        min-height: 0;
        padding: 85px 0;
    }

    .guide-return-choices,
    .evidence-grid {
        grid-template-columns: 1fr;
    }

    .evidence-grid article + article {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .guided-result-grid {
        grid-template-columns: 1fr 1fr;
    }

    .guided-result-hero {
        grid-column: 1 / -1;
    }

    .guided-result-grid article:last-child {
        grid-column: 1 / -1;
    }

    .landing-footer {
        width: min(100% - 30px, 1180px);
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-footer nav {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .landing-actions,
    .guided-result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-primary,
    .landing-secondary {
        width: 100%;
    }

    .landing-trust {
        display: grid;
        gap: 9px;
    }

    .path-preview {
        padding: 16px;
        border-radius: 20px;
    }

    .path-preview-number {
        margin-top: 24px;
    }

    .path-preview-note {
        margin-top: 11px;
    }

    .assumption-stack article:nth-child(n) {
        transform: none;
    }

    .guided-flow,
    .guided-result {
        padding: 23px 12px calc(32px + env(safe-area-inset-bottom));
    }

    .guide-header h1,
    .guided-result-head h1 {
        font-size: 31px;
    }

    .guide-progress-tabs {
        margin-top: 22px;
    }

    .guide-step-tabs {
        display: flex;
        scroll-padding-inline: 6px;
        scroll-snap-type: x proximity;
    }

    .guide-step-tabs li {
        flex: 0 0 120px;
        scroll-snap-align: center;
    }

    .guide-progress-status {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .guide-progress-status > span {
        white-space: normal;
    }

    .guide-card {
        padding: 22px 15px 14px;
        border-radius: 18px;
    }

    .guide-step legend {
        font-size: 26px;
    }

    .guide-choice {
        padding: 14px 13px;
    }

    .guide-choice-custom .guide-slider {
        width: 100%;
        margin-left: 0;
    }

    .guide-slider-compact {
        width: 100%;
    }

    .guide-slider {
        grid-template-columns: minmax(0, 1fr) minmax(128px, 136px);
        gap: 0 9px;
    }

    .guide-slider-entry input,
    .guide-review-entry input,
    .guide-review-editable select {
        font-size: 16px;
    }

    .return-choice {
        min-height: 155px;
        padding: 45px 13px 14px;
    }

    .return-choice .choice-main small {
        min-height: 0;
    }

    .retirement-years-row,
    .retirement-rate-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .retirement-explanation {
        padding: 15px 14px;
    }

    .retirement-math {
        gap: 5px;
        padding: 9px 8px;
    }

    .retirement-math small {
        font-size: 8px;
    }

    .guide-small-assumptions {
        grid-template-columns: 1fr;
    }

    .guide-inflation-setting {
        align-items: flex-start;
    }

    .guide-tax-options {
        grid-template-columns: 1fr;
    }

    .guide-tax-choice {
        min-height: 0;
    }

    .guide-tax-choice.guide-choice-custom {
        flex-wrap: wrap;
    }

    .guide-tax-choice .guide-number-entry {
        width: calc(100% - 31px);
        margin-left: 31px;
    }

    .guide-review-editable > div {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 8px;
    }

    .guide-review-editable dd {
        text-align: left;
    }

    .guide-nav {
        position: sticky;
        right: -15px;
        bottom: 0;
        left: -15px;
        z-index: 4;
        margin-right: -15px;
        margin-left: -15px;
        padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
        border-bottom-right-radius: 17px;
        border-bottom-left-radius: 17px;
        background: color-mix(in srgb, var(--surface-solid) 95%, transparent);
        backdrop-filter: blur(14px);
    }

    .guide-back,
    .guide-next {
        min-height: 48px;
    }

    .guide-recap {
        min-height: 300px;
        padding: 22px;
        border-radius: 18px;
    }

    .guided-result-head {
        align-items: flex-start;
    }

    .guided-result-grid {
        grid-template-columns: 1fr;
    }

    .guided-result-hero,
    .guided-result-grid article:last-child {
        grid-column: auto;
    }

    .guided-result-grid article {
        min-height: 145px;
    }

    .guided-result-chart {
        padding: 17px 13px 11px;
    }

    .guided-result-chart figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .guided-result-chart figcaption span:last-child {
        text-align: left;
    }

    .guided-chart-axis {
        font-size: 9px;
    }
}

@media (max-width: 340px) {
    .guide-slider {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 42px 36px auto;
        row-gap: 6px;
    }

    .guide-slider-line {
        grid-column: 1;
        grid-row: 1;
    }

    .guide-slider-entry {
        width: 136px;
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
    }

    .guide-slider-scale {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (hover: none) {
    .path-preview {
        animation-name: landingRise;
    }

    .landing-primary[data-cursor-glow]:active,
    .guide-next[data-cursor-glow]:active {
        filter: brightness(1.06);
        transform: scale(0.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    .path-live i,
    .path-preview,
    .preview-line,
    .preview-area,
    .preview-points circle,
    .recap-line,
    .recap-orbit,
    .guide-slider-line::after,
    .guided-result-chart.is-drawn .result-chart-line,
    .guided-result-chart.is-drawn .result-chart-area {
        animation: none !important;
    }

    .guide-slider output,
    .guide-slider input[type="range"]::-webkit-slider-thumb,
    .guide-slider-entry input {
        transition: none !important;
    }

    /* The travelling light is removed rather than paused: with the animation
       merely stopped it holds its 0% frame, which parks a visible dash at the
       foot of the curve forever. The curve itself is static and stays. */
    .landing-path-spark,
    .landing-path-glow,
    .action-primary::after {
        display: none !important;
    }

    .landing-primary,
    .landing-secondary,
    .guide-back,
    .guide-next,
    /* The arrows animate on their own child elements, so they need naming
       here too – this block is an allowlist, not a wildcard. */
    .landing-primary svg,
    .guide-back span,
    .guide-next span,
    .guide-choice,
    .guide-choice::before,
    .guide-close,
    .guide-step-tabs button {
        transition: none !important;
    }

    .landing-primary:hover,
    .landing-primary:focus-visible,
    .landing-primary:active,
    .landing-secondary:hover,
    .landing-secondary:focus-visible,
    .landing-secondary:active,
    .guide-back:hover,
    .guide-back:focus-visible,
    .guide-back:active,
    .guide-next:hover,
    .guide-next:focus-visible,
    .guide-next:active,
    .landing-primary:hover svg,
    .guide-back:hover span,
    .guide-next:hover span,
    .guide-choice:hover,
    .guide-close:hover,
    .guide-step-tabs button:not(:disabled):hover {
        transform: none !important;
    }

    .preview-line,
    .result-chart-line {
        stroke-dashoffset: 0;
    }

    .preview-area,
    .preview-points circle,
    .result-chart-area {
        opacity: 1;
    }

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
}