/* see the head comment of v8/index.html for why this design looks the way it does */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
}

/* ============================================================================================
   TOKENS. Mews's palette, with their accent swapped for the app's teal.

   Mapping, so a future reader can diff this against hotelary's stylesheet: their
   --mews-night #1c1d24 / --mews-linen #f8f5f2 / --mews-gray #494951 / --mews-border #e8e8e9
   are carried over verbatim, because that quartet is what makes the look. Their
   --mews-coral (#10b981, emerald) is replaced by --brand, sampled from the app's own primary
   button so the page and the product agree.
   ============================================================================================ */
:root {
  --night: #1c1d24;         /* headings, and the dark band */
  --night-2: #262832;       /* raised surfaces inside the dark band */
  --gray: #494951;          /* body copy — 8.3:1 on white */
  --gray-light: #6b6b73;    /* captions and fineprint */
  --linen: #f8f5f2;         /* the warm section wash; also the app's top-bar cream */
  --linen-2: #f2ede7;       /* the deeper linen, for chips on a linen band */
  --border: #e8e8e9;
  --border-strong: #d9d9dc;
  --white: #ffffff;

  --brand: #0e6f60;         /* THE ONLY ACCENT. Controls, links, ticks, eyebrows. */
  --brand-hover: #0a5648;
  --brand-tint: #e4f1ee;    /* icon tiles, active tab, the tick discs */
  --brand-deep: #073b33;
  --brand-on-dark: #4fd1b8; /* the same accent, lifted to stay legible on --night */

  /* Product-surface tokens, lifted from the app so the CSS-drawn mockups below are the real
     colours rather than an approximation of them. Do not retune these to "look nicer" — the
     whole value of a drawn mockup is that it matches the screen the visitor lands on. */
  --ui-canvas: #f6f7f9; --ui-surface: #ffffff; --ui-line: #e4e7ec; --ui-ink: #101828;
  --ui-muted: #667085;
  --ok: #067647; --ok-bg: #e8f5ed;
  --warn: #b54708; --warn-bg: #fff4d6;
  --info: #315e88; --info-bg: #edf5fc;
  --dirty: #b42318; --dirty-bg: #fdeceb;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(28,29,36,.06), 0 1px 3px rgba(28,29,36,.08);
  --shadow-md: 0 4px 12px rgba(28,29,36,.06), 0 12px 32px -12px rgba(28,29,36,.16);
  --shadow-lg: 0 8px 24px rgba(28,29,36,.08), 0 32px 64px -24px rgba(28,29,36,.28);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --gutter: 20px;
  --barh: 0px;
}

/* Light only, and stated rather than left to chance: the whole point of this variant is the
   light Mews field, so a browser drawing dark form controls into it would be a mismatch. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--white); color: var(--gray);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: var(--barh); overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  color: var(--night); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.14; text-wrap: balance; margin: 0;
}
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* .mews-container / .mews-section, renamed. 1200 rather than their 1280: our longest measure
   is a three-column feature grid, and 1280 pushes the outer columns past a comfortable line
   length on a 15" laptop. */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
section[id], div[id] { scroll-margin-top: 5rem; }
.sec { padding: 64px 0; }
.sec-linen { background: var(--linen); }
.sec-night { background: var(--night); color: #c8ccd6; }
.sec-night h2, .sec-night h3 { color: #fff; }
@media (min-width: 768px) { :root { --gutter: 32px; } .sec { padding: 88px 0; } }
@media (min-width: 1024px) { .sec { padding: 112px 0; } }

/* ---- The eyebrow. Mews sets these as a small teal label above every h2; it is the cheapest
   device on the page for making a long scroll feel navigable. ------------------------------ */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--brand);
  margin-bottom: 14px; display: block;
}
.sec-night .eyebrow { color: var(--brand-on-dark); }

.sec-head { max-width: 720px; margin-bottom: 40px; }
.sec-head.mid { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(1.75rem, 4.4vw, 2.75rem); }
.sec-head p { margin-top: 18px; font-size: 1.0625rem; line-height: 1.65; color: var(--gray); }
.sec-night .sec-head p { color: #a4abb9; }
/* A LINK IN A SECTION LEAD HAS TO LOOK LIKE ONE. The reset at the top of this file is
   `a { color: inherit; text-decoration: none }`, so until this rule existed an <a> written into a
   .sec-head lead rendered as ordinary grey body text — a control that is not merely quiet but
   invisible, and invisible in a way no diff shows. Same treatment as .more a and .notband a, so
   every "read the longer version →" on the site reads identically wherever it is written. */
.sec-head p a { color: var(--brand); font-weight: 500; }
.sec-night .sec-head p a { color: #7fd3c1; }
@media (min-width: 768px) { .sec-head p { font-size: 1.125rem; } }

/* ---- Buttons. Pill-shaped, which is the single most recognisable Mews signature, and the
   reason this page reads as a different product from index.html at a glance.

   ONE SOLID CONTROL PER VIEW, everywhere. The header has "Start now" solid and "Log in"
   as plain text; the hero has "Start now" solid and "See the screens" outlined; every
   pricing tier except the recommended one is outlined. Two solid buttons in a row is the
   defect this rule exists to prevent — it asks for two things at once and gets neither. -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; white-space: nowrap;
  padding: 12px 22px; min-height: 46px;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-outline { background: var(--white); color: var(--night); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.sec-night .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.sec-night .btn-outline:hover { border-color: var(--brand-on-dark); color: var(--brand-on-dark); }
.btn-lg { padding: 15px 30px; font-size: 1.0625rem; min-height: 54px; }
.btn-block { width: 100%; }

/* ---- Header ------------------------------------------------------------------------------
   Mews/hotelary use a transparent header that gains a background on scroll. We keep the
   background permanently: this page's hero is linen, not an image, so a transparent header
   buys nothing and costs the contrast of the nav links. ------------------------------------ */
header.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
@media (min-width: 768px) { .top .wrap { height: 76px; } }
.brand { display: inline-flex; align-items: baseline; gap: 9px; }
.brand .mark { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; color: var(--night); }
.brand .mark b { color: var(--brand); font-weight: 700; }
.brand .tag {
  display: none; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-light);
}
@media (min-width: 1024px) { .brand .tag { display: inline; } }

.nav-main { display: none; align-items: center; gap: 26px; }
@media (min-width: 1024px) { .nav-main { display: flex; } }
.nav-main > a, .nav-main .drop > summary {
  font-size: 15px; font-weight: 500; color: var(--gray); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; list-style: none;
}
.nav-main > a:hover, .nav-main .drop > summary:hover { color: var(--night); }
.nav-main .drop > summary::-webkit-details-marker { display: none; }
.nav-main .drop > summary::marker { content: ""; }
.nav-main .drop > summary svg { width: 15px; height: 15px; transition: transform 200ms var(--ease); }
.nav-main .drop[open] > summary { color: var(--night); }
.nav-main .drop[open] > summary svg { transform: rotate(180deg); }

/* The mega-menu. A <details>, so it opens, closes and takes keyboard focus with no script —
   the bottom-of-file JS only adds close-on-outside-click and close-on-choose. This audience
   really does browse with data-saver proxies that run no JS; a nav that needs a listener to
   open is a nav that is sometimes not there. */
.drop { position: relative; }
.drop .panel {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 18px);
  width: min(680px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 22px; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px;
}
.drop .panel .col-head {
  grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-light); padding: 8px 10px 4px;
}
.drop .panel a { display: flex; gap: 12px; padding: 10px; border-radius: 12px; align-items: flex-start; }
.drop .panel a:hover { background: var(--linen); }
.drop .panel .ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.drop .panel .ic svg { width: 17px; height: 17px; }
.drop .panel b { display: block; font-size: 14px; font-weight: 600; color: var(--night); }
.drop .panel span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--gray-light); }

