/* MoMPA — phone & Android layer (v37-ui, 2026-10-01). Loaded LAST on the public pages, after mompa-home.css and the
   page's inline styles, so it only tightens what phones see. Desktop (> 600px) is untouched.

   Why Android looked bigger / bolder than iPhone:
   • Android Chrome follows the phone's "Font size / Display size" setting by zooming the page, so a 393px phone
     often lays out as 330–350 CSS px. Every size below is chosen to still fit at 320px.
   • Android draws 700/800 weights noticeably heavier than iOS. html.is-android (set by an inline script in <head>)
     steps those weights down one notch and thins 1.5px borders to 1px. */

@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px }

  /* ---------- Header: logo + language + post on ONE row ---------- */
  .abnb-nav { flex-wrap: wrap; gap: 6px 8px; padding-top: 8px; height: auto }
  .abnb-nav .brand { flex: 0 1 auto; min-width: 0 }
  .abnb-nav .brand-full { height: 30px; max-width: min(190px, 48vw) }
  .abnb-right { order: 2; margin-left: auto; gap: 6px; flex: none }
  .lang-toggle { margin-right: 0 !important; padding: 2px !important }
  .lang-toggle button, .lang-toggle > a { font-size: 11.5px !important; padding: 0 10px !important; min-height: 32px; display: inline-flex !important; align-items: center; font-weight:var(--fw-700,700) !important }
  .abnb-post { width: 36px; height: 36px; padding: 0 !important; justify-content: center }
  .abnb-post svg { width: 16px !important; height: 16px !important }

  /* Tabs (Home / PG / Flats / Rent) */
  .abnb-tabs { gap: 14px !important; margin: 2px 0 0 }
  .abnb-tab { padding: 4px 4px 6px !important; gap: 3px !important; min-width: 0 !important }
  .abnb-tab .ti { width: 28px !important; height: 28px !important }
  .abnb-tab .ti svg { width: 25px !important; height: 25px !important }
  .abnb-tab .tl { font-size: 12px !important; font-weight: 600 !important }
  .abnb-tab.active .tl { font-weight:var(--fw-700,700) !important }

  /* WhatsApp · Direction · Book Visit pill */
  .abnb-searchwrap { padding-top: 6px !important; padding-bottom: 8px !important }
  .abnb-search { border-radius: 18px !important; box-shadow: 0 6px 18px -12px rgba(36,18,53,.35) !important }
  .ab-seg { padding: 7px 4px !important; gap: 4px !important }
  .ab-seg-ic svg { width: 17px !important; height: 17px !important }
  .ab-seg-txt b { font-size: 12px !important; font-weight: 600 !important }
  .abnb-subline { font-size: 11.5px !important; margin-top: 6px !important }

  /* ---------- Section titles ---------- */
  .v3h2 { font-size: clamp(18px, 5.2vw, 22px) !important; line-height: 1.2 }
  .v3lead { font-size: 13px !important; line-height: 1.5; margin-bottom: 12px !important }
  .pg-more { font-size: 12.5px !important }

  /* ---------- Card rail: edge-to-edge, next card peeks in ---------- */
  .pg-row { margin: 0 -16px; padding: 2px 16px 10px !important; gap: 12px !important; scroll-padding: 0 16px }
  .pg-row > * { scroll-snap-align: start }

  /* ---------- PG card (pg-shared.js cardHTML) ---------- */
  .pg-card.m2 { width: min(282px, 78vw) !important; border-radius: 16px }
  .pg-card.m2 .m2-media { aspect-ratio: 16/9 }
  .pg-card.m2 .card-acts { top: 9px; right: 9px }
  .pg-card.m2 .card-act { width: 32px; height: 32px }
  .m2-photos { right: 9px !important; bottom: 8px !important; padding: 3px 8px !important }
  .m2-chiprow { padding: 8px 12px 0 !important }
  .m2-body { padding: 6px 12px 12px !important }
  .pg-card.m2 .m2-name { font-size: 15px !important }
  .pg-card.m2 .m2-loc { font-size: 12px !important; margin: 4px 0 10px !important; flex-wrap: nowrap !important; white-space: nowrap !important }
  .m2-loc-it { flex: 0 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .m2-loc-it svg { flex: none }
  .m2-div { margin-bottom: 10px }
  .m2-mid { gap: 8px; margin-bottom: 11px; align-items: flex-end }
  .pg-card.m2 .m2-price-line b { font-size: 19px !important; font-weight:var(--fw-700,700) !important }
  .pg-card.m2 .m2-price-line span { font-size: 11px !important }
  .m2-price { min-width: 0 }
  .pg-card.m2 .m2-trust { display: none !important }   /* same promise as the "MoMPA Verified" chip above — saves a row */
  .m2-cta { gap: 8px }
  .pg-card.m2 .m2-btn { font-size: 12.5px !important; font-weight: 600 !important; padding: 10px 4px !important; border-radius: 11px; border-width: 1px !important; gap: 4px }
  .m2-btn svg { width: 14px !important; height: 14px !important }

  /* ---------- Footer: Explore | Company side by side, lighter contact rows ---------- */
  .foot { padding: 36px 0 30px !important }
  body:has(#abnbTabs) .foot { padding-bottom: 84px !important }   /* home: body padding is 0, so clear the sticky bar */
  .foot .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important }
  .foot .foot-brand, .foot .foot-social { grid-column: 1 / -1 }
  .foot-contact { gap: 8px !important }
  .foot-contact a { font-size: 13px !important; font-weight: 500 !important; gap: 9px !important }
  .foot-contact a .ic { width: 30px !important; height: 30px !important; border-radius: 9px !important }
  .foot-contact a .ic svg { width: 15px !important; height: 15px !important }
  .foot-col h4 { font-size: 11.5px !important; margin-bottom: 10px !important; font-weight: 600 !important }
  .foot .foot-bottom { font-size: 12px !important; margin-top: 22px !important }

  /* ---------- Bottom bar ---------- */
  .sticky-bar a { height: 44px !important; font-size: 12px !important; font-weight: 600 !important }
}

