/* Self-hosted heading font: Neue Haas Grotesk Display Pro, Roman (400) and
   Medium (600), licensed and provided by Ro. */
@font-face{font-family:'Neue Haas';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/neuehaas-400.woff2') format('woff2')}
@font-face{font-family:'Neue Haas';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/neuehaas-600.woff2') format('woff2')}
:root{--ink:#17171a;--paper:#f3f2ee;--panel:#f7f6f3;--line:rgba(23,23,26,0.14);--display:'Neue Haas','Helvetica Neue',Arial,sans-serif;--mono:'Chivo Mono',ui-monospace,monospace;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--gutter:40px;--section-y:var(--s-9);--r-pill:999px;
  --ink-2:rgba(23,23,26,.70);--ink-3:rgba(23,23,26,.62);--ink-disabled:rgba(23,23,26,.45);--paper-2:rgba(243,242,238,.78);--paper-3:rgba(243,242,238,.62);--line-ui:rgba(23,23,26,.50);--line-dark:rgba(243,242,238,.18);--line-ui-dark:rgba(243,242,238,.40);--tint-hover:rgba(23,23,26,.04);--tint-hover-dark:rgba(243,242,238,.12);--paper-glass:rgba(243,242,238,.92);--scrim:linear-gradient(180deg,rgba(23,23,26,.5),rgba(23,23,26,.65));--scrim-side:linear-gradient(90deg,rgba(23,23,26,.9),rgba(23,23,26,.82) 55%,rgba(23,23,26,.6));--scrim-strong:rgba(23,23,26,.95);--focus:var(--ink);--focus-dark:var(--paper);--focus-offset:2px;--shadow-float:0 6px 20px rgba(23,23,26,.18);--shadow-bar:0 -6px 20px rgba(23,23,26,.12);
  --font-body:var(--mono);--t-display:clamp(2.25rem,1.318rem + 3.978vw,4.5rem);--t-headline:clamp(1.75rem,1.336rem + 1.768vw,2.75rem);--t-subhead:clamp(1.25rem,1.146rem + .442vw,1.5rem);--t-title:clamp(1rem,.974rem + .11vw,1.0625rem);--t-body:.875rem;--t-small:.8125rem;--t-label:.75rem;--w-regular:400;--w-strong:600;--w-mono:400;--w-mono-strong:500;
  --s-10:128px;--container:1200px;--container-narrow:820px;--measure:62ch;--measure-narrow:34ch;--r-0:0;--r-round:50%;--bw:1px;--bw-strong:2px;
  /* Square controls by default (Ro's brief 2, 22 Oct 2026); --r-pill is for the few exceptions. */
  --r-control:0;--r-card:0;
  /* Hover: a warm grey on paper (ink on it is 14:1), and a lighter black for filled ink controls (paper on it is 11:1). */
  --color-hover:#e6e4df;--color-hover-dark:#333333}
.t-display{font-family:var(--display);font-size:var(--t-display);font-weight:var(--w-strong);letter-spacing:0;text-transform:none}
.t-headline{font-family:var(--display);font-size:var(--t-headline);font-weight:var(--w-strong);letter-spacing:0;text-transform:none}
.t-subhead{font-family:var(--display);font-size:var(--t-subhead);font-weight:var(--w-strong);letter-spacing:0;text-transform:none}
.t-title{font-family:var(--display);font-size:var(--t-title);font-weight:var(--w-strong);letter-spacing:0;text-transform:none}
.t-body{font-family:var(--font-body);font-size:var(--t-body);text-transform:none}
.t-small{font-family:var(--font-body);font-size:var(--t-small);text-transform:none}
.t-label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase}
/* Mono text is uppercase, site-wide, except map attribution (left as the provider sets it). */
.t-label,.opt,.sub-chip,.vert-track span,.marquee-pause,.currency-select,.location-select,
.region-radio,.cat-chip{text-transform:uppercase;letter-spacing:.08em}
:focus-visible{outline:2px solid var(--focus);outline-offset:var(--focus-offset)}
.on-dark :focus-visible,footer :focus-visible{outline-color:var(--focus-dark)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{color:var(--ink);font-family:var(--display);font-weight:400;font-size:15px;line-height:1.5;min-height:100vh}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink)}
/* Plain text links underline on hover. */
a:not([class]):hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--color-hover)}
h1,h2,h3,.display{font-family:var(--display);text-transform:none;font-weight:600;letter-spacing:0}
.btn{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:11px 21px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;line-height:17px;text-transform:uppercase;letter-spacing:.02em;border:0;cursor:pointer;border-radius:var(--r-control)}
.btn::before{content:"";position:absolute;inset:-4px 0}
.btn:hover{background:var(--color-hover-dark);color:var(--paper)}
.btn-ghost{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:7px 14px;border:1px solid var(--line-ui);font-family:var(--mono);font-size:12px;line-height:17px;text-transform:uppercase;border-radius:var(--r-control)}
.btn-ghost::before{content:"";position:absolute;inset:-4px 0}
.btn-ghost:hover{border-color:var(--ink);background:rgba(23,23,26,.04);color:var(--ink)}
.hov:hover{border-color:var(--ink);background:rgba(23,23,26,.04);color:var(--ink)}
.opt,.sub-chip{position:relative;font:inherit;font-family:var(--mono);font-size:12px;padding:4px 12px;min-height:36px;display:inline-flex;align-items:center;cursor:pointer;border:1px solid var(--line-ui);background:transparent;color:var(--ink-2);border-radius:var(--r-control)}
.opt::before,.sub-chip::before{content:"";position:absolute;inset:-4px 0}
.opt[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
input,textarea{font-family:var(--mono);font-size:16px;line-height:17px;min-height:44px;padding:11px 0;background:none;border:0;border-bottom:1px solid var(--line-ui);color:var(--ink);border-radius:0}
input:focus,textarea:focus{border-bottom-color:var(--ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.navlink{color:var(--ink-3);border-bottom:1px solid transparent;padding-bottom:2px}
.navlink:hover,.navlink:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
.navlink.on{color:var(--ink);border-bottom-color:var(--ink)}
section[id]{scroll-margin-top:calc(var(--header-h, 116px) + 12px)}
/* Live demo carousel: a row of phones that scrolls sideways, driven by the arrows in app.js */
.phone-track{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.phone-track::-webkit-scrollbar{display:none}
.phone-track>figure{margin:0;flex:none;width:260px;scroll-snap-align:start}
.phone-frame{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform-origin:0 0;background:#fff}
.phone-nav{width:48px;height:48px;padding:0;justify-content:center;background:none;font:inherit;font-size:16px;cursor:pointer;color:var(--ink)}
.phone-nav:disabled{opacity:.3;cursor:default}
/* Dark sections (the contact block): invert links, inputs and the primary button */
.on-dark a{color:var(--paper)}
.on-dark a:hover{color:var(--paper);opacity:.7}
.on-dark input{color:var(--paper);border-bottom-color:var(--line-ui-dark)}
.on-dark input:focus{border-bottom-color:var(--paper)}
.on-dark .btn{background:var(--paper);color:var(--ink)}
.on-dark .btn:hover{background:var(--color-hover);color:var(--ink)}
/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-item summary{cursor:pointer;list-style:none;font-size:17px;line-height:1.3;letter-spacing:0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);font-size:18px;flex:none;color:var(--ink-3)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:14px 0 0;color:var(--ink-2);max-width:72ch}
/* Sticky business CTA bar, fixed to the bottom of the viewport */
/* Solution tiles: arrows in the gaps between the four steps */
.flow-arrow{position:absolute;top:50%;left:100%;width:32px;display:flex;justify-content:center;transform:translate(8px,-50%);color:var(--ink-3)}
/* Verticals scroller: driven by app.js, direction follows page scroll direction */
.marquee-row{display:flex;align-items:center;gap:var(--s-4)}
@media (prefers-reduced-motion:reduce){
  .vert-track{transform:none!important;flex-wrap:wrap;white-space:normal}
  .vert-track .vert-set:nth-child(2){display:none}
}
/* Floating call button: shows once past the hero, hides over the contact section (app.js) */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:50;box-shadow:var(--shadow-float);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.float-cta.on{opacity:1;transform:none;pointer-events:auto}
/* Hero animation: people at the threshold, the calendar rewrites for each (driven by app.js) */
.hero-anim .ha-fig{transition:transform 1s cubic-bezier(.45,.05,.35,1),opacity .6s}
.hero-anim .ha-door{transition:stroke .4s}
.hero-anim.scan .ha-door{stroke:var(--ink)}
.hero-anim .ha-beam{stroke:var(--ink);opacity:0;transition:opacity .3s}
.hero-anim.scan .ha-beam{opacity:1;animation:ha-beam .6s linear infinite}
@keyframes ha-beam{to{stroke-dashoffset:-22}}
.hero-anim .ha-slot{transition:opacity .35s}
.hero-anim .ha-slot-bg{fill:var(--panel);stroke:var(--ink);stroke-width:1.5;transition:fill .35s,stroke .35s}
.hero-anim .ha-dot{fill:var(--ink);transition:fill .35s}
.hero-anim .ha-check{stroke:var(--paper);opacity:0;transition:opacity .3s}
.hero-anim .ha-slot.is-open .ha-slot-bg{stroke:var(--ink);stroke-width:2.5}
.hero-anim .ha-slot.is-closed{opacity:.3}
.hero-anim .ha-slot.is-closed .ha-slot-bg{fill:url(#ha-hatch)}
.hero-anim .ha-slot.is-booked .ha-slot-bg{fill:var(--ink);stroke:var(--ink)}
.hero-anim .ha-slot.is-booked .ha-dot{fill:var(--paper)}
.hero-anim .ha-slot.is-booked .ha-check{opacity:1}
/* Hand-drawn hero: app.js redraws the shapes with rough.js and adds .sketch; the clean originals hide */
.hero-anim.sketch .ha-orig{visibility:hidden}
.hero-anim.sketch>*:not(defs){filter:url(#ha-rough)}
.hero-anim.sketch text{font-family:'Caveat',cursive!important;font-size:21px!important;letter-spacing:.02em!important}
.hero-anim .ha-r-door{transition:color .4s}
.hero-anim.scan .ha-r-door{color:var(--ink)}
.hero-anim .ha-r-doorfill{opacity:.35}
.hero-anim .ha-r-shadow{opacity:.8}
.hero-anim .ha-r-closed,.hero-anim .ha-r-booked{opacity:0;transition:opacity .35s}
.hero-anim .ha-slot.is-closed .ha-r-closed{opacity:1}
.hero-anim .ha-slot.is-booked .ha-r-booked{opacity:1}
.hero-anim .ha-r-line{transition:color .35s}
.hero-anim .ha-slot.is-open .ha-r-line,.hero-anim .ha-slot.is-booked .ha-r-line{color:var(--ink)}
.hero-anim .ha-slot.is-open .ha-r-line path{stroke-width:2.6}
/* Card component: sentence case for titles and descriptions, uppercase for price/tags only */
.card{display:flex;flex-direction:column;color:var(--ink);border:1px solid var(--line);overflow:hidden;background:var(--paper)}
.card--placeholder{border-style:dashed}
.card__media{aspect-ratio:4/3;background:var(--panel) center/cover no-repeat}
/* Body fills the card and the price row sits at the bottom, so prices line up
   across a row whatever the title length. */
.card__body{padding:var(--s-4);flex:1;display:flex;flex-direction:column}
.card__loc{font-family:var(--display);font-size:13px;letter-spacing:.02em;color:var(--ink-3);margin:0 0 6px}
/* Activity gallery: hero image about 60% width with a 2x2 thumbnail grid beside
   it on desktop; collapses to a full-bleed hero with no thumbnails on mobile. */
.gallery-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px}
.gallery-grid__thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid__thumbs{display:none}
}
.card__title{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.3;letter-spacing:0;margin:0 0 var(--s-2);text-transform:none}
.card__desc{font-family:var(--display);font-size:14px;line-height:1.4;text-transform:none;letter-spacing:0;color:var(--ink-2);margin:0 0 var(--s-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.card__meta{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--line);display:grid;gap:6px}
.card__price{font-family:var(--display);font-size:13px;line-height:15px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);margin:0 0 0 auto;text-align:right}
.card:hover,.card:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.card--placeholder:hover{border-color:var(--line);box-shadow:none}
/* Leaflet map: greyscale tiles, ink pins, brand popups */
#exploreMap .leaflet-tile-pane,#mpMap .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.04) sepia(.08)}
#exploreMap,#mpMap{background:var(--panel)}
.th-pin{color:var(--ink);background:none;border:0}
.th-pin:hover{color:var(--color-hover-dark)}
.th-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(23,23,26,.25))}
.th-pin__in{position:relative;display:block}
.th-pin__emoji{position:absolute;left:0;top:7px;width:34px;text-align:center;font-size:14px;line-height:20px}
.th-you{background:var(--ink);border:3px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px var(--ink)}
#exploreMap .leaflet-popup-content-wrapper,#mpMap .leaflet-popup-content-wrapper{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;box-shadow:var(--shadow-float)}
#exploreMap .leaflet-popup-tip,#mpMap .leaflet-popup-tip{background:var(--paper);border:1px solid var(--ink);box-shadow:none}
#exploreMap .leaflet-popup-content,#mpMap .leaflet-popup-content{margin:16px;text-transform:none;font-family:var(--display);font-size:14px;line-height:1.4}
.pop-title{font-weight:500;font-size:16px;margin:0 0 6px}
.pop-desc{margin:0 0 10px;color:var(--ink-2)}
.pop-price{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.pop-link{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
.pop-link:hover{color:var(--ink);border-bottom-width:2px}
.th-pin__in{transition:transform .15s;transform-origin:50% 100%}
/* Selected pin: still black, 1.25x, so it stands out from the rest. */
.th-pin.is-active .th-pin__in{transform:scale(1.25)}
/* Homepage map: one activity per slide (app.js), as a popup on desktop and a sheet on phones */
#exploreMap .th-pop .leaflet-popup-content-wrapper{padding:0;overflow:hidden}
#exploreMap .th-pop .leaflet-popup-content{margin:0;width:300px!important;font-size:14px}
#exploreMap .th-pop a.leaflet-popup-close-button,.map-sheet__close{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
#exploreMap .th-pop a.leaflet-popup-close-button span,.map-sheet__close span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink);font:400 20px/1 var(--display);box-shadow:0 1px 4px rgba(23,23,26,.25)}
#exploreMap .th-pop a.leaflet-popup-close-button:hover span,.map-sheet__close:hover span{background:var(--ink);color:var(--paper)}
.pop{font-family:var(--display);text-transform:none}
.pop-card{display:block;color:var(--ink)!important;text-decoration:none}
.pop-media{aspect-ratio:16/9;background:var(--panel);overflow:hidden}
.pop-media picture,.pop-media img{display:block;width:100%;height:100%;object-fit:cover}
.pop-body{padding:12px 16px 14px}
.pop .pop-meta{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pop .pop-title{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.25;letter-spacing:.01em;margin:0 0 6px;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop .pop-amount{display:block;margin:0;text-align:right}
.pop-card:hover .pop-title,.pop-card:focus-visible .pop-title{text-decoration:underline;text-underline-offset:3px}
.pop-nav{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.pop-arrow{width:44px;height:40px;border:0;background:none;color:var(--ink);font:400 22px/1 var(--display);cursor:pointer}
.pop-arrow:hover{background:var(--tint-hover)}
.pop-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.map-sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:480px;margin:0 auto;background:var(--paper);border:1px solid var(--ink);border-bottom:0;box-shadow:var(--shadow-bar);padding-bottom:env(safe-area-inset-bottom)}
.map-sheet[hidden]{display:none}
#exploreMap .leaflet-bar,#mpMap .leaflet-bar{border:1px solid var(--ink);border-radius:0;box-shadow:none}
#exploreMap .leaflet-bar a,#mpMap .leaflet-bar a{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);width:44px;height:44px;line-height:44px;font-family:var(--mono)}
#exploreMap .leaflet-bar a:hover,#mpMap .leaflet-bar a:hover{background:var(--ink);color:var(--paper)}
#exploreMap .leaflet-control-attribution,#mpMap .leaflet-control-attribution{background:rgba(243,242,238,.85);font-family:var(--mono);font-size:12px;text-transform:none;color:var(--ink-3)}
#exploreMap .leaflet-control-attribution a,#mpMap .leaflet-control-attribution a{color:var(--ink)}
#exploreMap .leaflet-container a.leaflet-popup-close-button,#mpMap .leaflet-container a.leaflet-popup-close-button{color:var(--ink)}
#top{color:var(--paper)}
/* Shared full-bleed photo hero pattern: used on the homepage (#top) and
   /for-business/ (#intro), so both heroes share one set of rules instead of
   duplicating the type and overlay styling per page. */
.hero-photo{position:relative;padding:var(--s-9) 40px var(--s-9);text-align:center;overflow:hidden;color:var(--paper)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;background:var(--scrim);z-index:1}
.hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.hero-h1{font-size:clamp(36px,6vw,64px);line-height:1.1;letter-spacing:0;margin:0 0 36px;text-wrap:balance;color:var(--paper)}
.hero-h1--lg{font-size:clamp(47px,7.8vw,83px)}
/* Homepage heading: a little more air between lines and letters (Ro, 22 Oct 2026). */
#top .hero-h1{line-height:1.18;letter-spacing:.01em}
#top .hero-inner{max-width:1000px}
/* One sentence per line (the /for-business/ hero). A sentence still wraps inside itself on a phone.
   The box is 1000px there so "Run your own experience?" (951px at 83px) fits on one line. */
.hero-line{display:block}
#intro .hero-inner{max-width:1000px}
.hero-sub{margin:0 auto 36px;max-width:44ch;font-family:var(--mono);text-transform:uppercase;font-size:14px;letter-spacing:.06em;line-height:1.5;color:var(--paper-2)}
.hero-credit{position:absolute;right:20px;bottom:14px;margin:0;z-index:2;color:rgba(243,242,238,.65)}
.hero-credit{font-size:12px}
.hero-credit a{position:relative;color:inherit;border-bottom:1px solid rgba(243,242,238,.4)}
.hero-credit a::before{content:"";position:absolute;inset:-16px -4px}
@media (min-width:821px){.hero-photo{min-height:clamp(480px,62svh,640px);display:flex;align-items:center;justify-content:center}}
/* Homepage hero: fills the screen under the header, so the benefits band starts at the
   bottom edge (Ro, 22 Oct 2026). --header-h is measured by app.js. */
@media (min-width:821px){#top{min-height:calc(100svh - var(--header-h,73px))}}
@media (min-width:641px) and (max-width:820px){#top{min-height:calc(100svh - var(--header-h,61px));display:flex;align-items:center}#top>div{margin:0 auto}}
/* Homepage background video: fades in over its still once it's playing (app.js). */
.hero-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .6s}
.hero-photo video.is-playing{opacity:1}
/* Pause / Play for the video, where the photo credit sat: mono caps, 44px tap area. */
.hero-pause{position:absolute;right:20px;bottom:14px;z-index:2;margin:0;padding:0;border:0;background:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,242,238,.65);border-bottom:1px solid rgba(243,242,238,.4);cursor:pointer}
.hero-pause::before{content:"";position:absolute;inset:-16px -8px}
.hero-pause:hover{color:var(--paper);border-bottom-color:var(--paper)}
.hero-pause[hidden]{display:none}

/* Full-bleed band (the "made by a person" strip): background spans the
   viewport, content stays inside .container, matching the /for-business/
   pattern of a full-width section with an inner .container. */
.band{padding:var(--s-7) 0}

/* Filter group labels (Location / Experience) */
.filter-group-label{display:block;margin:0 0 var(--s-2)}
/* Experiences filters sit on the card grid: four columns with the cards' 20px gutter.
   Type runs across the top; under it Location is column 1 and Duration column 2.
   Tablet (821 to 1100px): Location and Duration half each. Phones: stacked. Controls
   are 32px tall (36 to 40px on phones) with a 1px --line-ui border, --paper fill, 12px
   side padding and 12px text; labels sit 8px above. */
.filter-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) 20px;align-items:start}
.filter-pair{display:contents}
.filter-row .filter-group{min-width:0}
.filter-row>.filter-group--type{grid-column:1 / -1}
.filter-row .select-wrap{display:block;padding:0;margin:0}
.filter-row .location-select{width:100%;min-width:0;height:32px;min-height:32px;padding:0 32px 0 12px;background-position:right 12px center;font-size:12px}
.filter-row .cat-chip{min-height:32px;height:32px;padding:2px 11px 0 13px;background:var(--paper);font-size:12px}
/* The padding is uneven on purpose: letter spacing leaves a gap after the last letter,
   and the mono caps sit high in their line, so this puts the letters in the middle. */
.filter-row .cat-chip[aria-pressed=true]{background:var(--ink)}
.filter-row .sub-chip{flex:none;white-space:nowrap;min-height:28px;height:28px;padding:0 9px 0 11px;background:var(--paper);font-size:12px!important}
.filter-row .sub-chip[aria-pressed=true]{background:var(--ink)}
.filter-row #horseSub{margin-top:var(--s-3)}
@media (min-width:821px){
  .filter-row .cat-chip-row{flex-wrap:wrap!important;overflow:visible!important}
}
/* Site-styled dropdowns (app.js): the hidden <select> underneath, a button in the same
   pill as the chips, and a paper menu in mono caps with a check on the chosen option. */
.th-select{position:relative}
.th-select__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.th-select__button{display:block;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px!important}
.th-select__button[aria-expanded=true]{border-color:var(--ink)}
.th-select__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;min-width:100%;margin:0;padding:0;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow-menu);outline:none;max-height:calc(5 * var(--control-h));overflow-y:auto;overscroll-behavior:contain}
.th-select__list.is-up{top:auto;bottom:calc(100% + 6px)}
.th-select__list[hidden]{display:none}
.th-select__list [role=option]{position:relative;display:flex;align-items:center;min-height:var(--control-h);padding:0 12px 0 30px;border-radius:0;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.th-select__list [role=option].is-active{background:var(--tint-hover);color:var(--ink)}
.th-select__list [role=option][aria-selected=true]{color:var(--ink)}
.th-select__list [role=option][aria-selected=true]::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(-45deg)}
.th-select__list:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Touch screens: the native picker, opened by the invisible select laid over the value. */
.th-native{position:relative;display:block}
.th-native__select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.th-native__value{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.th-native:has(.th-native__select:focus-visible) .th-native__value{outline:2px solid var(--ink);outline-offset:2px}
/* Header currency picker: as wide as its label, menu opening under its right edge. */
.site-header .currency-select{min-width:0;width:auto;padding:0 32px 0 14px;background-position:right 12px center}
.site-header .th-select__button.currency-select{width:auto;min-width:70px;padding-top:2px}
.site-header .th-select__list{left:auto;right:0;min-width:132px}
.site-header .select-wrap{align-self:center}
/* Desktop: Type, Location and Duration on one line, the two dropdowns (180px each)
   right-aligned, flush with the right edge of the cards. If they don't fit, the pair drops to the next line. */
@media (min-width:1101px){
  .filter-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-5) 20px}
  .filter-row>.filter-group--type{flex:0 0 auto}
  .filter-row>.filter-group--type .cat-chip-row{flex-wrap:nowrap!important}
  .filter-pair{display:flex;gap:20px;margin-left:auto}
  .filter-pair>.filter-group{flex:0 0 180px}
}
@media (min-width:821px) and (max-width:1100px){
  .filter-pair>.filter-group{grid-column:span 2}
}
@media (max-width:820px){
  .filter-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-5) var(--s-3)}
  /* Bigger tap targets on phones. The select itself needs 16px text or iOS zooms in
     when it opens, so on touch screens app.js lays it, invisible, over a copy of the
     value at the pills' size (.th-native). */
  .filter-row .cat-chip{min-height:36px;height:36px}
  .filter-row .location-select{height:40px;min-height:40px}
  .filter-row select.location-select{font-size:16px}
  .filter-row #horseSub{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
}

/* Experiences header, on the 8px scale: the title with the Grid / Map tabs on its right,
   32px to the filters, 40px from the filters to the count line, 16px from the count
   line to the cards. */
.browse-titlebar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin:0 0 var(--s-6)}
.browse-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin:40px 0 var(--s-4)}
#browseCount{color:var(--ink-3)}
/* Grid / Map, in line with the title: text tabs with a 16px icon, 8px from the label. The selected one is ink,
   the other --ink-2, and one 2px ink line slides between them (app.js places it). The
   tap target reaches 44px tall around each tab. */