.nav-end { display: flex; align-items: center; gap: 14px; }
.nav-end .login { display: none; font-size: 15px; font-weight: 500; color: var(--gray); }
.nav-end .login:hover { color: var(--night); }
@media (min-width: 640px) { .nav-end .login { display: inline; } }
.nav-end .btn { padding: 10px 20px; min-height: 42px; font-size: 14.5px; }

/* Mobile sheet */
.burger { display: inline-grid; place-items: center; width: 44px; height: 44px;
          border: 1px solid var(--border); border-radius: 12px; background: #fff;
          color: var(--night); cursor: pointer; list-style: none; }
.burger::-webkit-details-marker { display: none; }
.burger::marker { content: ""; }
.burger svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .menu { display: none; } }
.menu { position: relative; }
.menu[open] .burger { border-color: var(--brand); color: var(--brand); }
.menu .sheet {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 70;
}
.menu .sheet a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--night); min-height: 44px; }
.menu .sheet a:hover { background: var(--linen); color: var(--brand); }
.menu .sheet hr { border: 0; border-top: 1px solid var(--border); margin: 6px 8px; }
.menu .sheet .login { color: var(--brand); }

/* ---- Hero --------------------------------------------------------------------------------
   hotelary's hero: linen-to-white diagonal, two blurred colour blobs, a pill badge, a huge
   semibold h1 with one rotating coloured word, three white "chip" facts, two pills, then a
   stats row. All of that is kept. What changes is what the numbers say. ------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #fff 0%, var(--linen) 46%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
/* The two blobs. Radial gradients rather than images: no bytes, no failed load, and they
   scale to any viewport. Kept far weaker than hotelary's — theirs sit at /5 opacity over
   white, ours over linen, which already carries warmth. */
.hero::before, .hero::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}
.hero::before { top: -140px; left: -120px; background: rgba(14,111,96,.07); }
.hero::after { bottom: -180px; right: -140px; background: rgba(180,138,60,.08); }
.hero .wrap { position: relative; z-index: 1; padding-block: 44px 56px; }
@media (min-width: 1024px) { .hero .wrap { padding-block: 80px 96px; } }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

.badge-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px;
  background: var(--brand-tint); border-radius: 999px; margin-bottom: 22px;
  font-size: 13.5px; font-weight: 500; color: var(--brand-deep);
}
.badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
@media (prefers-reduced-motion: no-preference) { .badge-pill .dot { animation: pulse 2.4s var(--ease) infinite; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(14,111,96,.45); } 60% { box-shadow: 0 0 0 7px rgba(14,111,96,0); } }

/* Retuned 2026-08-08 for the question headline, which is about 40% longer than the
   declarative one it replaced. At the old 4rem ceiling it ran to four lines on a laptop and
   pushed the buttons under the fold — the one thing a hero must never do. The floor came down
   too: on a 360px phone the question needs to fit in three lines, not five. */
.hero h1 { font-size: clamp(1.95rem, 5.6vw, 3.15rem); line-height: 1.12; letter-spacing: -.03em; max-width: 17ch; }
@media (min-width: 1024px) { .hero h1 { max-width: 15ch; } }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { margin-top: 22px; font-size: 1.0625rem; line-height: 1.62; max-width: 30em; }
@media (min-width: 768px) { .hero .lead { font-size: 1.1875rem; } }

/* The rotating line. hotelary rotates a word inside the h1; we rotate the OBJECTION under the
   lead instead, because the h1 here carries the site's fixed claim ("one screen") which the
   title, the og tags and index.html all repeat — a layout variant is not the place to
   relitigate the words.

   The first item is rendered in the HTML, so with JS off or reduced-motion on this reads as a
   normal static sentence rather than an empty gap. */