@media (max-width: 360px) {
  .pg-card.m2 { width: 80vw !important }
  .m2-btn svg { display: none !important }
  .abnb-tabs { gap: 8px !important }
  .ab-seg-txt b { font-size: 11.5px !important }
}

/* ---------- Android only: lighter weights (Android renders bold heavier than iOS) ---------- */
@media (max-width: 600px) {
  html.is-android body { font-weight: 400 }
  html.is-android .v3h2, html.is-android .pg-card.m2 .m2-name, html.is-android .abnb-tab.active .tl,
  html.is-android .lang-toggle a, html.is-android .lang-toggle button,
  html.is-android .m2-price-off em, html.is-android .pg-card.m2 .m2-rating, html.is-android .flat-check { font-weight: 600 !important }
  html.is-android .abnb-tab .tl, html.is-android .ab-seg-txt b, html.is-android .pg-card.m2 .m2-btn,
  html.is-android .sticky-bar a, html.is-android .m2-price-sub, html.is-android .pg-card.m2 .m2-photos,
  html.is-android .flat-card-meta { font-weight: 500 !important }
  html.is-android .abnb-tab .ti svg, html.is-android .ab-seg-ic svg { stroke-width: 1.5 }
  html.is-android .abnb-post { border-width: 1px !important }
}

/* v38-ui (UX audit): shorter home page on phones — 2-column tiles, swipeable testimonials */
@media (max-width: 600px) {
  .v3cat-grid, .v3why-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important }
  .v3tst-row { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none }
  .v3tst-row::-webkit-scrollbar { display: none }
  .v3tst-card { flex: 0 0 82%; scroll-snap-align: start }
}
/* hidden bottom bar must not take keyboard focus */
.sticky-bar:not(.show) { visibility: hidden }

