*, *::before, *::after { box-sizing: border-box; } /* Sitio público final. */
html { max-width: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; overflow-x: clip; }
body {
    margin: 0; color: var(--color-text-main); background: var(--color-bg);
    max-width: 100%; font: var(--txt-m)/1.6 var(--font-body); overflow-x: clip;
}
body.site-menu-open { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.site-shell { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.site-skip {
    position: fixed; z-index: calc(var(--z-dropdown) + 1); inset: var(--space-s) auto auto var(--space-s);
    padding: var(--space-xs) var(--space-s); color: var(--color-surface); background: var(--color-text-main);
    border-radius: var(--radius-sm); transform: translateY(-180%);
}
.site-skip:focus { transform: translateY(0); }

.site-nav {
    position: fixed; z-index: var(--z-dropdown); top: var(--space-s); left: 50%;
    display: flex; align-items: center; width: min(calc(100% - 2rem), 70rem); min-height: 4rem;
    padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-m);
    background: rgb(255 255 255 / 90%); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
    backdrop-filter: blur(1rem); transform: translateX(-50%);
}
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { display: block; width: 7.5rem; height: auto; }
.site-nav__links { display: flex; align-items: center; gap: var(--space-l); margin-left: auto; }
.site-nav__links > a { font-size: var(--txt-s); font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav__links > a:not(.site-button):hover { color: var(--color-primary-hover); }
.site-menu-button {
    display: none; width: 2.75rem; height: 2.75rem; margin-left: auto; color: var(--color-text-main);
    background: transparent; border: 0; border-radius: var(--radius-pill);
}
.site-menu-button svg { width: 1.5rem; height: 1.5rem; }
.site-button {
    display: inline-flex; justify-content: center; align-items: center; min-height: 3rem;
    padding: .75rem 1.25rem; color: var(--color-surface); background: var(--color-text-main);
    border: 1px solid var(--color-text-main); border-radius: var(--radius-control);
    font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
    transition: background-color var(--duration-short) var(--ease-out), color var(--duration-short) var(--ease-out), transform 100ms var(--ease-out);
}
.site-button:hover { color: var(--color-text-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.site-button:active { transform: translateY(1px); }
.site-button--ghost { color: var(--color-text-main); background: transparent; }
.site-eyebrow, .site-card__label, .site-price__currency {
    font-family: var(--font-label); font-size: var(--txt-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}

.site-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
    align-items: center; gap: var(--space-2xl); min-height: 47rem;
    padding-top: 9rem; padding-bottom: var(--space-2xl);
}
.site-hero::before {
    content: ""; position: absolute; z-index: -1; top: 12%; right: -16%; width: 35rem; height: 35rem;
    background: var(--color-surface-soft); border-radius: 50%;
}
.site-eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    margin: 0 0 var(--space-m); color: var(--color-primary-hover);
}
.site-eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--color-primary); }
.site-hero h1, .site-section-title, .site-stage h2, .site-final h2 {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    min-width: 0; overflow-wrap: anywhere; letter-spacing: -.04em; line-height: 1.02;
}
.site-hero h1 { max-width: 12ch; font-size: var(--txt-display); }
.site-hero__lede { max-width: 56ch; margin: var(--space-l) 0; color: var(--color-text-muted); font-size: var(--txt-l); }
.site-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.site-hero__note { margin: var(--space-s) 0 0; color: var(--color-text-muted); font-size: var(--txt-s); }
.site-wallet-stack { position: relative; min-height: 31rem; }
.site-pass {
    position: absolute; width: min(25rem, 88%); aspect-ratio: 1.56; padding: var(--space-l);
    overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.site-pass::after {
    content: ""; position: absolute; right: -3rem; bottom: -4rem; width: 12rem; height: 12rem;
    border: 2rem solid rgb(255 255 255 / 16%); border-radius: 50%;
}
.site-pass--front { z-index: 2; top: 8rem; left: 0; color: var(--color-text-on-primary); background: var(--color-primary); transform: rotate(-4deg); }
.site-pass--back { top: 1rem; right: 0; color: var(--color-surface); background: var(--color-text-main); transform: rotate(5deg); }
.site-pass__top { display: flex; justify-content: space-between; font-size: var(--txt-s); font-weight: 700; }
.site-pass__title {
    position: absolute; bottom: var(--space-l); left: var(--space-l); max-width: 9ch; margin: 0;
    font-family: var(--font-display); font-size: var(--txt-2xl); font-weight: 700; line-height: 1.05;
}
.site-stamps { position: absolute; right: var(--space-l); bottom: var(--space-l); display: grid; grid-template-columns: repeat(3, 2rem); gap: var(--space-2xs); }
.site-stamps span { display: grid; place-items: center; aspect-ratio: 1; background: rgb(255 255 255 / 70%); border-radius: 50%; font-weight: 800; }

.site-trust { overflow: clip; border-block: 1px solid var(--color-border); background: var(--color-surface); }
.site-trust__viewport { overflow: clip; }
.site-trust__track { display: flex; width: 100%; }
.site-trust__group {
    display: flex; justify-content: space-between; gap: var(--space-m);
    width: 100%; padding-block: var(--space-m);
}
.site-trust__group[aria-hidden="true"] { display: none; }
.site-trust span {
    flex: 0 0 auto; color: var(--color-text-muted); font-family: var(--font-label);
    font-size: var(--txt-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.site-workflow { padding-top: var(--space-3xl); }
.site-workflow__eyebrow { margin-bottom: var(--space-xl); }
.site-stage {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(19rem, 1.2fr);
    gap: var(--space-xl); align-items: start; padding-block: var(--space-3xl); border-top: 3px solid var(--color-text-main);
}
.site-stage h2, .site-section-title { font-size: clamp(2.15rem, 4vw, 3.8rem); }
.site-stage__copy p { max-width: 48ch; color: var(--color-text-muted); font-size: var(--txt-l); }
.site-stage__visual { min-width: 0; }
.site-phone-demo {
    position: relative; display: grid; place-items: start center; min-height: 35rem;
    overflow: hidden; isolation: isolate;
}
.site-phone {
    position: relative; width: 17rem; height: 34rem; padding: .55rem;
    background: var(--color-text-main); border: 3px solid var(--color-text-on-primary);
    border-radius: 2.7rem;
}
.site-phone__button {
    position: absolute; left: -.35rem; width: .3rem; background: var(--color-text-muted);
    border-radius: .25rem 0 0 .25rem;
}
.site-phone__button--one { top: 6rem; height: 1.7rem; }
.site-phone__button--two { top: 8.5rem; height: 2.8rem; }
.site-phone__button--three { top: 12rem; height: 2.8rem; }
.site-phone__screen {
    position: relative; height: 100%; overflow: hidden; color: var(--color-text-on-primary);
    background: var(--color-bg); border-radius: 2.15rem;
}
.site-phone__status {
    position: absolute; z-index: 5; inset: 0 0 auto; display: flex;
    justify-content: space-between; align-items: center;
    height: 3rem; padding: 0 1.3rem; font-size: .7rem; font-weight: 800; line-height: 1;
}
.site-phone__status-right { display: flex; align-items: center; gap: .22rem; line-height: 1; }
.site-phone__signal { display: flex; align-items: end; gap: .1rem; height: .65rem; }
.site-phone__signal i { display: block; width: .15rem; background: var(--color-text-on-primary); border-radius: .05rem; }
.site-phone__signal i:nth-child(1) { height: 30%; }
.site-phone__signal i:nth-child(2) { height: 50%; }
.site-phone__signal i:nth-child(3) { height: 75%; }
.site-phone__signal i:nth-child(4) { height: 100%; }
.site-phone__battery {
    position: relative; display: block; width: 1.15rem; height: .55rem;
    padding: .08rem; border: 1px solid var(--color-text-muted); border-radius: .16rem;
}
.site-phone__battery::after {
    content: ""; position: absolute; top: 50%; right: -.18rem; width: .1rem; height: .25rem;
    background: var(--color-text-muted); border-radius: 0 .08rem .08rem 0; transform: translateY(-50%);
}
.site-phone__battery i { display: block; width: 78%; height: 100%; background: var(--color-text-on-primary); border-radius: .06rem; }
.site-phone__island {
    position: absolute; z-index: 6; top: .65rem; left: 50%; width: 5rem; height: 1.7rem;
    background: var(--color-text-on-primary); border-radius: var(--radius-pill); transform: translateX(-50%);
}
.site-phone__view { position: absolute; inset: 0; padding: 3.8rem .9rem 1.25rem; }
.site-phone__view--stack { animation: site-phone-stack 9s var(--ease-out) infinite; }
.site-phone__view--detail { opacity: 0; animation: site-phone-detail 9s var(--ease-out) infinite; }
.site-phone__wallet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-m); }
.site-phone__wallet-head strong { font-family: var(--font-display); font-size: var(--txt-xl); }
.site-phone__wallet-head span { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; background: var(--color-surface-soft); border-radius: 50%; font-weight: 800; }
.site-phone__cards { position: relative; height: 20rem; }
.site-phone-card {
    position: absolute; inset-inline: 0; height: 10rem; padding: var(--space-s);
    overflow: hidden; color: var(--color-surface); border: 1px solid rgb(255 255 255 / 28%);
    border-radius: var(--radius-card); box-shadow: 0 .35rem .8rem rgb(16 47 54 / 12%);
}
.site-phone-card span {
    display: flex; align-items: center; min-height: 1.75rem; margin-bottom: var(--space-m);
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.site-phone-card strong { display: block; max-width: 15ch; font-family: var(--font-display); font-size: var(--txt-m); line-height: 1.1; }
.site-phone-card--discount { top: 0; background: var(--color-boutique); }
.site-phone-card--stamps { top: 3.25rem; color: var(--color-text-on-primary); background: var(--color-salon); }
.site-phone-card--points {
    top: 6.5rem; color: var(--color-coffee-dark); background: var(--color-coffee-cream);
    border-color: transparent; box-shadow: 0 .6rem 1.2rem rgb(51 33 23 / 16%);
}
.site-phone-card--points strong { font-size: var(--txt-xl); }
.site-phone-pass {
    display: flex; flex-direction: column; min-height: 26rem; overflow: hidden;
    color: var(--color-coffee-dark); background: var(--color-coffee-cream);
    border: 1px solid var(--color-coffee); border-radius: var(--radius-card);
    font-family: var(--font-body); font-weight: 400;
}
.site-phone-pass header {
    display: flex; align-items: center; gap: var(--space-xs);
    min-height: 4.25rem; padding: var(--space-s);
}
.site-phone-pass header strong { font-size: var(--txt-m); font-weight: 500; }
.site-phone-pass__mark {
    display: block; width: 2.75rem; height: 2.75rem; object-fit: contain; border-radius: 50%;
}
.site-phone-pass__stamps {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs);
    padding: var(--space-m) var(--space-s);
    background-color: var(--color-coffee-dark);
    background-image: url("../images/landing/cafe-aroma-background.42755f54683b.webp");
    background-position: center; background-size: cover; background-blend-mode: multiply;
}
.site-phone-pass__stamps > span {
    position: relative; display: grid; place-items: center; aspect-ratio: 1;
}
.site-phone-pass__stamp {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
.site-phone-pass__stamp.is-inactive {
    filter: saturate(20%) brightness(80%); opacity: .65;
}
.site-phone-pass__stamps > .is-new { overflow: visible; }
.site-phone-pass__stamp-fill {
    position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
    opacity: 0; transform: scale(.72); animation: site-phone-new-stamp 9s var(--ease-out) infinite;
}
.site-phone-pass__reward { display: grid; gap: var(--space-3xs); padding: var(--space-s); }
.site-phone-pass__reward span {
    color: var(--color-coffee); font-size: .65rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
}
.site-phone-pass__reward strong { font-family: var(--font-body); font-size: var(--txt-m); font-weight: 500; }
.site-phone-pass__qr {
    display: grid; place-items: center; width: 7rem; aspect-ratio: 1;
    margin: auto auto var(--space-s); overflow: hidden;
    background: var(--color-surface); border: .4rem solid var(--color-surface);
    outline: 1px solid var(--color-border);
}
.site-phone-pass__qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-phone-pass small { margin: 0 auto var(--space-m); color: var(--color-coffee-dark); font-weight: 400; }
.site-phone__home { position: absolute; z-index: 6; bottom: .65rem; left: 50%; width: 7rem; height: .3rem; background: var(--color-text-on-primary); border-radius: var(--radius-pill); transform: translateX(-50%); }
.site-phone-notice {
    position: absolute; z-index: 7; width: 14rem; padding: var(--space-s);
    background: rgb(255 255 255 / 68%); border: 1px solid rgb(255 255 255 / 55%);
    border-radius: var(--radius-card);
    backdrop-filter: blur(1rem) saturate(135%);
}
.site-phone-notice--stamp { top: 4rem; left: 0; animation: site-phone-notice-one 9s var(--ease-out) infinite; }
.site-phone-notice--nearby { right: 0; bottom: 4rem; opacity: 0; animation: site-phone-notice-two 9s var(--ease-out) infinite; }
.site-phone-notice__source { display: block; margin-bottom: var(--space-2xs); color: var(--color-primary-hover); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.site-phone-notice strong { display: block; margin-bottom: var(--space-3xs); }
.site-phone-notice p { margin: 0; color: var(--color-text-muted); font-size: var(--txt-s); line-height: 1.35; }
@keyframes site-phone-stack {
    0%, 34% { opacity: 1; transform: translateY(0) scale(1); }
    44%, 100% { opacity: 0; transform: translateY(-.5rem) scale(.94); }
}
@keyframes site-phone-detail {
    0%, 34% { opacity: 0; transform: translateY(1rem) scale(.9); }
    48%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-.5rem) scale(.96); }
}
@keyframes site-phone-new-stamp {
    0%, 52% { opacity: 0; transform: scale(.72); }
    60%, 88% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.92); }
}
@keyframes site-phone-notice-one {
    0%, 56% { opacity: 0; transform: translateY(.75rem); }
    60%, 88% { opacity: 1; transform: translateY(0); }
    96%, 100% { opacity: 0; transform: translateY(-.5rem); }
}
@keyframes site-phone-notice-two {
    0%, 6% { opacity: 0; transform: translateY(.75rem); }
    12%, 36% { opacity: 1; transform: translateY(0); }
    44%, 100% { opacity: 0; transform: translateY(-.5rem); }
}
.site-choice-list { display: grid; gap: var(--space-s); }
.site-choice {
    display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--space-m);
    padding: var(--space-m); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.site-choice:first-child { color: var(--color-surface); background: var(--color-text-main); border-color: var(--color-text-main); }
