/* THE TWO ROOMS: The Boardroom and The Private Office (Oct 6 2026). The look of each room's own page
   (the-boardroom.html, the-private-office.html), of room-apply.html and of room-offer.html (a member's own private offer
   for a seat). One room, one page: until late on Oct 6 both shared rooms.html, side by side, and JT asked for them to be
   separated ("You should have separated the two"). The side by side rules (.rooms-grid) are kept for nothing now and
   may go; .rooms--one below is what the two pages wear.

   JT, Oct 6 2026: "do we put [them] in the left menu in the portal with a lock so that people can only view one marketing
   page on it that we make look very high end and different from the rest of the portal to show exclusivity?", and "just
   be sure that The Boardroom and The Private Office are a high end and engaging experience (still the NOC brand but
   much more high end look and feel) in the portal and non portal pages".

   So these two pages are the ONE place in the portal that does not wear the Library's look, on purpose: no billboard,
   no rows of tiles, no right sidebar. A serif display face (Cormorant Garamond, Georgia behind it), ivory on near
   black, thin gold lines, and a great deal of room. Still the brand: its black, its gold, Figtree for every line that
   is read rather than announced, and the portal's own menu beside it. JT approved it as a mockup first
   (Automations/00_SYSTEM/handover/tiers-mock-2026-10-06/). Every other portal page keeps the Library's look
   (assets/css/rows.css, verify_portal_look.py); nothing here should be copied onto one of them.

   Motion is restrained: a section fades and rises once as it comes into view, and a picture warms slowly under the
   mouse. Nothing loops, nothing plays, nothing opens over the page. A member who asked their device for less motion
   gets none (the last block of this file), and with no script at all every section is simply there.

   Every class is under the `rooms` name, which nothing else in the app uses. Widths are measured against the portal's
   left menu: it takes 232px above 768px, so two rooms sit side by side only from 1101px up.
   Gate: Automations/00_SYSTEM/app_e2e/verify_rooms.py (five widths, nothing off the screen). */

/* the ground: these two pages sit on a deeper black than the portal's, edge to edge, so the page has no seam */
body.rooms-body { background: #070707; }
main#main.rooms-main { max-width: none; padding: 0; margin: 0; background: #070707; }

.rooms {
  --r-ivory: #F3EEE2; --r-gold: #E2C878; --r-line: rgba(226,200,120,0.34); --r-hair: rgba(243,238,226,0.13); --r-ink: #070707;
  --r-soft: rgba(243,238,226,0.82); --r-quiet: rgba(243,238,226,0.7);
  --r-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  background: var(--r-ink); color: var(--r-ivory); font-family: Figtree, system-ui, sans-serif; line-height: 1.6;
  min-height: calc(100vh - 120px);
}
.rooms *, .rooms *::before, .rooms *::after { box-sizing: border-box; }
/* app.css gives .btn and friends a display of their own, which beats the hidden attribute */
.rooms [hidden] { display: none !important; }
.rooms-wrap { max-width: 1180px; margin: 0 auto; padding: 0 44px; }
/* every heading here is the serif, set light: app.css sets the portal's headings bold, tight and in Figtree */
.rooms h1, .rooms h2, .rooms h3 { font-family: var(--r-serif); font-weight: 500; letter-spacing: 0; color: var(--r-ivory); text-wrap: balance; }

/* ---------------------------------------------------------------- the opening */
.rooms-hero { padding: 84px 0 70px; text-align: center; }
.rooms-eyebrow { font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--r-gold); margin: 0 0 30px; }
.rooms .rooms-hero h1 { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0 auto; max-width: 19ch; }
/* the one italic: app.css turns a title's emphasis upright, and here the slant is the point */
.rooms .rooms-hero h1 em { font-style: italic; color: var(--r-gold); }
.rooms-lede { max-width: 60ch; margin: 28px auto 0; font-size: 1.08rem; color: var(--r-soft); }
/* a thin gold line, drawn from its middle outwards the first time it is seen */
.rooms-rule { height: 1px; background: var(--r-line); border: 0; margin: 0; }

