/*============================================================================
  Evento — marketing site
  ---------------------------------------------------------------------------
  Two rules carried over from the product's design system
  (evento/docs/engineering/UI_UX_GUIDE.md §3):

    1. The brand is monochrome. Structure is charcoal / grey / white.
    2. Colour never decorates. Colour only ever means state.

  So the page is built in ink and light, and the four status hues appear only
  inside the app mockups and the badges that describe real states — paid,
  pending, due, cancelled. Nothing here is coloured because colour is pretty.
============================================================================*/

/*--------------------------------------------------------------- 1. tokens */
:root {
  /* Ground and surfaces — the charcoal ramp from the product, pushed darker
     so the white phone screens read as the light source on the page. */
  --ink: #0d0d11;
  --ink-2: #14141a;
  --surface: #1a1a21;
  --surface-2: #21212a;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #ffffff;
  --text-2: #a8a8b8;
  --text-3: #6f6f80;

  /* Status — meaning only. Same values as the app's dark palette. */
  --success: #4ade80;
  --success-dim: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-dim: rgba(251, 191, 36, 0.14);
  --error: #f87171;
  --error-dim: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-dim: rgba(96, 165, 250, 0.14);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-sm: 10px;

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*---------------------------------------------------------------- 2. fonts */
/* Quicksand is the app's typeface. Using it here is the cheapest way to make
   the site and the product feel like one object. */
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/*----------------------------------------------------------------- 3. base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Quicksand', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.028em;
}
h3 {
  font-size: clamp(20px, 2vw, 25px);
}

p {
  margin: 0;
}

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

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-2);
  font-weight: 500;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}

.section {
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
}

.section__head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.section__head h2 {
  margin: 18px 0 18px;
}

/*--------------------------------------------------------------- 4. atmosphere */
/* One fixed, very slow gradient field behind everything. It is the only thing
   on the page allowed to be purely decorative, and it carries no hue. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 78% -6%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(52vw 40vw at 8% 22%, rgba(255, 255, 255, 0.055), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(255, 255, 255, 0.05), transparent 64%);
}

.grid-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 78%);
}

/*------------------------------------------------------------------ 5. nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(13, 13, 17, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(13, 13, 17, 0.88);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
}

.nav__logo img {
  height: 26px;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.nav__links a {
  transition: color 0.2s;
  /* Six items with two-word labels wrap to a second line and double the nav's
     height well before the mobile breakpoint hides them. */
  white-space: nowrap;
}

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

@media (max-width: 1010px) {
  .nav__inner {
    gap: 22px;
  }

  .nav__links {
    gap: 18px;
    font-size: 14px;
  }
}

.nav__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  /* The links carry the auto margin on desktop; once they are hidden the CTA
     has to take it over or it lands next to the logo. */
  margin-left: auto;
}

.nav__links + .nav__cta {
  margin-left: 0;
}

@media (max-width: 760px) {
  .nav__links + .nav__cta {
    margin-left: auto;
  }
}

/*-------------------------------------------------------------- 6. buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.3s;
  white-space: nowrap;
}

.btn--primary {
  background: #fff;
  color: #101014;
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.5);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(255, 255, 255, 0.62);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}

/*----------------------------------------------------------------- 7. hero */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(80px, 9vw, 130px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  margin: 22px 0 24px;
}

.hero h1 em {
  font-style: normal;
  color: var(--text-3);
}

.hero__lede {
  max-width: 30em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero__note b {
  color: var(--text-2);
  font-weight: 600;
}

/*------------------------------------------------------- 8. the 3D device stage */
/* Everything below is real CSS 3D: one perspective container, children placed
   on their own Z planes, and a pointer/scroll parallax that only ever writes
   two custom properties. No library, no canvas. */
.stage {
  perspective: 1500px;
  perspective-origin: 50% 42%;
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage__world {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 11deg));
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

.stage__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 66%);
  filter: blur(14px);
  transform: translateZ(-260px);
  pointer-events: none;
}

/* The floor the phones stand on — a thin, receding plane. */
.stage__floor {
  position: absolute;
  bottom: -30px;
  /* Centred on the world and capped against the viewport: rotated in 3D it
     still contributes to layout width, and left-aligned at a fixed 660px it
     pushed the document wider than the screen. */
  left: 50%;
  width: min(560px, 76vw);
  height: 340px;
  transform: translateX(-50%) translateZ(-160px) rotateX(74deg);
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 72%);
  pointer-events: none;
}