.view-tabs{position:relative;display:flex;gap:var(--s-5)}
.view-tab{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);padding:0;border:0;background:none;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.view-tab::before{content:"";position:absolute;inset:-14px -6px}
.view-tab svg{flex:none;display:block;width:16px;height:16px}
.view-tab:hover,.view-tab[aria-selected=true]{color:var(--ink)}
.view-tabs__line{position:absolute;left:0;bottom:-8px;height:2px;width:0;background:var(--ink);pointer-events:none;transition:left .2s var(--ease,ease),width .2s var(--ease,ease)}
@media (prefers-reduced-motion:reduce){.view-tabs__line{transition:none}}
/* No results, in either view */
.empty-state{margin:var(--s-5) 0;padding:var(--s-5);border:1px dashed var(--line-ui);text-transform:none;font-family:var(--display);font-size:15px;color:var(--ink-2)}
.empty-state p{margin:0 0 var(--s-2)}
.empty-state[hidden]{display:none}
.link-btn{position:relative;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn::before{content:"";position:absolute;inset:-12px -8px}
.link-btn:hover{color:var(--ink);text-decoration-thickness:2px}
/* Map view: about 70% of the screen tall, 65% on phones */
#panelMap[hidden]{display:none}
#exploreMap{height:70vh;min-height:360px;border:1px solid var(--line)}
/* Map zoom: round paper buttons, bottom right, 44px. */
#exploreMap .leaflet-bar{display:flex;flex-direction:column;gap:var(--s-2);border:0}
#exploreMap .leaflet-bar a,#exploreMap .leaflet-bar a:first-child,#exploreMap .leaflet-bar a:last-child{width:44px;height:44px;line-height:42px;border:1px solid var(--line-ui);border-radius:50%;background:var(--paper);color:var(--ink);font:400 22px/42px var(--display);box-shadow:0 1px 4px rgba(23,23,26,.18)}
#exploreMap .leaflet-bar a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#exploreMap .leaflet-bar a.leaflet-disabled{background:var(--paper);color:var(--ink-disabled);border-color:var(--line);cursor:default}
#exploreMap .leaflet-bottom.leaflet-right .leaflet-control-zoom{margin:0 var(--s-3) var(--s-6) 0}
.map-hint{position:absolute;left:50%;top:50%;z-index:1000;transform:translate(-50%,-50%);padding:10px 16px;border-radius:var(--r-pill);background:var(--scrim-strong);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.map-hint.is-on{opacity:1}
/* Mobile hamburger nav: button is hidden above 640px, the menu panel is always in the
   DOM but only shown (as a full-width overlay) once JS adds .is-open at narrow widths */
.nav{display:flex}
.nav .menu-only,.menu-panel{display:none}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px;margin:-10px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;flex:none}
.nav-toggle svg{display:block;width:24px;height:24px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-burger{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
/* Benefits section (moved below the experiences on the homepage): plain rows, no boxes */
.benefit-row{display:flex;align-items:flex-start;gap:18px}
.benefit-row svg{flex:none;width:28px;height:28px;color:var(--ink)}
.benefit-emoji{flex:none;width:28px;font-size:24px;line-height:28px;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* Dark footer on every page, overriding the per-page inline colours */
footer{background:var(--ink)!important;border-top-color:rgba(243,242,238,.18)!important;color:rgba(243,242,238,.68)!important}
footer span{color:rgba(243,242,238,.68)!important}
footer a{color:rgba(243,242,238,.78)!important}
footer a:hover{color:var(--paper)!important}
footer a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
footer .container{font-size:12px!important}
footer nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}
footer nav a::before{content:"";position:absolute;inset:0 -10px}
#exploreMap,#mpMap{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:820px){
  :root{--gutter:20px;--section-y:var(--s-8)}
  .split{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
  header{padding:20px!important}
  .site-header{padding:0!important}
  .bar{padding:14px 20px!important;flex-wrap:nowrap;align-items:center}
  .nav{width:100%;gap:12px 16px!important;font-size:12px!important}
  .navlink{padding:12px 0}
  section,footer{padding-left:20px!important;padding-right:20px!important}
  section:has(.container),footer{padding-left:0!important;padding-right:0!important}
  #top{padding:56px 20px 64px!important}
  #top h1,#intro h1{margin-bottom:20px!important}
  .desk-only{display:none}
  .offer-grid{grid-template-columns:minmax(0,1fr)!important}
  .offer-grid .offer-head{display:none}
  .offer-grid .offer-label{padding-bottom:10px!important}
  .offer-grid [data-col]::before{content:attr(data-col);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;opacity:.7;margin-bottom:6px}
  .phone-track{gap:24px;margin-right:-20px;padding-right:20px}
  .phone-track>figure{width:240px}
  .float-cta{right:16px;bottom:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
  .flow{grid-template-columns:minmax(0,1fr)!important}
  .flow-arrow{display:none}
  .btn-ghost{min-height:36px;padding:7px 14px}
  footer{flex-direction:column;gap:var(--s-3)!important}
}
@media (max-width:640px){
  .bar{min-height:auto}
  .nav-toggle{display:flex}
  .nav{display:none}
  /* .site-header's backdrop-filter makes it the containing block for the fixed
     .nav.is-open below, so top/bottom would otherwise resolve inside the 73px
     header instead of the viewport. Drop the blur while the menu is open. */
  /* !important: every page sets backdrop-filter inline on <header>, which beats these rules otherwise. */
  .site-header:has(.nav.is-open){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important}
  html.is-menu-open .site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important}
  html.is-menu-open{overflow:hidden}
  .nav.is-open{display:flex!important;position:fixed;top:var(--header-h,64px);left:0;right:0;bottom:0;background:var(--paper);flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:var(--s-5) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--s-6))!important;z-index:19;overflow-y:auto}
  /* The open menu shows only the panel app.js builds (.menu-panel): Explore and For
     businesses, styled the same, then the currency picker. The desktop links hide. */
  .nav.is-open>:not(.menu-panel){display:none!important}
  .nav.is-open .menu-panel{display:flex;flex-direction:column;gap:var(--s-6)}
  .menu-group__label{display:block;margin:0 0 var(--s-2);font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .menu-group ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .menu-group a{display:flex;align-items:center;min-height:52px;padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:22px;line-height:1.2;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
  .menu-group a:hover,.menu-group a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .menu-currency .select-wrap{display:block;width:100%;margin:0;padding:0}
  .site-header .menu-currency .currency-select{display:block;width:100%;min-width:0;min-height:44px;padding:0 36px 0 var(--s-4);background-position:right var(--s-4) center}
  /* 64px at the bottom keeps the photo credit clear of the button, with room for its 44px tap area. */
  #top{min-height:calc(100svh - var(--header-h,61px));display:flex;align-items:center;padding:24px 20px 64px!important}
  #intro{min-height:clamp(420px,60svh,560px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px 64px!important}
  .hero-credit,.hero-pause{bottom:16px}
  #top>div{margin:0 auto}
  .benefit-row+.benefit-row{margin-top:28px}
  #browse .x-card__media{aspect-ratio:16/10!important;height:auto!important}
  #browse .x-card__body{padding:10px 12px!important}
  #mpMap{aspect-ratio:4/5;max-height:70vh;min-height:0}
  #exploreMap{height:65vh;min-height:320px}
  .chip-row{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
  .chip-row::-webkit-scrollbar{display:none}
}

/* Phase 1: homepage search, category chips, region toggle */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#searchInput::placeholder{color:rgba(243,242,238,.55)}
#searchInput:focus{border-color:var(--paper)}
#top .cat-chip{border-color:rgba(243,242,238,.4);color:rgba(243,242,238,.82)}
#top .cat-chip:hover{border-color:var(--paper);color:var(--paper)}
#top .cat-chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.region-radio[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.x-card[hidden],.card[hidden],.opt[hidden]{display:none!important}
#horseSub[hidden],#browseGrid[hidden]{display:none!important}
@media (max-width:820px){
  .cat-chip-row{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
  .cat-chip-row::-webkit-scrollbar{display:none}
  .cat-chip-row .cat-chip{flex:none;scroll-snap-align:start}
}

/* Phase 2: map must not paint over the sticky header or the mobile nav overlay.
   Leaflet panes use z-index up to 1000; the map container needs its own stacking
   context so those panes stay below .site-header (20), .nav.is-open (19) and .float-cta (50). */
#exploreMap,#mpMap{position:relative;z-index:0;isolation:isolate}

/* Phase 4: Salty Cowboy activity cards, image carousel */
.card__carousel{position:relative;overflow:hidden}
.card__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.card__track::-webkit-scrollbar{display:none}
.card__slide{flex:0 0 100%;scroll-snap-align:start}
.card__slide img{display:block;width:100%;height:100%;object-fit:cover}
.card__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-size:18px;cursor:pointer;opacity:0;transition:opacity .15s}
.card:hover .card__nav,.card:focus-within .card__nav{opacity:1}
.card__nav:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:2px}
.card__nav--prev{left:8px}
.card__nav--next{right:8px}
.card__dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.card__dots span{width:6px;height:6px;border-radius:var(--r-pill);background:var(--paper);opacity:.6}
.card__dots span.is-active{opacity:1}
.card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.card__row{display:flex;justify-content:space-between;align-items:baseline}
.sc-card .card__price{margin-left:auto;font-size:13px;font-weight:400}
.card__from,.card__unit{font-size:12px;font-weight:400;color:var(--ink-3)}
@media (max-width:820px){
  .card__nav{opacity:1}
}

/* Update brief 3: single scrollable filter row (category + region), Viator-style, with
   a circular next arrow over the fade edge. */
#chipRow::-webkit-scrollbar{display:none}
/* The chip rows scroll sideways, which clips anything outside the box: room above and
   below for the pill borders and the focus ring, taken back off #chipRow's margin. */
.cat-chip-row{padding-top:6px;padding-bottom:6px}
#chipRow{margin-top:-6px;margin-bottom:-6px}
/* 36px chips on phones, with a 48px tap area */
.cat-chip-row .cat-chip::before{inset:-6px 0}

/* Update brief 3: Experiences grouped rows, horse sub-chips, and See all links */
.card-row,.x-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.see-all,.card-cap-more{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;background:none;border:0;cursor:pointer;padding:0;min-height:44px;display:inline-flex;align-items:center}
.see-all:hover,.see-all:focus-visible,.card-cap-more:hover,.card-cap-more:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.browse-sub{margin:28px 0 0}
.browse-group__head,.browse-sub__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap}
/* One card per row on mobile, full width inside the gutter, on every page.
   Homepage rows marked data-mobile-cap show 12 cards, then a "See all" button
   (app.js adds .is-expanded) shows the rest. */
.card-cap-more{display:none}
@media (max-width:820px){
  .card-row,.card-grid,.x-card-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .card-row[data-mobile-cap]:not(.is-expanded)>:nth-child(n+13){display:none}
  .card-cap-more{display:inline-flex;margin-top:var(--s-3)}
  .card-cap-more[hidden]{display:none}
}

/* Site-wide currency toggle: switches displayed prices between IDR and a live AUD conversion */
.select-wrap{display:inline-block;padding:4px;margin:-4px}
.currency-select,.location-select{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-height:36px;padding:0 26px 0 12px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/12px;border:1px solid var(--line-ui);border-radius:var(--r-control);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;width:auto;min-width:200px}
/* The currency picker is 16px at every width: iOS zooms the page into any select under 16px. */
.currency-select{font-size:16px}
#top .currency-select{background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f2ee' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");border-color:rgba(243,242,238,.4);color:rgba(243,242,238,.92)}
#top .currency-select option{color:var(--ink)}

/* Phase 5: Salty Cowboy activity detail pages */
#lightbox{border:0;padding:24px;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center}
#lightbox::backdrop{background:var(--scrim-strong)}
#lightbox[open]{display:flex}
#lightbox:not([open]){display:none} /* a closed lightbox never shows (Salty Cowboy pages too) */
.lightbox-close,.lightbox-nav{position:absolute;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.18)}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{background:rgba(255,255,255,.18);outline:2px solid var(--focus-dark);outline-offset:var(--focus-offset)}
.lightbox-close{top:-8px;right:-8px}
.lightbox-prev{left:-8px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:-8px;top:50%;transform:translateY(-50%)}

/* Brief v3: shared page container, used site-wide so header, breadcrumb, content
   and footer share the same left/right edges (B2). */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Brief v3 B1/A1: detail-page two-column layout. Single column by default (and
   therefore at <=820, since the min-width:821px rule below is additive), so the
   old bug of a shared grid-row producing a phantom second column at narrow
   widths can't happen; there is nothing to reset at a breakpoint. */
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;padding-bottom:var(--s-8)}
.detail-crumbs{padding:var(--s-5) var(--gutter) 0}
@media (min-width:821px){
  /* Row 2 takes any extra height, so a tall booking panel never opens a gap under the gallery. */
  .detail-layout{grid-template-columns:minmax(0,1fr) minmax(300px,340px);grid-template-rows:auto 1fr;column-gap:clamp(var(--s-6),3vw,var(--s-7))}
  .detail-content{align-self:start}
  .detail-head{grid-column:1;grid-row:1}
  .detail-content{grid-column:1;grid-row:2}
  .booking-panel{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--header-h,104px) + var(--s-5));margin:0}
}