/* ---------------------------------------------------------------- the two rooms */
.rooms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rooms-room { padding: 64px clamp(26px, 3.4vw, 56px) 60px; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 24px; }
.rooms-room + .rooms-room { border-left: 1px solid var(--r-line); }
.rooms-no { font-family: var(--r-serif); font-style: italic; font-size: 1.25rem; color: var(--r-gold); margin: 0 0 18px; }
.rooms-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--r-line); background: #0c0b0a; }
.rooms-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.82) contrast(1.06); }
.rooms-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0) 40%, rgba(7,7,7,0.82)); pointer-events: none; }
.rooms .rooms-room h2 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1.05; margin: 34px 0 10px; }
.rooms-say { font-family: var(--r-serif); font-style: italic; font-size: 1.42rem; line-height: 1.35; color: var(--r-gold); margin: 0 0 26px; }
.rooms-list { list-style: none; margin: 0 0 34px; padding: 0; }
.rooms-list li { padding: 15px 0; border-top: 1px solid var(--r-hair); font-size: 1.02rem; color: rgba(243,238,226,0.9); }
.rooms-list li:last-child { border-bottom: 1px solid var(--r-hair); }
.rooms-list b { color: var(--r-ivory); font-weight: 700; }
.rooms-terms { margin: auto 0 22px; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,238,226,0.6); text-wrap: balance; }

/* ---------------------------------------------------------------- one room, on its own page (.rooms--one)
   The opening names the room: its number in capitals, its name, its line in gold, its opening lines. Then the picture
   beside what a seat holds, on a computer; one under the other from 1100px down. The picture keeps the frame it had on
   the shared page (16 / 10), so nothing of it is cut that was not cut before. */
.rooms--one .rooms-hero { padding-bottom: 62px; }
.rooms--one .rooms-hero .rooms-say { margin: 20px auto 0; font-size: 1.6rem; }
/* a room's line is two or three short sentences. Each stays whole, so a narrow screen breaks the line BETWEEN sentences
   and never inside one (left to itself the phone set "Sixteen owners. One" over "table. JT at the head of it.") */
.rooms-say .rooms-sentence { display: inline-block; }
.rooms--one .rooms-lede { margin-top: 22px; }
/* the picture with the short line and the way in under it, beside what a seat holds; the second row takes whatever
   height the list adds, so the way in always sits right under the picture */
.rooms-one .rooms-room { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "art seat" "close seat"; column-gap: clamp(30px, 4.2vw, 68px); row-gap: 30px; align-items: start; padding: 64px 0 62px; }
.rooms-one .rooms-art { grid-area: art; }
.rooms-seat { grid-area: seat; min-width: 0; }
.rooms-close { grid-area: close; display: flex; flex-direction: column; min-width: 0; }
.rooms .rooms-one .rooms-room h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0 0 16px; }
.rooms-one .rooms-list { margin-bottom: 0; }
.rooms-one .rooms-terms { margin: 0 0 22px; }
/* how the room runs (the public page's own section): four parts side by side, each named in the serif */
.rooms-runs .rooms-step i { font-size: 1.4rem; line-height: 1.25; margin-bottom: 10px; }
.rooms-runs .rooms-step span { display: block; }
/* who the room is for: what fits, beside what does not */
.rooms-fit__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.rooms .rooms-fit__col h4 { font-family: var(--r-serif); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; color: var(--r-gold); margin: 0 0 14px; }
.rooms-fit__col .rooms-list { margin-bottom: 0; }
.rooms-fit__col .rooms-list a { color: var(--r-gold); text-decoration: underline; text-underline-offset: 3px; }
/* the other room, named once at the foot: its number, its name, its line, and the way to its own page */
.rooms-other { padding: 62px 0 66px; text-align: center; }
.rooms-other .rooms-no { margin-bottom: 8px; }
.rooms .rooms-other h3 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; margin: 0 0 12px; }
.rooms-other .rooms-say { margin: 0 auto 28px; }

