/*
 * Vivestay public website — design system (RM000026 / SPEC000016 rev 3).
 *
 * Extends the Vivestay product identity (operator console, RM000009):
 * white surfaces, Vivestay blue as the action colour, generous spacing,
 * subtle borders and shadows, accessible contrast. Revision 3 brings the
 * hospitality warmth: Mediterranean sand canvases, a terracotta accent,
 * a soft sun in the artwork, softer larger radii and alternating warm
 * section rhythm. System font stack; no external resources of any kind.
 */

:root {
  --brand: #1f5fd6;
  --brand-strong: #17429b;
  --brand-deep: #0f1e33;
  --brand-soft: #eaf1fc;
  --brand-softer: #f3f7fd;

  /* Mediterranean warmth */
  --accent: #c65a33;
  --accent-strong: #a8451f;
  --accent-soft: #f8e7dc;
  --sand: #f8f3e9;
  --sand-deep: #f1e7d2;
  --sand-border: #e9dfc9;
  --sun: #f0b45c;

  --canvas: #ffffff;
  --canvas-alt: #f8f7f4;
  --surface: #ffffff;
  --text: #1d2733;
  --muted: #4d5d6e;
  --faint: #8493a2;
  --border: #e7e4dd;
  --border-strong: #d6d1c6;
  --inverse-text: #f2f6fc;
  --inverse-muted: #aebfd4;

  --ok: #1a7f52;
  --ok-soft: #e6f4ec;
  --warn: #a8620a;
  --warn-soft: #fbeed9;
  --info: #2f6b8f;
  --info-soft: #e7f1f6;

  --radius-lg: 18px;
  --radius: 11px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(31, 36, 26, 0.06);
  --shadow: 0 3px 14px rgba(31, 36, 26, 0.08);
  --shadow-lg: 0 16px 44px rgba(31, 36, 26, 0.15);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: 1104px;
  --container-narrow: 720px;
}

/* ----------------------------------------------------------- base ----- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  text-wrap: balance;
}

p {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.container-narrow {
  max-width: var(--container-narrow);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-deep);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------- buttons ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--brand-strong);
  box-shadow: var(--shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-strong);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--brand);
  background: var(--brand-softer);
}

.btn-primary-inverse {
  background: #fff;
  color: var(--brand-strong);
}

.btn-primary-inverse:hover {
  background: var(--brand-soft);
}

.btn-ghost-inverse {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost-inverse:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn-sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.94rem;
}

.btn-lg {
  padding: 0.9rem 1.9rem;
  font-size: 1.05rem;
}

.text-link {
  font-weight: 650;
  text-decoration: none;
  color: var(--brand-strong);
}

.text-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------- header ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  /* The bar may use more width than prose sections: seven-locale nav +
     selector + login + CTA need the room (Greek and Spanish especially). */
  max-width: 1280px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}

.logo svg {
  display: block;
  width: 32px;
  height: 32px;
}

.logo-name {
  font-weight: 750;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.brand-inverse {
  color: #fff;
}

.main-nav {
  display: flex;
  gap: 1.35rem;
  margin-inline-start: 0.4rem;
}

.main-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.98rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--text);
}

.main-nav a[aria-current='page'] {
  color: var(--brand-strong);
  border-bottom-color: var(--brand);
}

/* Everything on the right end of the header: selector, login, CTA, burger.
   One flex cluster with a single alignment axis — nothing in it may wrap
   or shrink, so the bar keeps one height at every width. */
.header-end {
  flex: none;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-end .btn,
.login-link {
  white-space: nowrap;
}

.login-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.96rem;
}

.login-link:hover {
  color: var(--text);
}

/* --------------------------------------- language + country selector -- */

.locale-menu {
  position: relative;
}

/* Suppress the native disclosure marker in every engine: `list-style` for
   Firefox, `::marker` for spec-conformant engines, the -webkit pseudo for
   older WebKit. Without all three the summary grows a stray triangle. */
.locale-menu summary,
.mobile-nav summary,
.faq-item summary {
  list-style: none;
}

