/* Key Card Travel, Direction 5c: Pine Anchor.
   Soft light bands the eye can follow down the page, lock green kept for the better number,
   and one deep pine band that closes every page with the three promises.
   Every value here comes from the design system v2. House rule: no em dashes in copy. */

/* ---------- Tokens ---------- */
:root {
  /* Ink and type colors */
  --ink: #1F1D1A;          /* near-black, all type */
  --secondary: #58534B;    /* secondary text */
  --tertiary: #6E685E;     /* labels, stamps */
  --hairline: #E2D8CA;

  /* Brand */
  --green: #2E7D4F;        /* lock green: the winner, the open door, CTAs */
  --green-hover: #256842;
  --green-active: #1F5E3A;
  --green-well: #EAF3E6;   /* behind the winning figure */
  --brass: #A57A42;        /* rules */
  --brass-text: #8A6534;   /* [CHECK], stale stamps */
  --mint: #A8D8B5;         /* numerals on pine */

  /* Bands */
  --page: #FBF8F3;         /* page and header */
  --sage: #E3EBDC;         /* hero and intro */
  --cream: #F5EFE5;        /* browsing */
  --white: #FFFFFF;        /* reading, cards */
  --pine: #2C4636;         /* promise band, nav button */
  --pine-deep: #243A2C;    /* footer */
  --pine-hair: #3E5A48;
  --on-pine: #F4EEE3;      /* cream text on pine */
  --on-pine-2: #C9D3C6;
  --on-pine-3: #A9B8AA;

  /* States */
  --disabled-bg: #EDE7DC;
  --disabled-fg: #9A948A;
  --alarm: #8A3B1E;        /* clay, the only alarm color, never red */
  --tint: #EFE7D9;         /* secondary button hover on documents */

  /* Type */
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --read: 'Archivo', system-ui, sans-serif;
  /* Labels, stamps and dates were JetBrains Mono; on 2026-09-22 they moved to Archivo, because small
     monospace capitals everywhere made the pages read busy and academic. The token keeps its name. */
  --mono: 'Archivo', system-ui, sans-serif;

  /* Geometry */
  --radius: 2px;
  --max: 1120px;
  --gutter: 40px;
  --measure: 800px;
  --t: 120ms;

  /* What components read. Bands override these. */
  --bg: var(--page);
  --fg: var(--ink);
  --fg2: var(--secondary);
  --fg3: var(--tertiary);
  --hair: var(--hairline);
  --rule: var(--brass);
  --rule-text: var(--brass-text);
  --focus: var(--green);
  --card: var(--white);
}

/* ---------- Bands. Sage opens, pine closes, and two touching bands never match. ---------- */
.band-page  { --bg: var(--page); }
.band-sage  { --bg: var(--sage); }
.band-cream { --bg: var(--cream); }
.band-white { --bg: var(--white); }
.band-pine, .band-deep {
  --fg: var(--on-pine);
  --fg2: var(--on-pine-2);
  --fg3: var(--on-pine-3);
  --hair: var(--pine-hair);
  --rule: var(--mint);
  --rule-text: var(--mint);
  --focus: var(--mint);
  --card: var(--pine);
}
.band-pine { --bg: var(--pine); }
.band-deep { --bg: var(--pine-deep); }
.band-page, .band-sage, .band-cream, .band-white, .band-pine, .band-deep {
  background: var(--bg); color: var(--fg);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 18px/1.65 var(--read);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--page); padding: 10px 14px;
  font: 500 14px var(--display); letter-spacing: .07em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* [CHECK] markers: open items, visible in place until resolved */
.check { color: var(--rule-text); }

/* ---------- Type ---------- */
.display-xl { font: 600 76px/0.95 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.page-title { font: 600 50px/1.05 var(--display); text-transform: uppercase; }
.page-title-s { font: 600 38px/1.05 var(--display); text-transform: uppercase; }
.h2 { font: 500 34px var(--display); text-transform: uppercase; }
.h3 { font: 500 22px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.body-l { font: 400 19px/1.7 var(--read); color: var(--fg2); text-wrap: pretty; }
.body-s { font: 400 16px/1.55 var(--read); }
.label { font: 500 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); }
.stamp { font: 400 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg2); }
.eyebrow { font: 500 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin-bottom: 16px; }
.hero .eyebrow { font-size: 17px; letter-spacing: .07em; margin-bottom: 20px; }
.eyebrow.is-open { color: var(--green); }
.band-pine .eyebrow.is-open, .band-deep .eyebrow.is-open { color: var(--mint); }

/* ---------- Links ---------- */
.link { border-bottom: 1px solid var(--brass); transition: color var(--t), border-color var(--t); }
.link:hover { color: var(--green); border-bottom-color: var(--green); }
.band-pine .link, .band-deep .link { border-bottom-color: var(--mint); }
.band-pine .link:hover, .band-deep .link:hover { color: var(--mint); }
.link-caps {
  font: 500 13px var(--display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg); border-bottom: 1px solid var(--brass);
  transition: color var(--t), border-color var(--t);
}
.link-caps:hover { color: var(--green); border-bottom-color: var(--green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 500 16.5px var(--display); letter-spacing: .07em; text-transform: uppercase;
  padding: 15px 24px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn-primary { background: var(--green); color: #FFFFFF; }
.btn-primary:hover { background: var(--green-hover); }
.btn-primary:active { background: var(--green-active); }
.btn-secondary { border-color: var(--hair); color: var(--fg); background: transparent; }
.btn-secondary:hover { border-color: var(--brass); }
.band-pine .btn-secondary, .band-deep .btn-secondary { border-color: var(--on-pine-3); color: var(--on-pine); }
.band-pine .btn-secondary:hover, .band-deep .btn-secondary:hover { border-color: var(--mint); color: var(--mint); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--disabled-bg); color: var(--disabled-fg); border-color: transparent; cursor: not-allowed;
}
.btn-block { display: flex; width: 100%; padding: 16px; }
.btn-s { font-size: 15px; padding: 12px 18px; }

/* Channel button: the lock light, not a platform logo */
.btn-channel {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--hairline); color: var(--ink);
  font: 500 15px var(--display); letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 15px; border-radius: var(--radius);
  transition: border-color var(--t);
}
.btn-channel:hover { border-color: var(--brass); }
.lock-light { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }

/* ---------- Header and nav, identical on every page ---------- */
.site-header { background: var(--page); border-bottom: 1px solid var(--hairline); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 46px; height: 29px; }
.brand span { font: 500 17px var(--display); letter-spacing: .07em; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 22px; font: 500 15.5px var(--display); letter-spacing: .07em; text-transform: uppercase; }
.site-nav .nav-link { color: var(--secondary); padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--t); }
.site-nav .nav-link:hover { color: var(--ink); }
.site-nav .nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }
.nav-db {
  padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--green); color: var(--green);
  transition: background-color var(--t), color var(--t);
}
.nav-db:hover { background: var(--green); color: #FFFFFF; }
.nav-db[aria-current="page"] { background: var(--green); color: #FFFFFF; }
.nav-toggle {
  display: none; background: var(--white); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer;
  font: 500 15px var(--display); letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- Section scaffolding ---------- */
.section { padding-top: 52px; padding-bottom: 52px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 3px solid var(--brass); padding-bottom: 10px; margin-bottom: 6px;
}
.section-head .label { color: var(--fg2); }

/* ---------- Home hero ---------- */
.hero { padding-top: 64px; padding-bottom: 64px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero .body-l { margin-top: 22px; max-width: 560px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Rate plate, the signature component ---------- */
.rate-plate { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink); }
.plate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 3px solid var(--brass); }
.plate-head .plate-title { font: 500 14px var(--mono); letter-spacing: .07em; color: var(--secondary); text-transform: uppercase; }
.plate-head .plate-date { font: 400 14px var(--mono); color: var(--secondary); text-transform: uppercase; }
.plate-cells { display: flex; }
.plate-cell { flex: 1; padding: 16px; min-width: 0; }
.plate-cell + .plate-cell { border-left: 1px solid var(--hairline); }
.plate-cell .cell-label { font: 400 13.5px var(--mono); letter-spacing: .07em; color: var(--tertiary); text-transform: uppercase; }
.plate-cell .figure { font: 500 34px var(--display); margin-top: 6px; color: var(--ink); }
.plate-cell .figure small { font-size: 16px; color: var(--secondary); }
.plate-cell .figure.is-empty { color: var(--secondary); }
.plate-cell.is-better { background: var(--green-well); }
.plate-cell.is-better .cell-label, .plate-cell.is-better .figure, .plate-cell.is-better .figure small { color: var(--green); }
.rate-plate.is-stale .figure { color: var(--secondary); }
.rate-plate.is-stale .plate-date { color: var(--brass-text); }
.rate-plate.is-hero .figure { font-size: 42px; }
.rate-plate.is-hero .plate-cell { padding: 18px 16px; }
.plate-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--hairline); font: 400 14px/1.6 var(--mono); color: var(--secondary); text-transform: uppercase; }
.plate-foot a { color: var(--ink); border-bottom: 1px solid var(--brass); transition: color var(--t), border-color var(--t); }
.plate-foot a:hover { color: var(--green); border-bottom-color: var(--green); }

/* Points value rating: green only when the redemption beats what the program is normally worth */
.cpp.is-excellent { color: var(--green); font-weight: 600; }
.cpp.is-good { color: var(--green); }
.cpp.is-par { color: var(--secondary); }

/* Compact catalog chip */
.chip { display: inline-block; background: var(--white); border: 1px solid var(--hairline); color: var(--ink); padding: 7px 12px; border-radius: var(--radius); font: 500 22px var(--display); letter-spacing: .04em; white-space: nowrap; }
.chip .win { color: var(--green); }
.chip .chip-from { font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin-right: 8px; vertical-align: 3px; }
.chip.is-muted { color: var(--secondary); text-transform: uppercase; }

/* ---------- Catalog rows ---------- */
.stay-rows { list-style: none; margin: 0; padding: 0; }
.stay-rows { display: grid; gap: 10px; }
.stay-row {
  display: grid; grid-template-columns: 40% 0.8fr 1fr 0.9fr; gap: 20px; align-items: center;
  padding: 18px 22px; background: var(--prog-tint, var(--white));
  border: 1px solid transparent; border-left: 6px solid var(--prog, var(--hairline)); border-radius: var(--radius);
  transition: border-color var(--t);
}
.stay-row:hover { border-color: var(--prog, var(--brass)); }
.stay-row .stay-name { font: 400 18px/1.5 var(--read); }
.row-prog { display: block; margin-bottom: 4px; font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--prog, var(--fg3)); }
.stay-row .stay-name a { border-bottom: 1px solid var(--brass); }
.stay-row .stay-name a:hover { color: var(--green); border-bottom-color: var(--green); }
.stay-row .verified { font: 400 14px var(--mono); color: var(--fg2); text-transform: uppercase; }
.stay-row .verified.is-due { color: var(--brass-text); }
.stay-row .cell-key { display: none; }
.stay-rows-head { display: grid; grid-template-columns: 40% 0.8fr 1fr 0.9fr; gap: 20px; padding: 10px 23px 10px 28px; margin-bottom: 10px; border-bottom: 1px solid var(--hair); font: 400 13.5px var(--mono); letter-spacing: .07em; color: var(--fg3); }
.stay-row[hidden] { display: none; }