/* Brief v4: booking panel rhythm, grouped by proximity. Panel is just the
   price line, the Check-dates button and (where the data has it) a weight
   note below the button, now that duration chips, the rider stepper and the
   live total have all moved out (times stay in the Times tab). */
.bp-group+.bp-group{margin-top:16px}
.bp-price{margin:0 0 var(--s-1);padding:0;text-indent:0}
.bp-decision{display:grid;gap:var(--s-3)}
.bp-label{font-family:var(--mono);font-size:12px;font-weight:var(--w-mono-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.bp-note{font-family:var(--display);font-size:var(--t-small);line-height:1.45;color:var(--ink-2);margin:0}
.bp-note+.bp-note{margin-top:4px}

/* The nav bar stays full width edge to edge (Ro's call); only page content
   below it aligns to .container. */
.site-header .bar{padding:var(--s-5) var(--gutter)}
@media (max-width:820px){.site-header .bar{padding:var(--s-3) var(--gutter)}}

/* Brief v3 B4: page nav sticks under the header, first child of .detail-content */
.page-nav{position:sticky;top:var(--header-h,104px);z-index:10;background:var(--paper);display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;border-bottom:var(--bw) solid var(--line);margin:0 0 var(--s-6);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.page-nav::-webkit-scrollbar{display:none}
.page-nav [role="tab"]{font:var(--w-regular) var(--t-title)/1.3 var(--display);flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 0 12px;margin-top:12px;color:var(--ink-2);background:none;border:0;border-bottom:var(--bw-strong) solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer}
.page-nav [role="tab"]:hover{color:var(--ink)}
.page-nav [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.page-nav [role="tab"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.detail-content>[role="tabpanel"]{scroll-margin-top:calc(var(--header-h,104px) + 56px)}
.detail-content>[role="tabpanel"]:focus-visible{outline:none}

/* Brief v3 B3: hero gallery, capped height on mobile so the panel is nearer the fold */
.detail-gallery{margin:0 0 var(--s-5)}
.detail-gallery img{object-position:center 28%}
@media (max-width:820px){
  .detail-gallery img{max-height:60svh}
  .detail-hero{aspect-ratio:4/3!important}
  .detail-hero img,.gallery-header__item img{max-height:none;object-position:center top!important}
}
.gallery-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-2)}
.gallery-grid__thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s-2)}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid__thumbs{display:none}
}