.rotator { margin-top: 16px; font-size: 1.0625rem; font-weight: 500; color: var(--night); }
.rotator .slot { color: var(--brand); display: inline-block; min-width: 1ch; }
@media (prefers-reduced-motion: no-preference) {
  .rotator .slot { transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
  .rotator .slot.out { opacity: 0; transform: translateY(-6px); }
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--night);
}
.chip svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .cta-row .btn { flex: 0 0 auto; } }
.fineprint { margin-top: 16px; font-size: 13.5px; color: var(--gray-light); }
.fineprint a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* The stats row. hotelary: "500+ Hotels · 85% Conversion · 4.8★ Rating". Ours are PRODUCT
   facts, which is the only kind of number this site can print honestly today — and they
   happen to answer the three questions an owner actually asks first. */
.stats { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.stat b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--night); letter-spacing: -.02em; line-height: 1.1; }
.stat b.accent { color: var(--brand); }
.stat span { font-size: 13px; color: var(--gray-light); }
.stats .sep { width: 1px; height: 34px; background: var(--border-strong); }
@media (max-width: 479px) { .stats .sep { display: none; } .stats { gap: 18px 26px; } }

/* ---- The drawn app mockups ----------------------------------------------------------------
   WHY THESE ARE CSS AND NOT SCREENSHOTS. The only web-sized imagery this folder owns is
   marketing/shots/ — the fourteen Play-Store posters, which are dark purple and carry their
   own baked-in headlines. On a light page they read as fourteen holes; framed in a browser
   chrome they read as a browser displaying a poster, which is worse. The real light app
   screenshots live in docs/images/*.png, outside this site's publish root and unoptimised
   (a few hundred KB each, desktop-cropped).

   So the light-band product imagery is drawn: same tokens as the app, ~0 bytes, sharp at any
   density, and readable when the connection is a hill-station 3G. It is NOT a fantasy UI —
   every element below matches a real screen (home board, room grid, task list). If the app's
   surface changes, change these too; a mockup that has drifted from the product is worse
   than no mockup.
   ------------------------------------------------------------------------------------------ */
.device {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.device .titlebar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--linen); border-bottom: 1px solid var(--border);
}
.device .titlebar .lamps { display: flex; gap: 6px; }
.device .titlebar .lamps i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.device .titlebar .addr {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--gray-light);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.device .app { background: var(--ui-canvas); padding: 14px; }

/* The app's own top bar: cream field, property name under the wordmark, role on the right. */
.apptop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--linen); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
.apptop .who { font-size: 13px; font-weight: 700; color: var(--night); letter-spacing: -.02em; }
.apptop .who b { color: var(--brand); }
.apptop .who span { display: block; font-size: 10.5px; font-weight: 500; color: var(--gray-light); letter-spacing: 0; }
.apptop .avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

.card {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px;
  padding: 12px; margin-bottom: 10px;
}
.card:last-child { margin-bottom: 0; }
.card .ct {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ui-ink);
}
.card .ct .go { font-size: 11.5px; font-weight: 500; color: var(--brand); }
.card .cs { font-size: 11.5px; color: var(--ui-muted); margin-top: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.bad { background: var(--dirty-bg); color: var(--dirty); }

/* The room grid — the app's Live Zone Grid, four rooms' worth. */
.roomgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room { border: 1px solid var(--ui-line); border-radius: 10px; padding: 9px 10px; background: #fff; }
.room b { display: block; font-size: 12px; font-weight: 600; color: var(--ui-ink); }
.room i { display: block; font-style: normal; font-size: 10.5px; color: var(--ui-muted); margin: 2px 0 6px; }

.metarow { display: flex; gap: 8px; margin-top: 10px; }
.metarow div {
  flex: 1; border: 1px solid var(--ui-line); border-radius: 9px; padding: 7px 8px; background: #fff;
  font-size: 10.5px; color: var(--ui-muted); text-align: center;
}
.metarow div b { display: block; font-size: 14px; font-weight: 700; color: var(--ui-ink); letter-spacing: -.02em; }

/* Floating "callout" cards over the mockup — hotelary hangs two of these off its chat mock,
   and they are what stops a flat rectangle reading as a flat rectangle. Hidden below the
   desktop breakpoint, where there is no room to hang anything without covering the UI. */
.float {
  display: none; position: absolute; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 11px 14px; z-index: 3;
}
@media (min-width: 1024px) { .float { display: block; } }
.float b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--night); letter-spacing: -.02em; }
.float span { font-size: 11.5px; color: var(--gray-light); }
.float.tl { top: 24px; left: -34px; }
.float.br { bottom: 26px; right: -30px; }

/* ---- The marquee -------------------------------------------------------------------------
   hotelary's is twelve invented hotel names, doubled, scrolling. We have no customers to
   name and will not invent any — so the same device carries the twelve JOBS the board covers.
   It does the identical visual work (a wide, calm, moving band that says "there is a lot
   here") and every word in it is checkable against the app's own navigation. -------------- */
.marquee { border-block: 1px solid var(--border); background: #fff; padding: 20px 0; overflow: hidden; }
.marquee .lbl { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .09em;
                text-transform: uppercase; color: var(--gray-light); margin-bottom: 16px; }
.track { display: flex; gap: 12px; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .track { animation: slide 42s linear infinite; } }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .track { animation-play-state: paused; }
.track span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; white-space: nowrap;
  background: var(--linen); border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--night);
}
.track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* ---- Two-column feature blocks (hotelary's "Turn every inquiry into a booking") ---------- */
.split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } }

