/* Production overrides on top of the ported prototype stylesheet (styles.css).
 * Kept separate so the extract stays a verbatim copy of the signed-off design;
 * everything here is the delta between "prototype in a toolbar frame" and "real
 * site served on its own domain". */

/* The prototype painted the body the dark toolbar colour behind a floating
   "stage". There is no stage here — pages sit directly on the page ground. */
body {
  background: var(--ground);
}

/* The prototype's .stage established the container-query context every page's
   responsive layout depends on (container-type:inline-size). Without a container
   ancestor, none of the @container rules match and the mobile layouts never
   engage. #app is that context now. */
#app {
  container-type: inline-size;
  width: 100%;
}

/* Prototype-only chrome: the toolbar, the phone-frame stage, the in-page
   "Prototype / Booking mode" demo switch. None of it is part of the product. */
.chrome,
.canvas,
.stage,
.protoswitch {
  display: none !important;
}

/* Web listing wizard. Centred container (1180 matches the home hero card), two
   columns: form then step list. Below 900px it stacks, form first. */
.wizard { display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start;
  max-width:1180px; margin:0 auto; padding:28px 40px 72px; }
/* Not sticky: the Publish button used to float over the preview card on scroll. */
.wizard__side { position:static; }
/* "Check the details" stacks four (or five) former steps on one page. Each keeps
   its own heading; a rule + spacing separates them so they read as sections. */