/* Brief v3 B6: "More from Salty Cowboy" row */
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.more-grid .card__media{aspect-ratio:3/2}
.more-grid .card__title{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:820px){.more-grid{grid-template-columns:minmax(0,1fr)}}

/* Brief v3 F3: fact row under the owner strip */
.fact-row{--fact-gap:var(--s-5);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:var(--s-1);font-family:var(--display);font-size:var(--t-small);color:var(--ink-2)}
/* Each item carries a "·" in the gap before it. The list starts one gap to the left and
   clips that strip, so the dot of whichever item starts a line, the first or a wrapped
   one, is cut off and no line starts with a stray separator. */
.fact-row{margin-left:calc(-1 * var(--fact-gap))!important;clip-path:inset(0 0 0 var(--fact-gap))}
.fact-row li{position:relative;margin-left:var(--fact-gap)}
.fact-row li::before{content:"\00B7";position:absolute;left:calc(-1 * var(--fact-gap));width:var(--fact-gap);text-align:center;color:var(--ink-3)}

/* Brief v3: owner strip */
.owner-strip{display:inline-flex;align-items:center;gap:var(--s-3);min-height:44px}
.owner-strip img{border-radius:var(--r-round)}

/* Brief v3 D: six type sizes applied to detail-page prose and labels */
.detail-head h1{font-family:var(--display);font-size:var(--t-headline);font-weight:var(--w-strong);line-height:1.08;letter-spacing:0;max-width:24ch;text-wrap:balance;margin:var(--s-5) 0 var(--s-2)}
.detail-content h2{font-family:var(--display);font-size:var(--t-subhead);font-weight:var(--w-strong);line-height:1.15;letter-spacing:0;margin:0 0 var(--s-4)}
.detail-content h3{font-family:var(--display);font-size:var(--t-title);font-weight:var(--w-strong);line-height:1.3;margin:var(--s-6) 0 var(--s-3)}
.detail-content section+section{margin-top:var(--s-7)}
@media (max-width:820px){
  .detail-content section+section{margin-top:var(--s-6)}
  /* Sections here already sit in .container, so drop the site-wide mobile
     section padding and line them up with the h1. */
  .detail-content section{padding-left:0!important;padding-right:0!important}
}
.prose{font-family:var(--display);font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:35em}
.prose strong,.prose dd,.prose li{color:var(--ink)}
.detail-content dl{display:grid;gap:var(--s-4);margin:0;max-width:35em}
.detail-content dt{font:var(--w-mono-strong) var(--t-label)/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 var(--s-1)}
.detail-content dd{margin:0;font-family:var(--display);font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.detail-content table{font-family:var(--display);font-size:var(--t-body);max-width:35em;width:100%;border-collapse:collapse}
.detail-content th{font:var(--w-mono-strong) var(--t-label)/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.detail-content .card-title,.detail-content summary{font-family:var(--display);font-size:var(--t-title);font-weight:var(--w-strong);line-height:1.3}
.detail-content details{padding:0;border-bottom:var(--bw) solid var(--line)}
.detail-content summary{padding:var(--s-4) 0;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);cursor:pointer;list-style:none}
.detail-content summary::-webkit-details-marker{display:none}
.detail-content details p{margin:0 0 var(--s-4);font-family:var(--display);font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.breadcrumb-link{position:relative;min-height:24px;display:inline-flex;align-items:center;padding-block:var(--s-1);vertical-align:middle}
.breadcrumb-link::before{content:"";position:absolute;inset:-10px -4px}
@media (max-width:820px){.breadcrumb-current,.breadcrumb-current-sep{display:none}}
.detail-crumbs--one-line{display:flex;align-items:center;column-gap:.6ch;white-space:nowrap}
.detail-crumbs--one-line .breadcrumb-tail{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Brief v3 A7: mobile sticky booking bar */
.mobile-sticky-bar{display:none}
@media (max-width:820px){
  .mobile-sticky-bar:not(.is-hidden){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--s-3));background:var(--paper);border-top:var(--bw) solid var(--line);box-shadow:var(--shadow-bar)}
}
@media (min-width:821px){body.has-sticky-bar{padding-bottom:0}}
.mobile-sticky-bar .t-small{font-family:var(--display);flex:none;white-space:nowrap}
.mobile-sticky-bar .btn{white-space:normal;text-align:center;justify-content:center;line-height:1.25}
.mobile-sticky-bar strong{font-weight:var(--w-strong)}
.mobile-sticky-bar .btn{font-family:var(--display);font-weight:600;font-size:var(--t-title);text-transform:none;letter-spacing:0;min-height:48px}

/* Button-only sticky bar variant, used on /for-business/: dark background,
   no price/summary text, button fills the width. */
/* Two classes, so it beats the light .mobile-sticky-bar:not(.is-hidden) rule above. */
.mobile-sticky-bar.mobile-sticky-bar--dark{background:var(--ink);border-top-color:rgba(243,242,238,.18);justify-content:center}
.mobile-sticky-bar--dark .btn{width:100%;justify-content:center}

/* Brief v3 D: the book CTA, panel and sticky, in sentence case */
#bookingCta,.mobile-sticky-bar .btn{font-family:var(--display);font-weight:600;font-size:var(--t-title);text-transform:none;letter-spacing:0;min-height:48px;padding:0 var(--s-5)}
/* The panel's Check-dates label sits dead centre, including when it wraps. */
.booking-panel #bookingCta{display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s-2) var(--s-5)}

@media (max-width:820px){
  .detail-layout{grid-template-columns:minmax(0,1fr)}
  .booking-panel{position:static}
  .mobile-sticky-bar:not(.is-hidden){display:flex}
}

/* Two-tier pricing cards and competitor comparison table (for-business) */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:stretch}
.pricing-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);padding:var(--s-6)}
.pricing-card--highlight{border-color:var(--ink)}
.pricing-card__tier{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 var(--s-2)}
.pricing-card__name{font-family:var(--display);font-size:22px;letter-spacing:0;margin:0}
.pricing-tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-ui);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.pricing-card__summary{margin:0 0 var(--s-5);color:var(--ink-2)}
.pricing-card__price{font-family:var(--display);font-size:34px;letter-spacing:0;margin:0 0 var(--s-5)}
.pricing-card__price small{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--ink-3)}
.pricing-list{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:12px;flex:1}
.pricing-list li{display:flex;align-items:baseline;gap:10px;color:var(--ink-2)}
.pricing-list li::before{content:'\2713';flex:none;font-family:var(--mono);font-size:12px;color:var(--ink)}
.pricing-card .btn,.pricing-card .btn-ghost{justify-content:center;width:100%;min-height:44px}
.pricing-note{margin:var(--s-6) 0 0;color:var(--ink-3);font-family:var(--mono);font-size:12px;letter-spacing:.02em;max-width:62ch}
@media (max-width:820px){
  .pricing-grid{grid-template-columns:1fr}
}