/*--------------------------------------------------------------- 9. device */
.device {
  --dw: 375px;
  --dh: 812px;
  --scale: 0.62;
  --bezel: 8px;
  position: relative;
  /* The frame is the scaled screen PLUS the bezel. Sizing the frame to the
     scaled screen alone leaves the app 2 x --bezel wider than the glass it sits
     in, and the right-hand column of every row gets clipped. */
  width: calc(var(--dw) * var(--scale) + var(--bezel) * 2);
  height: calc(var(--dh) * var(--scale) + var(--bezel) * 2);
  border-radius: calc(54px * var(--scale) + var(--bezel));
  padding: var(--bezel);
  background: linear-gradient(150deg, #3a3a45, #101014 42%, #26262f);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.16) inset,
    0 50px 90px -40px rgba(0, 0, 0, 0.9),
    0 8px 24px -10px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(54px * var(--scale));
  overflow: hidden;
  background: #fff;
}

/* The app is laid out at true device points and then scaled once, so every
   size inside a mockup is the number the app actually uses. */
.device__app {
  width: var(--dw);
  height: var(--dh);
  transform: scale(var(--scale));
  transform-origin: 0 0;
}

/* Screen glare — a single sheet, so the glass reads as glass in 3D. */
.device::after {
  content: '';
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(54px * var(--scale));
  background: linear-gradient(126deg, rgba(255, 255, 255, 0.16) 0 22%, transparent 44%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.stage .device--lead {
  --scale: 0.68;
  transform: translateZ(70px) rotateY(-13deg) rotateX(3deg);
  z-index: 3;
}

/* The flankers sit further back on Z and further out on X than they look —
   the perspective pulls them in, so the fan reads tighter than it is built.

   They deliberately spill outside their grid column, so the limit that matters
   is the viewport edge, not the column. Two columns only exist above 1200px,
   where --shell is already capped and the geometry stops moving: the clearance
   left over is `vw / 2 - 429px - offset`. The worst case is the breakpoint
   itself (1201px), which allows 171px. 140px leaves ~31px of air there and
   more at every larger size, which is why these are constants and not a
   clamp — the value only has to survive one width. */
.stage .device--left {
  position: absolute;
  left: -140px;
  top: 96px;
  --scale: 0.52;
  transform: translateZ(-110px) rotateY(-13deg) rotateX(3deg);
  opacity: 0.9;
  z-index: 1;
}

.stage .device--right {
  position: absolute;
  right: -140px;
  top: 10px;
  --scale: 0.56;
  transform: translateZ(-50px) rotateY(-13deg) rotateX(3deg);
  opacity: 0.96;
  z-index: 2;
}

/* Glass chips that float off the phone — the 3D is only convincing because
   these sit on different Z planes to the device. */
.chip3d {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(26, 26, 33, 0.82);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.95);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.chip3d b {
  font-weight: 700;
}

.chip3d--a {
  top: 44px;
  right: -96px;
  transform: translateZ(150px);
}

.chip3d--b {
  bottom: 128px;
  left: -132px;
  transform: translateZ(190px);
}

.chip3d--c {
  bottom: 34px;
  right: -46px;
  transform: translateZ(120px);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot--success {
  background: var(--success);
}
.dot--warning {
  background: var(--warning);
}
.dot--info {
  background: var(--info);
}

/*=================================================================
  10. The app mockups
  Built from the product's own recipes: charcoal structure, status
  colour only, tabular figures on anything countable.
=================================================================*/
.app {
  width: 100%;
  height: 100%;
  background: #f6f6f8;
  color: #1c1c22;
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app * {
  box-sizing: border-box;
}

.app__status {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 26px 0;
  font-size: 15px;
  font-weight: 700;
  position: relative;
  background: #fff;
}

.app__island {
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 112px;
  height: 32px;
  border-radius: 999px;
  background: #000;
}

.app__signal {
  display: flex;
  gap: 5px;
  align-items: center;
}

.app__signal i {
  display: block;
  width: 15px;
  height: 11px;
  background: #1c1c22;
  border-radius: 2px;
}

.app__signal i:last-child {
  width: 22px;
  border-radius: 3px;
}

.app__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 14px;
  background: #fff;
}

.app__bar h4 {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  text-align: center;
  letter-spacing: 0;
}

.app__back {
  font-size: 20px;
  color: #1c1c22;
  width: 26px;
}

.app__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4d4d58, #1c1c22);
  flex: none;
}

.app__body {
  flex: 1;
  overflow: hidden;
  padding: 4px 20px 12px;
  background: #f6f6f8;
}

.app__body--flush {
  padding-left: 0;
  padding-right: 0;
}

.app__greeting {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
}

.app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app__tile {
  background: #fff;
  border-radius: 16px;
  padding: 18px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px -10px rgba(20, 20, 26, 0.4);
}

.app__tile span {
  display: flex;
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #f1f1f4;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.app__sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 10px;
}

.app__sectionhead h5 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app__sectionhead a {
  font-size: 14px;
  font-weight: 600;
  color: #6b6b78;
}

.app__card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 20px -12px rgba(20, 20, 26, 0.45);
}

.app__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #ececed;
}

.app__row:last-child {
  border-bottom: 0;
}

.app__row-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f1f4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.app__row-main {
  flex: 1;
  min-width: 0;
}

.app__row-main b {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.app__row-main small {
  font-size: 12.5px;
  color: #6b6b78;
  font-weight: 500;
}

/* The trailing element is the message — a number, never a chevron.
   UI_UX_GUIDE §4. */
.app__trailing {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge--success {
  background: #e9f7ee;
  color: #157347;
}
.badge--warning {
  background: #fff6e0;
  color: #9a5b00;
}
.badge--error {
  background: #fdecec;
  color: #b00505;
}
.badge--info {
  background: #e8f2fe;
  color: #0b5fbf;
}
.badge--neutral {
  background: #f1f1f4;
  color: #4d4d58;
}

/* Severity rows: critical is a filled surface, warning gets a 3px left rule,
   info gets nothing. Three weights maximum. */
.attn {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  box-shadow: 0 6px 16px -12px rgba(20, 20, 26, 0.4);
}

.attn--critical {
  background: #fdecec;
  box-shadow: none;
}

.attn--warning {
  border-left: 3px solid #ffc107;
}

.attn__txt {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.attn__txt small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6b6b78;
}

.app__tabbar {
  flex: none;
  height: 84px;
  background: #fff;
  border-top: 1px solid #ececed;
  display: flex;
  align-items: flex-start;
  padding-top: 11px;
}

.app__tabbar div {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #8f8f9c;
}

.app__tabbar div span {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  filter: grayscale(1);
}

.app__tabbar div.is-active {
  color: #1c1c22;
  font-weight: 700;
}

.app__search {
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: #8f8f9c;
  font-weight: 500;
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 6px 0 12px;
}

.app__count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 10px;
  font-weight: 700;
}

.app__count b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.app__count small {
  font-size: 12.5px;
  color: #6b6b78;
  font-weight: 600;
}

.app__meter {
  height: 7px;
  border-radius: 999px;
  background: #e9e9ed;
  overflow: hidden;
  margin-bottom: 14px;
}

.app__meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #28282b;
}

.app__fab {
  position: absolute;
  right: 18px;
  bottom: 100px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #28282b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 400;
  box-shadow: 0 14px 28px -12px rgba(20, 20, 26, 0.7);
}

.app__hero-img {
  height: 168px;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(140deg, #33333c, #1c1c22);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: #fff;
}

.app__cta {
  background: #28282b;
  color: #fff;
  border-radius: 14px;
  padding: 15px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-top: 14px;
}

.app__kv {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid #ececed;
}

.app__kv:last-child {
  border-bottom: 0;
}

.app__kv b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app__kv span {
  color: #6b6b78;
  font-weight: 600;
}

.app__qr {
  width: 152px;
  height: 152px;
  margin: 14px auto;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}

/*----------------------------------------------------------- 11. proof bar */
.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.proof__cell {
  background: var(--ink);
  padding: 30px 26px;
}

.proof__cell b {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.proof__cell span {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 600;
}

/*------------------------------------------------------------- 12. problem */
.pain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pain__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

.pain__card h3 {
  margin-bottom: 12px;
  font-size: 21px;
}

.pain__card p {
  color: var(--text-2);
  font-size: 16px;
}

.pain__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
  display: block;
}

/*------------------------------------------------------------- 13. pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  perspective: 1200px;
}

.pillar {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  background: linear-gradient(180deg, var(--surface), rgba(20, 20, 26, 0.4));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
}

.pillar:hover {
  transform: translateY(-8px) rotateX(4deg);
  border-color: var(--line-strong);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.95);
}

.pillar__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.pillar h3 {
  margin: 14px 0 12px;
}

.pillar p {
  color: var(--text-2);
  font-size: 16px;
}

.pillar__proof {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-3);
  font-weight: 600;
}

/*--------------------------------------------------------------- 14. tour */
.tour {
  display: grid;
  gap: clamp(80px, 10vw, 150px);
}

.tour__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.tour__row:nth-child(even) .tour__art {
  order: -1;
}

.tour__copy h3 {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.028em;
  margin: 16px 0 18px;
}

.tour__copy p {
  color: var(--text-2);
}

.tour__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.tour__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--text-2);
}