.wsub { display:flex; flex-direction:column; gap:14px; padding-top:26px; margin-top:26px; border-top:1px solid var(--border,#dde5e3); }
.wsub:first-of-type { padding-top:6px; margin-top:6px; border-top:0; }
.wsub .h-1 { font-size:19px; }
/* Shared photo strip (Batch 31): multi-upload + drag/keyboard reorder + cover. */
.phstrip { border:1px dashed transparent; border-radius:12px; transition:border-color .12s, background .12s; }
.phstrip--drop { border-color:var(--accent,#0E5C63); background:rgba(14,92,99,.06); }
.phstrip__grid { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.phstrip__empty { color:var(--muted,#7C8A87); font-size:13px; padding:8px 2px; }
.phstrip__foot { display:flex; align-items:center; gap:12px; margin-top:12px; }
.phstrip__add { display:inline-flex; align-items:center; border:1px solid var(--accent,#0E5C63); color:var(--accent,#0E5C63); background:#fff; border-radius:10px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.phstrip__status { font-size:12.5px; color:var(--muted,#7C8A87); }
.phstrip__cover { font-size:12.5px; color:var(--muted,#7C8A87); margin:10px 0 0; }
.phtile { position:relative; width:116px; height:86px; border-radius:10px; background:#eef3f2; background-size:cover; background-position:center; overflow:hidden; cursor:grab; outline:none; border:1px solid var(--border,#dde5e3); }
.phtile:focus-visible { box-shadow:0 0 0 2px var(--accent,#0E5C63); }
.phtile.is-drag { opacity:.4; }
.phtile.mark-before { box-shadow:-3px 0 0 0 var(--accent,#0E5C63); }
.phtile.mark-after { box-shadow:3px 0 0 0 var(--accent,#0E5C63); }
.phtile__img { position:absolute; inset:0; background-size:cover; background-position:center; }
.phtile__cover { position:absolute; left:5px; bottom:5px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--accent,#0E5C63); color:#fff; padding:2px 7px; border-radius:6px; }
.phtile__x { position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:13px; line-height:1; cursor:pointer; padding:0; z-index:2; }
.phtile__flag { position:absolute; top:4px; left:4px; background:var(--warning,#B4700F); color:#fff; font-size:11px; line-height:1; padding:3px 5px; border-radius:6px; z-index:2; }
.phtile__flag--skip { background:var(--muted,#7C8A87); }
.phtile--up, .phtile--fail { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; cursor:default; padding:8px; text-align:center; }
.phtile__upname, .phtile__failname { font-size:11px; color:var(--muted,#7C8A87); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phtile__bar { width:82%; height:5px; border-radius:99px; background:var(--border,#dde5e3); overflow:hidden; }
.phtile__bar > i { display:block; height:100%; background:var(--accent,#0E5C63); width:0; transition:width .15s; }
.phtile--fail { border-color:var(--danger,#C2402F); }
.phtile__failmsg { font-size:10px; color:var(--danger,#C2402F); line-height:1.2; }
.phtile__failacts { display:flex; gap:6px; align-items:center; }
.phtile__retry { border:1px solid var(--accent,#0E5C63); color:var(--accent,#0E5C63); background:#fff; border-radius:7px; font-size:11px; padding:2px 9px; cursor:pointer; }
.photonotes { display:flex; flex-direction:column; gap:8px; }
.photonotes:empty { display:none; }
.photonote--warn { font-size:12.5px; background:#fbeee0; border:1px solid #e6c9a0; color:#8a5a12; border-radius:10px; padding:9px 12px; }
/* "Also at <building>" — sibling listings in the same building (Batch 34). */
.alsoat__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.alsoat__card { display:flex; flex-direction:column; border:1px solid var(--border,#dde5e3); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; background:#fff; transition:box-shadow .12s; }
.alsoat__card:hover { box-shadow:0 6px 20px -10px rgba(18,33,31,.35); }
.alsoat__img { height:104px; background:#eef3f2; background-size:cover; background-position:center; }
.alsoat__img--none { background:#eef3f2; }
.alsoat__b { padding:9px 11px; display:flex; flex-direction:column; gap:2px; }
.alsoat__t { font-size:13px; font-weight:600; color:var(--text,#12211F); }
.alsoat__p { font-size:12.5px; color:var(--accent,#0E5C63); font-weight:600; }
.wizard .stepbar { flex-wrap:wrap; }
.wizard .stepbar__s { cursor:default; }
.wizard .stepbar__s.is-done { cursor:pointer; }
.wizard textarea.input { resize:vertical; font-family:inherit; }
/* Forward/back row under the form. */
.wnav { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wnav:empty { display:none; }
/* Persistent "not saved" banner across the top of the wizard. */
.wizsave { grid-column:1 / -1; display:flex; align-items:center; gap:8px;
  background:#fbeee0; border:1px solid #e6c9a0; color:#8a5a12;
  border-radius:11px; padding:10px 14px; font-size:13px; font-weight:600; }
.wizsave svg { flex:none; }
.wizsave[hidden] { display:none; }
/* Changes-requested banner at the top of the wizard. */
.wizcr { display:flex; gap:8px; align-items:flex-start; background:#fbeee0; border:1px solid #e6c9a0;
  color:#8a5a12; border-radius:11px; padding:12px 14px; font-size:13.5px; line-height:1.5; }
.wizcr[hidden] { display:none; }
.wizcr svg { flex:none; margin-top:2px; }
/* Review screen */
.rvwrap { display:flex; flex-direction:column; gap:18px; }
.rvblock { border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.rvblock__h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.rvblock__h h3 { margin:0; }
.rvrow { display:flex; justify-content:space-between; gap:16px; padding:5px 0; font-size:14px; border-top:1px solid var(--border); }
.rvrow:first-of-type { border-top:0; }
.rvrow__k { color:var(--muted); }
.rvrow__v { text-align:right; }
.rvphotos { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.rvphotos img { width:64px; height:64px; object-fit:cover; border-radius:8px; background:#eef3f2; }
.rvlist { margin:0; padding-left:18px; font-size:14px; }
.rvnudges { display:flex; flex-direction:column; gap:8px; }
.rvnudge { display:flex; gap:8px; align-items:flex-start; background:#fdf6ec; border:1px solid #ecd9b6;
  color:#8a5a12; border-radius:10px; padding:10px 12px; font-size:13px; }
.rvnudge svg { flex:none; margin-top:1px; }
.rvactions { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:16px; }
/* Wizard amenities step */
.amgroup__h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.amgroup__h h3 { margin:0; }
.amcount { font-size:12px; color:var(--teal,#0E5C63); font-weight:600; white-space:nowrap; }
.amgrid { display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
.amrow { display:flex; align-items:center; gap:9px; padding:6px 4px; cursor:pointer; font-size:14px; }
.amrow input { flex:none; width:17px; height:17px; accent-color:var(--teal,#0E5C63); }
.amrow svg { flex:none; color:var(--muted,#7C8A87); }
@media(max-width:620px){ .amgrid{ grid-template-columns:1fr; } }
.rvamlist { display:flex; flex-wrap:wrap; gap:6px; }
.rvchip { font-size:12.5px; background:#EDF2F1; border:1px solid var(--border); border-radius:999px; padding:3px 10px; }
/* Listing page amenities section */
.amsec { display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; }
.amsec__cat { grid-column:1 / -1; margin:10px 0 2px; font-size:13px; font-weight:700; color:var(--text,#12211F); }
.amsec__cat:first-child { margin-top:0; }
.amitem { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14.5px; }
.amitem svg { flex:none; color:var(--teal,#0E5C63); }
.amsec .am-extra { display:none; }
.amsec.am-open .am-extra { display:flex; }
/* A collapsed-away category heading (item 19) restores as a block, not flex. */
.amsec.am-open .amsec__cat.am-extra { display:block; }
@media(max-width:620px){ .amsec{ grid-template-columns:1fr; } }
/* Search amenity filter chips */
.amfilters { display:flex; flex-wrap:wrap; gap:8px; }
.amchip { font:inherit; font-size:13px; padding:6px 13px; border-radius:999px; border:1px solid var(--border); background:var(--ground,#F4F7F6); color:var(--text,#12211F); cursor:pointer; }
.amchip:hover { border-color:var(--teal,#0E5C63); }
.amchip.is-on { background:var(--teal,#0E5C63); border-color:var(--teal,#0E5C63); color:#fff; }
/* Listing map (Leaflet). Fixed height so the map has somewhere to render; grey
   ground shows if tiles fail. */
.leafmap { height:320px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#e6eceb; }
.leafmap:focus-within { outline:2px solid var(--teal); outline-offset:2px; }
/* Batch 55 §12: the results map fills its sticky column; the real map replaces the
   decorative stylised backdrop. */
.results__map .map { background:none; }
.results__map .map::before { display:none; }
.results__map .leafmap { height:100%; border:0; border-radius:0; }
/* Batch 55 §14: the listing host card (right column, below the reserve box). */
.hostcard-p { border:1px solid var(--border); border-radius:16px; padding:18px; background:var(--surface); }
.hostcard-p__ph { width:56px; height:56px; border-radius:50%; overflow:hidden; background:#e6eceb; display:flex; align-items:center; justify-content:center; flex:none; color:var(--teal); }
.hostcard-p__ph img { width:100%; height:100%; object-fit:cover; }
/* Map caption: in normal flow directly under the map, never an overlay. */
.mapcap { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--text-2,#5A6B68); }
.mapcap svg { flex:none; margin-top:2px; color:var(--teal,#0E5C63); }
@media(max-width:900px){ .wizard{ grid-template-columns:1fr; padding:24px 20px 60px; } .wizard__side{ position:static; } }

/* Software marketing page */
.split2sw { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin-bottom:8px; }
.split2sw--rev .swshot { order:-1; }
@media(max-width:760px){ .split2sw{ grid-template-columns:1fr; } .split2sw--rev .swshot{ order:0; } }
.swshot { background:#f4f7f6; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 12px 34px -18px rgba(18,33,31,.25); }
.swcal { display:flex; flex-direction:column; gap:12px; }
.swcal__row { display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; }
.swcal__name { font-size:12px; font-weight:600; color:#12211f; }
.swcal__track { position:relative; height:26px; background:#eaf0ef; border-radius:7px; }
.swbar { position:absolute; top:3px; height:20px; border-radius:5px; color:#fff; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; letter-spacing:.04em; }
.swbar--alert { box-shadow:inset 0 0 0 2px #d9744a; }
.swtiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.swtile { background:#fff; border:1px solid var(--border); border-radius:11px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.swtile span { font-size:11px; color:#5a6b68; }
.swtile b { font-family:var(--display),sans-serif; font-size:22px; font-weight:800; color:#12211f; letter-spacing:-.02em; }
.swtile--net { background:rgba(14,92,99,.08); border-color:rgba(14,92,99,.22); }
.swtile--net b { color:#0e5c63; }
.swicon { width:38px; height:38px; border-radius:10px; background:var(--teal-tint,rgba(14,92,99,.1)); color:#0e5c63; display:flex; align-items:center; justify-content:center; font-size:20px; }
.swstep { flex:none; width:28px; height:28px; border-radius:999px; background:#0e5c63; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }

/* User manual */
.manualwrap { display:grid; grid-template-columns:190px 1fr; gap:40px; align-items:start; max-width:960px; }
.manualnav { position:sticky; top:20px; display:flex; flex-direction:column; gap:2px; }
.manualnav a { padding:7px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--muted,#5a6b68); cursor:pointer; }
.manualnav a:hover { background:#f4f7f6; color:#12211f; }
.manualbody { max-width:640px; }
.manualsec { scroll-margin-top:20px; }
.manualsec p { font-size:15px; line-height:1.6; color:#2a3634; margin:10px 0; }
.manualsec code { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; background:#eef3f2; padding:2px 6px; border-radius:5px; }
.mantip { background:rgba(14,92,99,.06); border-left:3px solid #0e5c63; border-radius:0 10px 10px 0; padding:12px 15px; font-size:14px; line-height:1.55; color:#2a3634; margin:12px 0; }
.mantip b { color:#0e5c63; }
.mtag { display:inline-block; color:#fff; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:5px; vertical-align:middle; letter-spacing:.04em; }
.manshot { background:#f4f7f6; border:1px solid var(--border); border-radius:12px; padding:16px; margin:12px 0; }
@media(max-width:760px){ .manualwrap{ grid-template-columns:1fr; } .manualnav{ position:static; flex-direction:row; flex-wrap:wrap; } }

/* Clickable affordance: anything with a click handler shows a pointer, incl.
   <a> without href and <button>/<div>/<span> driven by data-* or JS. */
button:not(:disabled), [data-go], [data-scroll], [data-auth], [data-auth-go],
.tab, .faq__q, .search__field, .search__go, .switch, .stepbar__s, .map__price,
.gallery__all, .burger, label.btn, [data-authpane] button, .pill[aria-pressed] {
  cursor: pointer;
}

/* More software mockups (home rings, bookings list, turnovers) */
.swhome { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.swhome__hero b { font-family:var(--display),sans-serif; font-size:34px; font-weight:800; color:#0e5c63; letter-spacing:-.03em; display:block; }
.swhome__hero span { font-size:11px; color:#5a6b68; }
.swring { display:flex; gap:14px; }
.swring figure { margin:0; text-align:center; }
.swring .r { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; color:#12211f; }
.swring figcaption { font-size:10px; color:#5a6b68; margin-top:4px; font-family:"IBM Plex Mono",ui-monospace,monospace; text-transform:uppercase; }
.swlist { display:flex; flex-direction:column; }
.swrow { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #e3ebe9; }
.swrow:last-child { border-bottom:none; }
.swrow .g { display:flex; flex-direction:column; }
.swrow .g b { font-size:13px; color:#12211f; }
.swrow .g span { font-size:11px; color:#5a6b68; }
.swpill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; }
.swpill.paid { background:rgba(31,122,77,.12); color:#1f7a4d; }
.swpill.req { background:rgba(217,116,74,.14); color:#a84f28; }
.swrow .amt { font-family:var(--display),sans-serif; font-weight:700; font-size:13px; }
.swest { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; font-weight:600; color:#b4700f; background:rgba(180,112,15,.1); padding:1px 4px; border-radius:4px; margin-left:4px; }
.swturn { display:flex; flex-direction:column; gap:8px; }
.swturn__r { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; background:#fff; border:1px solid #e3ebe9; border-radius:10px; padding:9px 11px; }
.swturn__r.urgent { border-color:rgba(217,116,74,.5); box-shadow:inset 3px 0 0 #d9744a; }
.swturn__d { text-align:center; }
.swturn__d b { display:block; font-weight:800; font-size:14px; color:#12211f; }
.swturn__d span { font-size:9px; color:#5a6b68; text-transform:uppercase; }
.swturn__m b { font-size:12.5px; color:#12211f; display:block; }
.swturn__m span { font-size:11px; color:#5a6b68; }
.swturn__m .u { color:#a84f28; font-weight:600; }

/* Search widget: city suggestions, range calendar, guest stepper. Popovers are
   anchored to the search bar, which becomes the positioning context. */
.search { position:relative; }
.btn--sm { padding:7px 14px; font-size:13px; border-radius:10px; }
.search__field--live { position:relative; }
.search__field--live input.search__value { border:0; background:transparent; padding:0; width:100%; outline:none; color:var(--ink-2,#12211f); font-weight:500; }
.search__field--live input.search__value::placeholder { color:var(--muted,#7c8a87); font-weight:400; }
.hs-sugg { position:absolute; top:calc(100% + 10px); left:0; z-index:40; min-width:220px; background:#fff; border:1px solid var(--border,#dde5e3); border-radius:14px; box-shadow:0 16px 40px -12px rgba(18,33,31,.32); padding:6px; }
.hs-sugg[hidden] { display:none; }
.hs-sugg__i { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border:0; background:none; border-radius:9px; font-size:14px; color:var(--ink-2,#12211f); cursor:pointer; }
.hs-sugg__i:hover { background:var(--surface,#f4f7f6); }
.hs-sugg__i svg { color:var(--muted,#7c8a87); flex:none; }
.hs-pop { position:absolute; top:calc(100% + 12px); z-index:45; background:#fff; border:1px solid var(--border,#dde5e3); border-radius:18px; box-shadow:0 20px 50px -14px rgba(18,33,31,.36); padding:16px; }
.hs-pop[hidden] { display:none; }
.hs-pop--dates { left:0; width:min(620px,calc(100vw - 40px)); }
.hs-cal__navrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.hs-cal__months { display:flex; gap:22px; }
.hs-cal__m { flex:1; min-width:0; }
.hs-cal__mh { font-size:14px; font-weight:700; color:var(--ink,#12211f); text-align:center; margin-bottom:8px; }
.hs-cal__count { font-size:13px; color:var(--ink-2,#33443f); }
.hs-cal__acts { display:flex; align-items:center; gap:10px; }
@media (max-width:620px){ .hs-cal__months{ flex-direction:column; gap:14px; } }
.hs-pop--guests { right:64px; width:min(320px,calc(100vw - 40px)); }
.hs-pop--avail { left:0; width:min(320px,calc(100vw - 40px)); }
.hs-pop--budget { left:34%; width:min(240px,calc(100vw - 40px)); }
.hs-pop--beds { right:64px; width:min(280px,calc(100vw - 40px)); }
.hs-list { display:flex; flex-direction:column; gap:2px; }
.hs-list__i { text-align:left; padding:10px 12px; border:0; background:none; border-radius:9px; font-size:14px; color:var(--ink-2,#12211f); cursor:pointer; }
.hs-list__i:hover { background:var(--surface,#f4f7f6); }
.hs-list__i.is-on { background:var(--teal-tint,#dcece9); color:var(--teal,#0e5c63); font-weight:600; }

/* Search mode toggle (short stay / long-term), sits above the search bar.
   Long-term fields default hidden so the first paint (before JS sets the mode)
   shows only the short-stay set; the widget then manages both with inline display. */
.search__field[data-mode-long] { display:none; }
.search__field.is-disabled { opacity:.45; cursor:not-allowed; }
.smodes { display:inline-flex; gap:3px; padding:4px; margin-bottom:12px; background:var(--surface,#f4f7f6); border:1px solid var(--border,#dde5e3); border-radius:999px; }
.smodes__t { padding:8px 18px; border:0; border-radius:999px; background:none; font-size:14px; font-weight:600; color:var(--muted,#5a6b68); cursor:pointer; }
.smodes__t.is-on { background:var(--ground,#fff); color:var(--teal,#0e5c63); box-shadow:var(--shadow-card); }
.hs-cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hs-cal__head b { font-size:15px; color:var(--ink,#12211f); }
.hs-cal__nav { width:32px; height:32px; border-radius:50%; border:1px solid var(--border,#dde5e3); background:#fff; font-size:18px; line-height:1; color:var(--ink-2,#12211f); cursor:pointer; }
.hs-cal__nav:hover { background:var(--surface,#f4f7f6); }
.hs-cal__nav:disabled { opacity:.32; cursor:not-allowed; }
.hs-cal__dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.hs-cal__dow span { text-align:center; font-size:11px; font-weight:700; color:var(--muted,#7c8a87); }
.hs-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.hs-day { aspect-ratio:1; border:0; background:none; border-radius:9px; font-size:13px; color:var(--ink-2,#12211f); cursor:pointer; }
.hs-day:hover:not(:disabled) { background:var(--teal-tint,#dcece9); }
.hs-day.is-off { color:#c3ccca; cursor:not-allowed; }
.hs-day.is-mid { background:#e6f2f2; border-radius:0; color:var(--ink-2,#33443f); }
.hs-day.is-end { background:#0e5c63; color:#fff; border-radius:9px; }
.hs-day.is-ci { border-radius:9px 0 0 9px; }
.hs-day.is-co { border-radius:0 9px 9px 0; }
.hs-cal__foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.hs-cal__clear { background:none; border:0; font-size:13px; font-weight:600; color:var(--ink-2,#12211f); text-decoration:underline; cursor:pointer; }
.hs-step { display:flex; align-items:center; justify-content:space-between; padding:4px 0 14px; }
.hs-step b { font-size:15px; color:var(--ink,#12211f); }
.hs-step__c { display:flex; align-items:center; gap:14px; }
.hs-step__b { width:34px; height:34px; border-radius:50%; border:1px solid var(--border,#dde5e3); background:#fff; font-size:19px; line-height:1; color:var(--ink-2,#12211f); cursor:pointer; }
.hs-step__b:hover:not(:disabled) { border-color:var(--teal,#0e5c63); color:var(--teal,#0e5c63); }
.hs-step__b:disabled { opacity:.32; cursor:not-allowed; }
.hs-step__n { min-width:20px; text-align:center; font-size:15px; font-weight:600; }

/* Language + currency controls (footer). Plumbing only; one option each today. */
.i18n { position:relative; display:inline-flex; gap:8px; align-items:center; }
.i18n__btn { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:none; color:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.i18n__btn:hover { border-color:rgba(255,255,255,.42); }
.i18n__btn svg { opacity:.8; }
.i18n__pop { position:absolute; right:0; bottom:calc(100% + 10px); z-index:50; min-width:190px; background:#fff; color:var(--ink,#12211f); border:1px solid var(--border,#dde5e3); border-radius:12px; box-shadow:0 16px 40px -12px rgba(18,33,31,.4); padding:7px; }
.i18n__pop[hidden] { display:none; }
.i18n__lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#7c8a87); padding:6px 9px 4px; }
.i18n__opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:9px 10px; border:0; background:none; border-radius:8px; font-size:14px; color:var(--ink-2,#12211f); cursor:pointer; }
.i18n__opt:hover { background:var(--surface,#f4f7f6); }
.i18n__opt.is-on { color:var(--teal,#0e5c63); font-weight:600; }
.i18n__opt svg { color:var(--teal,#0e5c63); }
.i18n__more { font-size:11px; color:var(--muted,#7c8a87); padding:7px 10px 4px; border-top:1px solid var(--border,#dde5e3); margin-top:4px; }

/* City imagery: real photos over the coloured plate fallback (Unsplash, R2). */
.city__thumb { overflow:hidden; }
.city__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cityhero { height:180px; border-radius:16px; background:var(--surface,#f4f7f6) center/cover no-repeat; margin-bottom:16px; position:relative; overflow:hidden; box-shadow:var(--shadow-card); }
.cityhero--wide { height:220px; margin-bottom:0; }
@media (max-width:620px){ .cityhero--wide { height:150px; } }
.cityhero[hidden] { display:none; }
.cityhero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,33,31,0) 40%,rgba(18,33,31,.42) 100%); }
.cityhero__name { position:absolute; left:18px; bottom:14px; z-index:1; color:#fff; font-family:var(--display,Georgia,serif); font-size:26px; font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.cityhero__credit { position:absolute; right:12px; bottom:9px; z-index:1; color:rgba(255,255,255,.82); font-size:10px; }
.cityhero__credit a { color:inherit; text-decoration:underline; }
@media (max-width:620px){ .cityhero { height:132px; } .cityhero__name { font-size:21px; } }

/* Phone mockups (home app section): CSS frames, Android + iPhone, mini UI. */
.phones { display:flex; gap:18px; justify-content:flex-end; align-items:flex-start; }
.phone { position:relative; width:168px; background:#0c1413; padding:8px; box-shadow:0 24px 60px -20px rgba(18,33,31,.5); }
.phone--android { border-radius:26px; margin-top:10px; }
.phone--ios { border-radius:34px; }
.phone__screen { position:relative; overflow:hidden; border-radius:19px; background:#fff; aspect-ratio:9/18.5; display:flex; flex-direction:column; }
.phone--ios .phone__screen { border-radius:26px; }
.phone__cam { position:absolute; top:15px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:#2a3735; z-index:3; }
.phone__notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:52px; height:16px; border-radius:0 0 12px 12px; background:#0c1413; z-index:3; }
.phone__tag { position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#7c8a87); }
.ph-top { padding:14px 12px 10px; }
.ph-top--teal { background:var(--teal,#0e5c63); }
.ph-logo { font-family:var(--display,Georgia,serif); font-size:15px; font-weight:700; color:var(--teal,#0e5c63); }
.ph-top--teal .ph-logo { color:#fff; }
.ph-logo i { color:var(--terra,#d9744a); font-style:normal; }
.ph-img { height:96px; width:calc(100% - 20px); margin:0 10px; border-radius:12px; object-fit:cover; display:block; }
.ph-body { padding:11px 12px 14px; display:flex; flex-direction:column; gap:6px; }
.ph-row { display:flex; align-items:center; justify-content:space-between; }
.ph-row b { font-size:13px; color:var(--ink,#12211f); }
.ph-star { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--terra,#d9744a); font-weight:600; }
.ph-meta { font-size:11px; color:var(--muted,#7c8a87); }
.ph-price { font-size:15px; font-weight:700; color:var(--teal,#0e5c63); margin-top:2px; }
.ph-price small { font-size:11px; font-weight:400; color:var(--muted,#7c8a87); }
.ph-badge { align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--success,#1f7a4d); background:rgba(31,122,77,.12); padding:4px 8px; border-radius:999px; }
.ph-code { display:flex; align-items:center; justify-content:space-between; background:var(--surface,#f4f7f6); border:1px solid var(--border,#dde5e3); border-radius:10px; padding:8px 11px; margin-top:2px; }
.ph-code span { font-size:11px; color:var(--muted,#7c8a87); }
.ph-code b { font-size:17px; letter-spacing:.14em; color:var(--ink,#12211f); }
.ph-cta { margin-top:6px; text-align:center; font-size:12px; font-weight:600; color:#fff; background:var(--terra,#d9744a); border-radius:9px; padding:8px; }
.ph-cta--ghost { color:var(--teal,#0e5c63); background:none; border:1px solid var(--border,#dde5e3); }
@media (max-width:520px){ .phones { justify-content:center; } .phone { width:150px; } }

/* Long-term rentals: filter controls, fact grid, tick lists. */
.rfilter { display:flex; flex-direction:column; gap:3px; }
.rfilter > span { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#7c8a87); }
.rfilter .input { padding:7px 10px; font-size:13px; min-height:0; }
.rf-toggle { align-self:flex-end; }
.factgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.fact { display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--surface,#f4f7f6); border:1px solid var(--border,#dde5e3); border-radius:12px; }
.fact b { font-size:15px; color:var(--ink,#12211f); }
.fact span { font-size:12px; color:var(--muted,#7c8a87); }
.ticklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ticklist li { position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-2,#33443f); }
.ticklist li::before { content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%; background:var(--teal-tint,#dcece9); }
.ticklist li::after { content:""; position:absolute; left:5px; top:7px; width:6px; height:3px; border-left:2px solid var(--teal,#0e5c63); border-bottom:2px solid var(--teal,#0e5c63); transform:rotate(-45deg); }
.ticklist--x li::before { background:var(--terra-tint,rgba(217,116,74,.12)); }
.ticklist--x li::after { left:5px; top:6px; width:8px; height:8px; border:0; border-left:0; border-bottom:0; background:linear-gradient(45deg,transparent 44%,var(--terra,#d9744a) 44%,var(--terra,#d9744a) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--terra,#d9744a) 44%,var(--terra,#d9744a) 56%,transparent 56%); transform:none; }

/* ============================================================
   Become-a-host chooser page (short lets vs long lets)
   Ported from the signed-off mockup onto the site tokens.
   ============================================================ */
.cmpgrid{display:grid;grid-template-columns:190px 1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius,16px);overflow:hidden;background:var(--ground);}
@media(max-width:860px){.cmpgrid{grid-template-columns:1fr;}}
.cmpimg{padding:0;border-bottom:1px solid var(--border);overflow:hidden;}
/* Item 22: the row-label column's top cell was an empty ~150px grey block that read
   as a stray band above the table. Transparent, so the corner is clean and the grey
   label column starts at the first real row. */
.cmpimg--spacer{background:transparent;}
.cmpimg img{width:100%;height:150px;object-fit:cover;display:block;}
@media(max-width:860px){.cmpimg--spacer{display:none;}.cmpimg img{height:170px;}}
.cmpcol{padding:22px 24px;border-bottom:1px solid var(--border);}
.cmpcol--spacer{background:transparent;}
.cmpcol--short{background:var(--terra-tint);border-bottom:3px solid var(--terra);}
.cmpcol--long{background:var(--teal-tint);border-bottom:3px solid var(--teal);}
.cmpkind{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;}
.cmpcol--short .cmpkind{color:var(--terra-dark);}
.cmpcol--long .cmpkind{color:var(--teal);}
.cmpsub{font-size:13.5px;color:var(--muted);margin-top:3px;}
.cmprowlab{padding:20px 24px;background:var(--surface);border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;}
.cmpcell{padding:20px 24px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);font-size:15px;line-height:1.55;color:var(--ink-2,#33443f);}
.cmpcell b{font-weight:600;color:var(--ink);}
.cmpgrid > :nth-last-child(-n+3){border-bottom:0;}
@media(max-width:860px){
  .cmpcol--spacer{display:none;}
  .cmprowlab{border-left:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:6px;border-bottom:0;}
  .cmpcell{border-left:0;}
  .cmpgrid > :nth-last-child(-n+3){border-bottom:1px solid var(--border);}
}
.cmpflag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:99px;margin-top:8px;background:var(--terra-tint);color:var(--terra-dark);}
.cmpnote{font-size:13.5px;color:var(--muted);margin-top:24px;max-width:none;}

/* Teal switch band */
.hostband2{background:var(--teal);color:#fff;padding:60px 0;}
.hostband2 h2{color:#fff;}
.hostband2 p{color:rgba(255,255,255,.86);max-width:58ch;font-size:17.5px;}
.hb2two{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;}
@media(max-width:860px){.hb2two{grid-template-columns:1fr;gap:28px;}}
.minical{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:13px;padding:16px;}
.mcrow{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:7px 0;}
.mcname{font-size:12.5px;color:rgba(255,255,255,.75);}
.mctrack{position:relative;height:26px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;}
.mcbar{position:absolute;top:3px;height:20px;border-radius:5px;font-size:10.5px;font-weight:600;color:#fff;display:flex;align-items:center;padding:0 7px;white-space:nowrap;overflow:hidden;}
.mckey{display:flex;gap:14px;margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.75);flex-wrap:wrap;}
.mckey span{display:inline-flex;align-items:center;gap:6px;}
.mckey i{width:10px;height:10px;border-radius:3px;display:inline-block;}

/* Two routes */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:860px){.rgrid{grid-template-columns:1fr;}}
.route{border:1px solid var(--border);border-radius:var(--radius,16px);padding:28px;background:var(--ground);display:flex;flex-direction:column;}
.route--short{border-top:4px solid var(--terra);}
.route--long{border-top:4px solid var(--teal);}
.route h3{font-size:22px;font-family:var(--display);letter-spacing:-.02em;margin-bottom:0;}
.route ul{list-style:none;margin:14px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;}
.route li{font-size:14.5px;color:var(--muted);padding-left:22px;position:relative;}
.route li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.route--short li::before{background:var(--terra);}
.route--long li::before{background:var(--teal);}
.route .btn{margin-top:auto;align-self:flex-start;}

/* What we don't do */
.hcard{border:1px solid var(--border);border-radius:var(--radius,16px);padding:30px 32px;background:var(--surface);}
.hlist{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:20px;}
@media(max-width:760px){.hlist{grid-template-columns:1fr;}}
.hitem h3{font-size:15.5px;margin-bottom:4px;}
.hitem p{font-size:14.5px;color:var(--muted);margin:0;}

/* Auth page back control: a way out other than the logo. */
.authback { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0 0 2px; color:var(--muted,#7c8a87); font-size:14px; font-weight:600; cursor:pointer; }
.authback:hover { color:var(--teal,#0e5c63); }
.authback svg { width:16px; height:16px; }

/* Help bubble (persistent, bottom-right). Panel contents are swappable; the
   bubble never moves. Not a chatbot: no input, no conversation affordance. */
.helpbubble { position:fixed; right:20px; bottom:20px; z-index:60; width:54px; height:54px; border-radius:50%; border:none; background:var(--teal,#0e5c63); color:#fff; box-shadow:0 8px 24px -6px rgba(14,92,99,.5); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.helpbubble:hover { transform:translateY(-1px); }
.helpbubble svg { width:24px; height:24px; }
.helppanel { position:fixed; right:20px; bottom:84px; z-index:60; width:340px; max-width:calc(100vw - 40px); max-height:min(70vh,560px); overflow-y:auto; background:#fff; border:1px solid var(--border,#dde5e3); border-radius:16px; box-shadow:0 16px 44px -12px rgba(18,33,31,.34); }
.helppanel[hidden] { display:none; }
.helppanel__head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border,#dde5e3); position:sticky; top:0; background:#fff; }
.helppanel__head b { font-family:var(--display),sans-serif; font-size:15px; }
.helppanel__close { border:none; background:none; cursor:pointer; font-size:20px; line-height:1; color:var(--muted,#5a6b68); padding:2px 6px; }
.hq { border-bottom:1px solid #eef3f2; }
.hq > button { width:100%; text-align:left; border:none; background:none; cursor:pointer; padding:12px 16px; font-size:13.5px; font-weight:600; color:#12211f; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hq > button .chev { color:var(--muted,#5a6b68); transition:transform .15s; flex:none; }
.hq.open > button .chev { transform:rotate(90deg); }
.hq__a { padding:0 16px 12px; font-size:13px; line-height:1.5; color:#2a3634; display:none; }
.hq.open .hq__a { display:block; }
.helppanel__links { padding:12px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.helppanel__links a { font-size:13px; font-weight:600; color:var(--teal,#0e5c63); cursor:pointer; display:flex; align-items:center; gap:7px; }

/* ============================================================
   Master-batch fixes (audit follow-up)
   ============================================================ */

/* #15 Content pages read better centred than stretched to the full 1600px wrap,
   which left the text hugging the left with dead space on the right. Only the
   CONTENT wraps are constrained; the header/footer wraps are untouched so their
   width stays identical on every page. */
#page-host .section > .wrap,
#page-host .hostband2 > .wrap { max-width: 1180px; }

/* #14 390px overflow.
   The listing page has its own compact header (not the shared responsive one);
   its inline search launcher forces the row wider than the viewport on a phone,
   so hide it there — the logo and menu remain. */
/* The rental page's content wrap has no side padding, so the gallery's full-bleed
   negative margin (tuned for an 18px-padded wrap) pushed it past the viewport. */
@container (max-width: 820px){ #page-rental .gallery{ margin-inline:0; } }

/* ============================================================
   PRODUCT SHOTS - static illustrative console screens (calendar,
   money, turnovers, phone). Scoped under .shot / .ps* so nothing
   collides with the site's own head / row / pill / table styles.
   Figures are illustrative; framed in chrome so they read as shots.
   Ported from the approved v4 console design, on the site tokens.
   ============================================================ */
.shot{
  --cl:#00808c; --air:#c2255c; --bkg:#2f5fd0; --exp:#b8801a;
  background:var(--ground,#fff); border:1px solid var(--border,#dde5e3); border-radius:12px;
  box-shadow:var(--shadow-card); overflow:hidden; color:var(--ink,#12211f);
}
.shot__chrome{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.shot__dots{display:flex;gap:5px;}
.shot__dots i{width:9px;height:9px;border-radius:50%;background:#d3dcda;display:block;}
.shot__url{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--muted);background:var(--ground,#fff);border:1px solid var(--border);border-radius:20px;padding:3px 12px;}
.shot__hd{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:18px 20px 14px;}
.shot__title{font-family:var(--display);font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em;}
.shot__sub{font-size:12px;color:var(--muted);margin:3px 0 0;}
.shot__key{display:flex;flex-wrap:wrap;gap:6px;}
.shot__chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:20px;padding:3px 10px;color:var(--ink);background:var(--ground,#fff);white-space:nowrap;}
.shot__chip i{width:8px;height:8px;border-radius:2px;display:block;}
.shot-scroll{overflow-x:auto;}

/* calendar */
.pscal{min-width:820px;padding:0 20px 20px;}
.pscal-days{display:grid;grid-template-columns:150px repeat(14,1fr);border-bottom:1px solid var(--border);padding-bottom:7px;margin-bottom:4px;}
.pscal-days span{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;}
.pscal-days span.wk{color:var(--terra);}
.pscal-days .lbl{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.pscal-row{display:grid;grid-template-columns:150px 1fr;align-items:center;border-bottom:1px solid var(--surface);}
.pscal-prop{padding:11px 10px 11px 0;font-size:13px;font-weight:500;line-height:1.25;}
.pscal-prop small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px;}
.pscal-track{position:relative;display:grid;grid-template-columns:repeat(28,1fr);height:52px;align-items:center;}
.pscal-track::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(100%/14 - 1px),var(--border) calc(100%/14 - 1px),var(--border) calc(100%/14));opacity:.55;}
.pscal-bk{position:relative;height:28px;border-radius:5px;display:flex;align-items:center;padding:0 9px;font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.03em;white-space:nowrap;overflow:hidden;}
.pscal-bk.is-cl{background:var(--cl);}
.pscal-bk.is-air{background:var(--air);}
.pscal-bk.is-bkg{background:var(--bkg);}
.pscal-bk.is-exp{background:var(--exp);}
.pscal-bk.is-req{background:#fff;color:var(--cl);border:1.5px dashed var(--cl);}

/* money */
.psmoney table{width:100%;border-collapse:collapse;font-size:13px;min-width:620px;}
.psmoney th,.psmoney td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--border);}
.psmoney th:first-child,.psmoney td:first-child{text-align:left;padding-left:20px;}
.psmoney td:last-child,.psmoney th:last-child{padding-right:20px;}
.psmoney thead th{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--ink);}
.psmoney tbody td{font-variant-numeric:tabular-nums;}
.psmoney .ch{display:inline-flex;align-items:center;gap:9px;font-weight:500;}
.psmoney .ch i{width:9px;height:22px;border-radius:2px;display:block;flex:none;}
.psmoney .rate{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--muted);}
.psmoney .rate.low{color:var(--success);font-weight:600;}
.psmoney tfoot td{font-weight:600;border-bottom:none;border-top:1px solid var(--ink);padding-top:13px;}
.psmoney .verdict{margin:0;padding:16px 20px 20px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;background:var(--surface);border-top:1px solid var(--border);}
.psmoney .verdict strong{font-family:var(--display);font-size:19px;color:var(--teal);font-weight:800;letter-spacing:-.01em;}
.psmoney .verdict span{font-size:13px;color:var(--muted);line-height:1.5;}

/* turnovers */
.psturn{padding:4px 0 8px;}
.psturn-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--surface);}
.psturn-clock{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;}
.psturn-clock small{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;font-family:var(--sans);}
.psturn-who{font-size:13px;font-weight:500;line-height:1.3;}
.psturn-who small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:3px;}
.psturn-pill{font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;white-space:nowrap;}
.psturn-pill.is-done{background:rgba(31,122,77,.1);color:var(--success);}
.psturn-pill.is-now{background:rgba(217,116,74,.14);color:#a2502e;}
.psturn-pill.is-next{background:var(--surface);color:var(--muted);border:1px solid var(--border);}

/* phone */
.psphone{background:var(--ground,#fff);border:9px solid #1b2a27;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lift);color:var(--ink);max-width:280px;}
.psphone .notch{height:22px;background:#1b2a27;position:relative;}
.psphone .notch::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:4px;width:64px;height:5px;border-radius:4px;background:#3a4c48;}
.psphone .ptop{padding:14px 14px 10px;border-bottom:1px solid var(--border);}
.psphone .ptop h4{font-family:var(--display);font-size:15px;margin:0;font-weight:700;}
.psphone .ptop p{margin:3px 0 0;font-size:11px;color:var(--muted);}
.psphone .pdays{display:grid;grid-template-columns:64px repeat(5,1fr);padding:9px 12px 5px;gap:0;}
.psphone .pdays span{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:9px;color:var(--muted);text-align:center;}
.psphone .pdays .l{text-align:left;}
.psphone .prow{display:grid;grid-template-columns:64px 1fr;align-items:center;border-bottom:1px solid var(--surface);}
.psphone .pname{font-size:10.5px;padding:9px 6px 9px 12px;line-height:1.2;}
.psphone .ptrack{position:relative;display:grid;grid-template-columns:repeat(10,1fr);height:36px;align-items:center;padding-right:12px;}
.psphone .pbk{height:20px;border-radius:4px;}
.psphone .pbk.is-cl{background:var(--cl);}
.psphone .pbk.is-air{background:var(--air);}
.psphone .pbk.is-bkg{background:var(--bkg);}
.psphone .pbk.is-exp{background:var(--exp);}
.psphone .ptabs{display:flex;border-top:1px solid var(--border);background:var(--surface);}
.psphone .ptabs div{flex:1;text-align:center;padding:9px 2px;font-size:9px;color:var(--muted);}
.psphone .ptabs div.on{color:var(--teal);font-weight:600;box-shadow:inset 0 2px 0 var(--teal);}

/* Bigger headings on Become a host and Rental software (size only). */
#page-host .h-1, #page-software .h-1, #page-about .h-1{font-size:clamp(32px,4.4cqi,48px);}
#page-host .h-2, #page-software .h-2{font-size:clamp(25px,3.1cqi,35px);}

/* Long-term rentals: filter fields sit inside the short-stay search-bar cells;
   the three secondary filters live in a "More filters" popover. */
.search__field .rf{border:0;background:transparent;padding:0;width:100%;font-size:13px;color:var(--ink-2);font-weight:500;cursor:pointer;}
.search__field--sel{position:relative;}
.rmore{position:absolute;top:calc(100% + 12px);right:0;z-index:45;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 50px -14px rgba(18,33,31,.36);padding:16px;width:min(300px,calc(100vw - 40px));display:flex;flex-direction:column;gap:14px;}
.rmore[hidden]{display:none;}
.rmore .rfilter span{font-size:12px;font-weight:600;color:var(--ink);}
.rmore .pill{align-self:flex-start;}

/* Long-term rentals: the introducer strip, moved up under the page heading. */
.introstrip{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--ink-2);}
.introstrip .introstrip__links{display:flex;gap:14px;margin-left:auto;}
.introstrip a{color:var(--teal);font-weight:600;white-space:nowrap;}

/* Rental software: website pricing (exact prices; section 7). */
.pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@container (max-width:620px){.pricegrid{grid-template-columns:1fr;}}
.pricecard{border:1px solid var(--border);border-radius:14px;padding:22px 24px;background:var(--ground,#fff);}
.pricecard h3{font-family:var(--display);font-size:17px;font-weight:600;margin:0;}
.priceamt{font-family:var(--display);font-size:34px;font-weight:800;color:var(--teal);letter-spacing:-.02em;margin:8px 0 4px;}
.pricecard p{font-size:13px;color:var(--muted);margin:0;}

/* ============================================================
   About page bespoke pieces. Shared header/footer + site type
   scale; only the parts with no existing equivalent are scoped
   here. Teal = chrome, terracotta only on the two 'List your
   property' CTAs (btn--primary), channel hexes are diagram data.
   ============================================================ */
.ab-ic{color:var(--teal);display:inline-flex;}

/* 4. channel sync dark panel */
.ab-sync{background:var(--teal-dark);border-radius:16px;padding:clamp(28px,4cqi,48px);display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.ab-sync__diagram{min-width:0;}
.ab-sync__diagram svg{display:block;width:100%;height:auto;}
@container (max-width:1100px){ .ab-sync{grid-template-columns:1fr;gap:28px;} }

/* 6. who it's for: 2px teal rule on top of each column */
.ab-who{border-top:2px solid var(--teal);padding-top:16px;}

/* 7. principles: 2x2, big teal numerals */
.ab-principles{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.ab-num{font-family:var(--display);font-weight:800;color:var(--teal);font-size:34px;line-height:1;letter-spacing:-.02em;}
@container (max-width:1100px){ .ab-principles{grid-template-columns:1fr;} }

/* 9. founder photo placeholder */
.ab-founder{width:96px;height:96px;border-radius:50%;background:var(--ground-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-size:13px;font-weight:600;}

/* 10. final CTA band + teal cards */
.ab-final{background:var(--teal-dark);padding-block:clamp(48px,6cqi,72px);}
.ab-ctacard{background:var(--teal);border-radius:16px;padding:clamp(24px,3cqi,32px);display:flex;flex-direction:column;}
.ab-btn-ghost{background:transparent;border:1.5px solid #7fb8bd;color:#fff;}
.ab-btn-ghost:hover{background:rgba(255,255,255,.08);}
@container (max-width:1100px){ .ab-final .split2{grid-template-columns:1fr;} }

/* Legal page: the flagged 'company details to be added' block (attention colour,
   visible border) at the top of Terms and Privacy. Must be filled or removed. */
.legalflag{border:2px solid var(--terra);background:var(--terra-tint);border-radius:12px;padding:14px 18px;margin-bottom:22px;display:flex;flex-direction:column;gap:5px;}
.legalflag b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--terra-dark);}
.legalflag span{font-size:14px;color:var(--ink-2);}

/* Share listing — one button in the title row, with a popover */
.sharewrap { position:relative; flex:none; }
.sharewrap .btn svg { margin-right:2px; }
.sharepop { position:absolute; top:calc(100% + 6px); right:0; z-index:40; background:#fff;
  border:1px solid var(--line,#DDE5E3); border-radius:12px;
  box-shadow:0 18px 44px -18px rgba(18,33,31,.4); padding:6px; min-width:170px;
  display:flex; flex-direction:column; }
.sharepop.hidden { display:none; }
.sharepop__item { font:inherit; font-size:14px; font-weight:500; text-align:left; text-decoration:none;
  color:var(--ink,#12211F); background:none; border:0; cursor:pointer; padding:9px 12px; border-radius:8px; }
.sharepop__item:hover { background:var(--ground-2,#EDF2F1); }

/* Brand mark beside the wordmark (header + footer). Inline ::before so the
   terracotta full stop in .logo stays tight to the words. */
.logo::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(/icon-512.png) center/contain no-repeat;
  border-radius: 5px;
}

/* Full-screen photo viewer */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: rgba(8,14,13,.94); color: #fff; }
.lb::backdrop { background: rgba(8,14,13,.92); }
.lb:not(dialog) { position: fixed; inset: 0; z-index: 9999; display: block; }
.lb__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
/* Batch 43: a video in the lightbox, and the play triangle / duration badge on a
   video cell in the gallery. */
.lb__video { max-width: 92vw; max-height: 88vh; width: auto; height: auto; background: #000; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.gallery__cell--video { position: relative; }
.gallery__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); pointer-events: none; }
.gallery__dur { position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.65); color: #fff; padding: 2px 7px; border-radius: 6px; pointer-events: none; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lb__nav:hover { background: rgba(255,255,255,.28); }
.lb__prev { left: 18px; } .lb__next { right: 18px; }
.lb__close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.lb__close:hover { background: rgba(255,255,255,.28); }
.lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px;
  font-weight: 600; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 99px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .lb__nav { width: 44px; height: 44px; font-size: 26px; } .lb__prev { left: 8px; } .lb__next { right: 8px; } }

/* Wizard Rooms step (multi-room types) + delete-draft link */
.wroomlist { display:flex; flex-direction:column; gap:8px; }
.wroom { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wroom.off { opacity:.55; }
.wroom__ord { display:flex; flex-direction:column; line-height:1; }
.wroom__rate { display:inline-flex; align-items:center; gap:3px; }
.wroomadd { border-top:1px solid var(--line,#DDE5E3); padding-top:12px; margin-top:6px; }
.wroomrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.wroombulk { margin-top:12px; }
.wroombulk summary { cursor:pointer; color:var(--teal,#0E5C63); font-weight:600; }
.wdel { display:block; margin-top:16px; color:#a84f28; font-weight:600; text-align:left; }
.wdel:hover { text-decoration:underline; }

/* Dictate button — floats inside a textarea, bottom-right (reusable component) */
.dictate-wrap { position:relative; display:block; }
.dictate-wrap textarea { padding-right:46px; }
.dictate-btn { position:absolute; bottom:10px; right:10px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border,#DDE5E3); background:#fff; color:var(--muted,#7C8A87);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; padding:0; }
.dictate-btn:hover { color:var(--text,#12211F); border-color:var(--teal,#0E5C63); }
.dictate-btn.is-rec { background:var(--teal,#0E5C63); border-color:var(--teal,#0E5C63); color:#fff;
  animation:dictpulse 1.4s ease-in-out infinite; }
@keyframes dictpulse { 0%,100% { box-shadow:0 0 0 0 rgba(14,92,99,.45); } 50% { box-shadow:0 0 0 6px rgba(14,92,99,0); } }

/* ── Batch 39: the account switcher (header) ────────────────────────────────
   The header account control shows the current MODE for a host (Hosting/Guest),
   or the person's first name for a guest-only account — never the full name. The
   dropdown switches mode and reaches Settings / Log out. */
/* ACCOUNT CONTROL — COPIED VERBATIM from shared/account-control.css (Batch 56 §15).
   MUST stay byte-identical to the copy in manage/public/manage.css. Edit the shared
   file and paste into both surfaces; never change it in one place only. */
.acctsw { position:relative; }
.acctsw__btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 5px;
  border:1px solid #DDE5E3; border-radius:999px; background:#FFFFFF; color:#12211F;
  font-family:Archivo,sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; }
.acctsw__btn:hover { border-color:#C4D0CD; }
.acctsw__label { line-height:1; }
.acctsw__av { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#0E5C63; color:#fff; font-family:Archivo,sans-serif; font-weight:700; font-size:13px; }
.acctsw__caret { font-size:10px; color:#7C8A87; margin-left:-2px; }
.acctsw__dd { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:230px;
  background:#fff; border:1px solid #DDE5E3; border-radius:14px;
  box-shadow:0 20px 50px -18px rgba(18,33,31,.4); padding:6px; }
.acctsw__modes { padding:4px 4px 6px; }
.acctsw__lab { font-family:Archivo,sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#7C8A87; padding:6px 8px 4px; }
.acctsw__mrow { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0;
  background:none; padding:9px 10px; border-radius:9px; font-family:Archivo,sans-serif; font-size:13.5px;
  font-weight:600; color:#12211F; cursor:pointer; text-decoration:none; }
.acctsw__mrow:hover { background:#EDF2F1; }
.acctsw__mrow.on { color:#0E5C63; }
.acctsw__mi { font-size:11px; color:#7C8A87; width:14px; text-align:center; }
.acctsw__mrow.on .acctsw__mi { color:#0E5C63; }
.acctsw__tick { margin-left:auto; color:#0E5C63; font-weight:700; }
.acctsw__links { border-top:1px solid #DDE5E3; padding:4px 0; display:flex; flex-direction:column; }
.acctsw__foot { border-top:1px solid #DDE5E3; padding:4px 0; display:flex; flex-direction:column; }
.acctsw__links a, .acctsw__foot a { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:9px; font-family:Archivo,sans-serif; font-size:13.5px; font-weight:500;
  color:#12211F; cursor:pointer; text-decoration:none; }
.acctsw__links a:hover, .acctsw__foot a:hover { background:#EDF2F1; color:#0E5C63; }
.acctsw__badge { min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:#B4700F;
  color:#fff; font-family:Archivo,sans-serif; font-size:10.5px; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; }

/* ── Batch 39: the account tiles (§4/§5) ────────────────────────────────────── */
.acctiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .acctiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .acctiles { grid-template-columns:1fr; } }
.acctile { display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
  min-height:118px; padding:16px 16px 14px; border:1px solid var(--border); border-radius:14px;
  background:#fff; cursor:pointer; font:inherit; color:var(--ink); text-decoration:none;
  transition:box-shadow .12s,border-color .12s; }
.acctile:hover { border-color:var(--line-strong); box-shadow:var(--shadow-card); }
.acctile__ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--teal-tint); color:var(--teal); }
.acctile__t { font-size:15.5px; font-weight:600; }
.acctile__s { font-size:13px; color:var(--teal); font-weight:600; margin-top:-2px; }

/* "Guest mode" chip on the host's own account page */
.gchip { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px;
  background:var(--teal-tint); color:var(--teal); font-size:12.5px; font-weight:700; letter-spacing:.01em; }

/* hosting status panel (§5) */
.hostpanel { border:1px solid var(--border); border-radius:16px; background:var(--surface);
  padding:20px; align-self:start; }
.hostpanel__eye { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal); }
.hostpanel__head { font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.02em; margin:6px 0 14px; }
.hostpanel__figs { display:flex; flex-direction:column; gap:0; }
.hostpanel__fig { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-top:1px solid var(--border); }
.hostpanel__fig:first-child { border-top:0; }
.hostpanel__fig b { font-family:var(--display); font-size:20px; font-weight:700; min-width:1.6em; }
.hostpanel__fig span { font-size:13px; color:var(--muted); }

/* settings sections + host-only rows (§6) */
.setsec { display:flex; flex-direction:column; gap:12px; scroll-margin-top:82px; }
.setsec__eye { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--terra); }
.hostrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  border:1px solid var(--border); border-left:3px solid var(--terra); border-radius:11px; background:#fff; }
.htag { flex:none; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--terra);
  background:var(--terra-tint); border-radius:999px; padding:3px 9px; }