/* Shredo marketing site (v5, 2026-10-05). MenuFit's layout, Bevel's calm,
   Shredo's own white + green. Real app screens in a real iPhone frame. */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F3F7F5;
  --ink: #0F1214;
  --sub: #5E676C;
  --muted: #8A9398;
  --edge: #E3E9E6;
  --green: #12B886;
  --green-deep: #0B9A6F;
  --green-tint: #E3F6EE;
  --sky-1: #EAF6F0;
  --sky-2: #F6FBF8;
  --card: #FFFFFF;
  --shadow: 0 30px 60px rgba(15, 30, 24, .10), 0 8px 20px rgba(15, 30, 24, .06);
  --map-grid: rgba(15, 18, 20, .045);
  --map-road: #FFFFFF;
  --map-bg: #EEF3F0;
  --map-park: #DDF1E6;
  --map-water: #DCEBF4;
  --radius: 22px;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* light only, like the app: never flip to dark when the phone is in Dark Mode */
:root { color-scheme: light only; }
html, body { background: #FFFFFF; }


* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid #0A84FF; outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 12px; }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(44px, 6.6vw, 84px); letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 5vw, 60px); }
h3 { font-size: 21px; letter-spacing: -0.01em; line-height: 1.2; }
.g { color: var(--green); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.eyebrow strong { color: var(--ink); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--sub); max-width: 34ch; margin: 18px auto 0; }
.body { color: var(--sub); font-size: 18px; max-width: 46ch; margin-top: 18px; }
section { position: relative; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 12px 16px; }
.nav-inner { max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid color-mix(in srgb, var(--edge) 70%, transparent); transition: box-shadow .3s; }
.nav.scrolled .nav-inner { box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand img { border-radius: 8px; }
.links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.links a { text-decoration: none; color: var(--sub); transition: color .2s; }
.links a:hover { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 7px; background: #1D1D1F; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 18px 10px 15px; border-radius: 999px; transition: transform .15s; }
.pill svg { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
.pill:active { transform: scale(.97); }

/* ---------- sky ---------- */
.sky { position: absolute; inset: 0; overflow: hidden; z-index: -1;
  background: radial-gradient(90% 60% at 50% 0%, var(--sky-1) 0%, var(--sky-2) 60%, var(--bg) 100%); }
.cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); filter: blur(6px); opacity: .9; animation: drift 38s ease-in-out infinite alternate; }
.c1 { width: 620px; height: 220px; left: -120px; top: 120px; }
.c2 { width: 520px; height: 200px; right: -80px; top: 60px; animation-duration: 46s; }
.c3 { width: 760px; height: 260px; left: 30%; top: 420px; animation-duration: 54s; opacity: .7; }
.glow { position: absolute; width: 900px; height: 900px; left: 50%; top: 52%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 16%, transparent), transparent); }
@keyframes drift { to { transform: translateX(60px); } }

