/*
 * 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);
}

/* ==========================================================================
   Campaign page (RM000089 / SPEC000016 rev 7) — the STR-host landing page.

   One night passing: the page opens at 23:40 in the host's world, rewinds
   three days to the moment it was already solved, dawns into the operator's
   morning, and closes on the same hour with a different host. Everything
   below is scoped to .page-campaign / .cmp-* and touches no other page.
   ======================================================================== */

.page-campaign {
  --night: #0a1424;
  --night-2: #0f1e33;
  --night-3: #14304f;
  --night-ink: #f2f6fc;
  --night-muted: #a8bcd4;
  --night-faint: #6d84a1;
  --night-panel: #142339;
  --night-line: rgba(242, 246, 252, 0.09);
}

/* ---- campaign chrome: transparent over the opening scene ---- */

.campaign-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: 0.4rem;
}

.campaign-header .header-bar {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.campaign-header .logo-name {
  color: var(--night-ink);
}

.campaign-header .header-end {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.campaign-header .locale-menu summary {
  color: var(--night-ink);
  border-color: rgba(242, 246, 252, 0.28);
  background: rgba(242, 246, 252, 0.04);
}

.campaign-header .locale-menu summary:hover {
  border-color: rgba(242, 246, 252, 0.55);
  background: rgba(242, 246, 252, 0.09);
}

.campaign-header .header-cta {
  /* The corporate header hides its CTA below 980px because the burger menu
     carries it; the campaign header has no burger, and this button is its
     only action — it stays at every width. */
  display: inline-flex;
  background: var(--sun);
  color: var(--night-2);
  border-color: transparent;
}

.campaign-header .header-cta:hover {
  background: #f4c47f;
  color: var(--night);
}

/* ---- shared scene grammar ---- */

.cmp-scene {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.cmp-night {
  background: var(--night-2);
  color: var(--night-ink);
}

.cmp-sand {
  background: var(--sand);
}

.cmp-time {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.3rem;
}

.cmp-night .cmp-time {
  color: var(--sun);
}

.cmp-time span {
  font-size: 0.55rem;
  transform: translateY(-1px);
}

.cmp-stamp {
  position: absolute;
  top: 0.5rem;
  right: -1.5rem;
  font-size: clamp(7rem, 20vw, 16rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(240, 180, 92, 0.08);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.cmp-eyebrow {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 1.2rem;
}

.cmp-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.65;
  max-width: 36em;
}

.cmp-night .cmp-lead {
  color: var(--night-muted);
}

.cmp-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}

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

.cmp-btn-primary {
  background: var(--sun);
  color: var(--night-2);
  box-shadow: 0 6px 24px rgba(240, 180, 92, 0.28);
}

.cmp-btn-primary:hover {
  background: #f4c47f;
  color: var(--night);
  box-shadow: 0 8px 30px rgba(240, 180, 92, 0.4);
}

.cmp-reassure {
  font-size: 0.92rem;
  color: var(--night-muted);
}

.cmp-night :focus-visible {
  outline-color: var(--sun);
}

/* ---- scene 1: 23:40 ---- */

.cmp-hero {
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(31, 95, 214, 0.22) 0%, transparent 62%),
    radial-gradient(700px 500px at 12% 110%, rgba(198, 90, 51, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--night-ink);
  padding-top: clamp(7rem, 13vh, 9.5rem);
  padding-bottom: 5.5rem;
  min-height: 92svh;
  display: flex;
  align-items: center;
}

.cmp-clockface {
  position: absolute;
  top: 2rem;
  right: -1rem;
  font-size: clamp(9rem, 24vw, 21rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(240, 180, 92, 0.07);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

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

.cmp-hero h1 {
  font-size: clamp(2.2rem, 4.9vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 16ch;
}

/* French and Greek run naturally longer: a slightly smaller, wider headline
   keeps the accepted four-line first-screen composition in those locales
   without touching the English page. */
.cmp-hero h1:lang(fr),
.cmp-hero h1:lang(el) {
  font-size: clamp(2rem, 4.4vw, 3.55rem);
  max-width: 19ch;
}

.cmp-hero .cmp-lead {
  margin-top: 1.6rem;
}

.cmp-hero .cmp-actions {
  margin-top: 1.9rem;
  gap: 0.9rem;
}

.cmp-hero .cmp-reassure {
  margin-top: 0.9rem;
}

.cmp-definition {
  margin-top: 1.5rem;
  padding-left: 1.05rem;
  border-left: 3px solid var(--sun);
  font-size: 0.98rem;
  line-height: 1.6;
  color: #cfdcec;
  max-width: 36em;
}

.cmp-definition strong {
  color: var(--night-ink);
}

.cmp-definition-points {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.cmp-definition-points li {
  position: relative;
  padding-left: 1.05rem;
}

.cmp-definition-points li::before {
  content: '·';
  position: absolute;
  left: 0.15rem;
  color: var(--sun);
  font-weight: 800;
}

.cmp-btn-ghost {
  background: transparent;
  color: var(--night-ink);
  border-color: rgba(242, 246, 252, 0.35);
}

.cmp-btn-ghost:hover {
  border-color: var(--sun);
  color: var(--sun);
}

.cmp-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-faint);
  text-decoration: none;
}

.cmp-scroll-cue:hover {
  color: var(--sun);
}

.cmp-scroll-arrow {
  animation: cmp-drift 2.2s ease-in-out infinite;
}

@keyframes cmp-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* the late-night thread */

.cmp-chat {
  margin: 0;
  justify-self: end;
  width: min(100%, 380px);
  transform: rotate(-1.6deg);
  position: relative;
}

.cmp-chat::before {
  content: '';
  position: absolute;
  inset: -18%;
  background: radial-gradient(closest-side, rgba(240, 180, 92, 0.1), transparent 72%);
  pointer-events: none;
}

.cmp-chat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  position: relative;
}

.cmp-bubble {
  background: var(--night-panel);
  border: 1px solid var(--night-line);
  border-radius: 16px 16px 16px 5px;
  padding: 0.85rem 1.05rem;
  color: #dbe6f4;
  font-size: 0.98rem;
  width: fit-content;
  max-width: 90%;
  box-shadow: 0 14px 40px rgba(4, 10, 20, 0.45);
}

.cmp-bubble-time {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--night-faint);
  font-variant-numeric: tabular-nums;
}

.cmp-bubble-doc {
  width: 78%;
}

.cmp-doc-blur {
  display: block;
  position: relative;
  height: 118px;
  border-radius: 10px;
  overflow: hidden;
  background: #2c3c55;
}

.cmp-doc-blur > span {
  position: absolute;
  filter: blur(5px);
  border-radius: 4px;
  background: #8fa3bd;
  opacity: 0.75;
}

.cmp-doc-blur > span:nth-child(1) {
  left: 34%;
  top: 18%;
  width: 52%;
  height: 9px;
}

.cmp-doc-blur > span:nth-child(2) {
  left: 34%;
  top: 40%;
  width: 40%;
  height: 9px;
}

.cmp-doc-blur > span:nth-child(3) {
  left: 34%;
  top: 62%;
  width: 46%;
  height: 9px;
  background: #c8a06a;
}

.cmp-doc-photo {
  left: 8%;
  top: 16%;
  width: 20%;
  height: 66%;
  border-radius: 6px;
  background: #a8b6c9;
  filter: blur(4px);
}

.cmp-bubble-caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--night-muted);
}

.cmp-chat-meta {
  justify-self: center;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0906a;
  padding: 0.3rem 0;
}

.cmp-bubble-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0.95rem 1.1rem;
}