.tour__list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-top: 9px;
  flex: none;
}

.tour__art {
  display: flex;
  justify-content: center;
  perspective: 1400px;
  position: relative;
}

/* A soft pool of light behind each phone so it sits on the page rather than
   floating on a flat black field. */
.tour__art::before {
  content: '';
  position: absolute;
  width: 78%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}

.tour__art .device {
  --scale: 0.72;
  transform: rotateY(calc(var(--tilt, -12) * 1deg)) rotateX(3deg);
  transition: transform 0.6s var(--ease);
}

.tour__row:nth-child(even) .tour__art .device {
  --tilt: 12;
}

.tour__art .device:hover {
  --tilt: 0;
}

/*------------------------------------------------------------- 15. steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.step::before {
  counter-increment: step;
  content: '0' counter(step);
  position: absolute;
  top: -13px;
  left: 0;
  background: var(--ink);
  padding-right: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.1em;
}

.step h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.step p {
  color: var(--text-2);
  font-size: 16px;
}

/*------------------------------------------------------------ 16. pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}

.plan--featured {
  position: relative;
  border-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015));
  box-shadow: 0 40px 80px -50px rgba(255, 255, 255, 0.4);
}

.plan__tag {
  position: absolute;
  top: -12px;
  left: 30px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #fff;
  color: #101014;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.plan--featured .plan__name {
  color: var(--text);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 6px;
}

.plan__price b {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 600;
}

.plan__for {
  color: var(--text-2);
  font-size: 15px;
  min-height: 48px;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: var(--text-2);
}

.plan li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.plan li::before {
  content: '→';
  color: var(--text-3);
  flex: none;
}

.plan .btn {
  width: 100%;
}

.pricing__note {
  margin-top: 26px;
  font-size: 14px;
  color: var(--text-3);
  max-width: 62ch;
}

/*---------------------------------------------------------------- 17. faq */
.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 44px 26px 0;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
  position: relative;
}

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

