/* ==========================================================================
   Realest — design system
   Built from the look-and-feel document. Mobile-first: the base rules are the
   phone, and the media queries add the desk.

   1. Tokens
   2. Reset and base
   3. Layout: shell, sections, section heads
   4. Buttons and links
   5. Header, nav, footer, sticky CTA
   6. Hero and role strip
   7. Homepage sections
   8. Persona pages
   9. Pricing
  10. Forms
  11. Support
  12. Prose and legal
  13. Phone frames and app screens
  14. Consent, 404, utilities
   ========================================================================== */

/* 1. Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --navy: #15385F;
  --navy-deep: #0E2742;
  --periwinkle: #99B3DC;
  --periwinkle-soft: #A9BFD9;
  --offwhite: #F0F5FA;
  --steel: #4A7095;          /* body copy on light — 5.19:1 on white */
  --indigo: #7877EF;         /* accents and rings only, never text: 3.69:1 */
  --indigo-deep: #5A57D8;    /* the indigo that may carry text — 5.54:1 */
  --indigo-tint: #EEEEFD;

  /* The palette's #5A82B0 reads at 4.00:1 on white, which fails AA at the label
     sizes it is used for. Darkened until it passes; the quieter feel now comes
     from size, weight and letter-spacing rather than from lightness alone. */
  --muted: #4F7299;          /* 5.00:1 on white, 4.56:1 on off-white */

  /* Steel is unreadable on navy (2.29:1), so quiet text on dark uses this. */
  --periwinkle-dim: #8FA9CE; /* 4.95:1 on navy, 6.29:1 on navy-deep */

  --hairline: #D8E4F3;
  --tint: #E8EEF6;
  --white: #FFFFFF;

  /* Tint is the darkest light background; text on it needs a darker ink. */
  --ink-on-tint: #46698C;    /* 4.92:1 on tint */

  /* Disabled controls are exempt from the contrast rules, but an invisible
     button is still a bad button — kept at 3:1 so it reads as off, not absent. */
  --disabled-ink: #7E97B5;
  --error: #C24A4A;
  --error-line: #E06A6A;

  /* Type scale — clamped so it flows between the phone and the desk */
  --fs-display: clamp(2.5rem, 1.6rem + 4.4vw, 4.25rem);
  --fs-page-title: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-section: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  --fs-sub: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --fs-card: clamp(1.25rem, 1.16rem + 0.4vw, 1.3125rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.78125rem;

  /* Spacing ramp: 4 8 12 16 24 32 48 64 88 */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 5.5rem;

  --section-y: 3.5rem;      /* 56 on mobile, 88 from 1024 up */
  --shell-max: 79rem;       /* 1264 content max */
  --gutter: 1.25rem;        /* 20 / 40 / 88 page margin */

  /* Shape */
  --r-input: 10px;
  --r-card: 16px;
  --r-pill: 999px;

  --ring: 0 0 0 3px var(--white), 0 0 0 6px var(--indigo);
  --ring-inset: 0 0 0 3px rgba(120, 119, 239, 0.35);
  --lift: 0 1px 2px rgba(21, 56, 95, 0.04), 0 24px 60px -34px rgba(21, 56, 95, 0.28);

  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
}

@media (min-width: 48em) {
  :root { --gutter: 2.5rem; }
}

@media (min-width: 64em) {
  :root { --section-y: 5.5rem; --gutter: 2.5rem; }
}

/* 2. Reset and base ─────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* The browser's own [hidden] rule loses to any class that sets display, which
   is most of them here. Scripts toggle `hidden` to show and hide the form, the
   success state and the sticky bar, so this has to win. */
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--indigo-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy); }

button { font: inherit; cursor: pointer; }

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

::selection { background: var(--indigo); color: var(--white); }

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--r-input);
  box-shadow: var(--lift);
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* 3. Layout ─────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section--white { background: var(--white); }
.section--offwhite { background: var(--offwhite); }

/* Tint is the darkest of the light backgrounds, so both text greys are stepped
   down here to stay above 4.5:1 on it. */
.section--tint {
  background: var(--tint);
  --steel: var(--ink-on-tint);
  --muted: var(--ink-on-tint);
}
.section--navy { background: var(--navy); color: var(--white); }
.section--deep { background: var(--navy-deep); color: var(--white); }

.section--offwhite + .section--white,
.section--white + .section--offwhite { border-top: 1px solid var(--hairline); }

.eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo-deep);
}
.eyebrow--on-navy { color: var(--periwinkle); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--steel);
  max-width: 34em;
}

.section-head { margin-bottom: var(--s7); }
.section-head__title { font-size: var(--fs-section); max-width: 18ch; }
.section-head__main .lede { margin-top: var(--s4); }
.section-head__note { font-size: var(--fs-body); color: var(--steel); max-width: 22em; }
.section-head__aside { margin-top: var(--s4); }