.cmp-bubble-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--night-faint);
  animation: cmp-pulse 1.3s ease-in-out infinite;
}

.cmp-bubble-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.cmp-bubble-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes cmp-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ---- scene 2: the monologue ---- */

.cmp-monologue {
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  padding-top: 2rem;
}

.cmp-monologue ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  counter-reset: cmp-scene;
}

.cmp-monologue li {
  counter-increment: cmp-scene;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  margin-top: clamp(2.6rem, 6vw, 4.2rem);
}

.cmp-monologue li::before {
  content: '0' counter(cmp-scene);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sun);
  opacity: 0.65;
  padding-top: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.cmp-line {
  font-size: clamp(1.65rem, 3.6vw, 2.7rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--night-ink);
  text-wrap: balance;
}

.cmp-note {
  grid-column: 2;
  margin-top: 0.7rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--night-muted);
  max-width: 34em;
}

/* ---- scene 3: the rewind (dawn thesis) ---- */

.cmp-rewind {
  background: linear-gradient(
    180deg,
    var(--night) 0%,
    var(--night-2) 26%,
    var(--night-3) 46%,
    #57506b 62%,
    #a86a4e 74%,
    #e0a25c 84%,
    #f2ddb4 93%,
    var(--sand) 100%
  );
  color: var(--night-ink);
  min-height: 88svh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(5rem, 14vh, 9rem);
}