/* the way in. A filled gold pill, and its outline twin (the other room, a way back). */
.rooms-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; align-self: flex-start;
  padding: 17px 34px; border: 1px solid var(--r-gold); border-radius: 999px; color: var(--r-ink); background: var(--r-gold);
  font-family: inherit; font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.rooms-apply:hover { background: #EDD899; border-color: #EDD899; color: var(--r-ink); }
.rooms-apply--line { background: transparent; color: var(--r-gold); }
.rooms-apply--line:hover { background: rgba(226,200,120,0.12); border-color: var(--r-gold); color: var(--r-gold); }
.rooms-apply[disabled] { opacity: 0.55; cursor: default; }
.rooms-apply .rooms-arrow { display: inline-block; transition: transform 0.35s ease; }
.rooms-apply:hover .rooms-arrow { transform: translateX(4px); }

/* where a room's button sits, and what stands there in its place once the member has applied. The height is held from
   the start, so nothing moves when the member's own standing arrives from the API. */
.rooms-stand { min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; }
.rooms-received { margin: 0; font-family: var(--r-serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--r-gold); }
.rooms-received::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--r-gold); vertical-align: middle; margin-right: 14px; }
.rooms-aside { margin: 0; font-size: 0.92rem; color: var(--r-quiet); }

/* ---------------------------------------------------------------- how a seat is given */
.rooms-how { padding: 66px 0 70px; }
.rooms .rooms-how h3 { font-size: 2.1rem; margin: 0 0 34px; text-align: center; }
.rooms-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rooms-step { padding: 0 26px; border-left: 1px solid var(--r-line); min-width: 0; }
.rooms-step:first-child { border-left: 0; padding-left: 0; }
.rooms-step i { font-family: var(--r-serif); font-style: italic; font-size: 1.9rem; color: var(--r-gold); display: block; margin-bottom: 8px; }
.rooms-step b { display: block; font-size: 1.02rem; margin-bottom: 6px; color: var(--r-ivory); }
.rooms-step span { font-size: 0.95rem; color: rgba(243,238,226,0.75); }
.rooms-foot { padding: 38px 0 60px; margin: 0; text-align: center; font-size: 0.98rem; color: var(--r-quiet); text-wrap: balance; }
.rooms-foot a, .rooms-textlink { color: var(--r-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ the application (room-apply.html)
   One question at a time, in a single calm column: it should feel like applying to something, not like filling in a
   form. No boxes: a question in the serif, and a line to write on. */
.rooms--apply .rooms-wrap { max-width: 800px; }
.rooms-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 0 0; }
.rooms-back { color: var(--r-quiet); font-size: 0.86rem; letter-spacing: 0.04em; text-decoration: none; transition: color 0.3s ease; }
.rooms-back:hover { color: var(--r-gold); }
.rooms-saved { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(243,238,226,0.55); min-height: 1em; }
.rooms-saved[data-state="failed"] { color: #F0B9A8; letter-spacing: 0.08em; text-transform: none; font-size: 0.82rem; }
.rooms-apphead { padding: 46px 0 34px; text-align: center; }
.rooms-apphead .rooms-eyebrow { margin-bottom: 18px; }
.rooms .rooms-apphead h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
/* While the questions are being answered the room's name steps back to one small line, so the question and its answer
   have the screen (on a 1366 x 768 laptop the full head left room for two of a question's six choices). The head is
   whole again on the opening and on the closing page. */
.rooms--apply.is-asking .rooms-apphead { padding: 20px 0 16px; }
.rooms--apply.is-asking .rooms-apphead .rooms-eyebrow { display: none; }
.rooms.rooms--apply.is-asking .rooms-apphead h1 { font-size: 1.5rem; font-style: italic; color: var(--r-gold); letter-spacing: 0; }
.rooms--apply.is-asking .rooms-stage { padding-top: 40px; }

/* how far along: a hair of gold on a hair of ivory, and the count in words */
.rooms-progress { height: 1px; background: var(--r-hair); position: relative; }
.rooms-progress i { position: absolute; left: 0; top: -0.5px; height: 2px; background: var(--r-gold); width: 0; transition: width 0.7s cubic-bezier(.22,.61,.36,1); }

.rooms-stage { padding: 54px 0 80px; min-height: 420px; }
.rooms-count { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--r-gold); margin: 0 0 22px; }
.rooms .rooms-ask { font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.14; margin: 0 0 14px; }
.rooms-ask label { cursor: text; }
.rooms-note { font-size: 1rem; color: var(--r-quiet); margin: 0 0 6px; max-width: 58ch; }
.rooms-lines { font-size: 1.08rem; color: var(--r-soft); margin: 0 0 14px; max-width: 58ch; }

/* the line to write on */
.rooms-field { margin: 30px 0 0; }
.rooms .rooms-input {
  display: block; width: 100%; background: transparent; color: var(--r-ivory); border: 0; border-bottom: 1px solid var(--r-line); border-radius: 0;
  padding: 12px 0 14px; font: inherit; font-size: 1.28rem; line-height: 1.5; outline: none; box-shadow: none; resize: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.rooms textarea.rooms-input { min-height: 132px; overflow: hidden; }
.rooms .rooms-input::placeholder { color: rgba(243,238,226,0.34); }
/* the focus is the line itself turning gold and gaining weight: a ring round a field with no box would draw a box */
.rooms .rooms-input:focus, .rooms .rooms-input:focus-visible { outline: none; border-radius: 0; border-bottom-color: var(--r-gold); box-shadow: 0 1px 0 0 var(--r-gold); }

/* a question answered by picking: the choices as lines, like the lists on the rooms page */
.rooms-picks { border: 0; margin: 30px 0 0; padding: 0; min-width: 0; }
/* each choice holds its own radio button, which is there for the keyboard and a screen reader and never drawn: kept
   inside its line, so it can never sit somewhere off the page and widen it */
.rooms-pick { position: relative; display: flex; align-items: center; gap: 16px; padding: 13px 4px; border-top: 1px solid var(--r-hair); cursor: pointer;
  font-size: 1.1rem; color: rgba(243,238,226,0.86); transition: color 0.25s ease, background 0.25s ease; min-height: 52px; }
.rooms-pick:last-of-type { border-bottom: 1px solid var(--r-hair); }
.rooms-pick:hover { color: var(--r-ivory); background: rgba(243,238,226,0.03); }
.rooms-pick input { position: absolute; left: 4px; top: 50%; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rooms-pick__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--r-line); position: relative; transition: border-color 0.25s ease; }
.rooms-pick__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--r-gold); transform: scale(0); transition: transform 0.3s cubic-bezier(.22,.61,.36,1); }
.rooms-pick.is-on { color: var(--r-gold); }
.rooms-pick.is-on .rooms-pick__dot { border-color: var(--r-gold); }
.rooms-pick.is-on .rooms-pick__dot::after { transform: scale(1); }
/* reached with the keyboard, the choice in hand wears a ring round its mark (a box round the whole line shouted) */
.rooms-pick input:focus-visible + .rooms-pick__dot { outline: 2px solid var(--r-gold); outline-offset: 3px; }