@media (min-width: 64em) {
  .section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s7);
  }
  .section-head--split .section-head__title { max-width: 16ch; }
  .section-head--split .section-head__aside { margin-top: 0; flex: none; }
  .section-head--stack .section-head__title { max-width: 22ch; }
}

.link-more {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--indigo-deep);
  text-decoration: none;
}
.link-more:hover { color: var(--navy); text-decoration: underline; }

.pill-link {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pill-link:hover { border-color: var(--indigo); color: var(--indigo-deep); }

/* 4. Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-input);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

/* Indigo carries white text at only 3.7:1, so primary buttons are navy and
   indigo is kept for hover, rings and highlights. */
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--indigo-deep); color: var(--white); }

.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--tint); color: var(--navy); }

.btn--on-navy { background: var(--offwhite); color: var(--navy); }
.btn--on-navy:hover { background: var(--white); color: var(--navy); }

.btn--ghost-on-navy { background: transparent; color: var(--white); border-color: var(--steel); }
.btn--ghost-on-navy:hover { border-color: var(--periwinkle); color: var(--white); }

.btn--sm { min-height: 40px; padding: 0.6rem 1rem; font-size: var(--fs-small); }
.btn--lg { padding: 1rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s5);
}
.cta-block--center { justify-content: center; }

.cta-block > .btn { flex: 1 1 auto; }
@media (min-width: 30em) {
  .cta-block > .btn { flex: 0 0 auto; }
}

.cta-sub {
  flex-basis: 100%;
  font-size: var(--fs-small);
  color: var(--muted);
}
.cta-sub--on-navy { color: var(--periwinkle); }
.cta-block--center .cta-sub { text-align: center; }

@media (min-width: 48em) {
  .cta-sub { flex-basis: auto; }
}

/* Store badges */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--s3); }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-input);
  text-decoration: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.store-badge--light { background: var(--navy); border: 1px solid var(--navy); }
.store-badge--light:hover { background: var(--navy-deep); }
.store-badge--navy { background: var(--offwhite); border: 1px solid var(--offwhite); }
.store-badge--navy:hover { background: var(--white); }

.store-badge__mark { flex: none; }
.store-badge--light .store-badge__mark { color: var(--white); }
.store-badge--navy .store-badge__mark { color: var(--navy); }

.store-badge__text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge__pre { font-size: 0.65rem; }
.store-badge__name { font-size: 0.9375rem; font-weight: 600; }

.store-badge--light .store-badge__pre { color: var(--periwinkle); }
.store-badge--light .store-badge__name { color: var(--white); }
.store-badge--navy .store-badge__pre { color: var(--steel); }
.store-badge--navy .store-badge__name { color: var(--navy); }

/* 5. Header, nav, footer ────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header--navy { background: var(--navy); }
.site-header--light { background: var(--white); border-bottom: 1px solid var(--hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 64px;
  padding-block: var(--s3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { width: 32px; height: 32px; border-radius: 50%; }
.brand__word { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.site-header--navy .brand__word { color: var(--white); }
.site-header--light .brand__word { color: var(--navy); }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: var(--s5); }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
}
.site-header--navy .site-nav__link { color: var(--periwinkle); }
.site-header--navy .site-nav__link:hover { color: var(--white); }
.site-header--light .site-nav__link { color: var(--steel); }
.site-header--light .site-nav__link:hover { color: var(--navy); }

.site-nav__link.is-current { font-weight: 600; border-bottom-color: var(--indigo); }
.site-header--navy .site-nav__link.is-current { color: var(--white); }
.site-header--light .site-nav__link.is-current { color: var(--navy); }

.site-header__end { display: flex; align-items: center; gap: var(--s4); }
.site-header__end .btn { white-space: nowrap; }

/* On the narrowest phones the header CTA crowds out the logo. The sticky bar at
   the bottom of the screen keeps the action within reach, so it can go. */
@media (max-width: 26.5em) {
  .site-header__end > .btn { display: none; }
}