.cmp-rewind .cmp-stamp {
  color: rgba(240, 180, 92, 0.1);
  font-size: clamp(5.5rem, 15vw, 12rem);
  right: 1.5rem;
  top: 1.5rem;
}

.cmp-rewind-inner {
  position: relative;
  max-width: var(--container-narrow);
}

.cmp-rewind .cmp-time {
  color: var(--sun);
}

.cmp-time-rewind span {
  font-size: 1rem;
  transform: none;
}

.cmp-rewind h2 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.cmp-rewind .cmp-lead {
  margin-top: 1.5rem;
  color: #cfdcec;
  max-width: 30em;
}

.cmp-sunrise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cmp-sunrise span {
  width: 190px;
  height: 95px;
  border-radius: 190px 190px 0 0;
  background: linear-gradient(180deg, #ffd28a 0%, var(--sun) 70%);
  box-shadow:
    0 0 60px 18px rgba(240, 180, 92, 0.55),
    0 0 160px 60px rgba(240, 180, 92, 0.25);
}

/* ---- scene 4: the evidence rail (booking → record) ---- */

.cmp-journey {
  background: linear-gradient(180deg, var(--sand) 0%, #ffffff 60%);
}

.cmp-journey h2,
.cmp-clock h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 24ch;
  text-wrap: balance;
}

.cmp-journey .cmp-lead {
  margin-top: 1.1rem;
  color: var(--muted);
}

.cmp-rail {
  list-style: none;
  margin: clamp(2.6rem, 6vw, 4rem) 0 0;
  padding: 0;
}

.cmp-step {
  position: relative;
  padding-left: 78px;
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
}

.cmp-step::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 60px;
  bottom: 0.6rem;
  width: 2px;
  background: var(--sand-border);
}

.cmp-step:last-child {
  padding-bottom: 0;
}

.cmp-step:last-child::before {
  display: none;
}

.cmp-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--night-2);
  font-size: 1.35rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(240, 180, 92, 0.35);
}

.cmp-step-time {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.cmp-step h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  letter-spacing: -0.02em;
}

.cmp-step-note {
  margin-top: 0.5rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 44em;
}