.points { display: grid; gap: 26px; margin-top: 34px; }
.point { display: flex; gap: 16px; }
.point .ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.point .ic svg { width: 21px; height: 21px; }
.point h3 { font-size: 1.0625rem; font-weight: 600; }
.point p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--gray); }
.sec-night .point p { color: #a4abb9; }
.sec-night .point .ic { background: rgba(79,209,184,.12); color: var(--brand-on-dark); }

.textlinks { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.textlink { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--brand); }
.textlink:hover { color: var(--brand-hover); }
.textlink svg { width: 16px; height: 16px; }

/* ---- Platform tabs (hotelary's "Everything your hotel needs") ------------------------------
   Theirs is three category tabs over a card grid. Ours is the same, and it is the biggest
   genuine gain over the live page: index.html shows the modules only as ten poster images
   inside a swipe rail, so a visitor scanning for "does it do purchasing?" has to look at
   pictures. Here it is a list they can read.

   Implemented as radio inputs + :checked sibling selectors — the panels are in the DOM and
   styled by CSS alone, so with JS off all three categories are still reachable. ----------- */
/* The radios live BEFORE .tabs and .panes as siblings, because the general-sibling combinator
   only looks forwards — that is what lets `:checked` reach both the label and the pane with no
   script. Consequence: the inputs are NOT inside .tabs, so every selector below matches them by
   name rather than by descent. A `.tabs input` rule looks right and matches nothing, which is
   how a first pass shipped three visible radio buttons above the tab row. */
input[name="ptab"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.tabs label {
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: #fff; font-size: 14.5px; font-weight: 500; color: var(--gray); cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.tabs label:hover { border-color: var(--brand); color: var(--brand); }

#tab-a:checked ~ .tabs label[for="tab-a"],
#tab-b:checked ~ .tabs label[for="tab-b"],
#tab-c:checked ~ .tabs label[for="tab-c"],
#tab-d:checked ~ .tabs label[for="tab-d"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Keyboard focus has to be drawn on the LABEL, since the input it belongs to is 1px and
   invisible — without this the tab row is silently untraversable by keyboard. */
#tab-a:focus-visible ~ .tabs label[for="tab-a"],
#tab-b:focus-visible ~ .tabs label[for="tab-b"],
#tab-c:focus-visible ~ .tabs label[for="tab-c"],
#tab-d:focus-visible ~ .tabs label[for="tab-d"] { outline: 2px solid var(--brand); outline-offset: 2px; }

.panes > .pane { display: none; }
#tab-a:checked ~ .panes > .pane-a,
#tab-b:checked ~ .panes > .pane-b,
#tab-c:checked ~ .panes > .pane-c,
#tab-d:checked ~ .panes > .pane-d { display: block; }

.fgrid { display: grid; gap: 14px; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.fcard {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.fcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fcard .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand); margin-bottom: 16px;
}
.fcard .ic svg { width: 20px; height: 20px; }
.fcard h3 { font-size: 1rem; font-weight: 600; }
.fcard p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--gray); }

/* ---- Who uses it (the "Solutions" grid, sliced by person) -------------------------------- */
.rolegrid { display: grid; gap: 14px; }
@media (min-width: 640px) { .rolegrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rolegrid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.role { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.role .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand); margin-bottom: 16px;
}
.role .ic svg { width: 20px; height: 20px; }
.role h3 { font-size: 1rem; font-weight: 600; }
/* "Opens on:" is the load-bearing line of each card — it is the concrete difference between the
   six roles — so it gets the accent and sits above the prose rather than inside it. */
.role .opens {
  margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand);
}
.role p:not(.opens) { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--gray); }

.rolenote {
  margin-top: 26px; display: grid; gap: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
}
@media (min-width: 768px) { .rolenote { grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 30px; } }
.rolenote p { font-size: 14.5px; line-height: 1.6; }
.rolenote b { color: var(--night); font-weight: 600; }

/* The flash. When a menu item lands you on one card out of eighteen, the scroll alone does not
   tell you WHICH one it meant — so the target ring for a moment. Colour, not motion, so it
   survives reduced-motion; the animation is only the fade-out. */
.fcard.flash, .role.flash {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
@media (prefers-reduced-motion: no-preference) {
  .fcard.flash, .role.flash { animation: flash 2.2s var(--ease) forwards; }
  @keyframes flash {
    0%, 55% { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
    100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  }
}

/* ---- The tour band ------------------------------------------------------------------------
   THE ONE DARK BAND, and the reason it exists: marketing/shots/ is fourteen dark posters with
   their own purple field. On linen they are holes; here they are at home. Same horizontal
   rail as index.html — ten 9:16 posters stacked vertically would be six screens of page.

   THE HEADLINES IN THESE IMAGES ARE PIXELS. Every alt repeats its poster's words verbatim
   because that is the only copy a crawler or a screen reader ever gets. Do not shorten one
   to "app screenshot". ---------------------------------------------------------------------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.rail-nav { display: none; gap: 10px; flex: none; }
.rail-nav.on { display: flex; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease);
}
.rail-btn:hover:not(:disabled) { border-color: var(--brand-on-dark); color: var(--brand-on-dark); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn svg { width: 18px; height: 18px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 24px var(--gutter) 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .rail { grid-auto-columns: 40%; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: 23%; } }
.rail.land { grid-auto-columns: 86%; }
@media (min-width: 1024px) { .rail.land { grid-auto-columns: 46%; } }
.poster {
  display: block; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09); background: var(--night-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 28px 60px -30px rgba(0,0,0,.95);
}
.poster img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1920; }
.poster.land img { aspect-ratio: 1920 / 1080; }
.swipehint { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #7f8798; margin-top: 8px; }
.swipehint::after { content: "→"; }

/* ---- How it works: the flow, then the three steps ---------------------------------------- */
.flow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px;
  text-align: center;
}
/* NOT PILL-SHAPED, and that is the point. A white rounded-999px chip with a border is exactly
   what .btn-outline looks like on this page, so drawing these three as pills would put three
   things that cannot be clicked into the same shape as everything that can. They are labels on
   a diagram: tinted, square-ish, no border, no hover. */
.flow .node {
  background: var(--linen-2); border-radius: 10px;
  padding: 10px 18px; font-size: 14.5px; font-weight: 500; color: var(--night);
}
.flow .node b { color: var(--brand); font-weight: 600; margin-right: 7px; }
.flow .arrow { color: var(--gray-light); }

/* The three steps. Numbered by counter rather than by hand so a step cannot be inserted with
   the wrong number on it — the classic silent defect in a hand-numbered list. */
.steps { display: grid; gap: 16px; margin-top: 40px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand); font-size: 14px; font-weight: 700;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.0625rem; font-weight: 600; }
.step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; text-align: center; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts div b { display: block; font-size: 1.875rem; font-weight: 700; color: var(--brand); letter-spacing: -.03em; }
.facts div strong { display: block; font-size: 14px; font-weight: 600; color: var(--night); margin-top: 4px; }
.facts div span { font-size: 12.5px; color: var(--gray-light); }

