/* Pricing Page
   Typography and motion carry the design. Edges stay invisible until
   touched; the brand red appears exactly once per view. */

:root {
    --ink-faint: rgba(47, 47, 47, 0.12);
    --ink-soft: rgba(47, 47, 47, 0.45);
    --ink-mid: rgba(47, 47, 47, 0.72);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

.pricing-container {
    max-width: 1160px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 4rem 6rem 3rem;
    display: flex;
    flex-direction: column;
}

.pricing-page .site-header {
    margin-bottom: 5rem;

    a {
        transition: color 0.3s ease;

        &:hover {
            color: var(--color-accent);
        }
    }
}

/* Hero */
.pricing-hero {
    margin-bottom: 5rem;
    animation: rise 0.9s var(--ease-out) both;
}

.eyebrow {
    font-size: 0.85rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.38em;
    color: var(--ink-mid);

    /* the page's single permanent ink moment */
    &::after {
        content: '';
        display: block;
        width: 2.5rem;
        border-top: 1px solid var(--color-accent);
        margin-top: 1rem;
    }
}

.pricing-tagline {
    font-size: 3rem;
    font-weight: 200;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 1.75rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);

    strong {
        font-weight: 700;
    }
}

.pricing-sub {
    font-size: 1.05rem;
    font-weight: 200;
    line-height: 1.7;
    color: var(--ink-mid);
    max-width: 40rem;
    margin-top: 1.5rem;
}

/* Lineup */
.lineup {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2.5rem;
}

.tool {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2.25rem;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition:
        border-color 0.45s ease,
        background-color 0.45s ease,
        opacity 0.3s ease,
        flex-grow 0.55s var(--ease-inout),
        padding 0.55s var(--ease-inout);

    &:hover,
    &:focus-within {
        border-color: var(--ink-soft);
        background-color: rgba(255, 255, 255, 0.28);

        .tool-cta {
            color: var(--color-accent);

            .arrow {
                transform: translateX(0.3em);
            }
        }
    }
}

/* Faded as one unit while its module changes shape, so copy never
   re-wraps in view. min-width is pinned wherever a module narrows. */
.tool-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity 0.35s ease;
}

.tool.is-morphing .tool-content {
    opacity: 0;
    transition-duration: 0.25s;
}

/* The empty frame takes its leave before the columns re-form */
.tool.is-fading {
    opacity: 0;
    border-color: transparent;
    background-color: transparent;
}

/* Entrance — runs once; the class is removed after the cards settle */
.lineup.is-entering .tool {
    animation: rise 0.8s var(--ease-out) both;

    &:nth-child(1) { animation-delay: 0.2s; }
    &:nth-child(2) { animation-delay: 0.36s; }
    &:nth-child(3) { animation-delay: 0.52s; }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The entrance, played backwards: how the unchosen two take their leave */
@keyframes settle {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(18px);
    }
}

/* Identical to rise — a separate name so it can be re-triggered on return */
@keyframes rise-again {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.lineup.is-departing .tool:not(.is-selected) {
    animation: settle 0.7s var(--ease-inout) both;
    pointer-events: none;

    &:nth-child(1) { animation-delay: 0s; }
    &:nth-child(2) { animation-delay: 0.06s; }
    &:nth-child(3) { animation-delay: 0.12s; }
}

.lineup.is-rising .tool {
    animation: rise-again 0.65s var(--ease-out) both;

    &:nth-child(1) { animation-delay: 0s; }
    &:nth-child(2) { animation-delay: 0.08s; }
    &:nth-child(3) { animation-delay: 0.16s; }
}

/* Holds the unchosen two out of sight while their space flows back */
.lineup.is-resetting .tool:not(.is-selected) {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;

    .tool-content {
        min-width: 16rem;
    }
}

/* Deep links land on the expanded state without the ceremony */
.lineup.instant,
.lineup.instant * {
    transition: none !important;
    animation: none !important;
}

.tool-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0.7px 0.7px 1px rgba(255, 255, 255, 0.75);
}

.tool-for {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--ink-soft);
    margin-top: 0.6rem;
}

.tool-desc {
    font-size: 1rem;
    font-weight: 200;
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-mid);
    margin-top: 0.6rem;
}

.tool-from {
    /* bottom-anchored so the three prices share a baseline regardless
       of how each descriptor wraps */
    margin-top: auto;
    padding-top: 2.25rem;
    font-weight: 200;
    line-height: 1;

    .from-word {
        font-size: 0.95rem;
        font-style: italic;
        color: var(--ink-soft);
        margin-right: 0.35em;
    }

    .from-price {
        font-size: 3.1rem;
        letter-spacing: -0.02em;
    }

    .from-period {
        font-size: 1rem;
        color: var(--ink-soft);
    }
}

.tool-cta {
    align-self: flex-start;
    margin-top: 2.25rem;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text);
    transition: color 0.35s ease, opacity 0.3s ease;

    .arrow {
        display: inline-block;
        transition: transform 0.35s var(--ease-out);
    }
}