.rooms-err { margin: 16px 0 0; font-size: 0.95rem; color: #F0B9A8; }
.rooms-nav { display: flex; align-items: center; gap: 22px; margin: 40px 0 0; flex-wrap: wrap; }
.rooms-nav .rooms-apply { align-self: center; }
/* on a computer a question's two buttons stay in sight at the foot of the screen, however long its choices or its answer
   run, fading the page out behind them. A phone scrolls to them: its keyboard owns the foot of its screen. */
@media (min-width: 769px) {
  .rooms-nav--stick { position: sticky; bottom: 0; z-index: 2; margin-top: 16px; padding: 24px 0 26px;
    background: linear-gradient(180deg, rgba(7,7,7,0) 0, var(--r-ink) 40%); }
}
/* a quiet button: words only (Back, Change) */
.rooms .rooms-quiet { background: none; border: 0; padding: 10px 2px; margin: 0; font: inherit; font-size: 0.95rem; color: var(--r-quiet); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(243,238,226,0.28); text-underline-offset: 4px; transition: color 0.3s ease; }
.rooms .rooms-quiet:hover { color: var(--r-gold); }

/* the review: every answer, read once before it is sent */
.rooms-review { list-style: none; margin: 34px 0 0; padding: 0; }
.rooms-review li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 20px 0; border-top: 1px solid var(--r-hair); align-items: start; }
.rooms-review li:last-child { border-bottom: 1px solid var(--r-hair); }
.rooms-review__q { grid-column: 1; font-size: 0.88rem; line-height: 1.45; color: var(--r-gold); margin: 0; }
.rooms-review__a { grid-column: 1; margin: 0; font-size: 1.06rem; color: var(--r-ivory); white-space: pre-wrap; overflow-wrap: anywhere; }
.rooms-review__a.is-empty { color: rgba(243,238,226,0.5); font-style: italic; }
.rooms-review li .rooms-quiet { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* the closing state: sent */
.rooms-done { text-align: center; padding: 30px 0 40px; }
/* two ways on, side by side (which room, when the page was opened without one) */
.rooms-choose { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0 0 34px; }
.rooms-choose .rooms-apply { align-self: center; }
.rooms .rooms-done h2 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 0 26px; }
.rooms-done .rooms-rule { width: 120px; margin: 0 auto 28px; }
.rooms-done .rooms-lines { margin-left: auto; margin-right: auto; }
.rooms-done .rooms-apply { margin-top: 26px; }