.site-choice__icon {
    display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; color: var(--color-text-on-primary);
    background: var(--color-primary); border-radius: 50%; font: 700 var(--txt-xl)/1 var(--font-display);
}
.site-choice h3, .site-choice p { margin: 0; }
.site-choice p { color: var(--color-text-muted); font-size: var(--txt-s); }
.site-choice:first-child p { color: var(--color-border); }
.site-wallet-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.site-stage--wallet { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.site-stage--wallet .site-stage__copy p { max-width: 64ch; }
.site-wallet {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: var(--space-m); align-items: center; padding: var(--space-m) var(--space-l);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.site-wallet svg { grid-row: 1 / 3; width: 2rem; height: 2rem; margin: 0; }
.site-wallet h3 { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--txt-xl); }
.site-wallet p { margin: 0; color: var(--color-text-muted); }

.site-contrast { padding-block: 0 var(--space-2xl); }
.site-contrast__head {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s); margin-bottom: var(--space-xl);
}
.site-contrast__head .site-section-title { max-width: 19ch; }
.site-contrast__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-contrast-card { padding: var(--space-xl); border: 1px solid var(--color-border); }
.site-contrast-card--old {
    color: var(--color-text-muted); background: var(--color-surface-soft);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.site-contrast-card--new {
    color: var(--color-surface); background: var(--color-text-main); border-color: var(--color-text-main);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.site-contrast-card h3 {
    margin: var(--space-s) 0 var(--space-l);
    font-family: var(--font-display); font-size: var(--txt-2xl); line-height: 1.1;
}
.site-contrast-card__copy { max-width: 48ch; margin: 0; font-size: var(--txt-l); }
.site-contrast-card--new .site-card__label { color: var(--color-primary); }

.site-industries { padding-block: var(--space-2xl) var(--space-3xl); }
.site-industries__head {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s); margin-bottom: var(--space-xl);
}
.site-industries__head .site-section-title { max-width: 21ch; }
.site-industries__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--color-text-main); border-bottom: 1px solid var(--color-border);
}
.site-industry {
    position: relative; min-height: 14rem; padding: var(--space-l); color: inherit;
    border-bottom: 1px solid var(--color-border); text-decoration: none;
    transition: background-color var(--duration-short) var(--ease-out), transform 100ms var(--ease-out);
}
.site-industry:not(:nth-child(3n + 1)) { border-left: 1px solid var(--color-border); }
.site-industry:hover { background: var(--color-surface-soft); }
.site-industry:active { transform: translateY(1px); }
.site-industry h3 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--txt-xl); }
.site-industry p { max-width: 30ch; margin: 0; color: var(--color-text-muted); }