.locale-menu summary::marker,
.mobile-nav summary::marker,
.faq-item summary::marker {
  content: none;
}

.locale-menu summary::-webkit-details-marker,
.mobile-nav summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
  display: none;
}

.locale-menu summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.5rem 0.78rem;
  min-height: 42px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 650;
  font-size: 0.88rem;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    background-color 140ms ease;
}

.locale-menu summary:hover,
.locale-menu[open] summary {
  border-color: var(--brand);
  color: var(--text);
  background: var(--brand-softer);
}

.locale-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.locale-caret {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.locale-menu[open] .locale-caret {
  transform: rotate(-135deg) translateY(2px);
}

/* The open selector is an anchored popover — never part of the document
   flow, so opening it can never move the header or the page. */
.locale-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  width: max-content;
  min-width: 300px;
  max-width: min(92vw, 460px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.05rem 1.1rem 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.4rem 1.1rem;
}

.locale-group + .locale-group {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 1.1rem;
}

.locale-group-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--faint);
  margin-bottom: 0.45rem;
}

.locale-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.locale-group a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 550;
  font-size: 0.96rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  min-height: 40px;
  white-space: nowrap;
}

.locale-group a:hover {
  background: var(--brand-softer);
  color: var(--brand-strong);
}

.locale-group a[aria-current='true'] {
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-weight: 700;
}

.locale-group a[aria-current='true']::after,
.locale-group a.is-remembered::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
  margin-inline-start: auto;
}

.locale-group a.is-remembered::after {
  background: var(--accent);
}

.locale-all {
  color: var(--muted);
  font-weight: 500;
}

/* Small screens: the popover becomes a full-width sheet under the header,
   with the two groups stacked. Still the same details/summary — no JS. */
@media (max-width: 639px) {
  .locale-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 74px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .locale-group + .locale-group {
    border-inline-start: none;
    padding-inline-start: 0;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
  }
}

/* Mobile navigation (details/summary — works without JS) */

.mobile-nav {
  display: none;
}

.mobile-nav summary {
  cursor: pointer;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.burger span {
  height: 2.5px;
  border-radius: 2px;
  background: var(--text);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.mobile-nav[open] .burger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-nav[open] .burger span:nth-child(2) {
  opacity: 0;
}

.mobile-nav[open] .burger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 24px 1.4rem;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}

.mobile-nav-panel > a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  padding: 0.65rem 0.25rem;
  border-radius: var(--radius-sm);
}

.mobile-nav-panel a.btn {
  margin-top: 0.6rem;
  color: #fff;
}

/* Header responsive tiers — deliberate, not emergent:
   ≥ 1280px  full: logo · nav · selector · login · CTA
   980–1279  compact: login link retires (it stays in the menu + footer)
   < 980px   mobile: logo · selector · burger (nav, login, CTA in the panel) */
@media (max-width: 1279px) {
  .header-bar {
    gap: 1.1rem;
  }

  .main-nav {
    gap: 1.05rem;
  }

  .main-nav a {
    font-size: 0.94rem;
  }

  .header-end {
    gap: 0.8rem;
  }

  .login-link {
    display: none;
  }
}

@media (max-width: 979px) {
  .main-nav,
  .header-cta {
    display: none;
  }

  .mobile-nav {
    display: block;
  }
}

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

.hero {
  background:
    radial-gradient(1150px 560px at 86% -14%, var(--brand-soft) 0%, transparent 54%),
    radial-gradient(860px 540px at -12% 112%, #f5d8c6 0%, transparent 60%),
    radial-gradient(520px 320px at 62% 118%, rgba(240, 180, 92, 0.28) 0%, transparent 62%),
    linear-gradient(180deg, #f6eddd 0%, var(--sand) 58%, #fdfbf7 100%);
  border-bottom: 1px solid var(--sand-border);
  padding: 4.8rem 0 4.4rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3.5rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(198, 90, 51, 0.22);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.55rem);
  font-weight: 780;
  letter-spacing: -0.025em;
}

.hero .lead {
  margin-top: 1.3rem;
  font-size: 1.17rem;
  color: var(--muted);
  max-width: 36em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.actions-center {
  justify-content: center;
}

.hero-note {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero-note li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--sand-border);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 550;
}

.hero-note li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.75;
}