.faq summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-3);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq p {
  padding: 0 60px 26px 0;
  color: var(--text-2);
  margin-top: -6px;
}

/*----------------------------------------------------------- 18. final cta */
.finale {
  position: relative;
  text-align: center;
  padding: clamp(80px, 11vw, 150px) 0;
  border-top: 1px solid var(--line);
}

.finale h2 {
  max-width: 16ch;
  margin: 20px auto 22px;
}

.finale .lede {
  max-width: 52ch;
  margin: 0 auto;
}

.finale__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

/*-------------------------------------------------------------- 19. footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 40px;
  font-size: 14.5px;
  color: var(--text-3);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 44px;
}

.footer__grid h5 {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
}

.footer__grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

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

.footer__logo img {
  height: 24px;
  margin-bottom: 16px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.footer__by {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer__by img {
  height: 15px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.footer__by:hover img {
  opacity: 1;
}

/*------------------------------------------------------------- 20. reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/*--------------------------------------------------------- 21. responsive */
@media (max-width: 1200px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .stage {
    min-height: 560px;
    margin-top: 24px;
  }

  /* Stacked layout gives the stage the full column, but the flankers still
     have to stay inside the viewport or they get sliced by overflow-x. */
  .stage .device--lead {
    --scale: 0.62;
  }

  .stage .device--left {
    left: -138px;
    top: 88px;
    --scale: 0.48;
  }

  .stage .device--right {
    right: -142px;
    top: 12px;
    --scale: 0.5;
  }

  .chip3d--a {
    right: -30px;
  }

  .chip3d--b {
    left: -56px;
  }

  .pain,
  .pillars,
  .steps,
  .plans {
    grid-template-columns: 1fr;
  }

  .proof__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tour__row {
    grid-template-columns: 1fr;
  }

  .tour__row:nth-child(even) .tour__art {
    order: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .nav__links {
    display: none;
  }

  .stage {
    min-height: 480px;
  }

  /* Two facts on two lines read fine; the dot between them does not survive
     the wrap, so it goes. */
  .hero__note {
    display: block;
  }

  .hero__note span[aria-hidden] {
    display: none;
  }

  .hero__note span {
    display: block;
  }

  /* On a phone, the flanking devices and floating chips are noise — the hero
     phone alone reads better than three overlapping ones. */
  .stage .device--left,
  .stage .device--right,
  .chip3d {
    display: none;
  }

  .stage .device--lead {
    --scale: 0.56;
    transform: none;
  }

  .stage__world {
    transform: none;
  }

  .tour__art .device {
    --scale: 0.5;
    transform: none;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stage__world,
  .device,
  .pillar {
    transition: none !important;
  }
}

/*=================================================================
  22. Use cases
  Each card is the same argument twice: what today costs, and what
  replaces it. The "today" half is deliberately set in the muted
  colour — it is the part the reader is supposed to recognise, not
  the part they are supposed to admire.
=================================================================*/
.uc-featured {
  display: grid;
  gap: clamp(72px, 9vw, 128px);
  margin-bottom: clamp(72px, 9vw, 120px);
}

.uc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.uc-row:nth-child(even) .uc-row__art {
  order: -1;
}

.uc-row__art {
  display: flex;
  justify-content: center;
  perspective: 1400px;
  position: relative;
}

.uc-row__art::before {
  content: '';
  position: absolute;
  width: 78%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}

.uc-row__art .device {
  --scale: 0.72;
  transform: rotateY(calc(var(--tilt, -12) * 1deg)) rotateX(3deg);
  transition: transform 0.6s var(--ease);
}

.uc-row:nth-child(even) .uc-row__art .device {
  --tilt: 12;
}

.uc-row__art .device:hover {
  --tilt: 0;
}

.uc-row__copy h3 {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.028em;
  margin: 16px 0 24px;
}

/* The before/after pair. */
.uc-split {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.uc-split__half {
  border-radius: var(--radius);
  padding: 20px 22px;
  border: 1px solid var(--line);
}

.uc-split__half--today {
  background: rgba(255, 255, 255, 0.022);
}

.uc-split__half--now {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: var(--line-strong);
}

.uc-split__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 9px;
  color: var(--text-3);
}

.uc-split__half--now .uc-split__tag {
  color: var(--text);
}

.uc-split__half p {
  font-size: 15.5px;
  color: var(--text-2);
}

.uc-split__half--now p {
  color: var(--text);
}

.uc-mech {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.uc-mech li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-2);
}

.uc-mech li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-top: 8px;
  flex: none;
}