/* ===================================================================================================
   v99 cross-device (2026-10-04) — same proportions on every Android / iOS phone, nothing hidden or cut,
   every tap target >= 44px. Visual size of chips/icons is unchanged where the design wants them small:
   an invisible ::before grows the TAP area to 44px (same trick as the account button in auth.css).
   =================================================================================================== */
@media (max-width: 600px) {
  /* tap areas — invisible hit-slop, layout unchanged */
  .lang-toggle > a, .abnb-post, .wa-chip, .pg-card.m2 .card-act, .ss .ss-chips button, .pf-tags a, .pg-more,
  .brand-logo { position: relative }
  .lang-toggle > a::before, .abnb-post::before, .pg-card.m2 .card-act::before { content: ""; position: absolute; inset: -7px }
  .lang-toggle > a { min-width: 34px; justify-content: center }
  .wa-chip::before, .pf-tags a::before { content: ""; position: absolute; inset: -4px 0 }
  .ss .ss-chips button::before { content: ""; position: absolute; inset: -2px 0 }
  .pg-more::before { content: ""; position: absolute; inset: -14px -8px }
  .brand-logo::before { content: ""; position: absolute; inset: -8px -4px }
  .abnb-tab { min-width: 44px !important; justify-content: center }
  /* real buttons: one 44px height (were 42 / 43) */
  .hero .hero-actions > .btn, .pg-card.m2 .m2-btn { min-height: 44px; box-sizing: border-box }
  /* footer rows: 44px rows instead of 30–35px + gaps (same total rhythm) */
  .foot-contact { gap: 0 !important }
  .foot-contact a { min-height: 44px }
  .foot-col a { min-height: 44px; display: flex !important; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important }
  /* card location: never "Knowledge Park 3, Grea…" — area and metro each get their own line */
  .pg-card.m2 .m2-loc { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; white-space: normal !important }
  .pg-card.m2 .m2-loc-dot { display: none !important }
  .m2-loc-it { max-width: 100%; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35 }
}
/* Below the 390px reference the header row (logo · language · post · account) must stay ONE row, as on 390+.
   Logo and controls scale down with the screen instead of wrapping onto a 3rd row (280px Fold cover, 130% font). */