.hero-art-wrap {
  display: flex;
  justify-content: center;
}

.hero-art {
  width: min(100%, 520px);
  filter: drop-shadow(0 24px 40px rgba(61, 48, 28, 0.16));
}

@media (max-width: 1023px) {
  .hero {
    padding: 3.2rem 0 3rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .hero-art {
    width: min(100%, 420px);
  }
}

/* ---------------------------------------------------- page header ----- */

.page-header {
  background:
    radial-gradient(760px 340px at 90% -30%, var(--brand-soft) 0%, transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--canvas) 100%);
  padding: 4rem 0 2.6rem;
}

.page-header h1 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 770;
  letter-spacing: -0.022em;
  max-width: 22em;
}

.page-header .lead {
  margin-top: 1.1rem;
  font-size: 1.13rem;
  color: var(--muted);
  max-width: 44em;
}

/* ------------------------------------------------------- sections ----- */

.section {
  padding: 4.4rem 0;
}

.section-warm {
  background: var(--sand);
}

.section-warm + .section-warm {
  padding-top: 0;
}

.section-tight {
  padding: 1.6rem 0;
}

.section-prose {
  padding: 2.8rem 0;
}

.section-head {
  max-width: 44em;
  margin-bottom: 2.6rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2,
.section h2 {
  font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.section-head .lead {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.section-more {
  margin-top: 2rem;
}

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

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

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

.section-warm .card {
  border-color: var(--sand-border);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
  min-height: 44px;
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.card-icon .icon {
  width: 24px;
  height: 24px;
}

.card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--muted);
  font-size: 0.99rem;
}

/* Cards that are entirely a link (country cards) */

.card-link-wrap {
  padding: 0;
}

.card-link {
  display: block;
  height: 100%;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.card-link-wrap:hover .card-icon {
  background: var(--brand);
  color: #fff;
}

.card-link h3 {
  color: var(--brand-strong);
}

@media (max-width: 960px) {
  .cards,
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cards,
  .cards-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------- steps ----- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  counter-reset: step;
}

.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.section-warm .step-card {
  border-color: var(--sand-border);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff;
  font-weight: 750;
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}

.step-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.step-card p {
  color: var(--muted);
  font-size: 0.99rem;
}

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

/* --------------------------------------------------------- notice ----- */

.notice {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: var(--info-soft);
  border: 1px solid #cfe2ec;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
}

.notice-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--info);
  box-shadow: var(--shadow-sm);
}

.notice-icon .icon {
  width: 23px;
  height: 23px;
}

.notice-title {
  font-size: 1.12rem;
  margin-bottom: 0.4rem;
}

.notice p {
  color: #274e63;
  font-size: 0.99rem;
}

/* ---------------------------------------------------------- split ----- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 3.5rem;
  align-items: center;
}

.split-art {
  display: flex;
  justify-content: center;
}

.split-art-svg {
  width: min(100%, 320px);
  filter: drop-shadow(0 18px 32px rgba(61, 48, 28, 0.14));
}

@media (max-width: 1023px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* ------------------------------------------------------ icon list ----- */

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.icon-list li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.icon-list-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.icon-list-icon .icon {
  width: 24px;
  height: 24px;
}

.icon-list h3 {
  font-size: 1.08rem;
  margin-bottom: 0.3rem;
}

.icon-list p {
  color: var(--muted);
  font-size: 0.98rem;
}

.icon-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.6rem;
}

@media (max-width: 960px) {
  .icon-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .icon-list-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- journey ----- */

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}

.journey-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 1.8rem 1.8rem 1.6rem;
}

.journey-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.journey-head .step-num {
  margin-bottom: 0;
}

.journey-head h2 {
  font-size: 1.35rem;
}

.journey-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.journey-col {
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.2rem;
}

.journey-you {
  background: var(--sand);
  border: 1px solid var(--sand-border);
}

