/* Hallmark · genre: modern-minimal (soft) · macrostructure: Workbench · theme: DESIGN.md (app-derived) · enrichment: real screenshots, no chrome · nav: N10 · footer: Ft5
 * tone: soft + utilitarian · anchor hue: indigo 276 · pre-emit critique: P4 H4 E4 S5 R4 V4
 */

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + var(--space-md));
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    font-feature-settings: 'tnum' 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-style: normal;
    color: var(--color-ink);
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.sprite {
    display: none;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: calc(var(--z-nav) + 1);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: none;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 3rem;
    padding: 0 var(--space-md);
    border: var(--rule-hair) solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dur-micro) var(--ease-out),
        border-color var(--dur-micro) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 8px 20px -10px var(--color-shadow-strong);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
}

.btn--quiet {
    background: var(--color-surface);
    border-color: var(--color-rule-strong);
    color: var(--color-ink);
}

.btn--quiet:hover {
    border-color: var(--color-neutral);
}

.btn--mint {
    background: var(--color-mint-tint);
    color: var(--color-mint-ink);
}

.btn--mint:hover {
    border-color: var(--color-mint-ink);
}

.btn:active {
    transform: translateY(1px);
}

.btn--sm {
    min-height: 2.5rem;
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
}

.btn--lg {
    min-height: 3.5rem;
    padding: 0 var(--space-lg);
    font-size: var(--text-lg);
}

.btn--block {
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(1px);
    }
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.link-arrow .icon {
    transition: transform var(--dur-micro) var(--ease-out);
}

.link-arrow:hover .icon {
    transform: translateX(3px);
}

.pill-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-dark-2);
    color: var(--color-accent-on-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.pill-tag--light {
    background: var(--color-accent-tint);
    color: var(--color-accent);
}

/* ---------- Nav · N10 floating-on-scroll morph ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    padding-block: 0;
    background-color: var(--color-scrim);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    transition:
        background-color var(--dur-nav) var(--ease-out),
        border-color var(--dur-nav) var(--ease-out),
        backdrop-filter var(--dur-nav) var(--ease-out);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: var(--page-max);
    min-height: var(--nav-height);
    margin-inline: auto;
    padding: 0 var(--page-gutter);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    transform: translateY(0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
        max-width var(--dur-nav) var(--ease-out),
        padding var(--dur-nav) var(--ease-out),
        backdrop-filter var(--dur-nav) var(--ease-out),
        border-radius var(--dur-nav) var(--ease-out),
        background-color var(--dur-nav) var(--ease-out),
        box-shadow var(--dur-nav) var(--ease-out),
        transform var(--dur-nav) var(--ease-out);
}

/* The morph is desktop-only; on phones the bar stays a bar. */
@media (min-width: 60rem) {
    .nav.is-floating {
        background-color: transparent;
        border-block-end-color: transparent;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }

    .nav.is-floating .nav__inner {
        max-width: 64rem;
        padding-inline: var(--space-sm) var(--space-2xs);
        border-radius: var(--radius-pill);
        background-color: var(--color-scrim);
        box-shadow:
            0 10px 30px -12px var(--color-shadow-strong),
            inset 0 0 0 1px var(--color-rule);
        transform: translateY(var(--space-xs));
        backdrop-filter: saturate(1.4) blur(18px);
        -webkit-backdrop-filter: saturate(1.4) blur(18px);
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-inline-end: auto;
    color: var(--color-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-decoration: none;
}

.brand img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
}

.brand--small img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
}

@media (max-width: 24rem) {
    .nav .brand span {
        display: none;
    }
}

.nav__links {
    display: none;
}

.nav__links a,
.nav__login {
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition:
        color var(--dur-micro) var(--ease-out),
        background-color var(--dur-micro) var(--ease-out);
}

.nav__links a:hover,
.nav__login:hover {
    color: var(--color-ink);
    background-color: var(--color-paper-2);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.nav__login {
    display: none;
}

.nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
}

.nav__toggle[aria-expanded='true'] {
    background: var(--color-paper-2);
}

.nav__sheet {
    display: grid;
    gap: var(--space-3xs);
    margin: 0 var(--page-gutter) var(--space-sm);
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 16px 40px -20px var(--color-shadow-strong);
}

.nav__sheet[hidden] {
    display: none;
}

.nav__sheet a {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: none;
}

.nav__sheet a:hover {
    background: var(--color-paper-2);
}

@media (min-width: 48rem) {
    .nav__login {
        display: inline-flex;
    }
}

@media (min-width: 60rem) {
    .nav__links {
        display: flex;
        gap: var(--space-3xs);
    }

    .nav__toggle,
    .nav__sheet {
        display: none;
    }
}

/* ---------- Layout ---------- */
.section,
.hero,
.foot > div {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.section {
    padding-block: var(--space-2xl);
}

.section-head {
    display: grid;
    gap: var(--space-sm);
    max-width: 40rem;
    margin-block-end: var(--space-xl);
}

.section-head p,
.split__head > p {
    color: var(--color-muted);
    font-size: var(--text-lg);
}

.split {
    display: grid;
    gap: var(--space-xl);
}

.split__head {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    min-width: 0;
}

.split__head .btn {
    justify-self: start;
    margin-block-start: var(--space-2xs);
}

@media (min-width: 60rem) {
    .section {
        padding-block: var(--space-3xl);
    }

    .split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-2xl);
    }
}

