/* ============================================================================
   Marketing site. Loaded after tokens.css and base.css.
   ============================================================================

   The pages are light. <body> carries .theme-light; the two bands the Figma
   draws dark — the landing hero and the CTA — carry .theme-dark, which
   re-resolves every token beneath them. No component here has a "on dark"
   variant: a .btn or a .card simply reads the mode it finds itself in.
   ========================================================================== */

html, body { height: auto; overflow: visible; }

body { line-height: 1.5; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* A band that re-declares a mode has to paint its own background, or it sits
   transparent over whatever the page behind it is. */
.theme-dark, .theme-light { background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------- layout  */

/* The Figma lays the pages out on a 1440 frame with a 1200 content column
   (120px gutters), and the narrower blocks inside it at 760–820. */
.wrap {
  width: min(1200px, calc(100vw - 48px));
  margin-inline: auto;
}

.wrap--narrow { width: min(820px, calc(100vw - 48px)); margin-inline: auto; }
.wrap--text   { width: min(680px, calc(100vw - 48px)); margin-inline: auto; }

.section { padding-block: 96px; }
.section--tight { padding-block: 64px; }
.section--raised { background: var(--bg-raised); }
.section--hairline { border-top: 1px solid var(--border-subtle); }

/* ------------------------------------------------------------ typography  */

.eyebrow {
  margin: 0 0 14px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.display {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 37px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.h3 { margin: 0; font-size: var(--text-card-title); font-weight: 700; letter-spacing: -0.01em; }

.lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.prose { font-size: var(--text-body-md); line-height: 1.75; color: var(--ink-dim); }
.prose p { margin: 0 0 18px; }
.prose h2 { margin: 40px 0 14px; color: var(--ink); font-size: 24px; letter-spacing: -0.02em; }
.prose h3 { margin: 32px 0 10px; color: var(--ink); font-size: 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent); }

.centred { text-align: center; }
.section__head { max-width: 760px; margin-inline: auto; }

/* --------------------------------------------------------------- nav bar  */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-2xl);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Scrolled gains the panel fill, a hairline and Elevation/1. On the landing
   js/site.js also flips the nav from dark mode to light at the same moment,
   because the panel it gains is white. */
.nav.is-scrolled {
  background: var(--panel);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-1);
}

.nav__brand {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-dim);
}

.nav__links a { text-decoration: none; }
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label-md);
  font-weight: 600;
}

.nav__signin { color: var(--ink-dim); text-decoration: none; white-space: nowrap; }
.nav__signin:hover { color: var(--ink); }

/* The language toggle. A two-letter link, so it reads as a control rather
   than another nav item, and stays on the bar at every width — it is how a
   visitor served the wrong language gets out, which the menu is not the
   place for. */
.nav__lang {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--space-2xs);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
}
.nav__lang:hover { color: var(--ink); border-color: var(--stroke-strong); }
.nav__lang:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.nav__toggle { display: none; }

/* A details/summary disclosure rather than a scripted menu: it opens on
   click, works from the keyboard, and closes on Escape without any JS. */
.nav__more { position: relative; }

.nav__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav__more > summary::-webkit-details-marker { display: none; }
.nav__more > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav__more[open] > summary,
.nav__more > summary:hover { color: var(--ink); }

.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: var(--space-xs);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}

.nav__menu a { padding: 10px 12px; border-radius: var(--radius-sm); white-space: nowrap; }
.nav__menu a:hover { background: var(--control-hover); color: var(--ink); }

/* ---------------------------------------------------------------- footer  */

.footer {
  padding: 64px var(--space-2xl) 40px;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-subtle);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  max-width: 1360px;
  margin-inline: auto;
}