.site-nav__support {
  display: none;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.site-header--navy .site-nav__support { color: var(--periwinkle-dim); }
.site-header--navy .site-nav__support:hover { color: var(--periwinkle); }
.site-header--light .site-nav__support { color: var(--muted); }
.site-header--light .site-nav__support:hover { color: var(--navy); }

/* Dropdown and mobile menu are both <details>, so they work with no JS. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }

.menu__chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s var(--ease);
}
.menu[open] .menu__chevron { transform: translateY(1px) rotate(-135deg); }

.menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  min-width: 20rem;
  padding: var(--s2);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
}
.menu__panel a {
  display: block;
  padding: var(--s3) var(--s4);
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
}
.menu__panel a:hover { background: var(--offwhite); }
.menu__panel b { display: block; font-size: var(--fs-small); font-weight: 600; }
.menu__panel i { display: block; font-style: normal; font-size: 0.875rem; color: var(--steel); }

.mobile-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--s3) * -1);
  list-style: none;
  cursor: pointer;
  border-radius: 10px;
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu__bars { display: flex; flex-direction: column; gap: 5px; }
.mobile-menu__bars i { display: block; width: 20px; height: 2px; border-radius: 1px; }
.site-header--navy .mobile-menu__bars i { background: var(--white); }
.site-header--light .mobile-menu__bars i { background: var(--navy); }
.mobile-menu[open] .mobile-menu__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.mobile-menu[open] .mobile-menu__bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--s2) var(--gutter) var(--s5);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--lift);
}
.mobile-menu__panel a {
  display: block;
  padding: var(--s3) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--offwhite);
}
.mobile-menu__panel a[aria-current] { font-weight: 600; color: var(--indigo-deep); }

@media (min-width: 64em) {
  .site-nav { display: block; }
  .site-nav__support { display: inline-block; }
  .mobile-menu { display: none; }
  .site-header__inner { gap: var(--s7); }
  .brand { margin-right: 0; }
  .site-header__end { margin-left: auto; }
}

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px -18px rgba(21, 56, 95, 0.5);
}

@media (min-width: 64em) {
  .sticky-cta { display: none; }
}

/* Footer */
.site-footer {
  padding-block: var(--s8) var(--s6);
  background: var(--navy-deep);
  color: var(--periwinkle);
}
.site-footer__grid {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(153, 179, 220, 0.2);
}
.site-footer__brand p { margin-top: var(--s3); max-width: 20em; font-size: var(--fs-small); }
.brand--footer .brand__word { color: var(--white); }

.site-footer__col h2 {
  margin-bottom: var(--s3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--periwinkle-dim);
}
.site-footer__col li + li { margin-top: var(--s3); }
.site-footer__col a {
  font-size: var(--fs-small);
  color: var(--periwinkle);
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--white); text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  padding-top: var(--s5);
  font-size: 0.875rem;
  color: var(--periwinkle-dim);
}

@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); }
}

/* 6. Hero and role strip ────────────────────────────────────────────────── */

.hero { background: var(--navy); color: var(--white); padding-top: var(--s6); }
.hero__inner { display: grid; gap: var(--s7); }

/*
 * Hero text entrance, desktop/tablet only. Mobile renders the final state
 * directly — no animation, no opacity:0 flash, ever.
 *
 * Gated by a class (.js-hero-anim, set once by the inline script at the top
 * of hero()'s markup) rather than a live `@media (min-width: 48em)` rule.
 * A width-based media query would restart this animation from scratch every
 * time the viewport crosses 48em after load — a real desktop user dragging
 * their window narrower and back, or a tablet rotating near that width, would
 * see the hero vanish and re-fade-in. The one-time check avoids that, and as
 * a side effect also avoids a Chromium/Playwright quirk where a full-page
 * screenshot's internal resize step crosses the same breakpoint and captures
 * the hero mid-restart.
 *
 * Transform-only keyframes cause no reflow, and the global
 * prefers-reduced-motion rule already collapses the duration to ~0 for anyone
 * who has asked for less motion, landing content in place instantly rather
 * than leaving it hidden.
 */
html.js-hero-anim .hero .hero__title,
html.js-hero-anim .hero .hero__lede,
html.js-hero-anim .hero .cta-block {
  opacity: 0;
  animation: hero-in 0.5s cubic-bezier(0.2, 0.6, 0.25, 1) forwards;
}
html.js-hero-anim .hero .hero__title { animation-delay: 0.02s; }
html.js-hero-anim .hero .hero__lede { animation-delay: 0.11s; }
/* The button is the conversion-critical element — settled well under a
   second so it doesn't read as sluggish. */
html.js-hero-anim .hero .cta-block { animation-delay: 0.2s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* The hero's reassurance line sits under the button here, not beside it —
   .cta-sub is inline from 48em up everywhere else on the site (see section 4),
   so this scoped override wins on specificity without touching that default. */
.hero .cta-block .cta-sub { flex-basis: 100%; }
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.99;
  letter-spacing: -0.035em;
  max-width: 11ch;
}
.hero__lede {
  margin-top: var(--s5);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--periwinkle);
  max-width: 30em;
}
.hero__product { display: flex; justify-content: center; align-items: flex-end; }

@media (min-width: 64em) {
  .hero { padding-top: var(--s7); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 25rem;
    align-items: end;
    gap: var(--s8);
  }
  .hero__copy { padding-bottom: var(--s9); }
}