/* ---------- Hero · clipped screenshot ---------- */
.hero {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-lg);
}

.hero__copy {
    display: grid;
    align-content: center;
    gap: var(--space-md);
    min-width: 0;
}

.hero h1 {
    font-size: var(--text-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hero__lede {
    max-width: 34rem;
    color: var(--color-muted);
    font-size: var(--text-lg);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
}

.hero__note {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.hero__note .icon {
    color: var(--color-mint-ink);
}

.hero__media {
    margin: 0;
    min-width: 0;
    justify-self: center;
    width: 100%;
    max-width: 26rem;
}

.hero__media img {
    width: 100%;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-paper);
    box-shadow: 0 30px 60px -30px var(--color-shadow-strong);
}

@media (min-width: 60rem) {
    .hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-2xl);
        padding-block: var(--space-2xl) var(--space-xl);
    }

    .hero__media {
        justify-self: start;
        max-width: none;
    }

    /* Runs past the viewport edge on purpose: there is more app than fits. */
    .hero__media img {
        width: min(
            calc(
                100% + max(0px, (100vw - var(--page-max)) / 2) +
                    var(--page-gutter) + 8rem
            ),
            68rem
        );
        max-width: none;
        border-radius: var(--radius-lg);
    }
}

/* ---------- Tour · F2 sticky scroll stack ---------- */
.tour__list {
    display: grid;
    gap: var(--space-2xl);
}

.tour__item {
    display: grid;
    gap: var(--space-xs);
}

.tour__item p {
    color: var(--color-muted);
}

.tour__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-block-end: var(--space-2xs);
    border-radius: var(--radius-sm);
    background: var(--color-accent-tint);
    color: var(--color-accent);
}

.tour__icon--mint {
    background: var(--color-mint-tint);
    color: var(--color-mint-ink);
}

.tour__icon--peach {
    background: var(--color-peach-tint);
    color: var(--color-peach-ink);
}

.tour__phone {
    width: 100%;
    max-width: 20rem;
    margin: var(--space-sm) auto 0;
}

.tour__phone img,
.shot img {
    width: 100%;
    border: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
    box-shadow: 0 24px 50px -30px var(--color-shadow-strong);
}

.tour__phone img {
    aspect-ratio: 480 / 780;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
}

.tour__screens {
    display: none;
}