/*--  The wider grid  ----------------------------------------------------*/
.uc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.uc-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  transition: border-color 0.35s, transform 0.45s var(--ease);
}

.uc-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
}

.uc-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.uc-card__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex: none;
}

.uc-card__who h4 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.uc-card__line {
  font-size: 15.5px;
  margin-bottom: 14px;
}

.uc-card__line b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}

.uc-card__line--today {
  color: var(--text-2);
}

.uc-card__line--now {
  color: var(--text);
  margin-bottom: 0;
}

/*=================================================================
  23. Discovery — the consumer half
=================================================================*/
.discovery {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60vw 40vw at 84% 10%, rgba(255, 255, 255, 0.05), transparent 62%);
}

.discovery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.discovery__art {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.discovery__art .device {
  --scale: 0.72;
  transform: rotateY(-11deg) rotateX(3deg);
  transition: transform 0.6s var(--ease);
}

.discovery__art .device:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.discovery__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.cat-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}

.cat-chip--more {
  border-style: dashed;
  color: var(--text-3);
}

/*=================================================================
  24. The promise — no ads
=================================================================*/
.promise {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  padding: clamp(34px, 5vw, 56px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012));
}

.promise h2 {
  max-width: 18ch;
  margin: 18px 0 20px;
}

.promise > p {
  max-width: 60ch;
  color: var(--text-2);
  font-size: clamp(17px, 1.5vw, 19px);
}

.promise__list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
}

.promise__list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.promise__list b {
  display: block;
  margin-bottom: 3px;
}

.promise__list span {
  color: var(--text-2);
  font-size: 15px;
}

.promise__no {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  margin-top: 2px;
}

/*=================================================================
  25. Roadmap
=================================================================*/
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.rm-col__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}

.rm-col__head h3 {
  font-size: 19px;
}

.rm-col__head span {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.rm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.rm-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.022);
}

.rm-item b {
  display: block;
  font-size: 15.5px;
  margin-bottom: 4px;
}

.rm-item span {
  font-size: 14px;
  color: var(--text-2);
}

.rm-item--shipped {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.05);
}

.rm-item--next {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
}

.rm-never {
  margin-top: 30px;
  padding: 22px 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 15.5px;
  color: var(--text-2);
}

.rm-never b {
  color: var(--text);
}

/*=================================================================
  26. New mockup parts — map, segments, QR, ops
=================================================================*/
.app__segment {
  display: flex;
  background: #e9e9ed;
  border-radius: 10px;
  padding: 3px;
  margin: 4px 0 10px;
}

.app__segment div {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #6b6b78;
  border-radius: 8px;
}

.app__segment div.is-active {
  background: #fff;
  color: #1c1c22;
  box-shadow: 0 2px 6px -2px rgba(20, 20, 26, 0.3);
}