.journey-vivestay {
  background: var(--brand-softer);
  border: 1px solid #d8e5f8;
}

.journey-col h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.journey-you h3 {
  color: var(--muted);
}

.journey-vivestay h3 {
  color: var(--brand-strong);
}

.journey-col ul {
  margin: 0;
  padding-inline-start: 1.15rem;
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.97rem;
}

.journey-you li::marker {
  color: var(--accent);
}

.journey-vivestay li::marker {
  color: var(--brand);
}

@media (max-width: 720px) {
  .journey-cols {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ faq ----- */

.faq {
  display: grid;
  gap: 0.85rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease;
}

.section-warm .faq-item {
  border-color: var(--sand-border);
}

.faq-item[open] {
  border-color: var(--border-strong);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h3 {
  font-size: 1.06rem;
  font-weight: 650;
}

.faq-item summary:hover h3 {
  color: var(--brand-strong);
}

.faq-marker {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-soft);
}

.faq-marker::before,
.faq-marker::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--brand-strong);
  border-radius: 1px;
  transition: transform 160ms ease;
}

.faq-marker::before {
  width: 10px;
  height: 2px;
}

.faq-marker::after {
  width: 2px;
  height: 10px;
}

.faq-item[open] .faq-marker::after {
  transform: rotate(90deg);
}

.faq-body {
  padding: 0 1.4rem 1.25rem;
}

.faq-body p {
  color: var(--muted);
  font-size: 0.99rem;
}

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

.prose h2 {
  font-size: 1.5rem;
  margin: 2.2rem 0 0.9rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.prose strong {
  color: var(--text);
}

.section-prose + .section-prose {
  padding-top: 0;
}

.company-details {
  margin: 0 0 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.55rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  background: var(--sand);
}

.company-details dt {
  font-weight: 650;
  color: var(--text);
}

.company-details dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 640px) {
  .company-details {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .company-details dd {
    margin-bottom: 0.7rem;
  }
}

.legal-status {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  color: #7a3517;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.8rem 1.1rem;
  font-size: 0.96rem;
  font-weight: 550;
}

/* ----------------------------------------------------------- form ----- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.2rem 2.2rem 2rem;
}

.form-card h2 {
  margin-bottom: 1.4rem;
}

.ea-form {
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-weight: 650;
  font-size: 0.98rem;
}

.optional {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--text);
  background: var(--canvas-alt);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.72rem 0.9rem;
  width: 100%;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.field textarea {
  resize: vertical;
  min-height: 7.5em;
}

.form-transparency {
  color: var(--muted);
  font-size: 0.92rem;
}

.form-fallback {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.98rem;
}

/* Submission states (SPEC000016 §Lead capture): success, recoverable
   error and validation summary. Panels are focus targets (tabindex=-1)
   so assistive tech lands on the outcome after submit. */

.form-panel {
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  border: 1.5px solid;
}

.form-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
}

.form-panel p {
  margin: 0;
  font-size: 0.98rem;
}

.form-panel:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-success {
  background: #eef7f0;
  border-color: #b5dcc2;
  color: #14532d;
}

.form-error {
  background: #fdf0ef;
  border-color: #ecc1bd;
  color: #7f1d17;
}

.form-validation {
  background: #fdf6ec;
  border: 1.5px solid #e8d3ae;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #6b4a10;
}

.form-validation:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-validation p {
  margin: 0 0 0.4rem;
  font-weight: 650;
  font-size: 0.98rem;
}

.form-validation ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
}

.form-validation a {
  color: inherit;
  font-weight: 600;
}

.field-error {
  margin: 0.1rem 0 0;
  color: #7f1d17;
  font-size: 0.92rem;
  font-weight: 550;
}

.field [aria-invalid='true'] {
  border-color: #c4423a;
}

.ea-form button[aria-busy='true'],
.contact-form button[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

/* Checkbox field (RM000039 privacy acknowledgement): the control sits
   beside its label rather than under it, and the label keeps its normal
   reading width so a two-line consent sentence does not become a column
   one word wide on a phone. */
.field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.field-check input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: #1f5fd6;
}

