/* ---------------------------------------------------------------------
   marketing.css - the brochure site (update 331)
   ---------------------------------------------------------------------

   A SEPARATE STYLESHEET AND NOT PART OF styles.css, for the same reason
   tour.css is separate: nobody who is not looking at the brochure should
   download a line of it, and - more to the point here - nobody looking at
   the brochure should download styles.css. That file is five thousand
   lines describing a calendar, a room editor, a draft and a people table,
   none of which exist on this page, and this is the one page in Roomee
   where load time is a business concern rather than a nicety.

   IT IS LOADED ALONE. Unlike tour.css, which sits on top of styles.css,
   these pages load nothing else - so this file has to restate the things
   :root would otherwise have given it. That is the block immediately
   below, and it is the ONLY thing duplicated between the two stylesheets.

   EVERY CLASS IS PREFIXED m-. The two stylesheets are never loaded
   together today, so a collision could not currently bite - but "never
   loaded together" is a fact about today, and Roomee has lost time to a
   CSS class name collision twice already. A prefix costs nothing and
   removes the question.

   IF THE COLOURS CHANGE IN styles.css THEY MUST CHANGE HERE. There is no
   mechanism that would notice. The alternative - a third file holding only
   the variables, imported by both - was considered and rejected: an
   @import is a second blocking request on the critical path of the one
   page that must be fast, and it would put a file in public/ whose job is
   invisible from either end.
--------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Sampled directly from the logo. THE SAME VALUES AS styles.css - see
     the note above. IBM Plex Mono is imported above because the media
     placeholders name their own missing files in it; if those ever go, so
     can the font. */
  --pine: #39483A;
  --pine-dark: #2B372C;
  --brass: #A89878;
  --brass-deep: #857552;

  --bg: #F6F4ED;
  --card: #FFFFFF;
  --ink: #262E27;
  --ink-soft: #5A655B;
  --line: #E3DFD3;
  --sage: #4F7A6B;

  --radius: 10px;

  /* logo 44px + 14px padding top and bottom + 1px border, matching the
     app's --topnav-h so the two headers are the same height when somebody
     moves between them. */
  --m-nav-h: 73px;

  /* The brochure's own reading width. WIDER THAN THE APP'S 1080px
     .container, deliberately: the app is a dense two-column tool and this
     is a page of pictures and headlines, which look cramped at a width
     chosen for forms. */
  --m-wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 17px BASE, NOT THE APP'S 15px. The app is used at arm's length by
   somebody doing a task and packs a lot in; this is read once by somebody
   deciding whether to bother, and the median reader in this market is
   nearer sixty than thirty. */

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--pine-dark);
  font-weight: 600;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

/* clamp() RATHER THAN A MEDIA QUERY for the display sizes. Three
   breakpoints for a headline is three places to get out of step, and the
   headline has to look deliberate at every width between them rather than
   at three of them. */
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }
a { color: var(--pine); }