.site-outcomes { padding-block: var(--space-2xl); color: var(--color-surface); background: var(--color-text-main); }
.site-outcomes__head {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s); margin-bottom: var(--space-xl);
}
.site-outcomes__head .site-section-title {
    max-width: 21ch; font-size: clamp(2.25rem, 3.4vw, 3.25rem);
}
.site-outcomes__head p { max-width: 58ch; margin: 0; color: var(--color-border); }
.site-outcomes__list { display: grid; border-top: 1px solid rgb(255 255 255 / 20%); }
.site-outcome {
    display: block; width: 100%; min-width: 0;
    padding-block: var(--space-l); border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.site-outcome > div { width: 100%; min-width: 0; }
.site-outcome > span {
    padding-top: var(--space-3xs); color: var(--color-primary);
    font-family: var(--font-label); font-size: var(--txt-xs); font-weight: 700;
}
.site-outcome strong { display: block; margin-bottom: var(--space-xs); color: var(--color-surface); font-family: var(--font-display); font-size: var(--txt-xl); }
.site-outcome p { max-width: 72ch; margin: 0; color: var(--color-border); }

.site-pricing { padding-block: var(--space-3xl); }
.site-pricing__head {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l); margin-bottom: var(--space-xl);
}
.site-pricing__head p { max-width: 52ch; margin: var(--space-m) 0 0; color: var(--color-text-muted); }
.site-toggle {
    display: inline-flex; justify-self: center; padding: var(--space-3xs);
    background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}
