/* Journey landing — built from Figma "Frame 2147244625" (1440 wide) */
@font-face { font-family: "Gambarino"; src: url(/fonts/Gambarino-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/Satoshi-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/Satoshi-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/Satoshi-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #222;
  --ink-2: rgba(0, 0, 0, .72);
  --muted: rgba(0, 0, 0, .5);
  --soft: #f2f2f2;
  --blue-a: #0073ff;
  --blue-b: #0da2ff;
  --serif: "Gambarino", "Times New Roman", serif;
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: 40px;
  --glass-shadow: -2.5px 5px 12.5px rgba(145,145,145,.05), -8.7px 21px 22px rgba(145,145,145,.04), -18.7px 46px 30px rgba(145,145,145,.03), -33.7px 82px 36px rgba(145,145,145,.01);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 12px; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid #3a8dff; outline-offset: 3px; border-radius: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 16px; border-radius: 100px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.btn img { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.btn-blue { color: #fff; background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); box-shadow: inset 0 .9px 16px 2px #d2eaff, inset 0 .9px 3.6px 2px #d2eaff, 0 38px 97px rgba(87,177,255,.34), 0 22px 29px rgba(87,177,255,.19), 0 9px 12px rgba(87,177,255,.22), 0 3.4px 4.4px rgba(87,177,255,.15); }
.btn-blue:hover { transform: translateY(-1px); }
.btn-blue:hover img { transform: translate(2px, -2px); }
.btn-blue:active { transform: scale(.97); }
.btn-glass { color: var(--muted); padding: 0 14px; height: 45px; background: rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 -6px 5px rgba(255,255,255,.25), inset 0 5px 5px rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.04), var(--glass-shadow); border: 1px solid rgba(255,255,255,.8); }
.btn-glass:hover { color: var(--ink); background: rgba(255,255,255,.85); }

/* ---------- stamps (white perforated frame + photo) ---------- */
.stamp { position: absolute; aspect-ratio: 160 / 183.7; }
.stamp .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp .ph { position: absolute; left: 22.6%; top: 14.9%; width: 60.2%; height: 63.3%; border-radius: 3px; background: #ddd center / cover no-repeat; }
.sprite-fuji { background-image: url(/assets/photo-fuji-blossom-sprite.webp) !important; background-size: 408% 100% !important; background-position: 34.3% 50% !important; }

/* ---------- pills ---------- */
.pill { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 12px 0 10px; border-radius: 100px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 11px; font-weight: 500; letter-spacing: -.02em; color: rgba(0,0,0,.85); white-space: nowrap; box-shadow: inset 0 -5px 4px rgba(255,255,255,.25), inset 0 4px 4px rgba(255,255,255,.25), 0 1px 1px rgba(98,95,88,.12), var(--glass-shadow); border: 1px solid rgba(255,255,255,.9); }
.pill img { width: 15px; height: 15px; }
button.pill { transition: transform .3s var(--ease), background-color .2s; }
button.pill:hover { background: #fff; }

/* ---------- fit/stage: fixed-size compositions scaled with zoom ---------- */
.fit { position: relative; width: 100%; }
.stage { position: relative; transform-origin: 0 0; }
.fit-center .stage { margin: 0 auto; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 859px; padding-bottom: 80px; background: linear-gradient(180deg, #d5e0f0 0%, #e2e9f5 35%, #f3f6fb 70%, #fff 100%); }
.nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 102px; padding: 0 72px; }
.logo img { width: 113px; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 56px; list-style: none; margin: 0; padding: 0; font-size: 18px; letter-spacing: -.02em; }
.nav-links a, .nav-menu-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); opacity: .92; transition: opacity .2s; }
.nav-links a:hover, .nav-menu-btn:hover { opacity: 1; }
.nav-links a { position: relative; }
.nav-links > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links > li > a:hover::after { transform: scaleX(1); }
.nav-menu-btn img { transition: transform .3s var(--ease); }
.has-menu { position: relative; }
.nav-menu { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 210px; padding: 8px; border-radius: 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px rgba(60,80,120,.14); border: 1px solid rgba(255,255,255,.9); opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.97); transform-origin: top center; transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.nav-menu a { display: block; padding: 10px 12px; border-radius: 12px; font-size: 15px; }
.nav-menu a:hover { background: rgba(0,0,0,.04); }
.has-menu.open .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .25s var(--ease); }
.has-menu.open .nav-menu-btn img { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.6); box-shadow: var(--glass-shadow); }
.mobile-menu { position: absolute; z-index: 19; left: 16px; right: 16px; top: 80px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 24px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(60,80,120,.16); animation: drop .3s var(--ease); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { padding: 12px; font-size: 17px; border-radius: 12px; }
.mobile-menu .btn { justify-content: center; margin-top: 6px; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

.hero-stamps { width: 476px; margin: 104px auto 0; }
.hero-stamps .stage-hs { width: 476px; height: 200px; }
.hs-1, .hs-2, .hs-3, .hs-4 { width: 156px; }
.hs-1 { left: 0; top: 2px; z-index: 1; }
.hs-2 { left: 116px; top: 0; z-index: 3; transform: rotate(6deg); }
.hs-3 { left: 208px; top: 14px; z-index: 2; transform: rotate(-6deg); }
.hs-4 { left: 320px; top: 2px; z-index: 1; }
.hero-stamps .stamp { animation: stampIn .9s var(--ease) both; }
.hs-1 { animation-delay: .05s !important; } .hs-2 { animation-delay: .12s !important; } .hs-3 { animation-delay: .19s !important; } .hs-4 { animation-delay: .26s !important; }
@keyframes stampIn { from { opacity: 0; translate: 0 18px; scale: .92; } }
.hero-stamps .stamp { transition: translate .4s var(--ease); }
.hero-stamps .stamp:hover { translate: 0 -6px; }

.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 52px; padding: 0 16px; }
.display { font-family: var(--serif); font-size: 88px; line-height: .91; letter-spacing: -.035em; color: var(--ink); }
.lede { max-width: 396px; margin-top: 32px; font-size: 14px; line-height: 20px; font-weight: 300; color: #2b2b2b; }
.hero-copy .btn { margin-top: 32px; }
.hero-copy > * { animation: rise 1s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .1s; } .hero-copy > :nth-child(3) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   BENTO
   ========================================================= */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 54px var(--gutter) 54px; }
.card { position: relative; overflow: hidden; border-radius: 40px; isolation: isolate; }
.h-card { font-family: var(--serif); font-size: 48px; line-height: 1; letter-spacing: -.045em; color: rgba(0,0,0,.72); }
.p-card { margin-top: 24px; max-width: 410px; font-size: 16px; line-height: 24px; font-weight: 300; color: var(--muted); }
.p-card.narrow { max-width: 305px; }
.card-b .h-card, .card-d .h-card { white-space: nowrap; }
.card-copy { position: relative; z-index: 2; padding: 0 40px 40px; }

/* A */
.card-a { grid-column: 1; grid-row: 1; min-height: 676px; display: flex; flex-direction: column; background: linear-gradient(165deg, #edf1f7 0%, #e9eef6 45%, #dce9fa 100%); }
.card-a .card-copy { padding-top: 28px; }
.stage-a { width: 668px; height: 440px; }
.blob-blue { position: absolute; left: 290px; top: 196px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(98,172,255,.55), rgba(140,195,255,.3) 45%, rgba(255,255,255,0) 70%); filter: blur(8px); }
.ask-panel { position: absolute; left: 157.5px; top: 44px; width: 331px; height: 383px; border-radius: 44px; background: linear-gradient(180deg, #fff 0%, #fff 62%, rgba(255,255,255,.55) 100%); box-shadow: 0 1px 2px rgba(0,0,0,.02); text-align: center; }
.ask-stamp { width: 107px; left: 92px; top: 9px; transform: rotate(-6deg); }
.sprig { position: absolute; left: 172px; top: 46px; width: 62px; height: 88px; background: url(/assets/sticker-sprite.webp) no-repeat; background-size: 451px 300px; background-position: -366px -163px; transform: rotate(12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.08)); }
.ask-title { position: absolute; left: 0; right: 0; top: 154px; font-family: var(--serif); font-size: 40px; line-height: 40px; letter-spacing: -.04em; color: #222; }
.ask-sub { position: absolute; left: 44px; right: 44px; top: 241px; font-size: 11px; line-height: 18px; color: rgba(0,0,0,.42); }
.float { animation: bob 6s ease-in-out infinite; }
.f2 { animation-delay: -1.5s; } .f3 { animation-delay: -3s; } .f4 { animation-delay: -4.5s; }
@keyframes bob { 50% { translate: 0 -5px; } }
.chat-field { position: absolute; left: 96px; top: 351px; width: 455px; height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 11px 0 32px; border-radius: 100px; background: rgba(255,255,255,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 -6px 5px rgba(255,255,255,.25), inset 0 5px 5px rgba(255,255,255,.25), var(--glass-shadow); transition: box-shadow .3s var(--ease), background-color .3s; }
.chat-field:focus-within { background: rgba(255,255,255,.85); }
.chat-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; letter-spacing: -.01em; color: #222; }
.chat-field input::placeholder { color: rgba(0,0,0,.45); }
.send { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); box-shadow: inset 0 .9px 10px 2px #d2eaff, 0 10px 24px rgba(87,177,255,.4), 0 3px 5px rgba(87,177,255,.2); transition: transform .25s var(--ease); }
.send img { filter: brightness(0) invert(1); }
.send:hover { transform: scale(1.05); }
.send:active { transform: scale(.94); }
.send.sm { width: 40px; height: 40px; }
.chat-field.sent .send { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(.88); } }

/* C */
.card-c { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; background: linear-gradient(180deg, #e8ecf2 0%, #eef1f5 55%, #f3f5f8 100%); }
.card-c .fit { margin-top: 67px; }
.card-c .card-copy { margin-top: auto; padding-top: 40px; }
.trip-plan { width: 440px; height: 724px; border-radius: 40px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 30px 60px rgba(120,135,160,.12); }
.overview { position: relative; height: 322px; color: #fff; text-align: center; }
.ov-bg { position: absolute; inset: 0; background: url(/assets/photo-fuji-pagoda.webp) 70% 40% / cover; filter: brightness(.42) saturate(.8); }
.ov-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,28,.35) 0%, rgba(10,22,28,0) 45%, rgba(255,255,255,0) 62%, #fff 96%); }
.overview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); }
.ov-title { position: relative; padding-top: 34px; font-family: var(--serif); font-size: 40px; line-height: 44px; letter-spacing: -.03em; }
.ov-stats { position: relative; display: flex; justify-content: center; align-items: center; gap: 52px; margin-top: 12px; }
.ov-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.ov-k { font-size: 13px; line-height: 18px; opacity: .9; }
.ov-v { font-family: var(--serif); font-size: 25px; line-height: 30px; letter-spacing: -.02em; margin-top: 2px; }
.ov-s { font-size: 13px; line-height: 16px; opacity: .9; }
.ov-div { width: 1px; height: 54px; background: rgba(255,255,255,.4); }
.ov-stamps { position: absolute; inset: 0; z-index: 2; }
.ps-1, .ps-2, .ps-3 { width: 125px; }
.ps-1 { left: 54px; top: 180px; transform: rotate(-8deg); }
.ps-2 { left: 156px; top: 165px; z-index: 1; }
.ps-3 { left: 263px; top: 185px; transform: rotate(7deg); }
.weather { position: absolute; z-index: 3; left: 145px; top: 262px; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 30px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #222; text-align: left; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.weather .sun { font-size: 22px; line-height: 1; }
.weather span:last-child { display: flex; flex-direction: column; font-size: 13px; line-height: 17px; color: rgba(0,0,0,.6); }
.weather b { font-weight: 400; font-size: 14px; color: #222; }
.itin { position: relative; padding: 14px 28px 0; }
.dash { width: 381px; height: 1.2px; }
.itin-title { margin-top: 20px; font-family: var(--serif); font-size: 27px; line-height: 32px; letter-spacing: -.03em; color: #222; }
.itin-sub { margin-top: 4px; font-size: 15px; color: rgba(0,0,0,.5); }
.tabs { display: flex; gap: 10px; margin-top: 16px; }
.tabs button { height: 36px; padding: 0 18px; border-radius: 100px; font-size: 16px; color: rgba(0,0,0,.45); border: 1px solid #e6e6e6; transition: background-color .25s, color .25s, border-color .25s; }
.tabs button[aria-selected="true"] { background: #efefef; border-color: #efefef; color: #222; }
.tabs button:hover { color: #222; }
.timeline { position: relative; list-style: none; margin: 26px 0 0; padding: 0; }
.timeline::before { content: ""; position: absolute; left: 81px; top: 22px; bottom: 26px; width: 1px; background: #e7e7e7; }
.timeline li { position: relative; display: grid; grid-template-columns: 70px 28px 1fr; align-items: start; min-height: 78px; animation: rowIn .45s var(--ease) both; }
.timeline li:nth-child(2) { animation-delay: .05s; } .timeline li:nth-child(3) { animation-delay: .1s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.tl-time { padding-top: 12px; font-size: 16px; color: #222; }
.tl-dot { position: relative; margin: 15px 0 0 4px; width: 10px; height: 10px; border-radius: 50%; background: #1f8bff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(31,139,255,.15); }
.tl-body { padding-top: 6px; }
.tl-title { font-size: 16px; line-height: 22px; color: #222; }
.tl-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: rgba(0,0,0,.45); }
.tl-sub i { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.3); }
.tl-sub img { width: 13px; height: 13px; opacity: .6; }
.tl-stamp { width: 82px; right: -4px; top: -4px; transform: rotate(5deg); }

/* B */
.card-b { grid-column: 1; grid-row: 2; min-height: 314px; background: linear-gradient(170deg, #e9ebf0, #eceef2); }
.card-b .card-copy { width: 331px; padding-top: 82px; }
.card-b .p-card { max-width: 217px; }
.fit-b { position: absolute; left: 47.5%; top: 60px; width: 394px; }
.stage-b { width: 394px; height: 254px; }
.banner { position: absolute; left: 0; top: 0; width: 394px; height: 189px; border-radius: 30px; background: #fff; overflow: visible; box-shadow: 0 10px 30px rgba(120,135,160,.12); }
.banner-ph { position: absolute; inset: 0; border-radius: 30px; background: url(/assets/photo-fuji-pagoda.webp) 30% 30% / cover; }
.banner-ph::after { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.88) 66%, #fff 88%); }
.banner-meta { position: absolute; left: 22px; top: 106px; }
.banner-meta h3 { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 36px; line-height: 40px; letter-spacing: -.04em; color: #1d1d1d; }
.flag { font-size: 22px; }
.banner-meta p { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: rgba(0,0,0,.45); }
.banner-meta p i, .hc-meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.28); }
.summer-stamp { width: 122px; left: 266px; top: 22px; transform: rotate(6deg); }
.summer-tag { position: absolute; left: 252px; top: 30px; z-index: 2; padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.9); font-family: var(--serif); font-size: 16px; color: #333; transform: rotate(-14deg); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.mini { position: absolute; top: 202px; width: 190px; height: 189px; border-radius: 30px; overflow: hidden; background: #fff; }
.mini-ph { position: absolute; inset: 0; background: center / cover; }
.m1 { left: 0; } .m2 { left: 203px; }
.m2 .mini-ph { filter: blur(6px); transform: scale(1.1); opacity: .8; }
.mini .pill-sm { left: auto; right: 14px; top: 13px; height: 32px; font-size: 13px; padding: 0 12px; }

/* D */
.row-3 { grid-column: 1 / span 2; display: grid; grid-template-columns: 841fr 495fr; gap: 24px; }
.card-d, .card-e { min-height: 368px; }
.card-d { display: flex; align-items: stretch; background: linear-gradient(170deg, #e9ebf1, #eef0f4); }
.card-d .card-copy.split { display: flex; flex-direction: column; justify-content: space-between; width: 371px; flex: none; padding: 40px; }
.card-d .p-card { max-width: 291px; }
.fit-d { flex: 1; min-width: 0; max-width: 480px; margin: 30px 0 0 -26px; }
.stage-d { width: 480px; height: 290px; }
.trip-card { position: absolute; width: 190px; height: 190px; border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 20px 40px rgba(120,135,160,.14); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.trip-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 55%); z-index: 1; }
.trip-card .stamp { width: 100px; }
.trip-card .st-a { left: 4px; top: 30px; transform: rotate(-6deg); }
.trip-card .st-b { left: 80px; top: 22px; transform: rotate(5deg); }
.tc-dots { position: absolute; z-index: 2; right: 16px; top: 9px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.05); }
.tc-dots img { width: 16px; height: 16px; opacity: .5; }
.tc-name { position: absolute; z-index: 2; left: 18px; bottom: 18px; font-family: var(--serif); font-size: 19px; line-height: 20px; letter-spacing: -.03em; color: #1d1d1d; }
.tc-name .emo { font-size: 16px; margin-left: 4px; }
.tc-1 { left: 5px; top: 48px; transform: rotate(-4deg); z-index: 1; }
.tc-3 { left: 278px; top: 24px; transform: rotate(5deg); z-index: 1; }
.tc-2 { left: 140px; top: 74px; transform: rotate(4deg); z-index: 2; }
.stage-d:hover .tc-1 { transform: rotate(-8deg) translate(-14px, -4px); }
.stage-d:hover .tc-3 { transform: rotate(9deg) translate(14px, -6px); }
.stage-d:hover .tc-2 { transform: rotate(2deg) translateY(-10px); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 30px 50px rgba(120,135,160,.2); }

/* E */
.card-e { display: flex; flex-direction: column; align-items: center; background: radial-gradient(120% 90% at 50% 110%, #6db7ff 0%, rgba(109,183,255,0) 60%), linear-gradient(165deg, #3a77f4 0%, #4c8ff6 55%, #5aa5f8 100%); color: #fff; text-align: center; }
.app-tile { display: grid; place-items: center; width: 148px; height: 148px; margin-top: 50px; border-radius: 38px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,238,255,.95)); box-shadow: inset 0 -4px 8px rgba(110,160,240,.25), 0 18px 40px rgba(20,60,160,.25); transition: transform .5s var(--ease); }
.app-tile img { width: 92px; height: 105px; transform: rotate(-8deg); }
.card-e:hover .app-tile { transform: translateY(-4px) rotate(-3deg); }
.e-title { margin-top: 24px; font-family: var(--serif); font-size: 48px; line-height: 48px; letter-spacing: -.045em; }

/* =========================================================
   APPROACH
   ========================================================= */
.approach { position: relative; background: var(--soft); border-radius: 60px 60px 0 0; padding: 126px var(--gutter) 120px; text-align: center; }
.eyebrow { font-size: 16px; letter-spacing: .01em; color: rgba(0,0,0,.5); }
.statement { max-width: 1130px; margin: 18px auto 0; font-family: var(--serif); font-size: 48px; line-height: 56px; letter-spacing: -.045em; color: rgba(0,0,0,.7); text-wrap: pretty; }
.btn-plus { margin-top: 56px; gap: 8px; padding: 0 12px; height: 44px; font-size: 13px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1120px; margin: 64px auto 0; text-align: left; }
.pillar-col { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.pillar { display: flex; flex-direction: column; justify-content: flex-end; min-height: 246px; padding: 24px; border-radius: 32px; background: #fff; }
.pillar.short { min-height: 140px; justify-content: flex-start; padding: 32px 32px 24px; }
.pillar h3 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -.01em; color: #111; }
.pillar p { margin-top: 12px; max-width: 290px; font-size: 14px; line-height: 22px; font-weight: 300; color: rgba(0,0,0,.6); }
.pillar.short p { margin-top: 8px; }
.avatars { display: flex; margin-bottom: auto; }
.avatars img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -18px; transition: transform .35s var(--ease); }
.avatars img:first-child { margin-left: -3px; }
.pillar:hover .avatars img:nth-child(2) { transform: translateX(4px); } .pillar:hover .avatars img:nth-child(3) { transform: translateX(8px); } .pillar:hover .avatars img:nth-child(4) { transform: translateX(12px); }
.clock { margin-bottom: auto; }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 90px; padding: 0 22px; border-radius: 32px; color: #fff; background: radial-gradient(90% 140% at 85% 120%, #6ec4ff 0%, rgba(110,196,255,0) 60%), linear-gradient(120deg, #3b7cf5, #4b97f8); }
.stat-n { font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-t { max-width: 180px; font-size: 16px; line-height: 26px; text-align: left; }

/* =========================================================
   DETAILS
   ========================================================= */
.details { display: grid; grid-template-columns: 496fr 746fr; gap: 25px; max-width: 1267px; margin: 0 auto; padding: 30px 0 124px; background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }
.d-left { position: relative; display: flex; flex-direction: column; min-height: 820px; padding: 34px 32px 34px; border-radius: 40px; background: linear-gradient(180deg, #f8f9fe 0%, #edf1fc 45%, #e3eafb 100%); }
.h-sec { font-family: var(--serif); font-size: 40px; line-height: 56px; letter-spacing: -.045em; color: rgba(0,0,0,.72); }
.h-sec.center { text-align: center; font-size: 48px; }
.d-left .h-sec { max-width: 400px; }
.map-sticker { position: relative; width: 200px; height: 190px; margin: auto 0 48px 26px; }
.map-img { position: absolute; inset: 0; border-radius: 14px; background: url(/assets/map-central-park.webp) center / cover; }
.map-sticker .map-img { left: 6px; top: 46px; width: 180px; height: 154px; border: 4px solid #fff; transform: rotate(-12deg); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.map-pin { position: absolute; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ff8a87, #f04a4a 70%); box-shadow: inset 0 0 5px rgba(248,111,110,.9), 0 0 0 3px rgba(255,255,255,.9), 0 8px 20px rgba(240,74,74,.3); }
.map-pin.big { left: 100px; top: 0; width: 88px; height: 88px; animation: pinBob 4s ease-in-out infinite; }
.map-pin.big img { width: 52px; height: 52px; }
@keyframes pinBob { 50% { translate: 0 -6px; } }
.p-card.dark { max-width: 400px; margin-top: 0; font-size: 15px; line-height: 22px; font-weight: 400; color: rgba(0,0,0,.6); }

.d-right { position: relative; min-height: 820px; border-radius: 40px; overflow: hidden; background: radial-gradient(70% 60% at 100% 100%, #e3e3e3 0%, rgba(227,227,227,0) 70%), #fff; }
.fit-phone { position: absolute; left: 50%; top: -40px; width: 384px; transform: translateX(-50%); }

/* phone */
.phone { width: 384px; height: 760px; border-radius: 64px; padding: 10px; background: #111; box-shadow: inset 0 0 0 2px #3a3a3a, inset 0 0 0 4px #0b0b0b, 0 0 0 1.5px #c9c9c9, 0 0 0 3px #e9e9e9, 0 30px 60px rgba(0,0,0,.12); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 54px; overflow: hidden; background: #edeef0; }
.hw { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #bbb, #eee); }
.hw-act { left: -4px; top: 130px; height: 34px; } .hw-vu { left: -4px; top: 190px; height: 60px; } .hw-vd { left: -4px; top: 262px; height: 60px; } .hw-pow { right: -4px; top: 220px; height: 96px; }
.phone-d .screen { padding-top: 48px; }
.slides { position: relative; height: 548px; margin: 0 8px; }
.slide { position: absolute; inset: 0; border-radius: 32px; background: #fff; overflow: hidden; opacity: 0; transform: scale(.98); transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: none; }
.slide.on { opacity: 1; transform: none; pointer-events: auto; }
.sl-hero { position: relative; height: 270px; }
.sl-ph { position: absolute; inset: 0; background: center / cover; }
.sl-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.75) 78%, #fff 100%); }
.circle-btn { position: absolute; top: 16px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.circle-btn.l { left: 16px; } .circle-btn.r { right: 16px; }
.circle-btn img { width: 16px; height: 16px; }
.sl-title { position: absolute; left: 18px; top: 196px; z-index: 2; max-width: 200px; font-family: var(--serif); font-size: 29px; line-height: 29px; letter-spacing: -.03em; color: #1d1d1d; }
.sl-meta { display: flex; align-items: center; gap: 6px; padding: 8px 18px 0; font-size: 11px; color: rgba(0,0,0,.5); }
.sl-meta img { width: 11px; height: 11px; opacity: .7; }
.sl-meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.28); }
.map-mini { position: absolute; z-index: 3; right: 22px; top: 186px; width: 84px; height: 78px; }
.map-mini .map-img { inset: 4px 0 0 0; border: 3px solid #fff; border-radius: 10px; transform: rotate(-12deg); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.map-mini .map-pin { right: -6px; top: -12px; width: 40px; height: 40px; box-shadow: inset 0 0 5px rgba(248,111,110,.9), 0 0 0 2px #fff, 0 4px 12px rgba(240,74,74,.3); }
.map-mini .map-pin img { width: 26px; height: 26px; }
.sl-desc { padding: 28px 22px 0; font-size: 12.7px; line-height: 19px; text-align: center; color: rgba(0,0,0,.55); }
.sl-price { margin-top: 22px; text-align: center; }
.sl-price small { display: block; font-size: 11px; color: rgba(0,0,0,.8); }
.sl-price b { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 32px; letter-spacing: -.02em; color: #111; }
.sl-price span { font-size: 11px; color: rgba(0,0,0,.7); }
.sl-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.act { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 100px; font-size: 11px; font-weight: 500; color: rgba(0,0,0,.6); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04); }
.act img { width: 18px; height: 18px; }
.act.blue { color: #fff; background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); box-shadow: inset 0 .9px 8px 2px #d2eaff, 0 8px 18px rgba(87,177,255,.35); }
.act.blue img { filter: brightness(0) invert(1); }
.chips { display: flex; gap: 8px; padding: 14px 0 0 8px; overflow: hidden; }
.chips span { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 16px 0 14px; border-radius: 100px; background: rgba(255,255,255,.75); font-size: 15px; color: #222; white-space: nowrap; }
.chips img { width: 20px; height: 20px; }
.chips span:first-child { font-size: 17px; }
.ask-field { display: flex; align-items: center; gap: 10px; height: 56px; margin: 12px 8px 0; padding: 0 8px 0 24px; border-radius: 100px; background: rgba(255,255,255,.8); font-size: 13px; color: rgba(0,0,0,.6); }
.ask-field span:not(.send) { flex: 1; }
.carousel-ctl { position: absolute; right: 32px; bottom: 32px; display: flex; align-items: center; gap: 18px; }
.round { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--glass-shadow), 0 2px 6px rgba(0,0,0,.05); transition: transform .25s var(--ease), opacity .2s; }
.round:hover { transform: scale(1.06); }
.round:active { transform: scale(.94); }
.round[disabled] { opacity: .45; cursor: default; transform: none; }
.dots { display: flex; align-items: center; gap: 4px; }
.dots button { width: 6px; height: 6px; border-radius: 6px; background: rgba(0,0,0,.14); transition: width .4s var(--ease), background-color .3s; }
.dots button[aria-selected="true"] { width: 28px; background: #1f8bff; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--soft); padding: 0 var(--gutter) 140px; text-align: center; }
.faq-list { max-width: 886px; margin: 70px auto 0; text-align: left; }
.qa { border-radius: 32px; border: 1px solid transparent; transition: background-color .35s, box-shadow .35s, border-color .35s; }
.qa[open] { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.95); box-shadow: inset 0 -4px 8px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.03), var(--glass-shadow); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 91px; padding: 0 32px 0 30px; list-style: none; cursor: pointer; font-size: 20px; line-height: 28px; color: #111; letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary img { flex: none; transform: rotate(90deg); transition: transform .4s var(--ease); }
.qa[open] summary img { transform: rotate(0deg); }
.qa[open] summary { min-height: 76px; padding-top: 2px; }
.ans { overflow: hidden; }
.ans p { padding: 0 32px 30px 30px; font-size: 16px; line-height: 22px; font-weight: 300; color: #111; }
.qa summary:hover { color: #000; }
.faq-more { max-width: 886px; margin: 34px auto 0; text-align: left; font-size: 16px; font-weight: 300; color: #111; }
.faq-more a { margin-left: 8px; color: #3ba7ff; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* =========================================================
   CTA
   ========================================================= */
.cta { position: relative; overflow: hidden; padding: 50px 16px 0; text-align: center; border-radius: 60px 60px 0 0; background: linear-gradient(180deg, #d3dff0 0%, #e3eaf5 40%, #f6f8fb 72%, #fff 100%); margin-top: -60px; }
.cta-title { margin-top: 20px; font-size: 84px; line-height: 78px; }
.cta-btns { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
.fit-cta { max-width: 680px; margin: 86px auto 0; }
.stage-cta { width: 680px; height: 520px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.phone-c { position: absolute; left: 152px; top: 0; height: 720px; width: 378px; }
.phone-c .screen { background: linear-gradient(180deg, #f2f3f5, #fff); }
.status { position: relative; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; filter: blur(3px); opacity: .7; }
.status .t { font-size: 16px; font-weight: 500; }
.status .island { position: absolute; left: 50%; top: 12px; width: 113px; height: 32px; transform: translateX(-50%); filter: blur(0); }
.status .icons { width: 65px; height: 13.5px; }
.hotel-card { position: relative; margin: 30px 10px 0; height: 600px; border-radius: 32px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.hc-hero { position: relative; height: 300px; }
.hc-ph { position: absolute; inset: 0; background: url(/assets/photo-hotel-room.webp) 50% 40% / cover; }
.hc-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.8) 85%, #fff); }
.hc-title { position: absolute; left: 18px; top: 196px; font-family: var(--serif); font-size: 31px; line-height: 30px; letter-spacing: -.03em; color: #1d1d1d; text-align: left; }
.hc-meta { position: absolute; left: 18px; top: 268px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(0,0,0,.5); }
.hc-meta img { width: 11px; height: 11px; opacity: .7; }
.phone-c .map-mini { right: auto; left: 222px; top: 170px; }
.hc-desc { padding: 22px 30px 0; font-size: 13px; line-height: 19px; color: rgba(0,0,0,.45); }
.chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 18px; border-radius: 100px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 -6px 5px rgba(255,255,255,.25), var(--glass-shadow), 0 2px 6px rgba(0,0,0,.04); font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: #1d1d1d; white-space: nowrap; animation: bob 7s ease-in-out infinite; }
.chip img { width: 22px; height: 22px; }
.cc-1 { left: 36px; top: 153px; }
.cc-2 { left: 40px; top: 262px; height: 46px; font-size: 17px; animation-delay: -2.3s; }
.cc-3 { left: 476px; top: 319px; animation-delay: -4.6s; }
.fall-stamp { z-index: 2; width: 150px; left: 452px; top: 30px; transform: rotate(12deg); }
.fall-tag { position: absolute; z-index: 3; left: 548px; top: 36px; padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,.92); font-family: var(--serif); font-size: 18px; transform: rotate(32deg); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.sakura { position: absolute; z-index: 3; left: 76px; top: 352px; width: 160px; height: 116px; background: url(/assets/sticker-sakura.webp) center / contain no-repeat; animation: sway 8s ease-in-out infinite; transform-origin: 40% 60%; }
@keyframes sway { 50% { rotate: 6deg; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { padding: 30px 56px 50px 76px; background: #fff; }
.f-top { display: flex; justify-content: space-between; gap: 48px; }
.f-logo { width: 168px; height: 50px; }
.f-brand p { margin-top: 4px; font-size: 15px; font-weight: 300; color: rgba(0,0,0,.55); }
.subscribe { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.field { display: flex; align-items: center; gap: 10px; width: 314px; height: 46px; padding: 0 20px 0 24px; border-radius: 100px; background: #fff; border: 1px solid rgba(0,0,0,.04); box-shadow: inset 0 -4px 6px rgba(0,0,0,.01), var(--glass-shadow), 0 2px 6px rgba(0,0,0,.04); transition: box-shadow .25s; }
.field:focus-within { box-shadow: 0 0 0 3px rgba(31,139,255,.18), var(--glass-shadow); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 300; }
.field input::placeholder { color: rgba(0,0,0,.45); }
.subscribe .btn { padding: 0 12px; height: 44px; font-size: 13px; }
.sub-msg { position: absolute; left: 24px; top: calc(100% + 10px); font-size: 13px; color: rgba(0,0,0,.6); }
.sub-msg.ok { color: #0f8a5f; } .sub-msg.err { color: #d0473f; }
.subscribe.shake .field { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.f-cols { display: flex; gap: 0; }
.f-cols > div { display: flex; flex-direction: column; width: 177px; }
.f-cols > div:last-child { width: auto; }
.f-cols h4 { font-size: 18px; color: #111; margin-bottom: 10px; }
.f-cols a { padding: 6px 0; font-size: 15px; font-weight: 300; color: rgba(0,0,0,.45); transition: color .2s; }
.f-cols a:hover { color: #111; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 76px; font-size: 15px; font-weight: 300; color: rgba(0,0,0,.55); }
.f-legal { display: flex; gap: 40px; }
.f-legal a:hover { color: #111; }
.totop { color: #0f8a7e; font-weight: 400; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) {
  .nav { padding: 0 40px; }
  .nav-links { gap: 36px; font-size: 17px; }
  .display { font-size: 76px; }
  .cta-title { font-size: 72px; line-height: 68px; }
  .statement { font-size: 42px; line-height: 50px; }
  .details { padding-left: var(--gutter); padding-right: var(--gutter); }
  .footer { padding-left: 40px; padding-right: 40px; }
  .f-cols > div { width: 140px; }
  .h-card { font-size: 42px; }
  .card-b .card-copy { width: 300px; }
  .card-b .h-card { font-size: 38px; }
  .fit-b { left: max(47.5%, 300px); }
  .card-d .card-copy.split { width: 340px; }
}

@media (max-width: 960px) {
  :root { --gutter: 16px; }
  .nav { height: 80px; padding: 0 16px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .hero { min-height: 0; padding-bottom: 64px; }
  .hero-stamps { width: auto; max-width: 476px; margin: 48px auto 0; padding: 0 16px; }
  .display { font-size: 60px; }
  .bento { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; padding-bottom: 56px; }
  .card-a, .card-b, .card-c, .row-3 { grid-column: 1; grid-row: auto; }
  .row-3 { grid-template-columns: 1fr; gap: 16px; }
  .card { border-radius: 32px; }
  .card-a { min-height: 0; }
  .card-c .card-copy { padding-top: 32px; }
  .card-c .fit { margin-top: 32px; padding: 0 16px; }
  .card-b { display: flex; flex-direction: column; min-height: 0; }
  .card-b .card-copy { width: auto; padding-top: 40px; }
  .card-b .p-card { max-width: 300px; }
  .fit-b { position: relative; left: auto; top: auto; width: auto; margin: 28px 24px -40px; }
  .fit-b .stage { margin: 0 auto; }
  .card-b .h-card { font-size: 42px; }
  .card-d { flex-direction: column; }
  .card-d .card-copy.split { width: auto; gap: 16px; }
  .fit-d { max-width: none; margin: 0 0 24px; padding: 0 16px; }
  .fit-d .stage-d { margin: 0 auto; }
  .card-e { padding-bottom: 48px; }
  .approach { border-radius: 40px 40px 0 0; padding: 80px 16px 72px; }
  .statement { font-size: 34px; line-height: 40px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 220px; }
  .details { grid-template-columns: 1fr; gap: 16px; padding: 8px 16px 72px; }
  .d-left { min-height: 0; padding: 32px 24px; }
  .map-sticker { margin: 40px auto 40px; }
  .d-right { min-height: 0; padding-bottom: 92px; }
  .fit-phone { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -40px 16px 0; }
  .fit-phone .stage { margin: 0 auto; }
  .carousel-ctl { left: 0; right: 0; bottom: 24px; justify-content: center; }
  .faq { padding-bottom: 104px; }
  .faq-list { margin-top: 40px; }
  .qa summary { min-height: 76px; padding: 0 20px; font-size: 18px; }
  .ans p { padding: 0 20px 24px; }
  .cta { border-radius: 40px 40px 0 0; padding-top: 48px; }
  .cta-title { font-size: 56px; line-height: 54px; }
  .fit-cta { margin-top: 56px; }
  .footer { padding: 32px 16px 40px; }
  .f-top { flex-direction: column; gap: 56px; }
  .f-cols > div { width: 33.3%; }
  .f-cols > div:last-child { width: 33.3%; }
}

@media (max-width: 560px) {
  .display { font-size: 44px; line-height: .95; }
  .lede { margin-top: 22px; }
  .h-card, .card-b .h-card { font-size: 38px; }
  .card-copy { padding: 0 24px 28px; }
  .card-a .card-copy { padding-top: 20px; }
  .card-b .card-copy { padding-top: 32px; }
  .card-d .card-copy.split { padding: 28px 24px 8px; }
  .p-card { font-size: 15px; line-height: 22px; margin-top: 16px; }
  .e-title { font-size: 40px; line-height: 40px; }
  .statement { font-size: 28px; line-height: 34px; }
  .eyebrow { font-size: 14px; }
  .h-sec { font-size: 34px; line-height: 42px; }
  .h-sec.center { font-size: 36px; line-height: 40px; }
  .cta-title { font-size: 42px; line-height: 42px; }
  .cta-btns { gap: 10px; }
  .stat-t { font-size: 14px; line-height: 20px; }
  .subscribe { flex-wrap: wrap; gap: 10px; }
  .field { flex: 1 1 180px; width: auto; }
  .sub-msg { position: static; width: 100%; padding-left: 4px; }
  .f-bottom { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 48px; }
  .f-legal { gap: 20px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* waitlist-first hero */
.soon-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:500;color:rgba(0,0,0,.7);box-shadow:var(--glass-shadow);margin-bottom:18px}
.soon-pill i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:soonPulse 2s infinite}
@keyframes soonPulse{50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)}}
.hero-sub{justify-content:center;margin:28px auto 0}
.hero-sub .sub-msg{left:0;right:0;text-align:center}
.hero-sub .btn{height:46px;padding:0 20px;font-size:14px}
.subscribe.done .field{box-shadow:0 0 0 3px rgba(15,138,95,.2),var(--glass-shadow)}
@media (max-width:640px){.hero-sub{flex-direction:column;align-items:stretch;width:100%;max-width:340px}.hero-sub .field{width:100%;height:52px;flex:none}.hero-sub .btn{width:100%;height:52px;justify-content:center;flex:none}.hero-sub .sub-msg{position:static;margin-top:4px}}