.m-wrap {
  max-width: var(--m-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.m-mono { font-family: 'IBM Plex Mono', monospace; }
.m-centre { text-align: center; }
.m-quiet { color: var(--ink-soft); }

.m-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.m-lede.m-centre { margin-left: auto; margin-right: auto; }

/* Visually hidden, but read aloud. The plan rows carry "Included:" and
   "Not included:" this way, so a screen reader hears the meaning the tick
   and the cross carry visually rather than hearing "check mark". */
.m-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Test banner
--------------------------------------------------------------------- */

/* THE SAME STRIP THE APP DRAWS, restated here for the same reason the
   colours are. A brochure page on test.getroomee.com that looked live
   would be the single easiest thing to mistake for the real site, and the
   red bar is the detector for a mis-set ENV_NAME on public-prod as well -
   see the note in index.ts. */
.m-test-banner {
  background: #9E4630;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
}

/* ---------------------------------------------------------------------
   Header
--------------------------------------------------------------------- */

.m-nav {
  background: var(--pine);
  border-bottom: 1px solid var(--pine-dark);
}
.m-nav-in {
  max-width: var(--m-wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--m-nav-h);
}
.m-brand { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
.m-brand img { height: 44px; width: auto; display: block; }

/* margin-left: auto ON THE LINKS, NOT justify-content: space-between on
   the row (update 331b). This is what puts the logo hard left and gathers
   the links and the two buttons together at the right; space-between with
   three children would strand the links in the middle, reading as a third
   group rather than as one set of controls.
   ~
   THEY MOVED FROM THE LEFT AT 331b. Beside the logo they read as part of
   the wordmark and had to fight it for attention; on the right they sit
   with Log in and Sign up, which is where a reader looks for somewhere to
   go. Note the DOM order is unchanged - logo, links, buttons - so the tab
   order still runs left to right across the bar. */
.m-nav-links {
  display: flex;
  /* 18px, MATCHING .nav-links IN styles.css (332c). This header has two
     links rather than six and does not need the room - it is here because
     the two bars sit either side of a sign-in, and somebody moving between
     them notices when they disagree. */
  gap: 18px;
  margin-left: auto;
  /* A WIDER GAP TO THE BUTTONS THAN BETWEEN THE LINKS THEMSELVES. The row
     already carries a 24px gap, which is within two pixels of the 22px
     between Features and Pricing - so without this the four controls read
     as one undifferentiated run and "Pricing" and "Log in" look like the
     same kind of thing. 10px more is enough to separate them without
     opening a hole. */
  margin-right: 10px;
  min-width: 0;
}
/* THESE ARE DELIBERATELY NOT .nav-links' COLOURS, AND 331a TRIED THAT
   (update 331b).
   ~
   The reasoning at 331a was that the two headers meet when somebody logs
   in, so they should match to the shade. That was right about the goal and
   wrong about which values reach it. The app's links are a muted
   rgba(246, 244, 237, 0.72) because they sit BESIDE a person's name and
   two pills and are one of six things competing on that bar; here there
   are two of them, next to a brass Sign up button, on a bar that is
   otherwise empty. The same value that reads as calm in the app reads as
   half-disabled here.
   ~
   SO THEY ARE FULL-STRENGTH #EFEBE0 AT 15px, and the active state is a
   brass UNDERLINE rather than brass text - which the app has no need of,
   because the app's active link is never adjacent to a brass button it
   would then be confused with.
   ~
   IF THIS IS REVISITED, the thing to hold onto is that matching the
   BAR - the green, the height, the logo treatment - is what makes the two
   headers feel like one product. Matching the link colours as well was a
   step past that, and it looked wrong. */
.m-nav-links a {
  color: #EFEBE0;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.m-nav-links a:hover { color: #fff; }
.m-nav-links a.is-on { border-bottom-color: var(--brass); color: #fff; }

.m-nav-cta { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */

/* THESE ARE ANCHORS, NOT BUTTONS, everywhere on the brochure - every one
   of them navigates, and none of them submits anything. That is why there
   is no font-family: inherit and no border reset of the kind styles.css
   needs for .btn: an anchor inherits from body and has no UA styling to
   undo. */
.m-btn {
  display: inline-block;
  background: var(--brass);
  color: var(--pine-dark);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: 9px 18px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.m-btn:hover { background: #B9AA8B; border-color: #B9AA8B; }
.m-btn:active { transform: translateY(1px); }

.m-btn-ghost {
  background: transparent;
  color: #EFEBE0;
  border-color: rgba(246, 244, 237, 0.45);
}
.m-btn-ghost:hover { background: rgba(246, 244, 237, 0.12); border-color: #EFEBE0; color: #fff; }

.m-btn-lg { padding: 13px 26px; font-size: 17px; border-radius: 12px; }

/* A GHOST BUTTON ON A LIGHT SECTION IS A DIFFERENT COLOUR, and this is the
   one rule that would be wrong if it were left to the base .m-btn-ghost
   above. On the green header and the deep band, ghost means "pale outline
   on dark". On the cream hero and the plan cards it has to mean "green
   outline on light", or it disappears. Scoped by the section rather than
   by a second class, so no call site has to remember which it is on. */
.m-hero .m-btn-ghost,
.m-head .m-btn-ghost,
.m-final .m-btn-ghost {
  color: var(--pine);
  border-color: rgba(57, 72, 58, 0.35);
  background: transparent;
}
/* .m-plan WAS IN BOTH OF THESE LISTS UNTIL 355 and is not any more: the
   plan cards carried a ghost button each, and 355 took all three off in
   favour of one CTA at the head of the page. A selector matching nothing
   costs no pixels and is worse than one that does - it is read as
   evidence the element still exists. If a button ever returns to a card,
   put .m-plan back in both lists in the same edit; the reason it needs
   its own case is that "ghost" means light-on-dark everywhere except the
   cream hero, the page heads and the cards, where it has to mean a green
   outline on light or it disappears. */
.m-hero .m-btn-ghost:hover,
.m-head .m-btn-ghost:hover,
.m-final .m-btn-ghost:hover {
  background: rgba(57, 72, 58, 0.06);
  border-color: var(--pine);
  color: var(--pine-dark);
}

.m-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 10px; }
.m-centre-row { justify-content: center; }
.m-cta-note { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */

.m-hero {
  /* A soft wash rather than a flat block, so the fold has a horizon
     without needing an image behind the words. */
  background:
    radial-gradient(1200px 420px at 12% -8%, rgba(79, 122, 107, 0.14), transparent 65%),
    linear-gradient(180deg, #FBFAF5 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 6vw, 84px) 0;
}
.m-hero-in {
  display: grid;
  /* minmax(0, ...) ON BOTH TRACKS, not bare fractions. A grid item's
     minimum is its content, so a wide image or a long unbroken word sets
     the column's floor and overflows the page rather than shrinking - the
     same trap the app's grids carry the same fix for. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.m-hero-words h1 { margin-bottom: 0.35em; }
.m-hero-media { min-width: 0; }

/* THE PLAY BUTTON ONLY EXISTS FOR SOMEBODY WHO ASKED FOR REDUCED MOTION
   (332). It ships hidden and is revealed by script, so a visitor with no
   JavaScript sees an autoplaying video and no dead control - the same
   rule the carousel arrows follow. Centred over the poster rather than
   beside it, because it is an invitation to play what is already there
   rather than a separate action. */
.m-hero-media { position: relative; }
.m-hero-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--brass);
  color: var(--pine-dark);
  border: 1px solid var(--brass);
  border-radius: 12px;
  padding: 12px 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(43, 55, 44, 0.75);
}
.m-hero-play:hover { background: #B9AA8B; border-color: #B9AA8B; }

.m-hero-video,
.m-hero-media .m-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -22px rgba(43, 55, 44, 0.5);
  background: var(--card);
}

/* ---------------------------------------------------------------------
   Pillars
--------------------------------------------------------------------- */

.m-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 26px;
  padding-top: clamp(40px, 5vw, 68px);
  padding-bottom: clamp(40px, 5vw, 68px);
}
/* minmax(min(100%, 250px), 1fr) IS THE ONE-LINE RESPONSIVE GRID and the
   min() is what makes it safe. auto-fit with a bare 250px floor overflows
   any viewport narrower than 250px plus the padding; wrapping it in
   min(100%, ...) lets the track collapse to the container instead. */
.m-pillar h2 { font-size: 1.2rem; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; }
.m-pillar p { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   Bands
--------------------------------------------------------------------- */

.m-band {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(44px, 6vw, 84px) 0;
}
.m-band-deep {
  background: var(--pine);
  border-color: var(--pine-dark);
  color: #EFEBE0;
}
.m-band-deep h2 { color: #fff; }
.m-band-deep .m-lede { color: rgba(239, 235, 224, 0.82); }

.m-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.m-demo-media { min-width: 0; }
.m-demo-media .m-shot,
.m-demo-media .m-shot-missing {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px -24px rgba(43, 55, 44, 0.5);
}

/* ---------------------------------------------------------------------
   Screenshot rail
--------------------------------------------------------------------- */

.m-shots { padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(30px, 4vw, 56px); }

.m-rail-wrap { position: relative; margin-top: 24px; }

/* THE CAROUSEL IS SCROLL-SNAP AND NEEDS NO JAVASCRIPT. Swipe on a phone,
   two-finger scroll on a trackpad, arrow keys once it has focus. The two
   buttons are an enhancement on top and are hidden until a script reveals
   them - see the note beside them in marketing.ts. */
.m-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0 18px;
  /* THE MOMENTUM AND THE HIDDEN SCROLLBAR ARE SEPARATE THINGS and only the
     scrollbar is cosmetic. Leaving a live scrollbar under a row of
     screenshots reads as an accident on a desktop, where the arrows do the
     job instead; the strip is still scrollable by every other means. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-rail::-webkit-scrollbar { display: none; }
.m-rail:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 8px; }

.m-rail-item {
  /* flex: 0 0 auto IS REQUIRED, not tidiness: flex items shrink by
     default, so without it six screenshots would compress to fit the
     viewport and nothing would scroll at all. */
  flex: 0 0 auto;
  width: min(560px, 82vw);
  scroll-snap-align: start;
}
.m-rail-item figure { margin: 0; }
.m-rail-item figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.m-rail-item .m-shot,
.m-rail-item .m-shot-missing {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 14px 30px -22px rgba(43, 55, 44, 0.5);
}

.m-rail-btn {
  position: absolute;
  top: calc(50% - 34px);
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--pine-dark);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(43, 55, 44, 0.45);
  /* A REAL BUTTON, so these four undo the UA stylesheet rather than
     starting from nothing. font-family in particular: a button does not
     inherit it. */
  font-family: 'Inter', system-ui, sans-serif;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.m-rail-btn:hover { border-color: var(--brass-deep); }
.m-rail-prev { left: -18px; }
.m-rail-next { right: -18px; }

/* NO ARROWS ON A NARROW SCREEN. There is nowhere outside the rail to put
   them, and a phone has swipe, which is better than either. */
@media (max-width: 900px) {
  .m-rail-btn { display: none; }
}

/* The placeholder that stands in for a screenshot until the bucket exists.
   It states its own filename so that the deployed page IS the shot list. */
.m-shot-missing {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: repeating-linear-gradient(
    45deg,
    #EFEDE4,
    #EFEDE4 12px,
    #E8E5D9 12px,
    #E8E5D9 24px
  );
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
  padding: 16px;
}
.m-shot-missing .m-mono { font-size: 13px; color: var(--pine-dark); }

.m-shot { display: block; height: auto; }

/* ---------------------------------------------------------------------
   Why
--------------------------------------------------------------------- */

.m-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 28px;
  margin-top: 34px;
}
.m-why-item h3 { color: var(--pine-dark); }
.m-why-item p { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   Final CTA
--------------------------------------------------------------------- */

/* THE CLOSING CALL TO ACTION'S HEADING BREAKS WHERE THE COPY BREAKS
   (331n). COPY.finalCtaTitle carries a newline; pre-line is what honours
   it, and unlike pre it still wraps normally when the second line is too
   long for a phone.
   ~
   IT IS A CLASS RATHER THAN A RULE ON .m-final h2 because the same
   heading appears in a .m-band-deep on the features and pricing pages,
   and three selectors for one string is how two of them drift. */
.m-cta-title { white-space: pre-line; }

.m-final {
  text-align: center;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.m-final p { color: var(--ink-soft); max-width: 56ch; margin-left: auto; margin-right: auto; }
/* The buttons are in a .m-cta-row now that there are two of them (331a),
   and as of 331v they are the last thing in the section - the trial note
   that used to sit under them has gone, so this carries the bottom
   spacing rather than only the top. */
.m-final .m-cta-row { margin-top: 18px; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Page heads (features, pricing, legal)
--------------------------------------------------------------------- */

.m-head {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
.m-head.m-centre .m-lede { margin-left: auto; margin-right: auto; }

/* A PAGE HEAD WITH SOMETHING BESIDE THE TEXT (355a). /pricing only.
   ~
   A MODIFIER RATHER THAN A CHANGE TO .m-head. /features and both legal
   pages use the base class and have nothing to put alongside their
   words; turning .m-head itself into a flex row would be three pages
   altered to move one button, and two of those three are the documents
   it is least worth being clever with.
   ~
   align-items: flex-end IS WHAT "LEVEL WITH THE BLURB" MEANS HERE. The
   left column is a heading and a paragraph of variable length, so there
   is no shared baseline to align to - aligning the BOTTOMS puts the CTA
   against the foot of the lede whatever the headline wraps to. The note
   is the last thing in the aside, so it is the note that lands level and
   the button that sits just above it, which is the right way round: the
   button should read as an answer to the sentence, not as a caption
   under it.
   ~
   THE WRAP IS flex-basis, NOT A MEDIA QUERY. 420px is roughly where the
   lede stops holding a readable line beside a button; below it the aside
   drops underneath and goes full width, left-aligned, which is exactly
   what 355 shipped. One number decides it and it is in the same rule as
   the layout it governs - no breakpoint to keep in step with the grid in
   .m-plans, which has its own.
   ~
   min-width: 0 ON THE LEFT COLUMN, as every grid and flex child in this
   file carries: a long unbroken word in a headline would otherwise set
   the column's floor and push the aside off the page. */
.m-head-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
}
.m-head-split .m-head-main { flex: 1 1 420px; min-width: 0; }
.m-head-split .m-head-main .m-lede { margin-bottom: 0; }
.m-head-split .m-head-aside { flex: 0 0 auto; }
.m-head-split .m-head-aside .m-cta-note { margin: 10px 0 0; }

/* ---------------------------------------------------------------------
   Features
--------------------------------------------------------------------- */

.m-fgroup { padding: clamp(26px, 3.5vw, 46px) 24px; }

/* THE FIRST GROUP SITS STRAIGHT UNDER THE PAGE HEAD (331r). .m-head ends
   with up to 36px of padding and .m-fgroup opens with up to 46px of its
   own, so the features page had over eighty pixels of nothing between its
   opening paragraph and "The bedrooms" - which reads as a missing section
   rather than as breathing room.
   ~
   AN ADJACENT-SIBLING SELECTOR RATHER THAN :first-of-type, because
   .m-head is itself a section and would have matched it. It also scopes
   the rule to exactly the one place it is wanted: /pricing's head is
   followed by .m-plans and the legal pages' by .m-prose, so neither is
   touched. */
.m-head + .m-fgroup { padding-top: 0; }
.m-fgroup-head { max-width: 62ch; margin-bottom: 26px; }
.m-fgroup-head p { margin: 0; }

.m-fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 22px;
}
/* A PLAIN BLOCK AGAIN AS OF 331s. It was a column flex so that the plan
   tag could be pinned to the foot of the card with margin-top: auto
   regardless of how much text sat above it. With the tags gone there is
   nothing to pin, and the 12px of bottom margin the paragraph carried to
   clear them is dead space at the bottom of every card. */
.m-fitem {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.m-fitem h3 { margin-bottom: 0.35em; }
.m-fitem p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* ---------------------------------------------------------------------
   Pricing
--------------------------------------------------------------------- */

.m-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 22px;
  align-items: start;
  padding-top: 14px;
  padding-bottom: clamp(30px, 4vw, 52px);
}
.m-plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
}
/* THE FEATURED CARD IS RAISED RATHER THAN RECOLOURED. Complete has to win
   the comparison, and a heavier border plus a shadow does that without
   making Standard look broken - which a greyed-out cheaper card would. */
.m-plan.is-featured {
  border-color: var(--pine);
  border-width: 2px;
  box-shadow: 0 20px 44px -28px rgba(43, 55, 44, 0.6);
}
.m-plan-flag {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--pine);
  color: #EFEBE0;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.m-plan h2 { font-size: 1.5rem; margin-bottom: 0.15em; }
.m-plan-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  color: var(--pine-dark);
  line-height: 1.1;
  margin: 6px 0 2px;
}
.m-plan-per {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.m-plan-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }

.m-plan-rows { list-style: none; margin: 0 0 22px; padding: 0; }
.m-plan-rows li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 15.5px;
  border-top: 1px solid var(--line);
}
.m-plan-rows li:first-child { border-top: 0; }
.m-plan-rows li.is-no { color: #93998F; }

/* INLINE SVG RATHER THAN A CHARACTER, and for the reason the app's plan
   cards give: the glyph a font picks for a tick varies in size, weight and
   baseline between machines, and some substitute an emoji at a size
   nothing asked for. An SVG is the same shape everywhere and takes its
   colour from the row. */
.m-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.m-plan-rows li.is-yes .m-ico { color: var(--sage); }
.m-plan-rows li.is-no .m-ico { color: #C4C0B4; }

/* .m-plan-cta IS GONE (355), AND WITH IT THE ONLY REASON .m-plan WAS A
   FLEX COLUMN. The rule was `margin-top: auto`, which pushed the button
   to the foot of its card so that three cards of unequal height still
   ended with their buttons level. There is no button now, so there is
   nothing to push.
   ~
   .m-plan KEEPS `display: flex; flex-direction: column` all the same. The
   grid sets `align-items: start`, so the cards size to their content and
   the column is doing nothing visible - but it is also what makes a card
   a single stacking context for the -12px flag, and changing layout mode
   to remove a line nobody can see is how a small edit becomes a bug
   report about a badge.
   ~
   THE ROW LIST NOW ENDS THE CARD, so its bottom margin doubles up with
   the card's own padding - 22px on top of 24px, which reads as a card
   that lost something. Zeroed when it is last, and only then: the rule
   has to keep its margin for any future card that puts something after
   it. */
.m-plan-rows:last-child { margin-bottom: 0; }

.m-notes { padding-bottom: clamp(40px, 5vw, 70px); }
.m-notes p { max-width: 68ch; color: var(--ink-soft); font-size: 15.5px; }

/* ---------------------------------------------------------------------
   Legal prose
--------------------------------------------------------------------- */

.m-prose {
  max-width: 74ch;
  padding-bottom: clamp(46px, 6vw, 80px);
}
.m-prose h2 {
  font-size: 1.28rem;
  margin-top: 1.9em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
}
.m-prose ul { padding-left: 22px; margin: 0 0 1em; }
.m-prose li { margin-bottom: 0.5em; }
.m-prose p, .m-prose li { color: #3B443C; }

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */

/* THE SAME GREEN AS THE HEADER, NOT --pine-dark (update 331a).
   ~
   IT IS NOT A TASTE CALL - roomee-logo.png has its background FLATTENED
   INTO IT rather than being transparent, and the hex it was flattened to
   is --pine. On any other green the logo is a visible rectangle sitting in
   the bar, which is exactly what a darker footer produced: the mark looked
   pasted on. The app's topnav carries the same note for the same reason.
   ~
   THE BORDER IS WHAT STOPS IT MERGING UPWARDS. Features and pricing both
   end on .m-band-deep, which is also --pine, so without a seam the footer
   and the last section read as one very tall block. */
.m-foot {
  background: var(--pine);
  border-top: 1px solid var(--pine-dark);
  color: rgba(239, 235, 224, 0.78);
  padding: 44px 0 28px;
  font-size: 15px;
}
.m-foot-in {
  max-width: var(--m-wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.m-foot-brand img { height: 40px; width: auto; display: block; margin-bottom: 12px; }
.m-foot-brand p { max-width: 40ch; margin: 0; }

.m-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-content: start;
}
.m-foot-links a { color: rgba(239, 235, 224, 0.9); text-decoration: none; white-space: nowrap; }
.m-foot-links a:hover { color: #fff; text-decoration: underline; }

.m-foot-legal {
  max-width: var(--m-wrap);
  margin: 30px auto 0;
  padding: 18px 24px 0;
  border-top: 1px solid rgba(239, 235, 224, 0.18);
  font-size: 13.5px;
  color: rgba(239, 235, 224, 0.6);
}

/* ---------------------------------------------------------------------
   Small screens
--------------------------------------------------------------------- */

/* 820px IS THE APP'S OWN BREAKPOINT, reused here so that somebody
   resizing a window does not watch the two halves of Roomee reflow at
   different moments. */
@media (max-width: 820px) {
  .m-hero-in,
  .m-demo,
  .m-foot-in {
    grid-template-columns: minmax(0, 1fr);
  }

  /* THE PICTURE GOES BELOW THE WORDS ON A PHONE, which is the opposite of
     the usual instinct. A screenshot of a desktop calendar at 380px wide
     is unreadable and would push the headline and the button below the
     fold to show it - so the words, the button and the note come first and
     the media follows. */
  .m-hero-media { order: 2; }
  .m-hero-words { order: 1; }

  .m-nav-in { gap: 14px; padding: 10px 16px; min-height: 0; flex-wrap: wrap; }
  .m-brand img { height: 36px; }
  /* THE LINKS DROP TO THEIR OWN ROW rather than being hidden behind a
     hamburger. Two links do not earn a menu, and a menu is script that has
     to work before the page is useful. flex-basis: 100% is what moves them
     down; order puts them under both the logo and the buttons. */
  /* BOTH MARGINS RESET, not just the one the desktop rule happens to set
     today. flex-basis: 100% is what drops the links to their own row, and
     an auto margin left over from above would then push them off to one
     side of it. */
  .m-nav-links { order: 3; flex-basis: 100%; margin-left: 0; margin-right: 0; gap: 18px; }
  .m-nav-cta { margin-left: auto; }
  .m-btn { padding: 8px 14px; font-size: 14.5px; }
  .m-btn-lg { padding: 12px 20px; font-size: 16px; }

  /* LONGHANDS, NEVER THE `padding` SHORTHAND (331u). This one line was
     silently deleting the vertical padding of every section on every
     page.
     ~
     THE CASCADE, BECAUSE IT IS NOT OBVIOUS: .m-wrap and .m-fgroup are
     both single-class selectors, so they have IDENTICAL specificity, and
     a media query adds none. Ties are broken by source order - and this
     block is at the foot of the file, after all of them. So `padding: 0
     16px` here beat `padding: clamp(26px, 3.5vw, 46px) 24px` on
     .m-fgroup, and the shorthand resets all four sides, so the vertical
     padding became zero.
     ~
     WHICH IS WHY THE FEATURES PAGE HAD ITS GROUPS BUTTED AGAINST EACH
     OTHER, and why its last card sat flush against the green call-to-
     action band below it. The same thing was happening to .m-head,
     .m-pillars, .m-shots, .m-final, .m-plans, .m-notes and .m-prose on
     every page - it was simply least visible where the sections were the
     same colour.
     ~
     Setting only the two sides that need to change leaves every
     section's own vertical rhythm alone. */
  .m-wrap { padding-left: 16px; padding-right: 16px; }
  .m-foot-in { padding: 0 16px; }
  .m-foot-legal { padding: 18px 16px 0; }

  body { font-size: 16px; }
}

/* Somebody who has asked their operating system to stop animations should
   not be given a video that starts by itself either. The poster stays and
   the loop does not run. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-rail { scroll-behavior: auto; }
  /* THE VIDEO IS NOT HANDLED HERE, AND CANNOT BE (332). This block used
     to carry `.m-hero-video { animation: none }` with a comment claiming
     the poster stayed and the loop did not run. That was false: animation
     governs CSS animations and has no bearing on video playback, so
     somebody who had asked their system to stop motion got an
     autoplaying, looping video anyway. There is no declarative way to
     stop a video autoplaying - HERO_MOTION_SCRIPT in marketing.ts pauses
     it and reveals a play button instead. */
}