.site-toggle button { min-height: 2.75rem; padding-inline: var(--space-m); color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); font-weight: 700; white-space: nowrap; }
.site-toggle button[aria-pressed="true"] { color: var(--color-surface); background: var(--color-text-main); }
.site-pricing__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    justify-items: center; gap: var(--space-m);
}
.site-price {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: 28rem; min-height: 29rem; padding: var(--space-l);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.site-price:first-child:nth-last-child(2) { justify-self: end; }
.site-price:nth-child(2):last-child { justify-self: start; }
.site-price--featured { border: 2px solid var(--color-primary-hover); }
.site-price__badge {
    position: absolute; top: var(--space-s); right: var(--space-s);
    padding: var(--space-3xs) var(--space-xs); color: var(--color-text-on-primary);
    background: var(--color-primary); border-radius: var(--radius-pill); font-size: var(--txt-xs); font-weight: 800;
}
.site-price h3 { margin: 0; padding-right: 5rem; font-family: var(--font-display); font-size: var(--txt-xl); }
.site-price__description {
    min-height: 3.25rem; margin: var(--space-xs) 0 0; color: var(--color-text-muted);
}
.site-price__amount {
    margin: var(--space-s) 0; font-family: var(--font-display); font-size: var(--txt-3xl);
    font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.04em;
}
.site-price__currency, .site-price__period { color: var(--color-text-muted); font-size: var(--txt-xs); letter-spacing: 0; }
.site-price__yearly[hidden], .site-price__monthly[hidden] { display: none; }
.site-price__trial {
    align-self: flex-start; margin: 0 0 var(--space-xs); padding: var(--space-3xs) var(--space-xs);
    color: var(--color-text-main); background: var(--color-surface-soft); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); font-size: var(--txt-xs); font-weight: 700;
}
.site-price ul {
    display: grid; gap: var(--space-xs);
    margin: var(--space-m) 0 var(--space-l); padding: 0; list-style: none;
}
.site-price li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-xs); color: var(--color-text-muted); font-size: var(--txt-s); }
.site-price li::before { content: "✓"; color: var(--color-primary-hover); font-weight: 900; }
.site-price .site-button { width: 100%; margin-top: auto; }