/* ================================================================ the private offer (room-offer.html)
   One member's own offer for a seat: the same calm column as the application, read from the top down. What the seat
   holds, the day the year starts, the price and the ways to pay, the tick, the button, then Stripe's own form in the
   page. No amount is written in the page or here: every one arrives from the API. */
.rooms--offer .rooms-wrap { max-width: 860px; }
.rooms--offer .rooms-apphead { padding-bottom: 30px; }
.rooms-offer__say { margin: 16px 0 0; text-wrap: balance; }
.rooms--offer .rooms-stage { padding-top: 46px; min-height: 0; }
.rooms-offer__lede { font-size: 1.12rem; max-width: 60ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.rooms-offer__part { padding: 52px 0 0; }
.rooms .rooms-offer__part h2 { font-size: clamp(1.9rem, 3.3vw, 2.6rem); line-height: 1.12; margin: 0 0 20px; }
.rooms .rooms-offer__part h2 span { color: var(--r-gold); }
.rooms-offer__part .rooms-list { margin-bottom: 0; }
.rooms-offer__part .rooms-lines { max-width: 64ch; }
/* a way to pay: the choice on the left, what it costs on the right, in the serif */
.rooms--offer .rooms-picks { margin-top: 26px; }
.rooms--offer .rooms-picks legend { padding: 0; margin: 0 0 14px; }
.rooms-plan__label { flex: 1 1 auto; min-width: 0; }
.rooms-plan__each { flex: none; font-family: var(--r-serif); font-size: 1.5rem; line-height: 1.1; color: var(--r-ivory); white-space: nowrap; text-align: right; }
.rooms-plan__each small { font-family: Figtree, system-ui, sans-serif; font-size: 0.82rem; color: var(--r-quiet); margin-left: 4px; }
.rooms-pick.is-on .rooms-plan__each { color: var(--r-gold); }
.rooms-picks[disabled] .rooms-pick { cursor: default; }
.rooms-picks[disabled] .rooms-pick:hover { background: none; color: rgba(243,238,226,0.86); }
.rooms-offer__note { margin: 20px 0 0; max-width: 64ch; }
.rooms-offer__note + .rooms-offer__note { margin-top: 10px; }
.rooms-offer__terms { margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--r-hair); }
.rooms-offer__terms .rooms-lines:last-child { margin-bottom: 0; }
/* the tick for the Terms: the browser's own box, in gold, with its words beside it */
.rooms-agree { display: flex; gap: 14px; align-items: flex-start; margin: 30px 0 0; font-size: 1rem; line-height: 1.5; color: var(--r-soft); cursor: pointer; max-width: 64ch; }
.rooms .rooms-agree input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: #E2C878; cursor: pointer; }
.rooms-agree a { color: var(--r-gold); text-decoration: underline; text-underline-offset: 3px; }
.rooms-offer__fine { margin-top: 16px; }
/* Stripe's form sits in the page, in a thin gold frame once it is there */
.rooms-offer__checkout { margin: 34px 0 0; scroll-margin-top: 24px; }
.rooms-offer__checkout:empty { margin: 0; }
.rooms-offer__checkout > p { margin: 0; }
/* the seat, once it is paid for */
.rooms-offer__done { padding: 6px 0 0; }
.rooms-offer__done .rooms-lines { margin-bottom: 10px; }
.rooms-offer__back { margin: 46px 0 0; text-align: center; }
.rooms-offer__back .rooms-apply { align-self: center; }
/* an admin looking at a member's offer */
.rooms-preview { margin: 22px 0 0; padding: 12px 18px; border: 1px solid var(--r-line); color: var(--r-gold); font-size: 0.92rem; text-align: center; }

/* ---------------------------------------------------------------- narrower screens
   The left menu takes 272px above 768px, so the room for the page is the screen less 320px there. */
