/* Landing-only styles. Shared tokens live in site.css. */
.hero { padding: 56px 0 40px; text-align: center; background: radial-gradient(1200px 380px at 50% -40px, var(--pink-soft), transparent 70%); }
.hero h1 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.3px; margin: 0 auto 24px; text-wrap: balance; }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 56ch; margin: 0 auto 32px; }
.hero .pill-search { text-align: left; }
/* Bigger hero search bar (landing only; the compact header bar on other pages is unchanged) */
.hero .pill-search { max-width: 1040px; padding: 8px; border-radius: 34px; }
.hero .ps-field { min-height: 62px; padding: 0 18px; gap: 10px; border-radius: 28px; }
/* desktop only: on phones the fields stack and this divider is the horizontal line at the top of each
   field (site.css, top: 0); moving it down there put the line under the city onto "Search a locality" */
@media (min-width: 761px) { .hero .ps-field + .ps-field::before { top: 16px; bottom: 16px; } }
.hero .ps-ic svg { width: 22px; height: 22px; }
.hero .ps-field input, .hero .ps-field select, .hero .tsel-btn { font-size: 16px; }
.hero .ps-go { height: 62px; padding: 0 36px; border-radius: 31px; font-size: 16px; }
.hero .ps-gow.has-ss .ps-go { border-radius: 31px 0 0 31px; }
.hero .ps-ssb { height: 62px; width: 46px; border-radius: 0 31px 31px 0; }
@media (max-width: 760px) {
  .hero .ps-field { min-height: 56px; padding: 0 16px; }
  .hero .ps-go, .hero .ps-ssb { height: 56px; }
}
.hero-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
@media (max-width: 760px) { .hero { padding: 28px 0 24px; } .hero-sub { font-size: 16px; margin-bottom: 20px; } }

.row + .row { margin-top: 40px; }
.row-empty { color: var(--muted); padding: 24px 0; }