/* Family stays are marked, not left to a dash in a column */
.tag-family {
  display: inline-block; font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--green); background: var(--green-well); border: 1px solid #CFE4D2;
  padding: 3px 8px; border-radius: var(--radius); margin-left: 10px; white-space: nowrap;
}

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 18px; }
.filters .filters-key { font: 400 13.5px var(--mono); letter-spacing: .07em; color: var(--fg3); margin-right: 6px; }
.filter-chip {
  font: 500 14px var(--display); letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--white); color: var(--secondary); cursor: pointer;
  transition: border-color var(--t), color var(--t), background-color var(--t);
  -webkit-appearance: none; appearance: none;
}
.filter-chip:hover { border-color: var(--brass); color: var(--ink); }
.filter-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green-well); color: var(--green); }
.filter-chip:disabled, .filter-chip:disabled:hover { border-color: var(--hairline); color: var(--disabled-fg); cursor: not-allowed; background: var(--disabled-bg); }
select.filter-chip { padding-right: 13px; }
.filters .showing { margin-left: auto; font: 400 14px var(--mono); letter-spacing: .07em; color: var(--fg3); }

/* Pagination */
.pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.pager button {
  font: 500 15.5px var(--display); letter-spacing: .06em; padding: 10px 15px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--white); color: var(--secondary); cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.pager button:hover { border-color: var(--brass); color: var(--ink); }
.pager button[aria-current="page"] { border-color: var(--brass); color: var(--ink); }
.pager .pager-note { font: 400 14px var(--mono); color: var(--fg3); }

/* ---------- Three steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.steps > div { padding: 0 26px; }
.steps > div:first-child { padding-left: 0; }
.steps > div:last-child { padding-right: 0; }
.steps > div + div { border-left: 1px solid var(--hair); }
.steps .num { font: 400 14px var(--mono); letter-spacing: .07em; color: var(--brass-text); }
.steps h3 { margin: 10px 0 8px; font: 500 21px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.steps p { font: 400 17px/1.65 var(--read); color: var(--fg2); }

/* ---------- Who runs this and the database card ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split p.lead { font: 400 18.5px/1.7 var(--read); color: var(--fg); text-wrap: pretty; }
.split .link-caps { display: inline-block; margin-top: 16px; font-size: 14px; }
.db-card { background: var(--white); border: 1px solid var(--hairline); padding: 24px; }
.db-card h3 { font: 500 24px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.db-card p { margin: 10px 0 18px; font: 400 17px/1.6 var(--read); color: var(--secondary); }

/* ---------- Signup form ---------- */
.signup-form { display: flex; }
.signup-form input {
  flex: 1; min-width: 0; border-radius: 0; margin: 0;
  font: 400 16.5px var(--mono); padding: 14px 16px;
  border: 1px solid var(--hairline); border-right: 0; background: var(--white); color: var(--ink);
  transition: border-color var(--t);
}
.signup-form input::placeholder { color: var(--disabled-fg); opacity: 1; }
.signup-form input:focus { border-color: var(--green); }
.signup-form input.is-error { border-color: var(--alarm); }
.signup-form button { border-radius: 0; padding: 14px 20px; flex: none; }
.form-error { font: 400 15px var(--read); color: var(--alarm); margin-top: 8px; }
.form-success { border: 1px solid var(--hairline); background: var(--green-well); padding: 13px 15px; font: 400 16.5px var(--read); color: var(--ink); }