@media (min-width: 60rem) {
    .tour {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: var(--space-2xl);
        align-items: start;
    }

    .tour__list {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-xl));
        z-index: var(--z-sticky);
        gap: var(--space-2xs);
    }

    /* Only the active item shows its paragraph, so the pinned list fits. */
    .tour__item {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto 0fr;
        column-gap: var(--space-sm);
        row-gap: 0;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        border: var(--rule-hair) solid transparent;
        border-radius: var(--radius-md);
        transition:
            grid-template-rows var(--dur-long) var(--ease-in-out),
            row-gap var(--dur-long) var(--ease-in-out),
            background-color var(--dur-short) var(--ease-out),
            border-color var(--dur-short) var(--ease-out);
    }

    .tour__icon {
        grid-area: 1 / 1;
        margin: 0;
    }

    .tour__item h3 {
        grid-area: 1 / 2;
        color: var(--color-neutral);
        transition: color var(--dur-short) var(--ease-out);
    }

    .tour__item p {
        grid-area: 2 / 2;
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
        color: var(--color-neutral);
        font-size: var(--text-sm);
    }

    .tour__item.is-active {
        grid-template-rows: auto 1fr;
        row-gap: var(--space-2xs);
        padding-block: var(--space-md);
    }

    .tour__item.is-active {
        background: var(--color-surface);
        border-color: var(--color-rule);
        box-shadow: 0 12px 30px -24px var(--color-shadow-strong);
    }

    .tour__item.is-active h3 {
        color: var(--color-ink);
    }

    .tour__item.is-active p {
        color: var(--color-muted);
    }

    .tour__item:not(.is-active) .tour__icon {
        background: var(--color-paper-2);
        color: var(--color-neutral);
    }

    .tour__phone {
        display: none;
    }

    .tour__screens {
        display: grid;
        gap: 22vh;
        padding-block-end: 12vh;
    }

    .shot {
        margin: 0;
    }

    .shot img {
        border-radius: var(--radius-md);
    }
}

/* ---------- Booking link · dark band ---------- */
.band-dark {
    max-width: calc(var(--page-max) - 2 * var(--page-gutter));
    margin: var(--space-lg) var(--space-xs);
    padding: var(--space-2xl) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.band-dark h2,
.band-dark h3 {
    color: var(--color-on-dark);
}

.booking {
    display: grid;
    gap: var(--space-2xl);
}

.booking__head {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    max-width: 40rem;
}

.booking__head p {
    color: var(--color-on-dark-muted);
    font-size: var(--text-lg);
}

.steps {
    display: grid;
    gap: var(--space-xl);
}

.step {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
}

.step p {
    color: var(--color-on-dark-muted);
}

.step__visual {
    display: grid;
    align-content: center;
    min-height: 11.5rem;
    margin-block-end: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--color-ink);
}

.step__visual--mint {
    background: var(--color-mint-tint);
}

.step__visual--accent {
    background: var(--color-accent-tint);
}

.step__visual--peach {
    background: var(--color-peach-tint);
}