@media (max-width: 359px) {
  .abnb-nav { gap: 6px 4px }
  .abnb-right { gap: 4px !important }
  .abnb-nav .brand-full { max-width: 34vw !important }
  .lang-toggle > a { padding: 0 6px !important; min-width: 30px }
  .abnb-post { width: 32px; height: 32px }
  .abnb-post::before { inset: -6px }
}
/* Hero copy below the 390px reference: scale with the screen (same line breaks as 390, never a bigger look) */
@media (max-width: 389px) {
  .hero .hero-emo { font-size: clamp(26px, 8.72vw, 34px) !important }
  .hero .eyebrow { font-size: clamp(10.5px, 3.2vw, 12.5px); letter-spacing: clamp(1.4px, .58vw, 2.25px) }
  .hero .hero-pillar-list { font-size: clamp(11.5px, 3.33vw, 13px) !important }
  .hero p.lead { font-size: clamp(13.5px, 3.97vw, 15.5px) !important }
}
/* Cards + Short Stay tabs below 390: card is 78–80vw, so its text scales with it (390 = reference, unchanged) */
@media (max-width: 389px) {
  .pg-card.m2 .m2-name { font-size: clamp(13px, 3.85vw, 15px) !important }
  .pg-card.m2 .m2-loc { font-size: clamp(10.5px, 3.08vw, 12px) !important }
  .pg-card.m2 .m2-price-line b { font-size: clamp(16px, 4.87vw, 19px) !important }
  .pg-card.m2 .m2-btn { font-size: clamp(11px, 3.2vw, 12.5px) !important; padding-left: 2px !important; padding-right: 2px !important }
}
/* footer always clears the bottom bar, also when the bar grows by the iPhone home-indicator inset */
@media (max-width: 600px) { body:has(#abnbTabs) .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important } }
/* "What are you looking for?" tiles below 390: padding + text scale with the tile (was 18px padding on a 119px tile) */
@media (max-width: 389px) {
  .v3cat { padding: clamp(11px, 4.6vw, 18px) !important }
  .v3cat-ic { font-size: clamp(21px, 6.67vw, 26px) !important }
  .v3cat-t { font-size: clamp(15.5px, 4.87vw, 19px) !important }
  .v3cat-d { font-size: clamp(11px, 3.2vw, 12.5px) !important }
  .v3cat-go { font-size: clamp(11.5px, 3.33vw, 13px) !important; white-space: nowrap }
}
@media (max-width: 389px) {
  .pg-card.m2 .m2-managed { font-size: clamp(9.5px, 2.95vw, 11.5px) !important; padding: clamp(4px, 1.54vw, 6px) clamp(7px, 2.82vw, 11px) !important; white-space: nowrap }
}

/* ==========================================================================================================
   v101 (2026-10-04) — homepage Short Stay "luxe" (v102: on the page's own cream background; stay label sits in the
   badge row beside Boys/Girls PG; Verified · PG · stay badges drawn with dashed borders). Slim glass Day-wise / Hourly control (30px visible,
   44px tap via hit-slop) with a gold active state; PG · Flat · House · Hotel as a 4-up grid of 10px-radius chips
   (never scrolled / clipped, "Soon" drawn dashed on purpose); ivory cards with a gold hairline, cinematic 3:2
   photo + vignette, Fraunces name and price, quiet uniform badges, gold primary CTA + hairline secondary.
   Scoped to .sec.ss only — MOMPA_PG.cardHTML and the normal PG rows are untouched. Below 390px every size is a
   clamp() of the 390px reference, so 280 → 430 phones keep the same proportions.
   ========================================================================================================== */
.sec.ss {
  --ss-gold: #C79A3C; --ss-gold-l: #F2D49A; --ss-gold-m: #E8C67A; --ss-gold-ink: #8A6517;
  --ss-plum: #46143C; --ss-ink: #2A0F24; --ss-ivory: #FBF8F3; --ss-serif: 'Fraunces', Georgia, serif;
  --ss-sans: 'Plus Jakarta Sans', var(--font-body, system-ui), sans-serif;
  position: relative;
}

/* -- heading: gold eyebrow, ivory Fraunces title, softened lead -- */
.sec.ss .wrap::before { content: "By the day \00B7  By the hour"; display: block; margin: 0 0 10px; padding-left: 30px;
  font: 600 clamp(9.5px, 2.7vw, 10.5px)/1.2 var(--ss-sans); letter-spacing: clamp(.16em, .06vw + .14em, .24em); text-transform: uppercase; color: var(--ss-gold-ink); white-space: nowrap;
  background: linear-gradient(90deg, var(--ss-gold), var(--ss-gold-l)) left center / 22px 1px no-repeat }
.sec.ss .pg-sec-head { align-items: baseline; margin-bottom: 8px }
main#main .sec.ss .v3h2 { font-family: var(--ss-serif); font-weight: 500; font-size: clamp(23px, 7.4vw, 40px) !important;
  line-height: 1.08; letter-spacing: -.02em; color: var(--ss-ink); margin: 0 }
.sec.ss .pg-more { color: var(--ss-gold-ink); font-weight: 600; letter-spacing: .02em }
.sec.ss .pg-more:hover { color: var(--ss-plum) }
main#main .sec.ss .v3lead { color: #5f5376; font-size: clamp(12.5px, 3.6vw, 15px) !important; line-height: 1.55; margin: 0 0 18px !important; max-width: 52ch }

/* -- Day-wise / Hourly: slim glass segmented control, gold active -- */
.sec.ss .ss-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; max-width: 460px; margin: 0 0 10px; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(199,154,60,.35), 0 10px 24px -18px rgba(70,20,60,.45) }
.sec.ss .ss-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 0 10px;
  border-radius: 9px; background: transparent; color: var(--ss-plum); box-shadow: none; text-align: center }