.app__chips {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.app__chips span {
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e4ea;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app__chips span.is-on {
  background: #28282b;
  border-color: #28282b;
  color: #fff;
}

/* A map that is drawn, not loaded: two sets of crossing rules for the road
   grid, a wash for the park, and pins placed absolutely. */
.app__map {
  position: relative;
  height: 196px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background:
    radial-gradient(60% 50% at 24% 68%, #dbe9d8 0 40%, transparent 42%),
    repeating-linear-gradient(90deg, #e9e9ed 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, #e9e9ed 0 1px, transparent 1px 30px),
    #f4f4f6;
}

.app__map i {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #28282b;
  border: 2px solid #fff;
  box-shadow: 0 5px 10px -4px rgba(20, 20, 26, 0.6);
}

.app__map i::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.app__map i.is-me {
  background: #2196f3;
  border-radius: 50%;
  transform: none;
  width: 18px;
  height: 18px;
}

.app__map i.is-me::after {
  inset: 5px;
}

.app__map b {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(20, 20, 26, 0.6);
}

/* QR: drawn from a repeating gradient plus three corner eyes. Pure black on
   pure white regardless of theme — scanners read contrast, not brand. */
.app__qrbox {
  width: 168px;
  height: 168px;
  margin: 16px auto;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px -14px rgba(20, 20, 26, 0.6);
}

.app__qrgrid {
  width: 100%;
  height: 100%;
  position: relative;
  background-image:
    repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, #000 0 6px, transparent 6px 12px);
  background-size: 12px 12px;
  opacity: 0.88;
}

.app__qrgrid i {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 7px solid #000;
  background: #fff;
}

.app__qrgrid i:nth-child(1) {
  top: 0;
  left: 0;
}
.app__qrgrid i:nth-child(2) {
  top: 0;
  right: 0;
}
.app__qrgrid i:nth-child(3) {
  bottom: 0;
  left: 0;
}

.app__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.app__stat {
  background: #fff;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 6px 16px -12px rgba(20, 20, 26, 0.4);
}

.app__stat b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app__stat span {
  font-size: 11.5px;
  color: #6b6b78;
  font-weight: 600;
}

.app__tpl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.app__tpl div {
  background: #fff;
  border-radius: 14px;
  padding: 14px 12px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 6px 16px -12px rgba(20, 20, 26, 0.4);
}

.app__tpl div span {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}

.app__tpl div.is-on {
  background: #28282b;
  color: #fff;
}

/*--------------------------------------------- 27. new-section responsive */
@media (max-width: 1200px) {
  .uc-row,
  .discovery__grid {
    grid-template-columns: 1fr;
  }

  .uc-row:nth-child(even) .uc-row__art {
    order: 0;
  }

  .uc-grid,
  .roadmap,
  .promise__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .uc-row__art .device,
  .discovery__art .device {
    --scale: 0.52;
    transform: none;
  }

  .uc-split__half {
    padding: 17px 18px;
  }

  .promise__list {
    gap: 14px;
  }
}

/*=================================================================
  28. Screen pair — two mockups side by side under a shared heading
=================================================================*/
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(56px, 7vw, 88px);
}

.pair__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  perspective: 1400px;
}

.pair__item .device {
  --scale: 0.6;
  transform: rotateX(4deg);
  transition: transform 0.6s var(--ease);
}

.pair__item .device:hover {
  transform: rotateX(0deg) translateY(-6px);
}

.pair__cap {
  margin-top: 26px;
  max-width: 34ch;
}

.pair__cap h4 {
  font-size: 20px;
  margin-bottom: 8px;
}

.pair__cap p {
  color: var(--text-2);
  font-size: 15.5px;
}

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

  .pair__item .device {
    --scale: 0.52;
    transform: none;
  }
}

/*=================================================================
  23. The 3D layer
  ---------------------------------------------------------------
  Everything below is real CSS 3D — one `perspective` ancestor per
  cluster, children on their own Z planes, and a transform that
  reads custom properties written by the pointer. No canvas, no
  library, nothing measured in JavaScript.

  Two rules keep it from becoming a toy:

    1. Depth encodes hierarchy. A thing lifts toward the reader
       because it matters more, never because lifting looks nice.
    2. Every effect degrades to a flat, legible card. Reduced
       motion, no JS, and touch all land on the same static page.
=================================================================*/

/*--  Tilt card  ----------------------------------------------------------*/
/* The workhorse. `--tx` / `--ty` are written by the pointer handler in
   evento.js and are the ONLY things that change per frame. */
.tilt {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.tilt__inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * -6deg)) rotateY(calc(var(--tx, 0) * 8deg))
    translateZ(0);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}

.tilt:hover .tilt__inner {
  transition: transform 0.12s linear, box-shadow 0.5s var(--ease);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

/* Children that should sit off the card face. Applied to the elements that
   carry meaning — the number, the heading — so depth tracks hierarchy. */
.lift-1 {
  transform: translateZ(18px);
}
.lift-2 {
  transform: translateZ(34px);
}
.lift-3 {
  transform: translateZ(52px);
}

/* The specular sweep. A single radial gradient parked at the pointer, which
   is what sells the surface as a physical panel rather than a rectangle. */
.tilt__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    420px circle at calc(50% + var(--tx, 0) * 40%) calc(50% + var(--ty, 0) * 40%),
    rgba(255, 255, 255, 0.11),
    transparent 62%
  );
}

.tilt:hover .tilt__glare {
  opacity: 1;
}

/*--  Slab reveal  --------------------------------------------------------*/
/* A section that hinges up from its own bottom edge as it enters. The
   rotation is small on purpose: 10deg reads as weight, 30deg reads as a
   PowerPoint transition. */
[data-reveal='slab'] {
  transform: perspective(1400px) rotateX(10deg) translateY(40px) scale(0.97);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}

[data-reveal='slab'].is-in {
  transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
  opacity: 1;
}

/*--  Depth deck  ---------------------------------------------------------*/
/* Three stacked planes that fan apart on hover — used where one idea has
   layers behind it (the ledger, the roster history). */
.deck {
  perspective: 1200px;
  position: relative;
}

.deck__stack {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}

.deck:hover .deck__stack {
  transform: rotateX(-8deg) rotateY(-10deg);
}