.rolestrip { background: var(--white); border-bottom: 1px solid var(--hairline); }
.rolestrip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s5);
}
.rolestrip__label { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.rolestrip ul { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.rolestrip li { position: relative; }
.rolestrip a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.rolestrip a:hover { color: var(--indigo-deep); text-decoration: underline; }
.rolestrip li + li::before {
  content: '';
  position: absolute;
  left: calc(var(--s5) / -2 - 2px);
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--periwinkle-soft);
}

/* 7. Homepage sections ──────────────────────────────────────────────────── */

.steps { display: grid; gap: var(--s7); }
.step {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--hairline);
}
.step:last-child { padding-bottom: 0; border-bottom: 0; }
.step__title { font-size: var(--fs-sub); letter-spacing: -0.022em; }
.step__body { margin-top: var(--s4); font-size: var(--fs-lede); color: var(--steel); max-width: 30em; }
.step__more {
  display: inline-block;
  margin-top: var(--s4);
  font-weight: 600;
  color: var(--indigo-deep);
  text-decoration: none;
}
.step__more:hover { color: var(--navy); text-decoration: underline; }
.step__product { display: flex; justify-content: center; }

.steps__note {
  margin-top: var(--s7);
  font-size: var(--fs-body);
  color: var(--steel);
  text-align: center;
}

@media (min-width: 64em) {
  .steps { gap: var(--s8); }
  .step {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--s8);
    /* Top-aligned rather than centered: with align-items:center, each phone's
       vertical start drifted against its own row's copy height, so adjacent
       rows never lined up with each other. Starting every row from the same
       edge keeps the grid feeling like a grid. */
    align-items: start;
    padding-bottom: var(--s8);
  }
  /*
   * `order` alone reorders which element paints first, but it does not swap
   * which grid TRACK each one sits in — grid-template-columns keeps its
   * original [flexible, 21rem] track widths regardless. Without this, a
   * flipped row put the copy text in the narrow 21rem track meant for the
   * phone, squeezing three lines of body copy into six. Redeclaring the track
   * widths per flip state keeps the wide track under the copy on every row.
   */
  .step--flip { grid-template-columns: 21rem minmax(0, 1fr); }
  .step--flip .step__copy { order: 2; }
  .step--flip .step__product { order: 1; }
}

/* Role tiles */
.tiles { display: grid; gap: var(--s4); }
.tile { display: flex; }
.tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: 100%;
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.tile__link:hover { border-color: var(--indigo); transform: translateY(-2px); }
.tile__title { font-size: var(--fs-card); color: var(--navy); }
.tile__body { color: var(--steel); }
.tile__more { margin-top: auto; padding-top: var(--s4); font-weight: 600; color: var(--indigo-deep); }

@media (min-width: 48em) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

/* Why Realest */
.why { display: grid; gap: var(--s6); }
.why__title { font-size: var(--fs-section); max-width: 14ch; }
.why__lede { margin-top: var(--s4); font-size: var(--fs-lede); color: var(--steel); max-width: 30em; }
.why__item {
  display: flex;
  gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.why__list > .why__item:first-child { padding-top: 0; }
.why__list > .why__item:last-child { border-bottom: 0; padding-bottom: 0; }
.why__dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--indigo);
}
.why__item h3 { font-size: var(--fs-card); letter-spacing: -0.012em; }
.why__item p { margin-top: var(--s2); color: var(--steel); }