.cmp-panel {
  margin-top: 1.6rem;
  max-width: 620px;
  background: #fff;
  border: 1px solid var(--sand-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.35rem;
}

.cmp-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.cmp-sources li {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--brand-strong);
  background: var(--brand-softer);
  border: 1px solid #d8e4f6;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

.cmp-flow-arrow {
  text-align: center;
  color: var(--faint);
  font-size: 1.05rem;
  padding: 0.45rem 0;
}

.cmp-chip-neutral {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.cmp-panel-intro {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

.cmp-mock-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cmp-mock-btn {
  font-size: 0.88rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--border-strong);
  color: var(--brand-strong);
  background: #fff;
}

.cmp-mock-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

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

.cmp-report-head p {
  font-size: 1rem;
  font-weight: 750;
}

.cmp-trail {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.cmp-trail li {
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  background: #f4f0e6;
  color: var(--muted);
}

.cmp-trail li + li {
  margin-left: 1.5rem;
  position: relative;
}

.cmp-trail li + li::before {
  content: '→';
  position: absolute;
  left: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-weight: 400;
}

.cmp-trail li:last-child {
  background: var(--ok-soft);
  color: var(--ok);
}

.cmp-report-ref {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.cmp-journey-outro {
  margin-top: clamp(2.6rem, 6vw, 3.6rem);
  text-align: center;
}

.cmp-journey-outro > p {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cmp-journey-outro .cmp-actions {
  margin-top: 1.4rem;
}

.cmp-journey-outro .cmp-reassure {
  margin-top: 0.9rem;
  color: var(--muted);
}

.cmp-phones {
  display: flex;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: 1.7rem;
}

.cmp-phone {
  flex: 0 1 252px;
  background: #1d2733;
  border-radius: 32px;
  padding: 9px;
  box-shadow:
    0 24px 60px rgba(61, 48, 28, 0.22),
    0 4px 14px rgba(61, 48, 28, 0.12);
}

.cmp-phone-mid {
  transform: translateY(-20px);
}

.cmp-phone-screen {
  background: #fff;
  border-radius: 24px;
  height: 100%;
  min-height: 400px;
  padding: 1.35rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.cmp-ph-brand {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.cmp-ph-title {
  font-size: 1.06rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.cmp-ph-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.cmp-ph-photo {
  display: block;
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(180deg, #dcebf5 0%, #dcebf5 58%, #eadfc4 58%, #e3d3ae 100%);
  position: relative;
  overflow: hidden;
  margin-top: 0.2rem;
}

.cmp-ph-photo::after {
  content: '';
  position: absolute;
  right: 16%;
  top: 18%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sun);
}

.cmp-ph-notice {
  margin-top: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--info);
  background: var(--info-soft);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
}

.cmp-ph-cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  border-radius: 11px;
  padding: 0.8rem;
}

.cmp-ph-step {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

.cmp-ph-field {
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  background: #f7f3ea;
  position: relative;
}

.cmp-ph-field span {
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.cmp-ph-field em {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 620;
  color: var(--text);
}

.cmp-ph-done::after {
  content: '✓';
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.cmp-ph-active {
  background: #fff;
  border: 1.6px solid var(--brand);
}

.cmp-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--brand);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cmp-blink 1.1s steps(1) infinite;
}

@keyframes cmp-blink {
  50% {
    opacity: 0;
  }
}

.cmp-ph-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ok);
  margin-top: auto;
}

.cmp-ph-check {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 1.9rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin: 1.4rem auto 0.6rem;
}

.cmp-phone .cmp-ph-check + .cmp-ph-title,
.cmp-phone .cmp-ph-check ~ .cmp-ph-sub {
  text-align: center;
}

.cmp-ph-sign {
  margin-top: auto;
  text-align: center;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text);
  border-top: 1px dashed var(--border-strong);
  padding-top: 0.9rem;
}

.cmp-facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  max-width: 720px;
}

.cmp-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
}

.cmp-fact-icon {
  width: 19px;
  height: 19px;
  color: var(--ok);
  flex: none;
}

/* ---- the operator's arrivals window ---- */

.cmp-window {
  margin: 1.7rem 0 0;
  max-width: 820px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cmp-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f6f3ec;
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 1.1rem;
}

.cmp-window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd5c4;
}

.cmp-window-bar p {
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  text-align: center;
  font-size: 0.78rem;
  color: var(--faint);
  background: #fff;
  border-radius: 999px;
  padding: 0.25rem 1rem;
}

.cmp-window-body {
  padding: 1.3rem 1.5rem 1.5rem;
}

.cmp-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.cmp-window-head p {
  font-size: 1.04rem;
  font-weight: 750;
}

.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.cmp-chip i {
  font-style: normal;
  font-size: 0.72rem;
}

.cmp-chip-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.cmp-chip-warn {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.cmp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fbf9f4;
  border-radius: 12px;
  padding: 0.95rem 1.15rem;
  margin-top: 0.7rem;
}

.cmp-row-warn {
  background: #fdf3ec;
}

.cmp-row-stay strong {
  display: block;
  font-size: 0.99rem;
  letter-spacing: -0.01em;
}

.cmp-row-stay span {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* ---- scene 6: the 24-hour window ---- */

.cmp-clock {
  background: linear-gradient(180deg, #fff 0%, var(--sand) 100%);
}

.cmp-clock-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.cmp-numeral {
  font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--sun);
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 40px rgba(240, 180, 92, 0.35);
}

.cmp-numeral span {
  font-size: 0.32em;
  font-weight: 750;
  color: var(--accent);
  letter-spacing: 0;
}

.cmp-body {
  margin-top: 1.1rem;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 40em;
}

.cmp-honest {
  margin-top: 1.5rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-weight: 650;
  font-size: 1.02rem;
  max-width: 36em;
}

/* ---- scene 7: what Vivestay won't do ---- */

.cmp-wont {
  background: var(--sand-deep);
}

.cmp-wont h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 780;
  letter-spacing: -0.025em;
}

.cmp-wont .cmp-lead {
  margin-top: 1rem;
  color: var(--muted);
}

.cmp-wont ul {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}

.cmp-wont li {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  max-width: 46em;
}

.cmp-wont h3 {
  font-size: 1.16rem;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.cmp-wont-x {
  color: var(--accent);
  font-weight: 800;
  flex: none;
}

.cmp-wont li p {
  margin-top: 0.5rem;
  color: var(--muted);
  line-height: 1.65;
  padding-left: 1.55rem;
}

/* ---- scene 8: the deal (daylight), then the close (night) ---- */

.cmp-deal {
  padding-bottom: 0;
}

.cmp-deal-card {
  background: var(--surface);
  border: 1px solid var(--sand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.6rem);
  text-align: center;
}

.cmp-deal-card h2 {
  font-size: 1.32rem;
  letter-spacing: -0.015em;
}

.cmp-price {
  margin-top: 0.9rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  max-width: 30em;
  margin-inline: auto;
  text-wrap: balance;
}

.cmp-free {
  margin-top: 0.7rem;
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--ok);
}

.cmp-offer-links {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--faint);
}

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

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

