:root { --bg:#f8f9f6; --wrap:1160px; --ink:#17231c; --text2:#687069; --line:#e3e8df; }
body { overflow-x:clip; }
.top { background:rgba(248,249,246,.84); }
.top .btn.sm { border-radius:999px; background:var(--ink); }
.h1,.h2 { font-weight:760; letter-spacing:-.055em; }
.eyebrow { font-size:14px; letter-spacing:.025em; }
.h2 { font-size:clamp(38px,4.25vw,62px); line-height:1.15; }
.stores .btn { border-radius:999px; font-size:15px; height:50px; padding-inline:22px; }
.section-label { display:flex; align-items:center; gap:12px; color:var(--text2); font-size:13px; font-weight:600; margin-bottom:24px; }
.section-label::before { content:''; width:7px; height:7px; background:var(--accent); border-radius:50%; }
/* 히어로: 실제 게시물 사진이 가운데서 터지듯 흩어져 떠다니다(사진마다 핀과 카테고리가 톡톡 뜬다),
   스크롤하면 곡선을 그리며 날아가 원형 지도 마커로 바뀌고, 아래에서 3D로 일어서는 휴대폰의 스퀘어 지도 위에 내려앉는다. */
.hero { position:relative; }
.hero-stage { height:100svh; position:relative; overflow:clip; isolation:isolate; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 50%,#000 18%,transparent 78%); mask-image:radial-gradient(ellipse 72% 64% at 50% 50%,#000 18%,transparent 78%); will-change:transform; }
.hero-bg::before { content:''; position:absolute; inset:-64px; background-image:radial-gradient(#c9d2c5 1.3px,transparent 1.7px); background-size:32px 32px; animation:dots 16s linear infinite paused; }
.hero.running .hero-bg::before { animation-play-state:running; }
@keyframes dots { to { transform:translate3d(32px,32px,0); } }
.hero-photos { position:absolute; inset:0; z-index:3; }
.hero-copy { position:absolute; z-index:8; left:50%; top:47%; width:max-content; max-width:calc(100% - 36px); text-align:center; transform:translate(-50%,-50%); will-change:transform,opacity; }
.hero-copy .eyebrow { color:#5f6f65; margin-bottom:22px; animation:fade-up .8s var(--ease) .1s both; }
.hero-copy h1 { font-size:clamp(48px,5.6vw,84px); line-height:1.1; }
.hero-copy .ln { display:block; overflow:hidden; padding:0 .04em .08em; }
.hero-copy .ln > span { display:inline-block; animation:line-up 1.05s var(--ease) both; }
.hero-copy .ln:nth-child(1) > span { animation-delay:.16s; }
.hero-copy .ln:nth-child(2) > span { animation-delay:.3s; }
.hero-copy em { position:relative; font-style:normal; color:var(--accent); }
.hero-copy em::after { content:''; position:absolute; left:-.03em; right:-.03em; bottom:.04em; height:.13em; border-radius:.07em; background:var(--accent); opacity:.2; transform-origin:left; animation:underline .9s var(--ease) 1.05s both; }
.hero-copy .lead { margin-top:22px; font-size:18px; animation:fade-up .8s var(--ease) .5s both; }
.hero-copy .stores { margin-top:30px; justify-content:center; animation:fade-up .8s var(--ease) .62s both; }
@keyframes line-up { from { transform:translateY(108%) rotate(3deg); } }
@keyframes fade-up { from { opacity:0; transform:translateY(16px); } }
@keyframes underline { from { transform:scaleX(0); } }
.hero-note { position:absolute; bottom:18px; left:50%; z-index:8; transform:translateX(-50%); transition:opacity .35s, transform .45s var(--ease); }
.hero-note.gone { opacity:0; transform:translate(-50%,12px); }
.hero-note > span { display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.92); box-shadow:0 6px 18px #1e302c14; font-size:13px; color:#5d665f; white-space:nowrap; animation:fade-up .8s var(--ease) 1.2s both; }
.hero-note svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateY(4px); } }
.flight { position:absolute; left:50%; top:50%; width:var(--size); aspect-ratio:1; opacity:0; will-change:transform,opacity; }
.flight img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-card { position:absolute; inset:0; overflow:hidden; border-radius:max(14px,calc(var(--size) * .15)); background:#dfe5dc; box-shadow:0 18px 40px -16px #1e302c59; }
.idle .photo-card { cursor:pointer; }
/* 날아가는 동안 사진 카드가 그대로 둥글어지며 흰 테두리를 두른 지도 마커가 된다. 꼬리는 마지막에 나온다. */
.tail { position:absolute; left:39%; bottom:-14%; width:22%; aspect-ratio:1; background:#fff; transform:rotate(45deg); opacity:0; }
.ring { position:absolute; inset:-8%; border:calc(var(--size) * .05) solid var(--accent); border-radius:50%; opacity:0; pointer-events:none; }
.pin { position:absolute; z-index:2; left:50%; top:0; display:grid; place-items:center; width:36px; height:36px; margin-left:-18px; border-radius:50%; background:#fff; color:var(--accent); box-shadow:0 8px 18px #182b2833; opacity:0; transform:translateY(-120%) scale(.3); transition:transform .35s, opacity .2s; pointer-events:none; }
.pin svg { width:20px; height:20px; fill:currentColor; }
.cat { position:absolute; z-index:2; left:50%; bottom:0; padding:6px 13px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:650; letter-spacing:-.02em; white-space:nowrap; opacity:0; transform:translate(-50%,40%) scale(.8); transition:transform .3s, opacity .2s; pointer-events:none; }
.flight.pop .pin { opacity:1; transform:translateY(-62%) scale(1); transition:transform .7s cubic-bezier(.3,1.8,.5,1), opacity .15s; }
.flight.pop .cat { opacity:1; transform:translate(-50%,55%) scale(1); transition:transform .55s cubic-bezier(.3,1.6,.5,1) .12s, opacity .2s .12s; }
.flight.pop .photo-card { box-shadow:0 0 0 4px #fff, 0 26px 48px -14px #1e302c73; }
.hero-device { position:absolute; z-index:2; left:50%; top:48%; opacity:0; transform:translate(-50%,-50%); will-change:transform,opacity; }
.hero-device::before { content:''; position:absolute; z-index:-1; inset:-28% -60%; background:radial-gradient(closest-side,rgba(20,115,230,.2),rgba(20,115,230,0)); opacity:var(--glow,0); transform:scale(calc(.7 + var(--glow,0) * .3)); }
.hero-device .phone { --w:clamp(240px,calc((100svh - 210px) / 2.17),320px); }
.hero-device .sweep { background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%); opacity:0; transform:translateX(-130%); pointer-events:none; }
/* 다 모인 뒤: 피드와 같은 2단 그리드(.wrap.feed-grid). 휴대폰은 피드 휴대폰 자리(오른쪽 열)로 비켜서고 왼쪽 열에 글이 들어온다.
   모바일은 글이 위, 휴대폰이 그 아래로 내려간다. 비켜설 거리는 스크립트의 measure()가 잰다. */
.hero-end { position:absolute; inset:0; z-index:9; padding:92px 0 44px; pointer-events:none; visibility:hidden; transition:visibility 0s .4s; }
.hero-end.done { visibility:visible; transition-delay:0s; }
.hero-end .stores { margin-top:34px; pointer-events:auto; }
.hero-end .meta { margin-top:18px; font-size:14px; color:var(--text2); }
@media (min-width:861px) { .hero-device { top:calc(50% + 24px); } }
.feed { background:#eef2eb; position:relative; }
.feed-stage { position:relative; height:100svh; min-height:620px; display:flex; align-items:center; padding:92px 0 44px; overflow:clip; }
.feed-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:72px; }
.feature-copy .lead { margin-top:26px; max-width:25em; }
.feed-tabs { --w:300px; margin:28px 0 24px; }
.feed-tabs span { transition:transform .45s; box-shadow:none; }
.feed-tabs span.on { transform:translateY(-4px); }
.location-copy { font-size:14px; line-height:1.7; color:var(--text2); max-width:28em; }
.location-copy b { color:var(--ink); font-weight:650; }
.feed-visual { position:relative; width:max-content; justify-self:center; padding-right:50px; }
.feed-visual .phone { --w:clamp(200px,calc((100svh - 175px) / 2.17),315px); transform:rotate(-3deg); }
.location-fragment { position:absolute; z-index:4; width:275px; right:-75px; bottom:10%; transform:rotate(3deg); }
.feed-trail { position:absolute; left:-52px; top:22%; display:grid; gap:17px; }
.feed-trail img { width:67px; height:67px; object-fit:cover; border-radius:50%; border:4px solid white; box-shadow:0 12px 24px #243b2720; }
.feed-trail img:nth-child(2) { transform:translateX(-18px); }
.swipe-cue { position:absolute; right:20px; top:22%; display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--ink); color:white; border-radius:999px; font-size:13px; z-index:5; }
.swipe-cue svg { width:15px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.square { padding:112px 0 120px; background:#fff; overflow:clip; }
.square-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:100px; }
.square .lead { font-size:17px; margin-top:22px; max-width:26em; }
.category-chips { --w:300px; gap:8px; margin:28px 0 22px; }
.category-chips button { padding:.64em 1.05em; border-radius:999px; background:#f0f3ed; font-size:15px; transition:transform .25s; white-space:nowrap; }
.category-chips button.on { background:var(--ink); color:white; transform:translateY(-2px); }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); gap:12px; height:290px; transition:opacity .18s,transform .28s; }
.photo-grid.changing { opacity:0; transform:translateY(8px) scale(.98); }
.photo-grid figure { overflow:hidden; border-radius:20px; position:relative; }
.photo-grid img { width:100%; height:100%; object-fit:cover; }
.gallery-note { font-size:12px; color:var(--text3); margin-top:13px; }
.square-visual { position:relative; justify-self:center; --w:300px; }
.square-visual .phone { --w:300px; transform:rotate(4deg); }
.square-visual .count { position:absolute; left:-45px; bottom:23%; z-index:2; transform:translateY(25px) scale(.85); opacity:0; transition:transform .8s var(--ease),opacity .8s; }
.square.live .count { opacity:1; transform:rotate(-4deg); transition-delay:.75s; }
.channel { padding:120px 0 140px; background:#eaf1f5; overflow:clip; }
.channel-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:54px; }
.channel .lead { font-size:17px; }
.channel-actions { margin-top:24px; font-size:15px; line-height:1.7; color:var(--text2); }
.channel-actions b { color:var(--ink); font-weight:650; }
.channel-visual { display:flex; align-items:center; position:relative; min-height:620px; }
.channel-visual .phone:first-child { --w:265px; transform:translateY(-28px) rotate(-6deg); z-index:2; }
.channel-visual .phone:nth-child(2) { --w:235px; margin-left:-38px; transform:translateY(42px) rotate(7deg); }
.channel.live .channel-visual .phone:first-child { animation:channel-in 1.1s var(--ease) .1s both; }
.channel.live .channel-visual .phone:nth-child(2) { animation:channel-detail 1.3s var(--ease) .25s both; }
@keyframes channel-in { from { transform:translateY(80px) rotate(-15deg); opacity:0; } to { transform:translateY(-28px) rotate(-6deg); opacity:1; } }
@keyframes channel-detail { from { transform:translateY(110px) rotate(15deg); opacity:0; } to { transform:translateY(42px) rotate(7deg); opacity:1; } }
.more { padding:100px 0 70px; }
.more-intro { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:30px; gap:24px; }
.more-intro h2 { font-size:32px; letter-spacing:-.045em; }
.more-intro p { font-size:15px; color:var(--text2); }
.extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.extra { min-height:360px; padding:34px; border-radius:28px; background:#e9eddf; position:relative; overflow:hidden; }
.extra h3 { font-size:25px; letter-spacing:-.045em; margin:9px 0 15px; }
.extra p { font-size:14px; line-height:1.7; color:var(--text2); max-width:17em; }
.extra .tag { font-size:12px; color:#77806e; }
.travel-extra .phone { --w:180px; position:absolute; right:25px; bottom:-140px; transform:rotate(8deg); }
.travel-extra p { max-width:15em; }
.chat-extra { background:#e8edf2; }
.chat-extra .cut { position:absolute; width:300px; right:26px; bottom:28px; transform:rotate(-4deg); }
.trust { margin-top:40px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:24px; font-size:12px; color:var(--text2); }
.trust span { display:flex; align-items:center; gap:8px; }
.trust svg { width:20px; height:20px; flex:none; color:#71806d; }
.download { min-height:660px; position:relative; display:grid; place-items:center; isolation:isolate; overflow:hidden; padding:62px 0; background:#fff; }
.download .wrap { width:min(580px,calc(100% - 40px)); text-align:center; z-index:2; padding:38px 24px; border-radius:36px; background:rgba(255,255,255,.96); }
.download .h2 { font-size:54px; }
.download .lead { font-size:16px; margin-top:20px; }
.download .stores,.download .qr { justify-content:center; margin-top:27px; }
.download .qr { text-align:left; }
.photo-marquees { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-around; transform:rotate(-8deg) scale(1.1); opacity:.8; z-index:-1; }
.marquee { display:flex; width:max-content; animation:marquee 75s linear infinite; animation-play-state:paused; }
.marquee:nth-child(2) { animation-direction:reverse; animation-duration:90s; }
.running .marquee { animation-play-state:running; }
.marquee-set { display:flex; gap:20px; padding-right:20px; }
.marquee img { width:170px; height:170px; border-radius:22px; object-fit:cover; }
@keyframes marquee { to { transform:translateX(-50%); } }
.foot { background:#f0f3ed; }
.foot .wrap { gap:24px; }
.foot .company { font-size:12px; }
.foot .note { max-width:350px; font-size:12px; }
/* 데스크톱: 섹션 하나가 화면 하나. 스크롤 한 번에 다음 섹션으로 넘어가므로 높이에 맞춰 줄어든다 */
@media (min-width:861px) {
  .square,.channel,.more { min-height:100svh; display:grid; align-content:center; padding:84px 0 36px; }
  .download { min-height:calc(100svh - var(--foot,161px)); padding:72px 0 12px; }
  .square-visual .phone { --w:clamp(220px,calc((100svh - 150px) / 2.17),300px); }
  .photo-grid { height:clamp(170px,calc(100svh - 560px),290px); }
  .channel-visual { min-height:0; padding-block:56px; }
  .channel-visual .phone:first-child { --w:clamp(190px,calc((100svh - 240px) / 2.17),265px); }
  .channel-visual .phone:nth-child(2) { --w:clamp(170px,calc((100svh - 240px) / 2.44),235px); }
}
/* 섹션 등장: 섹션이 화면에 들어오면(.live) 글이 한 줄씩, 휴대폰·사진·카드가 차례로 들어온다.
   화면에서 완전히 벗어나면 .live가 빠져 처음 상태로 돌아가므로, 위로 되돌아가도 다시 재생된다. */
@media (prefers-reduced-motion:no-preference) {
  .feature-copy > *,.more-intro > *,.download .wrap,.download .wrap > *,.extra,.trust,.photo-grid figure,.photo-marquees,
  .feed-visual .phone,.square-visual .phone,.feed-trail img,.swipe-cue,.location-fragment,.travel-extra .phone,.chat-extra .cut {
    transition:opacity .7s var(--ease),translate .95s var(--ease),rotate .95s var(--ease),scale .7s cubic-bezier(.3,1.45,.5,1); }
  section:not(.live) :is(.feature-copy > *,.more-intro > *,.download .wrap > *) { opacity:0; translate:0 34px; }
  .feed:not(.live) .feed-visual .phone,.square:not(.live) .square-visual .phone { opacity:0; translate:0 130px; rotate:7deg; }
  .feed:not(.live) .feed-trail img { opacity:0; scale:.3; }
  .feed:not(.live) .swipe-cue { opacity:0; translate:36px 0; }
  .feed:not(.live) .location-fragment { opacity:0; translate:0 80px; }
  .square:not(.live) .photo-grid figure { opacity:0; scale:.8; }
  .channel:not(.live) .channel-visual .phone { opacity:0; }
  .more:not(.live) :is(.extra,.trust) { opacity:0; translate:0 56px; }
  .more:not(.live) .travel-extra .phone { translate:0 140px; }
  .more:not(.live) .chat-extra .cut { opacity:0; scale:.8; }
  .download:not(.live) .wrap { opacity:0; scale:.92; }
  .download:not(.live) .photo-marquees { opacity:0; }
  .live :is(.feature-copy,.more-intro,.download .wrap) > :nth-child(2) { transition-delay:.08s; }
  .live :is(.feature-copy,.more-intro,.download .wrap) > :nth-child(3) { transition-delay:.16s; }
  .live :is(.feature-copy,.more-intro,.download .wrap) > :nth-child(4) { transition-delay:.24s; }
  .live :is(.feature-copy,.more-intro,.download .wrap) > :nth-child(5) { transition-delay:.32s; }
  .live :is(.feature-copy,.more-intro,.download .wrap) > :nth-child(6) { transition-delay:.4s; }
  .live :is(.feed-visual,.square-visual) .phone { transition-delay:.1s; }
  .live .feed-trail img:nth-child(1) { transition-delay:.45s; }
  .live .feed-trail img:nth-child(2) { transition-delay:.55s; }
  .live .feed-trail img:nth-child(3) { transition-delay:.65s; }
  .live .location-fragment { transition-delay:.6s; }
  .live .swipe-cue { transition-delay:.8s; }
  .hero.live .hero-end:not(.done) .feature-copy > * { opacity:0; translate:0 34px; transition-duration:.3s; transition-delay:0s; }
  .live .photo-grid figure:nth-child(1) { transition-delay:.3s; }
  .live .photo-grid figure:nth-child(2) { transition-delay:.36s; }
  .live .photo-grid figure:nth-child(3) { transition-delay:.42s; }
  .live .photo-grid figure:nth-child(4) { transition-delay:.48s; }
  .live .photo-grid figure:nth-child(5) { transition-delay:.54s; }
  .live .photo-grid figure:nth-child(6) { transition-delay:.6s; }
  .live .extra:nth-child(2) { transition-delay:.12s; }
  .live .trust { transition-delay:.3s; }
  .live .travel-extra .phone { transition-delay:.35s; }
  .live .chat-extra .cut { transition-delay:.5s; }
  /* 머무는 동안: 피드 옆 사진 자취와 안내가 넘기는 손짓처럼 오르내린다 */
  .feed.live .feed-trail { animation:bob 3.4s ease-in-out 1.3s infinite alternate; }
  .feed.live .swipe-cue { animation:bob 2.6s ease-in-out 1.6s infinite alternate-reverse; }
  @keyframes bob { from { transform:translateY(16px); } to { transform:translateY(-16px); } }
}
@media (min-width:861px) and (max-height:760px) {
  .hero-copy h1 { font-size:64px; }
  .hero-copy .eyebrow { margin-bottom:16px; }
  .feed-grid { gap:40px; }
  .feature-copy .h2 { font-size:50px; }
  .feed-tabs { --w:270px; }
  .download .wrap { padding-block:28px; }
  .download .h2 { font-size:46px; }
  .download .stores,.download .qr { margin-top:20px; }
}
@media (max-width:1100px) and (min-width:861px) {
  .feed-grid { gap:32px; grid-template-columns:1.08fr 1fr; }
  .feed-visual { padding-right:0; }
  .feed-visual .phone { --w:min(280px,calc((100svh - 175px) / 2.17)); }
  .location-fragment { width:235px; right:-22px; }
  .square-grid { gap:50px; }
  .square-visual .phone { --w:min(275px,calc((100svh - 150px) / 2.17)); }
  .category-chips { gap:5px; }
  .category-chips button { font-size:13px; }
  .photo-grid { height:clamp(150px,calc(100svh - 560px),255px); }
  .channel-grid { gap:30px; }
  .channel-visual .phone:first-child { --w:min(230px,calc((100svh - 240px) / 2.17)); }
  .channel-visual .phone:nth-child(2) { --w:min(200px,calc((100svh - 240px) / 2.44)); margin-left:-55px; }
  .travel-extra .phone { right:0; --w:150px; bottom:-80px; }
  .extra { padding:26px; }
}
@media (max-width:860px) {
  :root { --pad:24px; }
  .hero-copy { top:45%; }
  .hero-copy h1 { font-size:clamp(43px,7.5vw,70px); }
  .hero-copy .lead { font-size:16px; }
  .hero-device .phone { --w:min(290px,calc((100svh - 215px) / 2.17)); }
  .hero-end { padding-top:88px; align-content:start; }
  .hero-end .stores,.hero-end .meta { display:none; }
  .hero-note { bottom:14px; }
  .feed { height:auto; min-height:1200px; }
  .feed-stage { position:relative; height:auto; padding:85px 0 100px; }
  .feed-grid { grid-template-columns:1fr; gap:62px; }
  .feature-copy { text-align:center; }
  .section-label { justify-content:center; margin-bottom:18px; }
  .feature-copy .lead,.location-copy { margin-inline:auto; }
  .feed-tabs { margin:24px auto 20px; }
  .feed-visual { padding:0; }
  .feed-visual .phone { --w:280px; }
  .location-fragment { width:260px; right:-28px; }
  .feed-trail { left:-32px; }
  .feed-trail img { width:56px; height:56px; }
  .swipe-cue { right:-25px; }
  .square { padding:85px 0 105px; }
  .square-grid { grid-template-columns:1fr; gap:65px; }
  .square .feature-copy { max-width:540px; margin-inline:auto; }
  .square .lead { margin-inline:auto; }
  .category-chips { margin-inline:auto; }
  .photo-grid { height:300px; text-align:left; }
  .square-visual .phone { --w:280px; }
  .square-visual .count { left:-16px; }
  .channel { padding:85px 0 100px; }
  .channel-grid { grid-template-columns:1fr; gap:60px; }
  .channel-visual { justify-content:center; min-height:600px; }
  .channel-visual .phone:first-child { --w:255px; }
  .channel-visual .phone:nth-child(2) { --w:220px; }
  .more { padding:75px 0 60px; }
  .more-intro { display:block; text-align:center; }
  .more-intro p { margin-top:14px; }
  .extra-grid { grid-template-columns:1fr; max-width:550px; margin-inline:auto; }
  .extra { min-height:350px; }
  .trust { flex-wrap:wrap; gap:18px; }
  .trust span:first-child { width:100%; justify-content:center; }
  .download { min-height:620px; padding:50px 0; }
  .download .h2 { font-size:44px; }
  .download .qr { display:none; }
  .marquee img { width:135px; height:135px; }
  .foot .company { max-width:100%; }
}
@media (max-width:480px) {
  .hero-copy .eyebrow { margin-bottom:21px; font-size:12px; }
  .hero-copy h1 { font-size:43px; }
  .hero-copy .lead { margin-top:21px; font-size:14px; }
  .hero-copy .stores { margin-top:25px; gap:8px; }
  .stores .btn { font-size:14px; padding-inline:18px; height:48px; }
  .hero-device { top:47%; }
  .hero-device .phone { --w:min(268px,calc((100svh - 230px) / 2.17)); }
  .photo-card { border-radius:18px; }
  .h2 { font-size:40px; }
  .feature-copy .lead { font-size:15px; line-height:1.7; margin-top:20px; }
  .feed { min-height:1120px; }
  .feed-grid { gap:55px; }
  .feed-visual .phone { --w:255px; }
  .feed-tabs { --w:260px; }
  .location-copy { font-size:13px; max-width:24em; }
  .location-fragment { width:238px; right:-25px; bottom:9%; }
  .feed-trail { left:-24px; }
  .feed-trail img { width:50px; height:50px; }
  .swipe-cue { right:-20px; padding:11px 14px; font-size:12px; }
  .category-chips { gap:6px; margin-top:24px; }
  .category-chips button { font-size:13px; padding:.7em 1em; }
  .photo-grid { height:232px; gap:9px; }
  .photo-grid figure { border-radius:15px; }
  .square-visual .phone { --w:255px; }
  .square-visual { --w:260px; }
  .channel-grid { gap:54px; }
  .channel-visual { min-height:480px; }
  .channel-visual .phone:first-child { --w:207px; }
  .channel-visual .phone:nth-child(2) { --w:175px; margin-left:-52px; }
  .channel-actions { font-size:14px; margin-top:20px; }
  .more-intro h2 { font-size:28px; }
  .extra { padding:28px; min-height:370px; }
  .extra h3 { font-size:24px; }
  .travel-extra p { max-width:16em; }
  .travel-extra .phone { --w:172px; right:20px; bottom:-195px; }
  .chat-extra { min-height:315px; }
  .chat-extra .cut { width:275px; right:20px; bottom:22px; }
  .trust { font-size:11px; gap:14px; }
  .trust svg { width:17px; height:17px; }
  .download { min-height:610px; }
  .download .wrap { padding:35px 14px; }
  .download .h2 { font-size:39px; }
  .download .lead { font-size:14px; }
  .marquee img { width:115px; height:115px; border-radius:16px; }
  .marquee-set { gap:14px; padding-right:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero { height:auto; }
  .hero-stage { position:relative; height:auto; min-height:1000px; padding:115px 20px 65px; display:flex; flex-direction:column; align-items:center; gap:38px; }
  .hero-copy { position:relative; left:auto; top:auto; width:100%; max-width:none; transform:none!important; opacity:1!important; visibility:visible!important; }
  .hero-copy h1 { font-size:clamp(43px,5vw,66px); }
  .hero-device { position:relative; left:auto; top:auto; transform:none!important; opacity:1!important; }
  .hero-device .phone { --w:250px; }
  .flight,.hero-note { display:none!important; }
  .hero-end { position:relative; inset:auto; width:auto; margin:0; padding:0; display:block; visibility:visible; }
  .hero-end .feature-copy { text-align:center; }
  .hero-end .section-label { justify-content:center; margin-bottom:10px; }
  .hero-end .h2 { font-size:24px; }
  .hero-end :is(.lead,.stores,.meta) { display:none; }
  .hero-bg { display:none; }
  .feed { height:auto; min-height:0; }
  .feed-stage { height:auto; position:relative; padding-block:90px; }
  .marquee { animation:none; }
  .photo-grid { transition:none; }
}
@media (prefers-reduced-motion:reduce) and (min-width:861px) {
  .hero-stage { height:100svh; min-height:700px; padding:100px 5vw 35px; display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr auto; justify-items:center; gap:18px 30px; }
  .hero-copy { grid-column:1; grid-row:1 / 3; }
  .hero-device { grid-column:2; grid-row:1; }
  .hero-device .phone { --w:clamp(230px,calc((100svh - 240px) / 2.17),280px); }
  .hero-end { grid-column:2; grid-row:2; }
}