.field-check label {
  margin: 0;
  font-weight: 450;
  line-height: 1.5;
}

/* The error note for a checkbox spans both columns, so it lines up with
   the label instead of hanging under the box. */
.field-check .field-error {
  grid-column: 1 / -1;
}

/* Anti-bot widget slot. Reserves no space until a provider is actually
   configured, so the default build has no gap where nothing renders. */
.contact-challenge {
  margin: 1rem 0 0;
}

/* Honeypot (ADR-0030 abuse controls): visually removed, still present
   for the bots that fill every field. Not display:none so naive bots
   don't skip it, but fully out of the accessibility tree and tab order. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .form-card {
    padding: 1.5rem 1.2rem 1.4rem;
  }
}

/* ------------------------------------------------------- link list ----- */

.link-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 1.08rem;
}

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

.cta-band {
  background:
    radial-gradient(900px 400px at 14% 122%, rgba(31, 95, 214, 0.38) 0%, transparent 60%),
    radial-gradient(700px 320px at 96% -20%, rgba(198, 90, 51, 0.28) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand-deep) 0%, #14304f 100%);
  color: var(--inverse-text);
  text-align: center;
  padding: 4.6rem 0;
}

.cta-band h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
}

.cta-band p {
  margin: 1rem auto 0;
  max-width: 40em;
  color: var(--inverse-muted);
  font-size: 1.08rem;
}

.cta-band .actions {
  margin-top: 2.1rem;
}

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

.site-footer {
  background: var(--brand-deep);
  color: var(--inverse-text);
  padding: 3.6rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 3.6fr) repeat(4, minmax(0, 2.1fr));
  gap: 2.5rem;
  padding-bottom: 2.6rem;
}

.footer-brand p {
  margin-top: 1rem;
  color: var(--inverse-muted);
  font-size: 0.97rem;
  max-width: 26em;
}

.footer-col h2 {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--inverse-muted);
  margin-bottom: 0.9rem;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer-col a {
  color: var(--inverse-text);
  text-decoration: none;
  font-size: 0.98rem;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.6rem;
  color: var(--inverse-muted);
  font-size: 0.92rem;
}

.footer-langs a {
  color: var(--inverse-text);
  text-decoration: none;
  font-weight: 600;
  padding: 0.2rem 0.1rem;
}

.footer-langs a:hover {
  text-decoration: underline;
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

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

/* --- Pricing table and calculator (RM000035 / ADR-0043) ------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0.75rem;
  font-variant-numeric: tabular-nums;
}

.pricing-table th,
.pricing-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}

.pricing-table thead th {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.pricing-table td:last-child,
.pricing-table th:last-child {
  text-align: right;
}

.pricing-note {
  font-size: 0.95rem;
  opacity: 0.8;
}

.pricing-calc {
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  border-radius: 14px;
}

.pricing-calc-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.pricing-calc-input {
  width: 8rem;
  padding: 0.55rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.2));
  border-radius: 10px;
}

.pricing-calc-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}

.pricing-calc-out dt {
  font-size: 0.85rem;
  opacity: 0.7;
}

.pricing-calc-out dd {
  margin: 0.2rem 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pricing-calc-note {
  font-size: 0.85rem;
  opacity: 0.72;
  margin-top: 0.5rem;
}

@media (max-width: 520px) {
  .pricing-calc-out {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------- consent (RM000037) --

   The banner and the preferences dialog. Two rules here are load-bearing
   rather than decorative and must survive any restyle:

   1. "Accept all" and "Reject all" are the SAME class (`btn btn-primary`)
      at the same size in the same row — equal prominence is a legal
      requirement, not a taste. Never give one of them a quieter class,
      a smaller size, or a lower-contrast colour.
   2. `[hidden]` must actually hide. The banner ships in the HTML of every
      page and is revealed by the engine only when a decision is missing;
      a `display` rule that outranks `[hidden]` would show it to everyone,
      permanently.                                                        */

.consent-banner[hidden],
[hidden] {
  display: none !important;
}

.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem 0 1.3rem;
}