.footer__brand { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.footer__blurb { margin: 0 0 16px; font-size: var(--text-label-md); color: var(--ink-dim); line-height: 1.6; }
.footer__where { margin: 0; font-size: var(--text-body-sm); color: var(--ink-mute); }

.footer__head {
  margin: 0 0 16px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: 12px; }
.footer__list a { font-size: var(--text-label-md); color: var(--ink-dim); text-decoration: none; }
.footer__list a:hover { color: var(--ink); }

.footer__legal {
  max-width: 1360px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-body-sm);
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ hero  */

/* The nav and the hero share one band so the gradient runs behind both. The
   nav is stacked above the hero rather than floating over it, so a nav left
   transparent would otherwise sit on the white page behind. */
.topband {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--wash-top) 0%, var(--wash-mid) 58%, var(--wash-deep) 100%);
}

.hero {
  padding: 72px 0 0;
  text-align: center;
  background: transparent;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* The preview is a still of the tour chrome over a real room, not a live
   embed — a landing page should not pull down a panorama before anyone has
   asked to see one. */
.preview {
  position: relative;
  width: min(1000px, calc(100vw - 48px));
  margin: 56px auto 0;
  aspect-ratio: 1000 / 460;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--sky-tint) center/cover no-repeat;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.preview__label {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  font-size: var(--text-label-md);
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-chrome));
  -webkit-backdrop-filter: blur(var(--blur-chrome));
}

.preview__bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 7px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-chrome));
  -webkit-backdrop-filter: blur(var(--blur-chrome));
  box-shadow: var(--shadow);
}