/* ---------- phone (real frame + real screen) ---------- */
.phone { position: relative; width: var(--pw, 340px); aspect-ratio: 1260 / 2549; container-type: inline-size; }
.phone .frame { position: absolute; left: -41.19%; top: -9.06%; width: 182.06%; max-width: none; pointer-events: none; user-select: none; z-index: 1; }
.phone .screen { position: absolute; left: 4.84%; top: 2.08%; width: 90.32%; height: 95.37%; border-radius: 12.63cqw; overflow: hidden; background: #F2F4F3; z-index: 2; }
.phone .screen > img { width: 100%; height: auto; position: absolute; inset: 0 0 auto 0; }
.phone .island { position: absolute; left: 50%; top: 3.33%; width: 28.96%; height: 4.2%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 4; }
.sb { position: absolute; inset: 0 0 auto 0; height: 12.4cqw; z-index: 2; pointer-events: none; transition: color .4s; }
.sb.dark { color: #0B0D0E; } .sb.light { color: #fff; }
.sb.band { height: 15.5cqw; background: linear-gradient(#fff 80%, rgba(255,255,255,0)); }
.sb .t { position: absolute; left: 8.27cqw; top: 3.95cqw; font: 600 3.9cqw/1 var(--ui); letter-spacing: -0.02em; }
.sb svg { position: absolute; right: 5.97cqw; top: 4.45cqw; width: 16.5cqw; height: 2.75cqw; fill: currentColor; }

/* ---------- hero (Bevel's proportions, measured at 1440x900: 80px headline at y104, phone 370px at y470,
   phone section solid for 63% then fading out; stream across the phone's upper half) ---------- */
/* One light world on purpose: the hero paints its own bright ground in both themes. */
.hero { position: relative; overflow: hidden; text-align: center; isolation: isolate; color: #1D1D1F; background: #FFFFFF; }
.hero[data-bg="apple"] { background: linear-gradient(#F5F5F7 0%, #FBFBFD 55%, #FFFFFF 100%); }
.hero[data-bg^="om"],
.hero[data-bg^="ar"] { background: radial-gradient(110% 70% at 50% 58%, #FFFFFF 0%, #FBFDFC 55%, #F4F8F6 100%); }
.hero[data-bg="rays"]  { background: radial-gradient(90% 60% at 50% 62%, #FFFFFF 0%, #F6FBF9 60%, #EEF6F2 100%); }
.hero[data-bg="glow"]  { background: #FAFCFB; }
.hero[data-bg="prism"] { background: linear-gradient(#F4F7FB 0%, #FFFFFF 70%); }
.hero[data-bg="aurora"]  { background: linear-gradient(#FBFBFD 0%, #FFFFFF 100%); }
.hero[data-bg="spot"]    { background: #FFFFFF; }
.hero[data-bg="dots"]    { background: #FBFBFD; }
.hero[data-bg="horizon"] { background: linear-gradient(#FFFFFF 0%, #FFFFFF 45%, #EEF7F2 100%); }
.hero[data-bg="orbit"]   { background: linear-gradient(#F5F5F7 0%, #FFFFFF 70%); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
/* Apple product-page type: SF Pro Display on Apple devices (system font), Inter elsewhere (SF Pro may not be served on the web) */
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; font-size: clamp(40px, 5.4vw, 80px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; color: #1D1D1F; font-optical-sizing: auto; }
.hero .lead { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; color: #6E6E73; font-size: clamp(17px, 1.55vw, 22px); font-weight: 400; line-height: 1.38; letter-spacing: 0.005em; margin: 16px auto 0; max-width: 33em; text-wrap: balance; }
.hero-copy { position: relative; z-index: 6; padding: clamp(92px, 11.6vh, 112px) 16px 0; }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.appstore { display: inline-flex; align-items: center; gap: 9px; background: #000; color: #fff; text-decoration: none; padding: 8px 18px 8px 14px; border-radius: 13px; transition: transform .15s, box-shadow .2s; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.appstore:hover { box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.appstore:active { transform: scale(.97); }
.appstore svg { width: 22px; height: 22px; fill: #fff; }
.appstore span { display: flex; flex-direction: column; text-align: left; font-size: 18px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.appstore small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; }
.fine { font-size: 13px; color: #6E6E73; }
.stars { color: #F5B301; letter-spacing: 1px; }
.flow { --pw: clamp(210px, min(21vw, 35vh), 315px); --ph: calc(var(--pw) * 2.023); --pt: calc(var(--pw) * 0.1);
  position: relative; z-index: 3; height: calc(var(--ph) * 0.82 + var(--pt)); margin-top: clamp(32px, 5.4vh, 58px);
  -webkit-mask-image: linear-gradient(#000 63%, transparent); mask-image: linear-gradient(#000 63%, transparent); }
.flow-phone { position: absolute; left: 50%; top: var(--pt); transform: translateX(-50%); z-index: 5; animation: rise 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
.flip > img { transition: transform .9s cubic-bezier(.22,1,.36,1); transform: translateX(100%); }
.flip > img.on { transform: translateX(0); }
.flip > img.past { transform: translateX(-100%); }
/* Realistic iPhone: the photographed frame used for the App Store screenshots. Body = 1260x2549 of the
   2294x3200 image; screen = 1138x2431 inset 61/53. Everything scales off --pw (the body width). */
.iphone { position: absolute; width: var(--pw); height: calc(var(--pw) * 2.023); }
.iphone .frame { position: absolute; left: calc(var(--pw) * -0.4119); top: calc(var(--pw) * -0.1833); width: calc(var(--pw) * 1.8206); max-width: none; height: auto; pointer-events: none; }
.iphone .screen { position: absolute; left: calc(var(--pw) * 0.0484); top: calc(var(--pw) * 0.0421); width: calc(var(--pw) * 0.9032); height: calc(var(--pw) * 1.9294);
  border-radius: calc(var(--pw) * 0.1264); overflow: hidden; background: #F2F4F3; container-type: inline-size; }
.iphone .screen > img { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; }
.iphone .island { position: absolute; z-index: 5; left: 50%; top: 2.8cqw; width: 32.06cqw; height: 9.41cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.iphone .sb { position: absolute; inset: 0 0 auto 0; height: 14cqw; z-index: 4; color: #0B0D0E; }
.iphone .sb .t { position: absolute; left: 9.16cqw; top: 4.33cqw; font: 600 4.33cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.02em; }
.iphone .sb svg { position: absolute; right: 6.6cqw; top: 4.96cqw; width: 18.26cqw; height: 3.04cqw; fill: currentColor; }

.iphone .sb.light { color: #fff; }
/* the pair: Eating Out (left, a touch lower) + Scan (right, in front), opposite tilts, small overlap */
.pair { width: calc(var(--pw) * 1.8); height: calc(var(--pw) * 2.1); }
.pair .p1 { left: 0; top: calc(var(--pw) * 0.09); transform: rotate(-4deg); z-index: 1; }
.pair .p2 { right: 0; top: 0; transform: rotate(4deg); z-index: 2; }

/* food rides one layer behind the phone, across its upper half (where Bevel's cards cross) */
.stream { position: absolute; left: 0; right: 0; top: calc(var(--pt) + var(--ph) * 0.40); height: 0; z-index: 4; }
.food { position: absolute; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; will-change: transform, opacity; }
.food img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 14px rgba(20, 40, 50, .16)); }
@media (max-width: 700px) { .food { width: 62px; height: 62px; margin: -31px 0 0 -31px; } .flow { --pw: min(44vw, 210px); } }
@media (prefers-reduced-motion: reduce) { .flow-phone { animation: none; } }

/* TEMP background picker (owner preview) */
.bgpick { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #E3E9E6; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.bgpick button { font: 600 13px var(--ui); border: 0; background: transparent; color: #1D1D1F; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.bgpick button[aria-pressed="true"] { background: #1D1D1F; color: #fff; }
@media (max-width: 600px) { .bgpick button { padding: 7px 8px; font-size: 11px; } }

/* ---------- logos ---------- */

/* ---------- split (menu) ---------- */
.split { max-width: 1120px; margin: 0 auto; padding: 110px 24px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.ticks { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-size: 16.5px; }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.8 5.9-6' fill='none' stroke='%2312B886' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.duo, .map { perspective: 1400px; }
.duo { position: relative; height: clamp(520px, 52vw, 660px); }
.duo .phone { --pw: clamp(220px, 23vw, 300px); position: absolute; top: 0; }
.duo .front { left: 4%; top: 6%; z-index: 2; }
.duo .back { right: 4%; top: 0; transform: rotate(4deg) scale(.94); opacity: .97; }

/* ---------- story (sticky phone) ---------- */
.story { background: var(--bg-soft); padding: 110px 24px 40px; }
.story-grid { max-width: 1080px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.chapters { list-style: none; }
.chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; max-width: 440px; opacity: .28; transition: opacity .5s ease; }
.chapter.on { opacity: 1; }
.chapter .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--card); border: 1px solid var(--edge); margin-bottom: 18px; transition: background .4s, color .4s, border-color .4s; }
.chapter.on .num { background: var(--green); color: #fff; border-color: var(--green); }
.chapter h3 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.05; }
.chapter p { color: var(--sub); font-size: 18px; margin-top: 14px; max-width: 40ch; }
.mphone { display: none; }
.sticky-wrap { position: sticky; top: calc(50vh - min(34vw, 300px)); height: fit-content; display: flex; align-items: center; justify-content: center; gap: 28px; padding-bottom: 60px; }
.sticky-phone { --pw: clamp(240px, 26vw, 300px); }
.stack > img { transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .5s ease; transform: translateY(100%); opacity: 1; z-index: 1; }
.stack > img.on { transform: translateY(0); z-index: 2; }
.stack > img.past { transform: translateY(-16%); opacity: 0; z-index: 1; }
.dots { display: grid; gap: 10px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--edge); transition: background .3s, transform .3s; }
.dots i.on { background: var(--green); transform: scale(1.3); }

/* ---------- near (map) ---------- */
.near { padding: 120px 0 110px; overflow: hidden; }
.near-head { padding: 0 24px; }
.near .body { max-width: 58ch; }
.map { position: relative; max-width: 1180px; height: clamp(560px, 58vw, 720px); margin: 56px auto 0; border-radius: 32px; background: var(--map-bg); overflow: hidden; border: 1px solid var(--edge); }
.roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.road { fill: none; stroke: var(--map-road); stroke-width: 18; stroke-linecap: round; }
.road.big { stroke-width: 30; } .road.thin { stroke-width: 10; }
.park { fill: var(--map-park); }
.water { fill: none; stroke: var(--map-water); stroke-width: 60; }
.route { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 12; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -56; } }
.you { position: absolute; left: 24.4%; top: 72.5%; width: 18px; height: 18px; }
.you i { position: absolute; inset: 0; border-radius: 50%; background: #0A84FF; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.you::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: rgba(10,132,255,.18); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.map-phone { --pw: clamp(230px, 24vw, 290px); position: absolute; left: 50%; top: 9%; transform: translateX(-50%); z-index: 3; }
.pin { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; background: var(--card); padding: 8px 12px 8px 8px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--edge); width: 270px; }
.pin img { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; background: #fff; flex: none; }
.pin b { display: block; font-size: 14px; } .pin span { display: block; font-size: 12px; color: var(--sub); line-height: 1.3; }
.pin .score { margin-left: auto; font-style: normal; font-weight: 700; font-size: 15px; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--green-deep); background: var(--green-tint); border: 2.5px solid var(--green); font-variant-numeric: tabular-nums; }
.pin::after { content: ""; position: absolute; left: 30px; bottom: -8px; width: 16px; height: 16px; background: var(--card); transform: rotate(45deg); border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.p1 { left: 5%; top: 16%; } .p2 { right: 5%; top: 24%; } .p3 { left: 9%; bottom: 14%; }

/* ---------- stats ---------- */
.stats { max-width: 1080px; margin: 0 auto; padding: 30px 24px 100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { text-align: center; padding: 26px 12px; border-radius: var(--radius); background: var(--bg-soft); }
.stat b { display: block; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--sub); font-size: 15px; }

/* ---------- corners (bento) ---------- */
.corners { max-width: 1080px; margin: 0 auto; padding: 40px 24px 110px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.tile { background: var(--bg-soft); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--edge); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.tile:hover { transform: translateY(-3px); }
.tile p { color: var(--sub); font-size: 16px; }
.tile.span2 { grid-column: span 2; }
.tile.wide { grid-column: span 3; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, var(--green-tint), var(--bg-soft)); }
.t-copy { max-width: 52ch; } .t-copy p { margin-top: 8px; }
.goals { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.goals span { background: var(--card); border: 1px solid var(--edge); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.t-ico { width: 36px; height: 36px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }

/* ---------- quote / final / faq / footer ---------- */
.quote { max-width: 760px; margin: 0 auto; padding: 0 24px 110px; text-align: center; }
.quote blockquote { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -0.015em; font-weight: 600; margin-top: 14px; text-wrap: balance; }
.quote p { color: var(--muted); margin-top: 14px; font-size: 15px; }
.final { padding: 130px 24px; text-align: center; isolation: isolate; overflow: hidden; }
.final .appstore { margin-top: 30px; }
.faq { max-width: 760px; margin: 0 auto; padding: 100px 24px 110px; }
.qs { margin-top: 36px; border-top: 1px solid var(--edge); }
details { border-bottom: 1px solid var(--edge); }
summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; font-size: 18px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 26px; color: var(--muted); transition: transform .25s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--sub); padding: 0 0 22px; max-width: 62ch; }
.foot { border-top: 1px solid var(--edge); padding: 34px 24px 44px; }
.foot-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; font-size: 15px; }
.foot nav a { color: var(--sub); text-decoration: none; } .foot nav a:hover { color: var(--ink); }
.foot p { color: var(--muted); font-size: 14px; width: 100%; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .links { margin-left: auto; } .pill { margin-left: 0; }
  .split { grid-template-columns: 1fr; padding: 80px 20px; text-align: left; }
  .duo { height: 560px; max-width: 460px; width: 100%; margin: 0 auto; }
  .duo .phone { --pw: 210px; }
  .story-grid { grid-template-columns: 1fr; }
  .sticky-wrap { display: none; }
  .chapter { min-height: auto; opacity: 1; padding: 34px 0; max-width: none; } .chapter .num { background: var(--green); color: #fff; border-color: var(--green); }
  .mphone { display: block; margin: 30px auto 10px; } .mphone .phone { --pw: min(60vw, 250px); margin: 0 auto; }
  .map { border-radius: 0; border-left: 0; border-right: 0; height: 640px; }
  .pin { width: 220px; transform: scale(.9); } .p1 { left: 2%; top: 4%; } .p2 { right: 2%; top: auto; bottom: 30%; } .p3 { left: 2%; bottom: 4%; }
  .map-phone { top: 14%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr; } .tile.span2 { grid-column: auto; } .tile.wide { grid-column: auto; flex-direction: column; align-items: flex-start; } .goals { justify-content: flex-start; }
}
@media (max-width: 480px) {
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- screen 2: eating out (three phones) ---------- */
.eat3 { padding: clamp(90px, 12vh, 140px) 24px clamp(80px, 10vh, 120px); background: linear-gradient(#FFFFFF, #F5F8F7 60%, #FFFFFF); }
.eat3 h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; text-wrap: balance; }
.eat3 .body { color: #6E6E73; max-width: 40em; }
.trio { --pw: clamp(210px, 21vw, 280px); list-style: none; margin: clamp(48px, 7vh, 72px) auto 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 4.5vw, 72px); }
.step { display: flex; flex-direction: column; align-items: center; width: var(--pw); }
.step .iphone { position: relative; flex: none; }
.step.mid { margin-top: -28px; } .step.mid .cap { margin-top: 58px; }
.step.reveal:nth-child(2) { transition-delay: .12s; } .step.reveal:nth-child(3) { transition-delay: .24s; }
.cap { margin-top: 30px; text-align: center; font-size: 16px; line-height: 1.45; color: #6E6E73; max-width: 24ch; text-wrap: balance; }
.cap b { display: block; color: #1D1D1F; font-weight: 600; font-size: 17px; margin-bottom: 2px; }
@media (max-width: 820px) {
  .trio { --pw: min(68vw, 270px); justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px calc(50vw - var(--pw) / 2) 8px; margin-left: -24px; margin-right: -24px; gap: 22px; scrollbar-width: none; }
  .trio::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: center; flex: none; }
  .step.mid { margin-top: 0; } .step.mid .cap { margin-top: 30px; }
}

/* ---------- screen 3: snap (scroll-driven; JS sets transforms + --p from scroll position) ---------- */
.snap { background: var(--bg-soft); padding: clamp(90px, 12vh, 130px) 0 0; }
.snap-head { padding: 0 24px; }
.snap h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; text-wrap: balance; }
.snap-head .body { color: #6E6E73; max-width: 40em; }
.snap-play { max-width: 1080px; margin: clamp(40px, 6vh, 64px) auto 0; padding: 0 24px clamp(80px, 10vh, 120px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
/* Bevel-style list: title + one line + a progress ring with pause/play */
.feats { list-style: none; display: grid; gap: 10px; max-width: 460px; }
.feat button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 20px 22px; border-radius: 22px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; cursor: pointer; transition: background .3s, border-color .3s, opacity .3s; opacity: .45; }
.feat button:hover { opacity: .75; }
.feat.on button { opacity: 1; background: #fff; border-color: var(--edge); box-shadow: 0 8px 24px rgba(16, 24, 28, .06); }
.feat button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ft { display: grid; gap: 6px; } .ft b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #1D1D1F; } .ft span { font-size: 16px; line-height: 1.45; color: #6E6E73; }
.fring { position: relative; flex: none; width: 36px; height: 36px; }
.fring svg { width: 100%; height: 100%; } .fring circle { fill: none; stroke-width: 2.6; }
.fring .tr { stroke: rgba(16, 24, 28, .12); }
.fring .pr { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transform: rotate(-90deg); transform-origin: 18px 18px; }
.fring i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; } .fring i svg { width: 15px; height: 15px; fill: #1D1D1F; }
.feat.on .fring .ic-pause { opacity: 1; } .snap-play.paused .feat.on .fring .ic-pause { opacity: 0; } .snap-play.paused .feat.on .fring .ic-play { opacity: 1; }
.feat:not(.on) .fring .ic-play { opacity: .7; }
.snap-phone-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; }
.snap-phone { --pw: clamp(240px, min(26vw, 38vh), 310px); }
.snap-phone .shot { position: absolute; inset: 0; will-change: transform, opacity; }
.snap-phone .shot img { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; }
.snap-phone .s1, .snap-phone .s2, .snap-phone .s3 { transform: translateY(100%); }
.snap-phone .sb { z-index: 5; }
/* the 82 ring: a cover in the app's track grey, opened clockwise from 12 o'clock as --p grows */
.ringfx { position: absolute; left: 65.88cqw; top: 80.13cqw; width: 20.22cqw; aspect-ratio: 1; border-radius: 50%; --p: 0%;
  background: conic-gradient(transparent 0 var(--p), #EDEFF1 var(--p) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 79%); mask: radial-gradient(closest-side, transparent 77%, #000 79%); }
/* Snap: shutter press + flash */
.snap-phone .cam { transform-origin: 50% 46%; }
.shutterfx { position: absolute; left: 50%; top: 163.56cqw; width: 15.63cqw; aspect-ratio: 1; margin-left: -7.81cqw; border-radius: 50%; border: 0.69cqw solid #fff; opacity: 0; }
.flashfx { position: absolute; inset: 0; background: #fff; opacity: 0; }
/* Analyzing: rebuilt from app/analyzing.tsx (white scan: plate in a filling ring + 3 steps) */
.anz { background: linear-gradient(#F1F3F5 0, #FFFFFF 42%); font-family: "Nunito Sans", -apple-system, system-ui, sans-serif; color: #0E1A27; }
.anz-x { position: absolute; left: 5.06cqw; top: 15.40cqw; width: 9.19cqw; height: 9.19cqw; border-radius: 50%; background: #fff; border: 1px solid rgba(14,26,39,.08); display: grid; place-items: center; box-shadow: 0 0.46cqw 1.84cqw rgba(14,26,39,.08); }
.anz-x svg { width: 4.14cqw; height: 4.14cqw; }
.anz-hero { position: absolute; left: 12.64cqw; top: 28.73cqw; width: 65.04cqw; height: 65.04cqw; }
.anz-plate { position: absolute; left: 3.91cqw; top: 3.91cqw; width: 57.23cqw; height: 57.23cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 1.84cqw 3.68cqw rgba(14,26,39,.14); }
.anz-plate img { width: 100%; height: 100%; object-fit: cover; }
.anz-sweep { position: absolute; left: 0; right: 0; top: 0; height: 14.71cqw; background: linear-gradient(rgba(126,240,203,0), rgba(126,240,203,.38) 55%, rgba(255,255,255,.9) 86%, rgba(255,255,255,0)); }
.anz-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.anz-title { position: absolute; left: 0; right: 0; top: 99.74cqw; text-align: center; font-size: 6.21cqw; font-weight: 800; letter-spacing: -0.02em; }
.anz-cap { position: absolute; left: 0; right: 0; top: 108.94cqw; text-align: center; font-size: 3.68cqw; font-weight: 500; color: #6A768D; }
.anz-card { position: absolute; left: 5.06cqw; right: 5.06cqw; top: 119.97cqw; background: #fff; border-radius: 5.06cqw; border: 1px solid rgba(14,26,39,.08); padding: 1.38cqw 4.14cqw; box-shadow: 0 0.92cqw 2.76cqw rgba(14,26,39,.06); }
.anz-row { display: flex; align-items: center; gap: 3.22cqw; height: 11.95cqw; }
.anz-row.div { border-top: 1px solid rgba(14,26,39,.05); }
.anz-ic { position: relative; width: 5.98cqw; height: 5.98cqw; display: grid; place-items: center; }
.anz-ic i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.anz-spin svg { width: 5.06cqw; height: 5.06cqw; }
.anz-ok { border-radius: 50%; background: #E3F5F0; } .anz-ok svg { width: 3.45cqw; height: 3.45cqw; }
.anz-lbl { font-size: 3.79cqw; font-weight: 600; color: #A3ABB6; }
.anz-row.act .anz-lbl, .anz-row.done .anz-lbl { color: #0E1A27; }
.anz-row.act .anz-spin { opacity: 1; } .anz-row.done .anz-ok { opacity: 1; }
/* Make it better: the suggestion lines are wiped, then typed out one at a time; each line's points pop after */
.tyc { position: absolute; left: 25.66cqw; width: 45.96cqw; background: #F4F7F6; }
.tyc.c1 { top: 81.36cqw; height: 5.06cqw; } .tyc.c2 { top: 88.10cqw; height: 5.06cqw; } .tyc.c3 { top: 94.84cqw; height: 9.50cqw; }
.ptc { position: absolute; left: 73.39cqw; width: 8.58cqw; height: 6.28cqw; border-radius: 99px; background: #F4F7F6; }
.ptc.p1 { top: 80.74cqw; } .ptc.p2 { top: 87.49cqw; } .ptc.p3 { top: 96.22cqw; }
.tyl { position: absolute; left: 26.81cqw; width: 42.90cqw; font-family: "Nunito Sans", -apple-system, system-ui, sans-serif; font-weight: 500; font-size: 3.14cqw; line-height: 4.60cqw; color: #283038; letter-spacing: -0.005em; white-space: normal; }
.tyl.l1 { top: 81.43cqw; } .tyl.l2 { top: 88.33cqw; } .tyl.l3 { top: 94.84cqw; }
.tyl.typing::after { content: ""; display: inline-block; width: 0.31cqw; height: 3.37cqw; margin-left: 0.23cqw; vertical-align: -0.46cqw; background: #0BB27E; border-radius: 2px; }
.snap-list { display: none; list-style: none; padding: 0 20px 40px; }
.snap-list li { padding: 34px 0; } .snap-list .phone { --pw: min(60vw, 250px); margin: 30px auto 10px; }
@media (max-width: 900px) { .snap-play { grid-template-columns: 1fr; gap: 28px; } .snap-phone-wrap { order: -1; } .feats { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .ringfx { display: none; } }

/* ---------- reviews: endless rows of real App Store reviews ---------- */
.reviews { padding: clamp(90px, 12vh, 130px) 0 clamp(80px, 10vh, 110px); overflow: hidden; }
.reviews h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; text-wrap: balance; }
.rv-head { padding: 0 24px; } .rv-head .body { color: #6E6E73; }
.rv-rows { margin-top: clamp(40px, 6vh, 64px); display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rv-row { overflow: hidden; }
.rv-track { display: flex; gap: 18px; width: max-content; animation: rvslide 60s linear infinite; }
@keyframes rvslide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.rv { flex: none; width: 360px; height: 300px; margin: 0; padding: 24px 24px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--edge); box-shadow: 0 8px 24px rgba(16, 24, 28, .05); display: flex; flex-direction: column; gap: 10px; }
.rv-stars { display: flex; gap: 2px; } .rv-stars svg { width: 18px; height: 18px; fill: #FF9500; }
.rv-t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #1D1D1F; }
.rv blockquote { margin: 0; font-size: 15.5px; line-height: 1.5; color: #3A3A3C; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv figcaption { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: #1D1D1F; } .rv figcaption span { font-weight: 500; color: #8E8E93; }
@media (max-width: 700px) { .rv { width: 290px; height: 300px; } .rv blockquote { -webkit-line-clamp: 6; } }
.rv-big { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; } .rv-big svg { width: 30px; height: 30px; fill: #FF9500; }
@media (prefers-reduced-motion: reduce) { .rv-track { animation: none; } .rv-row { overflow-x: auto; } }

/* reviews header: floating chain logo tiles, faded, kept clear of the headline */
.reviews { position: relative; }
.rv-logos { position: absolute; left: 50%; top: clamp(40px, 6vh, 70px); width: min(1240px, 96vw); height: 290px; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.rv-logos i { --s: 64px; position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #fff; overflow: hidden; opacity: .62;
  box-shadow: 0 6px 18px rgba(16, 24, 28, .08), 0 0 0 1px rgba(16, 24, 28, .05); animation: rvfloat 7s ease-in-out var(--d) infinite alternate; }
.rv-logos img { width: 100%; height: 100%; object-fit: contain; }
@keyframes rvfloat { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.rv-head { position: relative; z-index: 1; }
.rv-h { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; }
@media (max-width: 760px) { .rv-logos { height: 300px; } .rv-logos i { width: calc(var(--s) * .7); height: calc(var(--s) * .7); margin: calc(var(--s) * -.35) 0 0 calc(var(--s) * -.35); } }
@media (prefers-reduced-motion: reduce) { .rv-logos i { animation: none; } }

/* ---------- cravings: craving -> swap -> cart, big floating app pieces ---------- */
.crave { padding: clamp(90px, 12vh, 130px) 24px clamp(90px, 12vh, 130px); background: radial-gradient(70% 60% at 50% 55%, #F2FAF6 0%, #FFFFFF 70%); overflow: hidden; }
.crave h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; text-wrap: balance; }
.cr-head .body { color: #6E6E73; max-width: 40em; }
.cr-stage { max-width: 980px; margin: clamp(44px, 7vh, 72px) auto 0; display: grid; justify-items: center; gap: 34px; font-family: "Nunito Sans", -apple-system, system-ui, sans-serif; }
.cr-search { width: min(560px, 100%); height: 64px; border-radius: 22px; background: #fff; border: 1px solid rgba(14, 26, 39, .08); box-shadow: 0 16px 40px rgba(14, 26, 39, .08); display: flex; align-items: center; gap: 14px; padding: 0 24px; color: #8A94A6; }
.cr-search svg { width: 22px; height: 22px; flex: none; }
.cr-q { position: relative; font-size: 20px; font-weight: 600; flex: 1; height: 28px; }
.cr-ph, .cr-typed { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cr-typed { color: #0E1A27; } .cr-typed.typing::after { content: ""; display: inline-block; width: 2px; height: 22px; margin-left: 3px; vertical-align: -4px; background: #12B886; }
.cr-row { display: flex; align-items: center; justify-content: center; gap: 26px; width: 100%; min-height: 236px; }
.cr-chip { position: relative; padding: 16px 22px 18px; justify-items: center; text-align: center; border-radius: 20px; background: #fff; border: 1px solid rgba(14, 26, 39, .08); box-shadow: 0 10px 28px rgba(14, 26, 39, .06); display: grid; gap: 4px; transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); opacity: 0; transform: translateY(10px) scale(.96); }
.cr-chip-img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 4px; transition: filter .5s ease, opacity .5s ease; }
.cr-stage.s2 .cr-chip-img { filter: grayscale(1); opacity: .55; }
.cr-chip-l { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A94A6; }
.cr-chip-t { font-size: 26px; font-weight: 800; color: #0E1A27; white-space: nowrap; }
.cr-strike { position: absolute; left: 18px; right: 18px; top: 87%; height: 3px; border-radius: 2px; background: #E5484D; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65,0,.35,1); }
.cr-arrow { width: 48px; color: #12B886; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .5s ease; flex: none; }
.cr-card { position: relative; display: flex; align-items: center; gap: 20px; width: min(470px, 100%); padding: 18px 22px 18px 18px; border-radius: 26px; background: #fff; border: 1px solid rgba(14, 26, 39, .08); box-shadow: 0 24px 60px rgba(14, 26, 39, .12); opacity: 0; transform: translateX(40px) scale(.94); transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.cr-img { width: 150px; height: 150px; object-fit: contain; flex: none; border-radius: 18px; background: #fff; }
.cr-info { display: grid; gap: 6px; justify-items: start; }
.cr-tag { font-size: 12.5px; font-weight: 800; color: #0B8F64; background: #E3F5F0; padding: 5px 11px; border-radius: 99px; }
.cr-name { font-size: 20px; font-weight: 800; line-height: 1.2; color: #0E1A27; }
.cr-why { margin: 0; font-size: 15px; line-height: 1.45; color: #5B6577; }
.cr-buy { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 99px; background: #131A22; color: #fff; font-size: 15px; font-weight: 700; transition: transform .15s ease, box-shadow .3s ease; }
.cr-buy svg { width: 20px; height: 20px; fill: #FF9900; }
.cr-buy.press { transform: scale(.92); box-shadow: 0 0 0 6px rgba(255, 153, 0, .25); }
.cr-toast { position: absolute; right: 16px; top: -18px; display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px; background: #0E1A27; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(14, 26, 39, .25); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
.cr-toast svg { width: 16px; height: 16px; color: #3DDC97; }
.cr-stage.s1 .cr-chip { opacity: 1; transform: none; }
.cr-stage.s2 .cr-strike { transform: scaleX(1); } .cr-stage.s2 .cr-chip { opacity: .8; }
.cr-stage.s3 .cr-arrow { opacity: 1; transform: none; } .cr-stage.s3 .cr-card { opacity: 1; transform: none; }
.cr-stage.s4 .cr-toast { opacity: 1; transform: none; }
.cr-stage.out .cr-chip, .cr-stage.out .cr-card, .cr-stage.out .cr-arrow { opacity: 0; transition-duration: .4s; }
.cr-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cr-tabs button { font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; padding: 11px 18px; border-radius: 99px; border: 1px solid var(--edge); background: #fff; color: #6E6E73; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cr-tabs button[aria-selected="true"] { background: #1D1D1F; color: #fff; border-color: #1D1D1F; }
.cr-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 760px) { .cr-chip-img { width: 110px; height: 110px; } .cr-row { flex-direction: column; gap: 14px; } .cr-arrow { transform: rotate(90deg); } .cr-stage.s3 .cr-arrow { transform: rotate(90deg); } .cr-img { width: 110px; height: 110px; } }
@media (prefers-reduced-motion: reduce) { .cr-chip, .cr-card, .cr-arrow, .cr-strike, .cr-toast { transition: none; } }
/* ---------- end cravings */
/* ---------- final CTA (Bevel style) ---------- */
.final2 { padding: clamp(100px, 13vh, 150px) 24px 0; text-align: center; background: #fff; }
.final2 h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; font-size: clamp(38px, 5vw, 64px); text-wrap: balance; }
.f2-copy .body { color: #6E6E73; max-width: 34em; margin-top: 16px; }
.f2-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 15px 26px 15px 22px; border-radius: 999px; background: #1D1D1F; color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; transition: transform .15s ease, background .2s; }
.f2-btn:hover { background: #000; } .f2-btn:active { transform: scale(.97); }
.f2-btn svg { width: 19px; height: 19px; fill: currentColor; margin-top: -2px; }
/* the receipt: thermal paper printing out of a slot, zigzag tear at the bottom */
.rc { position: relative; width: 340px; max-width: 86vw; margin: clamp(40px, 6vh, 64px) auto 0; padding-bottom: clamp(70px, 9vh, 110px); }
.rc-slot { position: relative; z-index: 2; height: 16px; margin: 0 -26px; border-radius: 10px; background: linear-gradient(#2A2D31, #111316); box-shadow: 0 10px 24px rgba(16, 24, 28, .25), inset 0 2px 0 rgba(255,255,255,.08); }
.rc-slot::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 4px; height: 3px; border-radius: 2px; background: #000; }
.rc-clip { position: relative; margin-top: -6px; overflow: hidden; }
.rc-paper { position: relative; padding: 30px 26px 40px; background: #FDFDFB; color: #1B1D20; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.55; letter-spacing: .02em;
  box-shadow: 0 18px 40px rgba(16, 24, 28, .10), inset 0 14px 18px -14px rgba(0,0,0,.18);
  -webkit-mask: linear-gradient(#000 calc(100% - 12px), transparent 0) top / 100% 100% no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 12px repeat-x;
  mask: linear-gradient(#000 calc(100% - 12px), transparent 0) top / 100% 100% no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 12px repeat-x;
  transform: translateY(-100%); }
.rc-top { display: grid; justify-items: center; gap: 2px; text-align: center; } .rc-top b { font-size: 20px; letter-spacing: .3em; } .rc-top span { font-size: 12.5px; color: #6B6F75; }
.rc-rule { margin: 14px 0; border-top: 2px dashed #C9CCD0; }
.rc-place { display: flex; justify-content: space-between; font-weight: 700; } .rc-place span { font-weight: 400; color: #6B6F75; }
.rc-items { margin-top: 6px; } .rc-items div { white-space: pre; } .rc-items div:last-child { color: #6B6F75; }
.rc-score { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; } .rc-score b { font-size: 34px; letter-spacing: 0; color: #0B8F64; }
.rc-word { font-weight: 700; color: #0B8F64; letter-spacing: .12em; } .rc-facts { color: #6B6F75; }
.rc-fit { font-weight: 700; text-align: center; } .rc-thanks { margin-top: 6px; text-align: center; font-size: 12.5px; letter-spacing: .25em; color: #6B6F75; }
.rc-bars { margin-top: 14px; display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 34px; } .rc-bars i { display: block; background: #1B1D20; }
@media (prefers-reduced-motion: reduce) { .rc-paper { transform: none !important; } }


/* pulled-out cards (App Store style). The card leaves an empty slot on the screen (no duplicate),
   then lifts out bigger + tilted. Story: tap ripple on the slot -> lift, phone 1, 2, 3 in turn (--d). */
.slot { position: absolute; z-index: 2; box-shadow: inset 0 0 0 1.5px rgba(16, 24, 28, .07), inset 0 calc(var(--pw) * 0.01) calc(var(--pw) * 0.03) rgba(16, 24, 28, .06); overflow: hidden; }
.slot::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 0.22); aspect-ratio: 1; margin: calc(var(--pw) * -0.11) 0 0 calc(var(--pw) * -0.11); border-radius: 50%; background: rgba(18, 184, 134, .35); opacity: 0; transform: scale(.2); }
.pull { position: absolute; z-index: 4; height: auto; max-width: none; background: #fff;
  --lift-shadow: 0 calc(var(--pw) * 0.12) calc(var(--pw) * 0.24) rgba(16, 24, 28, .24), 0 calc(var(--pw) * 0.03) calc(var(--pw) * 0.07) rgba(16, 24, 28, .12), 0 0 0 1px rgba(16, 24, 28, .05);
  box-shadow: none; transform: var(--back); }
.step.in .slot::after { animation: tap .7s ease-out var(--d) both; }
.step.in .pull { animation: lift .9s cubic-bezier(.22, 1.2, .36, 1) calc(var(--d) + .45s) both; }
@keyframes tap { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes lift { 0% { opacity: 1; transform: var(--back); box-shadow: 0 0 0 rgba(16,24,28,0); } 100% { opacity: 1; transform: var(--tilt); box-shadow: var(--lift-shadow); } }
@media (prefers-reduced-motion: reduce) { .step.in .slot::after { animation: none; } .pull, .step.in .pull { animation: none; transform: var(--tilt); box-shadow: var(--lift-shadow); } }
.slot.card-cfa-near { left: calc(var(--pw) * 0.5234); top: calc(var(--pw) * 0.7944); width: calc(var(--pw) * 0.4045); height: calc(var(--pw) * 0.4443); border-radius: calc(var(--pw) * 0.0414); background: #EDF0F1; }
.pull.card-cfa-near { left: calc(var(--pw) * 0.6146); top: calc(var(--pw) * 0.6588); width: calc(var(--pw) * 0.5420); border-radius: calc(var(--pw) * 0.0554); --back: translate(calc(var(--pw) * -0.1600), calc(var(--pw) * 0.0600)) scale(0.746) rotate(0deg); --tilt: rotate(3deg); }
.trio .step:nth-child(1) { --d: 0.5s; }
.slot.card-cfa-meal { left: calc(var(--pw) * 0.0967); top: calc(var(--pw) * 0.7277); width: calc(var(--pw) * 0.6044); height: calc(var(--pw) * 0.7262); border-radius: calc(var(--pw) * 0.0506); background: #EAEDEE; }
.pull.card-cfa-meal { left: calc(var(--pw) * 0.1502); top: calc(var(--pw) * 0.7378); width: calc(var(--pw) * 0.7374); border-radius: calc(var(--pw) * 0.0617); --back: translate(calc(var(--pw) * -0.1200), calc(var(--pw) * -0.0900)) scale(0.820) rotate(0deg); --tilt: rotate(-3deg); }
.trio .step:nth-child(2) { --d: 1.4s; }
.slot.card-cfa-why { left: calc(var(--pw) * 0.0951); top: calc(var(--pw) * 1.1092); width: calc(var(--pw) * 0.8105); height: calc(var(--pw) * 0.3103); border-radius: calc(var(--pw) * 0.0414); background: #FFFFFF; }
.pull.card-cfa-why { left: calc(var(--pw) * 0.0641); top: calc(var(--pw) * 1.0282); width: calc(var(--pw) * 0.9726); border-radius: calc(var(--pw) * 0.0496); --back: translate(calc(var(--pw) * -0.0500), calc(var(--pw) * 0.0500)) scale(0.833) rotate(0deg); --tilt: rotate(2deg); }
.trio .step:nth-child(3) { --d: 2.3s; }

/* phones: compact top bar on one line */
@media (max-width: 480px) { .nav { padding: 10px 12px; } .nav-inner { gap: 12px; padding: 6px 6px 6px 12px; } .brand { font-size: 16px; } .brand img { width: 24px; height: 24px; } .links { font-size: 14px; } .pill { white-space: nowrap; font-size: 14px; padding: 9px 14px 9px 12px; } .pill svg { width: 15px; height: 15px; } }
@media (max-width: 760px) { .rv-logos { position: static; transform: none; width: auto; height: auto; display: flex; justify-content: center; gap: 10px; margin: 0 auto 18px; } .rv-logos i { position: relative; left: auto !important; top: auto !important; margin: 0 !important; width: 40px !important; height: 40px !important; animation: none; opacity: .75; } .rv-logos i:nth-child(n+7) { display: none; } }