/* Database band */
.db-band { padding-top: 34px; padding-bottom: 34px; }
.db-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.db-band h3 { font: 500 22px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.db-band p { margin-top: 8px; font: 400 17px/1.6 var(--read); color: var(--fg2); }

/* ---------- Promise band and footer, identical on every page ---------- */
.promise { padding-top: 36px; padding-bottom: 36px; }
.promise .wrap > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.promise-item .num { font: 500 14px var(--mono); letter-spacing: .07em; color: var(--mint); }
.promise-item div:last-child { font: 500 18px var(--display); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }

.site-footer { padding-top: 30px; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 24px; }
.footer-cols .brand img { width: 40px; height: 25px; }
.footer-cols .brand span { font-size: 15px; color: var(--on-pine); }
.footer-cols p { margin-top: 12px; font: 400 16.5px/1.7 var(--read); color: var(--fg2); }
.footer-col { font: 400 16.5px/1.95 var(--read); color: var(--fg2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { transition: color var(--t); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--mint); }
.footer-col .label { font-size: 13px; letter-spacing: .07em; margin-bottom: 8px; color: var(--on-pine-3); }
.footer-bar { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 26px; margin-top: 10px; border-top: 1px solid var(--pine-hair); font: 400 14px var(--mono); letter-spacing: .06em; color: var(--fg3); text-transform: uppercase; }
.footer-bar nav { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.footer-bar a { transition: color var(--t); }
.footer-bar a:hover { color: var(--mint); }

/* ---------- Catalog page ---------- */
.page-intro { padding-top: 44px; padding-bottom: 24px; }
.page-intro p { margin-top: 14px; max-width: 640px; font: 400 18.5px/1.6 var(--read); color: var(--fg2); }
.catalog { padding-top: 28px; padding-bottom: 40px; }

/* ---------- Stay page ---------- */
.breadcrumb { padding-top: 20px; padding-bottom: 20px; font: 400 14px var(--mono); letter-spacing: .07em; color: var(--fg3); text-transform: uppercase; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current] { color: var(--fg); }
.stay-main { padding-top: 40px; padding-bottom: 52px; }
.stay-main h1 { max-width: 800px; line-height: 1.04; }
.stay-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; margin-top: 30px; align-items: start; }
/* Stay media (2026-09-23): a 9:16 walkthrough spanning two rows, beside four 3:4 stills. The column ratio
   3:2:2 makes the two rows of stills exactly as tall as the video. */
.stay-media { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 10px; align-items: start; }
.stay-media > * { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); background: var(--disabled-bg); }
.stay-media .media-lead { grid-row: span 2; aspect-ratio: 9 / 16; object-fit: cover; }
.stay-media > a.lb:not(.media-lead) { aspect-ratio: 3 / 4; }
.stay-media a.lb { position: relative; cursor: zoom-in; overflow: hidden; }
.stay-media a.lb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--t); }
.stay-media a.lb:hover img, .stay-media a.lb:focus-visible img { opacity: .88; }
.stay-media a.lb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.stay-media.is-landscape { grid-template-columns: 1fr 1fr; }
.stay-media.is-landscape .media-lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
.stay-media.has-0 { grid-template-columns: minmax(0, 420px); }
.stay-media.has-0 .media-lead { grid-row: auto; aspect-ratio: 3 / 4; }
.media-note { font: 400 14px/1.5 var(--read); color: var(--tertiary); margin-top: 8px; }
.yt-embed { aspect-ratio: 16 / 9; margin-bottom: 10px; border: 1px solid var(--hairline); }
.yt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.verdict { margin-top: 26px; padding-top: 16px; border-top: 3px solid var(--brass); font: 400 19px/1.6 var(--read); max-width: 660px; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.pros-cons .label { margin-bottom: 10px; font-size: 13px; letter-spacing: .07em; }
.pros-cons .pros .label { color: var(--green); }
.pros-cons .cons .label { color: var(--brass-text); }
.pros-cons ul { list-style: none; margin: 0; padding: 0; font: 400 17px/1.85 var(--read); }
.pros-cons .cons ul { color: var(--secondary); }
.stay-facts { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.stay-facts .label { color: var(--secondary); margin-bottom: 12px; font-size: 13px; letter-spacing: .07em; }
.stay-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; font: 400 17px var(--read); }
.stay-facts dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.stay-facts dt { color: var(--secondary); }
.stay-facts dd { margin: 0; text-align: right; }

/* Panels: scores, the property, guest scores */
.score-table { background: var(--white); border: 1px solid var(--hairline); margin-top: 16px; }
.score-table .score-head { font: 500 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--secondary); padding: 12px 15px; border-bottom: 1px solid var(--hairline); }
.score-table dl { margin: 0; }
.score-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; padding: 12px 15px; font: 400 16.5px var(--read); border-bottom: 1px solid var(--hairline); }
.score-row:last-child { border-bottom: 0; }
.score-row dt { color: var(--secondary); }
.score-row dd { margin: 0; font-family: var(--mono); text-align: right; }
.score-row.is-stacked { grid-template-columns: 1fr; }
.score-row.is-stacked dd { text-align: left; margin-top: 2px; }
.score-row .src { grid-column: 1 / -1; font: 400 14px/1.55 var(--mono); color: var(--tertiary); }
.score-row .is-strong { color: var(--green); font-weight: 600; }
.score-row .count { color: var(--secondary); font-size: 14px; }
.score-row.is-toddler.is-scored { color: var(--green); background: var(--green-well); font-weight: 500; }
.score-row.is-empty dd { color: var(--secondary); }
.score-note { padding: 11px 15px; background: var(--page); border-top: 1px solid var(--hairline); font: 400 14px/1.6 var(--mono); color: var(--tertiary); text-transform: uppercase; }
.award-line {
  padding: 12px 15px; border-top: 1px solid var(--hairline); border-left: 3px solid var(--brass);
  font: 500 16px var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}

.panel { background: var(--white); border: 1px solid var(--hairline); margin-top: 16px; padding: 15px; }
.panel .label { color: var(--secondary); font-size: 13px; letter-spacing: .07em; margin-bottom: 8px; }
.panel p { font: 400 17px/1.7 var(--read); }

/* Hosted stay, stated at the top of the page, at body size */
.hosted-note { background: var(--white); border: 1px solid var(--hairline); border-left: 3px solid var(--brass); padding: 15px 16px; margin-bottom: 26px; }
.hosted-note .label { color: var(--brass-text); margin-bottom: 8px; }
.hosted-note p { font: 400 18px/1.6 var(--read); color: var(--ink); }

.disclosure { margin: 18px 0 12px; font: 400 18px/1.6 var(--read); color: var(--ink); }
.fine-print { margin-top: 14px; font: 400 14px/1.65 var(--mono); letter-spacing: .06em; color: var(--tertiary); text-transform: uppercase; }