.consent-banner-inner {
  width: min(var(--container), calc(100% - 2.5rem));
  margin: 0 auto;
  display: grid;
  gap: 1rem 2.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.consent-banner-text h2 {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.consent-banner-text h2:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.consent-banner-text p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--muted);
  max-width: 68ch;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Accept and Reject share one width so neither can read as the default. */
.consent-actions .btn-primary {
  min-width: 11rem;
}

@media (max-width: 860px) {
  .consent-banner-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .consent-actions .btn {
    flex: 1 1 12rem;
  }
}

/* ------------------------------------------------- preferences dialog */

.consent-dialog {
  width: min(760px, calc(100% - 2rem));
  max-height: min(86vh, 900px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.consent-dialog::backdrop {
  background: rgba(15, 30, 51, 0.55);
}

.consent-dialog-panel {
  min-width: 0;
  padding: 1.5rem 1.6rem 1.7rem;
}

.consent-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.consent-dialog-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.consent-dialog-head h2:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.consent-close {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.consent-close:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.consent-dialog-intro {
  margin: 0.7rem 0 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.consent-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.consent-category {
  /* A grid item defaults to min-width:auto, so the inventory table's
     min-width would push the whole dialog wider than the viewport and
     scroll the DIALOG horizontally instead of the table. */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: var(--canvas-alt);
}

.consent-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.consent-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.consent-toggle input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
  cursor: pointer;
}

.consent-toggle input:disabled {
  cursor: default;
}

.consent-toggle label {
  font-weight: 650;
  cursor: pointer;
}

.consent-toggle input:disabled + label {
  cursor: default;
}

.consent-always {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

.consent-category-desc {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.consent-empty {
  margin: 0.7rem 0 0;
  font-size: 0.87rem;
  font-style: italic;
  color: var(--faint);
}

/* ---------------------------------------------------- cookie inventory */

.consent-table-wrap {
  margin-top: 0.8rem;
  overflow-x: auto;
}

.consent-table {
  width: 100%;
  /* Seven columns of real prose. Cramming them into the dialog width
     wraps the purpose text one word per line and makes the disclosure
     genuinely hard to read, so the table keeps a usable width and
     scrolls inside its own wrapper instead. */
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.consent-table td:nth-child(4) {
  min-width: 24ch;
}

.consent-table td:nth-child(5) {
  min-width: 18ch;
}

.consent-table td:nth-child(3),
.consent-table td:nth-child(6),
.consent-table td:nth-child(7) {
  white-space: nowrap;
}

.consent-table th,
.consent-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.consent-table th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  white-space: nowrap;
}

.consent-table td code {
  font-size: 0.82rem;
  white-space: nowrap;
}

.consent-policy-version {
  margin: 1.2rem 0 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.consent-dialog-actions {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
}

/* ------------------------------------------- persistent footer control */

/* Looks exactly like its sibling links; it is a <button> because it opens
   a dialog rather than navigating, and a screen reader should say so. */
.footer-col .footer-link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.98rem;
  color: var(--inverse-text);
  cursor: pointer;
  text-align: left;
}

.footer-col .footer-link-button:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner,
  .consent-dialog {
    transition: none;
  }
}

/* ------------------------------------- legal review markers (RM000037) --

   An unresolved legal fact must be IMPOSSIBLE to miss on the rendered
   page, not a comment in the source. Two markers, deliberately loud:
   `.legal-tbc` for a fact the owner has not supplied, `.legal-review` for
   a clause that needs a lawyer. The checker fails the build if the
   placeholder string appears anywhere except inside one of these.        */

.legal-tbc,
.legal-review {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  margin: 0.15rem 0;
}

.legal-tbc {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid rgba(168, 98, 10, 0.32);
}

.legal-tbc > span {
  font-weight: 500;
}

.legal-review {
  color: var(--info);
  background: var(--info-soft);
  border: 1px solid rgba(47, 107, 143, 0.3);
  font-weight: 500;
}

.legal-version-line {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--faint);
}