.sec.ss .ss-tabs button::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px }
.sec.ss .ss-tabs button svg { width: 15px; height: 15px; color: var(--ss-gold) }
.sec.ss .ss-tabs button b { font: 600 13px/1.2 var(--ss-sans); letter-spacing: .02em; white-space: nowrap }
.sec.ss .ss-tabs button small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.sec.ss .ss-tabs button[aria-selected="true"] { color: var(--ss-ink);
  background: linear-gradient(180deg, #F7E3B2 0%, #E6C272 52%, #CDA046 100%);
  box-shadow: 0 6px 16px -8px rgba(199,154,60,.75), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(122,84,16,.25) }
.sec.ss .ss-tabs button[aria-selected="true"] svg { color: var(--ss-plum) }
.sec.ss .ss-tabs button:disabled { opacity: .42 }
@media (hover: hover) { .sec.ss .ss-tabs button:not([aria-selected="true"]):not(:disabled):hover { background: rgba(199,154,60,.08) } }

/* -- PG · Flat · House · Hotel: 4-up grid, 10px radius, label over a micro status line -- */
.sec.ss .ss-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 460px; margin: 0 0 22px; overflow: visible; flex-wrap: nowrap }
.sec.ss .ss-chips button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 44px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(199,154,60,.38);
  background: #fff; color: var(--ss-plum); font: 600 13px/1.1 var(--ss-sans); letter-spacing: .01em; box-shadow: none; white-space: nowrap }
.sec.ss .ss-chips button i { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none;
  font: 600 9px/1 var(--ss-sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-gold-ink) }
.sec.ss .ss-chips button:not(:disabled) i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ss-gold-m); box-shadow: 0 0 0 2px rgba(232,198,122,.18) }
.sec.ss .ss-chips button:not(:disabled) i::after { content: "stays" }
.sec.ss .ss-chips button[aria-pressed="true"] { color: var(--ss-ink); border-color: var(--ss-gold-m);
  background: linear-gradient(180deg, #FFFDF8 0%, #F5ECDA 100%); box-shadow: 0 10px 22px -12px rgba(199,154,60,.7), inset 0 1px 0 #fff }
.sec.ss .ss-chips button[aria-pressed="true"] i { background: none; color: var(--ss-gold-ink) }
.sec.ss .ss-chips button[aria-pressed="true"] i::before { background: var(--ss-gold); box-shadow: 0 0 0 2px rgba(199,154,60,.2) }
.sec.ss .ss-chips button:disabled { opacity: 1; cursor: not-allowed; border-style: dashed; border-color: rgba(70,20,60,.22); background: transparent; color: #8b8397 }
.sec.ss .ss-chips button:disabled i { background: none; color: #a08a5c; font-weight: 600 }
@media (hover: hover) { .sec.ss .ss-chips button:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--ss-gold); background: #fffaf0 } }
.sec.ss .ss-tabs button:focus-visible, .sec.ss .ss-chips button:focus-visible, .sec.ss .pg-more:focus-visible { outline: 2px solid var(--ss-plum); outline-offset: 2px }

/* -- row: room for the deep card shadows -- */
.sec.ss .pg-row { padding-top: 4px !important; padding-bottom: 30px !important; margin-bottom: -14px }

/* -- card: ivory, gold hairline, deep shadow -- */
.sec.ss .pg-card.m2 { border: 0; border-radius: 20px; overflow: hidden; background: #FFFDF8; font-family: var(--ss-sans);
  box-shadow: 0 0 0 1px rgba(199,154,60,.45), 0 26px 46px -28px rgba(70,20,60,.55), 0 10px 20px -14px rgba(70,20,60,.3);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s }
@media (hover: hover) {
  .sec.ss .pg-card.m2:hover { transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(242,212,154,.95), 0 34px 60px -30px rgba(70,20,60,.6), 0 0 40px -16px rgba(199,154,60,.5) }
  .sec.ss .pg-card.m2:hover .m2-media img { transform: scale(1.045) }
}
/* cinematic photo + vignette + gold hairline at its foot */
.sec.ss .pg-card.m2 .m2-media { aspect-ratio: 3 / 2; border-radius: 0 }
.sec.ss .pg-card.m2 .m2-media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1) }
.sec.ss .pg-card.m2 .m2-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(232,198,122,0), rgba(232,198,122,.95) 50%, rgba(232,198,122,0)) bottom / 100% 1px no-repeat,
              linear-gradient(0deg, rgba(24,11,46,.72) 0%, rgba(24,11,46,.18) 34%, rgba(24,11,46,0) 52%),
              linear-gradient(180deg, rgba(24,11,46,.38) 0%, rgba(24,11,46,0) 30%) }