.site-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
.site-faq__list { border-top: 2px solid var(--color-text-main); }
.site-faq details { border-bottom: 1px solid var(--color-border); }
.site-faq summary {
    display: flex; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-m);
    cursor: pointer; font-family: var(--font-display); font-size: var(--txt-l); font-weight: 700; list-style: none;
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; flex: 0 0 auto; }
.site-faq details[open] summary::after { content: "−"; }
.site-faq details p { max-width: 60ch; margin: 0; padding: 0 2rem var(--space-m) 0; color: var(--color-text-muted); }

.site-final { padding: var(--space-2xl) 0 var(--space-l); color: var(--color-surface); background: var(--color-text-main); }
.site-final__row {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    gap: var(--space-l); padding-bottom: var(--space-2xl);
}
.site-final h2 { max-width: 16ch; font-size: clamp(2.5rem, 5vw, 4.75rem); }
.site-final__copy { max-width: 52ch; margin: var(--space-m) 0 0; color: var(--color-border); font-size: var(--txt-l); }
.site-final .site-button {
    width: fit-content; justify-self: start;
    color: var(--color-text-on-primary); background: var(--color-primary); border-color: var(--color-primary);
}
.site-final .site-button:hover { background: var(--color-surface-soft); border-color: var(--color-surface-soft); }
.site-footer {
    display: flex; justify-content: space-between; gap: var(--space-m);
    padding-top: var(--space-m); color: var(--color-border);
    border-top: 1px solid rgb(255 255 255 / 20%); font-size: var(--txt-s);
}
.site-footer a { color: var(--color-surface-soft); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.site-footer a:hover { text-decoration-thickness: 2px; }

@media (max-width: 900px) {
    .site-nav { border-radius: var(--radius-card); }
    .site-menu-button { display: grid; place-items: center; }
    .site-nav__links {
        position: fixed; top: 5rem; left: 0; display: none; flex-direction: column; align-items: stretch;
        width: 100%; padding: var(--space-m); background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-card); box-shadow: var(--shadow-float);
    }
    .site-nav__links[data-open="true"] { display: flex; }
    .site-nav__links > a { padding: var(--space-xs); }
    .site-nav__links > a:not(.site-button) {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        font-size: var(--txt-l);
        line-height: 1.2;
    }
    .site-hero { grid-template-columns: 1fr; gap: var(--space-s); min-height: auto; padding-top: 9rem; }
    .site-hero__content { position: relative; z-index: 3; }
    .site-wallet-stack { min-height: 27rem; }
    .site-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .site-stage__visual { grid-column: auto; }
    .site-contrast__head, .site-industries__head, .site-outcomes__head, .site-pricing__head, .site-faq, .site-final__row { grid-template-columns: 1fr; }
    .site-industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-industry:not(:nth-child(3n + 1)) { border-left: 0; }
    .site-industry:nth-child(even) { border-left: 1px solid var(--color-border); }
    .site-outcomes__list { grid-template-columns: minmax(0, 1fr); }
    .site-outcomes__head { padding-left: 0; }
}