/* ---- Languages ---------------------------------------------------------------------------- */
.langs { display: grid; gap: 16px; }
@media (min-width: 768px) { .langs { grid-template-columns: repeat(3, 1fr); } }
.lang { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.lang .lk { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.lang .lt { font-size: 12.5px; color: var(--gray-light); margin-top: 16px; }
.lang .lb { font-size: 1.0625rem; font-weight: 600; color: var(--night); margin-top: 5px; line-height: 1.45; }
.lang .ln { margin-top: 16px; font-size: 13px; color: var(--gray-light); }
/* Segoe UI / SF / Roboto do not all cover Devanagari, so without this the Hindi card falls
   back to whatever the OS happens to pick and stops matching its two siblings. */
[lang="hi"], [lang="hi-Latn"] { font-family: "Nirmala UI", "Noto Sans Devanagari", var(--font); }
.lang-more { margin-top: 34px; font-size: 15px; color: var(--night); font-weight: 500; }
.lpacks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lpacks li {
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px;
  font-size: 13.5px; display: inline-flex; align-items: baseline; gap: 8px;
}
.lpacks .native { font-weight: 600; color: var(--night); }
.lpacks .en { font-size: 12px; color: var(--gray-light); }
.lpacks .ask { background: var(--brand-tint); border-color: transparent; color: var(--brand-deep); }
.lpacks .ask b { font-weight: 600; }
.lpacks .ask a { text-decoration: underline; text-underline-offset: 2px; }
.lpacks .ask a:hover { color: var(--brand); }

/* ---- FAQ. hotelary ships .mews-accordion in its CSS but no FAQ on the page — this is a slot
   they left empty and we should not. <details>, so it works with JS off. ------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-size: 1.0625rem; font-weight: 500; color: var(--night);
  cursor: pointer; list-style: none; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--gray-light);
  border-bottom: 2px solid var(--gray-light); transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 250ms var(--ease);
}
.faq details[open] summary { color: var(--brand); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--brand); }
.faq .a { padding: 0 0 24px; font-size: 15px; line-height: 1.7; max-width: 66ch; }
.faq .a a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Pricing ------------------------------------------------------------------------------- */
.offer {
  display: inline-block; margin-top: 20px; background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 14px; padding: 12px 18px; font-size: 14.5px; line-height: 1.55;
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700;
  background: #fff; border: 1px solid rgba(14,111,96,.22); border-radius: 6px; padding: 1px 7px;
}
.curr {
  display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px;
  background: var(--linen-2); border-radius: 999px;
}
.curr button {
  border: 0; background: transparent; border-radius: 999px; padding: 8px 20px; min-height: 40px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--gray); cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.curr button[aria-pressed="true"] { background: #fff; color: var(--night); box-shadow: var(--shadow-sm); }

.tiers { display: grid; gap: 16px; margin-top: 44px; align-items: start; }
@media (min-width: 640px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 22px; display: flex; flex-direction: column; height: 100%;
}
/* THE ONE RECOMMENDED TIER, and it is the only card on the page allowed a solid button. The
   ring is the badge's justification: a "Most popular" label on a card that looks identical to
   its neighbours is decoration. */
.tier.feature { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint), var(--shadow-md); }
.tier .badge {
  position: absolute; top: -12px; left: 22px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 12px;
}
.tier .tname { font-size: 1.0625rem; font-weight: 600; color: var(--night); }
.tier .rooms { font-size: 13px; color: var(--gray-light); margin-top: 3px; }
.tier .price { margin-top: 18px; font-size: 2rem; font-weight: 700; color: var(--night); letter-spacing: -.03em; line-height: 1.1; }
.tier .price .per { font-size: 13px; font-weight: 500; color: var(--gray-light); letter-spacing: 0; }
.tier .save { margin-top: 10px; font-size: 12.5px; color: var(--brand); }
.tier ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 11px; flex: 1; }
.tier li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; }
.tier li svg { width: 17px; height: 17px; flex: none; color: var(--brand); margin-top: 2px; }
.more { margin-top: 30px; text-align: center; font-size: 15px; }
.more a { color: var(--brand); font-weight: 500; }

