/* Guest app landing: existing brand tokens, pill actions, 24/32px surfaces.
   DESIGN_VARIANCE: 6; MOTION_INTENSITY: 3; VISUAL_DENSITY: 3.
   Authentic app captures stay light; surrounding surfaces follow the guest theme. */
.ga-page {padding-bottom: var(--section-space)}
.ga-page :is(section, #download) {scroll-margin-top: 96px}
.ga-hero {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; padding-block: 48px 40px}
.ga-hero__copy {max-width: 600px}
.ga-app-label {display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-weight: 600; line-height: 1.5}
.ga-app-label img {flex: 0 0 44px}
.ga-app-label small {display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; margin-top: 3px}
.ga-hero h1 {font-size: clamp(2.5rem, 4.5vw, 3.8rem); line-height: 1.45; margin: 0 0 18px; font-weight: 800}
.ga-hero h1 span {color: var(--brand)}
.ga-lead {max-width: 470px; font-size: 1.125rem; color: var(--muted); line-height: 2; margin: 0 0 30px}
.ga-download-actions {display: flex; flex-wrap: wrap; gap: 12px}
.ga-button {display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 23px; min-height: 56px; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 600; font-size: .9375rem; white-space: nowrap; touch-action: manipulation; transition: background-color .2s ease, border-color .2s ease, transform .2s ease}
.ga-button > span[aria-hidden] {font-family: Arial, sans-serif; font-size: 1.3rem; font-weight: 400; line-height: 1}
.ga-button--primary {background: var(--home-action); color: var(--home-on-action)}
.ga-button--primary:hover {background: var(--home-action-hover)}
.ga-button--secondary {background: var(--surface); border-color: var(--border); color: var(--ink)}
.ga-button--secondary:hover {border-color: var(--brand); background: var(--tint)}
.ga-button:active {transform: scale(.98)}
.ga-download-unavailable {display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--soft); color: var(--muted); font-size: .875rem}
.ga-hero__visual {position: relative; display: grid; justify-items: center; margin: 0; padding: 12px 32px 0; isolation: isolate}
.ga-hero__visual::before {content: ""; position: absolute; z-index: -1; inset: 14% -12px 14%; border-radius: var(--radius-xl); background: var(--tint); transform: rotate(-7deg)}
.ga-phone {padding: 7px; border: 1px solid var(--border); border-radius: 32px; background: #302730; box-shadow: var(--elev-3); overflow: hidden; width: 258px; max-width: 100%}
.ga-phone img {width: 100%; height: auto; border-radius: 25px; aspect-ratio: 720 / 1400; background: #f7f1ed}
.ga-hero__visual figcaption, .ga-detail-visual figcaption {color: var(--muted); font-size: .75rem; margin-top: 16px; text-align: center}
.ga-release {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 20px 0; border-block: 1px solid var(--border); color: var(--muted); font-size: .875rem}
.ga-release a {display: inline-flex; align-items: center; gap: 12px; margin-inline-start: auto; min-height: 44px; color: var(--brand); font-weight: 600}
.ga-release a:hover {text-decoration: underline; text-underline-offset: 5px}
.ga-features {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; padding-block: var(--section-space)}
.ga-features h2, .ga-guide h2, .ga-faq h2 {font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.6; margin-bottom: 12px}
.ga-section-intro {color: var(--muted); margin-bottom: 28px}
.ga-feature-list {display: grid; gap: 26px}
.ga-feature-list article {display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start}
.ga-feature-list article > span {display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--tint); color: var(--brand); font-size: 21px}
.ga-feature-list h3 {font-size: 1.0625rem; margin: 0 0 4px}
.ga-feature-list p {color: var(--muted); font-size: .9375rem; line-height: 1.95; margin: 0; max-width: 420px}
.ga-detail-visual {grid-column: 1; grid-row: 1; display: grid; justify-items: center; margin: 0; border-radius: var(--radius-xl); padding: 32px; background: var(--soft)}
.ga-features__copy {grid-column: 2; grid-row: 1}
.ga-phone--detail {width: 244px; box-shadow: var(--elev-2)}
.ga-guide {padding: 36px 40px 40px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border)}
.ga-guide__heading p {margin: 0; color: var(--muted)}
.ga-steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: none}
.ga-steps li > span {display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--tint); color: var(--brand); font-weight: 700}
.ga-steps h3 {font-size: 1rem; margin-bottom: 8px}
.ga-steps p {font-size: .875rem; line-height: 2; margin: 0; color: var(--muted)}
.ga-faq {max-width: 850px; padding-top: var(--section-space)}
.ga-faq h2 {margin-bottom: 24px}
.ga-faq details {border-bottom: 1px solid var(--border)}
.ga-faq summary {display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none; font-weight: 600}
.ga-faq summary::-webkit-details-marker {display: none}
.ga-faq summary > span {flex: 0 0 24px; text-align: center; font-size: 1.4rem; font-weight: 400; color: var(--brand)}
.ga-faq details[open] summary > span {transform: rotate(45deg)}
.ga-faq details p {margin: 0 0 24px; max-width: 720px; color: var(--muted); line-height: 2}
.ga-faq p a {color: var(--brand); text-decoration: underline; text-underline-offset: 5px}
/* Keep the shared footer in the page's selected theme. */
.guest-app-page .guest-footer {background: var(--soft); color: var(--ink); border-top: 1px solid var(--border)}
.guest-app-page .guest-footer h2, .guest-app-page .guest-footer .brand-lockup--light {color: var(--ink)}
.guest-app-page .guest-footer__brand p, .guest-app-page .guest-footer__grid a, .guest-app-page .guest-footer__support small {color: var(--muted)}
.guest-app-page .guest-footer__grid a:hover {color: var(--brand)}
.guest-app-page .guest-footer .brand-lockup--light :is(.brand-mark, .brand-wordmark) {filter: none}
.guest-app-page .guest-footer__support {color: var(--ink) !important; border-color: var(--border); background: var(--surface)}
.guest-app-page .guest-footer__support span:first-child {background: var(--tint); color: var(--brand)}
.guest-app-page .guest-footer__bottom {border-color: var(--border); color: var(--muted)}
@media (max-width: 1100px) {
    .ga-hero {gap: 32px}
    .ga-download-actions {flex-direction: column; align-items: flex-start}
    .ga-features {gap: 40px}
}
@media (max-width: 767px) {
    .ga-page {padding-bottom: 48px}
    .ga-hero {grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 32px}
    .ga-app-label {margin-bottom: 20px}
    .ga-hero h1 {font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 1.5; margin-bottom: 14px}
    .ga-lead {font-size: 1rem; margin-bottom: 24px; max-width: 430px}
    .ga-download-actions {align-items: stretch; width: 100%; gap: 10px}
    .ga-button {min-height: 52px; width: 100%}
    .ga-hero__visual {padding-top: 4px; padding-inline: 32px}
    .ga-hero__visual::before {inset-inline: 0; transform: rotate(-4deg)}
    .ga-phone--home {width: 230px}
    .ga-release {gap: 4px 20px; padding-block: 16px; font-size: .8125rem}
    .ga-release a {margin-inline-start: 0}
    .ga-features {grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px}
    .ga-features__copy, .ga-detail-visual {grid-column: auto; grid-row: auto}
    .ga-feature-list {gap: 24px}
    .ga-detail-visual {padding: 28px 20px; border-radius: var(--radius-lg)}
    .ga-phone--detail {width: 224px}
    .ga-guide {padding: 24px 20px; border-radius: var(--radius-lg)}
    .ga-steps {grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px}
    .ga-steps li {display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px}
    .ga-steps li > span {grid-row: span 2; margin: 0}
    .ga-steps h3 {margin-bottom: 4px}
    .ga-faq {padding-top: 48px}
    .ga-faq summary {font-size: .9375rem; gap: 12px}
    .ga-faq details p {font-size: .9375rem}
}
@media (prefers-reduced-motion: reduce) {
    .ga-page *, .ga-page *::before {transition: none; animation: none; scroll-behavior: auto}
}