.step__num {
    color: var(--color-accent-on-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bubble,
.notice {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);
    line-height: 1.45;
    box-shadow: 0 10px 24px -18px var(--color-shadow-strong);
}

.bubble__link {
    display: block;
    color: var(--color-mint-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.slots__day {
    margin-block-end: var(--space-2xs);
    font-size: var(--text-sm);
    font-weight: 600;
}

.slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
}

.slots li {
    padding: var(--space-2xs);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.slots .is-picked {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.notice__top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-end: var(--space-3xs);
}

.notice__top span {
    color: var(--color-neutral);
    font-size: var(--text-xs);
}

.places {
    display: grid;
    gap: var(--space-md);
    padding-block-start: var(--space-xl);
    border-block-start: var(--rule-hair) solid var(--color-dark-rule);
}

.places__list {
    display: grid;
    gap: var(--space-md);
}

.places__list li {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.places__list .icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--color-dark-2);
    color: var(--color-accent-on-dark);
}

.places__list strong {
    display: block;
    color: var(--color-on-dark);
    font-weight: 600;
}

.places__list span {
    color: var(--color-on-dark-muted);
    font-size: var(--text-sm);
}

.booking__note {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-dark-2);
    color: var(--color-on-dark-muted);
}

.booking__note strong {
    color: var(--color-on-dark);
}

.booking__note .icon {
    color: var(--color-accent-on-dark);
    margin-block-start: 0.15em;
}

@media (min-width: 40rem) {
    .band-dark {
        margin-inline: var(--page-gutter);
        padding-inline: var(--space-xl);
    }

    .places__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 52rem) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

@media (min-width: 60rem) {
    .band-dark {
        margin: var(--space-xl) auto;
        padding: var(--space-3xl) var(--space-2xl);
    }

    .places {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    .places__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

/* ---------- WhatsApp ---------- */
.quote-inline {
    margin: var(--space-md) 0 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-mint-tint);
}

.quote-inline p {
    color: var(--color-ink);
    font-weight: 500;
}

.quote-inline footer {
    margin-block-start: var(--space-xs);
    color: var(--color-mint-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.feature-list {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
}

.feature-list li {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.feature-list p {
    margin-block-start: var(--space-3xs);
    color: var(--color-muted);
}

.feature-list__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    background: var(--color-mint-tint);
    color: var(--color-mint-ink);
}

/* ---------- Teams ---------- */
.checks {
    display: grid;
    gap: var(--space-xs);
    margin-block-start: var(--space-xs);
}

.checks li {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
}

.checks .icon {
    margin-block-start: 0.2em;
    color: var(--color-accent);
}

.team-price {
    display: grid;
    gap: var(--space-sm);
    align-self: start;
    padding: var(--space-lg) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 30px 60px -40px var(--color-shadow-strong);
}

.team-price__label {
    font-weight: 600;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
}

.stepper__btn {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    transition:
        border-color var(--dur-micro) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.stepper__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.stepper__btn:active {
    transform: scale(0.96);
}

.stepper__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stepper__value {
    width: 4ch;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper__value::-webkit-inner-spin-button,
.stepper__value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.team-price__total {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
    margin-block-start: var(--space-2xs);
}

.team-price__total output {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.team-price__total span,
.team-price__detail,
.team-price__note {
    color: var(--color-muted);
}

.team-price__detail {
    margin-block-start: calc(-1 * var(--space-xs));
    font-variant-numeric: tabular-nums;
}

.team-price__note {
    font-size: var(--text-sm);
    text-align: center;
}

@media (min-width: 60rem) {
    .team-price {
        padding: var(--space-xl);
    }
}

/* ---------- Testimonials ---------- */
.voices {
    display: grid;
    gap: var(--space-sm);
}

.voice {
    display: grid;
    gap: var(--space-md);
    align-content: space-between;
    margin: 0;
    padding: var(--space-lg) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.voice blockquote {
    margin: 0;
}

.voice--lead {
    border-color: transparent;
    background: var(--color-accent-tint);
}

.voice--lead blockquote p {
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.voice figcaption {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.voice figcaption strong {
    display: block;
    color: var(--color-ink);
    font-size: var(--text-base);
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 700;
}

.avatar--mint {
    background: var(--color-mint-tint);
    color: var(--color-mint-ink);
}

.avatar--peach {
    background: var(--color-peach-tint);
    color: var(--color-peach-ink);
}

@media (min-width: 60rem) {
    .voices {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-md);
    }

    .voice--lead {
        grid-row: span 2;
        padding: var(--space-xl);
    }

    .voice--lead blockquote p {
        font-size: var(--text-2xl);
        line-height: 1.3;
    }
}

/* ---------- Plans ---------- */
.plans {
    display: grid;
    gap: var(--space-md);
    max-width: 58rem;
}

.plan {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
    padding: var(--space-lg) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.plan--featured {
    border: 2px solid var(--color-accent);
    box-shadow: 0 30px 60px -36px var(--color-shadow-strong);
}

.plan__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
}

.plan__name {
    font-size: var(--text-lg);
}

.plan__price {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.plan__price span {
    margin-inline-start: var(--space-3xs);
    color: var(--color-muted);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0;
}

.plan__for {
    color: var(--color-muted);
}

.plan__list {
    display: grid;
    gap: var(--space-xs);
    margin-block: var(--space-sm);
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.plan__list li {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
}

.plan__list .icon {
    margin-block-start: 0.2em;
    color: var(--color-accent);
}

.plan .btn {
    margin-block-start: auto;
}

.plan__note {
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: center;
}

@media (min-width: 48rem) {
    .plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan {
        padding: var(--space-xl);
        grid-template-rows: auto auto auto 1fr auto;
    }

    .plan--featured {
        grid-template-rows: auto auto auto 1fr auto auto;
    }
}

/* ---------- FAQ ---------- */
.faq {
    padding-inline: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.faq details + details {
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-md);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary .icon {
    color: var(--color-neutral);
    transition: transform var(--dur-short) var(--ease-in-out);
}

.faq details[open] summary .icon {
    transform: rotate(180deg);
}

.faq details p {
    padding-block-end: var(--space-md);
    color: var(--color-muted);
}

/* ---------- Footer · Ft5 statement ---------- */
.foot {
    margin-block-start: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    background: var(--color-surface);
}

.foot > div + div {
    margin-block-start: var(--space-xl);
}

.foot__statement {
    display: grid;
    gap: var(--space-lg);
}

.foot__line {
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.foot__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    color: var(--color-muted);
}

.foot__apps {
    display: grid;
    gap: var(--space-sm);
}

.foot__apps p {
    color: var(--color-muted);
}

.foot__apps ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.app-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;
    padding: 0 var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color var(--dur-micro) var(--ease-out);
}

.app-link:hover {
    border-color: var(--color-accent);
}

.foot__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    color: var(--color-neutral);
    font-size: var(--text-sm);
}

.foot__meta .brand {
    margin-inline-end: 0;
    font-size: var(--text-base);
}

.foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
}

.foot__links a {
    color: var(--color-muted);
    white-space: nowrap;
    text-decoration: none;
}

.foot__links a:hover {
    color: var(--color-ink);
    text-decoration: underline;
}

@media (min-width: 60rem) {
    .foot__statement {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .foot__apps {
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .foot__copy {
        margin-inline-start: auto;
    }
}

/* ---------- Mobile sticky CTA · C4 ---------- */
.cta-bar {
    position: fixed;
    inset-inline: var(--space-xs);
    bottom: max(var(--space-xs), env(safe-area-inset-bottom));
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 16px 40px -16px var(--color-shadow-strong);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + var(--space-lg)));
    transition:
        transform var(--dur-short) var(--ease-in),
        opacity var(--dur-short) var(--ease-in);
}

.cta-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition:
        transform var(--dur-long) var(--ease-out),
        opacity var(--dur-long) var(--ease-out);
}

@media (max-width: 22.4rem) {
    .cta-bar__extra {
        display: none;
    }
}

@media (min-width: 60rem) {
    .cta-bar {
        display: none;
    }
}

/* ---------- Legal pages ---------- */
.doc-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 46rem;
    min-height: var(--nav-height);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.doc {
    max-width: 46rem;
    margin-block: var(--space-lg) var(--space-2xl);
    margin-inline: max(var(--page-gutter), (100% - 46rem) / 2);
    padding: var(--space-xl) var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.doc h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.doc h2 {
    margin-block: var(--space-xl) var(--space-2xs);
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
}

.doc p,
.doc ul {
    margin-block-end: var(--space-sm);
    color: var(--color-muted);
}

.doc ul {
    padding-inline-start: var(--space-md);
    list-style: disc;
}

.doc li + li {
    margin-block-start: var(--space-3xs);
}

.doc strong {
    color: var(--color-ink);
}

.doc__date {
    margin-block: var(--space-2xs) var(--space-lg);
    font-size: var(--text-sm);
}

.doc-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs);
    max-width: 46rem;
    margin: 0 auto var(--space-xl);
    padding-inline: var(--page-gutter);
    color: var(--color-neutral);
    font-size: var(--text-sm);
}

@media (min-width: 40rem) {
    .doc {
        padding: var(--space-2xl) var(--space-xl);
    }
}

/* ---------- Links page ---------- */
.links-page {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: max(var(--space-lg), env(safe-area-inset-top)) var(--page-gutter)
        max(var(--space-lg), env(safe-area-inset-bottom));
}

.links {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: 26rem;
    text-align: center;
}

.links__logo {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px -24px var(--color-shadow-strong);
}

.links h1 {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.links__tagline {
    margin-block-end: var(--space-md);
    color: var(--color-muted);
}

.links__list {
    display: grid;
    gap: var(--space-2xs);
    width: 100%;
}

.links__list .app-link {
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    background: var(--color-surface);
}

.links__foot {
    margin-block-start: var(--space-lg);
    color: var(--color-neutral);
    font-size: var(--text-sm);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }

    .nav.is-floating .nav__inner,
    .cta-bar {
        transform: none;
    }
}