/* ---- Final CTA ----------------------------------------------------------------------------- */
.final { background: var(--night); color: #c8ccd6; text-align: center; position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(79,209,184,.13), transparent 70%);
}
.final .wrap { position: relative; padding-block: 72px; }
@media (min-width: 1024px) { .final .wrap { padding-block: 104px; } }
.final h2 { font-size: clamp(1.875rem, 4.6vw, 3rem); color: #fff; max-width: 20ch; margin-inline: auto; }
.final p.sub { margin-top: 20px; font-size: 1.0625rem; color: #a4abb9; max-width: 56ch; margin-inline: auto; }
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; }
.ticks span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #c8ccd6; }
.ticks svg { width: 17px; height: 17px; color: var(--brand-on-dark); }
.final .cta-row { justify-content: center; margin-top: 34px; }
.final .btn-primary { background: var(--brand-on-dark); color: var(--brand-deep); font-weight: 600; }
.final .btn-primary:hover { background: #6de0c9; }
.final .fineprint { color: #7f8798; }
.final .fineprint a { color: var(--brand-on-dark); }

/* ---- Footer --------------------------------------------------------------------------------- */
footer.site { background: var(--linen); border-top: 1px solid var(--border); padding: 56px 0 32px; }
.fgrid-cols { display: grid; gap: 36px; }
@media (min-width: 768px) { .fgrid-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }
footer .about p { margin-top: 14px; font-size: 14px; line-height: 1.65; max-width: 34ch; }
footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-light); }
footer nav { display: grid; gap: 11px; margin-top: 16px; }
footer nav a { font-size: 14.5px; color: var(--gray); }
footer nav a:hover { color: var(--brand); }
.legal {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--gray-light);
}
.legal a { color: var(--gray-light); }
.legal a:hover { color: var(--brand); }

/* ---- Sticky action bar (phones only) --------------------------------------------------------
   Revealed only once the hero's own buttons have scrolled away, so the page never carries two
   competing asks at once. Leaves the bottom-right corner free for the Tawk bubble. --------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
}
.actionbar .btn { flex: 1; }
body.has-bar { --barh: 74px; }
body.has-bar .actionbar.is-visible { display: flex; }
body.has-chat .actionbar { padding-right: 84px; }
@media (min-width: 900px) { .actionbar { display: none !important; } }

/* Entrance. One rule, three delays; disabled wholesale under reduced-motion. */
.fade { opacity: 0; transform: translateY(12px); animation: rise .6s var(--ease) forwards; }
.fade.d1 { animation-delay: .06s; } .fade.d2 { animation-delay: .14s; } .fade.d3 { animation-delay: .22s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; opacity: 1; transform: none; }
  .track { animation: none; }
}

/* ==============================================================================================
   MULTI-PAGE ADDITIONS (platform.html · solutions.html · pricing.html)
   Added when the variant became four pages. The home page opens on a hero with a product mock;
   the sibling pages open on a quiet band instead — a second full hero on every page is how a
   site starts reading as a brochure.
   ============================================================================================== */

.pagehead {
  background: linear-gradient(150deg, #fff 0%, var(--linen) 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 44px;
}
@media (min-width: 768px) { .pagehead { padding: 76px 0 68px; } }
.pagehead h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); letter-spacing: -.03em; max-width: 18ch; }
/* The companion pages set the joining word in the accent — "HotelDsk AND Mews" — because that
   one word is the entire repositioning, and a reader who skims the headline should still get it. */
.pagehead h1 em { font-style: normal; color: var(--brand); }
.pagehead p { margin-top: 20px; font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; }
@media (min-width: 768px) { .pagehead p { font-size: 1.1875rem; } }

/* The current page, said twice: aria-current for a screen reader, this for everyone else. A nav
   that never says where you are is a nav you re-read on every page. */
.nav-main .is-here { color: var(--night); font-weight: 600; }
.nav-main a.is-here { box-shadow: inset 0 -2px 0 var(--brand); padding-bottom: 3px; }

/* The spec reference chip on a feature card. Deliberately quiet — it is a provenance mark for
   whoever maintains this page, not a thing a hotel owner needs to read. */
.fcard .ref {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--gray-light); background: var(--linen); border-radius: 5px; padding: 1px 6px;
  white-space: nowrap;
}
.sec-linen .fcard .ref { background: var(--linen-2); }
.fcard p a { color: var(--brand); font-weight: 500; }
.fcard p a:hover { text-decoration: underline; }

/* Deep links from the nav land on one card out of twenty-six, and the scroll alone does not say
   WHICH one it meant. :target does it in pure CSS — no script, and it survives a shared URL,
   which the old JS-only flash did not. */
.fcard:target, .role:target, section[id]:target .rolepage {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  border-radius: 16px;
}
section[id]:target .rolepage { padding: 22px; }

/* The honesty band — "what this deliberately doesn't do", and "nothing is charged yet". Given
   the weight of a full-width tinted panel on purpose: these are the two paragraphs on the site
   most likely to save someone a wasted trial. */
.notband {
  background: var(--brand-tint); border-radius: 20px; padding: 30px;
  max-width: 900px; margin-inline: auto;
}
@media (min-width: 768px) { .notband { padding: 40px 44px; } }
.notband h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.notband p { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--brand-deep); }
.notband p.small { font-size: 14px; color: var(--gray); }
.notband a { color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* A role, given a whole band on solutions.html rather than a card. */
.rolepage { max-width: 900px; margin-inline: auto; }
.rolepage-head { display: flex; gap: 18px; align-items: flex-start; }
.rolepage-head .ic {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.rolepage-head .ic svg { width: 25px; height: 25px; }
.rolepage-head h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-top: 2px; }
.rolepage-head .eyebrow { margin-bottom: 6px; }
.rolepage .opens { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.rolepage-body { margin-top: 24px; }
@media (min-width: 768px) { .rolepage-body { margin-left: 70px; } }
.rolepage-body > p { font-size: 15.5px; line-height: 1.7; }
.rolepage-body h3 {
  margin-top: 26px; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gray-light);
}
.doeslist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .doeslist { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }
.doeslist li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.doeslist li svg { width: 17px; height: 17px; flex: none; color: var(--brand); margin-top: 3px; }
.notyours {
  margin-top: 22px; font-size: 14px; line-height: 1.65; color: var(--gray-light);
  border-left: 3px solid var(--border-strong); padding-left: 16px;
}
.notyours b { color: var(--night); font-weight: 600; }

/* The home page's pricing teaser. THE PRICES THEMSELVES LIVE ONLY ON pricing.html — this band
   carries a range and a link, deliberately, so there is exactly one place in the repo where a
   number has to be changed when a plan moves. */
.pricestrip {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 30px; text-align: center; max-width: 860px; margin-inline: auto;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .pricestrip { padding: 40px; } }
.pricestrip .lede { font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 600; color: var(--night); letter-spacing: -.02em; }
.pricestrip .lede b { color: var(--brand); font-weight: 600; }
.pricestrip .plans {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px;
}
.pricestrip .plans span {
  background: var(--linen); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; color: var(--night);
}
.pricestrip .plans span b { font-weight: 600; }
.pricestrip .cta-row { justify-content: center; }

/* ==============================================================================================
   COMPARISON PAGES (compare.html and the ten vs-*.html)
   ============================================================================================== */

/* The table is the page. On a phone it stops being a table and becomes stacked pairs, because
   three columns of prose at 360px is unreadable — the per-cell labels below are what keep the
   stacked version comprehensible, and they are hidden again the moment there is room for a real
   header row. */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; }