@media (min-width: 64em) {
  .why { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
}

/* Pricing teaser */
.teaser { display: grid; gap: var(--s4); }
.teaser__card {
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.teaser__card--recommended { border-color: var(--indigo); box-shadow: var(--ring-inset); }
.teaser__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-weight: 600; }
.teaser__price { margin-top: var(--s3); }
.teaser__price b { font-size: 2.125rem; font-weight: 600; letter-spacing: -0.03em; }
.teaser__price i { font-style: normal; font-size: 1rem; color: var(--muted); }
.teaser__blurb { margin-top: var(--s2); font-size: var(--fs-small); color: var(--steel); }

@media (min-width: 48em) {
  .teaser { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--indigo-deep);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

/* Quotes */
.quotes { display: grid; gap: var(--s6); }
.quotes__lede { margin-top: var(--s4); color: var(--steel); max-width: 24em; }
.quotes__list { display: grid; gap: var(--s6); }
.quote { margin: 0; }
.quote__mark {
  display: block;
  font-size: 4rem;
  line-height: 0.5;
  height: 2rem;
  color: var(--periwinkle);
}
.quote__text { margin: var(--s5) 0 0; }
.quote__text p { font-size: var(--fs-sub); line-height: 1.4; letter-spacing: -0.015em; }
.quote__by {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
}
.quote__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.quote__avatar--blank { background: var(--tint); border: 1px solid var(--hairline); }
.quote__by b { display: block; font-size: 1rem; }
.quote__by i { font-style: normal; font-size: var(--fs-small); color: var(--steel); }

@media (min-width: 64em) {
  .quotes { grid-template-columns: 1fr 1.4fr; gap: var(--s8); align-items: center; }
}

/* Closing */
.close { text-align: center; display: grid; justify-items: center; gap: var(--s4); }
.close__title { font-size: var(--fs-page-title); letter-spacing: -0.032em; max-width: 18ch; }
.close__body { font-size: var(--fs-lede); color: var(--periwinkle); max-width: 34em; }

/* Cross links */
.cross { display: grid; gap: var(--s5); }
.cross__title { font-size: var(--fs-sub); max-width: 20ch; }
.cross__links { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (min-width: 64em) {
  .cross {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s7);
  }
}

/* 8. Persona pages ──────────────────────────────────────────────────────── */

.phero { display: grid; gap: var(--s6); }
/* No fixed ch cap: was clamping every headline to 3 cramped lines at as little
   as ~330px wide, even on a tablet with 500px of unused column beside it. A
   generous rem ceiling plus the grid's own column width now does the sizing,
   with text-wrap:balance (global on headings) handling the line breaks. */
.phero__title { font-size: var(--fs-page-title); letter-spacing: -0.032em; max-width: 46rem; }
.phero__lede { margin-top: var(--s5); font-size: var(--fs-lede); color: var(--steel); max-width: 32em; }
.phero__product { display: flex; justify-content: center; }

@media (min-width: 64em) {
  .phero { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s8); align-items: center; }
}

.fcards { display: grid; gap: var(--s4); }
.fcard {
  padding: var(--s6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.fcard__title { font-size: 1.375rem; letter-spacing: -0.014em; }
.fcard__body { margin-top: var(--s3); color: var(--steel); }

/* Screengrab slot. A real capture (1200 × 800, 3:2) renders edge to edge; until
   one exists, a dashed placeholder holds the same shape so the layout never
   jumps when it's dropped in. */
.fcard__shot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--s5);
  border-radius: 10px;
  object-fit: cover;
}
.fcard__shot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: var(--offwhite);
  border: 1px dashed var(--periwinkle-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}

@media (min-width: 48em) {
  .fcards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}

/* 9. Pricing ────────────────────────────────────────────────────────────── */

.pricing-head { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.pricing-head__title { font-size: var(--fs-page-title); letter-spacing: -0.03em; }
.pricing-head .lede { margin-top: var(--s4); }

@media (min-width: 64em) {
  .pricing-head {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s7);
  }
}

.seats {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  min-width: 18rem;
}
.seats__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.seats__control { display: flex; align-items: center; gap: var(--s4); }
.seats__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.seats__btn:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo-deep); }
.seats__btn:disabled { color: var(--disabled-ink); cursor: not-allowed; }
.seats__value {
  min-width: 3rem;
  text-align: center;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.seats__note { font-size: 0.875rem; color: var(--muted); }

.plans { display: grid; gap: var(--s5); align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.plan--recommended {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(120, 119, 239, 0.14), 0 24px 50px -30px rgba(21, 56, 95, 0.4);
}
.plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.plan__name h3 { font-size: 1.125rem; }
.plan__blurb { margin-top: var(--s2); font-size: var(--fs-small); color: var(--steel); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); }
.plan__amount { font-size: 2.625rem; font-weight: 600; letter-spacing: -0.032em; }
.plan__period { font-size: 1rem; color: var(--muted); }
.plan__total {
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--steel);
}
.plan > .plan__price:not(:has(+ .plan__total)) {
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}

.plan__features { display: grid; gap: var(--s3); }
.plan__features li { display: flex; gap: var(--s3); align-items: flex-start; }
.plan__features .is-out { color: var(--steel); }
.plan__tick { flex: none; display: inline-flex; color: var(--indigo-deep); }
.plan__features .is-out .plan__tick { color: var(--periwinkle-soft); }
.plan > .btn { margin-top: auto; }

@media (min-width: 60em) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.trial-note {
  margin-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--steel);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.partner-plan {
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  background: var(--navy);
  border-radius: var(--r-card);
  color: var(--white);
}
.partner-plan__title { font-size: var(--fs-section); letter-spacing: -0.024em; }
.partner-plan__blurb { margin-top: var(--s3); color: var(--periwinkle); max-width: 30em; }
.partner-plan .plan__amount { color: var(--white); }
.partner-plan .plan__period { color: var(--periwinkle); }
.partner-plan__features { display: grid; gap: var(--s3); margin-block: var(--s4); }
.partner-plan__features li { display: flex; gap: var(--s3); align-items: flex-start; }
.partner-plan__features .plan__tick { color: var(--periwinkle); }
.partner-plan .btn { justify-self: start; }