.deck__plane {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.deck__plane--2 {
  transform: translateZ(-26px) translateY(14px) scale(0.96);
  opacity: 0.55;
}

.deck__plane--3 {
  transform: translateZ(-52px) translateY(28px) scale(0.92);
  opacity: 0.28;
}

.deck:hover .deck__plane--2 {
  transform: translateZ(-40px) translateY(22px) scale(0.96);
}

.deck:hover .deck__plane--3 {
  transform: translateZ(-80px) translateY(44px) scale(0.92);
}

/*--  Floating chip cluster  ----------------------------------------------*/
/* Small glass labels that hang in front of a scene on their own Z planes and
   drift with the pointer. They carry real state values, never decoration. */
.float3d {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(26, 26, 33, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, 0.9);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.float3d b {
  color: var(--text);
  font-weight: 700;
}

/*--  Rotating cube  ------------------------------------------------------*/
/* Six faces, one continuous rotation. Used once, for the four things the
   product actually keeps — it is a stat, spun. */
.cube {
  width: 148px;
  height: 148px;
  perspective: 900px;
  margin-inline: auto;
}

.cube__box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: cube-spin 22s linear infinite;
}

.cube__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(26, 26, 33, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cube__face b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cube__face span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cube__face:nth-child(1) {
  transform: rotateY(0deg) translateZ(74px);
}
.cube__face:nth-child(2) {
  transform: rotateY(90deg) translateZ(74px);
}
.cube__face:nth-child(3) {
  transform: rotateY(180deg) translateZ(74px);
}
.cube__face:nth-child(4) {
  transform: rotateY(270deg) translateZ(74px);
}
.cube__face:nth-child(5) {
  transform: rotateX(90deg) translateZ(74px);
}
.cube__face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(74px);
}

@keyframes cube-spin {
  0% {
    transform: rotateX(-14deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-14deg) rotateY(360deg);
  }
}

/*=================================================================
  24. Multi-page chrome
  The site is four pages now, so the nav needs an active state and
  a real drawer instead of links that simply vanish under 760px.
=================================================================*/
.nav__links a.is-active {
  color: var(--text);
  position: relative;
}

.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav__burger i {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.nav__burger[aria-expanded='true'] i:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__burger[aria-expanded='true'] i:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded='true'] i:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* The drawer folds down in 3D from the nav's own bottom edge, which is the
   one place on the site where the 3D is doing navigation rather than decor. */
.nav__drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 59;
  padding: 14px var(--gutter) 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 13, 17, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform-origin: 50% 0;
  transform: perspective(1200px) rotateX(-12deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.nav__drawer.is-open {
  transform: perspective(1200px) rotateX(0);
  opacity: 1;
  pointer-events: auto;
}

.nav__drawer a {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 600;
}

.nav__drawer a:last-of-type {
  border-bottom: 0;
}

.nav__drawer .btn {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .nav {
    position: sticky;
  }

  .nav__links {
    display: none;
  }

  .nav__burger {
    display: inline-flex;
  }

  .nav__drawer {
    display: block;
  }

  .nav__cta .btn {
    display: none;
  }
}

/*--  Sub-page hero  ------------------------------------------------------*/
/* Smaller than the home hero and without the device stage — a sub-page opens
   with the argument, not with the object. */
.pagehero {
  position: relative;
  padding: clamp(56px, 8vw, 92px) 0 clamp(36px, 5vw, 56px);
}

.pagehero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  max-width: 20ch;
}

.pagehero .lede {
  max-width: 62ch;
  margin-top: 20px;
}

.pagehero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/*=================================================================
  25. Pricing, rebuilt on capacity bands
  Five tiers do not fit the old three-column grid, and the annual
  column is a real decision rather than a discount badge — so the
  toggle switches the numbers rather than annotating them.
=================================================================*/
.billing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 26px auto 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.billing button {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.billing button.is-on {
  background: var(--text);
  color: var(--ink);
}

.billing__save {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  padding-right: 14px;
}

.bands {
  display: grid;
  /* Fixed at four rather than auto-fit: the quoted tier lives in .bandwide
     below, so the grid always holds exactly the four capacity bands and never
     leaves one stranded on a row of its own. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  perspective: 1600px;
}

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

@media (max-width: 620px) {
  .bands {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*--  The quoted tier  ----------------------------------------------------*/
.bandwide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: 18px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.4s var(--ease);
}

.bandwide:hover {
  border-color: var(--line-strong);
}

.bandwide__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 760px) {
  .bandwide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.band {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}

.band:hover {
  transform: translateZ(34px) rotateX(3deg);
  border-color: var(--line-strong);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  z-index: 2;
}

/* The recommended band sits forward on the Z axis at rest, so the page has a
   focal point before anybody touches it. */
.band--featured {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateZ(22px);
  box-shadow: 0 34px 70px -38px rgba(0, 0, 0, 0.9);
}

.band--featured:hover {
  transform: translateZ(48px) rotateX(3deg);
}

.band__tag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.band__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.band--featured .band__name {
  color: var(--text);
}

.band__cap {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
}

.band__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 16px 0 4px;
  min-height: 46px;
}

.band__price b {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.band__price span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
}

.band__alt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  min-height: 19px;
}

.band__for {
  margin: 16px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.band ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--text-2);
}

.band li {
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}

.band li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}

.band .btn {
  margin-top: auto;
  width: 100%;
}

/*--  The line under the table  -------------------------------------------*/
.pricenote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}

.pricenote div b {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.pricenote div span {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}

/*=================================================================
  26. Argument components
  Small pieces the four pages share: a two-column split, the
  qualification checklist, the honest comparison table, and the
  "what today costs" contrast pair.
=================================================================*/
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split--art-first .split__art {
  order: -1;
}

/*--  Contrast pair  ------------------------------------------------------*/
/* Today on the left in muted ink, Evento on the right lifted forward. The
   Z difference is the whole argument. */
.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  perspective: 1400px;
}

