/* ============================================================
   CITY LIVING — WEB PROTOTYPE
   Harbour palette, values lifted from the live site :root
   (documented there as matching the app's theme/colors.ts)
   ============================================================ */

:root{
  /* Harbour — established, do not invent */
  --ground:#ffffff;
  --ground-2:#eef3f2;
  --surface:#f4f7f6;
  --border:#dde5e3;
  --ink:#12211f;
  --muted:#5a6b68;
  --teal:#0e5c63;
  --teal-dark:#0a474c;
  --teal-tint:rgba(14,92,99,.08);
  --terra:#d9744a;
  --terra-dark:#c15f37;
  --success:#1f7a4d;

  /* derived, for the web only */
  --ink-2:#33443f;
  --teal-ink:#0a3d42;
  --terra-tint:rgba(217,116,74,.10);
  --line-strong:#c6d4d1;
  --shadow-card:0 1px 2px rgba(18,33,31,.04),0 8px 24px -12px rgba(18,33,31,.10);
  --shadow-lift:0 2px 4px rgba(18,33,31,.06),0 18px 40px -16px rgba(18,33,31,.20);

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --wrap:1600px;
  /* Photo/card grids (city grid, listing rows) run wider than the text column so
     photography fills the screen while prose stays readable. */
  --wrap-wide:1840px;

  --display:"Bricolage Grotesque","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* prototype chrome only — never part of the site design */
  --chrome:#0b1a19;
  --chrome-2:#132725;
  --chrome-line:#25403c;
  --chrome-ink:#dbe8e5;
  --chrome-muted:#7e9a95;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--chrome);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:6px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ============================================================
   PROTOTYPE CHROME
   ============================================================ */

.chrome{
  position:sticky;top:0;z-index:200;
  background:var(--chrome);
  border-bottom:1px solid var(--chrome-line);
}
.chrome__bar{
  max-width:1400px;margin-inline:auto;
  padding:10px 18px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.chrome__brand{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--chrome-ink);letter-spacing:-.01em;white-space:nowrap;
}
.chrome__brand span{
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--chrome-muted);
}
.chrome__groups{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--chrome-2);border:1px solid var(--chrome-line);flex:none;}
.chrome__groups button{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;color:var(--chrome-muted);white-space:nowrap;}
.chrome__groups button[aria-pressed="true"]{background:var(--teal);color:#fff;}
.chrome__tabs{display:flex;gap:2px;flex-wrap:wrap;margin-right:auto;flex:1;min-width:0;}
.chrome__tab[hidden]{display:none;}
.chrome__tab{
  padding:6px 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--chrome-muted);
  transition:background .15s,color .15s;
}
.chrome__tab:hover{color:var(--chrome-ink);background:var(--chrome-2);}
.chrome__tab[aria-selected="true"]{background:var(--chrome-2);color:#fff;}
.chrome__seg{
  display:flex;gap:2px;padding:3px;border-radius:9px;
  background:var(--chrome-2);border:1px solid var(--chrome-line);
}
.chrome__seg button{
  padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;
  color:var(--chrome-muted);letter-spacing:.01em;
}
.chrome__seg button[aria-pressed="true"]{background:#fff;color:var(--chrome);}
.chrome__note{
  max-width:1400px;margin-inline:auto;
  padding:0 18px 10px;
  font-size:12px;color:var(--chrome-muted);
}

.canvas{padding:22px 18px 60px;display:flex;justify-content:center;}

.stage{
  container-type:inline-size;
  width:100%;max-width:1400px;
  background:var(--ground);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  transition:max-width .28s ease;
}
.stage[data-view="mobile"]{
  max-width:392px;
  border-radius:34px;
  border:9px solid #05100f;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.75);
}

/* ============================================================
   SITE PRIMITIVES
   ============================================================ */

.page{display:none;}
.page.is-active{display:block;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:28px;}
.wrap--wide{max-width:var(--wrap-wide);}
@container (max-width:820px){.wrap{padding-inline:18px;}}

/* Content holder. A .wrap centres itself, so putting a max-width straight on a
   .wrap left a dead gutter beside left-aligned content on wide screens. Instead
   keep the .wrap full width and hold its content to a comfortable measure here:
   direct children are capped and stay anchored to the wrap's left edge. Default
   is a text measure; set --hold to a pixel width on a wrap whose content is a
   layout grid or card that needs more room than a reading column. */
.hold > *{max-width:var(--hold,52ch);}
/* When the .wrap is itself the layout grid (its children are grid tracks and so
   cannot be capped without breaking the layout), keep the wrap's own max-width
   but anchor it left instead of centring it. */
.wrap.hold-left{margin-inline:0;}

.section{padding-block:64px;}
.section--tight{padding-block:44px;}
.section--surface{background:var(--surface);}
@container (max-width:820px){
  .section{padding-block:44px;}
  .section--tight{padding-block:32px;}
}

h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.025em;text-wrap:balance;line-height:1.08;}
p{margin:0;}

.h-display{font-size:clamp(38px,6.2cqi,66px);font-weight:800;}
.h-1{font-size:clamp(28px,3.6cqi,40px);font-weight:700;letter-spacing:-.028em;}
.h-2{font-size:clamp(22px,2.6cqi,29px);font-weight:700;}
.h-3{font-size:18px;font-weight:600;letter-spacing:-.018em;}

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);margin:0;
}
.lede{font-size:clamp(16px,1.5cqi,18.5px);color:var(--ink-2);line-height:1.6;max-width:65ch;}
.muted{color:var(--muted);}
.small{font-size:13.5px;}
.xsmall{font-size:12.5px;}
.num{font-variant-numeric:tabular-nums;}
/* A value that has not been supplied. The dash stays as a marker but reads as
   muted absence, not punctuation; screen readers announce its aria-label. */
.nullval{color:var(--muted);}