@media (max-width: 600px) {
    .site-shell { width: min(calc(100% - 1.5rem), var(--content-max)); }
    .site-brand img { width: 6.5rem; }
    .site-hero { padding-top: 8.5rem; }
    .site-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
    .site-hero__lede { font-size: var(--txt-m); }
    .site-actions { flex-direction: column; }
    .site-actions .site-button { width: 100%; }
    .site-wallet-stack { min-height: 22rem; }
    .site-pass { width: 88%; padding: var(--space-m); }
    .site-pass--front { top: 6.5rem; }
    .site-pass__title { bottom: var(--space-m); left: var(--space-m); font-size: var(--txt-l); }
    .site-stamps { right: var(--space-m); bottom: var(--space-m); grid-template-columns: repeat(3, 1.6rem); }
    .site-stage { grid-template-columns: 1fr; gap: var(--space-m); padding-block: var(--space-2xl); }
    .site-stage__visual { grid-column: auto; }
    .site-trust__track.is-mobile-marquee {
        width: max-content;
        animation: site-business-marquee 22s linear infinite;
        will-change: transform;
    }
    .site-trust__track.is-mobile-marquee .site-trust__group {
        display: flex;
        flex: 0 0 auto;
        justify-content: flex-start;
        width: max-content;
        padding-inline-end: var(--space-m);
    }
    .site-workflow { padding-top: var(--space-2xl); }
    .site-contrast { padding-block: 0 var(--space-2xl); }
    .site-contrast__grid, .site-industries__grid { grid-template-columns: 1fr; }
    .site-contrast-card { padding: var(--space-l); }
    .site-contrast-card--old { border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .site-contrast-card--new { border-radius: 0 0 var(--radius-card) var(--radius-card); }
    .site-industries { padding-block: var(--space-2xl); }
    .site-industry, .site-industry:nth-child(even) { min-height: auto; padding-inline: 0; border-left: 0; }
    .site-industry h3 { margin-top: var(--space-s); }
    .site-choice { grid-template-columns: 3rem 1fr; }
    .site-choice > span:last-child { display: none; }
    .site-choice__icon { width: 3rem; }
    .site-phone-demo { min-height: 31rem; }
    .site-phone-demo .site-phone__view--stack,
    .site-phone-demo .site-phone__view--detail,
    .site-phone-demo .site-phone-pass__stamp-fill,
    .site-phone-demo .site-phone-notice {
        animation-play-state: paused;
    }
    .site-phone-demo.is-in-view .site-phone__view--stack,
    .site-phone-demo.is-in-view .site-phone__view--detail,
    .site-phone-demo.is-in-view .site-phone-pass__stamp-fill,
    .site-phone-demo.is-in-view .site-phone-notice {
        animation-play-state: running;
    }
    .site-phone { scale: .88; transform-origin: top center; }
    .site-phone-notice { width: 11rem; padding: var(--space-xs); scale: .82; }
    .site-phone-notice--stamp { top: 4rem; transform-origin: top left; }
    .site-phone-notice--nearby { bottom: 5rem; transform-origin: bottom right; }
    .site-wallet-row, .site-outcomes__list { grid-template-columns: minmax(0, 1fr); }
    .site-pricing__head { align-items: stretch; }
    .site-toggle { display: grid; grid-template-columns: 1fr 1fr; }
    .site-faq { gap: var(--space-xl); }
    .site-footer { flex-direction: column; }
}

@keyframes site-business-marquee {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important; transition-duration: .01ms !important;
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    }
    .site-phone__view--stack { animation: none; opacity: 0; }
    .site-phone__view--detail { animation: none; opacity: 1; transform: none; }
    .site-phone-pass__stamp-fill { animation: none; opacity: 1; transform: none; }
    .site-phone-notice { animation: none; opacity: 1; transform: none; }
}