@media (max-width: 1320px) {
  .rooms-wrap { padding: 0 28px; }
}
@media (max-width: 1100px) {
  .rooms-hero { padding: 64px 0 54px; }
  .rooms-grid { grid-template-columns: minmax(0, 1fr); }
  .rooms-room { padding: 48px 0 50px; }
  .rooms-one .rooms-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "art" "seat" "close"; row-gap: 34px; padding: 48px 0 50px; }
  .rooms-fit__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rooms-other { padding: 50px 0 54px; }
  .rooms-room + .rooms-room { border-left: 0; border-top: 1px solid var(--r-line); }
  .rooms-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .rooms-step:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 768px) {
  /* the phone: the portal's bar is fixed along the top, so a part of the page that is jumped to lands below it */
  .rooms-wrap { padding: 0 18px; }
  .rooms-room { scroll-margin-top: 78px; }
  .rooms-hero { padding: 52px 0 46px; }
  .rooms-apply { align-self: stretch; padding-left: 20px; padding-right: 20px; }
  .rooms-stand { align-items: stretch; }
  .rooms-apphead { padding: 34px 0 28px; }
  .rooms-stage { padding: 40px 0 64px; min-height: 0; }
  .rooms-nav { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .rooms-nav .rooms-apply { align-self: stretch; }
  .rooms-nav .rooms-quiet { align-self: center; }
  .rooms-choose { flex-direction: column; }
  .rooms-choose .rooms-apply { align-self: stretch; }
  .rooms-progress { scroll-margin-top: 84px; }
  .rooms-offer__part { padding-top: 42px; }
  .rooms-offer__checkout { scroll-margin-top: 84px; }
  .rooms-offer__back .rooms-apply { display: flex; }
}
@media (max-width: 600px) {
  .rooms-eyebrow { font-size: 0.68rem; letter-spacing: 0.24em; }
  /* two lines, each inside the screen at 360 and 390 wide */
  .rooms .rooms-hero h1 { font-size: clamp(2rem, 10.2vw, 2.9rem); }
  .rooms-lede { font-size: 1.02rem; }
  .rooms-say { font-size: 1.3rem; }
  .rooms--one .rooms-hero .rooms-say { font-size: 1.36rem; }
  .rooms-terms { letter-spacing: 0.16em; font-size: 0.7rem; }
  .rooms-steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .rooms-step { border-left: 0; padding: 0; }
  .rooms .rooms-input { font-size: 1.14rem; }
  .rooms-pick { font-size: 1.04rem; gap: 14px; }
  .rooms-review li { grid-template-columns: minmax(0, 1fr); }
  .rooms-review li .rooms-quiet { grid-column: 1; grid-row: auto; justify-self: start; padding-left: 0; }
  .rooms-plan__each { font-size: 1.3rem; }
  .rooms-plan__each small { display: block; margin: 2px 0 0; }
}

/* ---------------------------------------------------------------- motion, and none for those who ask for none
   js adds .rooms--motion only when the browser can tell it what is in view AND the member has not asked for less
   motion. Without it nothing is ever hidden. */
.rooms--motion .rooms-rise { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); transition-delay: var(--rooms-wait, 0ms); }
.rooms--motion .rooms-rise.is-in { opacity: 1; transform: none; }
.rooms--motion .rooms-rule.rooms-rise { opacity: 1; transform: scaleX(0); transform-origin: 50% 50%; transition: transform 1.6s cubic-bezier(.22,.61,.36,1); }
.rooms--motion .rooms-rule.rooms-rise.is-in { transform: scaleX(1); }
.rooms--motion .rooms-art img { transition: transform 2.4s cubic-bezier(.22,.61,.36,1), filter 1.6s ease; }
.rooms--motion .rooms-room:hover .rooms-art img { transform: scale(1.035); filter: saturate(0.98) contrast(1.06); }
/* a question arriving: the same quiet rise, quicker */
.rooms--motion .rooms-step-in { animation: roomsStepIn 0.6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes roomsStepIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rooms .rooms-rise, .rooms .rooms-rule.rooms-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rooms .rooms-step-in { animation: none !important; }
  .rooms .rooms-art img, .rooms-apply, .rooms-apply .rooms-arrow, .rooms-progress i, .rooms-pick__dot::after { transition: none !important; }
  .rooms .rooms-room:hover .rooms-art img { transform: none; }
}