.preview__pill {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.preview__pill.is-active { color: var(--ink-inverse); background: var(--ink); }

/* ----------------------------------------------------------------- trust  */

.trust { padding: 48px 0; text-align: center; }

.trust__head {
  margin: 0 0 24px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.trust__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- grids  */

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3, .grid--features { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ----------------------------------------------------------------- cards  */

.card {
  padding: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card__num {
  display: block;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}

.card__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.card__body  { margin: 0; font-size: var(--text-body-md); line-height: 1.65; color: var(--ink-dim); }

/* A feature is an icon, a line and a paragraph — no surface of its own. */
.feature__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.feature__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.feature__body  { margin: 0; font-size: var(--text-body-md); line-height: 1.6; color: var(--ink-dim); }

/* -------------------------------------------------------- property cards  */

.property {
  display: block;
  text-decoration: none;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.property:hover {
  border-color: var(--stroke-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.property__thumb {
  position: relative;
  aspect-ratio: 384 / 180;
  background: var(--sky-tint) center/cover no-repeat;
}

/* The tags sit on a photograph, so they carry their own dark plate rather
   than relying on the page's mode. */
.property__tag {
  position: absolute;
  top: 12px;
  padding: 4px 8px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--on-media);
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.property__tag--left  { left: 12px; color: var(--on-media-accent); }
.property__tag--right { right: 12px; }

.property__body { padding: var(--space-md); }
.property__name { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.property__where { margin: 0 0 8px; font-size: var(--text-label-md); color: var(--ink-mute); }
.property__price { margin: 0; font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------- CTA band   */

.cta {
  padding: 80px 0;
  text-align: center;
  /* The band always ships with .theme-dark, so this is the same #0b0f16 it
     was in both existing modes — and follows the palette in immersive. */
  background: var(--bg-raised);
}

.cta__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ------------------------------------------------------------ cookie bar  */

/* PDPA 2022: nothing non-essential runs until this is answered, so it has to
   be answerable — the dismiss is a real choice, not an X that implies consent. */
.cookies {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: min(840px, calc(100vw - 32px));
  padding: var(--space-md) var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}

.cookies__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-label-md);
  line-height: 1.6;
  color: var(--ink-dim);
}
.cookies__text a { color: var(--accent); }

.cookies__actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }

/* ------------------------------------------------------------------ misc  */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--features { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .section { padding-block: 72px; }
  .nav, .footer { padding-inline: var(--space-lg); }
}

@media (max-width: 720px) {
  /* The link row would wrap into a second line and push the actions off the
     edge, so below this width it moves into a disclosure menu. */
  .nav__links { display: none; }

  /* The toggle must not be squeezed by the brand and CTA either side of it —
     flex would otherwise shrink it below the 44px touch target. */
  .nav__toggle { display: inline-flex; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; }

  /* Keep the CTA on one line; at this width it wraps to two and knocks the
     whole bar out of alignment. */
  .nav { padding-inline: var(--space-sm); gap: var(--space-sm); }
  .nav .btn--primary { white-space: nowrap; padding-inline: var(--space-md); }
  .nav__brand { font-size: 16px; }

  /* Brand, toggle, CTA and hamburger do not all fit a 375px bar at their
     desktop sizes — the row ran 25px over. The toggle gives up its padding
     first: two letters need none, and it keeps a 34px target either way. */
  .nav__actions { gap: var(--space-2xs); }
  .nav__lang { min-width: 30px; padding: 0; }
  /* "Request a demo" is three words where "Omba onyesho" is two, so English
     is the width that decides this one. */
  .nav .btn--primary { padding-inline: var(--space-sm); }

  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    background: var(--panel);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-2);
  }
  .nav.is-open .nav__links a { padding: 12px 0; }

  .nav__signin { display: none; }
  /* The toggle stays: a visitor on the wrong language needs it most on a
     phone, where the menu is behind another tap. */

  /* Inside the stacked menu the dropdown has no room to float, so it becomes
     an indented list that pushes the rest of the menu down. */
  .nav__more { width: 100%; }
  .nav__more > summary { padding: 12px 0; }
  .nav__menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0 var(--space-sm);
    background: none;
    border: 0;
    box-shadow: none;
  }

  .grid--2, .grid--3, .grid--4, .grid--features { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .section { padding-block: 56px; }
  .hero { padding-top: 56px; }
  .trust__logos { gap: 28px; font-size: 15px; }

  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__actions .btn { flex: 1 1 0; }
}

/* ============================================================================
   Forms — the demo request, contact and search pages.
   ========================================================================== */

.form-card {
  padding: var(--space-xl);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.form-card__title { margin: 0 0 var(--space-lg); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }

.field__label { font-size: var(--text-label-md); font-weight: 600; color: var(--ink); }

.field__input {
  width: 100%;
  min-height: var(--control-md);
  padding: 11px var(--space-md);
  font-family: inherit;
  font-size: var(--text-body-md);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.field__input::placeholder { color: var(--ink-faint); }
.field__input:hover { border-color: var(--stroke-strong); }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

textarea.field__input { resize: vertical; min-height: 96px; line-height: 1.6; }

select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 20px center, right 14px center;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field__hint { font-size: var(--text-body-sm); color: var(--ink-mute); }

/* The box is 20px but the row is the click target, so it clears 44px. */
.checkline {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  min-height: var(--control-md);
  padding: 10px 0;
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--ink-dim);
  cursor: pointer;
}

.checkline input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* ------------------------------------------------------------ list bits  */

.ticks { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }

.ticks li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--ink-dim);
}
.ticks li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* The pricing tiers use a neutral tick — in a list of six features the amber
   competes with the plan's own call to action. */
.ticks--plain li::before { color: var(--ink); }

.numbered {
  margin: 0;
  padding: var(--space-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: left;
}

.numbered__head {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.numbered ol { margin: 0; padding-left: 20px; }
.numbered li { margin-bottom: 10px; font-size: var(--text-body-md); color: var(--ink-dim); }
.numbered li:last-child { margin-bottom: 0; }
.numbered a { color: var(--accent); }

/* ------------------------------------------------------------- notices   */

.notice {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--status-info-border);
  background: var(--status-info-bg);
}

.notice__dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--status-info-fg); }
.notice__title { margin: 0 0 4px; font-size: var(--text-body-md); font-weight: 600; color: var(--status-info-fg); }
.notice__body { margin: 0; font-size: var(--text-body-sm); line-height: 1.55; color: var(--ink-dim); }

/* The success mark on a confirmation page. */
.tick-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  display: grid;
  place-items: center;
}

.split { display: grid; grid-template-columns: 480px 1fr; gap: 80px; align-items: start; }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ============================================================================
   Pricing tiers and FAQ.
   ========================================================================== */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.tier {
  padding: var(--space-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* The recommended tier is lifted out of the row rather than tinted: a white
   surface and a real border read as "this one" without colour doing the work. */
.tier--featured {
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-2);
}

.tier__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-inverse);
}

.tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
}

.tier__amount { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
.tier__per    { font-size: var(--text-label-md); color: var(--ink-mute); }

.tier__rule { height: 1px; margin: var(--space-lg) 0 var(--space-md); background: var(--stroke); }
.tier .ticks { margin: 0; }

/* ------------------------------------------------------------ accordion  */

/* details/summary again — open/close, keyboard and Escape for free, and the
   answers stay in the document for search engines even when collapsed. */
.accordion {
  margin-bottom: var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-size: var(--text-body-md);
  font-weight: 600;
}
.accordion > summary::-webkit-details-marker { display: none; }

.accordion > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.8px solid var(--ink-mute);
  border-bottom: 1.8px solid var(--ink-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.accordion[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.accordion > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.accordion__body {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-body-md);
  line-height: 1.65;
  color: var(--ink-dim);
}

@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ============================================================================
   Gallery — search, type filters and the results grid.
   ========================================================================== */

.search {
  position: relative;
  width: min(380px, 100%);
  margin-inline: auto;
}

.search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}

.search .field__input {
  padding-left: 42px;
  border-radius: var(--radius-pill);
  background: var(--panel);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.toolbar__chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.toolbar__count { margin-left: auto; font-size: var(--text-label-md); color: var(--ink-mute); }

.chip {
  height: var(--control-sm);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip:hover { border-color: var(--stroke-strong); color: var(--ink); }

.chip[aria-pressed="true"] {
  color: var(--ink-inverse);
  background: var(--ink);
  border-color: transparent;
}

.chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Shown when a filter or search clears the grid. */
.empty {
  padding: 64px var(--space-lg);
  text-align: center;
  border: 1px dashed var(--stroke-strong);
  border-radius: var(--radius-lg);
}

.empty__title { margin: 0 0 8px; font-size: var(--text-card-title); font-weight: 700; }
.empty__body  { margin: 0 0 var(--space-lg); font-size: var(--text-body-md); color: var(--ink-dim); }

/* ---------------------------------------------------------- pagination   */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xl);
}

.pagination button {
  width: 40px;
  height: 40px;
  font-family: inherit;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.pagination button:hover { border-color: var(--stroke-strong); color: var(--ink); }

.pagination button[aria-current="page"] {
  color: var(--ink-inverse);
  background: var(--ink);
  border-color: transparent;
}

/* ============================================================================
   Contact.
   ========================================================================== */

.split--contact {
  grid-template-columns: 460px 520px;
  justify-content: center;
  gap: 80px;
}

.details { margin: var(--space-xl) 0 0; }

.detail + .detail { margin-top: var(--space-md); }

.detail__label {
  margin: 0 0 4px;
  font-size: var(--text-body-sm);
  color: var(--ink-mute);
}

.detail__value {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.detail__value a { text-decoration: none; }
.detail__value a:hover { text-decoration: underline; }

/* A still of the location rather than an embedded map: an embed would load a
   third party and set cookies before the consent bar has been answered, which
   is exactly what that bar promises will not happen. Clicking is the
   visitor's choice, and only then does anything leave the page. */
.map {
  position: relative;
  display: block;
  margin-top: var(--space-xl);
  aspect-ratio: 460 / 200;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map:hover { border-color: var(--stroke-strong); }

.map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 1000px) {
  .split--contact { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ============================================================================
   Legal pages, job listings and step trails.
   ========================================================================== */

/* ------------------------------------------------------------- legal doc  */

.doc { display: grid; grid-template-columns: 260px 720px; justify-content: center; gap: 64px; }

.toc {
  position: sticky;
  top: 96px;
  align-self: start;
  padding: var(--space-md);
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
}

.toc__head {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin-bottom: 8px; }
.toc a { font-size: var(--text-label-md); color: var(--ink-dim); text-decoration: none; }
.toc a:hover { color: var(--ink); }

.doc__section { scroll-margin-top: 96px; }
.doc__section h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.doc__section p  { margin: 0 0 var(--space-xl); font-size: var(--text-body-md); line-height: 1.7; color: var(--ink-dim); }

@media (max-width: 1000px) {
  .doc { grid-template-columns: 1fr; gap: var(--space-xl); }
  .toc { position: static; }
}

/* ------------------------------------------------------------- listings  */

.role {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.role + .role { margin-top: var(--space-sm); }
.role__main { flex: 1 1 auto; min-width: 0; }
.role__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.role__body  { margin: 0 0 var(--space-sm); font-size: var(--text-body-md); line-height: 1.6; color: var(--ink-dim); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* The solid .badge marks one thing out; these are metadata, so they recede. */
.badge--subtle {
  background: var(--bg-raised);
  color: var(--ink-dim);
  border: 1px solid var(--border-subtle);
}

@media (max-width: 720px) {
  .role { flex-direction: column; align-items: stretch; }
  .role .btn { width: 100%; }
}

/* ----------------------------------------------------------- step trail  */

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

.step { display: flex; align-items: center; gap: 10px; font-size: var(--text-label-md); font-weight: 600; }

.step__mark {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--control-hover);
  color: var(--ink-mute);
  border: 1px solid var(--stroke);
}

.step--done .step__mark,
.step--current .step__mark {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: transparent;
}

.step--upcoming { color: var(--ink-mute); }

/* ============================================================================
   Audience pages — stat row, pain points, alternating features, pull quote.
   ========================================================================== */

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  margin-top: var(--space-2xl);
}

.stat { text-align: center; }

.stat__num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.stat__label { display: block; margin-top: 6px; font-size: var(--text-body-sm); color: var(--ink-mute); }

/* A pain point leads with a mark, not an illustration — the point is the
   sentence, and the icon is only there to break the column. */
.pain__icon {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  font-weight: 700;
}

/* ------------------------------------------------------------- features  */

.feature-row {
  display: grid;
  grid-template-columns: 576px 1fr;
  gap: 64px;
  align-items: center;
}

/* Every other row puts the visual first, so the page alternates. */
.feature-row--flip { grid-template-columns: 1fr 576px; }
.feature-row--flip .feature-row__text { order: 2; }
.feature-row--flip .feature-row__visual { order: 1; }

.feature-row__title { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.feature-row__body  { margin: 0 0 var(--space-lg); font-size: 17px; line-height: 1.6; color: var(--ink-dim); }

.feature-row__visual { display: grid; place-items: center; gap: var(--space-md); }

@media (max-width: 1000px) {
  .feature-row, .feature-row--flip { grid-template-columns: 1fr; gap: var(--space-xl); }
  .feature-row--flip .feature-row__text,
  .feature-row--flip .feature-row__visual { order: initial; }
}

/* ---------------------------------------------------------------- quote  */

.quote { text-align: center; }

.quote__text {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: var(--text-body-md);
  color: var(--ink-dim);
}

.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: var(--text-label-md);
  font-weight: 700;
}

.avatar--lg { width: 56px; height: 56px; font-size: 17px; }

/* ----------------------------------------------------------------- team  */

.team { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); }
.team__member { text-align: center; }
.team__name { margin: 12px 0 2px; font-size: var(--text-body-md); font-weight: 600; }
.team__role { margin: 0; font-size: var(--text-body-sm); color: var(--ink-mute); }
.team .avatar { margin-inline: auto; }

@media (max-width: 900px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   Blog index and article.
   ========================================================================== */

/* Category badges carry a tone so a scan of the grid separates guides from
   news from kit reviews without reading a word. */
.badge--info { background: var(--status-info-bg); color: var(--status-info-fg); border: 1px solid var(--status-info-border); }
.badge--ok   { background: var(--status-ok-bg);   color: var(--status-ok-fg);   border: 1px solid var(--status-ok-border); }
.badge--warn { background: var(--status-warn-bg); color: var(--status-warn-fg); border: 1px solid var(--status-warn-border); }

.post {
  display: block;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.post:hover { border-color: var(--stroke-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }

.post__thumb { aspect-ratio: 384 / 160; background: var(--bg-raised) center/cover no-repeat; }
.post__body  { padding: var(--space-md); }
.post__title { margin: 12px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.post__excerpt { margin: 0 0 12px; font-size: var(--text-label-md); line-height: 1.55; color: var(--ink-dim); }
.post__meta  { margin: 0; font-size: var(--text-body-sm); color: var(--ink-mute); }

/* The lead article runs the full width with the image beside the words. */
.post--featured { display: grid; grid-template-columns: 560px 1fr; margin-bottom: var(--space-lg); }
.post--featured .post__thumb { aspect-ratio: auto; height: 100%; min-height: 320px;
  background-image: radial-gradient(120% 90% at 30% 0%, var(--wash-top) 0%, var(--wash-mid) 60%, var(--wash-deep) 100%); }
.post--featured .post__body { padding: var(--space-xl); align-self: center; }
.post--featured .post__title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.post--featured .post__excerpt { font-size: var(--text-body-md); }

@media (max-width: 900px) {
  .post--featured { grid-template-columns: 1fr; }
  .post--featured .post__thumb { min-height: 200px; }
}

/* ------------------------------------------------------------- article   */

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  font-size: var(--text-label-md);
  color: var(--ink-mute);
}

.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb li[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--stroke-strong); }

.article__hero {
  height: 400px;
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 30% 0%, var(--wash-top) 0%, var(--wash-mid) 60%, var(--wash-deep) 100%) center/cover no-repeat;
}

.article h2 { margin: var(--space-2xl) 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.article p  { margin: 0 0 var(--space-md); font-size: 17px; line-height: 1.75; color: var(--ink-dim); }

.author {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
}

.author__name { margin: 0 0 6px; font-size: var(--text-body-md); font-weight: 600; }
.author__bio  { margin: 0; font-size: var(--text-label-md); line-height: 1.6; color: var(--ink-dim); }

/* -------------------------------------------------------- newsletter    */

.news-row {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.news-row .search { margin: 0; }

@media (max-width: 560px) { .news-row .search, .news-row .btn { width: 100%; } }

/* ------------------------------------------------------------ stat tiles */

.tile {
  padding: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.tile__label {
  margin: 0 0 8px;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.tile__value { margin: 0 0 10px; font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }

.tile__trend {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--ink-mute);
}

.tile__trend--up   { background: var(--status-ok-bg);     color: var(--status-ok-fg); }
.tile__trend--down { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.case-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 64px; margin-top: var(--space-xl); }
.case-hero {
  height: 420px;
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--sky-tint) center/cover no-repeat;
}

/* ------------------------------------------------------------ mock bits  */

/* The marketing pages illustrate tour features with small still mock-ups.
   These deliberately do NOT reuse the tour's own classes — css/style.css is
   not loaded here, so borrowing them would render unstyled. */

.chip-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

.mock-toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 340px;
  max-width: 100%;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  font-size: var(--text-label-md);
}

.mock-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.mock-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  height: var(--control-md);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--control-subtle);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
}

.mock-link__url {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  color: var(--ink-dim);
}

.mock-qr {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  background:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0 / 14px 14px;
  border: 8px solid var(--panel);
  box-shadow: 0 0 0 1px var(--stroke);
}

/* The one route from the curated gallery into the full directory. */
.toolbar__more { margin: 0 0 var(--space-lg); font-size: var(--text-body-md); font-weight: 600; }
.toolbar__more a { color: var(--accent); text-decoration: none; }
.toolbar__more a:hover { text-decoration: underline; }