.compare-note{margin:var(--s-4) 0 0;color:var(--ink-3);font-family:var(--mono);font-size:12px;letter-spacing:.02em}

/* Value blurbs in the homepage benefit band and the /for-business/
   benefits: multi-line, so Neue Haas in sentence case. Mono caps are for short labels. */
.benefit-row p{font-family:var(--display);font-size:15px;text-transform:none;letter-spacing:0;line-height:1.5}

/* Demo banner (design system 6.18): full width, above the header, can't be
   dismissed. Only on hidden /demo/b/ pages. */
.demo-strip{display:block;width:100%;margin:0;padding:9px var(--gutter);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;text-align:center}
/* Photo placeholder (design system 6.19): stands in for a business's photos
   until it gives written permission. Same box as the photo slot. */
.photo-placeholder{aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-5);background:var(--panel);border:var(--bw) solid var(--line-ui);text-align:center}
.photo-placeholder__name{font-family:var(--display);font-weight:var(--w-strong);font-size:var(--t-subhead);line-height:1.15;letter-spacing:0;color:var(--ink);text-transform:none}
.photo-placeholder__label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* Demo page v2 (design system 4.12, 6.20 to 6.22). Tokens repeated from
   assets/tokens.css because pages load this file only. */
:root{--r-card:14px;--bullet:7px;--gallery-gap:var(--s-2);--gallery-ratio:16/8;--gallery-ratio-mobile:4/3;--r-gallery:var(--r-card);--text-info:var(--ink)}
/* 6.20 gallery header: 1 large photo and up to 4 smaller on desktop; a full-width
   swipeable carousel with a "1 / N" counter on mobile. Photos open #lightbox. */
.gallery-header{position:relative}
.gallery-header__track{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--gallery-gap);aspect-ratio:var(--gallery-ratio)}
.gallery-header__track:focus-visible{outline:2px solid var(--focus);outline-offset:var(--focus-offset)}
.gallery-header__item{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:var(--r-gallery);background:var(--panel)}
.gallery-header__item:first-child{grid-row:1 / 3}
.gallery-header__item picture{display:block;width:100%;height:100%}
.gallery-header__item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;cursor:zoom-in}
.gallery-header--1 .gallery-header__track{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:16/7}
.gallery-header--3 .gallery-header__track{grid-template-columns:2fr 1fr}
.gallery-header--4 .gallery-header__item:last-child{grid-column:2 / 4}
.gallery-header__count{display:none;margin:0}
@media (max-width:820px){
  .gallery-header{margin-inline:calc(-1 * var(--gutter))}
  .gallery-header__all{display:none}
  .gallery-header__track{display:flex;gap:0;aspect-ratio:auto;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .gallery-header__track::-webkit-scrollbar{display:none}
  .gallery-header__item{flex:0 0 100%;aspect-ratio:var(--gallery-ratio-mobile);border-radius:0;scroll-snap-align:start}
  .gallery-header__item img{max-height:none}
  .gallery-header__count{display:block;position:absolute;right:var(--s-3);bottom:var(--s-3);padding:4px 10px;border-radius:var(--r-pill);background:var(--scrim-strong);color:var(--paper);font-family:var(--mono);font-size:var(--t-label);line-height:1.5;letter-spacing:.08em;pointer-events:none}
}
/* 6.21 Good to know list: the same list on the page, on the screen after
   booking and in the confirmation email. Square ink bullet, ink text. */
.know-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);max-width:35em}
.know-list li{position:relative;padding-left:calc(var(--bullet) + var(--s-3));font-family:var(--display);font-size:var(--t-body);line-height:1.5;color:var(--ink);text-transform:none;letter-spacing:0}
.know-list li::before{content:"";position:absolute;left:0;top:.5em;width:var(--bullet);height:var(--bullet);background:var(--ink)}
.know-list__title{margin:0 0 var(--s-3);font-family:var(--display);font-weight:var(--w-strong);font-size:var(--t-title);line-height:1.3;color:var(--ink)}
/* 6.22 info text: the session details under a demo page's title, in body ink, not grey. */
.fact-row--ink{color:var(--text-info)}
/* 6.18 demo banner: one line in every booking mode (cut short with an ellipsis if a
   screen is too narrow). In sandbox the test card number is picked out in paper on ink. */
.demo-strip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-strip__card{display:inline-block;padding:0 6px;background:var(--paper);color:var(--ink);border-radius:4px;line-height:1.3;white-space:nowrap}
/* 6.23 demo flag: above a demo page's heading. Ink "Demo" tag joined to an
   outlined "No real booking is made", mono caps. */