/* ---------- Documents ---------- */
.doc-intro { padding-top: 64px; padding-bottom: 24px; }
.doc-intro .body-l { margin-top: 22px; color: var(--secondary); }
.doc-body { padding-top: 8px; padding-bottom: 40px; }
.doc-intro .inner, .doc-body .inner { max-width: var(--measure); }
.rule-top { border-top: 3px solid var(--brass); padding-top: 22px; }
.doc-steps { list-style: none; margin: 0; padding: 0; }
.doc-step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.doc-step:first-child { padding-top: 0; }
.doc-step .num { font: 500 15px var(--mono); color: var(--brass-text); }
.doc-step h2 { font: 500 22px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.doc-step p, .doc-p { margin-top: 8px; font: 400 18px/1.7 var(--read); color: var(--secondary); }
.method-table { width: 100%; border-collapse: collapse; margin-top: 16px; font: 400 16.5px var(--read); }
.method-table tr { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.method-table th { text-align: left; padding: 10px 12px 10px 0; width: 42%; color: var(--tertiary); font: 400 14px var(--mono); letter-spacing: .06em; vertical-align: top; }
.method-table td { padding: 10px 0; }
.cream-card { border: 1px solid var(--hairline); background: var(--white); padding: 26px; }
.cream-card .label { margin-bottom: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.two-col .label { margin-bottom: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-row .label { letter-spacing: .07em; }
.stat-row .stat { font: 500 22px var(--display); text-transform: uppercase; margin-top: 6px; }
.doc-sections { display: flex; flex-direction: column; gap: 26px; }
.doc-sections > section { border-top: 1px solid var(--hairline); padding-top: 22px; }
.doc-sections h2 { font: 500 22px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.inline-card { border: 1px solid var(--hairline); background: var(--white); padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.inline-card h3 { font: 500 20px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.inline-card p { margin-top: 8px; font: 400 17px/1.6 var(--read); color: var(--secondary); }

/* Room database page */
.db-page p.intro { margin-top: 16px; font: 400 18px/1.7 var(--read); color: var(--secondary); }
.db-page .signup-form { margin-top: 22px; }
.db-page .small-print { margin-top: 14px; font: 400 15.5px/1.6 var(--read); color: var(--tertiary); }
.db-page ul { list-style: none; margin: 0; padding: 0; font: 400 17px/1.9 var(--read); color: var(--secondary); }

/* Contact */
.contact-list { margin-top: 24px; }
.contact-list > div { border-top: 1px solid var(--hairline); padding: 16px 0; }
.contact-list > div:last-child { border-bottom: 1px solid var(--hairline); }
.contact-list .label { letter-spacing: .07em; }
.contact-list a { display: inline-block; margin-top: 6px; font: 500 20px var(--display); letter-spacing: .02em; border-bottom: 1px solid var(--brass); overflow-wrap: anywhere; transition: color var(--t), border-color var(--t); }
.contact-list a:hover { color: var(--green); border-bottom-color: var(--green); }
.contact-list .loc { margin-top: 6px; font: 400 17px/1.6 var(--read); }

/* Legal pages */
.legal { font: 400 18px/1.7 var(--read); color: var(--secondary); display: flex; flex-direction: column; gap: 18px; }
.legal h2 { margin-bottom: 6px; font: 500 17px var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .nav-toggle { display: inline-block; }
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding: 12px 0 8px; }
  .site-nav.is-open { display: flex; }
  .no-js .site-nav { display: flex; flex-direction: row; flex-wrap: wrap; }
  .no-js .nav-toggle { display: none; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .hero .wrap, .split, .db-band .wrap, .stay-grid, .two-col, .inline-card { grid-template-columns: 1fr; }
  .hero { padding-top: 44px; padding-bottom: 44px; }
  .display-xl { font-size: clamp(46px, 11vw, 76px); }
  .page-title { font-size: clamp(34px, 7vw, 50px); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps > div, .steps > div:first-child, .steps > div:last-child { padding: 0; }
  .steps > div + div { border-left: 0; border-top: 1px solid var(--hair); padding-top: 22px; }
  .promise .wrap > div { grid-template-columns: 1fr; gap: 20px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > :first-child { grid-column: 1 / -1; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stay-rows-head { display: none; }
  .stay-row { grid-template-columns: auto 1fr; gap: 10px 16px; padding: 16px 16px 16px 14px; }
  .stay-row .stay-name { grid-column: 1 / -1; }
  .stay-row .verified { justify-self: start; }
  .stay-row .cell-key { display: inline; color: var(--fg3); }
  .filters .showing { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .doc-intro { padding-top: 44px; }
  .page-title-s { font-size: 32px; }
  .brand span { font-size: 15px; letter-spacing: .07em; }
  .brand img { width: 44px; height: 28px; }
  .plate-cell .figure, .rate-plate.is-hero .figure { font-size: 30px; }
  .stay-media { grid-template-columns: 1fr 1fr; }
  .stay-media .media-lead { grid-column: 1 / -1; grid-row: auto; }
  .pros-cons, .stay-facts dl { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .doc-step { grid-template-columns: 1fr; gap: 6px; }
  .method-table th, .method-table td { display: block; width: 100%; padding: 8px 0 0; }
  .method-table td { padding: 2px 0 10px; }
  .signup-form { flex-direction: column; }
  .signup-form input { border-right: 1px solid var(--hairline); border-bottom: 0; }
  .btn-row .btn { width: 100%; }
  .cream-card, .inline-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Every figure says which dates it is priced for. "Checked 20 Sep" is when we looked, not when you stay. */
.cell-when { margin-top: 6px; font: 400 14px var(--mono); letter-spacing: .04em; color: var(--tertiary); }
.plate-cell.is-better .cell-when { color: var(--green); }
.row-when { display: block; margin-top: 6px; font: 400 14px var(--mono); letter-spacing: .04em; color: var(--tertiary); }
.plate-note { margin-top: 12px; font: 400 16px/1.6 var(--read); color: var(--secondary); }

/* The plate answers one question: cheapest night in the window, and is that night better on points or cash */
.plate-sub { padding: 10px 16px 0; font: 500 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--secondary); }
.plate-when { padding: 0 16px 12px; font: 400 15px var(--read); color: var(--tertiary); }
.plate-when strong { color: var(--ink); font-weight: 600; }
.plate-alt { padding: 12px 16px 14px; border-top: 1px solid var(--hairline); background: var(--page); }
.plate-alt .cell-label { font: 400 13.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tertiary); }
.alt-line { margin-top: 6px; font: 400 16.5px/1.6 var(--read); color: var(--ink); }
.alt-line strong { font-weight: 600; }

/* A hotel's own currency leads, with the conversion stated beneath it */
.cell-fx { margin-top: 6px; font: 400 14px/1.5 var(--mono); color: var(--tertiary); }
.plate-cell.is-better .cell-fx { color: var(--green); }

/* The conditions attached to a rate, stated with it rather than buried */
.plate-plan { padding: 0 16px 12px; font: 400 15px/1.55 var(--read); color: var(--secondary); }
.perks-note { margin-top: 16px; background: var(--green-well); border: 1px solid #CFE4D2; padding: 15px 16px; }
.perks-note .label { color: var(--green); margin-bottom: 8px; }
.perks-note p { font: 400 17px/1.6 var(--read); color: var(--ink); }

/* ---------- Loyalty program groups (2026-09-22). Each stay row carries its program's color as a band
   across the row, with the program named in text too, so color is never the only signal. ---------- */
/* Five hues set far apart on the wheel: rust, blue, teal, purple, and a neutral stone for the
   independents. Green is kept out on purpose, because lock green means "the better number". */
.grp-marriott    { --prog: #B4532A; --prog-tint: #FADFD0; }
.grp-hilton      { --prog: #2A5C9A; --prog-tint: #DCE7F7; }
.grp-fourseasons { --prog: #1D7480; --prog-tint: #D5EEF0; }
.grp-accor       { --prog: #6B4A9B; --prog-tint: #E8DEF6; }
.grp-other       { --prog: #6A645B; --prog-tint: #E9E6E1; }
.program-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0 18px; font: 500 13.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg2); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item .swatch { width: 20px; height: 14px; background: var(--prog-tint); border-left: 5px solid var(--prog); border-radius: 1px; }

/* ---------- Split plate (2026-09-22): cheapest cash night | cheapest points night ---------- */
.plate-sub { padding: 12px 16px 0; }
.plate-cells { align-items: stretch; }
.plate-cell .cell-label { font-weight: 500; }
.plate-cell .cell-when { margin-top: 4px; font: 500 16px var(--read); letter-spacing: 0; color: var(--ink); }
.plate-cell .cell-value { margin-top: 10px; font: 400 15px/1.5 var(--read); color: var(--secondary); }
.plate-cell .cell-value .cpp { font-weight: 600; }
.plate-tags { padding: 11px 16px; border-top: 1px solid var(--hairline); font: 400 15.5px/1.5 var(--read); color: var(--ink); }
.plate-tags .tags-key { font: 400 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tertiary); margin-right: 10px; }
.plate-foot { text-transform: none; }
.plate-foot a { text-transform: uppercase; }
.plate-detail { margin-top: -1px; background: var(--page); border: 1px solid var(--hairline); border-top: 0; padding: 4px 16px 12px; }
.detail-line { padding-top: 10px; }
.detail-line p { margin-top: 4px; font: 400 16px/1.6 var(--read); color: var(--secondary); }
.detail-line p strong { color: var(--ink); }
@media (max-width: 560px) {
  .plate-cell { padding: 14px 12px; }
  .plate-cell .figure, .rate-plate.is-hero .figure { font-size: 27px; }
}

/* Row lists say what the price is (2026-09-22): column heads on wide screens, one line on phones */
.stay-rows-head { text-transform: uppercase; }
.rows-note { display: none; margin: 0 0 12px; font: 400 16px/1.55 var(--read); color: var(--fg2); }
@media (max-width: 900px) { .rows-note { display: block; } }

/* Column heads sized to match the rows beneath them (2026-09-22): each head sits on one line, the price
   head carries its window as a second line, and the check date aligns to the right edge like its column. */
.stay-rows-head { align-items: end; padding: 18px 23px 12px 28px; font: 500 14px var(--mono); letter-spacing: .07em; color: var(--fg2); border-bottom: 0; }
.stay-rows-head span { white-space: nowrap; }
.stay-rows-head small { display: block; margin-top: 3px; font: 400 13.5px var(--mono); letter-spacing: .08em; text-transform: none; color: var(--fg3); }
.stay-rows-head > :last-child, .stay-row .verified { justify-self: end; text-align: right; }
@media (max-width: 900px) { .stay-row .verified { justify-self: start; text-align: left; } }

/* ---------- The plate in its program's color (2026-09-22). The hook of the home page, so it carries
   the loyalty program's color band and name, matching the stay rows. ---------- */
.rate-plate[class*="grp-"] { border: 0; border-top: 6px solid var(--prog); background: var(--white); box-shadow: none; }
.rate-plate .plate-head { display: block; background: var(--prog); color: #FFFFFF; padding: 14px 18px 16px; border-bottom: 0; }
.rate-plate .plate-kicker { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 13.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.rate-plate .plate-head .plate-date { font: 400 13.5px var(--mono); color: rgba(255,255,255,.88); }
.rate-plate .plate-head .plate-title { margin-top: 6px; font: 500 24px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF; }
.rate-plate.is-hero .plate-head .plate-title { font-size: 30px; }
.rate-plate[class*="grp-"] { border-top: 0; }
.rate-plate .plate-sub { background: var(--prog-tint); padding: 12px 18px 0; color: var(--prog); }
.rate-plate .plate-cells { background: var(--prog-tint); padding-bottom: 6px; }
.rate-plate .plate-cell { padding: 14px 18px 16px; }
.rate-plate .plate-cell + .plate-cell { border-left: 1px solid rgba(0,0,0,.12); }
.rate-plate .plate-cell .cell-label { color: var(--prog); }
.rate-plate.is-hero .figure { font-size: 50px; line-height: 1.05; }
.rate-plate .plate-tags { padding: 12px 18px; border-top: 0; }
.rate-plate .plate-tags .tags-key { color: var(--prog); }
.rate-plate .plate-foot { padding: 11px 18px; }
.rate-plate .cpp { display: inline-block; padding: 2px 8px; border-radius: 2px; font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rate-plate .cpp.is-par { background: #FFFFFF; color: var(--secondary); border: 1px solid rgba(0,0,0,.15); }
.rate-plate .cpp.is-good, .rate-plate .cpp.is-excellent { background: var(--green); color: #FFFFFF; }
.rate-plate { border: 1px solid rgba(0,0,0,.08); overflow: hidden; }
@media (max-width: 560px) {
  .rate-plate.is-hero .figure { font-size: 34px; }
  .rate-plate .plate-cell { padding: 12px 12px 14px; }
}
.rate-plate .figure { white-space: nowrap; }
.rate-plate.is-hero .figure { font-size: clamp(34px, 3.4vw, 48px); }
.rate-plate .cell-value .cpp { margin-left: 4px; }
.rate-plate .plate-cell .cell-when { margin-top: 8px; }

/* ---------- Elite status badges (2026-09-22): program name over tier, in the program's color ---------- */
.status-badge { display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 12px 8px; background: var(--prog-tint); border-left: 5px solid var(--prog); border-radius: var(--radius); text-transform: none; line-height: 1.2; vertical-align: middle; }
.status-badge .sb-prog { font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--prog); }
.status-badge .sb-tier { font: 500 17px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.status-badge.is-big { padding: 10px 14px 11px; }
.status-badge.is-big .sb-tier { font-size: 22px; }
.status-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; }
.stay-facts dd .status-badge { text-align: left; }

/* ---------- Property snapshot on the hero plate (2026-09-22) ---------- */
.plate-snap { padding: 12px 18px 14px; border-top: 1px solid var(--hairline); background: var(--white); }
.snap-head { font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--prog, var(--tertiary)); margin-bottom: 8px; }
.snap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.snap-cell { background: var(--white); padding: 8px 10px 9px; min-width: 0; }
.snap-label { font: 400 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tertiary); }
.snap-val { margin-top: 3px; font: 500 17px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.snap-val small { font: 400 13px var(--read); letter-spacing: 0; text-transform: none; color: var(--secondary); }
@media (max-width: 560px) { .snap-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Our own award icons and review links (2026-09-22). Plain shapes, never the owners' marks. ---------- */
.ico-row { display: inline-flex; gap: 3px; align-items: center; vertical-align: -2px; margin-right: 8px; }
.ico { display: block; }
.ico-key { width: 24px; height: 11px; color: var(--brass-text); }
.ico-star { width: 14px; height: 14px; color: var(--brass); }
.is-outline .ico-star { color: var(--tertiary); }
.ico-dot { width: 12px; height: 12px; color: var(--pine); }
.snap-cell .ico-row { display: flex; margin: 5px 0 1px; }
.review-link { display: inline-block; margin-top: 4px; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--brass); transition: color var(--t), border-color var(--t); }
.review-link:hover { color: var(--green); border-bottom-color: var(--green); }
.review-link .ext { margin-left: 4px; }
.score-row .src .review-link { text-transform: none; letter-spacing: .02em; font-size: 14px; }

/* ---------- World's 50 Best ribbon (2026-09-22): our own medal, the award named in words ---------- */
.plate-ribbon { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--pine); color: var(--on-pine); font: 400 15.5px/1.35 var(--read); }
.plate-ribbon strong { font: 600 16px var(--display); letter-spacing: .06em; color: #F2D9A6; }
.ico-medal { width: 18px; height: 22px; flex: none; color: #F2D9A6; }
.tag-best { display: inline-block; font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-pine); background: var(--pine); padding: 3px 8px; border-radius: var(--radius); margin-left: 10px; white-space: nowrap; }
.plate-cell .figure.is-words { font-size: 26px !important; color: var(--secondary); }

/* Type pass 2026-09-22: labels in Archivo read best a touch heavier */
.label, .eyebrow, .stamp, .cell-label, .snap-label, .row-prog, .plate-kicker, .plate-sub, .tags-key,
.stay-rows-head, .filters-key, .showing, .verified, .chip-from, .snap-head, .score-head, .sb-prog { font-weight: 600; }
.row-when, .cell-when, .cell-fx, .plate-date, .score-note { letter-spacing: 0; }

/* A notice a booker must see, e.g. closures during the rate window (2026-09-22) */
.plate-notice { padding: 11px 18px; background: #FBF1DE; border-top: 1px solid #E9D3A8; font: 400 14.5px/1.5 var(--read); color: var(--ink); }
.plate-notice strong { display: block; font: 600 13px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 2px; }

/* ---------- Review drafts (2026-09-23): drafted from published reviews, pending Dr. B ---------- */
.draft-tag { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: var(--radius); background: #FBF1DE; border: 1px solid #E9D3A8; color: var(--brass-text); font: 600 12px var(--read); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.draft-note { margin: 22px 0 6px; padding: 14px 18px; background: #FBF1DE; border: 1px solid #E9D3A8; border-left: 5px solid var(--brass); }
.draft-note .label { color: var(--brass-text); margin-bottom: 4px; }
.draft-note p { font: 400 16px/1.6 var(--read); color: var(--ink); }
.score-row.is-draft dd { color: var(--brass-text); font-weight: 600; }
.consensus-src { margin-top: 30px; padding: 14px 18px; border: 1px solid var(--hairline); background: var(--page); font: 400 15px/1.6 var(--read); color: var(--secondary); }
.consensus-src summary { cursor: pointer; font: 600 14px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.consensus-src ul { margin: 10px 0; padding-left: 18px; }
.consensus-src p { margin-top: 8px; }

/* Pros and cons read as separate points (2026-09-23) */
.pros-cons ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pros-cons li { position: relative; padding-left: 16px; margin-bottom: 10px; line-height: 1.5; }
.pros-cons li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pros-cons .cons li::before { background: var(--brass); }
.pros-cons li.check::before { display: none; }

/* Hero plate links to the stay page (2026-09-23) */
.rate-plate .plate-title a { color: #FFFFFF; border-bottom: 2px solid rgba(255,255,255,.45); transition: border-color var(--t); }
.rate-plate .plate-title a:hover { border-bottom-color: #FFFFFF; }
.plate-foot .foot-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Guest consensus panel (2026-09-23): computed from Google and Tripadvisor ---------- */
.consensus .cons-top { display: flex; gap: 18px; align-items: center; padding: 16px 15px 14px; border-bottom: 1px solid var(--hairline); }
.consensus .cons-big { font: 500 52px/1 var(--display); color: var(--ink); white-space: nowrap; }
.consensus .cons-big small { font-size: 18px; color: var(--secondary); }
.consensus .cons-meta { font: 400 15px/1.5 var(--read); color: var(--secondary); }
.consensus .cons-meta .ico-row { margin-bottom: 4px; }
.consensus .cons-pair { color: var(--ink); margin-top: 2px; }
.consensus .cons-pair .count { color: var(--secondary); font-size: 14px; }
.consensus .cons-links { display: flex; gap: 14px; margin-top: 2px; }
.score-subhead { padding: 10px 15px 6px; background: var(--page); border-bottom: 1px solid var(--hairline); font: 600 13px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }
.score-subhead span { float: right; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tertiary); }
.score-row dd small { font-size: 13px; color: var(--secondary); }
.take-line { padding: 12px 15px; border-top: 1px solid var(--hairline); font: 400 15.5px/1.55 var(--read); color: var(--ink); }
.take-line.is-agree strong { color: var(--green); }
.take-line.is-higher strong { color: var(--green); }
.take-line.is-lower strong { color: var(--alarm); }
.take-line.is-pending { color: var(--secondary); background: #FBF1DE; }
.take-line.is-pending strong { color: var(--brass-text); }
.say-note { margin-top: 10px; font: 400 14.5px/1.5 var(--read); color: var(--tertiary); }
.byline { margin-top: 12px; font: 400 16px/1.6 var(--read); color: var(--secondary); }
.read-care { padding: 11px 15px; border-top: 1px solid var(--hairline); font: 400 14.5px/1.5 var(--read); color: var(--ink); background: #F6EEE8; }
.read-care strong { color: var(--alarm); }

/* Awards with our own medal (2026-09-23) */
.award-line { display: flex; align-items: center; gap: 10px; }
.award-line .ico-medal { color: var(--brass); width: 16px; height: 20px; }
.award-line .award-name { flex: 1; }
.award-line .award-year { font: 600 14px var(--read); letter-spacing: .04em; color: var(--brass-text); }
/* A row-level warning, e.g. a stay that may have closed */
.tag-warn { display: inline-block; font: 600 12px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--alarm); background: #F6EEE8; border: 1px solid #E5C9BB; padding: 3px 8px; border-radius: var(--radius); margin-left: 10px; white-space: nowrap; }

/* The short version: a factual summary built from our own data (2026-09-23) */
.verdict .sv-key { display: block; margin-bottom: 6px; font: 600 13px var(--read); letter-spacing: .07em; text-transform: uppercase; color: var(--secondary); }
.take-verdict { display: block; margin-top: 6px; }

/* Guest consensus in the stay rows (2026-09-23) */
.row-score { display: flex; flex-direction: column; }
.row-score .rs-num { font: 500 26px/1 var(--display); color: var(--ink); }
.row-score .rs-num small { font-size: 14px; color: var(--secondary); }
.row-score .rs-count { margin-top: 5px; font: 400 13.5px var(--read); color: var(--tertiary); }
@media (max-width: 900px) { .row-score { flex-direction: row; align-items: baseline; gap: 8px; } .row-score .cell-key { align-self: baseline; } }
@media (max-width: 900px) {
  .stay-row .row-score { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
  .row-score .rs-num { font-size: 22px; }
  .row-score .rs-count { margin-top: 0; }
}

/* Program key as filter buttons (2026-09-23) */
button.legend-item { background: none; border: 1px solid transparent; border-radius: var(--radius); padding: 5px 8px; margin: -5px -8px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; transition: border-color var(--t), opacity var(--t); }
button.legend-item:hover { border-color: var(--prog); }
button.legend-item[aria-pressed="true"] { border-color: var(--prog); background: var(--prog-tint); color: var(--ink); }
button.legend-item.is-dim { opacity: .45; }
.pager[hidden] { display: none; }

/* Header: our channels as icons, the room database as the one signup (2026-09-23) */
.nav-social { display: inline-flex; align-items: center; gap: 14px; margin-left: 4px; }
.social-ico { display: inline-flex; color: var(--ink); opacity: .9; transition: opacity var(--t); }
.social-ico:hover { opacity: 1; }
.social-ico svg { display: block; }
@media (max-width: 900px) { .nav-social { padding: 8px 0; } }

/* Experiences (2026-09-23) */
.ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ex-card { background: var(--white); border: 1px solid var(--hairline); display: flex; flex-direction: column; }
.ex-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ex-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.ex-place { font: 600 13px var(--read); letter-spacing: .07em; text-transform: uppercase; color: var(--tertiary); }
.ex-title { font: 500 26px/1.15 var(--display); text-transform: uppercase; color: var(--ink); }
.ex-body p { font: 400 17px/1.6 var(--read); color: var(--secondary); }
.ex-price { font: 400 15px var(--read); color: var(--secondary); }
.ex-fig { font: 500 24px var(--display); color: var(--ink); margin-right: 6px; }
.ex-meta { display: block; font-size: 13.5px; color: var(--tertiary); margin-top: 2px; }
.ex-stay { font: 400 15.5px var(--read); color: var(--ink); margin-top: 4px; }
@media (max-width: 760px) { .ex-grid { grid-template-columns: 1fr; } }
.ex-detail { display: block; margin-top: 6px; font: 400 14.5px/1.5 var(--read); color: var(--secondary); }

/* WHERE filters on Stays and Experiences (2026-09-23) */
.filter-block { margin-bottom: 10px; }
.filter-block .filters { padding-bottom: 12px; }
.filter-block .filters-key { min-width: 76px; }
.filter-chip[hidden], .filters[hidden], .ex-card[hidden], .filter-empty[hidden] { display: none; }
.chip-n { font: 600 12.5px var(--read); letter-spacing: 0; color: var(--tertiary); margin-left: 4px; }
.filter-chip[aria-pressed="true"] .chip-n { color: var(--green); }
.filter-chip:disabled .chip-n { color: inherit; }
.where-countries { padding-left: 12px; border-left: 2px solid var(--brass); }
.filter-empty { font: 400 17px/1.6 var(--read); color: var(--secondary); padding: 24px 0; }
.filter-empty button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.legend-item:disabled { opacity: .35; cursor: not-allowed; border-color: transparent; }
.no-js .filter-block { display: none; }
@media (max-width: 760px) { .filter-block .filters-key { min-width: 0; width: 100%; } }

/* Photo viewer (2026-09-23): opens a still's whole uncropped frame. Built by js/main.js on stay pages. */
.lightbox { border: 0; padding: 0; margin: auto; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(20, 30, 24, .92); }
.lightbox .lb-stage { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 72px 24px; box-sizing: border-box; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; display: block; border: 1px solid rgba(255, 255, 255, .15); }
.lightbox .lb-cap { font: 400 15px/1.4 var(--read); color: #E8EFE4; text-align: center; }
.lightbox .lb-count { color: var(--mint, #A8D8B5); margin-left: 10px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius); cursor: pointer; font: 500 26px/1 var(--display); width: 48px; height: 48px; transition: background-color var(--t); }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .2); }
.lightbox .lb-close { top: 12px; right: 12px; }
.lightbox .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox[data-single] .lb-prev, .lightbox[data-single] .lb-next, .lightbox[data-single] .lb-count { display: none; }
@media (max-width: 560px) {
  .lightbox .lb-stage { padding: 60px 12px 72px; }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 12px; transform: none; }
}

/* Experience cards and pages (2026-09-23): rating on the listing you would book, our own UNESCO globe,
   a gallery of square photos with the silent clip leading where we have clean footage. */
.ex-card-img { display: block; overflow: hidden; }
.ex-card-img img { transition: opacity var(--t); }
.ex-card-img:hover img { opacity: .9; }
.ex-title a { color: inherit; text-decoration: none; }
.ex-title a:hover { color: var(--green); }
.ex-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-text); background: var(--page); border: 1px solid var(--hairline); border-left: 3px solid var(--brass); padding: 4px 9px; border-radius: var(--radius); }
.ex-badge .ico-globe { width: 15px; height: 15px; color: var(--brass); }
.ex-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 400 15px var(--read); color: var(--secondary); }
.ex-rating .ico-star { width: 17px; height: 17px; color: var(--green); align-self: center; }
.ex-rating-num { font: 500 22px var(--display); color: var(--ink); }
.ex-rating-note { flex-basis: 100%; font-size: 13.5px; color: var(--tertiary); }
.ex-rating.is-none { font-size: 14.5px; color: var(--tertiary); font-style: italic; }
.ex-more { font: 600 14px var(--read); letter-spacing: .05em; text-transform: uppercase; color: var(--green); text-decoration: none; margin-top: 6px; }
.ex-more:hover { text-decoration: underline; }
.ex-main { padding: 28px 0 48px; }
.ex-main .ex-badges { margin: 10px 0 20px; }
.ex-page-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.ex-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ex-gallery.has-video { grid-template-columns: repeat(4, 1fr); }
.ex-gallery .ex-video { grid-column: span 2; grid-row: span 4; width: 100%; height: 100%; object-fit: cover; background: var(--disabled-bg); border: 1px solid var(--hairline); }
.ex-gallery a.lb { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hairline); cursor: zoom-in; }
.ex-gallery a.lb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--t); }
.ex-gallery a.lb:hover img, .ex-gallery a.lb:focus-visible img { opacity: .88; }
.ex-lede { font: 400 18px/1.65 var(--read); color: var(--ink); margin-top: 18px; }
.ex-plate .plate-foot { text-transform: none; }
.ex-facts { margin-top: 16px; background: var(--white); border: 1px solid var(--hairline); }
.ex-fact { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px 15px; border-top: 1px solid var(--hairline); font: 400 15px/1.5 var(--read); }
.ex-fact:first-child { border-top: 0; }
.ex-fact dt { color: var(--tertiary); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.ex-fact dd { margin: 0; color: var(--ink); }
.ex-rec { margin-top: 16px; background: var(--white); border: 1px solid var(--hairline); padding: 13px 15px; }
.ex-rec .label { color: var(--secondary); font-size: 13px; letter-spacing: .07em; margin-bottom: 8px; }
.ex-rec p { font: 400 15px/1.55 var(--read); color: var(--secondary); }
.ex-rec .award-line { padding: 0; border: 0; font-size: 15px; }
.ex-rec .ico-globe { width: 18px; height: 18px; color: var(--brass); flex: none; }
.ex-stay-card { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; background: var(--white); border: 1px solid var(--hairline); text-decoration: none; color: inherit; max-width: 640px; }
.ex-stay-card img { width: 140px; height: 186px; object-fit: cover; display: block; }
.ex-stay-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px 0; }
.ex-stay-rate { font: 400 15px var(--read); color: var(--secondary); }
.ex-stay-card:hover .ex-title { color: var(--green); }
@media (max-width: 900px) {
  .ex-page-grid { grid-template-columns: 1fr; }
  .ex-gallery, .ex-gallery.has-video { grid-template-columns: repeat(2, 1fr); }
  .ex-gallery .ex-video { grid-column: 1 / -1; grid-row: auto; height: auto; aspect-ratio: 9 / 16; max-height: 80vh; }
}
.ex-stay-h { margin-bottom: 14px; }
.ex-plate { --prog: var(--green); }

/* Full screen (2026-09-25): the players crop with object-fit: cover to fill their tiles, and Chrome keeps that rule
   in full screen, which cropped a vertical video to a wide screen and magnified it. Show the whole frame instead. */
video:fullscreen { object-fit: contain !important; background: #000; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
video:-webkit-full-screen { object-fit: contain !important; background: #000; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }

/* ---------- Redesign 2026-09-26: serif headlines, photo hero, trust strip, video cards ----------
   Research (11 home pages): premium sites lead with a large image plus one proof line, and set headlines in a
   serif. Oswald stays for figures and buttons; headings move to the serif, in sentence case. */
:root { --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.display-xl { font: 500 74px/1.02 var(--serif); text-transform: none; letter-spacing: -0.01em; }
.page-title { font: 500 48px/1.08 var(--serif); text-transform: none; letter-spacing: -0.005em; }
.page-title-s { font: 500 36px/1.1 var(--serif); text-transform: none; }
.steps h3, .db-card h3 { font: 500 25px/1.2 var(--serif); text-transform: none; letter-spacing: 0; }
.ex-title { font: 500 27px/1.2 var(--serif); text-transform: none; }
.section-title { font: 500 34px/1.15 var(--serif); color: var(--ink); }
.rate-plate .plate-head .plate-title { font: 500 28px/1.15 var(--serif); text-transform: none; letter-spacing: 0; }
.rate-plate.is-hero .plate-head .plate-title { font-size: 32px; }

/* Trust strip under the nav, every page */
.trust-strip { background: var(--pine); color: #E8EFE4; font: 500 13.5px var(--read); letter-spacing: .02em; }
.trust-strip .wrap { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.trust-strip span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6FCF97; margin-right: 8px; vertical-align: 2px; }
@media (max-width: 760px) { .trust-strip .wrap { gap: 4px 16px; justify-content: flex-start; } .trust-strip span:nth-child(3) { display: none; } }

/* Photo hero: our own Firenze room, dark gradient on the left for the white type, the rate plate floating right */
.hero.hero-photo { position: relative; overflow: hidden; background: #1c1a17; padding-top: 92px; padding-bottom: 92px; }
.hero-photo .hero-bg, .hero-photo .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,16,13,.82) 0%, rgba(18,16,13,.55) 42%, rgba(18,16,13,.15) 75%, rgba(18,16,13,.05) 100%); }
.hero-photo .wrap { position: relative; z-index: 1; grid-template-columns: 1.1fr .9fr; }
.hero-photo .hero-copy { color: #FFFFFF; }
.hero-photo .display-xl { color: #FFFFFF; font-size: 82px; }
.hero-photo .eyebrow.is-open { color: #A8E6BF; }
.hero-photo .body-l { color: rgba(255,255,255,.9); max-width: 520px; }
.btn-ghost { border: 1px solid rgba(255,255,255,.7); color: #FFFFFF; background: rgba(0,0,0,.15); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.hero-plate .rate-plate { box-shadow: 0 18px 50px rgba(0,0,0,.35); max-width: 440px; margin-left: auto; }
.plate-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--hairline); background: #FFFFFF; }
.chip-s { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 999px; font: 500 13px var(--read); color: var(--ink); background: var(--page); white-space: nowrap; }
.chip-s .ico-row { display: inline-flex; gap: 1px; }
.chip-s .ico { width: 12px; height: 12px; }
.chip-s .ico-key { width: 18px; height: 9px; }
.chip-s.is-score { white-space: normal; }
.chip-s.is-score strong { font: 600 15px var(--display); }
@media (max-width: 900px) {
  .hero.hero-photo { padding-top: 56px; padding-bottom: 40px; }
  .hero-photo .hero-bg img { object-position: 60% 50%; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,.7) 45%, rgba(18,16,13,.85) 100%); }
  .hero-photo .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo .display-xl { font-size: clamp(46px, 12vw, 64px); }
  .hero-plate .rate-plate { max-width: none; margin: 0; box-shadow: none; }
  /* The photo stays behind the headline only; the plate sits on the page color below it */
  .hero.hero-photo { padding-bottom: 36px; }
  .hero-plate { position: relative; }
  .hero-plate::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -32px; bottom: -40px; background: var(--page); }
  .hero-photo .hero-bg { bottom: auto; height: 800px; }
  .hero-photo .hero-bg img { object-position: 58% 62%; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(18,16,13,.35) 0%, rgba(18,16,13,.6) 30%, rgba(18,16,13,.8) 48%, rgba(18,16,13,.8) 100%); }
}

/* Featured stays as tall video cards */
.reel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.reel-card { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 4px; background: #1c1a17; color: #FFFFFF; text-decoration: none; }
.reel-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.reel-card:hover video, .reel-card:focus-visible video { transform: scale(1.04); }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.35) 42%, rgba(10,9,8,0) 70%); }
.reel-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.reel-prog { font: 600 11.5px var(--read); letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; opacity: .85; border-left: 3px solid var(--prog); padding-left: 7px; margin-bottom: 4px; }
.reel-name { font: 500 21px/1.15 var(--serif); }
.reel-city { font: 400 13.5px var(--read); opacity: .8; }
.reel-rate { font: 600 15px var(--read); margin-top: 6px; }
.reel-rate span { display: block; font-weight: 400; font-size: 12.5px; opacity: .8; }
.card-score { position: absolute; top: 12px; right: 12px; z-index: 2; font: 600 15px var(--display); background: rgba(255,255,255,.95); color: var(--ink); padding: 3px 9px; border-radius: 999px; }
.card-score small { font: 500 11px var(--read); color: var(--secondary); margin-left: 2px; }
.reel-card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.reel-pause { margin-top: 14px; background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 14px; font: 500 13px var(--read); color: var(--secondary); cursor: pointer; }
.no-js .reel-pause { display: none; }
@media (max-width: 1000px) {
  .reel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .reel-card { scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 1000px) { .reel { grid-auto-columns: 34%; } }
/* The home plate is a teaser: the closure notice and the window line stay on the stay page itself */
.hero-plate .plate-notice, .hero-plate .plate-sub, .hero-plate .cell-fx { display: none; }
.hero-plate .plate-cell { padding: 14px 16px; }

/* Catalog rows with our own footage (2026-09-26): a 3:4 thumbnail of the room leads every row */
.stay-row, .stay-rows-head { grid-template-columns: 76px minmax(0, 3.2fr) minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
.row-thumb { display: block; width: 76px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: var(--disabled-bg); }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.stay-row:hover .row-thumb img { transform: scale(1.05); }
.stay-row { padding-top: 12px; padding-bottom: 12px; }
.stay-row .stay-name a { font: 500 21px/1.25 var(--serif); border-bottom: 0; }
@media (max-width: 900px) {
  .stay-row { grid-template-columns: 92px 1fr; gap: 6px 14px; align-items: start; }
  .row-thumb { width: 92px; grid-row: span 4; }
  .stay-row .stay-name, .stay-row .row-score { grid-column: 2; }
  .stay-row > span:nth-of-type(3), .stay-row .verified { grid-column: 2; }
  .stay-row .stay-name a { font-size: 19px; }
}

/* Stay pages (2026-09-26): three big numbers above the short version, tours from the same trip, a phone price bar */
.verdict-block { margin-top: 22px; }
.key-figs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); }
.kf { padding: 14px 16px; }
.kf + .kf { border-left: 1px solid var(--hairline); }
.kf-label { font: 600 12.5px var(--read); letter-spacing: .07em; text-transform: uppercase; color: var(--tertiary); }
.kf-num { font: 500 30px/1.1 var(--serif); color: var(--ink); margin-top: 4px; }
.kf-num small { font: 500 14px var(--read); color: var(--secondary); margin-left: 2px; }
.kf-sub { font: 400 13.5px var(--read); color: var(--secondary); margin-top: 3px; }
.verdict-block .verdict { margin-top: 14px; }
@media (max-width: 560px) {
  .key-figs { grid-template-columns: 1fr; }
  .kf + .kf { border-left: 0; border-top: 1px solid var(--hairline); }
  .kf { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; }
  .kf-sub { grid-column: 1 / -1; margin-top: 0; }
  .kf-num { font-size: 26px; margin: 0; }
}
.trip-band { padding-top: 44px; padding-bottom: 48px; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.trip-card { display: block; background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; }
.trip-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s ease; }
.trip-card:hover img { transform: scale(1.03); }
.trip-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.trip-title { font: 500 21px/1.2 var(--serif); color: var(--ink); }
.trip-meta { font: 400 14.5px var(--read); color: var(--secondary); }
.stay-bar { display: none; }
@media (max-width: 760px) {
  .stay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--hairline); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .sb-text { display: flex; flex-direction: column; min-width: 0; }
  .sb-name { font: 500 16px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-price { font: 600 15px var(--read); color: var(--ink); }
  .sb-price span { font-weight: 400; font-size: 12.5px; color: var(--secondary); margin-left: 4px; }
  .sb-go { flex: none; padding: 10px 14px; }
  body:has(.stay-bar) .site-footer { padding-bottom: 88px; }
}
#the-rate { scroll-margin-top: 16px; }
.kf-num { font-size: 27px; white-space: nowrap; }

/* Room database preview (2026-09-26): the first rows of the real spreadsheet, above the fold under the signup */
.db-preview { margin: 26px 0 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; box-shadow: 0 12px 30px rgba(31,29,26,.08); }
.dbp-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F1ECE3; border-bottom: 1px solid var(--hairline); font: 500 12.5px var(--read); color: var(--secondary); }
.dbp-dot { width: 9px; height: 9px; border-radius: 50%; background: #D8CFC1; }
.dbp-file { margin-left: 8px; color: var(--ink); }
.dbp-sort { margin-left: auto; color: var(--green); font-weight: 600; }
.dbp-scroll { overflow-x: auto; position: relative; }
.db-preview table { width: 100%; border-collapse: collapse; font: 400 13.5px var(--read); min-width: 720px; }
.db-preview th { text-align: left; font: 600 11.5px var(--read); letter-spacing: .05em; text-transform: uppercase; color: var(--tertiary); padding: 9px 12px; border-bottom: 1px solid var(--hairline); background: #FBF9F5; white-space: nowrap; }
.db-preview td { padding: 8px 12px; border-bottom: 1px solid #EFE8DC; color: var(--ink); white-space: nowrap; }
.db-preview td.dbp-name { font-weight: 600; }
.db-preview tbody tr:nth-child(n+5) { opacity: .55; }
.db-preview tbody tr:nth-child(n+6) { opacity: .3; }
.db-preview tbody tr:nth-child(n+7) { opacity: .15; }
.db-preview figcaption { padding: 10px 12px; font: 400 13.5px var(--read); color: var(--secondary); border-top: 1px solid var(--hairline); }
.db-page .inner, .db-page .wrap { min-width: 0; }
.db-preview { width: 100%; max-width: 100%; min-width: 0; }
.dbp-scroll { max-width: 100%; }
.dbp-bar { flex-wrap: wrap; }
@media (max-width: 560px) { .dbp-dot { display: none; } .dbp-file { margin-left: 0; } }

/* ---------- Room database page, rebuilt 2026-09-26 to sell the signup ---------- */
.dbx-hero { background: var(--pine); color: #EEF3EC; padding: 64px 0 72px; }
.dbx-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.dbx-hero .eyebrow { color: #A8E6BF; margin-bottom: 14px; }
.dbx-title { font: 500 50px/1.08 var(--serif); color: #FFFFFF; letter-spacing: -0.01em; }
.dbx-lede { font: 400 18px/1.6 var(--read); color: rgba(238,243,236,.88); margin-top: 16px; max-width: 540px; }
.dbx-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.dbx-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font: 400 16px/1.5 var(--read); color: rgba(238,243,236,.9); }
.dbx-points strong { color: #FFFFFF; font-weight: 600; }
.ico-check { width: 22px; height: 22px; color: #6FCF97; margin-top: 1px; }
.dbx-form { margin-top: 26px; }
.dbx-form .signup-form { display: flex; gap: 0; max-width: 520px; }
.dbx-form .signup-form input[type=email] { flex: 1; min-width: 0; height: 54px; padding: 0 16px; font: 400 17px var(--read); border: 1px solid transparent; border-radius: var(--radius) 0 0 var(--radius); background: #FFFFFF; color: var(--ink); }
.dbx-form .signup-form input[type=email]:focus { outline: 3px solid #6FCF97; outline-offset: 0; }
.dbx-form .signup-form .btn { height: 54px; padding: 0 24px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 16px; white-space: nowrap; }
.dbx-micro { margin-top: 12px; font: 400 14px/1.5 var(--read); color: rgba(238,243,236,.72); max-width: 520px; }
.dbx-micro a { color: #A8E6BF; }
.dbx-visual { min-width: 0; }
.dbx-visual .db-preview { margin: 0; box-shadow: 0 30px 70px rgba(0,0,0,.35); border-color: transparent; }
.dbx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.dbx-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; padding: 22px 20px; }
.dbx-num { font: 600 13px var(--read); letter-spacing: .08em; color: var(--brass-text); }
.dbx-card h3 { font: 500 23px/1.2 var(--serif); margin: 8px 0 8px; color: var(--ink); }
.dbx-card p { font: 400 15.5px/1.6 var(--read); color: var(--secondary); }
.dbx-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dbx-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.dbx-step { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #FFFFFF; display: grid; place-items: center; font: 500 20px var(--serif); }
.dbx-steps h3 { font: 500 21px/1.25 var(--serif); color: var(--ink); }
.dbx-steps p { font: 400 15.5px/1.6 var(--read); color: var(--secondary); margin-top: 4px; }
.dbx-final { padding: 56px 0 60px; text-align: center; }
.dbx-final-title { font: 500 38px/1.15 var(--serif); color: var(--ink); }
.dbx-final .dbx-form .signup-form { margin: 0 auto; }
.dbx-final .dbx-form .signup-form input[type=email] { border-color: var(--hairline); }
.dbx-final .dbx-micro { color: var(--secondary); margin: 12px auto 0; }
@media (max-width: 1000px) {
  .dbx-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dbx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbx-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dbx-hero { padding: 40px 0 44px; }
  .dbx-title { font-size: 36px; }
  .dbx-cards { grid-template-columns: minmax(0, 1fr); }
  .dbx-form .signup-form { flex-direction: column; gap: 10px; }
  .dbx-form .signup-form input[type=email], .dbx-form .signup-form .btn { border-radius: var(--radius); width: 100%; }
  .dbx-final-title { font-size: 30px; }
}
/* compact 4-column preview (2026-09-26) */
.db-preview table { min-width: 0; }
.db-preview td { white-space: normal; vertical-align: top; }
.db-preview td small { display: block; font: 400 12px var(--read); color: var(--tertiary); margin-top: 2px; }
.db-preview td.dbp-name { font: 500 15px/1.25 var(--serif); position: relative; padding-left: 22px; }
.dbp-prog { position: absolute; left: 10px; top: 12px; width: 4px; height: 26px; border-radius: 2px; background: var(--prog, var(--hairline)); }
.db-preview td.dbp-rate { font: 600 15px var(--read); white-space: nowrap; }
.db-preview td.dbp-score { font: 600 16px var(--display); }
.db-preview tbody tr:nth-child(n+5) { opacity: .7; }
.db-preview tbody tr:nth-child(n+6) { opacity: .45; }
.db-preview tbody tr:nth-child(n+7) { opacity: .25; }
.db-preview tbody tr:nth-child(n+8) { opacity: .12; }
.db-preview td:nth-child(3) { white-space: nowrap; }
@media (max-width: 900px) {
  .stay-row { grid-template-columns: 92px minmax(0, 1fr); }
  .stay-row .row-score { white-space: normal; flex-wrap: wrap; }
  .stay-row .chip { white-space: nowrap; }
  .stay-row .row-when { display: block; white-space: normal; }
}
.stay-grid > div { min-width: 0; }
@media (max-width: 900px) {
  .stay-grid { grid-template-columns: minmax(0, 1fr); }
  .stay-row .tag-family, .stay-row .tag-best, .stay-row .tag-warn { white-space: normal; margin-left: 0; margin-top: 4px; }
}