/* one-map illustration */
.mapcard { background: var(--card); border-radius: 24px; box-shadow: var(--lift-lg); overflow: hidden; }
.mapcard-top { padding: 16px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; background: var(--bg2); border-radius: 20px; padding: 4px; justify-self: start; }
.seg span { padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg .is-on { background: var(--card); color: var(--ink); box-shadow: var(--ring); }
.src { display: flex; flex-wrap: wrap; gap: 6px; }
.src .chip { height: 30px; padding: 0 12px; font-size: 13px; cursor: default; }
.mapcard-map { position: relative; aspect-ratio: 16 / 10; background:
  radial-gradient(circle at 20% 30%, rgba(233,30,99,.05) 0 60px, transparent 61px),
  linear-gradient(115deg, transparent 48%, var(--line) 48.4%, var(--line) 49.6%, transparent 50%),
  linear-gradient(20deg, transparent 62%, var(--line) 62.4%, var(--line) 63.4%, transparent 63.8%),
  linear-gradient(160deg, transparent 30%, var(--line) 30.3%, var(--line) 31%, transparent 31.3%),
  var(--bg2); }
.pin { position: absolute; transform: translate(-50%, -50%); background: var(--card); color: var(--ink); font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 20px; box-shadow: var(--lift); }
.pin-ghosla { background: var(--pink); color: var(--on-pink); }

/* whatsapp chat mock */
.chat { background: #efe7de; border-radius: 24px; padding: 0 0 18px; box-shadow: var(--lift-lg); max-width: 440px; justify-self: center; width: 100%; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
:root[data-theme="dark"] .chat { background: #0b141a; }
:root[data-theme="dark"] .chat { background: #0b141a; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #075e54; color: #fff; margin-bottom: 6px; }
.chat-top small { display: block; opacity: .8; font-size: 12px; }
.msg { max-width: 80%; margin: 0 14px; padding: 8px 12px; border-radius: 12px; background: #ffffff; color: #111b21; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.12); align-self: flex-start; }
.msg.me { background: #d9fdd3; align-self: flex-end; }
:root[data-theme="dark"] .msg { background: #202c33; color: #e9edef; } :root[data-theme="dark"] .msg.me { background: #005c4b; }
.msg.photos { display: flex; gap: 4px; padding: 4px; }
.msg.photos span { width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #c9b8a6, #8c7a68); }
.wa-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.qr { border-radius: 12px; background: #fff; padding: 6px; box-shadow: var(--ring); }
@media (max-width: 760px) { .qr { display: none; } }

.fineprint { color: var(--muted); font-size: 14px; margin-top: 20px; }

/* app */
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
/* "Ghosla app": the Play Store screenshots in a row. Default (no JS / reduced motion): a swipeable,
   snapping row. With .is-linked (landing.js) the row glides sideways with the page scroll instead. */
.app-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.store-strip { min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.store-strip::-webkit-scrollbar { display: none; }
.store-strip.is-linked { overflow: hidden; scroll-snap-type: none; }
.store-row { display: flex; gap: 18px; width: max-content; padding: 0 28px; will-change: transform; }
.store-row img { flex: none; width: 230px; height: auto; aspect-ratio: 540 / 960; border-radius: 22px; box-shadow: var(--lift-lg); scroll-snap-align: center; }
@media (max-width: 900px) { .app-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .store-row img { width: 190px; } .store-row { gap: 14px; padding: 0 16px; } }
.badges img { height: 54px; width: auto; }
/* phones: keep the two store badges side by side, shrinking evenly instead of wrapping */
@media (max-width: 560px) {
  .badges { flex-wrap: nowrap; gap: 10px; }
  .badges a { flex: 1 1 0; min-width: 0; max-width: 180px; }
  .badges img { width: 100%; height: auto; }
}
.phone { justify-self: center; width: 260px; aspect-ratio: 9 / 18.5; border-radius: 40px; background: var(--ink); padding: 12px; box-shadow: var(--lift-lg); }
.phone-screen { width: 100%; height: 100%; border-radius: 30px; background: var(--bg); padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
/* Miniature of the app home: search pill, stay tabs with the pink blob, then two-column cards. */
.pm-search { background: var(--card); border-radius: 24px; box-shadow: var(--lift); text-align: center; font-size: 11px; padding: 9px 0; color: var(--ink); }
.pm-tabs { display: flex; justify-content: space-around; }
.pm-tab { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; color: var(--muted); }
.pm-tab.is-on { color: var(--ink); font-weight: 700; }
.pm-ic { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }
.pm-ic img { position: relative; width: 26px; height: 26px; }
.pm-tab.is-on .pm-ic::before { content: ""; position: absolute; inset: -12px; background: url(/v2/assets/img/selected_option.png) center / contain no-repeat; }
.pm-head { font-size: 14px; color: var(--ink); }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.pm-card { min-width: 0; display: flex; flex-direction: column; font-size: 9.5px; line-height: 1.3; color: var(--ink); }
.pm-card b { font-size: 10.5px; font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-img { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg2); }
.pm-img img { width: 100%; height: 100%; object-fit: cover; }

/* products */
.prods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 1180px) { .prods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .prods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prods { grid-template-columns: 1fr; } }
/* Art collab row (after the free tools): image left, story right; stacks on phones */
.sec-collab { padding-top: 0; }
/* "More from Ghosla" follows "One map, every source" on the same background (the unlock section between
   them is hidden): drop its top padding so the two don't stack 72px + 72px of space */
.sec-more { padding-top: 0; }
.collab { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 560px); gap: 36px; align-items: center; text-decoration: none; color: inherit; }
.collab img { width: 100%; height: auto; aspect-ratio: 1170 / 696; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--ring); }
.collab .h2 { margin: 0 0 10px; }
.collab .lead { margin: 0 0 18px; }
.collab:hover .h2 { text-decoration: underline; }
@media (max-width: 760px) { .collab { grid-template-columns: minmax(0, 340px); gap: 18px; } }
.prod { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.prod img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--ring); width: 100%; height: auto; }
.prod h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.prod p { margin: 0; color: var(--muted); font-size: 14.5px; }
.prod:hover h3 { text-decoration: underline; }

/* pivot teaser */
.pivot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 24px; background: var(--card); box-shadow: var(--ring); text-decoration: none; flex-wrap: wrap; }
.pivot h2 { margin: 8px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.3px; max-width: 34ch; text-wrap: balance; }
.pivot:hover { box-shadow: var(--lift); }
/* Owner pitch beside the example WhatsApp chat: the last words roll up like a wheel, one phrase at a time */
.wa-pitch .h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.3; }
.wa-pitch .lead { margin: 0 0 24px; }
.roll { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; color: var(--app-primary); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.roll-in { display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.roll-in span { display: block; height: 1.3em; white-space: nowrap; width: max-content; }
.wa-pitch .h2 .roll { display: block; max-width: 100%; }
@media (max-width: 760px) {
  .wa-pitch .h2 { font-size: 24px; }
  .wa-pitch .btn-wa { width: 100%; }
}

/* "One map, every source": a radar sweep; each price lights up as the sweep passes it */
.fresh { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 4px 0 24px; padding: 8px 14px; border-radius: 20px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 700; }
.fresh-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fresh-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: freshPing 1.8s ease-out infinite; }
@keyframes freshPing { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.radar-sec .lead { margin-bottom: 14px; }
.radar { position: relative; justify-self: center; width: min(440px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle, transparent 0 24.6%, var(--line) 24.8% 25.2%, transparent 25.4% 49.6%, var(--line) 49.8% 50.2%, transparent 50.4% 74.6%, var(--line) 74.8% 75.2%, transparent 75.4%),
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    var(--card);
  box-shadow: var(--lift-lg), inset 0 0 0 1px var(--line); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 290deg, rgba(233, 30, 99, .05) 300deg, rgba(233, 30, 99, .28) 359deg, transparent 360deg); animation: radarSpin var(--t) linear infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radar-me { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px var(--pink-soft); }
.blip { position: absolute; transform: translate(-50%, -50%); padding: 5px 10px; border-radius: 20px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--lift); white-space: nowrap;
  opacity: 0; animation: blipIn var(--t) ease-out var(--d) infinite backwards; }
.blip-g { background: var(--pink); color: var(--on-pink); }
@keyframes blipIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 5% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 10% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: .15; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .fresh-dot::after { animation: none; } .blip { animation: none; opacity: 1; } }
@media (max-width: 760px) { .radar { width: min(340px, 100%); } .blip { font-size: 12px; padding: 4px 8px; } .fresh { font-size: 13px; } }
.steps + .btn { margin-top: 28px; }