.demo-flag{display:inline-flex;align-items:stretch;margin:var(--s-3) 0 var(--s-4);border:var(--bw-strong) solid var(--ink);border-radius:var(--r-pill);overflow:hidden;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.demo-flag__tag{display:flex;align-items:center;padding:6px 12px;background:var(--ink);color:var(--paper)}
.demo-flag__text{display:flex;align-items:center;padding:6px 12px;color:var(--ink)}
/* 6.22 info text, also the Good to know details and functional lines (hours, address). */
.know-details dd,.prose.prose--info{color:var(--text-info)}

/* /for-business/ commission comparison: a two-column table (platform, commission), up
   to 640px wide, the same at every width since it fits a phone. */
.compare-table{width:100%;max-width:640px;border-collapse:collapse;font-family:var(--display);font-size:15px;line-height:1.45;text-transform:none;color:var(--ink)}
.compare-table th,.compare-table td{padding:var(--s-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare-table thead th{padding-top:0;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--line-ui)}
.compare-table tbody th{font-weight:400}
.compare-table td{width:40%}
.compare-table__ours{background:var(--panel)}
.compare-table .compare-table__ours th,.compare-table strong{font-weight:600}
.compare-note{margin:var(--s-4) 0 0;max-width:70ch;font-family:var(--display);font-size:13px;line-height:1.5;text-transform:none;color:var(--ink-2)}

/* ===== RealDays layout (Ro's alignment brief, 22 Oct 2026) =====
   The homepage and /for-business/ (body.rd) share one container (1344px, 48px sides at
   1440 and up, centred above that), one 12/8/4 column grid, the 8px spacing scale, one
   type scale and 40px pill controls. Other pages keep their own layout for now. */
:root{--control-h:40px;--control-h-sm:24px;--control-px:var(--s-4);--grid-gap:16px;--row-gap:var(--s-5);--stack-heading:var(--s-5);--card-min:200px;--card-media-h:160px;--card-pad:var(--s-4);--r-panel:6px;--lh-tight:1.1;--lh-body:1.5;--ls-label:.08em;--z-header:20;--z-filter:15;--z-panel:18;--z-scrim:17;--dur:250ms;--ease-out:cubic-bezier(.2,.8,.2,1);--shadow-stuck:0 1px 0 var(--line),0 6px 16px rgba(23,23,26,.08);--shadow-menu:0 6px 16px rgba(23,23,26,.08);--map-w:50vw}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}
.rd{--container:calc(1440px - 2 * var(--gutter));--gutter:20px;--grid-cols:4;--cards-per-row:2;--card-w:calc((min(100vw - 2 * var(--gutter), var(--container)) - (var(--cards-per-row) - 1) * var(--grid-gap)) / var(--cards-per-row));--section-y:var(--s-8);--t-display:clamp(2.5rem,1.6rem + 3.8vw,4.5rem);--t-title:1.0625rem;--t-body:1rem;--t-small:.875rem}
@media (min-width:768px){.rd{--gutter:32px;--grid-cols:8;--cards-per-row:3}}
/* Ro deciding: 48 or 80 / 96 for more breathing room. One-line change. */
@media (min-width:1200px){.rd{--gutter:48px;--grid-cols:12;--cards-per-row:5;--section-y:var(--s-9)}}
.rd .container{max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.rd section:has(.container),.rd footer{padding-left:0!important;padding-right:0!important}
.rd .section{padding-block:var(--section-y)}
.rd .label{font-family:var(--mono);font-size:var(--t-label);font-weight:400;letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1.5}

/* Header, every page: logo on the left edge of the container, the nav (For customers,
   For businesses, AUD) one row pinned to its right edge. Pages outside .rd use the same
   gutter and width here, so the header never moves between pages. The !importants beat
   the inline styles still on the generated pages. */
body:not(.rd) .site-header{--gutter:20px;--container:calc(1440px - 2 * var(--gutter))}
@media (min-width:768px){body:not(.rd) .site-header{--gutter:32px}}
@media (min-width:1200px){body:not(.rd) .site-header{--gutter:48px}}
.site-header{border-bottom:var(--bw) solid var(--line)}
.site-header .bar{display:flex!important;justify-content:space-between!important;align-items:center!important;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;border-bottom:0!important;padding-block:var(--s-5)!important;padding-inline:var(--gutter)!important}
.logo{font-family:var(--display);font-weight:600;font-size:22px;line-height:36px;letter-spacing:-.01em;color:var(--ink);text-transform:none}
@media (min-width:641px){
  #siteNav{margin-left:auto;width:auto;flex-wrap:nowrap!important;align-items:center!important;gap:30px!important;font-family:var(--mono)!important;font-size:var(--t-label)!important;font-weight:400;line-height:18px;letter-spacing:var(--ls-label)!important;text-transform:uppercase;white-space:nowrap}
  #siteNav .navlink,#siteNav .btn-ghost{display:inline-block;min-height:0!important;padding:0 0 4px!important;border:0;border-bottom:var(--bw) solid transparent;border-radius:0;background:none;font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3)}
  #siteNav .btn-ghost::before{content:none}
  #siteNav .navlink.on,#siteNav [aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
  #siteNav .navlink:hover,#siteNav .btn-ghost:hover{color:var(--ink);border-bottom-color:var(--ink)}
}
/* Header currency picker: 40px box, text only, 12px like the nav labels. */
#currencySelect,#currencySelectButton{height:var(--control-h);min-height:var(--control-h);min-width:70px;padding:0 10px!important;border:var(--bw) solid var(--line);border-radius:0;background-image:none;font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-align:center}
#currencySelectButton{display:flex;align-items:center;justify-content:center}
@media (max-width:820px){.site-header .bar{padding-block:var(--s-3)!important}}

/* Buttons and chips: 40px pills, 16px sides, mono caps. ::before keeps a 48px tap area. */
.rd .btn,.rd .btn--primary,.rd .btn--secondary,.rd .btn--on-dark{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--control-h);min-height:var(--control-h);padding:2px var(--control-px) 0 calc(var(--control-px) + .08em);border:var(--bw) solid var(--ink);border-radius:var(--r-control);font-family:var(--mono);font-size:var(--t-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.rd .btn,.rd .btn--primary{background:var(--ink);color:var(--paper)}
.rd .btn--secondary{background:transparent;color:var(--ink);border-color:var(--line-ui)}
.rd .btn--on-dark,.rd .on-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.rd .btn--primary::before,.rd .btn--secondary::before,.rd .btn--on-dark::before{content:"";position:absolute;inset:-4px 0}
.rd .btn--secondary svg,.rd .btn--primary svg{flex:none;width:16px;height:16px}
@media (hover:hover){
  .rd .btn:hover,.btn--primary:hover{background:var(--color-hover-dark);color:var(--paper);border-color:var(--color-hover-dark)}
  .rd .btn--secondary:hover{background:var(--color-hover);color:var(--ink);border-color:var(--ink)}
  .rd .btn--on-dark:hover,.rd .on-dark .btn:hover{background:var(--color-hover);color:var(--ink);border-color:var(--color-hover)}
}
.rd .btn:active,.rd .btn--primary:active,.rd .btn--secondary:active,.rd .btn--on-dark:active,.rd .chip:active{transform:translateY(1px)}
.rd .chip{position:relative;display:inline-flex;align-items:center;flex:none;height:var(--control-h);padding:10px;line-height:18px!important;border:var(--bw) solid var(--line-ui);border-radius:var(--r-control);background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--t-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.rd .chip::before{content:"";position:absolute;inset:-4px 0}
.rd .chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rd .chip[hidden]{display:none}
@media (hover:hover){.rd .chip:not([aria-pressed=true]):hover{background:var(--color-hover);border-color:var(--ink)}}
.chip--sm{height:32px;padding:6px 10px}
@media (prefers-reduced-motion:reduce){.rd .btn:active,.btn--primary:active,.btn--secondary:active,.btn--on-dark:active,.rd .chip:active{transform:none}}
/* Selects: the same pill, with a chevron. */
.rd .pill-select,.rd .pill-select.th-select__button,.rd .th-native__value.pill-select{display:flex;align-items:center;width:100%;min-width:0;height:var(--control-h);min-height:var(--control-h);padding:2px 40px 0 var(--control-px)!important;background-position:right var(--control-px) center;background-color:transparent;border-color:var(--line-ui);border-radius:var(--r-control);font-size:var(--t-label);letter-spacing:var(--ls-label)}
@media (hover:hover){.rd .pill-select:hover{border-color:var(--ink);background-color:var(--color-hover)}}

/* Section heads and eyebrows */
.section-title{font-family:var(--display);font-weight:600;font-size:var(--t-headline);line-height:var(--lh-tight);letter-spacing:0;margin:0}
/* Homepage section headings at 60% (Ro, 22 Oct 2026). */
.home .section-title{font-size:calc(var(--t-headline) * .6)}
.rd .section-count{margin:var(--s-1) 0 0;color:var(--ink-2)}
.rd .eyebrow{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);color:var(--ink-2)}
.rd .eyebrow::before{content:"";flex:none;width:8px;height:8px;background:var(--ink)}
.rd .on-dark .eyebrow{color:var(--paper-2)}
.rd .on-dark .eyebrow::before{background:var(--paper)}
.rd .band-dark{background:var(--ink);color:var(--paper)}
/* Two-column sections on the 12-column grid, from 1024px; stacked below. */
.rd .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6) var(--grid-gap)}
@media (min-width:1024px){
  .rd .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .rd .c-1-5{grid-column:1 / span 5}.rd .c-1-6{grid-column:1 / span 6}.rd .c-1-8{grid-column:1 / span 8}
  .rd .c-7-12{grid-column:7 / -1}.rd .c-8-12{grid-column:8 / -1}.rd .c-9-12{grid-column:9 / -1}
}

/* Cards: one shell for experiences and businesses. Square, 1px line, 160px photo, the
   price pinned to the bottom so every card in a row is the same height. */
.rd .card{position:relative;height:100%;border:var(--bw) solid var(--line);background:var(--paper)}
.rd .card:hover,.rd .card:focus-within{box-shadow:none;border-color:var(--ink)}
.rd .card:focus-visible{outline:2px solid var(--focus);outline-offset:var(--focus-offset)}
.rd .card__media,.rd .x-card__media{height:auto;aspect-ratio:211/158!important;overflow:hidden}
.rd .card__media img,.rd .card__media picture{transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.rd a.card:hover .card__media img,.rd a.card:hover .card__media picture{transform:scale(1.03)}}
@media (hover:hover){.rd a.card:hover .card__title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.rd .card__body{padding:var(--card-pad)!important}
.rd .card__tag{margin:0 0 var(--s-3)}
.rd .tag{display:inline-flex;align-items:center;height:var(--control-h-sm);padding:2px 10px;border:var(--bw) solid var(--line-ui);border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--t-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
.rd .card__title{font-size:var(--t-title);font-weight:600;line-height:1.25;min-height:2.5em;margin:0 0 var(--s-2)}
.rd .card__loc{font-size:var(--t-small);line-height:1.4;letter-spacing:0;color:var(--ink-3);margin:0 0 var(--s-2)}
.rd .card__desc{font-size:var(--t-small);line-height:1.4;color:var(--ink-2);margin:0 0 var(--s-3)}
.rd .card__price,.rd .sc-card .card__price{font-size:var(--t-small);line-height:1.3;font-weight:600}
.rd .card--empty{border-style:solid}
.rd .card--empty .card__media{background:var(--panel)}
.rd .card--empty .card__title,.rd .card--empty .card__loc,.rd .card--empty .card__desc{color:var(--ink-3)}
/* At most 5 across (3 from 768px, 2 on phones); rails use the same card width. */
.rd .card-grid{display:grid;grid-template-columns:repeat(var(--cards-per-row),minmax(0,1fr));gap:var(--row-gap) var(--grid-gap)}
.rd #browseGrid[data-mobile-cap]:not(.is-expanded)>.card:nth-child(n+13){display:none}
@media (min-width:821px){.rd #browseGrid[data-mobile-cap]:not(.is-expanded)>.card:nth-child(n+13){display:flex}}
@media (max-width:820px){.rd .card-cap-more:not([hidden]){display:inline-flex;margin-top:var(--s-4)}}
@media (max-width:767px){
  .rd .card__media,.rd .x-card__media{height:auto;aspect-ratio:1/1!important}
  .rd .card__body{padding:var(--s-3)!important}
  .rd .card__desc{display:none}
}

/* Card rails ("Good for a first go", "Just added"): one row that scrolls sideways,
   inside the centred container, like Airbnb's rows (Ro, 22 Oct 2026). */
.rail-section{overflow-x:clip}
.rail+.rail,.rail+.results{margin-top:var(--s-8)}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin:0 0 var(--stack-heading)}
.rail-nav{display:flex;gap:var(--s-2)}
.rail-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);padding:0;border:var(--bw) solid var(--line-ui);border-radius:var(--r-control);background:transparent;color:var(--ink);cursor:pointer}
.rail-btn::before{content:"";position:absolute;inset:-4px}
.rail-btn svg{width:16px;height:16px}
.rail-btn[hidden]{display:inline-flex;visibility:hidden}
@media (hover:hover){.rail-btn:hover{background:var(--color-hover);border-color:var(--ink)}}
.card-rail{display:flex;gap:var(--grid-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-4px 0;padding:4px 0}
.card-rail::-webkit-scrollbar{display:none}
.card-rail>.card{flex:0 0 var(--card-w);height:auto;scroll-snap-align:start}
@media (max-width:767px){.rail-nav{display:none}}

/* Homepage hero: the search panel replaces the button. */
.rd #top .hero-h1{font-size:var(--t-display)}
.rd .hero-sub{font-size:var(--t-label);letter-spacing:var(--ls-label);margin-bottom:var(--s-6)}
.hero-search{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:var(--s-4);max-width:680px;margin:0 auto;padding:var(--s-5);border-radius:var(--r-panel);background:var(--tint-hover-dark);text-align:left}
.hero-search__field{flex:1 1 140px;min-width:0}
.hero-search__field label{display:block;margin:0 0 var(--s-2);color:var(--paper)}
.rd #top .pill-select{color:var(--paper);border-color:var(--line-ui-dark);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f2ee' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.rd #top select.pill-select option{color:var(--ink)}
@media (hover:hover){.rd #top .pill-select:hover{border-color:var(--paper);background-color:var(--tint-hover-dark)}}
.rd #top select.pill-select{font-size:16px}
@media (pointer:fine){.rd #top select.pill-select{font-size:var(--t-label)}}
.hero-search .btn--on-dark{flex:0 0 auto;min-width:88px}
@media (max-width:640px){.hero-search{padding:var(--s-4)}.hero-search__field{flex-basis:100%}.hero-search .btn--on-dark{width:100%}}

/* Filter nav under the hero. Once it reaches the header it's fixed there in a compact
   form (app.js adds .is-stuck); its slot keeps the full height so nothing jumps. */
.filter-slot{position:relative}
.filter-nav{background:var(--panel);border-bottom:var(--bw) solid var(--line);padding-block:var(--s-5)}
.filter-nav.is-stuck{position:fixed;top:var(--header-h,85px);left:0;right:0;z-index:var(--z-filter);padding-block:var(--s-3);box-shadow:var(--shadow-stuck)}
@media (min-width:768px){.filter-nav.is-stuck{padding-block:0}}
.fn-rows{display:flex;flex-direction:column;gap:var(--s-5)}
.filter-nav.is-stuck .fn-rows{gap:var(--s-2)}
.fn-row{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6)}
.fn-row--top{align-items:flex-start}
.fn-row--bottom{align-items:flex-end}
.fn-group{min-width:0}
.fn-label{display:block;margin:0 0 var(--s-2);color:var(--ink)}
/* Situation helper: one line centred under the Group / Duo / Solo chips, 8px below them.
   Its 18px is reserved, so changing or clearing the text never moves the bar. */
.fn-who{position:relative;padding-bottom:calc(var(--s-2) + 18px)}
.fn-help{position:absolute;left:50%;bottom:0;height:18px;margin:0;transform:translateX(-50%);font-size:var(--t-label);line-height:18px;letter-spacing:var(--ls-label);white-space:nowrap;color:var(--ink-2);transition:opacity calc(var(--dur) / 2) var(--ease-out)}
.fn-help.is-fading{opacity:0}
.fn-sort .th-select__list{right:auto;min-width:max(100%,200px)}
.rd .chip-list{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.rd #chipRow{margin:0;padding:0}
.rd #horseSub{margin-top:var(--s-2)}
.rd #horseSub[hidden]{display:none!important}
.fn-select{width:168px}
/* Sort by and View on map: text controls, no box, a 1px underline (Ro's brief 2). */
.fn-sort .fn-select{width:148px;padding:0;margin:0}
.rd .fn-text,.rd .fn-text.th-select__button,.rd .th-native__value.fn-text{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:36px;min-height:36px;padding:2px 0 0!important;border:0;border-bottom:var(--bw) solid var(--line-ui);border-radius:0;background:none;color:var(--ink);font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer}
.rd .fn-text.th-select__button::after,.rd .th-native__value.fn-text::after,.dd__btn::after{content:"";flex:none;width:9px;height:5px;background:currentColor;-webkit-mask:var(--chevron) no-repeat center/9px 5px;mask:var(--chevron) no-repeat center/9px 5px}
.rd{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 8.90663 5.07252' fill='none'%3E%3Cpath d='M0.342241 0.364515L4.61203 4.37341L8.54993 0.364515' stroke='black'/%3E%3C/svg%3E")}
.rd .fn-map{position:relative;display:inline-flex;align-items:center;gap:5px;width:auto;height:36px;padding:2px 0 0;border:0;border-bottom:var(--bw) solid var(--line-ui);border-radius:0;background:none;color:var(--ink);font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer}
.rd .fn-map::before{content:"";position:absolute;inset:-6px 0}
.rd .fn-map .icon-arrow-ne{flex:none;display:block}
@media (hover:hover){.rd .fn-text:hover,.rd .fn-map:hover,.dd__btn:hover{border-bottom-color:var(--ink)}}
.rd .fn-text:focus-visible,.rd .fn-map:focus-visible,.dd__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rd .fn-text[aria-expanded=true],.rd .fn-map[aria-expanded=true],.dd__btn[aria-expanded=true]{border-bottom-color:var(--ink)}
/* Expanded bar from 768px: View on map sits at the far right, level with the chips. */
@media (min-width:768px){
  .filter-nav:not(.is-stuck) .fn-rows{position:relative}
  .filter-nav:not(.is-stuck) .fn-row--top{padding-right:calc(var(--s-6) + 110px)}
  .filter-nav:not(.is-stuck) .fn-map{position:absolute;top:calc(18px + var(--s-2) + 2px);right:0}
  .fn-row--bottom .fn-sort{align-self:flex-end;margin-bottom:2px}
}
/* Stuck bar from 768px: one 56px row of dropdowns (What, Situation, Where, How long),
   Sort by, then View on map on the right. app.js builds the dropdowns (.fn-compact). */
.fn-compact{display:none}
@media (min-width:768px){
  .filter-nav.is-stuck .fn-row--top,.filter-nav.is-stuck .fn-where,.filter-nav.is-stuck .fn-long{display:none}
  .filter-nav.is-stuck .fn-row--bottom{min-height:55px;align-items:center;gap:var(--s-2) var(--s-6);padding-block:var(--s-2)}
  .filter-nav.is-stuck .fn-compact{display:contents}
  .filter-nav.is-stuck .fn-sort{align-self:center;margin-bottom:0}
  .filter-nav.is-stuck .fn-map{margin-left:auto}
}
.dd{position:relative}
.dd__btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:2px 0 0;border:0;border-bottom:var(--bw) solid var(--line-ui);border-radius:0;background:none;color:var(--ink);font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer}
.dd__label{color:var(--ink-3)}
.dd__list{position:absolute;top:calc(100% + var(--s-2));left:0;z-index:2;min-width:max(100%,200px);max-height:calc(5 * var(--control-h));margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;background:var(--paper);border:var(--bw) solid var(--line);border-radius:0;box-shadow:var(--shadow-menu);outline:none}
.dd__list[hidden]{display:none}
.dd__list.is-right{left:auto;right:0}
.dd__list [role=option]{display:flex;align-items:center;gap:var(--s-2);min-height:var(--control-h);padding:var(--s-2) var(--s-3);font:400 var(--t-label)/18px var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.dd__list [role=option].is-active{background:var(--color-hover);color:var(--ink)}
.dd__list [role=option][aria-selected=true]{color:var(--ink)}
.dd__list:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dd__text{display:flex;flex-direction:column}
.dd__sub{color:var(--ink-3)}
.dd__check{flex:none;position:relative;width:14px;height:14px;border:var(--bw) solid var(--line-ui)}
[aria-selected=true]>.dd__check{background:var(--ink);border-color:var(--ink)}
[aria-selected=true]>.dd__check::after{content:"";position:absolute;left:3px;top:1px;width:6px;height:8px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.dd__tick{flex:none;width:14px}
[aria-selected=true]>.dd__tick::after{content:"";display:block;width:8px;height:5px;margin:0 auto 3px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.fn-filters{display:none!important}
.filter-nav.is-stuck .fn-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.filter-nav.is-stuck .fn-help,.filter-nav.is-stuck #horseSub{display:none!important}
@media (max-width:767px){
  .filter-nav{padding-block:var(--s-4)}
  .fn-rows{gap:var(--s-4)}
  .fn-row{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .fn-row--top>.fn-group{width:100%}
  /* Chips stay on one line and scroll, fading out at the right edge. */
  .chip-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-4px calc(-1 * var(--gutter));padding:4px var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .rd .chip-list::-webkit-scrollbar{display:none}
  .fn-row--bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
  .fn-select,.fn-sort .fn-select{width:100%}
  .fn-row--bottom .btn--secondary{width:100%}
  .rd .fn-map{align-self:end;justify-self:start}
  /* Stuck on a phone: one row, at most 64px: Filters, Sort by and the map. */
  .filter-nav.is-stuck .fn-row--top,.filter-nav.is-stuck .fn-where,.filter-nav.is-stuck .fn-long{display:none}
  .filter-nav.is-stuck .fn-row--bottom{grid-template-columns:auto minmax(0,1fr) auto}
  .filter-nav.is-stuck .fn-filters{display:inline-flex!important}
  .filter-nav.is-stuck .fn-map-label{display:none}
}

/* "View on map" panel: the explore map, docked on the right from 1024px (the list
   reflows beside it), over the list with a scrim from 768px, full screen on phones. */
.map-panel{position:fixed;z-index:var(--z-panel);display:flex;flex-direction:column;background:var(--paper);transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
.map-panel[hidden]{display:none}
.map-panel.is-warming{visibility:hidden}
.map-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-bottom:var(--bw) solid var(--line)}
.map-panel__title{margin:0;color:var(--ink)}
/* While the map is open, "View on map" moves here as "Close map", its arrow turned
   to point back (Ro, 22 Oct 2026); the one in the filter bar steps aside. */
.rd .map-panel__close{flex:none}
.rd .fn-map[aria-expanded=true]{display:none}
.map-panel #exploreMap{flex:1 1 auto;height:100%;min-height:0;border:0}
.map-scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--ink);opacity:.4}
.map-scrim[hidden]{display:none}
/* From 768px the panel runs from under the header to the bottom of the screen, above
   the filter nav (15) and under the header (20). */
@media (min-width:768px){
  .map-panel{top:var(--header-h,85px);right:0;height:calc(100dvh - var(--header-h,85px));width:60vw;border-left:var(--bw) solid var(--line);transform:translateX(100%)}
}
/* Docked from 1024px: the right half of the screen; the filter nav and results reflow
   into the left half. */
@media (min-width:1024px){
  .map-panel{left:50%;right:auto;width:var(--map-w)}
  body.map-docked .map-shift,body.map-docked .filter-nav{margin-right:var(--map-w)}
  body.map-docked .filter-nav.is-stuck{right:var(--map-w);margin-right:0}
  body.map-docked .map-shift.container,body.map-docked .map-shift .container,body.map-docked .filter-nav .container{max-width:none;margin-left:0;padding-inline:var(--gutter) var(--s-5)}
  body.map-docked .card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  body.map-docked .card-rail{margin-right:0;padding-right:0}
}
@media (max-width:767px){.map-panel{inset:0;transform:translateY(100%)}}
.map-panel.is-open{transform:none}
@media (prefers-reduced-motion:reduce){.map-panel{transform:none;opacity:0}.map-panel.is-open{opacity:1}}
html.is-map-locked{overflow:hidden}

/* FAQ, the same on both pages */
.rd .faq-list{border-top:var(--bw) solid var(--line);margin-top:var(--stack-heading)}
.rd .faq-item{padding:var(--s-5) 0}
.rd .faq-item summary{font-family:var(--display);font-size:var(--t-title);font-weight:400;line-height:1.3}
.rd .faq-item summary::after{width:16px;text-align:center;font-size:16px}
.rd .faq-item p{max-width:var(--measure);font-size:var(--t-body)}

/* Dark sign-up block, the same on both pages */
.signup-founder{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);color:var(--paper-2)}
.signup-founder img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.signup-founder p{margin:0}
.signup-form{display:grid;gap:var(--s-5)}
.signup-form__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-5) var(--s-5)}
.signup-form label{display:grid;gap:var(--s-2)}
.signup-form label .label{color:var(--paper-3)}
.rd .signup-form input{min-height:var(--control-h);height:var(--control-h);padding:var(--s-2) 0}
.signup-form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4)}
.signup-form__foot .form-status{margin:0;min-height:17px;color:var(--paper-2)}
.signup-form__foot .btn--on-dark{margin-left:auto}
/* "Get listed" (was "Say hey"): square like the other buttons (Ro, 22 Oct 2026). */
.rd .signup-form .btn--on-dark{width:auto;min-width:116px;height:44px;min-height:44px;border-radius:var(--r-control);letter-spacing:var(--ls-label)}

/* Footer: one height, on the container edges */
.rd footer{padding-block:var(--s-7)!important}
.rd footer .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-5)}
.rd footer nav{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
@media (max-width:820px){.rd footer .container{flex-direction:column;align-items:flex-start}}

/* /for-business/ */
/* /for-business/: more room between sections, the same above and below every one,
   hero included: 80px on phones, 96px from 768px, 128px from 1200px (Ro, 22 Oct 2026). */
.rd.biz{--section-y:calc(var(--s-8) + var(--s-4))}
@media (min-width:768px){.rd.biz{--section-y:var(--s-9)}}
@media (min-width:1200px){.rd.biz{--section-y:var(--s-10)}}
.biz-hero{padding-block:var(--section-y)}
/* Copy and photo share one horizontal centre line (Ro, 22 Oct 2026). */
.biz-hero .grid{align-items:center}
.biz-hero h1{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 0 var(--s-4);text-wrap:balance}
.biz-hero__sub{margin:0 0 var(--s-5);color:var(--ink)}
.biz-hero__media{position:relative;margin:0;align-self:center}
/* The credit hangs under the photo, so the photo itself is what lines up with the copy. */
.biz-hero__media figcaption{position:absolute;top:100%;left:0}
/* Shorter on every screen, cropped to keep the tool pot and wheel in frame. */
.biz-hero__media img{display:block;width:100%;aspect-ratio:7/6;max-height:min(560px,70vh);object-fit:cover;object-position:40% 35%}
@media (max-width:1023px){.biz-hero__media img{max-height:440px}}
@media (max-width:767px){.biz-hero__media img{max-height:280px}}
.biz-hero__media figcaption{margin-top:var(--s-2);color:var(--ink-3)}
.biz-hero__media figcaption a{color:inherit;border-bottom:var(--bw) solid var(--line-ui)}
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin:var(--s-6) 0 0;padding:0;list-style:none}
.jump__label{color:var(--ink)}
.jump a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:24px;color:var(--ink-2)}
.jump a::before{content:"";width:8px;height:8px;background:var(--ink)}
.jump a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* One full-width line between the hero and "Our why" (the category strip is gone, Ro, 22 Oct 2026). */
.biz-hero+.section{border-top:var(--bw) solid var(--line)}
/* The same line wherever two light sections meet (How does it work? and Business pricing). */
.biz .section:not(.band-dark)+.section:not(.band-dark){border-top:var(--bw) solid var(--line)}
.biz-strip{border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);padding-block:var(--s-4)!important}
.rd .biz-strip .vert-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)!important;mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)!important;padding-left:max(var(--gutter),calc((100% - var(--container)) / 2))}
.rd .biz-strip .vert-set>span{padding:0 var(--s-5)!important;opacity:1!important}
.rd .biz-strip .vert-set>span[aria-hidden]{padding:0!important;opacity:.35!important}
.rd .biz-strip .vert-set:first-child>span:first-child{padding-left:0!important}
.rd .biz-strip .vert-track{font-size:var(--t-label)!important;letter-spacing:var(--ls-label)}
.biz-copy h2{font-size:var(--t-headline);line-height:var(--lh-tight);margin:0 0 var(--stack-heading)}
.biz-copy p{margin:0 0 var(--s-4);max-width:var(--measure);font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.biz-media{margin:0}
.biz-media figcaption{margin-top:var(--s-2);color:var(--ink-3)}
.biz-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
/* Stacked (under 1024px), the "Our why" photo is half as tall, Simone and the horse kept in frame. */
/* The motorbike photo is portrait: the crop keeps both riders and the bike, centred across. */
#our-why .biz-media img{object-position:50% 62%}
@media (max-width:1023px){#our-why .biz-media img{aspect-ratio:8/3;object-position:50% 40%}}
/* Numerals the same size as the text, in a fixed-width column so both items' text lines up. */
.ambitions{margin:0;padding:0;list-style:none;counter-reset:ambition;font-family:var(--display);font-weight:600;font-size:calc(var(--t-headline) * .8);line-height:1.15}
/* Each item's text is one <span>, so the numeral and the text are the grid's only two cells. */
.ambitions li{display:grid;grid-template-columns:1.1em minmax(0,1fr);align-items:baseline;column-gap:.2em;counter-increment:ambition}
.ambitions li::before{content:counter(ambition) ".";font-weight:600;font-variant-numeric:tabular-nums}
.ambitions li+li{margin-top:var(--s-6)}
.ambitions u{text-decoration-thickness:2px;text-underline-offset:6px}
.rd .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7) var(--grid-gap);margin:0;padding:0;list-style:none}
@media (min-width:768px){.rd .steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rd .steps li{display:grid;gap:var(--s-4);justify-items:center;text-align:center}
.rd .steps img{display:block;width:100%;max-width:320px;aspect-ratio:4/3;object-fit:contain;background:var(--panel)}
.rd .steps p{margin:0;max-width:24ch;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
/* Two static text boxes under the steps, centred, 70% of their old 62ch width. */
.rd .steps-note{margin:var(--s-8) 0 0;text-align:center}
.rd .steps-note p{max-width:calc(62ch * .7);margin:0 auto;font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.rd .steps-note p:first-child{color:var(--ink)}
.rd .steps-note p+p{margin-top:var(--s-2)}
@media (max-width:767px){.rd .steps-note p{max-width:none}}
.price-head{font-size:var(--t-headline);line-height:var(--lh-tight);margin:0 0 var(--s-7);max-width:24ch}
.price-head u{text-decoration-thickness:2px;text-underline-offset:6px}
.price-copy p{margin:0 0 var(--s-6);max-width:var(--measure);font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.price-copy h3{font-size:var(--t-title);margin:0 0 var(--s-3)}
.price-copy ul{margin:0;padding-left:1.2em;font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.rd .compare-table{max-width:none;font-size:var(--t-small)}
.rd .compare-table th,.rd .compare-table td{padding:var(--s-3) var(--s-4)}
.rd .compare-table td{border-left:var(--bw) solid var(--line);text-align:center}
.rd .compare-table thead th{padding-top:0;font-size:var(--t-label);letter-spacing:var(--ls-label)}
.rd .compare-table thead th+th{text-align:center;border-left:0}
.rd .compare-table__ours{background:none}
.rd .compare-note{max-width:none;margin-top:var(--s-6);font-size:var(--t-small);color:var(--ink-3)}
.size-band h2{font-size:var(--t-subhead);line-height:1.2;margin:0 0 var(--s-3)}
.size-band p{margin:0;max-width:var(--measure);font-size:var(--t-body);line-height:1.6;color:var(--paper-2)}
.rd .view-tabs[hidden]{display:none}
#browseRails:not([hidden])+.results{margin-top:var(--s-8)}
#browseRails[hidden]{display:none}
.rd .hero-sub{max-width:none}
.rd .container section{padding-left:0!important;padding-right:0!important}
.biz-hero__media img,.biz-media img,.rd .steps img{height:auto}
.biz-copy p.eyebrow{margin:0 0 var(--s-4);font-size:var(--t-label);line-height:1.5;color:var(--ink-2)}
.size-band p.eyebrow{margin:0 0 var(--s-4);font-size:var(--t-label);line-height:1.5;color:var(--paper-2)}
@media (max-width:820px){.rd #intro{display:block;min-height:0;text-align:left;padding:var(--section-y) 0!important}.rd #intro h1{margin-bottom:var(--s-4)!important}}
/* Jump-to targets land under the sticky header. */
.rd section[id]{scroll-margin-top:calc(var(--header-h,85px) + var(--s-5))}
.rd [tabindex="-1"]:focus{outline:none}
/* FAQ, the same block on both pages */
.rd .faq-section{padding-bottom:var(--section-y)}
.rd .band-dark+.faq-section{padding-top:var(--section-y)}