.sec.ss .pg-card.m2 .m2-photos { right: 12px !important; bottom: 12px !important; z-index: 2; padding: 5px 9px !important; gap: 5px; border-radius: 8px;
  font: 600 10px/1 var(--ss-sans) !important; letter-spacing: .04em; color: rgba(255,255,255,.92);
  background: rgba(24,11,46,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22) }
.sec.ss .pg-card.m2 .m2-photos svg { width: 12px; height: 12px }
.sec.ss .pg-card.m2 .m2-topl { z-index: 2 }
.sec.ss .pg-card.m2 .m2-managed { padding: 6px 10px !important; gap: 5px; border-radius: 8px; font: 600 10px/1 var(--ss-sans) !important; letter-spacing: .04em;
  color: var(--ss-ink); background: rgba(251,248,243,.92); box-shadow: 0 6px 16px -8px rgba(0,0,0,.6) }
.sec.ss .pg-card.m2 .m2-managed svg { color: var(--ss-gold) }
.sec.ss .pg-card.m2 .card-acts { top: 12px; right: 12px; z-index: 3 }
.sec.ss .pg-card.m2 .card-act { width: 32px; height: 32px; color: #fff; background: rgba(24,11,46,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) }
.sec.ss .pg-card.m2 .card-act svg { width: 15px; height: 15px }

/* quiet, uniform badges */
.sec.ss .pg-card.m2 .m2-chiprow { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 4px !important; white-space: nowrap; padding: 14px 16px 0 !important; margin: 0 }
.sec.ss .pg-card.m2 .m2-verify, .sec.ss .pg-card.m2 .m2-gender { flex: none; gap: 3px !important; padding: 4px 6px !important; border-radius: 6px; background: transparent;
  font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase; line-height: 1 }
.sec.ss .pg-card.m2 .m2-chiprow::after { content: "Per day"; flex: none; display: inline-flex; align-items: center; padding: 4px 6px !important; border-radius: 6px;
  font: 600 9.5px/1 var(--ss-sans); letter-spacing: .05em !important; text-transform: uppercase; color: var(--ss-plum); background: #FBF4E6; border: 1px dashed var(--ss-gold) }
.sec.ss .pg-card.m2[data-href*="stay=hour"] .m2-chiprow::after { content: "Per hour" }
.sec.ss .pg-card.m2 .m2-verify { color: var(--ss-gold-ink); box-shadow: none; border: 1px dashed rgba(199,154,60,.75) }
.sec.ss .pg-card.m2 .m2-verify svg { color: var(--ss-gold); width: 10px; height: 10px }
.sec.ss .pg-card.m2 .m2-gender { color: #5b2a86; box-shadow: none; border: 1px dashed rgba(109,58,163,.55) }
.sec.ss .pg-card.m2 .m2-gender svg { color: #6D3AA3; width: 10px; height: 10px }

/* typography: Fraunces name, quiet gold rating, refined location */
.sec.ss .pg-card.m2 .m2-body { padding: 10px 16px 16px !important }
.sec.ss .pg-card.m2 .m2-head { align-items: baseline; gap: 10px }
.sec.ss .pg-card.m2 .m2-name { font-family: var(--ss-serif) !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.2 !important;
  letter-spacing: -.012em; color: var(--ss-ink); text-wrap: balance }
.sec.ss .pg-card.m2 .m2-name a { color: inherit }
.sec.ss .pg-card.m2 .m2-rating { padding: 0; gap: 4px; background: none; color: var(--ss-ink); font-family: var(--ss-serif); font-size: 15px !important; font-weight: 600 !important }
.sec.ss .pg-card.m2 .m2-rating svg { width: 13px; height: 13px; color: var(--ss-gold) }
.sec.ss .pg-card.m2 .m2-loc { margin: 6px 0 0 !important; color: #6E5F78; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .005em;
  flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; white-space: normal !important }
.sec.ss .pg-card.m2 .m2-loc-dot { display: none !important }
.sec.ss .pg-card.m2 .m2-loc-it svg { color: var(--ss-gold); width: 12px; height: 12px }

/* price as the hero — gold hairline above, serif figure, gold unit */
.sec.ss .pg-card.m2 .m2-div { display: block; height: 1px; margin: 14px 0 12px; background: linear-gradient(90deg, rgba(199,154,60,.6), rgba(199,154,60,.06)) }
.sec.ss .pg-card.m2 .m2-mid { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none; align-items: flex-end }
.sec.ss .pg-card.m2 .m2-trust { display: none !important }
.sec.ss .pg-card.m2 .m2-price small { font-size: 9.5px !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ss-gold-ink) }
.sec.ss .pg-card.m2 .m2-price-off { margin: 0 0 4px }
.sec.ss .pg-card.m2 .m2-price-line { gap: 6px }
.sec.ss .pg-card.m2 .m2-price-line b { font-family: var(--ss-serif); font-size: 30px !important; font-weight: 600 !important; line-height: 1; letter-spacing: -.02em;
  color: var(--ss-plum); background: none; -webkit-text-fill-color: currentColor }
.sec.ss .pg-card.m2 .m2-price-line span { color: var(--ss-gold-ink); font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .02em }

/* CTAs: gold primary, hairline secondary */
.sec.ss .pg-card.m2 .m2-cta { gap: 8px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) }
.sec.ss .pg-card.m2 .m2-btn { position: relative; overflow: hidden; min-height: 44px; box-sizing: border-box; border-radius: 12px; gap: 5px;
  font-family: var(--ss-sans); font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0; padding: 10px 4px !important }
.sec.ss .pg-card.m2 .m2-btn.ghost { background: transparent; color: var(--ss-plum); border: 1px solid rgba(70,20,60,.32) !important }
.sec.ss .pg-card.m2 .m2-btn.solid { color: var(--ss-ink) !important; border: 1px solid #BE9033 !important;
  background: linear-gradient(180deg, #F6DFA6 0%, #E5BF6C 50%, #CB9D41 100%) !important;
  box-shadow: 0 10px 20px -10px rgba(150,105,25,.85), inset 0 1px 0 rgba(255,255,255,.65) }
.sec.ss .pg-card.m2 .m2-btn.solid::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); transform: skewX(-18deg); transition: left .7s ease }
@media (hover: hover) {
  .sec.ss .pg-card.m2 .m2-btn.ghost:hover { background: rgba(70,20,60,.05); border-color: var(--ss-plum) !important }
  .sec.ss .pg-card.m2 .m2-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(150,105,25,.9), inset 0 1px 0 rgba(255,255,255,.7) }
  .sec.ss .pg-card.m2 .m2-btn.solid:hover::after { left: 120% }
}
.sec.ss .pg-card.m2 .m2-btn:focus-visible { outline: 2px solid var(--ss-plum); outline-offset: 2px }