.cmp-tax {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--faint);
}

.cmp-close {
  background: linear-gradient(
    180deg,
    var(--sand) 0%,
    #c4a084 12%,
    #5c4a58 26%,
    #1c2c47 42%,
    var(--night-2) 58%,
    var(--night) 100%
  );
  color: var(--night-ink);
  text-align: center;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(10rem, 24vh, 15rem);
  padding-bottom: clamp(5rem, 10vh, 7rem);
}

.cmp-close .container {
  position: relative;
  width: 100%;
}

.cmp-close .cmp-stamp {
  top: auto;
  bottom: 55%;
  right: 50%;
  transform: translateX(50%);
  color: rgba(240, 180, 92, 0.06);
}

.cmp-close h2 {
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.cmp-close .cmp-lead {
  margin: 1.4rem auto 0;
  max-width: 32em;
}

.cmp-close .cmp-reassure {
  margin-top: 1.4rem;
}

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

@media (max-width: 1023px) {
  .cmp-hero {
    min-height: 0;
    padding-top: 6.5rem;
    padding-bottom: 6rem;
  }

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

  .cmp-chat {
    justify-self: center;
    width: min(100%, 360px);
  }

  .cmp-clock-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cmp-numeral {
    text-align: left;
  }

  .cmp-rewind {
    min-height: 74svh;
  }
}

@media (max-width: 760px) {
  .cmp-phones {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .cmp-phone {
    flex-basis: auto;
    width: min(272px, 84vw);
  }

  .cmp-phone-mid {
    transform: none;
  }

  .cmp-phone-screen {
    min-height: 0;
  }

  .cmp-ph-notice,
  .cmp-ph-hint,
  .cmp-ph-sign {
    margin-top: 0.9rem;
  }

  .cmp-monologue li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .campaign-header .header-bar {
    gap: 0.6rem;
  }

  .campaign-header .header-cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.86rem;
  }

  .campaign-header .locale-menu summary {
    padding: 0.45rem 0.6rem;
  }

  .cmp-step {
    padding-left: 0;
  }

  .cmp-step::before {
    display: none;
  }

  .cmp-step-num {
    position: static;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
  }

  .cmp-scroll-cue {
    display: none;
  }

  .cmp-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .cmp-window-bar p {
    margin-left: 0;
  }

  .cmp-close {
    min-height: 0;
  }
}