@import url("embedded/shared/tokens.css");

* { box-sizing: border-box; }
:root {
  --phone-aspect: 390 / 844;
  --phone-width: 350px;
  --phone-border: 9px;
  --phone-radius: 38px;
}
html { max-width: 100%; overflow-x: clip; scroll-behavior: auto; background: var(--pa-canvas); color: var(--pa-ink); font-family: var(--pa-sans); }
body { min-width: 320px; max-width: 100%; margin: 0; overflow-x: clip; background: var(--pa-canvas); }
*, *::before, *::after { animation: none !important; transition: none !important; }
a { color: inherit; }
iframe, svg, img { max-width: 100%; }
.mobile-static-image, .mobile-static-flow { display: none; }
.site-nav { height: 64px; position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--pa-line); padding: 0 5vw; background: rgba(250,249,245,.96); backdrop-filter: blur(16px); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-mark { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: var(--pa-ink); color: #fff; font: 600 11px var(--pa-mono); }
.site-mark img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.site-brand strong { font-size: 13px; font-weight: 600; }
.site-links { display: flex; align-items: center; gap: 19px; }
.site-links a { color: var(--pa-muted); font-size: 11px; text-decoration: none; }
.site-links .site-login { min-height: 34px; display: inline-flex; align-items: center; border-radius: 6px; padding: 0 13px; background: var(--pa-ink); color: #fff; }
.site-links .site-account { max-width: 180px; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-links .site-account::before { width: 6px; height: 6px; content: ""; flex: 0 0 auto; border-radius: 50%; background: #91b39a; }
.hero { min-height: 760px; display: grid; grid-template-columns: minmax(420px,.78fr) minmax(760px,1.22fr); align-items: center; gap: clamp(24px,3vw,56px); overflow: hidden; border-bottom: 1px solid #becdc3; padding: 40px 4vw 40px 6vw; background: #dfe7e0; }
.hero-copy { width: min(560px,100%); min-width: 0; position: relative; z-index: 3; justify-self: center; padding: 0; }
.hero-kicker, .story-number, .story-intro > span, .desktop-copy > span, .trust-story > div > span, .final-cta > span { color: var(--pa-coral-dark); font: 600 10px/1.4 var(--pa-mono); letter-spacing: 0; }
.hero h1 { margin: 15px 0 18px; font: 500 64px/.97 var(--pa-display); letter-spacing: 0; }
.hero-copy > p { max-width: 540px; margin: 0; color: #5f655f; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.site-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pa-line); border-radius: 6px; padding: 0 16px; background: #fff; color: var(--pa-body); font-size: 12px; text-decoration: none; }
.site-button.primary { border-color: var(--pa-coral); background: var(--pa-coral); color: #fff; }
.product-visual { width: min(56vw,980px); height: 650px; position: relative; justify-self: center; }
.local-client-preview { width: 850px; height: 600px; position: absolute; top: 26px; left: 20px; overflow: hidden; border: 1px solid rgba(20,20,19,.2); border-radius: 12px; background: #f7f5ef; box-shadow: 0 30px 80px rgba(28,32,28,.22); transform: rotate(1.2deg); }
.local-client-preview > header { height: 38px; display: grid; grid-template-columns: 80px minmax(0,1fr) auto; align-items: center; border-bottom: 1px solid #dcd8d0; padding: 0 12px; background: #f1eee7; color: #5f625e; font-size: 8px; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #c5c0b7; }
.local-client-preview > header strong { text-align: center; font-size: 9px; font-weight: 600; }
.local-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.local-state i { width: 6px; height: 6px; border-radius: 50%; background: #61906d; }
.local-client-screen { height: 562px; position: relative; overflow: hidden; background: #f7f5ef; }
.local-client-screen iframe { width: 1160px; max-width: none; height: 940px; pointer-events: none; position: absolute; top: 0; left: 0; border: 0; transform: scale(.733); transform-origin: 0 0; background: #f7f5ef; }
.life-mobile-preview { width: 260px; height: auto; aspect-ratio: var(--phone-aspect); position: absolute; z-index: 3; right: 0; bottom: 5px; overflow: hidden; border: 8px solid #171715; border-radius: 38px; background: #fff; box-shadow: 0 28px 64px rgba(25,28,25,.28); transform: rotate(-3deg); }
.life-mobile-preview iframe { width: 390px; max-width: none; height: 844px; pointer-events: none; position: absolute; top: 0; left: 0; border: 0; transform: scale(.626); transform-origin: 0 0; background: #fff; }
.life-mobile-speaker { width: 42px; height: 4px; position: absolute; z-index: 3; top: 6px; left: 50%; border-radius: 999px; transform: translateX(-50%); background: #171715; }
.local-data-note { min-width: 230px; position: absolute; z-index: 4; top: 8px; right: 5px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid rgba(20,20,19,.12); border-radius: 8px; padding: 11px 13px; background: #fff; color: #636861; box-shadow: 0 14px 34px rgba(35,37,31,.13); font-size: 8px; line-height: 1.5; }
.local-data-note > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #dfe9e2; }.local-data-note > i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4e7c5d; }
.local-data-note strong { display: block; color: #283029; font-size: 9px; }
.product-panel { width: 410px; min-height: 550px; position: relative; z-index: 2; border-radius: 18px; padding: 28px; background: #1d2521; color: #f7f4ed; box-shadow: 0 34px 90px rgba(24,25,22,.28); }
.product-panel > header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.product-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #f2eee5; color: #1d2521; font: 600 10px var(--pa-mono); }
.product-panel header strong, .product-panel header small { display: block; }
.product-panel header strong { font-size: 12px; }
.product-panel header small { margin-top: 3px; color: #8f9992; font-size: 8px; }
.product-panel header i { display: inline-flex; align-items: center; gap: 6px; color: #a9c2ae; font-size: 8px; font-style: normal; }
.product-panel header i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #83ad8d; box-shadow: 0 0 0 4px rgba(131,173,141,.12); }
.product-panel h2 { max-width: 330px; margin: 48px 0 32px; font: 500 39px/1.04 var(--pa-display); }
.product-route { display: grid; border-top: 1px solid #3c4540; }
.product-route > div { min-height: 72px; display: grid; grid-template-columns: 54px minmax(0,1fr); align-content: center; border-bottom: 1px solid #3c4540; }
.product-route span { grid-row: 1 / span 2; color: #d98a6e; font: 600 8px var(--pa-mono); }
.product-route strong { color: #edece7; font-size: 10px; font-weight: 600; }
.product-route small { margin-top: 5px; color: #87918b; font-size: 8px; }
.product-panel footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; color: #7f8a83; font-size: 7px; }
.product-signal { min-width: 64px; position: absolute; z-index: 3; border: 1px solid rgba(20,20,19,.12); border-radius: 999px; padding: 9px 13px; background: #fff; color: #5c625d; font-size: 8px; text-align: center; box-shadow: 0 12px 32px rgba(35,37,31,.13); }
.signal-one { top: 92px; left: -5px; transform: rotate(-6deg); }
.signal-two { top: 238px; right: -7px; transform: rotate(5deg); }
.signal-three { right: 12px; bottom: 82px; transform: rotate(-4deg); background: #d97b5d; color: #fff; }
.story-phone, .static-flow-card { height: auto; aspect-ratio: var(--phone-aspect); position: relative; overflow: hidden; border: var(--phone-border) solid #171715; border-radius: var(--phone-radius); background: #fff; box-shadow: 0 28px 70px rgba(24,25,22,.24); }
.story-phone { width: var(--phone-width); }
.story-phone iframe { width: 100%; height: 100%; display: block; border: 0; background: #fff; }
.phone-speaker { width: 58px; height: 5px; pointer-events: none; position: absolute; z-index: 4; top: 8px; left: 50%; border-radius: 999px; transform: translateX(-50%); background: #171715; }
.hero-visual { width: 460px; height: 700px; position: relative; display: grid; place-items: center end; }
.hero-phone { z-index: 2; transform: rotate(2.2deg); transform-origin: 50% 58%; box-shadow: 0 34px 90px rgba(24,25,22,.3); }
.hero-result-fan { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.fan-card { width: 170px; position: absolute; display: block; border: 6px solid #fff; border-radius: 7px; box-shadow: 0 20px 50px rgba(35,37,31,.22); }
.fan-card-back { top: 118px; left: 2px; transform: rotate(-8deg); }
.fan-card-front { bottom: 92px; left: 17px; transform: rotate(-3deg); }
.story-intro { width: min(1120px,88vw); margin: 0 auto; padding: 92px 0 84px; }
.story-intro h2 { max-width: 930px; margin: 14px 0 22px; font: 500 62px/1 var(--pa-display); letter-spacing: 0; }
.story-intro p { max-width: 680px; margin: 0 0 0 auto; color: var(--pa-muted); font-size: 15px; line-height: 1.85; }
.travel-flow-story { overflow: hidden; border-top: 1px solid var(--pa-line); padding: 60px 5vw 76px; background: #f2eee5; }
.travel-flow-inner { width: min(1360px,100%); display: grid; grid-template-columns: minmax(320px,.72fr) minmax(650px,1.28fr); align-items: center; gap: min(4vw,64px); margin: 0 auto; }
.travel-flow-inner .story-copy h2 { font-size: 58px; }
.travel-flow-stage { width: min(700px,100%); height: 750px; position: relative; justify-self: end; }
.static-flow-card { width: 330px; position: absolute; }
.static-flow-card::before { width: 58px; height: 5px; pointer-events: none; position: absolute; z-index: 4; top: 8px; left: 50%; border-radius: 999px; transform: translateX(-50%); background: #171715; content: ""; }
.static-flow-card > header { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e7e2d9; padding: 10px 13px 0; background: #f8f5ef; color: #5f5a53; font: 600 8px/1.2 var(--pa-mono); }
.static-flow-card > header span { display: flex; align-items: center; gap: 7px; }
.static-flow-card > header b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #20251f; color: #fff; font-size: 7px; }
.static-flow-card > header i { font-style: normal; }
.static-flow-card > header small { color: #8c857c; font: 500 7px/1.2 var(--pa-mono); text-align: right; }
.static-flow-card iframe { width: 100%; height: calc(100% - 54px); display: block; border: 0; background: #fff; }
.flow-card-chat { z-index: 2; top: 0; left: 55px; transform: rotate(-3.2deg); }
.flow-card-progress { z-index: 1; top: 58px; right: 55px; transform: rotate(2.2deg); }
.flow-card-progress > header { background: #e5eee7; color: #34493b; }
.flow-card-progress > header b { background: #52745d; }
.finance-flow-stage .flow-card-progress > header { background: #f0e1d8; color: #754b3d; }
.finance-flow-stage .flow-card-progress > header b { background: #a75d46; }
.interaction-hint { display: flex; align-items: center; gap: 9px; margin: 19px 0 0; color: #8d7469; font-size: 9px; }
.interaction-hint span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #d87858; color: #fff; font-size: 10px; }
.story-section { padding: 96px 6vw; border-top: 1px solid var(--pa-line); }
.worker-story { background: var(--pa-dark); color: #fff; }
.result-story { background: #efdcd3; }
.task-handoff-story { background: #f2eee5; }
.case-transition { min-height: 330px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); align-items: end; gap: 8vw; padding: 76px 8vw; }
.finance-transition { background: #b86146; color: #fff8f2; }
.case-transition span { color: #f3c7b7; font: 600 10px/1.4 var(--pa-mono); }
.case-transition h2 { max-width: 760px; margin: 14px 0 0; font: 500 54px/1 var(--pa-display); letter-spacing: 0; }
.case-transition p { max-width: 440px; margin: 0; color: #f0d6cc; font-size: 14px; line-height: 1.85; }
.finance-flow-story { border-top: 0; background: #f2e7de; }
.finance-flow-story .story-number { color: #9b4e3a; }
.finance-flow-story .story-copy > p { color: #6f625c; }
.story-inner { width: min(1120px,100%); display: grid; grid-template-columns: minmax(0,1fr) 350px; align-items: center; gap: 9vw; margin: 0 auto; }
.story-inner.reverse { grid-template-columns: 350px minmax(0,1fr); }
.story-inner.reverse .story-copy { order: 2; }
.story-copy h2 { margin: 12px 0 20px; font: 500 58px/1 var(--pa-display); letter-spacing: 0; }
.story-copy > p { max-width: 580px; margin: 0; color: var(--pa-muted); font-size: 14px; line-height: 1.85; }
.worker-story .story-number { color: #e39b81; }
.worker-story .story-copy > p { color: #bcb7af; }
.task-bridge-note { max-width: 550px; margin: 26px 0 0; border-left: 2px solid var(--pa-coral); padding: 2px 0 2px 18px; }
.task-bridge-note span { color: var(--pa-coral-dark); font: 600 8px var(--pa-mono); }
.task-bridge-note p { margin: 8px 0 0; color: #4f4a43; font: 500 18px/1.58 var(--pa-display); }
.task-phone { background: #fff; }
.finance-result-story .task-bridge-note { border-left-color: #e39b81; }
.finance-result-story .task-bridge-note span { color: #e39b81; }
.finance-result-story .task-bridge-note p { color: #e9e6df; }
.finance-result-story .result-link { border-color: #485049; background: #252e29; }
.finance-result-story .result-link strong { color: #f2f1ed; }
.finance-result-story .result-link small { color: #989e99; }
.finance-result-story .finance-share-url { max-width: 470px; display: block; color: #b7c9bd; }
.finance-share-qr span { color: #e39b81; }
.finance-share-qr strong { color: #f2f1ed; }
.finance-share-qr .share-qr-code { background: #fff; }
.story-facts { display: grid; margin: 30px 0 0; border-top: 1px solid #3b3833; }
.story-facts div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 16px; border-bottom: 1px solid #3b3833; padding: 13px 0; }
.story-facts dt { color: #7f7b74; font-size: 10px; }
.story-facts dd { margin: 0; color: #e6e2dc; font-size: 11px; }
.finance-request { margin: 26px 0 0; border: 1px solid #414a45; border-radius: 8px; padding: 17px 18px; background: #232c27; }
.finance-request span { color: #e39b81; font: 600 8px var(--pa-mono); }
.finance-request p { margin: 9px 0 0; color: #eef0ed; font: 500 17px/1.55 var(--pa-display); }
.finance-steps div { grid-template-columns: 40px minmax(0,1fr); gap: 15px; padding: 15px 0; }
.finance-steps dd strong, .finance-steps dd span { display: block; }
.finance-steps dd strong { color: #f0f1ef; font-size: 10px; font-weight: 600; }
.finance-steps dd span { margin-top: 5px; color: #929a94; font-size: 9px; line-height: 1.55; }
.travel-request { max-width: 560px; margin: 26px 0 0; border-left: 2px solid rgba(20,20,19,.45); padding: 2px 0 2px 18px; }
.travel-request span { color: var(--pa-coral-dark); font: 600 8px var(--pa-mono); }
.travel-request p { margin: 8px 0 0; color: #37332e; font: 500 19px/1.58 var(--pa-display); }
.result-link { max-width: 470px; display: grid; margin-top: 28px; border: 1px solid rgba(20,20,19,.2); border-radius: 8px; padding: 16px; background: rgba(255,255,255,.68); text-decoration: none; }
.result-link span { color: var(--pa-coral-dark); font: 600 8px var(--pa-mono); }
.result-link strong { margin-top: 8px; font: 500 22px var(--pa-display); }
.result-link small { margin-top: 7px; overflow-wrap: anywhere; color: var(--pa-muted); font-size: 9px; }
.share-qr { max-width: 460px; display: grid; grid-template-columns: 124px minmax(0,1fr); align-items: center; gap: 16px; margin-top: 20px; }
.share-qr-code { width: 124px; }
.share-qr-code::before, .share-qr-code .share-qr-code-head, .share-qr-code .share-qr-code-foot { display: none; }
.share-qr-code img { width: 124px; height: 124px; display: block; image-rendering: crisp-edges; }
.share-qr span, .share-qr strong, .share-qr small, .share-qr a { display: block; }
.share-qr span { color: var(--pa-coral-dark); font: 600 8px var(--pa-mono); }
.share-qr strong { margin-top: 7px; font: 500 17px var(--pa-display); }
.share-qr small { margin-top: 5px; color: var(--pa-muted); font-size: 9px; }
.share-url { margin-top: 6px; overflow-wrap: anywhere; color: #576d60; font-size: 9px; line-height: 1.45; text-decoration: underline; text-underline-offset: 3px; }
.journal-phone, .cards-phone { background: #fff; }
.desktop-story { padding: 100px 6vw 110px; background: #fff; }
.desktop-copy { width: min(1120px,100%); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 7vw; margin: 0 auto 42px; }
.desktop-copy h2 { margin: 12px 0 0; font: 500 54px/1 var(--pa-display); letter-spacing: 0; }
.desktop-copy p { align-self: end; margin: 0; color: var(--pa-muted); font-size: 14px; line-height: 1.8; }
.desktop-showcase { width: min(1180px,100%); height: 650px; position: relative; overflow: hidden; margin: 0 auto; border: 1px solid rgba(20,20,19,.2); border-radius: 8px; background: #fff; box-shadow: 0 25px 70px rgba(38,31,25,.15); }
.desktop-bar { height: 38px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--pa-line); padding: 0 13px; background: #efede8; }
.desktop-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c1bdb5; }
.desktop-bar span { margin-left: 7px; color: var(--pa-muted); font: 9px var(--pa-mono); }
.desktop-showcase iframe { width: 100%; height: 612px; display: block; border: 0; background: #fff; pointer-events: none; }
.experience-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.9fr); align-items: start; gap: 7vw; padding: 78px 8vw; background: #dfe7e0; }
.experience-heading > span, .onboarding-copy > span { color: var(--pa-coral-dark); font: 600 10px/1.4 var(--pa-mono); }
.experience-intro h2 { margin: 13px 0 0; font: 500 52px/1 var(--pa-display); letter-spacing: 0; }
.experience-intro p { max-width: 620px; margin: 22px 0 0; color: #5f6760; font-size: 13px; line-height: 1.8; }
.access-map { margin: 0; border-top: 1px solid rgba(20,20,19,.24); }
.access-map > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; border-bottom: 1px solid rgba(20,20,19,.24); padding: 17px 0; }
.access-map dt { display: flex; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 600; }
.access-map dt span { color: var(--pa-coral-dark); font: 600 9px var(--pa-mono); }
.access-map dd { margin: 0; }
.access-map strong, .access-map small { display: block; }
.access-map strong { font: 500 16px var(--pa-display); }
.access-map small { margin-top: 5px; color: #687069; font-size: 9px; line-height: 1.55; }
.mobile-feature-story .story-inner { width: min(1160px,100%); }
.activity-feature-story { background: #f6f4ee; }
.pages-feature-story { background: #222a25; color: #fff; }
.pages-feature-story .story-number { color: #e29a81; }
.pages-feature-story .story-copy > p { color: #b8bdb9; }
.app-prototype-phone { background: #fff; }
.app-prototype-phone iframe, .onboarding-phone iframe { pointer-events: none; }
.feature-points { display: grid; margin: 28px 0 0; border-top: 1px solid rgba(20,20,19,.16); }
.feature-points div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 15px; border-bottom: 1px solid rgba(20,20,19,.16); padding: 13px 0; }
.feature-points dt { color: #9a6653; font-size: 9px; }.feature-points dd { margin: 0; color: #575b57; font-size: 10px; }
.dark-points { border-color: #444d47; }.dark-points div { border-color: #444d47; }.dark-points dt { color: #e29a81; }.dark-points dd { color: #d4d7d4; }
.local-control-story { background: #fff; }
.onboarding-step { min-height: 720px; display: grid; grid-template-columns: minmax(330px,.8fr) minmax(520px,1.2fr); align-items: center; gap: min(7vw,100px); padding: 88px 7vw; }
.wechat-step { background: #fff; }
.wechat-entry-phone { background: #ededed; }
.wechat-entry-phone iframe { pointer-events: none; }
.onboarding-copy h2 { margin: 14px 0 20px; font: 500 50px/1 var(--pa-display); letter-spacing: 0; }
.onboarding-copy p { max-width: 560px; margin: 0; color: var(--pa-muted); font-size: 14px; line-height: 1.85; }
.onboarding-desktop-preview { width: 620px; height: 450px; position: relative; justify-self: end; overflow: hidden; border: 1px solid rgba(20,20,19,.18); border-radius: 8px; background: #f7f5ef; box-shadow: 0 24px 68px rgba(35,33,28,.17); }
.onboarding-desktop-preview iframe { width: 1180px; max-width: none; height: 860px; pointer-events: none; position: absolute; top: 0; left: 0; border: 0; transform: scale(.525); transform-origin: 0 0; background: #f7f5ef; }
.onboarding-phone { justify-self: end; background: #fff; }
.trust-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8vw; padding: 105px 8vw; background: var(--pa-dark); color: #fff; }
.trust-story h2 { margin: 13px 0 0; font: 500 56px/1 var(--pa-display); letter-spacing: 0; }
.trust-story dl { margin: 0; }
.trust-story dl div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; border-bottom: 1px solid #3b3833; padding: 18px 0; }
.trust-story dt { color: #d9d5ce; font-size: 11px; }
.trust-story dd { margin: 0; color: #8e8982; font-size: 10px; text-align: right; }
.final-cta { min-height: 560px; display: grid; place-items: center; align-content: center; padding: 80px 6vw; background: #fff; text-align: center; }
.final-cta h2 { max-width: 820px; margin: 14px auto 16px; font: 500 68px/.95 var(--pa-display); letter-spacing: 0; }
.final-cta p { max-width: 600px; margin: 0 auto; color: var(--pa-muted); font-size: 14px; line-height: 1.8; }
.final-cta .hero-actions { justify-content: center; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--pa-line); padding: 24px 5vw; background: var(--pa-surface); color: var(--pa-muted); font-size: 10px; }
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { text-decoration: none; }

@media (max-width: 1600px) and (min-width: 1201px) {
  .hero { grid-template-columns: minmax(430px,.86fr) minmax(640px,1.14fr); gap: 2vw; padding-right: 3vw; padding-left: 5vw; }
  .hero h1 { font-size: 52px; }
  .product-visual { width: 700px; height: 650px; }
  .local-client-preview { width: 620px; height: 470px; top: 88px; left: 8px; }
  .local-client-screen { height: 432px; }
  .local-client-screen iframe { transform: scale(.534); }
  .life-mobile-preview { width: 210px; bottom: 24px; }
  .life-mobile-preview iframe { transform: scale(.497); }
  .local-data-note { min-width: 210px; top: 18px; right: 0; }
}

@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0,1fr) 390px; gap: 3vw; padding-right: 3vw; }
  .hero h1 { font-size: 52px; }
  .product-visual { width: 390px; height: 600px; }
  .local-client-preview { width: 356px; height: 286px; top: 112px; }
  .local-client-screen { height: 248px; }
  .local-client-screen iframe { transform: scale(.306); }
  .life-mobile-preview { width: 148px; height: auto; }
  .life-mobile-preview iframe { transform: scale(.338); }
  .local-data-note { right: 0; }
  .product-panel { width: 345px; padding: 24px; }
  .product-panel h2 { font-size: 34px; }
  .hero-visual { width: 370px; height: 650px; }
  .hero-phone { width: 305px; height: auto; }
  .fan-card { width: 134px; }
  .fan-card-back { top: 104px; left: 0; }
  .fan-card-front { bottom: 82px; left: 7px; }
  .story-inner, .story-inner.reverse { grid-template-columns: minmax(0,1fr) 330px; gap: 6vw; }
  .story-inner.reverse .story-copy { order: 2; }
  .story-phone { width: 330px; }
  .story-copy h2 { font-size: 48px; }
  .travel-flow-inner { grid-template-columns: minmax(280px,.75fr) minmax(580px,1.25fr); gap: 3vw; }
  .travel-flow-inner .story-copy h2 { font-size: 48px; }
  .travel-flow-stage { width: min(610px,100%); height: 680px; }
  .static-flow-card { width: 295px; }
  .flow-card-chat { left: 40px; }
  .flow-card-progress { top: 50px; right: 40px; }
  .desktop-copy { grid-template-columns: 1fr; gap: 22px; }
  .experience-intro { grid-template-columns: 1fr; gap: 36px; }
  .onboarding-step { grid-template-columns: minmax(280px,.75fr) minmax(430px,1.25fr); gap: 4vw; padding-right: 4vw; padding-left: 4vw; }
  .onboarding-copy h2 { font-size: 42px; }
  .onboarding-desktop-preview { width: 500px; height: 390px; }
  .onboarding-desktop-preview iframe { transform: scale(.424); }
  .onboarding-phone { width: 330px; }
  .trust-story h2 { font-size: 46px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .travel-flow-inner { grid-template-columns: 1fr; gap: 46px; }
  .travel-flow-inner .story-copy { max-width: 680px; }
  .travel-flow-stage { justify-self: center; }
}

@media (max-width: 767px) {
  body { min-width: 0; }
  .site-nav { padding: 0 16px; }
  .site-links > a:not(.site-login) { display: none; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 26px; padding: 48px 20px 46px; }
  .hero-copy { width: 100%; padding: 0; }
  .hero h1 { margin-top: 11px; font-size: 40px; line-height: 1; }
  .hero-copy > p { max-width: 290px; font-size: 12px; line-height: 1.65; }
  .hero-actions { margin-top: 18px; }
  .product-visual { width: min(350px,100%); height: 560px; justify-self: center; }
  .local-client-preview { width: 330px; height: 270px; top: 92px; left: 0; }
  .local-client-preview > header { grid-template-columns: 62px minmax(0,1fr) auto; }
  .local-client-screen { height: 232px; }
  .local-client-screen iframe { transform: scale(.283); }
  .life-mobile-preview { width: 142px; height: auto; right: 0; bottom: 8px; }
  .life-mobile-preview iframe { transform: scale(.323); }
  .local-data-note { min-width: 182px; top: 18px; right: -2px; }
  .product-panel { width: min(350px,100%); min-height: 500px; padding: 23px; }
  .product-panel h2 { margin: 38px 0 26px; font-size: 34px; }
  .product-route > div { min-height: 66px; }
  .signal-one { left: -8px; }
  .signal-two { right: -8px; }
  .hero-visual { width: 100%; height: 780px; }
  .hero-phone { width: min(var(--phone-width),100%); height: auto; justify-self: end; transform: rotate(1.4deg); }
  .fan-card { width: 122px; border-width: 4px; }
  .fan-card-back { top: 102px; left: -8px; }
  .fan-card-front { bottom: 105px; left: 2px; }
  .phone-speaker { top: 6px; }
  .story-intro { width: 100%; padding: 64px 20px; }
  .story-intro h2 { margin-top: 10px; font-size: 38px; }
  .story-intro p { margin-top: 22px; font-size: 13px; }
  .travel-flow-story { padding: 64px 20px 52px; }
  .travel-flow-inner { grid-template-columns: 1fr; gap: 26px; }
  .travel-flow-inner .story-copy h2 { font-size: 40px; }
  .travel-flow-stage { width: 100%; height: auto; display: grid; justify-items: center; gap: 0; justify-self: center; }
  .static-flow-card { width: min(310px,88vw); position: relative; top: auto; right: auto; left: auto; }
  .flow-card-chat { z-index: 2; transform: rotate(-1.6deg); }
  .flow-card-progress { z-index: 1; margin-top: -22px; transform: rotate(1.1deg); }
  .story-section { padding: 64px 20px; }
  .story-inner, .story-inner.reverse { grid-template-columns: 1fr; gap: 38px; }
  .story-inner.reverse .story-copy { order: 0; }
  .story-copy h2 { font-size: 40px; }
  .story-copy > p { font-size: 12px; }
  .case-transition { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 64px 20px 68px; }
  .case-transition h2 { font-size: 39px; }
  .case-transition p { font-size: 12px; }
  .story-phone { width: min(var(--phone-width),100%); height: auto; justify-self: center; }
  .travel-request { margin-top: 22px; }
  .travel-request p { font-size: 17px; }
  .task-bridge-note { margin-top: 22px; }
  .task-bridge-note p { font-size: 17px; }
  .share-qr { grid-template-columns: 112px minmax(0,1fr); gap: 12px; }
  .share-qr-code { width: 112px; }
  .share-qr-code img { width: 112px; height: 112px; }
  .desktop-story { padding: 68px 20px; }
  .desktop-copy { width: 100%; margin-bottom: 0; }
  .desktop-copy h2 { font-size: 40px; }
  .desktop-copy p { font-size: 12px; }
  .desktop-showcase { width: 100%; height: 300px; margin-top: 34px; }
  .desktop-showcase iframe { width: 1180px; max-width: none; height: 880px; position: absolute; top: 38px; left: 0; transform: scale(.296); transform-origin: 0 0; }
  .experience-intro { grid-template-columns: 1fr; gap: 34px; padding: 64px 20px; text-align: left; }
  .experience-intro h2 { font-size: 40px; }
  .experience-intro p { margin-top: 20px; font-size: 12px; }
  .access-map > div { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  .onboarding-step { min-height: 0; grid-template-columns: 1fr; gap: 38px; padding: 68px 20px; }
  .onboarding-copy h2 { font-size: 39px; }
  .onboarding-copy p { font-size: 12px; }
  .onboarding-desktop-preview { width: 100%; height: 300px; justify-self: stretch; }
  .onboarding-desktop-preview iframe { transform: scale(.296); }
  .onboarding-phone { width: min(var(--phone-width),100%); height: auto; justify-self: center; }
  .trust-story { grid-template-columns: 1fr; gap: 38px; padding: 72px 20px; }
  .trust-story h2 { font-size: 36px; }
  .trust-story dl div { grid-template-columns: 1fr; gap: 6px; }
  .trust-story dd { text-align: left; }
  .final-cta { min-height: 520px; padding: 72px 20px; }
  .final-cta h2 { font-size: 44px; }
  .final-cta p { font-size: 12px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding: 24px 20px; }

  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  iframe { display: none !important; }
  .mobile-static-image { width: 100%; height: 100%; display: block; object-fit: contain; object-position: top; }
  .mobile-static-flow { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .mobile-static-flow figure { min-width: 0; margin: 0; }
  .mobile-static-flow img { width: 100%; display: block; aspect-ratio: var(--phone-aspect); border: 5px solid #171715; border-radius: 24px; object-fit: contain; object-position: top; background: #fff; box-shadow: 0 18px 44px rgba(24,25,22,.18); }
  .mobile-static-flow figcaption { margin-top: 9px; color: #766e66; font: 600 8px/1.4 var(--pa-mono); text-align: center; }
  .finance-static-flow figcaption { color: #8d6658; }
  .local-client-screen .mobile-static-image { object-fit: cover; object-position: top left; }
  .life-mobile-preview .mobile-static-image { object-fit: contain; object-position: top; }
  .story-phone { width: min(310px,84vw); justify-self: center; transform: none; box-shadow: 0 20px 48px rgba(24,25,22,.2); }
  .desktop-showcase { height: auto; aspect-ratio: 1.38 / 1; }
  .desktop-showcase .mobile-static-image { height: calc(100% - 38px); object-position: top left; }
  .product-visual { height: 500px; }
  .local-client-preview { height: 270px; transform: none; }
  .life-mobile-preview { transform: rotate(-2deg); }
  .travel-flow-story { overflow: clip; }
  .static-flow-card iframe { display: block !important; }
  .local-client-screen iframe,
  .life-mobile-preview iframe,
  .desktop-showcase iframe,
  .app-prototype-phone iframe { display: block !important; }
  .local-client-screen .mobile-static-image,
  .life-mobile-preview .mobile-static-image,
  .desktop-showcase .mobile-static-image,
  .app-prototype-phone .mobile-static-image { display: none; }
}

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