/* Sections marked hide-on-mobile (via /admin/settings) are hidden only on small screens */
    @media (max-width: 700px) { .hide-on-mobile { display: none !important; } }
    /* Clean, function-first homepage styling - minimal decoration, search widget as the focus */
    /* Hero gradient - matches the reference screenshot's purple -> pink -> orange. */
    .clean-hero {
      position: relative; overflow: hidden;
      background: none;
      padding: 10px 0 24px;
    }
    .clean-hero .container { max-width: 1140px; position: relative; text-align: left; }
    .hero-headline { font-size: 3.1rem; line-height: 1.06; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
    /* Same reduced size on all 4 tab headlines (Stays/Planner/Airport Taxi/Car Rental) now -
       Airport Taxi/Car Rental used to skip this and render at the full 3.1rem base size, which
       made the headline visibly jump in size when switching tabs. Own bottom margin here
       rather than inheriting the base .hero-headline's margin:0. */
    .hero-headline-sm { font-size: 1.9rem; margin-bottom: 10px; }
    .hero-sub { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 1.1rem; font-weight: 400; color: var(--text-secondary); max-width: 560px; margin: 16px 0 0; }
    .hero-eyebrow { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--cta-primary); letter-spacing: 0.02em; margin: 0 0 14px; }
    @media (max-width: 700px) { .hero-eyebrow { font-size: 0.85rem; } }

    /* Hero-level Stays / Travel Planner / Airport Taxi / Car Rental state - switches which of
       the four full panels below (#heroStaysPanel etc.) is visible. Driven by the ?tab= request
       param now (see the section tag's th:with above), set by clicking one of the category
       tabs in the header (.nav-tabs, see fragments.html + style.css) - those used to be a
       button row inside this card, but that only worked on the homepage; moved to the shared
       header so they work as real navigation from any page. Separate from, and positioned
       above, the existing .hs-tabs (Search Stays / By City / Near Me), which only exist inside
       the Stays panel's own search widget. */
    /* Short tagline sitting at the very top of the white card (Option C: the big headline stays
       outside on the hero bg, only this one warm line lives inside the card). Now the first
       element in the card since the tab strip that used to sit below it moved to the header. */
    .hero-card-tagline { background: var(--white); border-radius: 18px 18px 0 0; padding: 22px 26px 14px; text-align: left; font-size: 0.85rem; color: #556372; font-weight: 500; }
    @media (max-width: 700px) { .hero-card-tagline { padding: 18px 18px 10px; font-size: 0.8rem; } }

    /* Search panel now joins the tab strip above it: flat top corners, no top margin, so the two
       form a single white card. The whole card's shadow lives on the search panel. */
    #heroStaysPanel .hero-search-panel, #heroPlannerPanel .hero-search-panel { border-radius: 0 0 18px 18px; margin-top: 0; }

    .hero-planner-form { padding: 22px 26px; }

    /* Three trust points as individual white pill-cards on the dark hero background, matching
       the reference "trust badge strip" style (icon circle + bold headline + subtext, each in
       its own rounded card) rather than the previous flat row-with-dividers layout. */
    .hero-trust-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; margin: 26px 0 0; }
    .hero-trust-item {
      flex: 1 1 220px; display: flex; align-items: center; gap: 14px; text-align: left;
      background: #FFFFFF; border-radius: 14px; padding: 16px 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    }
    .hero-trust-ico {
      width: 46px; height: 46px; border-radius: 12px; background: #F1EAFB;
      color: var(--navy-header); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .hero-trust-ico svg { width: 22px; height: 22px; }
    .hero-trust-item strong { display: block; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--navy-header); }
    .hero-trust-item span.hero-trust-desc { display: block; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.8rem; font-weight: 400; color: #616C76; margin-top: 2px; }
    @media (max-width: 900px) { .hero-trust-row { gap: 12px; } .hero-trust-item { flex-basis: 100%; } }
    /* Verified Listings / No Hidden Fees / Talk to Real Host - hidden on mobile per explicit
       request, to keep the mobile hero focused on the search panel rather than scrolling
       past three badges to reach it. */
    @media (max-width: 560px) { .hero-trust-row { display: none; } }

    .hero-search-panel { position: relative; text-align: left; background: var(--white); border-radius: 18px; box-shadow: 0 12px 35px rgba(0,0,0,0.18); overflow: visible; margin-top: 24px; }
    @media (max-width: 700px) { .hero-headline { font-size: 2.1rem; } .hero-headline-sm { font-size: 1.6rem; } }

    /* Hero search panel - mode tabs (Search Stays / By City / Near Me) on top, boxed search
       fields below, gradient Search button inline with the fields. Replaces the old separate
       "What kind of stay" section further down the page - property type filtering now lives
       as a secondary pill row under the search fields instead of the top-level tabs. */

    .hs-tabs { display: flex; gap: 4px; padding: 6px 18px 0; border-bottom: 1px solid var(--line); }
    .hs-tab { display: flex; align-items: center; gap: 8px; background: none; border: none; border-bottom: 3px solid transparent; padding: 14px 16px; cursor: pointer; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.9rem; font-weight: 700; color: #616C76; }
    .hs-tab-ico { font-size: 1rem; color: var(--navy-header); }
    .hs-tab.active { color: var(--navy-header); border-bottom-color: var(--gold); }
    .hs-tab:hover:not(.active) { color: var(--ink); }
    @media (max-width: 520px) { .hs-tab { padding: 12px 10px; font-size: 0.82rem; } }

    .hero-fields-wrap { padding: 22px 26px; }
    .hs-hint { font-size: 0.85rem; color: #556372; margin: 0 0 14px; }

    .hero-fields-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr auto; gap: 0; align-items: stretch; min-height: 84px; }
    /* Travel Planner variant - same field/button styling as Stays, just 4 columns instead of 5
       since there's no Guests field. Placed before the mobile media queries below so those
       still win at their breakpoints exactly as they already do for the 5-column version. */
    .hero-fields-grid.hero-fields-grid--4col { grid-template-columns: 1.5fr 1fr 1fr auto; }
    /* Desktop: invisible to the grid, so the two date fields inside still lay out as two
       ordinary direct grid items exactly as before. Mobile turns this into a real flex row
       (see the 520px block below) so check-in/check-out sit side by side, Booking.com-style,
       instead of stacking as two full-width rows. */
    .hero-date-row { display: contents; }
    .hero-field { padding: 0 24px; background: transparent; border: none; border-right: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .hero-field:first-child { padding-left: 0; }
    .hero-field.active-field { border-color: var(--line); }
    /* flex:1 + min-width:0 is what makes the input actually take the field's full available
       width instead of shrink-wrapping to its own content - without this, the Destination
       placeholder text was getting clipped mid-word instead of using the space available. */
    .hero-field-full { flex: 1; min-width: 0; }
    .hero-field label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #556372; margin-bottom: 6px; }
    .hero-field select, .hero-field input { width: 100%; border: none; background: transparent; padding: 0; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
    .hero-field select:focus, .hero-field input:focus { outline: none; }
    .hs-field-row { display: flex; align-items: center; gap: 8px; }
    .hs-field-row input { flex: 1; min-width: 0; }
    .hs-field-row input::placeholder { color: #616C76; font-weight: 500; }
    .hs-field-ico { color: var(--navy-header); font-size: 1.05rem; flex-shrink: 0; margin-top: 22px; }
    /* Small muted line under check-in/check-out showing the weekday for the selected date -
       computed client-side (see the script below) since a native <input type="date"> can't
       render supplementary text itself. No custom calendar icon on these two fields - the
       native date input already shows its own picker icon, and adding another produced a
       doubled-up icon look. */
    .hs-field-dow { display: block; font-size: 0.78rem; font-weight: 500; color: #8A93A0; margin-top: 2px; }
    .hs-guests-row { display: flex; align-items: baseline; gap: 6px; }
    .hs-guests-row input { width: 26px; flex: none; -moz-appearance: textfield; }
    .hs-guests-row input::-webkit-outer-spin-button, .hs-guests-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .hs-guests-suffix { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
    /* Visual-only chevron next to Guests - the field stays a plain number input
       functionally, this just matches the "2 Guests ⌄" look from the reference design. */
    .hs-field-chevron { color: #8A93A0; font-size: 0.7rem; margin-left: 4px; flex-shrink: 0; margin-top: 22px; }
    .hero-field-btn { border: none; background: none; padding: 0 0 0 20px; display: flex; }
    .hero-search-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      flex: 1; background: var(--navy-header); color: #FFFFFF; border: none;
      font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em;
      padding: 0 30px; border-radius: 12px; cursor: pointer; box-shadow: 0 10px 24px rgba(0,27,62,0.28);
      min-height: 60px;
    }
    .hero-search-btn:hover { background: var(--secondary-navy); filter: none; }
    @media (max-width: 900px) { .hero-fields-grid, .hero-fields-grid.hero-fields-grid--4col { grid-template-columns: repeat(2, 1fr); } .hero-field { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 0; } .hero-field-btn { grid-column: 1 / -1; padding-left: 0; padding-top: 14px; } .hero-search-btn { padding: 14px; } }

    /* ---------- "I need a stay" boxed search bar (#hsPanel-search only) ----------
       Deliberately its own class prefix (.hb-*) rather than reusing .hero-field/.hero-fields-grid
       above - those are shared with the Travel Planner / Airport Taxi / Car Rental panels, which
       keep their existing divider-style layout untouched. This is only for the Search Stays
       panel's redesigned bar: individually boxed fields, two rows (destination/dates/guests, then
       property type/budget/preferences), full-width submit button underneath. */
    .hb-grid { display: grid; gap: 14px; margin-bottom: 14px; }

    /* CTA sitting inline on the same row as the search fields, instead of its own full-width
       row below - the button gets its own grid column, sized to fit its label without eating
       into the other fields. Falls back to a full-width row of its own once the grid itself
       collapses to fewer columns (900px), since squeezing a 5th column in alongside 1-2 stacked
       field columns would just look cramped, not "inline". */
    .hb-grid-stays { grid-template-columns: repeat(4, 1fr) minmax(160px, auto); }
    .hb-grid-planner { grid-template-columns: repeat(3, 1fr) minmax(160px, auto); }
    @media (max-width: 900px) {
      .hb-grid-stays { grid-template-columns: repeat(2, 1fr); }
      .hb-grid-planner { grid-template-columns: 1fr; }
      .hb-field-btn { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) { .hb-grid-stays { grid-template-columns: 1fr; } }
    .hb-field-btn label { visibility: hidden; }

    .hb-field { position: relative; min-width: 0; }
    .hb-field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
    .hb-box {
      display: flex; align-items: center; gap: 10px; width: 100%; height: 50px;
      border: 1.5px solid var(--line); border-radius: 10px; background: var(--white);
      padding: 0 14px; box-sizing: border-box; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
    }
    .hb-box:focus-within { border-color: var(--blue-mid); }
    .hb-ico { color: #8A93A0; font-size: 1rem; flex-shrink: 0; line-height: 1; }
    .hb-box input[type=text], .hb-box input[type=date] {
      flex: 1; min-width: 0; border: none; background: transparent; padding: 0; outline: none;
      font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--ink);
    }
    .hb-box input::placeholder { color: #9AA5B1; font-weight: 400; }
    .hb-select-box { position: relative; }
    .hb-select-box select {
      flex: 1; min-width: 0; border: none; background: transparent; outline: none; appearance: none;
      -webkit-appearance: none; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.9rem; font-weight: 500;
      color: var(--ink); padding: 0 20px 0 0; cursor: pointer;
    }
    .hb-chevron { color: #8A93A0; font-size: 0.65rem; flex-shrink: 0; }
    .hb-box.hb-select-box .hb-chevron { position: absolute; right: 14px; pointer-events: none; }

    /* Guests & Rooms / Preferences - both real value pickers, but "2 Guests, 1 Room" and a
       multi-select amenities list can't be expressed as a single native <select>, so these two
       are a button that opens a small popover panel instead. The values themselves still travel
       as ordinary form fields (hidden inputs for guests/rooms, real checkboxes for preferences)
       so the surrounding <form> submits exactly like every other field here. */
    .hb-popover-trigger { cursor: pointer; text-align: left; }
    .hb-box-text { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hb-popover {
      position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 240px; z-index: 40;
      background: var(--white); border: 1px solid var(--line); border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0,27,62,0.18); padding: 16px;
    }
    .hb-stepper-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
    .hb-stepper-row span:first-child { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
    .hb-stepper { display: flex; align-items: center; gap: 12px; }
    .hb-stepper button {
      width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white);
      color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
    }
    .hb-stepper button:hover { border-color: var(--navy-header); }
    .hb-stepper span { min-width: 18px; text-align: center; font-weight: 700; font-size: 0.9rem; }
    .hb-popover-done {
      width: 100%; margin-top: 10px; padding: 9px; border: none; border-radius: 8px;
      background: var(--navy-header); color: var(--white); font-weight: 700; font-size: 0.85rem; cursor: pointer;
    }
    .hb-popover-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; max-height: 260px; overflow-y: auto; }
    .hb-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 0.85rem; color: var(--charcoal); cursor: pointer; }
    .hb-check-row input { width: auto; accent-color: var(--navy-header); }

    .hb-submit-row { margin-top: 4px; }
    .hb-submit-btn {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--cta-primary); color: #FFFFFF; border: none; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
      font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; padding: 0 16px; border-radius: 10px;
      cursor: pointer; box-shadow: 0 8px 18px rgba(200,16,46,0.28); height: 50px; white-space: nowrap;
    }
    .hb-submit-btn:hover { filter: brightness(0.92); }

    /* Compact, Booking.com-style widget on mobile: no VISIBLE floating field labels (icon +
       value is enough at this size and it's a lot of vertical real estate saved), check-in/
       check-out share one row instead of stacking as two, and every row is noticeably shorter.
       Labels are hidden visually only (sr-only below), not display:none - the latter removes a
       label from the accessibility tree entirely, which is exactly what an accessibility audit
       flagged: every hero field's <input>/<select> lost its accessible name on mobile, since
       the <label for="..."> associated with it was gone from that tree, not just visually
       hidden. Fixed for every hero field this way, not only the one the audit happened to catch
       (check-in) - the same display:none applied identically to all of them. */
    @media (max-width: 520px) {
      .hero-fields-wrap { padding: 14px 16px; }
      .hero-fields-grid, .hero-fields-grid.hero-fields-grid--4col { grid-template-columns: 1fr; gap: 0; }
      .hero-field { padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
      .hero-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
      .hero-field select, .hero-field input { font-size: 0.9rem; }
      .hs-field-ico { margin-top: 0; }
      .hero-date-row { display: flex; gap: 12px; }
      .hero-date-row .hero-field { flex: 1; padding: 12px 0; }
      .hero-date-row .hero-field:first-child { border-right: 1px solid var(--line); padding-right: 12px; }
      .hs-field-chevron { margin-top: 0; }
      .hero-field-btn { grid-column: auto; padding: 12px 0 0; border-bottom: none; }
      .hero-search-btn { padding: 14px; min-height: 50px; }
    }

    /* Property type filter - now a secondary pill row under the search fields rather than the
       top-level tabs (those are the Search Stays / By City / Near Me mode tabs now). */
    .stay-type-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .stay-type-tab { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 30px; padding: 8px 16px; cursor: pointer; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }
    .stay-type-tab .stt-icon { font-size: 0.95rem; line-height: 1; }
    .stay-type-tab span:last-child { font-size: 0.8rem; font-weight: 600; color: #556372; white-space: nowrap; }
    .stay-type-tab.active { background: rgba(0,27,62,0.06); border-color: var(--navy-header); }
    .stay-type-tab.active span:last-child { color: var(--navy-header); }
    .stay-type-tab:hover span:last-child { color: var(--ink); }

    /* By City panel */
    .hs-city-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .hs-city-chip { padding: 10px 20px; border: 1px solid var(--line); border-radius: 30px; font-size: 0.85rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
    .hs-city-chip:hover { border-color: #9333EA; background: rgba(147,51,234,0.06); color: #9333EA; }

    /* Near Me panel */
    .hs-near-box { text-align: center; padding: 8px 0; }
    .hs-near-city { font-family: 'Inter', 'Noto Sans Devanagari',sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 4px 0 14px; }
    .hs-near-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; text-decoration: none; }
    .hs-near-alt-link { color: #9333EA; font-weight: 700; font-size: 0.85rem; text-decoration: none; margin-left: 6px; }
    .hs-near-alt-link:hover { text-decoration: underline; }

    .quick-badges { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 10px 0 2px; }
    .quick-badges span { font-size: 0.78rem; color: rgba(255,255,255,0.92); font-weight: 600; display: flex; align-items: center; gap: 6px; }

    .hero-taxi-pill {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 18px;
      background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); border-radius: 30px;
      color: #FFFFFF; font-size: 0.82rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(4px);
      transition: background 0.15s ease;
    }
    .hero-taxi-pill:hover { background: rgba(255,255,255,0.26); }
    .hero-taxi-pill strong { font-weight: 800; color: var(--gold); }

    /* List your property - homepage owner-acquisition banner, right below the hero */
    .lp-banner { padding-top: 28px; }
    .lp-banner-inner {
      background: var(--ink); border-radius: 12px; padding: 26px 30px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    }
    .lp-banner-text .eyebrow { color: #F2C230; }
    .lp-banner-text h2 { color: var(--white); margin: 4px 0 6px; }
    .lp-banner-text p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.92rem; max-width: 480px; }
    .lp-banner-btn { background: var(--cta-primary); flex-shrink: 0; }
    @media (max-width: 560px) {
      .lp-banner-inner { padding: 20px; }
      .lp-banner-text h2 { font-size: 1.25rem; }
    }

    .quicklink-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    @media (max-width: 700px) { .quicklink-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .quicklink { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color 0.15s ease; }
    .quicklink:hover { border-color: var(--ink); }
    .quicklink img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; }
    .quicklink span { font-size: 0.78rem; font-weight: 600; color: var(--ink); text-align: center; }

    /* Top padding only, deliberately - these sections are reorderable (see the order:
       inline styles in index.html), so a fixed "top + bottom" padding would sometimes double up
       (two 28px gaps between neighbours) and sometimes need a hand-tuned padding-top:0 override
       to compensate, which broke the moment admin reordered sections. One consistent top-only
       value means every pair of neighbours gets exactly one correctly-sized gap, in any order. */
    .section-tight { padding: 40px 0 0; }
    .section-tight .eyebrow { margin-bottom: 2px; }
    .section-tight h2 { font-size: 1.15rem; margin: 0 0 10px; }

    .type-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .type-grid::-webkit-scrollbar { height: 5px; }
    .type-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .type-card { display: block; text-align: center; padding: 11px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color 0.15s ease; flex: 0 0 auto; min-width: 110px; scroll-snap-align: start; }
    .type-card:hover { border-color: var(--ink); }
    .type-card .icon { font-size: 1.6rem; margin-bottom: 4px; }
    .type-card span { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

    .trending-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .trending-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 30px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
    .trending-chip .fire { color: var(--rust); }
    .trending-chip:hover { border-color: var(--ink); }

    .planner-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    @media (max-width: 700px) { .planner-steps { grid-template-columns: 1fr; } }
    .planner-step { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 20px; text-align: center; }
    .planner-step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
    .planner-step h4 { font-size: 0.95rem; margin: 0 0 4px; }
    .planner-step p { font-size: 0.8rem; color: #556372; margin: 0; }

    /* Popular Destinations - gradient cards, real data only (hotel count / price computed
       server-side from actual listings). */
    .top-dest-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .top-dest-title { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 0; color: var(--ink); white-space: nowrap; }
    .top-dest-title .grad {
      background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .top-dest-viewall { font-size: 0.88rem; font-weight: 700; color: #9333EA; white-space: nowrap; }
    /* Generic scroll-row arrow system, reused by every horizontal card row on this page
       (Popular Destinations, Offers, Guest Stories, Travel Inspiration). One set of styles and
       one JS module drive all of them, rather than a bespoke pair of buttons per section. */
    .scroll-wrap { position: relative; }
    .top-dest-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
    .top-dest-grid::-webkit-scrollbar { display: none; }
    .scroll-nav {
      position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
      border-radius: 50%; background: var(--white); border: 1px solid var(--line);
      box-shadow: 0 4px 14px rgba(0,27,62,0.16); display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5; font-size: 1.1rem; color: var(--ink);
      opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease;
    }
    /* Only ever visible when there's actually somewhere to scroll to in that direction -
       toggled by JS, never shown by default even on desktop. (Local Guides previously forced
       these always-visible, but with only 4-5 cards that usually fit without overflowing, the
       arrows just sat there doing nothing when clicked - worse than hiding them. Reverted to
       the same rule every other row uses: they'll appear on their own once there are enough
       guides to actually scroll to.) */
    .scroll-nav.can-scroll { opacity: 1; visibility: visible; pointer-events: auto; }
    .scroll-nav:hover { background: var(--parchment); }
    .scroll-nav.prev { left: -18px; }
    .scroll-nav.next { right: -18px; }
    @media (max-width: 900px) { .scroll-nav { display: none; } }

    /* Full-photo card, text pinned top-left over a gradient scrim that fades from the top -
       matches a photo-led destination card rather than the previous bottom-anchored layout. */
    .top-dest-card {
      position: relative; border-radius: 20px; padding: 18px;
      flex: 0 0 var(--dest-basis, calc(25% - 12px)); scroll-snap-align: start;
      height: 260px; display: flex; flex-direction: column; justify-content: flex-start;
      text-decoration: none; color: #FFFFFF; box-shadow: 0 8px 20px rgba(0,0,0,0.14);
      transition: transform 0.15s ease; overflow: hidden;
    }
    .top-dest-card:hover { transform: translateY(-3px); }
    .top-dest-card:hover .dest-photo { transform: scale(1.06); }
    .top-dest-card .dest-photo {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.4s ease; z-index: 0;
    }
    /* Scrim now fades from the top (where the text sits) rather than the bottom. */
    .top-dest-card .dest-scrim {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, rgba(6,14,28,0.75) 0%, rgba(6,14,28,0.25) 35%, rgba(6,14,28,0) 60%);
    }
    .top-dest-card > * { position: relative; z-index: 2; }
    .top-dest-card .state-label { font-size: 0.82rem; color: rgba(255,255,255,0.85); font-weight: 500; }
    .top-dest-card .icon { font-size: 1.7rem; margin-bottom: 8px; opacity: 0.9; }
    .top-dest-card .city-name { font-size: 1.4rem; font-weight: 800; color: #FFFFFF; line-height: 1.2; margin-top: 2px; }
    .top-dest-card.grad-1 { background: linear-gradient(160deg, #4F8EF7, #0B3D6B); }
    .top-dest-card.grad-2 { background: linear-gradient(160deg, #34C77B, #0F5C3E); }
    .top-dest-card.grad-3 { background: linear-gradient(160deg, #E0469B, #7A1E4E); }
    .top-dest-card.grad-4 { background: linear-gradient(160deg, #F2A900, #A85A00); }
    .top-dest-card.grad-5 { background: linear-gradient(160deg, #7C3AED, #3B1670); }
    .top-dest-card.grad-6 { background: linear-gradient(160deg, #00A699, #024F47); }
    @media (max-width: 900px) { .top-dest-card { flex: 0 0 calc(50% - 8px); height: 220px; } }
    @media (max-width: 560px) { .top-dest-card { flex: 0 0 78%; } }

    /* Why YatriSutra - real feature descriptions, no invented stats */
    .why-us-header { text-align: center; max-width: 640px; margin: 0 auto 28px; }
    .why-us-eyebrow { color: #9333EA; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
    .why-us-header .top-dest-title { white-space: normal; font-size: 1.9rem; }
    .why-us-sub { font-size: 0.92rem; color: #556372; margin-top: 10px; }
    .why-us-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 900px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 620px) { .why-us-grid { grid-template-columns: 1fr; } }
    .why-us-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
    .why-us-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px; color: #FFFFFF; }
    .why-us-icon.c1 { background: linear-gradient(135deg, #9333EA, #7C3AED); }
    .why-us-icon.c2 { background: linear-gradient(135deg, #34C77B, #0F5C3E); }
    .why-us-icon.c3 { background: linear-gradient(135deg, #E0469B, #C0392B); }
    .why-us-icon.c4 { background: linear-gradient(135deg, #F2A900, #FB923C); }
    .why-us-icon.c5 { background: linear-gradient(135deg, #4F8EF7, #0B72D9); }
    .why-us-icon.c6 { background: linear-gradient(135deg, #00A699, #024F47); }
    .why-us-card h3 { font-size: 1.02rem; margin: 0 0 8px; color: var(--ink); }
    .why-us-card p { font-size: 0.85rem; color: #556372; margin: 0; line-height: 1.55; }

    /* Guest Stories - real reviews only, pulled from the database, never fabricated */
    .stories-header { text-align: center; max-width: 640px; margin: 0 auto 28px; }
    .stories-badge { display: inline-flex; align-items: center; gap: 6px; background: #FEF3E2; color: #A85A00; font-size: 0.78rem; font-weight: 800; padding: 6px 16px; border-radius: 20px; margin-bottom: 14px; }
    .stories-header .top-dest-title { white-space: normal; font-size: 1.9rem; }
    .stories-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .stories-grid::-webkit-scrollbar { height: 6px; }
    .stories-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .story-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; flex: 0 0 var(--story-basis, calc(25% - 12px)); scroll-snap-align: start; display: flex; flex-direction: column; }
    .story-card .quote-mark { font-size: 1.6rem; color: #E0469B; font-weight: 800; line-height: 1; margin-bottom: 8px; }
    .story-card .stars { color: #F2A900; font-size: 0.85rem; margin-bottom: 10px; }
    .story-card .quote-text { font-size: 0.85rem; color: var(--charcoal); line-height: 1.55; flex: 1; }
    .story-card .stayed-at { font-size: 0.72rem; color: #9333EA; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 16px; }
    .story-card .stayed-at .place { color: #556372; font-weight: 600; text-transform: none; display: block; margin-top: 2px; }
    .story-card .reviewer-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
    .story-card .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #9333EA, #EC4899); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; }
    .story-card .reviewer-name { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
    @media (max-width: 900px) { .story-card { flex: 0 0 calc(50% - 8px); } }
    @media (max-width: 560px) { .story-card { flex: 0 0 82%; } }

    /* Bold stay card - used for Recommended/Featured Stays. Real photos stay front and
       center (unlike the destination cards, a listing's actual photo matters a lot here), but
       gets the same bold-shadow, rounded-corner, gradient-accent treatment as the rest of the
       redesigned homepage. Scoped to these two sections only - the shared .card class used on
       Similar Properties / city pages / search results is untouched. */
    .stay-card { background: var(--white); border-radius: 20px; overflow: hidden; position: relative; display: block; text-decoration: none; box-shadow: 0 8px 24px rgba(0,27,62,0.10); transition: transform 0.18s ease, box-shadow 0.18s ease; padding: 10px; }
    .scroll-grid .stay-card { flex: 0 0 260px; scroll-snap-align: start; }
    @media (max-width: 620px) { .scroll-grid .stay-card { flex-basis: 240px; } }
    .stay-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,27,62,0.20); }
    .stay-card .photo-wrap { position: relative; height: 172px; border-radius: 14px; overflow: hidden; }
    .stay-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .stay-card .badge-pill { position: absolute; top: 12px; left: 12px; padding: 6px 14px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #F2A900, #FB923C); box-shadow: 0 3px 10px rgba(0,0,0,0.28); }
    .stay-card .badge-pill.recommended { background: linear-gradient(135deg, #9333EA, #EC4899); }
    .stay-card .discount-badge { position: absolute; top: 12px; right: 12px; padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #C0392B, #E74C3C); box-shadow: 0 3px 10px rgba(0,0,0,0.28); }
    .stay-card .strike-price { font-size: 0.78rem; color: #616C76; text-decoration: line-through; font-weight: 500; display: block; }
    .stay-card .rating-pill { position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; color: #FFFFFF; background: rgba(20,20,30,0.55); backdrop-filter: blur(3px); }
    .stay-card .rating-pill .star { color: #F2A900; }
    .stay-card .body { padding: 14px 8px 8px; }
    .stay-card h3 { font-size: 1.1rem; margin: 0 0 3px; color: var(--ink); font-weight: 700; }
    .stay-card .prop-type { font-size: 0.82rem; color: #616C76; }
    .stay-card .price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
    .stay-card .price-row .amt { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
    .stay-card .price-row .amt small { font-weight: 400; font-size: 0.82rem; color: #616C76; }
    .stay-card .view-link { font-size: 0.9rem; font-weight: 700; color: #7C3AED; display: flex; align-items: center; gap: 2px; }
    /* Offers strip - real admin-managed offers only, pulled from OfferService.findLive() */
    .offers-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin-top: 16px; }
    .offers-scroll::-webkit-scrollbar { height: 6px; }
    .offers-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .offer-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: flex; box-shadow: 0 6px 18px rgba(0,27,62,0.08); transition: transform 0.15s ease; }
    .offer-card:hover { transform: translateY(-3px); }
    .offer-card img { width: 110px; height: auto; object-fit: cover; flex-shrink: 0; }
    .offer-card .body { padding: 14px; flex: 1; }
    .offer-badge { display: inline-block; background: linear-gradient(135deg, #F2A900, #FB923C); color: #FFFFFF; font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; margin-bottom: 6px; }
    .offer-card h3 { font-size: 0.92rem; margin: 0 0 4px; color: var(--ink); }
    .offer-card p { font-size: 0.78rem; color: #616C76; margin: 0 0 8px; }
    .offer-code { font-size: 0.76rem; color: #9333EA; font-weight: 700; }
    @media (max-width: 560px) { .offer-card { flex-basis: 260px; } }
    /* Kanwar Yatra route planner - interactive day-split, driven by admin-entered stages */
    .kr-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 18px; }
    .kr-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
    .kr-pace-btn { padding: 9px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--charcoal); }
    .kr-pace-btn.active { background: linear-gradient(135deg, #9333EA, #EC4899); border-color: transparent; color: #FFFFFF; }
    .kr-day { border-left: 3px solid #EC4899; padding: 4px 0 4px 18px; margin-bottom: 18px; }
    .kr-day-head { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
    .kr-day-meta { font-size: 0.78rem; color: #616C76; margin-bottom: 8px; }
    .kr-stage-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
    .kr-stage-row:last-child { border-bottom: none; }
    .kr-stage-name { color: var(--ink); font-weight: 600; }
    .kr-stage-name .halt { display: inline-block; font-size: 0.65rem; font-weight: 800; color: #FFFFFF; background: var(--sage); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
    .kr-stage-fac { font-size: 0.75rem; color: #616C76; }
    .kr-stage-km { color: #616C76; white-space: nowrap; font-size: 0.82rem; }
    .kr-note { font-size: 0.78rem; color: #616C76; margin-top: 14px; }

    /* Festival calendar - photo cards with a real, admin-set crowd/wait/best-for read per
       festival. Not a link (there's no individual festival page to send someone to), so no
       hover-lift - that visual cue is reserved for things that are actually clickable. */
    .fc-title { display: flex; align-items: center; gap: 12px; }
    .fc-title-badge { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #9333EA, #EC4899); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
    .fc-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: #9333EA; border: 1px solid rgba(147,51,234,0.35); padding: 9px 18px; border-radius: 30px; white-space: nowrap; text-decoration: none; transition: background 0.15s ease; }
    .fc-viewall:hover { background: rgba(147,51,234,0.06); }

    /* Summary chips - real computed data (festival count) plus optional admin-set fields
       (Site Settings > Festival Calendar summary); each hides individually if unset. */
    .fc-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
    .fc-chip { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; flex: 1 1 200px; min-width: 190px; }
    .fc-chip-ico { font-size: 1.15rem; flex-shrink: 0; }
    .fc-chip strong { display: block; font-size: 0.8rem; color: var(--ink); font-weight: 700; }
    .fc-chip span { display: block; font-size: 0.78rem; color: #556372; margin-top: 1px; }
    .fc-chip-pink { background: #FCE7F3; }
    .fc-chip-amber { background: #FEF3C7; }
    .fc-chip-green { background: #D1FAE5; }
    .fc-chip-blue { background: #DBEAFE; }

    .fc-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .fc-grid::-webkit-scrollbar { height: 6px; }
    .fc-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

    .fest-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
    @media (max-width: 560px) { .fest-card { flex-basis: 250px; } }
    .fest-cover { height: 170px; position: relative; overflow: hidden; }
    .fest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fest-cover-grad { background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); display: flex; align-items: center; justify-content: center; }
    .fest-cover .icon { font-size: 2rem; opacity: 0.9; }
    .fest-crowd-tag { position: absolute; top: 12px; left: 12px; font-size: 0.66rem; font-weight: 800; color: #FFFFFF; padding: 5px 12px; border-radius: 12px; background: #9333EA; }
    .fest-crowd-tag.fc-badge-very-busy { background: #9333EA; }
    .fest-crowd-tag.fc-badge-high { background: #E11D48; }
    .fest-crowd-tag.fc-badge-moderate { background: #F2A900; }
    .fest-crowd-tag.fc-badge-low { background: #00A699; }
    .fest-body { padding: 16px; }
    .fest-body h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); line-height: 1.3; }
    .fest-period { font-size: 0.78rem; font-weight: 700; color: #9333EA; }
    .fest-dates { font-size: 0.78rem; color: var(--ink); font-weight: 700; margin-top: 3px; }
    .fest-desc { font-size: 0.82rem; color: #556372; margin: 10px 0 0; line-height: 1.55; }
    .fest-stats { display: flex; gap: 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
    .fest-stat { display: flex; align-items: center; gap: 7px; }
    .fest-stat-ico { font-size: 0.95rem; flex-shrink: 0; }
    .fest-stat strong { display: block; font-size: 0.78rem; color: var(--ink); font-weight: 700; line-height: 1.3; }
    .fest-stat span { display: block; font-size: 0.68rem; color: #616C76; }
    .fest-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; color: #085041; background: #E1F5EE; padding: 9px 11px; border-radius: 8px; margin-top: 12px; line-height: 1.5; }
    .fest-tip .tip-icon { flex-shrink: 0; }
    .fest-tip strong { color: inherit; }

    /* Homepage FAQ accordion */
    .faq-title { display: inline-flex; align-items: center; gap: 12px; }
    .faq-title-badge { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #9333EA, #EC4899); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .faq-list { margin-top: 22px; }
    .faq-qa { margin-bottom: 28px; }
    .faq-qa:last-child { margin-bottom: 0; }
    .faq-row { display: flex; align-items: flex-start; gap: 14px; }
    .faq-row + .faq-row { margin-top: 10px; }
    .faq-badge {
      flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
      background: var(--light-bg); color: var(--ink); font-size: 0.78rem; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .faq-badge-a { color: var(--text-secondary); }
    .faq-q-text { flex: 1; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.98rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
    .faq-a-text { flex: 1; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; }
    /* Travel Inspiration articles */
    /* Horizontal scroll rather than a wrapping grid, so every published article is reachable
       without the section growing taller as more are added. */
    .art-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; margin-top: 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .art-grid::-webkit-scrollbar { height: 6px; }
    .art-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .art-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
    @media (max-width: 560px) { .art-card { flex-basis: 230px; } }
    .art-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,27,62,0.14); }
    .art-cover { height: 150px; background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); position: relative; }
    .art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .art-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.94); color: var(--ink); font-size: 0.66rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; }
    .art-body { padding: 16px; }
    .art-body h3 { font-size: 0.98rem; margin: 0 0 6px; color: var(--ink); line-height: 1.35; }
    .art-body p { font-size: 0.82rem; color: #556372; margin: 0; line-height: 1.5; }
    .art-read { font-size: 0.8rem; font-weight: 700; color: #9333EA; margin-top: 10px; display: inline-block; }
    .trending-chip .trend-note { display:block; font-size:0.7rem; color:#616C76; font-weight:500; margin-top:2px; }
    /* Local Guides - full-photo card with a "GUIDE" badge over the cover, state + city title in
       the body, matching the same visual weight as the Popular Destinations / Travel Inspiration
       cards above it on the page. Photo and state come from the linked City record (see
       LocalGuideCard) - falls back to the shared gradient+icon treatment when a city has no
       photo yet. */
    .lg-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; margin-top: 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .lg-grid::-webkit-scrollbar { height: 6px; }
    .lg-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .lg-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
    .lg-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,27,62,0.14); }
    @media (max-width: 560px) { .lg-card { flex-basis: 230px; } }
    .lg-cover { height: 180px; position: relative; overflow: hidden; }
    .lg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
    .lg-card:hover .lg-cover img { transform: scale(1.06); }
    .lg-cover-grad { background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); display: flex; align-items: center; justify-content: center; }
    .lg-cover .lg-icon { font-size: 2.2rem; opacity: 0.9; }
    .lg-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; background: #9333EA; color: #FFFFFF; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 6px 11px 6px 8px; border-radius: 8px; }
    .lg-badge-ico { font-size: 0.8rem; }
    .lg-body { padding: 16px; }
    .lg-loc { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: #9333EA; margin-bottom: 8px; }
    .lg-loc .lg-pin { font-size: 0.78rem; }
    .lg-body h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 8px; color: var(--ink); line-height: 1.3; }
    .lg-body p { font-size: 0.82rem; color: #556372; margin: 0; line-height: 1.55; }
    .lg-divider { border-top: 1px solid var(--line); margin: 14px 0 12px; }
    .lg-read { font-size: 0.82rem; font-weight: 700; color: #9333EA; display: inline-block; }
    /* Dot indicators under the row - generic, driven by the shared scroll-row JS module. */
    .scroll-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .scroll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
    .scroll-dot.active { background: #9333EA; transform: scale(1.25); }
    @media (max-width: 900px) { .scroll-dots { display: none; } }
    /* Trust strip under Local Guides - static, generic reassurance copy (not per-guide facts),
       same pattern as the "Book With Confidence" section elsewhere on the page. */
    .lg-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; padding: 22px 24px; background: var(--parchment); border-radius: 14px; }
    @media (max-width: 700px) { .lg-trust { grid-template-columns: repeat(2, 1fr); } }
    .lg-trust-item { display: flex; align-items: flex-start; gap: 10px; }
    .lg-trust-item .lg-trust-ico { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
    .lg-trust-item strong { display: block; font-size: 0.86rem; color: var(--ink); font-weight: 700; }
    .lg-trust-item span { display: block; font-size: 0.76rem; color: #616C76; margin-top: 2px; }
    /* Location-personalised strip. Fixed to the bottom and out of normal document flow, so
       when it appears after load it pushes nothing around - no layout shift, no Core Web
       Vitals penalty. Slides up rather than popping in. */
    #geoStrip {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
      background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); color: #FFFFFF;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
      transform: translateY(100%); transition: transform 0.35s ease; visibility: hidden;
    }
    /* Sits just above the persistent mobile bottom tab bar (see style.css) rather than under/
       behind it - bottom:0 would put this strip directly beneath the nav, unreachable. */
    @media (max-width: 900px) { #geoStrip { bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)); } }
    #geoStrip.show { transform: translateY(0); visibility: visible; }
    #geoStrip .inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; flex-wrap: wrap; }
    #geoStrip .msg { font-size: 0.88rem; font-weight: 600; }
    #geoStrip .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    #geoStrip a.geo-btn { background: #FFFFFF; color: var(--ink); font-size: 0.8rem; font-weight: 700; padding: 7px 15px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
    #geoStrip button.geo-dismiss { background: none; border: 1px solid rgba(255,255,255,0.5); color: #FFFFFF; font-size: 0.76rem; padding: 6px 12px; border-radius: 20px; cursor: pointer; }
    @media (max-width: 600px) { #geoStrip .inner { padding: 10px 0; } #geoStrip .msg { font-size: 0.82rem; } }
    /* Guest Houses by Purpose - sits directly under the search panel */
    .purpose-strip { padding: 22px 0 4px; }
    .purpose-strip h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--ink); text-align: center; }
    .purpose-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .purpose-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 10px 20px; text-decoration: none; color: var(--charcoal); font-size: 0.88rem; font-weight: 600; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
    .purpose-chip:hover { transform: translateY(-2px); border-color: #9333EA; box-shadow: 0 8px 18px rgba(0,27,62,0.12); }
    .purpose-chip .ico { font-size: 1.1rem; }
    .purpose-chip .cnt { font-size: 0.72rem; color: #616C76; font-weight: 500; }
    /* Guest houses by city - a compact directory rather than another card grid, so it reads
       differently from the photo-driven sections above it and stays scannable as the list grows. */
    .topcity-wrap { padding: 38px 0 14px; border-top: 1px solid var(--line); margin-top: 36px; }
    .topcity-head { text-align: center; margin-bottom: 24px; }
    .topcity-head h2 { font-size: 1.3rem; margin: 0 0 5px; color: var(--ink); }
    .topcity-head .sub { font-size: 0.86rem; color: #616C76; margin: 0; }

    .topcity-cols { column-count: 3; column-gap: 32px; max-width: 920px; margin: 0 auto; }
    @media (max-width: 800px) { .topcity-cols { column-count: 2; } }
    @media (max-width: 520px) { .topcity-cols { column-count: 1; } }

    .topcity-group { break-inside: avoid; margin-bottom: 22px; }
    .topcity-state { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9333EA; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
    .topcity-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; text-decoration: none; }
    .topcity-row .nm { font-size: 0.9rem; color: var(--charcoal); font-weight: 500; transition: color 0.15s ease; }
    .topcity-row:hover .nm { color: #9333EA; }
    .topcity-row .ct { flex-shrink: 0; font-size: 0.74rem; font-weight: 700; color: #7C3AED; background: #F3E8FF; padding: 2px 9px; border-radius: 10px; }
    .topcity-row .ct.soon { color: #616C76; background: var(--parchment); font-weight: 500; }