/* empty state on the band */
.sec.ss .ss-empty { background: #fffaf0; border: 1px dashed rgba(199,154,60,.45); color: #5f5376 }

/* tablet / desktop: a touch more air and scale */
@media (min-width: 601px) {
  .sec.ss .pg-row { gap: 20px }
  .sec.ss .pg-card.m2 .m2-chiprow { padding: 16px 20px 0 !important }
  .sec.ss .pg-card.m2 .m2-body { padding: 10px 20px 20px !important }
  .sec.ss .pg-card.m2 .m2-name { font-size: 21px !important }
  .sec.ss .pg-card.m2 .m2-price-line b { font-size: 34px !important }
  .sec.ss .pg-card.m2 .m2-btn { font-size: 13.5px !important; min-height: 46px }
  .sec.ss .ss-tabs button { min-height: 32px }
  .sec.ss .ss-tabs button::before { top: -6px; bottom: -6px }
}
/* phones: card edges use the 12px rhythm of the PG rows */
@media (max-width: 600px) {
  .sec.ss .pg-card.m2 { border-radius: 18px }
  .sec.ss .pg-card.m2 .m2-chiprow { padding: 12px clamp(12px, 4.1vw, 16px) 0 !important }
  .sec.ss .pg-card.m2 .m2-body { padding: 8px clamp(12px, 4.1vw, 16px) clamp(12px, 4.1vw, 16px) !important }
}
/* below the 390px reference everything scales with the screen (same look as 390, just smaller) */
@media (max-width: 389px) {
  .sec.ss .ss-tabs button { padding: 0 clamp(6px, 2.4vw, 10px); gap: clamp(5px, 1.8vw, 7px) }
  .sec.ss .ss-tabs button b { font-size: clamp(11.5px, 3.33vw, 13px) }
  .sec.ss .ss-tabs button svg { width: clamp(13px, 3.85vw, 15px); height: clamp(13px, 3.85vw, 15px) }
  .sec.ss .ss-chips { gap: clamp(4px, 1.54vw, 6px) }
  .sec.ss .ss-chips button { font-size: clamp(11.5px, 3.33vw, 13px) }
  .sec.ss .ss-chips button i { font-size: clamp(7.5px, 2.31vw, 9px); letter-spacing: .1em }
  .sec.ss .pg-card.m2 .m2-name { font-size: clamp(15.5px, 4.87vw, 19px) !important }
  .sec.ss .pg-card.m2 .m2-rating { font-size: clamp(12.5px, 3.85vw, 15px) !important }
  .sec.ss .pg-card.m2 .m2-loc { font-size: clamp(10.5px, 3.08vw, 12px) !important }
  .sec.ss .pg-card.m2 .m2-price-line b { font-size: clamp(24px, 7.7vw, 30px) !important }
  .sec.ss .pg-card.m2 .m2-price-line span { font-size: clamp(10px, 2.95vw, 11.5px) !important }
  .sec.ss .pg-card.m2 .m2-btn { font-size: clamp(10.5px, 3.2vw, 12.5px) !important; gap: clamp(3px, 1vw, 6px) }
  .sec.ss .pg-card.m2 .m2-btn svg { width: clamp(12px, 3.6vw, 14px) !important; height: clamp(12px, 3.6vw, 14px) !important }
}
@media (prefers-reduced-motion: reduce) {
  .sec.ss .pg-card.m2, .sec.ss .pg-card.m2 .m2-media img, .sec.ss .pg-card.m2 .m2-btn, .sec.ss .pg-card.m2 .m2-btn.solid::after { transition: none !important }
  .sec.ss .pg-card.m2:hover, .sec.ss .pg-card.m2:hover .m2-media img, .sec.ss .pg-card.m2 .m2-btn.solid:hover { transform: none !important }
  .sec.ss .pg-card.m2 .m2-btn.solid::after { display: none }
}
/* phones: Verified · PG · Per day badges always on one line */
@media (max-width: 600px) {
  .sec.ss .pg-card.m2 .m2-verify, .sec.ss .pg-card.m2 .m2-gender, .sec.ss .pg-card.m2 .m2-chiprow::after { font-size: clamp(7px, 2.25vw, 8.8px) !important; letter-spacing: .03em !important; padding: 4px clamp(4px, 1.3vw, 5px) !important }
}
@media (max-width: 319px) { .sec.ss .pg-card.m2 .m2-verify svg, .sec.ss .pg-card.m2 .m2-gender svg { display: none } }