/* Selection: the yielded space flows to the chosen tool */
.lineup.has-selection {
    /* hidden but smoothly so; focus and clicks are fenced off with
       `inert` from the script, since visibility would snap mid-fade */
    .tool:not(.is-selected) {
        flex-grow: 0.001;
        opacity: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        background-color: transparent;
        overflow: hidden;
        pointer-events: none;

        /* pinned so collapsing modules keep their height instead of
           re-wrapping into tall slivers that stretch the row */
        .tool-content {
            min-width: 16rem;
        }
    }

    .tool.is-selected {
        max-width: 700px;
        cursor: default;
        border-color: var(--ink-soft);
        background-color: rgba(255, 255, 255, 0.28);

        .tool-cta {
            opacity: 0;
            margin-top: 0;
            height: 0;
            pointer-events: none;
        }

        /* bottom-anchoring is for the lineup; here it reads as a gap */
        .tool-from {
            margin-top: 0;
        }
    }
}

/* Plan detail: folded shut until its tool is chosen */
.tool-detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s var(--ease-inout), opacity 0.4s ease;
}

.tool-detail-inner {
    overflow: hidden;
    min-height: 0;
}

.tool.is-selected:not(.is-morphing) .tool-detail {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0.08s;
}

.tiers {
    margin-top: 2.25rem;
}

.tier {
    padding: 1.75rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.45s var(--ease-out);

    & + .tier {
        border-top: 1px solid var(--ink-faint);
    }

    &:last-child {
        padding-bottom: 0.5rem;
    }
}

.tool.is-selected:not(.is-morphing) .tier {
    opacity: 1;
    transform: none;

    &:nth-child(1) { transition-delay: 0.2s; }
    &:nth-child(2) { transition-delay: 0.28s; }
    &:nth-child(3) { transition-delay: 0.36s; }
}

.tier-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.tier-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.tier-price {
    font-size: 1.05rem;
    font-weight: 200;
    white-space: nowrap;

    strong {
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .per {
        color: var(--ink-soft);
        font-size: 0.95rem;
    }

    .tier-or {
        font-style: italic;
        color: var(--ink-soft);
        margin: 0 0.3em;
    }
}

.tier-includes {
    font-size: 0.95rem;
    font-weight: 200;
    line-height: 1.7;
    color: var(--ink-mid);
    margin-top: 0.75rem;
}

.tier-cta {
    display: inline-block;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;

    .arrow {
        display: inline-block;
        transition: transform 0.35s var(--ease-out);
    }

    &:hover,
    &:focus-visible {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);

        .arrow {
            transform: translateX(0.3em);
        }
    }
}

/* The way back: the whole page outside the module is the door */
body.has-selection {
    cursor: zoom-out;

    .tool.is-selected,
    .tool.is-selected * {
        cursor: auto;
    }

    .tool.is-selected .tool-cta,
    .tool.is-selected .tier-cta {
        cursor: pointer;
    }
}

.return-hint {
    align-self: center;
    margin-top: 2.5rem;
    font-size: 0.85rem;
    font-weight: 200;
    font-style: italic;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

body.has-selection .return-hint {
    opacity: 1;
    transition-delay: 0.4s;
}

.pricing-footnote {
    margin-top: auto;
    padding-top: 4rem;
    font-size: 0.85rem;
    font-weight: 200;
    line-height: 1.7;
    color: var(--ink-soft);
    animation: rise 0.8s var(--ease-out) 0.7s both;
}

/* Responsive */
@media (max-width: 900px) {
    /* styles.css pads the body at small sizes; the container handles it here */
    .pricing-page {
        padding: 0;
    }

    .pricing-container {
        padding: 3rem 2rem 2rem;
    }

    .pricing-page .site-header {
        margin-bottom: 3.5rem;
    }

    .pricing-tagline {
        font-size: 2.25rem;
    }

    .pricing-hero {
        margin-bottom: 3.5rem;
    }

    .lineup {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .tool {
        padding: 2rem 1.75rem;
        max-height: 50rem;
        transition:
            border-color 0.45s ease,
            background-color 0.45s ease,
            opacity 0.3s ease,
            max-height 0.5s var(--ease-inout),
            padding 0.5s var(--ease-inout),
            margin 0.5s var(--ease-inout);
    }

    .lineup.has-selection .tool:not(.is-selected) {
        flex-grow: 1;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: -0.75rem 0;
    }

    .lineup.has-selection .tool.is-selected {
        max-width: none;
        max-height: 100rem;
    }

    .tier-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .tier-price {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .pricing-page {
        padding: 0;
    }

    .pricing-container {
        padding: 2.5rem 1.5rem 2rem;
    }

    .pricing-tagline {
        font-size: 1.75rem;
    }

    .tool-from .from-price {
        font-size: 2.5rem;
    }
}

/* Reduced motion: everything arrives and departs in place */
@media (prefers-reduced-motion: reduce) {
    .pricing-hero,
    .lineup .tool,
    .pricing-footnote {
        animation: none !important;
    }

    .tool,
    .tool-content,
    .tool-detail,
    .tier,
    .tool-cta .arrow,
    .tier-cta .arrow,
    .return-hint {
        transition: none !important;
    }
}