.versus__side {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  transition: transform 0.5s var(--ease);
}

.versus__side h4 {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.versus__side--now {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateZ(30px);
  box-shadow: 0 32px 64px -36px rgba(0, 0, 0, 0.9);
}

.versus__side--now h4 {
  color: var(--text);
}

.versus ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}

.versus__arrow {
  align-self: center;
  font-size: 22px;
  color: var(--text-3);
}

/*--  Qualification checklist  --------------------------------------------*/
.qual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.qual__item {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.qual__n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.qual__item b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.qual__item span {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/*--  Comparison table  ---------------------------------------------------*/
.compare {
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Wide tables scroll inside their own box rather than pushing the page. */
  overflow-x: auto;
}

.compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.compare th,
.compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare td:first-child {
  font-weight: 700;
  color: var(--text);
}

.compare td {
  color: var(--text-2);
}

.compare .yes {
  color: var(--success);
  font-weight: 700;
}

.compare .no {
  color: var(--text-3);
}

/*--  Pull quote  ---------------------------------------------------------*/
.quote {
  margin: clamp(40px, 6vw, 70px) auto;
  max-width: 40ch;
  text-align: center;
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.quote span {
  color: var(--text-3);
}

/*--  Status tag  ---------------------------------------------------------*/
/* Used wherever the page describes something not yet shipped. Nothing on
   this site claims a feature that does not exist; where the roadmap is the
   point, it is labelled in the reader's face. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  vertical-align: middle;
}

.tag--build {
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.35);
  background: var(--warning-dim);
}

.tag--live {
  color: var(--success);
  border-color: rgba(74, 222, 128, 0.35);
  background: var(--success-dim);
}

/*--  Callout  ------------------------------------------------------------*/
.callout {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  margin-top: 32px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-3);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

.callout b {
  display: block;
  margin-bottom: 6px;
}

.callout p {
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}

/*=================================================================
  27. Responsive + reduced motion for everything in 23-26
=================================================================*/
@media (max-width: 900px) {
  .split,
  .versus {
    grid-template-columns: 1fr;
  }

  .versus__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .versus__side--now {
    transform: none;
  }

  .band--featured {
    transform: none;
  }
}

@media (max-width: 620px) {
  .cube {
    width: 124px;
    height: 124px;
  }

  .cube__face:nth-child(1) {
    transform: rotateY(0deg) translateZ(62px);
  }
  .cube__face:nth-child(2) {
    transform: rotateY(90deg) translateZ(62px);
  }
  .cube__face:nth-child(3) {
    transform: rotateY(180deg) translateZ(62px);
  }
  .cube__face:nth-child(4) {
    transform: rotateY(270deg) translateZ(62px);
  }
  .cube__face:nth-child(5) {
    transform: rotateX(90deg) translateZ(62px);
  }
  .cube__face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(62px);
  }

  /* Chips hanging off a scene are noise at this width — the scene is already
     the full column. */
  .float3d {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tilt__inner,
  .deck__stack,
  .deck__plane,
  .band,
  .versus__side,
  .nav__drawer {
    transition: none !important;
    transform: none !important;
  }

  [data-reveal='slab'] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cube__box {
    animation: none;
  }

  .tilt__glare {
    display: none;
  }
}

/*--  Legal links in the footer bottom row  -------------------------------*/
/* The Evento app's own policies are served from the product domain; these are
   the studio's, which cover this website. */
.footer__bottom a {
  color: var(--text-3);
  transition: color 0.2s;
}

.footer__bottom a:hover {
  color: var(--text-2);
}

/*--  Stage glow containment  ---------------------------------------------*/
/* The glow is a fixed 520px disc. On a 375px screen it is wider than the
   viewport and, being absolutely positioned, it dragged 20px of horizontal
   scroll onto the home page. The hero already clips nothing, so clip here:
   the disc is pure atmosphere and losing its edges costs nothing, whereas a
   page that scrolls sideways on a phone is felt immediately. */
.hero {
  overflow-x: clip;
}

/*=================================================================
  28. Two-mode pricing
  The page now carries two price lists. The production list is the
  one being sold, so the membership list is set back rather than
  hidden — published, visibly secondary, and clearly not yet
  purchasable.
=================================================================*/
.modehead {
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.modehead h2 {
  margin: 14px 0 16px;
  font-size: clamp(26px, 3vw, 38px);
}

.modehead .lede {
  max-width: 68ch;
}

/* The membership list is priced but not yet sellable, so its cards carry no
   call to action and sit flat: no Z lift, no hover, nothing that invites a
   click that would go nowhere. */
.bands--quiet .band {
  background: var(--ink-2);
  transform: none;
}

.bands--quiet .band:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.bands--quiet .band__price b {
  font-size: 28px;
}

.bands--quiet .band__for {
  margin-bottom: 0;
}