/* ==========================================================================
   TETAMU SMART STAY — Design System
   Brand: teal #165357 / amber #DC9C49 (sampled from the official logo)
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Brand */
  --teal-900: #07282A;
  --teal-800: #0D3A3D;
  --teal-700: #12484C;
  --teal-600: #165357; /* brand primary */
  --teal-500: #1F6A6F;
  --teal-300: #7FB3B5;
  --teal-100: #D7E7E7;
  --teal-50:  #EEF5F5;

  --amber-700: #9C6720;
  --amber-600: #BE8134;
  --amber-500: #DC9C49; /* brand accent */
  --amber-300: #EFC894;
  --amber-100: #F8E8D0;
  --amber-50:  #FCF6EC;

  /* Neutrals — warm, low chroma */
  --paper:  #FBFAF8;
  --white:  #FFFFFF;
  --ink:    #12282A;
  --ink-2:  #3A5355;
  --muted:  #6A8284;
  --line:   #E3EAE9;
  --line-2: #EFF3F2;

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Space + shape */
  --container: 1200px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(7, 40, 42, .06), 0 2px 6px rgba(7, 40, 42, .04);
  --shadow: 0 4px 12px rgba(7, 40, 42, .06), 0 12px 32px rgba(7, 40, 42, .07);
  --shadow-lg: 0 8px 24px rgba(7, 40, 42, .08), 0 32px 64px rgba(7, 40, 42, .12);
  --shadow-amber: 0 8px 24px rgba(220, 156, 73, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --header-h: 78px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* sections carry their own top padding */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Any author `display` (e.g. .grid { display: grid }) outranks the browser's
   own [hidden] rule, which would otherwise leave hidden panels on screen. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem); letter-spacing: -0.035em; line-height: 1.03; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-600); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--amber-600); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -70px; z-index: 200;
  background: var(--teal-600); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --- 3. Layout ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(64px, 8vw, 112px) 0; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }

.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--mist  { background: var(--teal-50); }

.section--dark {
  background: var(--teal-800);
  color: rgba(255, 255, 255, .78);
  position: relative;
  overflow: hidden;
}
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.section-head { max-width: 680px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.125rem; color: var(--muted); margin-bottom: 0; }
.section--dark .section-head p { color: rgba(255, 255, 255, .72); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal-500);
  margin-bottom: 18px;
}
/* Centred section eyebrows carry a short amber rule either side. Left-aligned
   eyebrows (hero, split sections) stay plain — a single leading dash there read
   as a stray mark rather than a flourish. */
.section-head--center .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
}
.section-head--center .eyebrow::before,
.section-head--center .eyebrow::after {
  content: ""; flex: none;
  width: 22px; height: 2px;
  background: var(--amber-500); border-radius: 2px;
}

.section--dark .eyebrow { color: var(--amber-300); }

/* Larger eyebrow for a section that has no visible heading under it (Pricing). */
.eyebrow--lg { font-size: clamp(.9375rem, .85rem + .35vw, 1.125rem); letter-spacing: .14em; }
.section-head--center .eyebrow--lg { gap: 16px; }
.section-head--center .eyebrow--lg::before,
.section-head--center .eyebrow--lg::after { width: 32px; }

/* A one-word section title (FAQ) set at heading size, with the amber rules
   the centred eyebrows use, scaled up to match. */
.section-title-dashed {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  margin: 0; letter-spacing: .04em;
}
.section-title-dashed::before,
.section-title-dashed::after {
  content: ""; flex: none;
  width: clamp(28px, 3vw, 44px); height: 3px;
  background: var(--amber-500); border-radius: 3px;
}
.section-title-dashed abbr { text-decoration: none; cursor: default; }
.section-title-dashed + .segmented-wrap { margin-top: 28px; }
.section-title-dashed + p { margin-top: 14px; }
/* A single-line title can be wider than the usual 680px heading column. */
.section-head:has(.section-title-dashed) { max-width: none; }
@media (max-width: 640px) {
  /* Long titles wrap on phones; keep the rules short beside them. */
  .section-title-dashed { gap: 10px; }
  .section-title-dashed::before, .section-title-dashed::after { width: 20px; }
}
/* TEST: section titles without the amber dashes. Delete this rule to bring them back. */
.section-title-dashed::before, .section-title-dashed::after { display: none; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  text-align: center; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--amber-500); color: var(--teal-900);
  box-shadow: var(--shadow-amber);
}
.btn--primary:hover { background: var(--amber-300); color: var(--teal-900); box-shadow: 0 12px 30px rgba(220,156,73,.38); }