.cmp-table thead th {
  font-size: 13px; font-weight: 600; color: var(--night); padding: 16px 18px;
  background: var(--linen); border-bottom: 1px solid var(--border);
}
/* Our column is tinted the whole way down. One visual emphasis on the page, and it is the column
   the reader is here to evaluate — not a claim about who wins. */
.cmp-table thead th.mine { color: var(--brand-deep); background: var(--brand-tint); }
.cmp-table tbody th {
  font-size: 13.5px; font-weight: 600; color: var(--night);
  padding: 16px 18px; border-bottom: 1px solid var(--border); width: 22%;
}
.cmp-table tbody td {
  font-size: 14px; line-height: 1.6; color: var(--gray);
  padding: 16px 18px; border-bottom: 1px solid var(--border); width: 39%;
}
.cmp-table tbody td.mine { background: color-mix(in srgb, var(--brand-tint) 55%, #fff); color: var(--brand-deep); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cell-lbl { display: none; }

@media (max-width: 767.98px) {
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td, .cmp-table tbody th { display: block; width: auto; }
  .cmp-table thead { display: none; }
  .cmp-table tbody th {
    background: var(--linen); border-bottom: 0; padding: 14px 16px 8px;
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light);
  }
  .cmp-table tbody td { padding: 10px 16px; border-bottom: 0; }
  .cmp-table tbody tr { border-bottom: 1px solid var(--border); }
  .cmp-table tbody tr:last-child { border-bottom: 0; }
  .cell-lbl {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gray-light); margin-bottom: 3px;
  }
  .cmp-table tbody td.mine .cell-lbl { color: var(--brand); }
}

/* Pick-them / pick-us. Two columns, and ours is NOT drawn as the winner — same size, same
   weight, one tinted. A comparison page that visually shouts the answer is one the reader
   discounts entirely, and these pages only work if they read as fair. */
.choose { display: grid; gap: 16px; max-width: 980px; margin-inline: auto; }
@media (min-width: 860px) { .choose { grid-template-columns: 1fr 1fr; gap: 20px; } }
.choose-col { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.choose-col.mine { background: var(--brand-tint); border-color: transparent; }
.choose-col h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 16px; }
.choose-col .doeslist { grid-template-columns: 1fr; gap: 12px; }
.choose-col.mine .doeslist li { color: var(--brand-deep); }

.provenance {
  max-width: 760px; margin-inline: auto; font-size: 13.5px; line-height: 1.7;
  color: var(--gray-light); text-align: center;
  border-top: 1px solid var(--border); padding-top: 26px;
}
.provenance a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* A comparison card on the hub. It is a whole-card link, so the hover state has to move as one. */
a.cmp-card { display: block; }
a.cmp-card h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
a.cmp-card .tagline-sm { margin-top: 6px; font-size: 13px; color: var(--gray-light); }
a.cmp-card .go { color: var(--brand); font-weight: 500; white-space: nowrap; }
.tagbit {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 2px 9px;
}

/* The "all ten" row at the foot of the Compare mega-menu — full width under the two columns. */
.drop .panel .panel-all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--border); color: var(--brand);
}
.drop .panel .panel-all b { color: var(--brand); }

/* The price band, on the five vendors who publish nothing. The two columns are NOT balanced, and
   that is the one place on these pages where the design is allowed to take a side: ours carries a
   real figure and theirs carries the absence of one. That asymmetry is the argument, and it is
   made of a verifiable fact rather than a claimed multiple. */
.pricecmp { display: grid; gap: 16px; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .pricecmp { grid-template-columns: 1fr 1fr; gap: 20px; } }
.pricecmp-col { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.pricecmp-col.mine { background: var(--brand-tint); border-color: transparent; }
.pricecmp .lbl {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gray-light);
}
.pricecmp-col.mine .lbl { color: var(--brand); }
.pricecmp .fig {
  margin-top: 10px; font-size: 2.25rem; font-weight: 700; color: var(--night);
  letter-spacing: -.03em; line-height: 1.05;
}
.pricecmp-col.mine .fig { color: var(--brand-deep); }
.pricecmp .fig.quiet { color: var(--gray-light); font-size: 1.75rem; }
.pricecmp .fig span {
  display: block; margin-top: 6px; font-size: 13px; font-weight: 500;
  letter-spacing: 0; color: var(--gray-light);
}
.pricecmp .doeslist { grid-template-columns: 1fr; gap: 11px; margin-top: 20px; }
.pricecmp-col.mine .doeslist li { color: var(--brand-deep); }
.pricecmp-col:not(.mine) .doeslist li svg { color: var(--gray-light); }

/* A third-party estimate, and drawn to look like one. Quieter than the figures above it, because
   "independent reviews estimate X" is a weaker sentence than "we charge Y" and should not be
   dressed up as equal evidence. */
.estimate {
  max-width: 760px; margin: 26px auto 0; font-size: 13.5px; line-height: 1.7;
  color: var(--gray-light); background: var(--linen); border-radius: 14px; padding: 18px 22px;
}