@media (min-width: 64em) {
  .partner-plan {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s8);
    align-items: center;
    padding: var(--s7) var(--s8);
  }
}

/* The plan cards above already list every feature with a tick or a cross, so a
   four-column table earns nothing on a phone except sideways scrolling. It
   returns at 768px, where it fits inside the content column without scrolling
   at all. */
.section--compare { display: none; }

@media (min-width: 48em) {
  .section--compare { display: block; }
}

/* `contain: paint` rather than overflow alone: a wide table inside a clipped
   box still enlarges the document's scrollable area in Chromium, which drags
   the whole page sideways. Containment stops that at the wrapper. */
.table-wrap {
  overflow-x: auto;
  contain: paint;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; }
.compare th, .compare td { padding: var(--s4); text-align: left; }
.compare thead th {
  background: var(--offwhite);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
  text-align: center;
}
.compare thead th:first-child {
  text-align: left;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare tbody th { font-weight: 400; font-size: var(--fs-body); }
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--offwhite); }
.compare td { text-align: center; }
.compare td .plan__tick { display: inline-flex; }
.compare .is-highlight { background: rgba(120, 119, 239, 0.07); }

/* 10. Forms ─────────────────────────────────────────────────────────────── */

.form-page { display: grid; gap: var(--s6); }
.form-page__title { font-size: var(--fs-page-title); letter-spacing: -0.03em; max-width: 16ch; }
.form-page__copy .lede { margin-top: var(--s4); }
.form-page__stores { margin-top: var(--s5); }
.contact-whatsapp { margin-top: var(--s5); }

@media (min-width: 64em) {
  .form-page { grid-template-columns: 1fr 26rem; gap: var(--s8); align-items: start; }
  .form-page--narrow { grid-template-columns: 1fr 24rem; }
}

.form-shell {
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
}
.section--white .form-shell { background: var(--offwhite); box-shadow: none; }

.form { display: grid; gap: var(--s4); }

.field { display: grid; gap: var(--s2); }
.field__label { font-size: 0.875rem; font-weight: 500; color: var(--navy); }
.field__optional { margin-left: var(--s2); font-weight: 400; color: var(--muted); }

.control {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 0.875rem;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.control::placeholder { color: var(--muted); }
.control:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--ring-inset);
}
textarea.control { min-height: 7rem; resize: vertical; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 2.75rem; }
.select-wrap__chevron {
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--steel);
  border-bottom: 1.5px solid var(--steel);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field.is-invalid .control { border-color: var(--error-line); box-shadow: 0 0 0 3px rgba(224, 106, 106, 0.12); }
.field__msg { font-size: 0.8125rem; color: var(--error); }

.form__note { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.form__error {
  padding: var(--s3) var(--s4);
  background: rgba(224, 106, 106, 0.1);
  border: 1px solid var(--error-line);
  border-radius: var(--r-input);
  font-size: var(--fs-small);
  color: var(--error);
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success { display: grid; gap: var(--s3); text-align: center; padding-block: var(--s5); }
.form-success__tick {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--indigo-tint);
  border-radius: 50%;
  color: var(--indigo-deep);
}
.form-success__title { font-size: var(--fs-card); }
.form-success__body { color: var(--steel); }

.form-page__notes { display: grid; gap: var(--s4); margin-top: var(--s6); }
.form-page__notes p { color: var(--steel); }

.ticks { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--steel); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--indigo-deep);
  border-bottom: 2px solid var(--indigo-deep);
  transform: rotate(-45deg);
}

/* Partners */
.partner-hero__title { font-size: var(--fs-page-title); letter-spacing: -0.032em; max-width: 16ch; }
.partner-hero .lede { margin-top: var(--s5); }
.partner-hero__price { margin-top: var(--s4); font-size: var(--fs-small); color: var(--steel); }
.partner-hero__price b { font-size: 1.25rem; color: var(--navy); }
.partner-hero .btn { margin-top: var(--s5); }