.btn--dark { background: var(--teal-600); color: #fff; box-shadow: 0 8px 22px rgba(22,83,87,.24); }
.btn--dark:hover { background: var(--teal-700); color: #fff; }

.btn--light { background: #fff; color: var(--teal-700); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: #fff; color: var(--teal-600); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--teal-600); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal-300); color: var(--teal-600); background: var(--teal-50); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost-light:hover { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }

.btn--sm { min-height: 44px; padding: 11px 20px; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Store badges: black like the official Apple and Google badges, with the
   Apple logo in white and the Google Play mark in its own colours. */
.store-row { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 24px 10px 18px;
  min-height: 60px;
  border-radius: 14px;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.store-btn:hover { color: #fff; transform: translateY(-2px); background: #111; border-color: rgba(255,255,255,.5); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.store-btn .store-btn__logo { width: 28px; height: 28px; }
.store-btn__kicker { opacity: .85; }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn span { display: block; line-height: 1.2; }
.store-btn__kicker { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.store-btn__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

.store-btn--light { background: #fff; color: var(--teal-900); border-color: var(--line); box-shadow: var(--shadow-sm); }

/* Compact badges for the dark footer. Scoped under .footer so they outrank
   the footer's generic link colour and amber hover. */
.footer__stores { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.footer .store-btn--footer {
  min-height: 50px;
  min-width: 180px;
  padding: 7px 18px 7px 14px;
  gap: 10px;
  border-radius: 12px;
  background: #000;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.footer .store-btn--footer:hover {
  background: #111;
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  box-shadow: none;
}
.footer .store-btn--footer svg { width: 24px; height: 24px; }
.footer .store-btn--footer .store-btn__kicker { font-size: .625rem; }
.footer .store-btn--footer .store-btn__name { font-size: .9375rem; }
.store-btn--light:hover { background: #fff; color: var(--teal-900); }

/* --- 5. Header ----------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 250, 248, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(7, 40, 42, .05);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand:hover { color: inherit; }
.brand__mark { width: 42px; height: 42px; flex: none; }
/* Full horizontal logo (icon + TETAMU + SMART STAY) as one image. */
.brand__logo { display: block; height: 48px; width: auto; }
@media (max-width: 640px) { .brand__logo { height: 40px; } }
.brand__type { display: flex; flex-direction: column; gap: 2px; }
.brand__word { width: 104px; }
.brand__tag {
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--teal-500);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 6px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .96875rem; font-weight: 600;
  color: var(--ink-2);
}
.nav__link:hover { color: var(--teal-600); background: var(--teal-50); }
.nav__link.is-active { color: var(--teal-600); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--amber-500);
}

.nav__cta { display: none; }

/* Six menu items plus the Download button: tighten spacing in the band just
   above the hamburger breakpoint so the menu never wraps onto a second row. */
@media (min-width: 961px) and (max-width: 1120px) {
  .header__inner { gap: 16px; }
  .nav__list { gap: 0; }
  .nav__link { padding: 9px 10px; font-size: .9375rem; }
  .nav__link.is-active::after { left: 10px; right: 10px; }
}

.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--teal-300); }
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------- */
/* Hero slider: the original hero is slide 1, followed by full-width banners.
   The viewport takes the height of the active slide, so a short banner does
   not sit in a tall empty box. */
.hero-slider { position: relative; background: var(--teal-700); }
.hero-slider__viewport { overflow: hidden; }
.hero-slider__viewport.is-ready { transition: height .6s var(--ease); }
.hero-slider__track {
  display: flex; align-items: flex-start;
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
}
.hero-slider__slide { flex: 0 0 100%; min-width: 0; }
/* Slides 2-4 are coded versions of the campaign banners, on the same teal
   backdrop as slide 1. On desktop every slide takes the tallest slide's
   height and centres its content, so the slider never changes size. */
.hero-slider__slide--rich { display: flex; flex-direction: column; justify-content: center; }
.hero-slider__slide--rich > .container { padding-block: clamp(40px, 5vw, 64px); }
@media (min-width: 1081px) {
  .hero-slider__track { align-items: stretch; }
}

/* Price block: yellow ribbon, gold RM 2,999 and the lead line */
.pkg__ribbon {
  display: inline-block; margin: 0 0 14px;
  padding: 10px 26px 9px;
  background: linear-gradient(90deg, #FFD23F, #F6A623);
  color: #13201F;
  font-family: var(--font-display);
  font-size: clamp(1rem, .8rem + .7vw, 1.4rem); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
  border-radius: 10px;
  transform: rotate(-1.6deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}
.pkg__price { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.pkg__amount {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--font-display); font-weight: 800; line-height: .9; letter-spacing: -0.03em;
}
.pkg__rm { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); color: #fff; padding-top: .15em; }
.pkg__num {
  font-size: clamp(4rem, 2.4rem + 4.6vw, 6.75rem);
  background: linear-gradient(180deg, #FFE066 0%, #F9B233 55%, #EE8A1B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}
.pkg__rule { align-self: stretch; width: 1px; background: rgba(255, 255, 255, .35); }
.pkg__lead {
  margin: 0; max-width: 9.5em;
  font-family: var(--font-display); font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem); font-weight: 700;
  line-height: 1.2; color: #fff;
}
.pkg__lead .promo-swoosh { margin-top: 10px; }
.pkg__pay { display: block; width: min(100%, 520px); height: auto; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }

/* Slide 2: price and payment options beside the guest app */
.slide-pkg {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px; align-items: center;
}
.slide-pkg__tag {
  margin: 0 0 18px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--amber-300);
}
.slide-pkg__sub { margin: 18px 0 22px; max-width: 30em; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); color: rgba(255, 255, 255, .8); }
.slide-pkg .btn-row { margin-top: 26px; }
.slide-pkg__media { position: relative; display: flex; justify-content: center; }
.phone-solo { position: relative; }
.phone-solo .phone { width: 300px; max-width: none; zoom: .86; }
.phone-solo .phone__screen { min-height: 600px; }

/* Package contents: five numbered items on a white card */
.kit {
  list-style: none; margin: 0; padding: clamp(18px, 2.2vw, 28px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.kit__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px;
  align-content: start;
}
.kit__img {
  grid-column: 1 / -1; position: relative;
  height: clamp(96px, 9vw, 132px); margin-bottom: 14px;
  display: flex; align-items: flex-end; justify-content: center;
}
.kit__img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(7, 40, 42, .15)); }
.kit__img .kit__img-add { position: absolute; top: -6px; right: 4%; height: 42%; max-height: none; }
.kit__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2A8C84, #0E4E4B 70%);
  color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800;
}
.kit__text { display: flex; flex-direction: column; }
.kit__name {
  font-family: var(--font-display); font-size: clamp(.875rem, .75rem + .35vw, 1.0625rem); font-weight: 800;
  line-height: 1.15; color: #17635E;
}
.kit__name em { font-style: normal; color: #F5A623; }
.kit__desc { margin-top: 6px; font-size: clamp(.75rem, .7rem + .2vw, .875rem); line-height: 1.35; color: #2C6E69; }

/* Slide 3: contents card, then the early bird banner tucked under it */
.slide-kit .promo-banner--slide { margin-top: 26px; }
.promo-banner--slide {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.promo-banner--slide .promo-badge { animation: none; }
.promo-banner--slide .promo-offer { animation: none !important; }

/* Pricing: the package banner rebuilt as layout. A teal band with an amber
   diagonal edge holds the price; the contents card overlaps it and the early
   bird panel overlaps the card, as in the campaign artwork. */
.pkgbanner {
  position: relative; isolation: isolate;
  padding: clamp(28px, 3.5vw, 44px) clamp(0px, 1.6vw, 20px) 0;
}
.pkgbanner__band {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: clamp(230px, 22vw, 290px);
  border-radius: var(--radius-lg) 0 0 0;
  background: linear-gradient(115deg, #F6B73C, #F59E1B);
  clip-path: polygon(0 0, 52% 0, 77.5% 100%, 0 100%);
}
.pkgbanner__band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--teal-700), #0F5B5A);
  clip-path: polygon(0 0, 50.2% 0, 75.6% 100%, 0 100%);
}
.pkgbanner__head { padding: 0 clamp(16px, 2.4vw, 36px) clamp(26px, 3vw, 40px); }
.pkgbanner__head .pkg__ribbon { margin-bottom: 18px; }
.pkgbanner__kit {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(70px, 7vw, 96px);
  border-radius: 40px;
}
.pkgbanner__kit .kit__img { height: clamp(110px, 11vw, 170px); }
.pkgbanner__promo {
  margin: calc(clamp(70px, 7vw, 96px) * -1 + 28px) clamp(0px, 3vw, 48px) 0 clamp(48px, 7vw, 100px);
  position: relative;
}
.pkgbanner__cta { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pkgbanner__cta p { margin: 0; max-width: 46em; font-size: .9375rem; color: var(--muted); }

@media (max-width: 1080px) {
  .pkgbanner__band { clip-path: polygon(0 0, 70% 0, 96% 100%, 0 100%); }
  .pkgbanner__band::before { clip-path: polygon(0 0, 68% 0, 94% 100%, 0 100%); }
  .pkgbanner__kit { padding-bottom: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); }
  .pkgbanner__promo { margin: 22px 0 0; }
}
@media (max-width: 640px) {
  .pkgbanner { padding-inline: 0; }
  .pkgbanner__band { height: 260px; clip-path: none; border-radius: var(--radius-lg); }
  .pkgbanner__band::before { clip-path: none; inset: 0 0 4px 0; border-radius: var(--radius-lg); }
}

/* Slide 4: everything at once — price row, compact contents, early bird */
.slide-all__top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.slide-all__top .pkg__pay { width: min(100%, 460px); }
.kit--compact .kit__img { height: clamp(72px, 6.5vw, 96px); margin-bottom: 10px; }
.kit--compact .kit__desc { display: none; }
.slide-all .promo-banner--slide {
  margin-top: -14px; margin-right: clamp(0px, 8vw, 120px);
  position: relative; z-index: 1;
}

@media (max-width: 1080px) {
  .slide-pkg { grid-template-columns: 1fr; gap: 40px; }
  .kit { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .slide-all .promo-banner--slide { margin-right: 0; margin-top: 22px; }
}
@media (max-width: 640px) {
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit__item:last-child { grid-column: 1 / -1; }
  .phone-solo .phone { zoom: .7; }
  .pkg__rule { display: none; }
}

/* Dots and pause sit on a dark glass pill so they read on the teal hero and
   on the white banners alike. The active dot fills up as its slide plays. */
/* Bottom-right corner: the one spot clear of text on every slide. */
.hero-slider__controls {
  position: absolute; right: max(20px, calc((100% - var(--container)) / 2 + 20px)); bottom: 20px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  background: rgba(10, 34, 36, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-slider__controls[hidden] { display: none; }
.hero-slider__dot {
  position: relative; overflow: hidden;
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .5); cursor: pointer;
  transition: width .35s var(--ease), background-color .2s;
}
.hero-slider__dot:hover { background: rgba(255, 255, 255, .8); }
.hero-slider__dot[aria-current="true"] { width: 34px; background: rgba(255, 255, 255, .3); }
.hero-slider__dot[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: #fff; transform-origin: left center;
  animation: hero-slider-progress var(--slide-ms, 5000ms) linear forwards;
}
.hero-slider.is-paused .hero-slider__dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes hero-slider-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-slider__toggle {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
}
.hero-slider__toggle:hover { background: rgba(255, 255, 255, .28); }
.hero-slider__toggle svg { width: 12px; height: 12px; }
.hero-slider__icon-play { display: none; }
.hero-slider.is-stopped .hero-slider__icon-play { display: block; }
.hero-slider.is-stopped .hero-slider__icon-pause { display: none; }
.hero-slider__dot:focus-visible,
.hero-slider__toggle:focus-visible { outline: 2px solid var(--amber-300); outline-offset: 3px; }

/* On phones the banners are short, so the controls move below the slide
   instead of covering the banner artwork. */
@media (max-width: 640px) {
  .hero-slider__controls {
    position: relative; right: auto; bottom: auto;
    width: max-content; margin: 14px auto;
    background: rgba(10, 34, 36, .85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__track, .hero-slider__viewport.is-ready { transition: none; }
  .hero-slider__dot[aria-current="true"]::after { animation: none; transform: none; }
}

.hero {
  position: relative;
  background: var(--teal-700);
  color: rgba(255,255,255,.8);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(220,156,73,.26), transparent 62%),
    radial-gradient(820px 560px at 8% 92%, rgba(31,106,111,.85), transparent 60%),
    linear-gradient(155deg, #12484C 0%, #0D3A3D 52%, #07282A 100%);
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(900px 600px at 30% 20%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 600px at 30% 20%, #000 10%, transparent 78%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 48px; align-items: center;
  padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 8vw, 112px);
}
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero__accent { color: var(--amber-500); }

/* All-caps display headline: caps need looser tracking and tighter leading
   than the sentence-case ramp, and a notch less size so three lines still fit. */
.h1--caps {
  text-transform: uppercase;
  font-size: clamp(2.0625rem, 1.15rem + 2.9vw, 3.125rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  /* The line breaks are authored with <br>; balancing would re-break them, and
     nowrap would clip inside the hero's overflow:hidden. Leave both off. */
  text-wrap: normal;
}

.hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 24em;
  margin-bottom: 16px;
}

.hero__lead {
  font-size: clamp(1.0625rem, .98rem + .3vw, 1.1875rem);
  color: rgba(255,255,255,.8);
  max-width: 34em; margin-bottom: 34px;
}
.hero .eyebrow { color: var(--amber-300); }

.hero__note {
  margin-top: 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; color: rgba(255,255,255,.62);
}
.hero__note svg { color: var(--amber-300); flex: none; }

/* Phone mock */
/* The stage hugs the phone so the floating chips, which are offset by a
   percentage of the stage, stay anchored to the handset at every width. */
.phone-stage {
  position: relative;
  display: flex; justify-content: center;
  width: min(100%, 320px);
  margin-inline: auto;
}
.phone-stage__glow {
  position: absolute; width: 116%; aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(220,156,73,.2) 0%, transparent 62%);
  pointer-events: none;
}
.phone {
  position: relative;
  width: 100%; max-width: 320px;
  background: #0A2D2F;
  border: 10px solid #0A2224;
  border-radius: 46px;
  padding: 10px;
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07) inset;
}
/* Screen content mirrors the real TETAMU owner app home tab. Type is sized
   for a ~320px mock, so values run smaller than anywhere else in the sheet. */
.phone__screen {
  --app-teal: #0F6B64;
  background: #EEF2F2;
  border-radius: 36px;
  overflow: hidden;
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 560px;
}

/* Teal identity bar */
.app__top { background: var(--app-teal); padding: 16px 14px 30px; }
.app__id { display: flex; align-items: center; gap: 10px; }
.app__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #D8EAE6; color: var(--app-teal);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .625rem;
}
.app__idtext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app__name { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: #fff; line-height: 1.2; }
.app__mail { font-size: .5625rem; color: rgba(255,255,255,.72); margin-top: 1px; overflow-wrap: anywhere; }
/* Contact address is blurred in the mock; the markup holds a placeholder, not the real address. */
.app__mail--blur { filter: blur(2.5px); user-select: none; }
.app__bell { position: relative; flex: none; color: #fff; }
.app__bell svg { width: 17px; height: 17px; display: block; }
.app__badge {
  position: absolute; top: -5px; right: -7px;
  background: #E5484D; color: #fff;
  font-size: .4375rem; font-weight: 800; line-height: 1;
  padding: 2px 4px; border-radius: 999px;
}

/* Cards pull up over the teal bar, as in the app */
.app__body { padding: 0 12px 10px; margin-top: -22px; display: flex; flex-direction: column; gap: 8px; }
.app__card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(7,40,42,.08); }

.app__site { display: flex; align-items: center; gap: 10px; padding: 10px 11px; }
.app__siteicon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: #F6DCB0; color: #A9722A;
  display: grid; place-items: center;
}
.app__siteicon svg { width: 16px; height: 16px; }
.app__sitetext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app__label { font-size: .4375rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.app__sitename { font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--ink); margin-top: 2px; }
.app__chev { width: 13px; height: 13px; flex: none; color: #B6C4C4; }

.app__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app__tile { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.app__ticon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.app__ticon svg { width: 15px; height: 15px; }
.app__ticon--teal { background: var(--teal-50); color: var(--app-teal); }
.app__ticon--amber { background: #F6DCB0; color: #A9722A; }
.app__tname { font-size: .5625rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.app__tmeta { font-size: .5rem; color: var(--muted); }

.app__split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.app__dep { display: flex; align-items: center; gap: 9px; padding: 11px; }
.app__dep .app__tname { flex: 1; }
.app__chat { width: 46px; display: grid; place-items: center; color: var(--app-teal); }
.app__chat svg { width: 17px; height: 17px; }

.app__cta {
  background: var(--app-teal); color: #fff;
  border-radius: 12px; padding: 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  margin-top: 2px;
}
.app__cta svg { width: 16px; height: 16px; }

.app__heading { font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--ink); margin: 6px 0 0; }

.app__guest { display: flex; align-items: center; gap: 9px; padding: 9px 10px; }
.app__gav {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #DCECE9; color: var(--app-teal);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .5625rem;
}
.app__gtext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app__gname { font-size: .625rem; font-weight: 700; color: var(--ink); }
.app__gmeta { font-size: .5rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.app__pill {
  flex: none; background: #D7EDE9; color: #0C5A54;
  font-size: .4375rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 6px;
}

/* Floating bottom nav */
.app__nav {
  margin: auto 10px 10px; background: #fff;
  border-radius: 16px; padding: 9px 4px;
  display: flex; justify-content: space-between;
  box-shadow: 0 2px 10px rgba(7,40,42,.1);
}
.app__navitem {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .4375rem; font-weight: 700; color: #9BACAC;
}
.app__navitem svg { width: 16px; height: 16px; }
.app__navitem.is-active { color: var(--amber-600); }
.app__dot { position: absolute; top: -5px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber-500); }

.phone__chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-size: .8125rem; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.phone__chip svg { width: 18px; height: 18px; flex: none; }
/* Chips float clear of the app's own content: A above the top-left corner,
   B on the empty right of the "Guests Staying" heading row. */
.phone__chip--a { top: -3%; left: -18%; }
.phone__chip--b { bottom: 38%; right: -15%; }
.phone__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA86B; flex: none; }

/* Owner and guest phones side by side. Each screen is laid out at the 300px
   design width and scaled with zoom, so the tiny app type keeps its proportions
   and the layout box shrinks with it (a transform would leave a gap). */
.phone-pair {
  --phone-zoom: .8;
  position: relative;
  display: flex; justify-content: center; align-items: stretch;
  gap: 20px;
}
.phone-pair__glow {
  position: absolute; width: 120%; aspect-ratio: 1.3; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(220,156,73,.2) 0%, transparent 100%);
  pointer-events: none;
}
.phone-pair .phone-stage {
  width: auto; margin: 0;
  flex-direction: column; align-items: center; gap: 14px;
}
.phone-pair .phone {
  width: 300px; max-width: none; flex: 1;
  display: flex; flex-direction: column;
  zoom: var(--phone-zoom);
}
.phone-pair .phone__screen { flex: 1; min-height: 600px; }
.phone__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
/* Chips sit on empty parts of the screens: A above the owner phone, B beside
   the guest app's Quick Actions heading. */
.phone-pair .phone__chip--a { top: -5%; left: -20%; }
.phone-pair .phone__chip--b { top: 60.5%; bottom: auto; right: -17%; }

/* Owner screen extras */
.app__ticon--plain { background: #EEF2F2; color: var(--app-teal); }
.app__siteicon--logo {
  background: #fff; border: 1px solid #E3D7C4; color: #8A5A1E;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-family: var(--font-display); font-size: .25rem; font-weight: 800; letter-spacing: .04em; line-height: 1;
}

/* Guest screen */
.gapp__top {
  background: var(--app-teal); padding: 14px 14px 32px;
  display: flex; align-items: center; gap: 7px; color: #fff;
}
.gapp__logo { width: 24px; height: 24px; border-radius: 7px; background: #fff; padding: 3px; flex: none; }
.gapp__logo img { width: 100%; height: 100%; object-fit: contain; }
.gapp__brand { display: flex; flex-direction: column; flex: 1; line-height: 1.1; }
.gapp__brand b { font-family: var(--font-display); font-size: .75rem; letter-spacing: .04em; }
.gapp__brand small { font-size: .375rem; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.7); }
.gapp__rules {
  display: flex; align-items: center; gap: 4px;
  font-size: .5rem; font-weight: 700;
  background: rgba(255,255,255,.14); padding: 4px 7px; border-radius: 999px;
}
.gapp__rules svg { width: 11px; height: 11px; }
.gapp__top .app__bell { margin-left: 4px; }

.gapp__body { padding: 0 12px 10px; margin-top: -22px; display: flex; flex-direction: column; gap: 8px; }
.gapp__hello {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 12px; padding: 9px 10px;
  box-shadow: 0 1px 3px rgba(7,40,42,.08);
}
.gapp__hello > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.gapp__hav {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: #F6DCB0; color: #8A5A1E;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .5625rem;
}
.gapp__greet { font-family: var(--font-display); font-size: .6875rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gapp__date { font-size: .5rem; color: var(--muted); margin-top: 1px; }

.gapp__card { background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 1px 3px rgba(7,40,42,.08); }
.gapp__prop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gapp__plogo { width: 26px; height: 26px; border-radius: 8px; }
.gapp__pname { font-family: var(--font-display); font-size: .6875rem; font-weight: 700; color: var(--ink); }
.gapp__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gapp__datebox {
  display: flex; flex-direction: column; gap: 1px;
  background: #F2F6F6; border-radius: 9px; padding: 7px 8px;
  font-size: .4375rem; color: var(--muted);
}
.gapp__datebox > span:first-child { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.gapp__datebox b { font-size: .5625rem; color: var(--ink); line-height: 1.25; }
.gapp__count {
  margin: 7px 0 4px; text-align: center;
  font-size: .5rem; font-weight: 700; color: var(--app-teal);
  background: var(--teal-50); border-radius: 6px; padding: 4px;
}
.gapp__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0 0; margin-top: 5px; border-top: 1px solid #EDF1F1;
  font-size: .5rem; color: var(--muted);
}
.gapp__val { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.gapp__val b { font-size: .5625rem; }
.gapp__val svg { width: 11px; height: 11px; color: var(--app-teal); }
.gapp__paid {
  background: #D7EDE9; color: #0C5A54;
  font-size: .4375rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 5px;
}
.gapp__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
}

.gapp__qhead { display: flex; align-items: center; gap: 6px; font-size: .5625rem; font-weight: 700; color: var(--ink); }
.gapp__qhead > svg:first-child { width: 14px; height: 14px; color: var(--amber-500); flex: none; }
.gapp__qhead span { flex: 1; }
.gapp__pct {
  margin: 6px 0 5px; display: flex; align-items: baseline; gap: 5px;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.gapp__pct small { font-family: var(--font-body); font-size: .4375rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.gapp__bar { display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #2FA86B, #4CC38A); }
.gapp__kwh { display: flex; justify-content: space-between; margin-top: 6px; font-size: .4375rem; font-weight: 600; color: var(--muted); }

.gapp__qtitle { font-family: var(--font-display); font-size: .6875rem; font-weight: 700; color: var(--ink); margin: 2px 0 0; }
.gapp__qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gapp__qa span {
  height: 38px; border-radius: 11px; background: #fff;
  display: grid; place-items: center; color: var(--app-teal);
  box-shadow: 0 1px 3px rgba(7,40,42,.08);
}
.gapp__qa svg { width: 16px; height: 16px; }

/* --- 7. Logo strip ------------------------------------------------------- */
.logostrip { border-block: 1px solid var(--line); background: var(--white); }
.logostrip__inner { padding: 34px 0; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.logostrip__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.logostrip__items {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.logostrip__slot {
  min-width: 168px; height: 56px;
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: #9FB0B1; text-transform: uppercase;
}

/* --- 8. Cards ------------------------------------------------------------ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96875rem; color: var(--muted); margin-bottom: 0; }

.card__icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-600);
  margin-bottom: 20px;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.card:hover .card__icon { background: var(--amber-100); color: var(--amber-700); }
.card__icon svg { width: 26px; height: 26px; }
/* Quantity badge used in place of an icon (pricing package contents) */
.card__icon.qty { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; line-height: 1; }

/* Product shot above a card's text. The photos are cut-outs on white, so the
   tile carries a soft tint rather than a border to keep them from floating. */
.card__shot {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--teal-50), #E7F0EF);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
  /* A fixed height, not aspect-ratio: aspect-ratio yields to content, so a
     portrait shot would stretch its tile and leave the cards uneven. */
  height: 220px;
}
.card__shot img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  /* Grid items default to min-*:auto, which lets a tall portrait shot (the
     door lock) push past max-height and make the cards uneven. */
  min-width: 0; min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.card--shot { display: flex; flex-direction: column; }
.card--shot .qty {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--amber-500); color: var(--teal-900);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(7,40,42,.18);
}
.card--shot { position: relative; }

.card--dark {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}
.card--dark:hover { border-color: rgba(255,255,255,.22); box-shadow: none; }
.card--dark p { color: rgba(255,255,255,.7); }
.card--dark .card__icon { background: rgba(220,156,73,.16); color: var(--amber-300); }
.card--dark:hover .card__icon { background: rgba(220,156,73,.26); color: var(--amber-300); }

/* --- 9. Split (alternating feature rows) --------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split + .split { margin-top: clamp(64px, 8vw, 112px); }
.split--flip .split__media { order: 2; }

.split__body h2 { margin-bottom: 16px; }
.split__body > p { font-size: 1.0625rem; color: var(--muted); }

.checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; }
.checklist__tick {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--amber-100); color: var(--amber-700);
  display: grid; place-items: center; margin-top: 2px;
}
.checklist__tick svg { width: 13px; height: 13px; }
.checklist strong { color: var(--ink); font-weight: 700; display: block; }
.checklist span { color: var(--muted); font-size: .9375rem; }

/* Media panel */
.media-panel {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  background: linear-gradient(150deg, var(--teal-50) 0%, #E4EFEE 100%);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.media-panel::after {
  content: "";
  position: absolute; width: 320px; height: 320px; right: -90px; top: -90px;
  background: radial-gradient(circle, rgba(220,156,73,.22), transparent 68%);
}
.media-panel--dark {
  background: linear-gradient(150deg, var(--teal-700), var(--teal-900));
  border-color: rgba(255,255,255,.1);
}
.media-panel .phone { max-width: 286px; }

/* In-app screen variants shown inside media panels */
.screen {
  position: relative; z-index: 2;
  width: 100%; max-width: 330px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.screen__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screen__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.screen__sub { font-size: .75rem; color: var(--muted); }

.ctrl { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.ctrl:first-of-type { border-top: 0; padding-top: 0; }
.ctrl__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.ctrl__icon svg { width: 19px; height: 19px; }
.ctrl__body { flex: 1; min-width: 0; }
.ctrl__name { font-size: .875rem; font-weight: 700; color: var(--ink); }
.ctrl__meta { font-size: .75rem; color: var(--muted); }
.ctrl__switch { width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; flex: none; }
.ctrl__switch::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s var(--ease); }
.ctrl__switch.is-on { background: var(--teal-600); }
.ctrl__switch.is-on::after { left: 21px; }

.slider { height: 6px; border-radius: 999px; background: var(--line); position: relative; margin-top: 9px; }
.slider__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--amber-500); }
.slider__knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--amber-500); transform: translate(-50%, -50%); }

.order { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line-2); border-radius: 14px; }
.order__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--amber-50); color: var(--amber-700); display: grid; place-items: center; flex: none; }
.order__icon svg { width: 18px; height: 18px; }
.order > span:not(.order__icon):not(.order__state) { min-width: 0; }
.order__name { font-size: .875rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.order__meta { font-size: .75rem; color: var(--muted); }
.order__state { margin-left: auto; font-size: .6875rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #E6F5EC; color: #1E7A4C; white-space: nowrap; }
.order__state--wait { background: var(--amber-50); color: var(--amber-700); }

/* --- 10. Steps ----------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.steps::before {
  content: "";
  position: absolute; top: 34px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal-100) 0 8px, transparent 8px 16px);
}
.step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.step__num {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 2px solid var(--teal-100);
  display: grid; place-items: center;
  color: var(--teal-600);
  position: relative; z-index: 2; margin-bottom: 22px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.step__num svg { width: 28px; height: 28px; }
.step:hover .step__num { border-color: var(--amber-500); transform: translateY(-3px); }
.step__badge {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--amber-500); color: var(--teal-900);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 800;
  border: 3px solid var(--paper);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .96875rem; color: var(--muted); max-width: 30ch; }

/* --- 10b. How it works (10-step flow) ----------------------------------- */
/* Recreates the supplied step artwork: mint cards, a green number disc, the
   actor ("Guest" / "Host") picked out in its own colour, the illustration
   below, and a green chevron leading into every step after the first.
   The illustrations are cropped from one sprite of the original artwork. */
.flow {
  --flow-card: #E4F5F2;
  --flow-green: #12695E;
  --flow-arrow: #00695C;
  --flow-gap: 34px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px var(--flow-gap);
}
.flow__step {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px 14px 18px;
  background: var(--flow-card);
  border-radius: 22px;
}
/* Chevron in the gap before each step (step 6's sits left of the second row). */
.flow__step + .flow__step::before {
  content: ""; position: absolute;
  left: calc(var(--flow-gap) / -2 - 9px); top: 62%;
  width: 18px; height: 26px;
  transform: translateY(-50%);
  background: var(--flow-arrow);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
/* The picture follows the title at the same 14px gap on every card. */
.flow__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.flow__num {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--flow-green); color: #fff;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1;
}
.flow__head h3 {
  margin: 0; padding-top: 2px;
  font-family: var(--font-display);
  font-size: clamp(.9375rem, .8rem + .25vw, 1.0625rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--flow-green);
}
.flow__who--guest { color: #ED7D31; }
.flow__who--host { color: #C00000; }
.flow__nobreak { white-space: nowrap; }
.flow__art {
  display: block;
  width: min(100%, var(--w));
  margin: 0 auto;
  background-image: url("../img/how-it-works/steps-sprite.png");
  background-repeat: no-repeat;
  border-radius: 6px;
}

@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__art { width: min(100%, 260px); }
}
/* One column: the chevron turns to point down and sits between the cards. */
@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; gap: 34px; }
  .flow__step + .flow__step::before {
    left: 50%; top: -30px;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* --- 10c. Promotion page ------------------------------------------------- */
/* Recreates the supplied Early Bird artwork: a teal panel with a red
   brush-stroke badge hanging off its left edge. Red and yellow are the
   campaign's own colours, so they are scoped here rather than added as
   site-wide tokens. */
.promo {
  --promo-red: #D8232A;
  --promo-red-deep: #A9161D;
  --promo-yellow: #F6B73C;
  --promo-teal-hi: #1E8E87;
}

.promo-top { padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 7vw, 96px); }
.promo-top .crumbs { color: var(--muted); margin-bottom: clamp(28px, 4vw, 44px); }
.promo-top .crumbs a { color: var(--teal-600); }
.promo-top .crumbs a:hover { color: var(--amber-600); }

.promo-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) 1px minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  margin-left: clamp(0px, 6vw, 72px);
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px) clamp(28px, 3.4vw, 40px) 0;
  border-radius: 22px;
  background:
    radial-gradient(520px 260px at 92% 10%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(100deg, var(--teal-800) 0%, var(--teal-600) 45%, var(--promo-teal-hi) 100%);
  box-shadow: 0 24px 60px rgba(7, 40, 42, .22);
  color: #fff;
  isolation: isolate;
}

/* Red brush badge */
.promo-badge {
  position: relative;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  margin-left: clamp(-72px, -6vw, 0px);
  padding: 30px 26px 54px 34px;
  transform: rotate(-5deg);
}
.promo-badge__brush {
  position: absolute; inset: -6px -14px -2px -18px;
  z-index: -1;
  color: var(--promo-red);
  filter: drop-shadow(0 10px 18px rgba(120, 10, 16, .35));
}
.promo-badge__brush svg { width: 100%; height: 100%; }
.promo-badge__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.15rem);
  line-height: .92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 3px 0 var(--promo-red-deep);
}
.promo-badge__title span { display: inline-flex; align-items: flex-end; gap: 10px; }
.promo-badge__bird { width: clamp(40px, 3.8vw, 56px); height: auto; color: #fff; transform: translateY(-.28em) rotate(-6deg); filter: drop-shadow(0 2px 0 var(--promo-red-deep)); }
.promo-badge__ribbon {
  position: absolute; left: 30px; bottom: 6px;
  padding: 7px 16px 6px;
  background: var(--promo-yellow);
  color: #1b1b1b;
  font-family: var(--font-body);
  font-size: clamp(.75rem, .65rem + .35vw, .9375rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
  transform: rotate(-1.5deg);
}

/* The supplied Early Bird artwork replaces the coded brush badge. */
.promo-badge--img { padding: 0; transform: none; animation: none; }
.promo-badge--img img {
  display: block; width: clamp(220px, 24vw, 320px); height: auto;
  filter: drop-shadow(0 10px 18px rgba(80, 8, 12, .3));
}
.promo-banner--slide .promo-badge--img img { width: clamp(200px, 21vw, 290px); }

/* Offers */
.promo-offer { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); }
.promo-offer__img { width: clamp(110px, 11.5vw, 156px); flex: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3)); }
.promo-offer__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, .95rem + .8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}
.promo-offer__text { margin: 6px 0 0; font-size: clamp(.95rem, .85rem + .35vw, 1.0625rem); line-height: 1.4; color: rgba(255, 255, 255, .9); }
.promo-offer__text--big { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 700; color: #fff; line-height: 1.1; }
.promo-swoosh { display: block; width: 120px; height: 14px; margin-top: 8px; color: var(--promo-yellow); }

@media (max-width: 1180px) {
  .promo-offer__kicker { white-space: normal; }
}

.promo-divider { align-self: stretch; margin: 6px 0; background: rgba(255, 255, 255, .28); }

/* Phone mock-up for the app licence */
.promo-phone {
  flex: none;
  width: clamp(64px, 6.4vw, 82px);
  aspect-ratio: 9 / 18.5;
  padding: 5px;
  border-radius: 14px;
  background: #111;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.promo-phone__screen {
  width: 100%; height: 100%;
  border-radius: 10px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.promo-phone__screen img:first-child { width: 46%; }
.promo-phone__screen img:last-child { width: 72%; }

/* Gentle entrance: badge drops in, offers follow. */
@keyframes promo-badge-in {
  from { opacity: 0; transform: rotate(-12deg) scale(.86) translateY(-10px); }
  to   { opacity: 1; transform: rotate(-5deg) scale(1); }
}
@keyframes promo-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.promo-badge { animation: promo-badge-in .7s cubic-bezier(.34, 1.4, .64, 1) .1s both; }
.promo-banner .promo-offer:nth-of-type(2) { animation: promo-rise .6s var(--ease) .35s both; }
.promo-banner .promo-offer:last-child { animation: promo-rise .6s var(--ease) .5s both; }

/* Offer detail cards below the banner */
.promo-details { max-width: 860px; margin-inline: auto; }
.promo-details .grid { margin-bottom: 40px; }
.promo-details .btn-row { justify-content: center; }

@media (max-width: 980px) {
  .promo-banner {
    grid-template-columns: 1fr;
    margin-left: 0;
    padding: 0 24px 32px;
    gap: 24px;
    text-align: left;
  }
  .promo-badge {
    margin: -18px auto 4px;
    max-width: 360px;
    width: 100%;
  }
  .promo-divider { height: 1px; margin: 0; }
  .promo-offer { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-badge, .promo-banner .promo-offer { animation: none !important; }
}

/* --- 11. Stats / metrics ------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.metric { padding: 28px 26px; border-radius: var(--radius-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.metric__value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--amber-300); letter-spacing: -0.03em; line-height: 1.1; }
.metric__label { font-size: .9375rem; color: rgba(255,255,255,.72); margin-top: 6px; }

/* --- 12. Quotes ---------------------------------------------------------- */
.quote {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 30px;
  display: flex; flex-direction: column; gap: 20px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote__stars { display: flex; gap: 3px; color: var(--amber-500); }
.quote__stars svg { width: 17px; height: 17px; }
.quote blockquote { margin: 0; font-size: 1.0625rem; color: var(--ink-2); }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--teal-50); color: var(--teal-500);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  border: 1px dashed var(--teal-100);
}
.quote__name { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.quote__role { font-size: .8125rem; color: var(--muted); }

.placeholder {
  color: var(--amber-700);
  background: var(--amber-50);
  border-radius: 5px;
  padding: 0 5px;
  font-weight: 700;
  font-size: .95em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- 13. Pricing --------------------------------------------------------- */
.billing {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.billing__btn {
  border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; color: var(--muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.billing__btn[aria-pressed="true"] { background: var(--teal-600); color: #fff; }
.billing__save {
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
  color: var(--amber-700); background: var(--amber-50);
  padding: 3px 9px; border-radius: 999px; margin-left: 7px;
}
.billing__btn[aria-pressed="true"] .billing__save { background: rgba(255,255,255,.16); color: var(--amber-300); }

/* Segmented control — two mutually exclusive views of the same section. */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border: 1.5px solid var(--teal-300);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.segmented__btn {
  border: 0;
  background: none;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 26px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--teal-600);
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segmented__btn:hover { background: var(--teal-50); }
.segmented__btn[aria-selected="true"] { background: var(--teal-600); color: #fff; }
.segmented__btn[aria-selected="true"]:hover { background: var(--teal-700); }

.segmented-wrap { margin-top: 4px; }
/* When a switch sits under a heading and intro text, give it room to breathe. */
.section-head p + .segmented-wrap,
.section-head h2 + .segmented-wrap { margin-top: 28px; }

/* Five benefit cards: a 3-column grid would leave a ragged last row, so wrap
   and centre instead — three on the first row, two centred beneath. */
.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.benefits-grid .card { flex: 0 1 calc(33.333% - 16px); min-width: 268px; }

@media (max-width: 960px) {
  .benefits-grid .card { flex: 0 1 calc(50% - 12px); }
}
@media (max-width: 640px) {
  .benefits-grid { gap: 16px; }
  .benefits-grid .card { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 420px) {
  .segmented { width: 100%; }
  .segmented__btn { flex: 1; padding: 10px 12px; font-size: .9375rem; }
}

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.plan {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 30px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.plan:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.plan--featured {
  border-color: var(--teal-600);
  box-shadow: 0 20px 50px rgba(22,83,87,.14);
  padding-top: 44px;
}
.plan__flag {
  position: absolute; top: 16px; left: 30px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-700); background: var(--amber-50);
  padding: 5px 11px; border-radius: 999px;
}
.plan__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.plan__for { font-size: .9375rem; color: var(--muted); margin-top: 5px; }
.plan__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; line-height: 1; }

/* Guest pricing card: the "price" is a statement, so it takes the brand colour
   with an amber underline accent rather than reading like a number. */
.plan--free .plan__amount {
  color: var(--teal-600);
  background: linear-gradient(transparent 72%, var(--amber-100) 72%, var(--amber-100) 94%, transparent 94%);
  padding: 0 2px;
  line-height: 1.1;
}
@media (max-width: 640px) {
  .plan--free .plan__amount { font-size: 2.125rem; }
}
.plan__unit { font-size: .875rem; color: var(--muted); }
.plan__note { font-size: .8125rem; color: var(--muted); margin-top: 8px; }
.plan__list { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.plan__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.plan__list svg { width: 18px; height: 18px; flex: none; color: var(--teal-500); margin-top: 3px; }
.plan__list li.is-off { color: #A9B8B8; }
.plan__list li.is-off svg { color: #C8D3D3; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
table.compare th, table.compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: .9375rem; }
table.compare thead th { background: var(--teal-50); font-family: var(--font-display); color: var(--ink); font-weight: 700; font-size: 1rem; }
table.compare tbody th { font-weight: 600; color: var(--ink-2); }
table.compare td { text-align: center; }
table.compare th:first-child, table.compare thead th:first-child { text-align: left; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare .yes { color: var(--teal-600); }
table.compare .no { color: #C1CCCC; }
table.compare svg { width: 19px; height: 19px; margin-inline: auto; }

/* --- 14. FAQ ------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); }
.faq__item.is-open { border-color: var(--teal-300); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; min-height: 64px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.015em;
}
.faq__q:hover { color: var(--teal-600); }
.faq__icon { width: 26px; height: 26px; flex: none; position: relative; color: var(--teal-500); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  top: 50%; left: 50%; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.faq__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 22px; color: var(--muted); font-size: 1rem; margin: 0; max-width: 68ch; }

/* --- 15. CTA band -------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, var(--teal-600) 0%, var(--teal-800) 60%, var(--teal-900) 100%);
  color: rgba(255,255,255,.8);
  padding: clamp(44px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 40px; align-items: center;
}
.cta::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px;
  background: radial-gradient(circle, rgba(220,156,73,.28), transparent 66%);
}
.cta > * { position: relative; }
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { color: rgba(255,255,255,.76); max-width: 46ch; margin-bottom: 30px; }
.cta__aside { display: flex; flex-direction: column; gap: 14px; }
.cta__point { display: flex; gap: 12px; align-items: flex-start; font-size: .96875rem; color: rgba(255,255,255,.82); }
.cta__point > span { min-width: 0; overflow-wrap: anywhere; }
.cta__point svg { width: 20px; height: 20px; flex: none; color: var(--amber-300); margin-top: 3px; }

/* --- 16. Page hero (inner pages) ----------------------------------------- */
.pagehero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--teal-700), var(--teal-900));
  color: rgba(255,255,255,.78);
  padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 7vw, 88px);
}
.pagehero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 420px at 84% 12%, rgba(220,156,73,.2), transparent 62%);
}
.pagehero > * { position: relative; }
.pagehero h1 { color: #fff; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin-bottom: 18px; }
.pagehero p { font-size: 1.125rem; color: rgba(255,255,255,.76); max-width: 58ch; margin-bottom: 0; }
.pagehero .eyebrow { color: var(--amber-300); }

.crumbs { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: rgba(255,255,255,.55); margin-bottom: 22px; }
.crumbs a { color: rgba(255,255,255,.72); }
.crumbs a:hover { color: var(--amber-300); }

/* --- 17. Footer ---------------------------------------------------------- */
.footer { background: var(--teal-900); color: rgba(255,255,255,.62); padding: clamp(56px, 6vw, 80px) 0 32px; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--amber-300); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__brandword { width: 132px; filter: brightness(0) invert(1); opacity: .95; }
.footer__mark { width: 44px; filter: brightness(0) invert(1); opacity: .95; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer__blurb { font-size: .9375rem; max-width: 38ch; margin-bottom: 22px; }
/* White version of the full logo, made for the dark footer. */
.footer__logo { width: 128px; margin-bottom: 16px; }
.footer__logo img { display: block; width: 100%; height: auto; }
.footer__blurb:has(+ .footer__credit) { margin-bottom: 10px; }
.footer__blurb strong { font-weight: 700; color: rgba(255,255,255,.92); }
/* Partner names link to their websites */
.footer__blurb a {
  color: rgba(255,255,255,.92);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.3);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.footer__blurb a strong { color: inherit; }
.footer__blurb a:hover { color: var(--amber-300); text-decoration-color: currentColor; }
.footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-body); font-weight: 700; }
.footer__list { display: flex; flex-direction: column; gap: 11px; font-size: .9375rem; overflow-wrap: anywhere; }
.footer__bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-size: .875rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.78);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--amber-500); color: var(--teal-900); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* --- 18. Misc content bits ----------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.2em; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber-500);
}
.prose ol {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 1.2em; padding-left: 30px;
}
.prose ol li { list-style: decimal; padding-left: 4px; }
.prose ol[type="a"] li { list-style: lower-alpha; }
.prose ol li::marker { color: var(--teal-600); font-weight: 700; }

/* Plain data table for policy pages (left-aligned, unlike table.compare) */
table.data { width: 100%; border-collapse: collapse; min-width: 420px; }
table.data th, table.data td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-2); font-size: .9375rem;
}
table.data thead th {
  background: var(--teal-50); font-family: var(--font-display);
  color: var(--ink); font-weight: 700; font-size: .96875rem;
}
table.data tbody th { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
table.data td { color: var(--muted); }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
.prose .table-wrap { margin-bottom: 1.2em; }

@media (max-width: 640px) {
  table.data { min-width: 520px; }
  table.data tbody th { white-space: normal; }
  table.data th, table.data td { padding: 12px 14px; }
}

.info-list { display: flex; flex-direction: column; gap: 20px; }
.info-list li { display: flex; gap: 15px; align-items: flex-start; }
.info-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.info-list__icon { width: 44px; height: 44px; border-radius: 13px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.info-list__icon svg { width: 21px; height: 21px; }
/* Email and phone icons double as shortcuts to Gmail and WhatsApp. */
.info-list__icon--link { background: #fff; border: 1px solid var(--line, #E3EBEB); box-shadow: 0 2px 6px rgba(7, 40, 42, .06); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.info-list__icon--link svg { width: 24px; height: 24px; }
.info-list__icon--link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7, 40, 42, .12); }
.info-list__icon--link:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 3px; }
.info-list strong { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; }
.info-list span, .info-list a { font-size: .9375rem; color: var(--muted); }
.info-list a:hover { color: var(--amber-600); }

/* --- Contact links ---------------------------------------------------------
   Email, phone and website links all render in the brand gold. Two tokens
   rather than one: amber-500 only reaches 2.4:1 on white, so light backgrounds
   use the darker amber-700 (4.8:1) and dark backgrounds the lighter amber-300
   (9.9:1 on teal-900). Same gold to the eye, legible on both. Buttons that
   happen to be contact links keep their own button styling.                  */
a[href^="mailto:"]:not(.btn),
a[href^="tel:"]:not(.btn),
a.contact-link:not(.btn) { color: var(--amber-700); font-weight: 600; }
a[href^="mailto:"]:not(.btn):hover,
a[href^="tel:"]:not(.btn):hover,
a.contact-link:not(.btn):hover { color: var(--amber-600); text-decoration: underline; }

.footer a[href^="mailto:"]:not(.btn),
.footer a[href^="tel:"]:not(.btn),
.footer a.contact-link:not(.btn),
.cta a[href^="mailto:"]:not(.btn),
.cta a[href^="tel:"]:not(.btn),
.cta a.contact-link:not(.btn),
.pagehero a[href^="mailto:"]:not(.btn),
.pagehero a[href^="tel:"]:not(.btn),
.pagehero a.contact-link:not(.btn),
.section--dark a[href^="mailto:"]:not(.btn),
.section--dark a[href^="tel:"]:not(.btn),
.section--dark a.contact-link:not(.btn),
.card--dark a[href^="mailto:"]:not(.btn),
.card--dark a[href^="tel:"]:not(.btn),
.card--dark a.contact-link:not(.btn),
.media-panel--dark a[href^="mailto:"]:not(.btn),
.media-panel--dark a[href^="tel:"]:not(.btn),
.media-panel--dark a.contact-link:not(.btn) { color: var(--amber-300); }

.footer a[href^="mailto:"]:not(.btn):hover,
.footer a[href^="tel:"]:not(.btn):hover,
.footer a.contact-link:not(.btn):hover,
.cta a[href^="mailto:"]:not(.btn):hover,
.cta a[href^="tel:"]:not(.btn):hover,
.cta a.contact-link:not(.btn):hover,
.pagehero a[href^="mailto:"]:not(.btn):hover,
.pagehero a[href^="tel:"]:not(.btn):hover,
.pagehero a.contact-link:not(.btn):hover,
.section--dark a[href^="mailto:"]:not(.btn):hover,
.section--dark a[href^="tel:"]:not(.btn):hover,
.section--dark a.contact-link:not(.btn):hover,
.card--dark a[href^="mailto:"]:not(.btn):hover,
.card--dark a[href^="tel:"]:not(.btn):hover,
.card--dark a.contact-link:not(.btn):hover,
.media-panel--dark a[href^="mailto:"]:not(.btn):hover,
.media-panel--dark a[href^="tel:"]:not(.btn):hover,
.media-panel--dark a.contact-link:not(.btn):hover { color: var(--amber-500); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
}
.pill svg { width: 15px; height: 15px; color: var(--teal-500); }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 26px; padding-bottom: 34px; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: -8px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--teal-100) 0 6px, transparent 6px 12px);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline__year {
  font-family: var(--font-display); font-weight: 700; color: var(--teal-600);
  font-size: 1.0625rem; padding-left: 26px; position: relative;
}
.timeline__year::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--amber-500);
}
.timeline h4 { margin-bottom: 5px; }
.timeline p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* Form */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink);
  font-size: 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(31,106,111,.12);
}
.field__hint { font-size: .8125rem; color: var(--muted); }
/* Radio choice (Host / Guest): native radios inside large tappable cards. */
.choice-group { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: 7px; font-size: .875rem; font-weight: 700; color: var(--ink); }
.choice { position: relative; flex: 1 1 160px; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff;
  font-size: 1rem; font-weight: 700; color: var(--ink);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.choice span::before {
  content: ""; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--teal-300);
  background: #fff;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.choice:hover span { border-color: var(--teal-300); }
.choice input:checked + span { border-color: var(--teal-600); background: var(--teal-50); }
.choice input:checked + span::before { border-color: var(--teal-600); box-shadow: inset 0 0 0 4px #fff; background: var(--teal-600); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(31, 106, 111, .18); border-color: var(--teal-500); }

.form__consent { display: flex; gap: 11px; align-items: flex-start; font-size: .875rem; color: var(--muted); }
.form__consent input { min-height: 0; width: 19px; height: 19px; margin-top: 3px; accent-color: var(--teal-600); flex: none; }
.form__status { font-size: .9375rem; font-weight: 600; color: var(--teal-600); min-height: 1.4em; }
.form__status.is-success { color: #1E7A4C; }
.form__status.is-error { color: #B42318; }
/* Honeypot: off-screen for people, still in the form for bots. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }

/* --- 19. Reveal animation ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }

/* --- 20. Responsive ------------------------------------------------------ */
@media (max-width: 1240px) and (min-width: 1081px) {
  .phone-pair { --phone-zoom: .72; gap: 16px; }
  .phone-pair .phone__chip--a { left: -12%; }
  .phone-pair .phone__chip--b { right: -5%; }
}

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 56px; text-align: left; }
  .hero__media { justify-self: center; }
  .phone__chip--a { left: -8%; }
  .phone__chip--b { right: -6%; }
  .phone-pair { --phone-zoom: .92; gap: 28px; }
  .phone-pair .phone__chip--a { left: -16%; }
  .phone-pair .phone__chip--b { right: -12%; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .footer__brandcol { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --header-h: 70px; }

  .nav-toggle { display: inline-flex; }
  .header__actions .btn--dark { display: none; }
  /* The menu becomes a drop-down panel here, so push the toggle to the right edge. */
  .header__actions { margin-left: auto; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto;
    margin: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 16px 24px 26px;
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 14px 12px; font-size: 1.0625rem; border-radius: 12px; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: var(--teal-50); }
  .nav__cta { display: inline-flex; margin-top: 14px; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split--flip .split__media { order: 0; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .metrics { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .container { padding-inline: 20px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .card { padding: 26px 22px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .timeline li::before { display: none; }
  .store-row { width: 100%; }
  .store-btn { flex: 1 1 auto; }
  .btn-row .btn { width: 100%; }
  .phone__chip { display: none; }
  .media-panel { padding: 30px 20px; }
  /* .screen's 330px max-width plus the panel's padding exceeded a 375px
     viewport, giving the page a horizontal scroll. */
  .screen { max-width: 100%; }
  .logostrip__slot { min-width: 140px; }
}

/* Audience cards carry only an icon and a one-or-two-word label, so a
   full-width card leaves a lot of dead space. Narrow the row, centre it under
   the heading, and centre the content inside each card.
   Placed after the breakpoints above so it wins on source order. */
.grid--audience {
  max-width: 780px;
  margin-inline: auto;
  gap: 20px;
}
.grid--audience .card {
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.grid--audience .card__icon { margin-bottom: 16px; }
.grid--audience .card h3 { margin-bottom: 0; font-size: 1.1875rem; }

@media (max-width: 640px) {
  /* Three compact cards still read fine side by side on a phone. */
  .grid--audience { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .grid--audience .card { padding: 20px 8px; }
  .grid--audience .card__icon {
    width: 44px; height: 44px; border-radius: 13px; margin-bottom: 12px;
  }
  .grid--audience .card__icon svg { width: 22px; height: 22px; }
  .grid--audience .card h3 { font-size: .875rem; }
}

/* --- 21. Motion + print preferences -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .nav-toggle, .cta { display: none; }
  body { background: #fff; color: #000; }
}

/* Hero phone pair on narrow screens: keep both handsets side by side and
   shrink them to fit the viewport instead of stacking. */
@media (max-width: 720px) {
  .phone-pair { --phone-zoom: .68; gap: 14px; }
}
@media (max-width: 500px) {
  .phone-pair { --phone-zoom: .52; gap: 10px; }
  .phone__label { font-size: .625rem; letter-spacing: .1em; }
}


/* --- 22. Playful touches ------------------------------------------------- */
/* Small motion and wayfinding aids layered on the existing design. Every
   animation here is decorative and switched off for reduced motion. */

/* Reading progress along the bottom edge of the header */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--amber-500), #F6B73C);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}

/* Hero: the two phones float out of step, the chips pop in */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes chip-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
.phone-pair .phone-stage { animation: float-y 6s ease-in-out infinite; }
.phone-pair .phone-stage + .phone-stage { animation-delay: -3s; }
.phone-pair .phone__chip { animation: chip-pop .6s cubic-bezier(.34, 1.4, .64, 1) both; }
.phone-pair .phone__chip--a { animation-delay: .9s; }
.phone-pair .phone__chip--b { animation-delay: 1.3s; }
.phone__chip-dot { box-shadow: 0 0 0 0 rgba(47, 168, 107, .5); animation: dot-ping 2s ease-out 1.6s infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(47, 168, 107, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(47, 168, 107, 0); } }

/* How it works: colour key, cards arrive one by one, arrows nudge forward */
.flow-key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: -12px 0 30px;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
}
.flow-key__item { display: inline-flex; align-items: center; gap: 8px; }
.flow-key__dot { width: 12px; height: 12px; border-radius: 50%; }
.flow-key__dot--guest { background: #ED7D31; }
.flow-key__dot--host { background: #C00000; }
.flow-key__item--hint { color: var(--muted); font-weight: 500; }
.flow-key__item--hint::before {
  content: ""; width: 9px; height: 13px; background: #00695C;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.flow.reveal { opacity: 1; transform: none; }
.flow.reveal .flow__step {
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease);
  transition-delay: calc(var(--i) * 80ms), calc(var(--i) * 80ms), 0s;
}
.flow.reveal.is-in .flow__step { opacity: 1; transform: none; }
.flow__step:hover { box-shadow: 0 14px 30px rgba(7, 40, 42, .1); }
.flow__step:hover .flow__art { transform: scale(1.04); }
.flow__art { transition: transform .35s var(--ease); }
@keyframes flow-nudge { 0%, 70%, 100% { translate: 0 0; } 82% { translate: 5px 0; } }
.flow.is-in .flow__step + .flow__step::before { animation: flow-nudge 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms + .8s); }
@media (max-width: 640px) {
  @keyframes flow-nudge-down { 0%, 70%, 100% { translate: 0 0; } 82% { translate: 0 5px; } }
  .flow.is-in .flow__step + .flow__step::before { animation-name: flow-nudge-down; }
}

/* Pricing: product photos lift on hover; the price counts up (see main.js) */
.kit__img img { transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.kit__item:hover .kit__img img { transform: translateY(-6px) scale(1.05); }
.kit__num { transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.kit__item:hover .kit__num { transform: rotate(-8deg) scale(1.08); }
.pkg__num { font-variant-numeric: tabular-nums; }

/* Floating WhatsApp shortcut */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: #25D366; color: #fff;
  font-weight: 700; font-size: .9375rem;
  box-shadow: 0 12px 28px rgba(7, 40, 42, .25);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s var(--ease);
}
.chat-fab svg { width: 34px; height: 34px; }
.chat-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.chat-fab:hover { color: #fff; box-shadow: 0 16px 36px rgba(7, 40, 42, .32); transform: translateY(-2px); }
.chat-fab:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 3px; }
@media (max-width: 640px) {
  .chat-fab { right: 16px; bottom: 16px; padding: 9px; }
  .chat-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-pair .phone-stage, .phone-pair .phone__chip, .phone__chip-dot,
  .flow.is-in .flow__step + .flow__step::before { animation: none !important; }
  .flow.reveal .flow__step { opacity: 1; transform: none; transition: none; }
  .kit__img img, .kit__num, .flow__art, .chat-fab { transition: none; }
}


/* --- 23. Who it's for ----------------------------------------------------- */
/* The app's welcome screen beside the pitch, then who TETAMU serves, grouped
   into hosts and guests with the same icon tiles as before. */
.who {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.who__media { position: relative; display: flex; justify-content: center; }
.who__glow {
  position: absolute; width: 100%; aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(22, 83, 87, .12), transparent);
  pointer-events: none;
}
.phone--welcome { width: 100%; max-width: 280px; animation: float-y 7s ease-in-out infinite; }
.phone--welcome .phone__screen { background: #fff; min-height: 540px; padding: 16px 16px 22px; }
.welcome__bar { display: flex; justify-content: space-between; align-items: center; }
.welcome__lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 800; color: var(--muted); }
.welcome__lang span { padding: 3px 8px; border-radius: 999px; }
.welcome__lang .is-on { background: #F6B73C; color: #3A2A0A; }
.welcome__theme { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FFF4DC; color: #E39A1B; }
.welcome__theme svg { width: 15px; height: 15px; }
.welcome__brand { flex: 1; display: grid; place-items: center; padding: 20px 0; }
.welcome__brand img { width: 74%; height: auto; }
.welcome__actions { display: grid; gap: 10px; }
.welcome__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--ink);
  font-size: .8125rem; font-weight: 700;
}
.welcome__btn svg { width: 15px; height: 15px; }
.welcome__btn--primary { background: #0F6B64; border-color: #0F6B64; color: #fff; }

.who__lead {
  margin: 0 0 16px;
  font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 700;
  line-height: 1.3; letter-spacing: -0.015em; color: var(--ink);
}
.who__text { margin: 0 0 14px; font-size: 1.0625rem; color: var(--muted); max-width: 36em; }
.who__text strong { color: var(--ink); font-weight: 700; }
/* Desktop: each line breaks exactly where the approved copy does. Narrower
   screens let the same text wrap naturally. */
@media (min-width: 1081px) {
  .who__text--lines { max-width: none; }
  .who__line { display: block; white-space: nowrap; }
}
.who__label { margin: 22px 0 0; font-weight: 700; color: var(--ink); }
.who__label + .who__groups { margin-top: 12px; }
.who__closing { margin: 26px 0 0; font-family: var(--font-display); font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); font-weight: 700; color: var(--ink); }

.who__groups { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-top: 32px; }
.who-group { padding: 16px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.who-group__label {
  display: inline-block; margin: 0 0 14px; padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.who-group--host .who-group__label { background: var(--teal-700); color: #fff; }
.who-group--guest .who-group__label { background: #F6B73C; color: #3A2A0A; }
.who-group__tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px;
}
.who-tile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 8px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.who-tile .card__icon { margin: 0; }
.who-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.who-tile:hover .card__icon { background: var(--amber-100); color: var(--amber-700); }
.who-tile__label { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }

@media (max-width: 1080px) {
  .who { grid-template-columns: minmax(0, 1fr); }
  .who__media { order: 2; }
  .who__body { text-align: center; }
  .who__text { margin-inline: auto; }
  .who-group { text-align: center; }
}
@media (max-width: 860px) {
  .who__groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .phone--welcome { max-width: 240px; }
  .phone--welcome .phone__screen { min-height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone--welcome { animation: none; }
  .who-tile { transition: none; }
}

/* --- 24. Guest pricing banner --------------------------------------------- */
/* The supplied artwork shown as-is. Invisible links cover the store badges
   printed in the image so they can still be clicked. */
.guest-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(7, 40, 42, .14); }
.guest-banner img { display: block; width: 100%; height: auto; }
.guest-banner__hit { position: absolute; top: 78.6%; height: 5.9%; border-radius: 6px; }
.guest-banner__hit--play { left: 68.1%; width: 10.9%; }
.guest-banner__hit--apple { left: 79.9%; width: 10.9%; }
.guest-banner__hit:hover { box-shadow: 0 0 0 3px rgba(246, 183, 60, .9); }
.guest-banner__hit:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; }


/* --- 25. Phone polish ---------------------------------------------------- */
/* Small-screen refinements: shorter cards, tidier wrapping and larger touch
   targets. Desktop and tablet layouts are untouched. */
@media (max-width: 640px) {
  /* How it works: number and title on the left, picture on the right */
  .flow { gap: 30px; }
  .flow__step {
    display: grid; grid-template-columns: minmax(0, 1fr) 44%;
    align-items: center; column-gap: 12px;
    padding: 14px 14px 14px 12px;
  }
  .flow__head { flex-direction: column; gap: 8px; margin: 0; }
  .flow__num { width: 36px; height: 36px; font-size: 1.0625rem; }
  .flow__head h3 { font-size: .9375rem; padding-top: 0; }
  .flow__art { width: 100%; margin: 0; }
  .flow__step + .flow__step::before { top: -24px; }

  /* Feature and benefit cards: icon beside the title */
  #features .card, #benefits .card {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px; align-items: center;
    padding: 20px 18px;
  }
  #features .card .card__icon, #benefits .card .card__icon { width: 46px; height: 46px; border-radius: 14px; margin: 0; }
  #features .card .card__icon svg, #benefits .card .card__icon svg { width: 22px; height: 22px; }
  #features .card h3, #benefits .card h3 { margin: 0; font-size: 1.0625rem; }
  #features .card p, #benefits .card p { grid-column: 1 / -1; margin-top: 10px; }

  /* Who it's for: a smaller welcome-screen phone */
  .phone--welcome { max-width: 200px; }
  .phone--welcome .phone__screen { min-height: 400px; }

  /* Long dashed titles: drop the side rules once the title has to wrap */
  .section-title-dashed--long { display: block; text-wrap: balance; }
  .section-title-dashed--long::before, .section-title-dashed--long::after { display: none; }

  /* Readable store-badge kicker in the footer */
  .footer .store-btn--footer .store-btn__kicker { font-size: .6875rem; }
}

/* Larger touch targets on touch screens */
@media (pointer: coarse) {
  .hero-slider__controls { gap: 0; }
  .hero-slider__dot { box-sizing: content-box; border: 9px solid transparent; background-clip: padding-box; }
  .hero-slider__toggle { width: 36px; height: 36px; margin-left: 4px; }
  .footer__list a:not(.store-btn), .footer__bottom a { display: inline-block; padding-block: 8px; }
  .info-list a { display: inline-block; padding-block: 6px; }
}


/* --- 26. Illustrated cards (Benefits, Features) ----------------------------- */
/* Title plus a flat illustration, in the How It Works card style. The original
   description stays in the markup for screen readers and search, visually hidden. */
.ill-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 14px;
  background: #E4F5F2; border-radius: 22px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ill-card h3 {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(1rem, .92rem + .25vw, 1.0625rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.01em; color: #12695E;
  text-align: center; text-wrap: balance;
}
.ill-card__art { display: block; margin-top: auto; }
.ill-card__art svg { display: block; width: 100%; height: auto; border-radius: 14px; transition: transform .35s var(--ease); }
.ill-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(7, 40, 42, .1); }
/* On the mint section background, white cards keep their edges. */
.section--mist .ill-card { background: #fff; box-shadow: 0 1px 0 rgba(7, 40, 42, .04), 0 0 0 1px #D9ECE8; }
.section--mist .ill-card:hover { box-shadow: 0 14px 30px rgba(7, 40, 42, .1), 0 0 0 1px #D9ECE8; }
.ill-card:hover .ill-card__art svg { transform: scale(1.03); }

/* One card size everywhere: the width of four cards across the container.
   Grids marked --3 cap their rows at three of those cards (3+3, 3+2), so the
   cards stay identical in size while the rows stay balanced and centred. */
.ill-grid {
  --ill-gap: 24px;
  --ill-card: calc((100cqw - 3 * var(--ill-gap)) / 4);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ill-gap);
}
/* Measure against the section container, not the window (scrollbars vary). */
#features > .container, #benefits > .container { container-type: inline-size; }
.ill-grid--3 { max-width: calc(var(--ill-card) * 3 + var(--ill-gap) * 2 + 2px); margin-inline: auto; }
.ill-grid > .ill-card { flex: 0 0 var(--ill-card); width: var(--ill-card); min-width: 0; }
@media (max-width: 1080px) {
  .ill-grid { --ill-card: calc((100% - var(--ill-gap)) / 2); }
  .ill-grid--3 { max-width: none; }
}
/* Phones: title on the left, picture on the right, like How It Works */
@media (max-width: 640px) {
  .ill-grid { --ill-gap: 16px; }
  .ill-grid > .ill-card { flex: 1 1 100%; width: auto; }
  .ill-card {
    display: grid; grid-template-columns: minmax(0, 1fr) 48%;
    align-items: center; column-gap: 12px;
    padding: 12px 12px 12px 16px;
  }
  .ill-card h3 { font-size: .9375rem; }
  .ill-card__art { margin: 0; }
  .ill-card__art svg { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ill-card, .ill-card__art svg { transition: none; }
}

/* --- 27. Pricing fits one screen on desktop --------------------------------- */
/* From the title to "Enquire now", the host package fits a typical laptop or
   desktop screen when you arrive from the Pricing link, so nothing is cut off. */
@media (min-width: 1081px) {
  #pricing { padding-top: 14px; padding-bottom: 72px; }
  #pricing .section-head { margin-bottom: 22px !important; }
  #pricing .section-title-dashed + .segmented-wrap { margin-top: 16px; }

  .pkgbanner { padding-top: 24px; }
  .pkgbanner__band { height: 206px; }
  .pkgbanner__head { padding-bottom: 20px; }
  .pkgbanner__head .pkg__ribbon { margin-bottom: 12px; padding: 8px 22px 7px; font-size: 1.15rem; }
  .pkg__rm { font-size: 2.1rem; }
  .pkg__num { font-size: 4.5rem; }
  .pkg__lead { font-size: 1.25rem; }
  .pkg__lead .promo-swoosh { margin-top: 6px; }

  .pkgbanner__kit { padding-top: 22px; padding-bottom: 62px; }
  .pkgbanner__kit .kit__img { height: 100px; margin-bottom: 10px; }
  .pkgbanner__kit .kit__num { width: 34px; height: 34px; font-size: 1.0625rem; }
  .pkgbanner__kit .kit__desc { margin-top: 4px; }

  .pkgbanner__promo { margin-top: -40px; padding-block: 16px; }
  .pkgbanner__promo .promo-badge--img img { width: 200px; }
  .pkgbanner__promo .promo-offer__img { width: 100px; }
  .pkgbanner__promo .promo-phone { width: 54px; }
  .pkgbanner__promo .promo-swoosh { margin-top: 4px; }

  .pkgbanner__cta { margin-top: 22px; flex-direction: row; justify-content: center; gap: 20px; text-align: left; }
}

/* --- 28. Host pricing slider and add-on devices ----------------------------- */
/* Reuses the hero slider. On desktop both slides share one height, so the
   page never shifts while it plays; on smaller screens each slide keeps its
   own height and the slider holds still once you scroll into it. The viewport
   reaches past the container so card shadows and price badges are not clipped. */
.price-slider { --slider-bleed: 24px; background: none; }
.price-slider .hero-slider__viewport { margin-inline: calc(var(--slider-bleed) * -1); }
@media (min-width: 1081px) {
  .price-slider .hero-slider__track { align-items: stretch; }
}
.price-slider__slide { padding: 0 var(--slider-bleed) 12px; }
.price-slider__controls {
  top: 6px; right: 0; bottom: auto;
  background: rgba(0, 60, 58, .9);
}
@media (max-width: 1080px) {
  .price-slider__controls { position: relative; top: auto; right: auto; width: max-content; margin: 18px auto 0; }
}
@media (max-width: 640px) {
  .price-slider { --slider-bleed: 16px; }
}

/* Add-on devices, in the TETAMU brand palette */
.addons {
  --brand-green: #00695C; --brand-teal: #00A896; --brand-light: #E6F4F2;
  --brand-gold: #F5B301; --brand-dark: #003C3A; --brand-gray: #6B7C7A;
  display: flex; flex-direction: column; padding-top: 10px;
}
.addons__title {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800;
  letter-spacing: .05em; line-height: 1.1; color: var(--brand-dark);
}
.addons__title::after {
  content: ""; display: block; width: 72px; height: 4px; margin: 12px auto 0;
  border-radius: 4px; background: var(--brand-gold);
}
.addons__grid {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.addon {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #fff 0%, var(--brand-light) 100%);
  border: 1.5px solid rgba(0, 105, 92, .28); border-radius: 22px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.addon:hover { transform: translateY(-4px); border-color: var(--brand-green); box-shadow: 0 16px 32px rgba(0, 60, 58, .14); }
.addon__name {
  margin: 0; min-height: 2.4em; padding-inline: 34px;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 800; line-height: 1.2;
  color: var(--brand-green);
}
.addon__img {
  display: block; width: 100%; height: 150px; margin-top: auto; object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 60, 58, .16));
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.addon:hover .addon__img { transform: translateY(-4px) scale(1.04); }
/* Photos with a lot of empty space around the product */
.addon__img--zoom { scale: 1.45; }
/* Gold price badge on the card's top-right corner */
.addon__price {
  position: absolute; top: -14px; right: -12px; z-index: 1;
  width: 66px; height: 66px; margin: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--brand-gold); color: var(--brand-dark);
  border: 3px solid #fff; box-shadow: 0 8px 18px rgba(245, 179, 1, .35);
  font-family: var(--font-display); line-height: 1;
  transform: rotate(-8deg);
}
.addon__amount { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.addon__amount small { font-size: .55em; font-weight: 800; margin-right: 1px; vertical-align: .55em; }
.addon__unit { margin-top: 2px; font-size: .6875rem; font-weight: 600; font-style: italic; }

@media (max-width: 1080px) {
  .addons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .addons__grid { gap: 18px 14px; margin-top: 22px; }
  /* Narrow cards: photo on top and the name below, clear of the price badge */
  .addon { padding: 18px 10px 12px; border-radius: 18px; }
  .addon__name { order: 1; font-size: .875rem; padding-inline: 0; }
  .addon__img { height: 96px; margin-top: 0; }
  .addon__price { width: 54px; height: 54px; top: -12px; right: -8px; }
  .addon__amount { font-size: .9375rem; }
  .addon__unit { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .addon, .addon__img { transition: none; }
}