/* THE FEATURE MATRIX (compare.html) — a .cmp-table variant that stays a real table at every
   width. The stacked-block mobile treatment above works for two columns of prose; twelve
   columns of glyphs stacked vertically lose the one thing a matrix is for (reading across),
   so this variant scrolls sideways inside .cmp-wrap with the feature column held sticky. */
.cmp-table.matrix th, .cmp-table.matrix td { width: auto; }
.cmp-table.matrix thead th { white-space: nowrap; }
.cmp-table.matrix thead th a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cmp-table.matrix tbody th {
  width: auto; min-width: 220px; position: sticky; left: 0; background: #fff; z-index: 1;
}
.cmp-table.matrix td.c { text-align: center; white-space: nowrap; }
.cmp-table.matrix .basis { display: block; font-size: 11.5px; color: var(--gray); white-space: normal; min-width: 130px; margin-top: 2px; }
.cmp-table.matrix tr.rowline th, .cmp-table.matrix tr.rowline td { border-top: 2px solid var(--border); }
.cmp-table.matrix tr.tally td { font-weight: 600; color: var(--night); }
.gl { font-size: 15px; line-height: 1; }
.gl-yes { color: var(--brand-deep); }
.gl-part { color: #a06a00; }
.gl-no { color: #9c3838; }
.gl-np { color: var(--gray); opacity: .55; }
.matrix-legend { margin-top: 14px; font-size: 12.5px; color: var(--gray); line-height: 1.7; }
@media (max-width: 767.98px) {
  /* Undo the stacked-block treatment for the matrix only — it scrolls instead. */
  .cmp-table.matrix, .cmp-table.matrix tbody, .cmp-table.matrix tr, .cmp-table.matrix td, .cmp-table.matrix tbody th { display: revert; width: auto; }
  .cmp-table.matrix thead { display: table-header-group; }
  .cmp-table.matrix tbody th { min-width: 160px; font-size: 12.5px; padding: 12px 12px; }
  .cmp-table.matrix tbody td, .cmp-table.matrix thead th { padding: 12px 10px; font-size: 12.5px; }
}

/* THREE CURRENCIES, ONE SHOWN. Every price is three .cur spans; html[data-cur] picks one.
   The no-JS default is USD — the :not() rule below is what makes a JS-less page still show
   exactly one figure rather than three in a row. */
.cur { display: none; }
html[data-cur="usd"] .cur-usd, html[data-cur="eur"] .cur-eur, html[data-cur="inr"] .cur-inr { display: inline; }
html:not([data-cur]) .cur-usd { display: inline; }
.cur-chips { display: flex; gap: 6px; justify-content: center; margin: 14px 0 4px; }
.cur-chip {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.cur-chip.is-on { color: var(--brand-deep); background: var(--brand-tint); border-color: transparent; }

/* SCROLL AFFORDANCE for the wide matrix. The wrap always scrolled; nothing SAID so — overlay
   scrollbars are invisible until touched and a cut-off column reads as a broken layout, not
   an invitation. So: a visible scrollbar at all times, and an edge fade that only appears
   while there is more table in that direction (scroll-driven background trick). */
.cmp-wrap {
  background:
    linear-gradient(to right, #fff, #fff), linear-gradient(to left, #fff, #fff),
    linear-gradient(to right, rgba(7,59,51,.14), rgba(7,59,51,0)),
    linear-gradient(to left, rgba(7,59,51,.14), rgba(7,59,51,0));
  background-position: left center, right center, left center, right center;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.cmp-wrap::-webkit-scrollbar { height: 10px; }
.cmp-wrap::-webkit-scrollbar-track { background: var(--linen); border-radius: 999px; }
.cmp-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-deep) 35%, #fff); border-radius: 999px; }
.cmp-wrap { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand-deep) 35%, #fff) var(--linen); }
.cmp-table.matrix tbody td { padding: 14px 12px; }
.cmp-table.matrix .basis { min-width: 110px; }

/* The two-column page-sized matrix keeps the default (stacking) mobile behaviour; it only
   needs the centered glyph cells. */
.cmp-table.glance td.c { text-align: center; }
@media (max-width: 767.98px) { .cmp-table.glance td.c { text-align: left; } }

/* The matrix earns a wider column than prose does: at 1200px only six of twelve product
   columns fit; at 1480px it is nine or ten. Applied to the hub's grid section only —
   body text this wide would be unreadable, a table is exactly the content that isn't. */
.wrap-wide { max-width: 1480px; }

/* THE ADD-ON BAND (pricing.html) — one card, two halves, and a full-width opt-out line
   underneath that is styled as reassurance, not small print: "you don't need this" is a
   selling point of the free plan and gets body-size type. */
.addon {
  margin-top: 44px; border: 1px solid var(--border); border-radius: 18px; background: #fff;
  padding: 28px; display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .addon { grid-template-columns: 1.6fr 1fr; padding: 34px; } }
.addon h2 { font-size: 24px; letter-spacing: -0.5px; margin-top: 8px; }
.addon-main > p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--gray); }
.addon-main ul { margin-top: 14px; display: grid; gap: 8px; }
.addon-main li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--night); }
.addon-main li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand-deep); }
.addon-price { border-left: 0; padding-top: 4px; }
@media (min-width: 900px) { .addon-price { border-left: 1px solid var(--border); padding-left: 28px; } }
.addon-price .price { font-size: 34px; font-weight: 700; color: var(--night); }
.addon-price .per { font-size: 14px; font-weight: 500; color: var(--gray); }
.addon-note { margin: 10px 0 16px; font-size: 13px; line-height: 1.6; color: var(--gray); }
.addon-optout {
  grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 20px;
  font-size: 15.5px; line-height: 1.75; color: var(--brand-deep);
}