.mini-cards { display: grid; gap: var(--s4); }
.mini-card {
  padding: var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.mini-card h3 { font-size: 1.0625rem; }
.mini-card p { margin-top: var(--s2); font-size: var(--fs-small); color: var(--steel); }

@media (min-width: 48em) {
  .mini-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .mini-cards { grid-template-columns: repeat(3, 1fr); }
}

/* 11. Support ───────────────────────────────────────────────────────────── */

.support-hero { display: grid; gap: var(--s6); }
.support-hero__title { font-size: var(--fs-page-title); letter-spacing: -0.03em; }
.support-hero .lede { margin-top: var(--s4); }
.support-hero__jump { margin-top: var(--s5); }
.support-hero__jump ul { display: flex; flex-wrap: wrap; gap: var(--s3); }
.support-hero__app {
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.support-hero__app-title { font-size: 1.0625rem; }
.support-hero__app p { margin-block: var(--s2) var(--s4); font-size: var(--fs-small); color: var(--steel); }

@media (min-width: 64em) {
  .support-hero { grid-template-columns: 1fr 20rem; gap: var(--s8); align-items: start; }
}

.faq-soon { max-width: 40rem; }
.faq-soon__title { margin-top: var(--s3); font-size: var(--fs-sub); }
.faq-soon .lede { margin-top: var(--s4); }

.faq-group + .faq-group { margin-top: var(--s7); }
.faq-group__title { font-size: var(--fs-sub); margin-bottom: var(--s4); }
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--navy);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--indigo-deep); }
.faq__chevron {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s var(--ease);
}
.faq__item[open] .faq__chevron { transform: translateY(2px) rotate(-135deg); }
.faq__a { padding-bottom: var(--s5); color: var(--steel); max-width: 62ch; }

/* 12. Prose ─────────────────────────────────────────────────────────────── */

.prose { max-width: 44rem; }
.prose h1 { font-size: var(--fs-page-title); letter-spacing: -0.03em; }
.prose h2 { margin-top: var(--s6); font-size: var(--fs-card); }
.prose h3 { margin-top: var(--s5); font-size: 1.0625rem; }
.prose p, .prose li { color: var(--steel); }
.prose p { margin-top: var(--s3); }
.prose ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.prose ul li { position: relative; padding-left: 1.25rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--periwinkle-soft);
}
.prose strong { color: var(--navy); font-weight: 600; }
.prose__meta { margin-top: var(--s3); font-size: var(--fs-small); color: var(--muted); }

.notice {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--offwhite);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r-input) var(--r-input) 0;
}
.notice p { margin: 0; color: var(--navy); font-size: var(--fs-small); }

/* 13. Phone frames and app screens ──────────────────────────────────────── */

.phone-wrap { position: relative; display: flex; justify-content: center; }
.phone-wrap--glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(21rem, 90%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(120, 119, 239, 0.3);
  pointer-events: none;
}

.phone {
  position: relative;
  width: var(--phone-w, 17rem);
  flex: none;
  padding: 9px;
  border-radius: 38px;
  box-shadow: 0 40px 70px -40px rgba(21, 56, 95, 0.6);
}
.phone--navy { background: var(--navy); }
.phone--deep { background: var(--navy-deep); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.6); }

.phone--hero { --phone-w: min(18.5rem, 82vw); }
.phone--feature { --phone-w: min(17.125rem, 76vw); }
.phone--persona { --phone-w: min(17.875rem, 80vw); }
.phone--compact { --phone-w: min(14.375rem, 70vw); }

.phone__shot { border-radius: 30px; width: 100%; height: auto; }

/*
 * A pre-framed capture (see the `framed` flag in src/config/screenshots.js)
 * carries its own bezel and glow with room to spare around them, so it just
 * fills its slot rather than taking the .phone treatment. 25rem matches the
 * width .hero__product already reserves at 64em+ for the CSS-drawn phone's
 * glow to bleed into, so the device reads at the same size either way.
 */
.phone-wrap--art { width: min(100%, 25rem); }
.phone__art { display: block; width: 100%; height: auto; }

.phone__screen {
  display: flex;
  flex-direction: column;
  height: 34rem;
  background: var(--white);
  /* Set explicitly: the hero sits on navy, and the screen must not inherit
     white text onto its own white background. */
  color: var(--navy);
  border-radius: 30px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.phone--feature .phone__screen { height: 30rem; }
.phone--persona .phone__screen { height: 27rem; }
.phone--compact .phone__screen { height: 19rem; }

/* A full-height phone eats a whole screen on a small device. Only the height
   comes down — narrowing it too would start wrapping the app's own labels. */
@media (max-width: 47.99em) {
  .phone--hero .phone__screen { height: 27rem; }
  .phone--feature .phone__screen, .phone--persona .phone__screen { height: 25rem; }
}

/* Screen internals */
.scr__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 4px;
}
.scr__time { font-size: 12px; font-weight: 600; }
.scr__signal { display: flex; align-items: flex-end; gap: 3px; }
.scr__signal i { width: 3px; height: 7px; border-radius: 1px; background: var(--navy); }
.scr__signal i:nth-child(2) { height: 9px; }
.scr__signal i:nth-child(3) { height: 11px; }

.scr__topline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 18px 12px;
}
.scr__topline i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.scr__topline b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.scr__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); }