.stack{display:flex;flex-direction:column;}
.stack-4{gap:4px;}.stack-6{gap:6px;}.stack-8{gap:8px;}.stack-10{gap:10px;}.stack-12{gap:12px;}.stack-14{gap:14px;}
.stack-16{gap:16px;}.stack-20{gap:20px;}.stack-24{gap:24px;}.stack-28{gap:28px;}
.stack-32{gap:32px;}.stack-40{gap:40px;}
.row{display:flex;align-items:center;gap:10px;}
.row-wrap{flex-wrap:wrap;}
.spacer{flex:1;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:11px;
  font-size:15px;font-weight:600;letter-spacing:-.008em;
  transition:background .16s,color .16s,border-color .16s,transform .08s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.btn--primary{background:var(--terra);color:#fff;}
.btn--primary:hover{background:var(--terra-dark);}
.btn--teal{background:var(--teal);color:#fff;}
.btn--teal:hover{background:var(--teal-dark);}
.btn--outline{border:1px solid var(--line-strong);color:var(--ink);background:var(--ground);}
.btn--outline:hover{border-color:var(--teal);color:var(--teal);}
.btn--ghost{color:var(--ink);padding-inline:12px;}
.btn--ghost:hover{background:var(--ground-2);}
.btn--onteal{background:#fff;color:var(--teal-dark);}
.btn--onteal:hover{background:var(--ground-2);}
.btn--lg{padding:15px 26px;font-size:16px;border-radius:12px;}
.btn--block{width:100%;}

/* AI drafting — quiet controls beside the title and description fields */
.btn--ai{
  border:1px solid var(--border);background:var(--ground);color:var(--teal-dark);
  padding:7px 12px;font-size:13px;font-weight:600;border-radius:9px;
}
.btn--ai:hover{border-color:var(--teal);background:var(--teal-tint);}
.airow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.ai-status{font-size:12.5px;color:var(--muted);}
.ai-note{margin-top:6px;}
.ai-titles{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.ai-opt{
  text-align:left;border:1px solid var(--border);background:var(--ground);
  padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink);
  transition:border-color .14s,background .14s;
}
.ai-opt:hover{border-color:var(--teal);background:var(--teal-tint);}
.ai-opt.is-picked{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark);font-weight:600;}

/* Photo pass — compliance markers + skip notes on the Photos step */
.photoitem{display:flex;flex-direction:column;gap:6px;}
.photoflag{position:absolute;top:6px;left:6px;background:var(--warning,#b4700f);color:#fff;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;}
.photonote{font-size:12px;line-height:1.45;padding:8px 10px;border-radius:9px;}
.photonote--warn{background:rgba(180,112,15,.10);color:var(--ink);border:1px solid rgba(180,112,15,.30);}
.photoacts{display:flex;gap:6px;margin-top:6px;}
.photoacts .btn{padding:5px 10px;font-size:12px;}
/* Amenity suggestions from the photo pass */
.amsug{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;background:var(--teal-tint);color:var(--teal-dark);}
.amrow--sug{border-radius:8px;}

/* Standard house-rule presets (step 6) */
.rulepresets{display:flex;flex-direction:column;gap:2px;}
.rulerow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-radius:8px;cursor:pointer;font-size:14px;}
.rulerow:hover{background:var(--teal-tint);}
.rulerow input[type="checkbox"]{flex:none;width:17px;height:17px;}
.rulerow > span{flex:1;}
.rulerow--timed .rule-time{flex:none;max-width:120px;padding:6px 10px;}

/* Listing Q&A ("Ask about this place") */
.askrow{display:flex;gap:8px;align-items:stretch;}
.askrow .input{flex:1;}
.askthread{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.askq{align-self:flex-end;max-width:85%;background:var(--teal);color:#fff;padding:9px 13px;border-radius:14px 14px 4px 14px;font-size:14px;}
.aska{align-self:flex-start;max-width:90%;background:var(--ground-2,#f4f7f6);border:1px solid var(--border);color:var(--ink);padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:14px;line-height:1.5;}
.aska--pending{color:var(--muted);font-style:italic;}
.asklink{background:none;border:0;padding:0;font:inherit;color:var(--teal-dark);font-weight:600;text-decoration:underline;cursor:pointer;}

/* "Describe your place, we fill the form" setup flow */
.setupcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.setupcards{grid-template-columns:1fr;}}
.setupcard{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:22px;border:1.5px solid var(--border);border-radius:14px;background:var(--ground);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .05s;}
.setupcard:hover{border-color:var(--teal);box-shadow:0 10px 26px -14px rgba(14,92,99,.5);}
.setupcard:focus-visible{outline:2px solid var(--terra);outline-offset:2px;}
.setupcard:active{transform:translateY(1px);}
.setupcard:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;border-color:var(--border);}
.setupcard__ic{width:40px;height:40px;border-radius:10px;background:var(--teal-tint);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;}
.setupcard b{font-family:var(--display);font-size:16px;}
.setupcard span{font-size:13px;color:var(--muted);line-height:1.5;}
.setupcard__note{font-size:12px;color:var(--terra-dark);}
.setup-ta{min-height:200px;resize:vertical;line-height:1.55;}
.setupsum{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.setupsum__h{padding:9px 14px;background:var(--backgroundDeep,#edf2f1);font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-dark);}
.setupsum__row{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;border-top:1px solid var(--border);font-size:14px;}
.setupsum__row span{color:var(--secondary,#5a6b68);}
.setupsum__row b{text-align:right;}

/* Guest chatbot panel (Part C) */
.helppanel--chat{display:flex;flex-direction:column;max-height:70vh;}
.chatthread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 2px;min-height:180px;}
.chatrow{display:flex;gap:6px;align-items:center;padding-top:6px;}
.chatrow .input{flex:1;}
.helppanel--chat .askq,.helppanel--chat .aska{max-width:92%;}

/* the verified system — the site's repeated visual signature */
.vchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px 4px 6px;border-radius:999px;
  background:var(--teal-tint);color:var(--teal-dark);
  font-size:12px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
}
.vchip svg{flex:none;}
.vchip--solid{background:var(--teal);color:#fff;}
.vchip--light{background:rgba(255,255,255,.16);color:#fff;}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.005em;
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 1px 3px rgba(18,33,31,.16);backdrop-filter:blur(4px);
}
.badge--instant{color:var(--terra-dark);}
.badge--request{color:var(--teal-dark);}

.pill{
  display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--ground);
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  transition:border-color .15s,background .15s,color .15s;
}
.pill:hover{border-color:var(--line-strong);}
.pill[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark);font-weight:600;}

.rule{height:1px;background:var(--border);border:0;margin:0;}

/* ---------- photo placeholders ------------------------------
   Stand-ins for real photography. Built from Harbour-adjacent
   gradients plus a light-through-window diagonal so they read
   as intentional rather than as broken images.
   ------------------------------------------------------------ */
.plate{
  position:relative;overflow:hidden;background:var(--ground-2);
  isolation:isolate;
}
.plate::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(118deg,rgba(255,255,255,.5) 0 22%,rgba(255,255,255,0) 46%),
    radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.42),transparent 58%),
    var(--plate-bg,linear-gradient(150deg,#cfdedb,#a8c3bf));
}
.plate::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(18,33,31,.045) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:multiply;
}
.plate--a{--plate-bg:linear-gradient(150deg,#d7e3e0,#9fbfbb);}
.plate--b{--plate-bg:linear-gradient(150deg,#e5ddd4,#c2a894);}
.plate--c{--plate-bg:linear-gradient(150deg,#cfdce4,#94b0bd);}
.plate--d{--plate-bg:linear-gradient(150deg,#dde5db,#a7bfa4);}
.plate--e{--plate-bg:linear-gradient(150deg,#e3dae0,#b3a0ac);}
.plate--f{--plate-bg:linear-gradient(150deg,#d3e0dd,#8fb2ae);}
.plate__tag{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:7px 11px;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(18,33,31,.42);
}

/* ---------- listing card ---------- */
.card{
  display:flex;flex-direction:column;gap:11px;
  border-radius:var(--radius);background:var(--ground);
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-3px);}
.card:hover .card__media{box-shadow:var(--shadow-lift);}
.card__media{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);
  box-shadow:var(--shadow-card);transition:box-shadow .18s ease;
}
.card__media .badge{position:absolute;top:11px;left:11px;z-index:3;}
.card__fav{
  position:absolute;top:9px;right:9px;z-index:3;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(18,33,31,.4));
}
.card__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.card__title{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.018em;}
.card__meta{font-size:13.5px;color:var(--muted);}
.card__price{font-size:15px;font-weight:700;color:var(--ink);}
.card__price small{font-weight:500;color:var(--muted);font-size:13px;}
.card__rating{display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;}

.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;}
@container (max-width:1080px){.grid-cards{grid-template-columns:repeat(3,1fr);}}
@container (max-width:820px){.grid-cards{grid-template-columns:repeat(2,1fr);gap:22px 16px;}}
@container (max-width:560px){.grid-cards{grid-template-columns:1fr;}}

/* ---------- site header ---------- */
.head{
  position:sticky;top:0;z-index:60;
  background:#ffffff;
  border-bottom:1px solid var(--border);
}
.head__in{display:flex;align-items:center;gap:22px;padding-block:14px;}
.logo{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.035em;color:var(--teal);white-space:nowrap;}
.logo i{color:var(--terra);font-style:normal;}
.head__nav{display:flex;gap:2px;margin-right:auto;}
.head__nav a{padding:8px 11px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;}
.head__nav a:hover{background:var(--ground-2);color:var(--ink);}
.head__acts{display:flex;align-items:center;gap:8px;}
.burger{display:none;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;place-items:center;}
/* Public header: centre the four nav links on the page. The nav is taken out of
   flow and centred; logo stays left, Log in / Sign up stay right. Desktop only -
   below 1040px the nav collapses into the burger drawer, unchanged. */
@container (min-width:1041px){
  .head__in--center{position:relative;justify-content:space-between;}
  .head__in--center .head__nav{margin-right:0;position:absolute;left:50%;transform:translateX(-50%);}
}
@container (max-width:1040px){
  .head__nav{display:none;}
  .head__acts .btn--ghost{display:none;}
  .burger{display:grid;}
  /* Mobile drawer: the burger reveals the full nav below the bar, so the whole
     product (Long-term rentals included) stays reachable on a phone. */
  .head.is-open .head__nav{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--ground);border-bottom:1px solid var(--border);
    padding:10px 18px 16px;box-shadow:var(--shadow-lift);
  }
  .head.is-open .head__nav a{padding:12px;font-size:15.5px;}
}
@container (max-width:520px){
  .head__in{gap:12px;}
  .logo{font-size:19px;}
}

/* ---------- search ---------- */
.search{
  display:flex;align-items:stretch;
  background:#f4f7f6;border:1px solid #dde5e3;
  border-radius:16px;
  padding:6px;gap:2px;
}
.search__field{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  padding:11px 20px;border-radius:12px;text-align:left;
  transition:background .15s;
}
.search__field:hover{background:rgba(255,255,255,.72);}
.search__field + .search__field{box-shadow:-1px 0 0 var(--border);}
.search__field:hover + .search__field,.search__field:hover{box-shadow:none;}
.search__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.search__value{font-size:14px;color:#9aa9a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search__value.is-set{color:#12211f;font-weight:600;}
.search__go{
  flex:none;width:54px;border-radius:12px;background:var(--terra);color:#fff;
  display:grid;place-items:center;transition:background .16s;
}
.search__go:hover{background:var(--terra-dark);}
@container (max-width:820px){
  .search{flex-direction:column;border-radius:var(--radius-lg);padding:8px;gap:2px;}
  .search__field{padding:12px 16px;border-radius:var(--radius);}
  .search__field + .search__field{box-shadow:0 -1px 0 var(--border);}
  .search__go{width:100%;height:50px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:9px;}
  .search__go::after{content:"Search";font-weight:700;font-size:15px;}
}

.search--compact{padding:5px;box-shadow:none;}
.search--compact .search__field{padding:6px 15px;}
.search--compact .search__label{font-size:10px;}
.search--compact .search__value{font-size:13px;}
.search--compact .search__go{width:42px;}
@container (max-width:820px){
  .head .search--compact{flex-direction:row;border-radius:999px;padding:4px;}
  .head .search--compact .search__field{padding:5px 12px;border-radius:999px;}
  .head .search--compact .search__field + .search__field{box-shadow:-1px 0 0 var(--border);}
  .head .search--compact .search__go{width:36px;height:36px;margin-top:0;}
  .head .search--compact .search__go::after{content:none;}
}
@container (max-width:620px){
  .head .search--compact .search__field:nth-of-type(n+2){display:none;}
  .head .search--compact .search__label{display:none;}
  .head .search--compact .search__value{font-size:13.5px;color:var(--ink-2);font-weight:500;}
}

/* ---------- panels, tiles, trust ---------- */
.panel{
  background:var(--ground);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
}
.panel--flat{border:0;background:var(--surface);}

.trust{background:var(--teal);color:#fff;}
.trust .h-1{color:#fff;}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
@container (max-width:900px){.trust__grid{grid-template-columns:repeat(2,1fr);gap:24px 20px;}}
@container (max-width:520px){.trust__grid{grid-template-columns:1fr;}}
.trust__item{display:flex;flex-direction:column;gap:8px;}
.trust__item h3{color:#fff;font-size:16.5px;font-weight:600;}
.trust__item p{color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.55;}
.trust__icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.13);color:#fff;margin-bottom:2px;
}

/* City cards: the photograph IS the card, with the name and count overlaid. */
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@container (max-width:900px){.cities{grid-template-columns:repeat(3,1fr);}}
.city{
  position:relative;display:block;aspect-ratio:3/2;min-width:0;
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);isolation:isolate;
}
.city__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .35s ease;}
.city:hover .city__img{transform:scale(1.05);}
.city__cap{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;padding:14px;
  background:linear-gradient(to top,rgba(8,20,18,.82),rgba(8,20,18,.14) 52%,rgba(8,20,18,.02));
}
.city__name{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;}
.city__count{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);}
@container (max-width:620px){.cities{grid-template-columns:repeat(2,1fr);gap:10px;}.city__name{font-size:16px;}}

/* ---------- how it works (a real sequence, so numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
@container (max-width:820px){.steps{grid-template-columns:1fr;gap:26px;}}
.steps--4{grid-template-columns:repeat(4,1fr);}
@container (max-width:980px){.steps--4{grid-template-columns:repeat(2,1fr);}}
@container (max-width:560px){.steps--4{grid-template-columns:1fr;}}
.step{display:flex;flex-direction:column;gap:9px;}
.step__n{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:var(--terra-tint);color:var(--terra-dark);
  font-family:var(--display);font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.6;}

/* ---------- host band ---------- */
.hostband{
  background:linear-gradient(160deg,#0e5c63,#0a3d42);color:#fff;
  border-radius:var(--radius-lg);padding:44px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
}
@container (max-width:900px){.hostband{grid-template-columns:1fr;padding:30px;gap:28px;}}
.hostband h2{color:#fff;}
.hostband p{color:rgba(255,255,255,.78);}
.hostband__pts{display:flex;flex-direction:column;gap:12px;}
.hostband__pt{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:rgba(255,255,255,.9);}
.hostband__pt svg{flex:none;margin-top:3px;color:#7fd0c4;}
/* Same bullet list on a LIGHT section (e.g. the rental-software block): dark text
   so it is not white-on-white. */
.hostband__pts--onlight .hostband__pt{color:var(--ink-2);}
.calccard{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px;}

/* ---------- app band ---------- */
.storebtn{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 18px;border-radius:12px;
  background:var(--ink);color:#fff;
}
.storebtn:hover{background:#000;}
.storebtn--soon{background:var(--surface);color:var(--muted);border:1px solid var(--border);cursor:default;}
.storebtn--soon:hover{background:var(--surface);}
.storebtn small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;line-height:1.3;}
.storebtn strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.68);padding-block:52px 34px;}
.foot__cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;}
@container (max-width:900px){.foot__cols{grid-template-columns:repeat(2,1fr);gap:28px;}}
@container (max-width:520px){.foot__cols{grid-template-columns:1fr;}}
.foot h4{color:#fff;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;font-family:var(--sans);margin-bottom:12px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
.foot a:hover{color:#fff;}
/* One row: copyright left, socials optically centred, selectors right. The
   1fr auto 1fr grid keeps the socials centred in the whole bar (both 1fr tracks
   are equal), not merely floated between the two ends. */
.foot__bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;font-size:13px;}
.foot__copy{display:flex;align-items:center;gap:16px;justify-self:start;}
.foot__bottom .socials{justify-self:center;}
.foot__bottom .i18n{justify-self:end;}
/* Narrow phones: let the three groups stack, each centred. */
@container (max-width:620px){
  .foot__bottom{grid-template-columns:1fr;}
  .foot__bottom > *{justify-self:center;}
}
.socials{display:inline-flex;gap:13px;align-items:center;}
.socials a{color:#fff;opacity:.7;display:inline-flex;transition:opacity .15s;}
.socials a:hover{opacity:1;}
.social-dead{color:#fff;opacity:.55;display:inline-flex;cursor:default;}
.foot .logo{color:#fff;}

/* Search row shown below the header on Short stays / Long-term rentals, so the
   header itself is the same height as on every other page. */
.searchbar{background:var(--ground);border-bottom:1px solid var(--border);padding:14px 0;}
/* Search bar and its filter row share one centred column of equal width, so they
   sit on the same axis (the filters directly beneath the search, not offset). */
.searchcol{max-width:820px;margin-inline:auto;}
.searchcol .search{width:100%;}
.filterrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;}
.filterrow::-webkit-scrollbar{display:none;}

/* ---------- search results page ---------- */
.results{display:grid;grid-template-columns:1fr 468px;min-height:60vh;}
@container (max-width:1080px){.results{grid-template-columns:1fr 380px;}}
@container (max-width:900px){.results{grid-template-columns:1fr;}}
.results__list{padding:26px 28px 60px;}
@container (max-width:820px){.results__list{padding:20px 18px 80px;}}
.results__map{
  position:sticky;top:0;align-self:start;height:100vh;
  border-left:1px solid var(--border);
}
@container (max-width:900px){.results__map{display:none;}}

.filters{
  position:sticky;top:69px;z-index:50;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.filters__in{display:flex;align-items:center;gap:9px;padding-block:12px;overflow-x:auto;scrollbar-width:none;}
.filters__in::-webkit-scrollbar{display:none;}

.rowcard{
  display:grid;grid-template-columns:262px 1fr;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--border);
}
@container (max-width:640px){.rowcard{grid-template-columns:1fr;gap:13px;}}
/* Batch 67 §7: no fixed aspect ratio — the media (absolutely-positioned photo)
   has no intrinsic height, so the card height follows the text content. min-height
   is a floor so a sparse card (e.g. the Studio: name, area, sleeps, price) still
   shows a proper landscape photo rather than a thin strip. */
.rowcard__media{position:relative;min-height:150px;border-radius:var(--radius);overflow:hidden;}
.rowcard__media .badge{position:absolute;top:11px;left:11px;z-index:3;}
/* Content sits together and is centred against the photo, so the price is with the
   rest, never pushed to the bottom of a photo-height row. */
.rowcard__body{display:flex;flex-direction:column;justify-content:center;gap:9px;}
.feats{display:flex;flex-wrap:wrap;gap:6px;}
.feat{
  font-size:12.5px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:4px 9px;
}

/* stylised map — approximate circles, never pins */
.map{
  position:relative;height:100%;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,transparent 0 62px,rgba(14,92,99,.07) 62px 63px),
    repeating-linear-gradient(0deg,transparent 0 62px,rgba(14,92,99,.07) 62px 63px),
    linear-gradient(160deg,#e9f0ee,#dbe7e4);
}
.map::before{
  content:"";position:absolute;inset:-10%;
  background:
    linear-gradient(72deg,transparent 47.4%,rgba(255,255,255,.85) 47.4% 49.4%,transparent 49.4%),
    linear-gradient(-24deg,transparent 61%,rgba(255,255,255,.85) 61% 62.6%,transparent 62.6%),
    linear-gradient(14deg,transparent 30%,rgba(255,255,255,.7) 30% 31.2%,transparent 31.2%);
}
.map__blob{position:absolute;width:118px;height:118px;border-radius:50%;background:rgba(14,92,99,.13);border:1px solid rgba(14,92,99,.3);}
.map__price{
  position:absolute;transform:translate(-50%,-50%);z-index:4;
  padding:7px 13px;border-radius:999px;background:#fff;color:var(--ink);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(18,33,31,.22);white-space:nowrap;
  transition:background .15s,color .15s,transform .15s;
}
.map__price:hover,.map__price.is-active{background:var(--teal);color:#fff;transform:translate(-50%,-50%) scale(1.06);}
.map__note{
  position:absolute;left:16px;bottom:16px;right:16px;z-index:5;
  background:rgba(255,255,255,.95);border:1px solid var(--border);
  border-radius:12px;padding:11px 14px;font-size:12.5px;color:var(--ink-2);
  display:flex;gap:9px;align-items:flex-start;
}
.map__note svg{flex:none;margin-top:2px;color:var(--teal);}

/* ---------- listing detail ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr);gap:8px;aspect-ratio:2.35/1;border-radius:var(--radius-lg);overflow:hidden;position:relative;}
.gallery > *:first-child{grid-row:span 2;}
@container (max-width:820px){
  .gallery{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/3;border-radius:0;margin-inline:-18px;}
  .gallery > *:not(:first-child){display:none;}
  .gallery > *:first-child{grid-row:auto;}
}
.gallery__all{position:absolute;right:14px;bottom:14px;z-index:5;background:rgba(255,255,255,.95);color:var(--ink);padding:9px 15px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(18,33,31,.2);}

.detail{display:grid;grid-template-columns:1fr 372px;gap:56px;align-items:start;}
@container (max-width:980px){.detail{grid-template-columns:1fr 332px;gap:32px;}}
@container (max-width:900px){.detail{grid-template-columns:1fr;gap:0;}}

.bookcard{
  position:sticky;top:96px;
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lift);padding:22px;background:var(--ground);
}
@container (max-width:900px){
  .bookcard{position:static;box-shadow:none;margin-block:28px;}
}
.bookcard__price{display:flex;align-items:baseline;gap:6px;}
.bookcard__price b{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;}
.dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;}
.dates__f{padding:10px 14px;text-align:left;display:flex;flex-direction:column;gap:1px;}
.dates__f + .dates__f{border-left:1px solid var(--line-strong);}
.dates__f--full{grid-column:1/-1;border-top:1px solid var(--line-strong);}
.dates__l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.dates__v{font-size:14px;color:var(--ink-2);}
.breakdown{display:flex;flex-direction:column;gap:11px;font-size:14.5px;}
.breakdown div{display:flex;justify-content:space-between;gap:14px;color:var(--ink-2);}
.breakdown div span:last-child{font-variant-numeric:tabular-nums;}
.breakdown .total{border-top:1px solid var(--border);padding-top:13px;font-weight:700;color:var(--ink);font-size:16px;}
/* Batch 60 §1/§2/§3: "from" prefix + per-night breakdown lines. */
.pricefrom{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-2);align-self:center;}
.breakdown .bd-nights{display:flex;flex-direction:column;gap:8px;justify-content:flex-start;}
.breakdown details.bd-nights>summary{display:flex;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;color:var(--ink-2);}
.breakdown details.bd-nights>summary::-webkit-details-marker{display:none;}
.breakdown details.bd-nights[open]>summary{margin-bottom:6px;font-weight:600;color:var(--ink);}
.breakdown .bd-n{font-size:13.5px;color:var(--ink-2);}
.breakdown .bd-n--sub{border-top:1px solid var(--border);padding-top:8px;font-weight:600;color:var(--ink);}
.breakdown .bd-vat{font-size:12.5px;color:var(--muted);}
.tbc{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terra-dark);background:var(--terra-tint);padding:2px 6px;border-radius:5px;margin-left:6px;}

.amen{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;}
@container (max-width:560px){.amen{grid-template-columns:1fr;}}
.amen div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.amen svg{margin-top:2px;}
.amen svg{flex:none;color:var(--teal);}

.hostrow{display:flex;gap:15px;align-items:center;}
.avatar{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--teal);color:#fff;font-family:var(--display);font-weight:700;font-size:19px;}

.reviews{display:grid;grid-template-columns:1fr 1fr;gap:24px 34px;}
@container (max-width:700px){.reviews{grid-template-columns:1fr;}}
.review p{font-size:14.5px;color:var(--ink-2);line-height:1.6;}

.locmap{position:relative;height:270px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.locmap .map__blob{width:172px;height:172px;left:50%;top:50%;transform:translate(-50%,-50%);}

/* prototype-only state switcher inside a page */
.protoswitch{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;border-radius:11px;
  background:#0b1a19;color:#dbe8e5;font-size:12px;
}
.protoswitch b{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;color:#7e9a95;}
.protoswitch button{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;color:#7e9a95;}
.protoswitch button[aria-pressed="true"]{background:#fff;color:#0b1a19;}

/* ---------- forms / checkout ---------- */
.co{display:grid;grid-template-columns:1fr 372px;gap:56px;align-items:start;}
@container (max-width:980px){.co{grid-template-columns:1fr 332px;gap:32px;}}
@container (max-width:900px){.co{grid-template-columns:1fr;gap:28px;}}
.co--340{grid-template-columns:1fr 340px;}
.co--320{grid-template-columns:1fr 320px;}
.co--300{grid-template-columns:1fr 300px;}
.co--260{grid-template-columns:1fr 260px;}
@container (max-width:1000px){
  .co--340,.co--320,.co--300,.co--260{grid-template-columns:1fr 300px;gap:30px;}
}
@container (max-width:900px){
  .co--340,.co--320,.co--300,.co--260{grid-template-columns:1fr;gap:28px;}
}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.input{
  width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line-strong);background:var(--ground);
  font-size:15px;transition:border-color .15s,box-shadow .15s;
}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint);}
.input::placeholder{color:#9aaba7;}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@container (max-width:560px){.field2{grid-template-columns:1fr;}}
.checkbox{display:flex;gap:12px;align-items:flex-start;cursor:pointer;}
.checkbox input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--teal);flex:none;}
.checkbox span{font-size:14px;color:var(--ink-2);line-height:1.55;}
.agreement{
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:15px 17px;font-size:13.5px;color:var(--ink-2);line-height:1.6;
  max-height:150px;overflow-y:auto;
}
.agreement h5{margin:0 0 6px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.agreement ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px;}
.summini{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border);}
.summini__media{width:96px;aspect-ratio:4/3;border-radius:11px;flex:none;}

.callout{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:12px;
  background:var(--teal-tint);border:1px solid rgba(14,92,99,.16);
  font-size:13.5px;color:var(--teal-ink);line-height:1.55;
}
.callout svg{flex:none;margin-top:2px;color:var(--teal);}
.callout--warn{background:var(--terra-tint);border-color:rgba(217,116,74,.2);color:#7a3a1c;}
.callout--warn svg{color:var(--terra-dark);}

/* ---------- confirmation ---------- */
.tick{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--success);color:#fff;
}
.timeline{display:flex;flex-direction:column;gap:0;}
.tl{display:grid;grid-template-columns:26px 1fr;gap:16px;padding-bottom:22px;position:relative;}
.tl:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:1px;background:var(--border);}
.tl__dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:700;z-index:1;}
.tl__dot--now{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ---------- host page ---------- */
.hosthero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-block:66px;
}
@container (max-width:900px){.hosthero{grid-template-columns:1fr;gap:32px;padding-block:40px;}}
.calc{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--ground);box-shadow:var(--shadow-lift);padding:26px;}
.calc__out{
  border-radius:var(--radius);background:var(--teal);color:#fff;padding:20px;
  display:flex;flex-direction:column;gap:2px;
}
.calc__out b{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
.calc__out span{font-size:13px;color:rgba(255,255,255,.75);}
.range{width:100%;accent-color:var(--teal);}

.faq{border-top:1px solid var(--border);}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 0;text-align:left;border-bottom:1px solid var(--border);
  font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.018em;
}
.faq__q svg{flex:none;transition:transform .2s;color:var(--muted);}
.faq__q[aria-expanded="true"] svg{transform:rotate(45deg);}
.faq__a{display:none;padding:0 0 20px;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:68ch;}
.faq__a.is-open{display:block;}

.split3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@container (max-width:820px){.split3{grid-template-columns:1fr;}}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;}
@container (max-width:900px){.hero{grid-template-columns:1fr;gap:26px;}}
.hero__art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;}
.hero__art > *{border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;}
.hero__img{width:100%;height:100%;object-fit:cover;display:block;}
.hero__art > *:nth-child(1){grid-row:span 2;aspect-ratio:3/4.5;}
.hero__art > *:nth-child(2){aspect-ratio:4/3;}
.hero__art > *:nth-child(3){aspect-ratio:4/3;}
@container (max-width:900px){
  .hero__art{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;}
  .hero__art > *:nth-child(1){grid-row:auto;aspect-ratio:3/4;}
  .hero__art > *:nth-child(2),.hero__art > *:nth-child(3){aspect-ratio:3/4;}
}
@container (max-width:560px){.hero__art{display:none;}}

/* ---------- home name wall ----------
   A wall of city names behind the whole home page: a single FIXED layer at the
   lowest z-index, held still while the page scrolls over it as a sheet. It never
   moves at any scroll position. Page content rides above it and every section is
   opaque, so the wall shows only through the transparent hero. Decorative and
   aria-hidden. Treatment and motion come from the site appearance setting
   (GET /cityliving/appearance) resolved in pages.js; the ground colour is painted
   here immediately so there is never a flash of no background. It lives inside
   #page-home, so it renders only while Home is the active page. */
.namewall{position:fixed;inset:0;z-index:0;background:#071d20;overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:.02em;padding:1.5vh 0;user-select:none;}
.namewall .ln{white-space:nowrap;font-family:var(--display);font-weight:900;letter-spacing:-.042em;
  line-height:.9;font-size:clamp(18px,2.8vw,46px);text-transform:uppercase;will-change:transform;}
.namewall .ln span{margin-right:.26em;}
/* Each line renders its names twice and animates a full 50% translate, so the
   loop is seamless (no snap). Direction + per-line duration are set inline in
   pages.js; still mode sets a static translate instead. */
@keyframes wallDriftL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wallDriftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* Reduced motion always wins over the admin setting; the wall still renders. */
@media (prefers-reduced-motion:reduce){.namewall .ln{animation:none !important;}}
/* Drift is also off on small screens (battery); the wall still renders. */
@media (max-width:700px){.namewall .ln{animation:none !important;}}

/* Everything on the home page rides above the fixed wall (z-index:0). The header
   is already sticky above it; lift the rest. */
#page-home > :not(.namewall):not(.head){position:relative;z-index:1;}

/* Below the hero, each major section is a solid panel sitting on the wall:
   rounded, with a gutter down both sides and a gap between, so the wall stays
   visible around and between them the whole way down. Content inside is
   unchanged. The footer is deliberately excluded (full width, dark, no gutter). */
#page-home > .section{
  background:var(--ground);
  margin:18px clamp(16px,3.6vw,56px);
  border-radius:22px;
}
/* The persuasion band keeps its teal ground (its text is white), so it is a
   panel like the rest without turning its content unreadable. */
#page-home > .section.trust{background:var(--teal);}

/* Hero box: the copy and the search bar sit in one white card floating on the
   wall. 1180px is load-bearing (four search fields need the width); the copy sits
   on white so it needs no shadow. */
.herowrap{padding:9vh 40px 11vh;display:flex;justify-content:center;}
@media (max-width:960px){.herowrap{padding:6vh 18px 8vh;}}
.box{background:#fff;border-radius:22px;width:100%;max-width:1180px;padding:44px 48px 38px;
  box-shadow:0 30px 80px rgba(2,14,16,.46);}
@media (max-width:960px){.box{padding:30px 24px 26px;border-radius:18px;}}
.box .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:#0e5c63;margin:0;}
.box h1{font-family:"Archivo",var(--display);font-weight:900;font-size:clamp(33px,4vw,56px);
  line-height:1;letter-spacing:-.036em;max-width:16ch;margin:0;color:var(--ink);}
.box .sub{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.55;max-width:52ch;color:#5a6b68;margin:0;}
/* Item 6: a rule, then coverage pills (left) and the three trust lines (right). */
/* Under the search bar: two stacked, left-aligned rows -- coverage then trust --
   sharing the 1px rule above, ~10px apart, each wrapping within itself. */
.herofoot{border-top:1px solid #dde5e3;padding-top:18px;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;}
.coverrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.coverrow .on{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;
  background:var(--teal);border:1px solid var(--teal);color:#fff;}
.coverrow .covernext{color:var(--muted);font-size:13px;}
.herotrust{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-start;}

/* protoswitch stays on one line where it can */
.protoswitch{justify-content:flex-start;}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
@container (max-width:820px){.split2{grid-template-columns:1fr;gap:28px;}}

/* ============================================================
   PART 2 — account, host console and support pages
   ============================================================ */

/* ---------- app shell (signed-in areas) ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:70vh;}
@container (max-width:900px){.app{grid-template-columns:1fr;}}
.app__side{border-right:1px solid var(--border);background:var(--surface);padding:26px 16px;}
.app__main{padding:30px 32px 64px;min-width:0;}
.app__side{min-width:0;}
/* The account sidebar shows only when signed in (set by syncSidebars). Signed
   out, the column collapses so a stranger gets no account menu. On a public page
   that also lives in this frame (Help), --bleed drops the main padding when the
   sidebar is gone so its full-width bands read exactly as the public page. */
.app__side[hidden]{display:none;}
.app--noside{grid-template-columns:1fr;}
.app--noside.app--bleed .app__main{padding:0;}
/* grid children default to min-width:auto, which lets long content force overflow */
.co > *,.detail > *,.split2 > *,.split3 > *,.stats > *,.trow > *{min-width:0;}
@container (max-width:820px){.app__main{padding:22px 18px 56px;}}
.snav{display:flex;flex-direction:column;gap:2px;}
.snav__h{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px;}
.snav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .14s,color .14s;
}
.snav a:hover{background:var(--ground-2);color:var(--ink);}
.snav a.is-on{background:var(--teal);color:#fff;font-weight:600;}
.snav a.is-on svg{color:#fff;}
.snav svg{flex:none;color:var(--muted);}
.snav__count{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--terra);color:#fff;border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums;}
@container (max-width:900px){
  .app__side{border-right:0;border-bottom:1px solid var(--border);padding:14px 16px;}
  .snav{flex-direction:row;overflow-x:auto;scrollbar-width:none;}
  .snav::-webkit-scrollbar{display:none;}
  .snav a{white-space:nowrap;flex:none;}
  .snav__h{display:none;}
}
@container (max-width:900px){
  .snav a.is-on{box-shadow:none;}
  .snav__count{margin-left:6px;}
}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  padding:11px 15px;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap;flex:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s,border-color .14s;
}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal);font-weight:600;}

/* ---------- status: reserved colours, always dot + label ---------- */
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
.status--ok{color:var(--success);}
.status--wait{color:#8a6410;}
.status--live{color:var(--teal);}
.status--off{color:var(--muted);}
.status--stop{color:#a3341c;}

/* ---------- stat tiles: the number is the mark, no chart needed ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@container (max-width:980px){.stats{grid-template-columns:repeat(2,1fr);}}
@container (max-width:500px){.stats{grid-template-columns:1fr;}}
.stat{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--ground);}
.stat__l{font-size:12.5px;color:var(--muted);font-weight:500;}
.stat__v{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:5px;}
.stat__d{font-size:12.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;}
.stat__d b{font-weight:600;color:var(--success);}

/* ---------- single-series bar chart ---------- */
.chart{display:flex;align-items:flex-end;gap:2px;height:190px;padding-top:8px;}
.bar{
  flex:1;min-width:0;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:7px;height:100%;
}
.bar__fill{
  width:100%;background:var(--teal);
  border-radius:4px 4px 0 0;   /* rounded data-end, square on the baseline */
  transition:background .14s;
}
.bar:hover .bar__fill{background:var(--teal-dark);}
.bar__x{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.bar__tip{
  position:absolute;bottom:calc(100% - 14px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:6px 10px;border-radius:8px;
  font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:0;pointer-events:none;transition:opacity .14s;z-index:5;
}
.bar:hover .bar__tip{opacity:1;}
.chart__base{height:1px;background:var(--border);margin-top:-19px;}

/* ---------- rows / tables ---------- */
.rows{display:flex;flex-direction:column;}
.trow{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.trow:last-child{border-bottom:0;}
.trow__media{width:76px;aspect-ratio:4/3;border-radius:11px;flex:none;}
@container (max-width:620px){
  .trow{grid-template-columns:auto 1fr;gap:12px;}
  .trow__end{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;}
}
.trow__end{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}

/* ---------- empty state ---------- */
.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:44px 26px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:12px;background:var(--surface);
}
.empty__icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--teal-tint);color:var(--teal);}

/* ---------- stepper (listing wizard) ---------- */
.stepbar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.stepbar::-webkit-scrollbar{display:none;}
.stepbar__s{
  display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--muted);
  white-space:nowrap;flex:none;background:var(--ground);
}
.stepbar__s b{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:var(--ground-2);color:var(--muted);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.stepbar__s.is-done{border-color:var(--teal-tint);color:var(--teal-dark);}
.stepbar__s.is-done b{background:var(--teal);color:#fff;}
.stepbar__s.is-now{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark);font-weight:600;}
.stepbar__s.is-now b{background:var(--teal);color:#fff;}
.prog{height:5px;border-radius:999px;background:var(--ground-2);overflow:hidden;}
.prog i{display:block;height:100%;background:var(--teal);border-radius:999px;}

/* Listing-wizard step navigation: a clickable list, each step showing its state
   (complete / incomplete / not started). Lives in the wizard's right column. */
.wsteps{display:flex;flex-direction:column;gap:4px;}
.wstep{display:grid;grid-template-columns:24px 1fr;column-gap:11px;align-items:center;text-align:left;
  padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:var(--ground);
  cursor:pointer;font:inherit;color:var(--ink);width:100%;}
.wstep:hover{border-color:var(--line-strong);}
.wstep.is-now{border-color:var(--teal);background:var(--teal-tint);}
.wstep__mk{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--ground-2);color:var(--muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.wstep__t{font-size:13.5px;font-weight:600;line-height:1.2;}
.wstep__st{font-size:11px;color:var(--muted);}
.wstep--complete .wstep__mk{background:var(--teal);color:#fff;}
.wstep--complete .wstep__st{color:var(--success);}
.wstep--incomplete .wstep__mk{background:var(--warning,#b4700f);color:#fff;}
.wstep--incomplete .wstep__st{color:var(--warning,#b4700f);}

/* ---------- upload dropzone ---------- */
.drop{
  border:1.5px dashed var(--line-strong);border-radius:var(--radius);
  padding:30px;text-align:center;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
/* Wizard photo grid. auto-fill + minmax wraps rows at any count (1..many) and any
   width, never relying on a container-query context. Only the IMAGE tile carries
   the fixed 4:3 aspect; the compliance note flows below it, so the tile can never
   stretch to fit text and the grid can never overflow its column or the step list. */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;width:100%;align-items:start;}
.photos > *{min-width:0;}
.photos .plate{aspect-ratio:4/3;width:100%;border-radius:11px;position:relative;}
.photos .badge{position:absolute;top:7px;left:7px;}
/* A bare .plate directly in the grid (the "No photos yet" empty state aside) */
.photos > .plate{aspect-ratio:4/3;}

/* ---------- toggle switch ---------- */
.switch{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;}
.switch__c{width:46px;height:27px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background .16s;}
.switch__c::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(18,33,31,.28);}
.switch[aria-pressed="true"] .switch__c{background:var(--teal);}
.switch[aria-pressed="true"] .switch__c::after{transform:translateX(19px);}

/* ---------- calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal__h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:4px;}
.cal__d{
  aspect-ratio:1;border:1px solid var(--border);border-radius:9px;background:var(--ground);
  display:flex;flex-direction:column;justify-content:space-between;padding:6px;
  font-size:12px;font-variant-numeric:tabular-nums;text-align:left;
}
.cal__d span{font-weight:600;}
.cal__d small{font-size:10.5px;color:var(--muted);font-weight:600;}
.cal__d--out{opacity:.35;}
.cal__d--booked{background:var(--teal);border-color:var(--teal);color:#fff;}
.cal__d--booked small{color:rgba(255,255,255,.8);}
.cal__d--block{background:var(--ground-2);color:var(--muted);}
.cal__d--pend{background:var(--terra-tint);border-color:rgba(217,116,74,.35);color:var(--terra-dark);}
.cal__d--pend small{color:var(--terra-dark);}
.key{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.key i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px;}
.cal__d{min-width:0;overflow:hidden;}
.cal__d small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@container (max-width:620px){
  .cal{gap:3px;}
  .cal__d{padding:4px;border-radius:7px;font-size:11px;}
  .cal__d small{font-size:9px;letter-spacing:-.01em;}
  .cal__h{font-size:9.5px;}
}

/* ---------- messages ---------- */
.thread{display:grid;grid-template-columns:290px 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:520px;}
@container (max-width:820px){.thread{grid-template-columns:1fr;}.thread__list{display:none;}}
.thread__list{border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;}
.thread__i{display:flex;gap:11px;padding:14px;border-bottom:1px solid var(--border);text-align:left;width:100%;align-items:flex-start;}
.thread__i:hover{background:var(--ground-2);}
.thread__i.is-on{background:var(--ground);box-shadow:inset 3px 0 0 var(--teal);}
.thread__body{display:flex;flex-direction:column;}
.thread__msgs{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.msg{max-width:74%;padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.55;}
.msg--them{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px;align-self:flex-start;}
.msg--me{background:var(--teal);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;}
.msg__t{font-size:11px;margin-top:5px;opacity:.6;}
.thread__sys{align-self:center;font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;text-align:center;}
.thread__in{border-top:1px solid var(--border);padding:14px;display:flex;gap:10px;align-items:center;}

/* ---------- auth ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:78vh;}
@container (max-width:900px){.auth{grid-template-columns:1fr;}.auth__art{display:none;}}
.auth__art{position:relative;background:linear-gradient(160deg,#0e5c63,#0a3d42);padding:48px;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;color:#fff;}
.auth__form{padding:48px;display:flex;align-items:center;justify-content:center;}
@container (max-width:820px){.auth__form{padding:30px 18px;}}
.authbox{width:100%;max-width:400px;}

/* ---------- misc ---------- */
.legal p{font-size:15.5px;color:var(--ink-2);line-height:1.7;}
.legal h3{margin-top:26px;}
.toc a{display:block;padding:7px 0;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--border);}
.toc a:hover{color:var(--teal);}
.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@container (max-width:820px){.helpgrid{grid-template-columns:1fr;}}
.helpcard{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--ground);transition:border-color .15s;}
.helpcard:hover{border-color:var(--teal);}
.bigsearch{display:flex;gap:10px;background:var(--ground);border:1px solid var(--border);border-radius:14px;padding:7px;box-shadow:var(--shadow-card);}
.bigsearch input{flex:1;border:0;padding:11px 14px;font-size:15.5px;background:transparent;}
.bigsearch input:focus{outline:none;}

/* Batch 68: the host's booking button page (/book/:slug). Uses --book-accent, set
   per host by pages.js, so every host's page wears their own colour. */
.bookpage{min-height:100vh;background:var(--bg);}
.bookpage__hd{border-bottom:1px solid var(--border);background:var(--surface);}
.bookpage__hdrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:16px;flex-wrap:wrap;}
.bookpage__brand{display:flex;align-items:center;gap:11px;}
.bookpage__logo{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--book-accent);color:#fff;font-weight:800;font-size:18px;}
.bookpage__name{font-weight:800;font-size:19px;color:var(--ink);}
.bookpage__secure{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;}
.bookbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;}
.bookbar__f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);}
.bookbar__f input{border:1px solid var(--border);border-radius:9px;padding:9px 11px;font:inherit;background:var(--bg);}
.bookbar__go{background:var(--book-accent);color:#fff;border:0;align-self:end;}
.bookgrp{margin-top:8px;}
.bookgrp__h{margin:14px 0 10px;font-size:16px;}
/* Batch 69 §4: auto-FIT (not auto-fill) so the cards stretch to fill the row at any
   count — 2 flats spread across the page instead of clumping in a narrow left column.
   A fixed media height keeps a wide card (few listings) from turning into a tall
   banner. Checked at 1, 2, 3 and 12 listings. */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.bookcard{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;}
.bookcard--off{opacity:.72;}
.bookcard__media{height:180px;position:relative;}
.bookcard__b{padding:12px 13px;display:flex;flex-direction:column;gap:5px;}
.bookcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap;}
.bookcard__price{font-weight:700;color:var(--ink);}
.bookcard__go{background:var(--book-accent);color:#fff;border:0;padding:7px 16px;}