.scr__chips { display: flex; gap: 6px; padding: 0 18px 12px; }
.scr__chips span {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--offwhite);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--steel);
}
.scr__chips .is-active { background: var(--navy); color: var(--white); font-weight: 600; }

.scr__head { padding: 15px 18px 11px; }
.scr__kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.scr__title { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }

.scr__body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 12px; overflow: hidden; }
.scr__body--tint, .scr__body { background: var(--offwhite); }

.scr__slot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--white);
  border-radius: 11px;
}
.scr__slot-time { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 600; }
.scr__slot-time i { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.scr__rule { flex: none; width: 1px; align-self: stretch; min-height: 24px; background: var(--hairline); }
.scr__slot-body { flex: 1; min-width: 0; }
.scr__slot-body b { display: block; font-size: 12.5px; font-weight: 600; }
.scr__slot-body i { display: block; font-style: normal; font-size: 11.5px; color: var(--steel); }
.scr__dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--indigo); }

.scr__note, .scr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 11.5px;
}
.scr__note { background: var(--tint); color: var(--ink-on-tint); font-weight: 500; }
.scr__note b { color: var(--indigo-deep); font-weight: 600; }
.scr__bar { margin-top: auto; }
.scr__bar--navy { background: var(--navy); color: var(--periwinkle); }
.scr__bar--navy b { color: var(--white); font-weight: 600; }

.scr__tabs {
  display: flex;
  justify-content: space-around;
  padding: 10px 6px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--white);
}
.scr__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; color: var(--muted); }
.scr__tab-icon { width: 17px; height: 17px; border-radius: 5px; background: var(--hairline); }
.scr__tab.is-active { color: var(--navy); font-weight: 600; }
.scr__tab.is-active .scr__tab-icon { background: var(--navy); }

.scr__day { font-size: 10.5px; font-weight: 600; color: var(--muted); padding-left: 2px; }
.scr__line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  background: var(--white);
  border-radius: 11px;
  font-size: 12.5px;
}
.scr__line b { font-weight: 600; flex: none; }

.scr__code {
  margin: 6px 16px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--navy);
  border-radius: 14px;
}
.scr__code span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--periwinkle);
}
.scr__code b { font-size: 28px; font-weight: 600; letter-spacing: 0.12em; color: var(--white); }

.scr__step { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--steel); }
.scr__step span {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--tint);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}
.scr__shared {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  background: var(--white);
  border-radius: 11px;
  font-size: 11.5px;
  color: var(--steel);
}
.scr__shared b { color: var(--navy); font-weight: 600; }
.scr__face { width: 24px; height: 24px; border-radius: 50%; background: var(--periwinkle); flex: none; }

.scr__card { padding: 12px; background: var(--white); border-radius: 11px; }
.scr__card--empty {
  border: 1px dashed var(--periwinkle-soft);
  font-size: 11.5px;
  color: var(--muted);
}
.scr__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr__card-top b { font-size: 12.5px; font-weight: 600; }
.scr__card p { margin-top: 5px; font-size: 11.5px; color: var(--steel); }
.scr__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.scr__rating { display: flex; gap: 3px; }
.scr__rating i { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline); }
.scr__rating i.is-on { background: var(--indigo); }

.scr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  background: var(--white);
  border-radius: 11px;
  font-size: 12.5px;
}
.scr__pill { padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; }
.scr__pill--ok { background: var(--indigo-tint); color: var(--indigo-deep); }
.scr__pill--wait { background: var(--offwhite); color: var(--steel); }

.scr__shots { display: flex; gap: 7px; }
.scr__shots span {
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--periwinkle), var(--steel));
}

.scr__trip { padding: 11px 12px; background: var(--white); border-radius: 11px; }
.scr__trip b { display: block; font-size: 12px; font-weight: 600; }
.scr__trip i { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--steel); }
.scr__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--tint);
  border-radius: 11px;
  font-size: 12px;
  color: var(--ink-on-tint);
}
.scr__total b { font-size: 15px; color: var(--navy); }

/* 14. Consent, 404, utilities ───────────────────────────────────────────── */

.consent {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 60;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
}
.consent__text { font-size: var(--fs-small); color: var(--steel); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.consent__actions .btn { flex: 1 1 auto; }

.notfound { max-width: 40rem; }
.notfound__title { font-size: var(--fs-page-title); letter-spacing: -0.03em; }
.notfound .lede { margin-top: var(--s4); }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Give the sticky bar room so it never covers the last line of a page. */
body:has(.sticky-cta:not([hidden])) .site-footer { padding-bottom: 6rem; }
@media (min-width: 64em) {
  body:has(.sticky-cta:not([hidden])) .site-footer { padding-bottom: var(--s6); }
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}