:root {
  color-scheme: light;
  --bone: #f5f3ec;
  --paper: #ffffff;
  --shelf: #efece3;
  --ink: #1b1a17;
  --muted: #5f5d58;
  /* Clears WCAG AA 4.5:1 against every surface token: bone 5.00, paper 5.55,
     shelf 4.70, cream 4.95. The previous #7a7770 sat at 3.78-4.47 and failed. */
  --faint: #6b6862;
  --line: #e3e0d5;
  --yellow: #ffb600;
  /* Driver-plate and card-header fills carry white text, so each must clear
     4.5:1 against white. Blue was already 4.81; teal was 3.74 and lime 3.09. */
  --teal: #0b7f75;
  --blue: #2e6be6;
  --lime: #4d7c0a;
  --pink: #db2777;
  --charcoal: #191713;
  --cream: #f4f2ea;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-lg: 32px;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(27, 26, 23, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bone);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.72), transparent 32rem), var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: auto;
  user-select: auto;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 99px;
  color: var(--cream);
  background: var(--ink);
}

.skip-link:focus {
  transform: translateY(0);
}

.page-width {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.section {
  position: relative;
  scroll-margin-top: 92px;
}

.site-header {
  --glass-x: 50%;
  --glass-y: -10%;
  --glass-lens-opacity: 0.3;
  --header-light-surface-opacity: 0;
  --header-text: var(--cream);
  --header-border: rgba(255, 255, 255, 0.16);
  --header-inner-border: rgba(255, 255, 255, 0.1);
  --header-inset-highlight: rgba(255, 255, 255, 0.15);
  --header-inset-lowlight: rgba(0, 0, 0, 0.44);
  --header-shadow-ambient: rgba(27, 26, 23, 0.2);
  --header-shadow-contact: rgba(27, 26, 23, 0.1);
  --header-lens-hotspot: rgba(255, 255, 255, 0.42);
  --header-lens-middle: rgba(255, 255, 255, 0.1);
  --header-lens-wash: rgba(255, 255, 255, 0.12);
  --header-link-border: rgba(255, 255, 255, 0.14);
  --header-link-background: rgba(255, 255, 255, 0.1);
  --header-link-current: rgba(255, 255, 255, 0.16);
  --header-link-highlight: rgba(255, 255, 255, 0.1);
  --header-link-shadow: rgba(0, 0, 0, 0.16);
  --header-dark-logo-opacity: 1;
  --header-light-logo-opacity: 0;
  --header-cta-text: var(--ink);
  --header-cta-border: rgba(255, 196, 39, 0.92);
  --header-cta-dark-overlay-opacity: 0;
  --header-cta-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(153, 91, 0, 0.24),
    0 8px 20px rgba(255, 182, 0, 0.18);
  --header-cta-hover-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(153, 91, 0, 0.28),
    0 11px 26px rgba(255, 182, 0, 0.25);
  --header-menu-background: linear-gradient(180deg, #23211d, #0d0c0a);
  position: sticky;
  top: 14px;
  z-index: 50;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1460px, calc(100% - 48px));
  min-height: 70px;
  margin: 14px auto -84px;
  padding: 10px 14px 10px 22px;
  border: 1px solid var(--header-border);
  border-radius: 99px;
  color: var(--header-text);
  background: linear-gradient(180deg, rgba(35, 33, 29, 0.94), rgba(13, 12, 10, 0.9));
  box-shadow:
    inset 0 1px 0 var(--header-inset-highlight),
    inset 0 -1px 0 var(--header-inset-lowlight),
    0 16px 40px var(--header-shadow-ambient),
    0 3px 10px var(--header-shadow-contact);
  -webkit-backdrop-filter: blur(24px) saturate(1.25) contrast(1.02);
  backdrop-filter: blur(24px) saturate(1.25) contrast(1.02);
  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-header::before,
.site-header::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

.site-header::before {
  z-index: -2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 242, 234, 0.62));
  opacity: var(--header-light-surface-opacity);
  transition: opacity 220ms ease;
}

.site-header::after {
  z-index: -1;
  inset: 1px;
  border: 1px solid var(--header-inner-border);
  background:
    radial-gradient(
      circle 230px at var(--glass-x) var(--glass-y),
      var(--header-lens-hotspot),
      var(--header-lens-middle) 36%,
      transparent 72%
    ),
    linear-gradient(180deg, var(--header-lens-wash), transparent 48%);
  box-shadow:
    inset 0 1px 0 var(--header-inset-highlight),
    inset 0 -1px 0 var(--header-inset-lowlight);
  opacity: var(--glass-lens-opacity);
  transition:
    opacity 180ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-header[data-pointer='active'] {
  --glass-lens-opacity: 0.62;
}

.site-header[data-scrolled='true'] {
  --header-shadow-ambient: rgba(27, 26, 23, 0.26);
  --header-shadow-contact: rgba(27, 26, 23, 0.14);
}

.site-header[data-surface='dark'] {
  --glass-lens-opacity: 0.34;
  --header-light-surface-opacity: 1;
  --header-text: var(--ink);
  --header-border: rgba(255, 255, 255, 0.7);
  --header-inner-border: rgba(255, 255, 255, 0.36);
  --header-inset-highlight: rgba(255, 255, 255, 0.82);
  --header-inset-lowlight: rgba(35, 33, 28, 0.12);
  --header-shadow-ambient: rgba(0, 0, 0, 0.22);
  --header-shadow-contact: rgba(0, 0, 0, 0.1);
  --header-lens-hotspot: rgba(255, 255, 255, 0.7);
  --header-lens-middle: rgba(255, 255, 255, 0.18);
  --header-lens-wash: rgba(255, 255, 255, 0.28);
  --header-link-border: rgba(255, 255, 255, 0.34);
  --header-link-background: rgba(255, 255, 255, 0.36);
  --header-link-current: rgba(255, 255, 255, 0.5);
  --header-link-highlight: rgba(255, 255, 255, 0.44);
  --header-link-shadow: rgba(27, 26, 23, 0.05);
  --header-dark-logo-opacity: 0;
  --header-light-logo-opacity: 1;
  --header-cta-text: var(--cream);
  --header-cta-border: rgba(27, 26, 23, 0.92);
  --header-cta-dark-overlay-opacity: 1;
  --header-cta-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.44),
    0 8px 18px rgba(27, 26, 23, 0.17);
  --header-cta-hover-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.48),
    0 11px 24px rgba(27, 26, 23, 0.23);
  --header-menu-background: linear-gradient(180deg, #fcfbf6, #f3f1e9);
}

.site-header[data-surface='dark'][data-pointer='active'] {
  --glass-lens-opacity: 0.68;
}

.brand {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 44px;
}

.brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 220ms ease;
}

.brand__logo--dark-surface {
  opacity: var(--header-dark-logo-opacity);
}

.brand__logo--light-surface {
  opacity: var(--header-light-logo-opacity);
}

/* Product pages show a "KartPace | Timer" lockup so visitors always know they
   left the parent homepage. The parent homepage keeps the bare logo. */
.brand--product {
  display: flex;
  width: auto;
  align-items: center;
  gap: 14px;
}

.brand__logo-frame {
  position: relative;
  flex: none;
  width: 190px;
  height: 44px;
}

.brand__product-tag {
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(1px);
}

.nav-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
  font-size: 14px;
  font-weight: 700;
}

.nav-links a,
.site-footer a {
  position: relative;
}

.site-footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
}

.site-footer a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  content: '';
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-footer a:hover::after,
.site-footer a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 99px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current='location'] {
  border-color: var(--header-link-border);
  background: var(--header-link-background);
  box-shadow:
    inset 0 1px 0 var(--header-link-highlight),
    0 1px 2px var(--header-link-shadow);
}

.nav-links a[aria-current='location'] {
  background: var(--header-link-current);
}

.nav-toggle {
  position: relative;
  z-index: 1;
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--header-link-border);
  border-radius: 99px;
  background: var(--header-link-background);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.nav-toggle:focus-visible {
  outline: 3px solid rgba(255, 182, 0, 0.72);
  outline-offset: 3px;
}

.nav-toggle__bar {
  width: 16px;
  height: 2px;
  border-radius: 99px;
  background: var(--header-text);
  transition:
    transform 200ms ease,
    opacity 160ms ease;
}

.site-header[data-menu-open='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header[data-menu-open='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header[data-menu-open='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  color: var(--cream);
  background: var(--ink);
  box-shadow: 0 10px 24px rgba(27, 26, 23, 0.1);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  background: #000;
  box-shadow: 0 14px 34px rgba(27, 26, 23, 0.16);
  transform: translateY(-2px);
}

.button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(255, 182, 0, 0.72);
  outline-offset: 3px;
}

.button--compact {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 48px;
  justify-self: end;
  padding-inline: 23px;
  border-color: var(--header-cta-border);
  color: var(--header-cta-text);
  background: linear-gradient(180deg, #ffc82e, var(--yellow));
  box-shadow: var(--header-cta-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    transform 180ms cubic-bezier(0.22, 0.68, 0.22, 1),
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.button--compact::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
  background: linear-gradient(180deg, rgba(35, 34, 31, 0.96), rgba(8, 8, 7, 0.94));
  opacity: var(--header-cta-dark-overlay-opacity);
  pointer-events: none;
  transition: opacity 220ms ease;
}

.button--compact::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
  background: radial-gradient(circle at 34% 0%, rgba(255, 255, 255, 0.34), transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.button--compact > span {
  position: relative;
  z-index: 1;
}

.site-header .button--compact:hover,
.site-header .button--compact:focus-visible {
  background: linear-gradient(180deg, #ffd04a, #ffb300);
  box-shadow: var(--header-cta-hover-shadow);
  transform: scale(1.02);
}

.site-header .button--compact:hover::after,
.site-header .button--compact:focus-visible::after {
  opacity: 1;
}

.site-header:not([data-surface='dark']) .button--compact:focus-visible {
  outline-color: var(--cream);
}

.site-header .button--compact:active {
  transform: scale(0.985);
}

.button--secondary {
  border-color: #d5d1c6;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: none;
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: var(--paper);
}

.button--wide {
  width: min(100%, 430px);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.hero {
  min-height: 920px;
  overflow: hidden;
  padding: 160px 0 70px;
}

.hero::after {
  position: absolute;
  right: -6vw;
  bottom: 4%;
  width: 54vw;
  height: 54vw;
  max-width: 850px;
  max-height: 850px;
  content: '';
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.52);
  filter: blur(2px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  min-height: 690px;
  align-items: center;
  gap: 7vw;
}

.hero__copy {
  max-width: 780px;
  padding-bottom: 100px;
}

h1,
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

h1 {
  max-width: 850px;
  font-size: clamp(64px, 7.2vw, 116px);
}

h2 {
  font-size: clamp(54px, 5.5vw, 88px);
}

.hero__lede {
  max-width: 650px;
  margin: 32px 0 28px;
  color: var(--muted);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-row .button {
  gap: 14px;
}

.button__arrow {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.honest-note {
  margin: 24px 0 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 650;
}

.hero__product {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  padding-right: 7%;
}

.hero-device-stage {
  --device-rx: 0deg;
  --device-ry: 0deg;
  --device-x: 0px;
  --device-y: 0px;
  --device-scale: 1;
  --glare-x: 62%;
  --glare-y: 18%;
  --glare-opacity: 0;
  --shadow-x: 0px;
  --shadow-y: 0px;
  --shadow-opacity: 0.24;
  --shadow-scale: 1;
  position: relative;
  box-sizing: content-box;
  width: clamp(340px, 28vw, 420px);
  max-width: 100%;
  margin: -28px;
  padding: 28px;
  perspective: 900px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.hero-device-tilt {
  position: relative;
  z-index: 1;
  transform: translate3d(var(--device-x), var(--device-y), 0) rotateX(var(--device-rx))
    rotateY(var(--device-ry)) scale(var(--device-scale));
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
}

.hero-device {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1498 / 3200;
  overflow: visible;
  line-height: 0;
}

.hero-device-picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.hero-device-picture img {
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  filter: drop-shadow(0 9px 16px rgba(27, 26, 23, 0.12));
  image-rendering: auto;
}

.hero-device-shadow {
  position: absolute;
  z-index: 0;
  right: 7%;
  bottom: 3.5%;
  left: 12%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27, 26, 23, 0.72), rgba(27, 26, 23, 0) 70%);
  filter: blur(20px);
  opacity: var(--shadow-opacity);
  transform: translate3d(var(--shadow-x), var(--shadow-y), 0) scaleX(var(--shadow-scale));
  transform-origin: center;
  pointer-events: none;
}

.hero-device-glare {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(
      ellipse 52% 38% at var(--glare-x) var(--glare-y),
      rgba(255, 255, 255, 0.46),
      rgba(255, 255, 255, 0.12) 34%,
      rgba(255, 255, 255, 0) 72%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 255, 255, 0.1) 46%,
      rgba(255, 255, 255, 0) 60%
    );
  opacity: var(--glare-opacity);
  mix-blend-mode: screen;
  transform: translateZ(1px);
  -webkit-mask-image: url('assets/hero-device-frame-mask.webp');
  mask-image: url('assets/hero-device-frame-mask.webp');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.hero-device-stage[data-active='true'] .hero-device-tilt {
  will-change: transform;
}

.hero-device-stage[data-active='true'] .hero-device-glare {
  will-change: opacity;
}

.hero-device-stage[data-active='true'] .hero-device-shadow {
  will-change: transform, opacity;
}

.kart-sprite {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-image: url('assets/kart-pixel-sprite.webp');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  image-rendering: pixelated;
  will-change: background-position;
}

.kart-heading {
  --kart-facing: 1;
  --kart-tilt: 0deg;
  position: relative;
  width: 100%;
  transform: scaleX(var(--kart-facing)) rotate(var(--kart-tilt));
  will-change: transform;
}

.live {
  padding: 130px 0 150px;
  background: rgba(255, 255, 255, 0.46);
  border-block: 1px solid var(--line);
}

.live__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(600px, 1.35fr) minmax(190px, 0.45fr);
  align-items: center;
  gap: clamp(28px, 3vw, 52px);
}

.section-copy h2 {
  font-size: clamp(50px, 5vw, 78px);
}

.section-copy p {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.live-board {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px -4px 14px;
  padding: 9px 10px 14px;
  border-bottom: 1px solid var(--line);
}

.demo-toolbar p {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 9px;
  margin: 0;
}

.demo-toolbar p span {
  grid-row: 1 / 3;
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--yellow);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.demo-toolbar p b {
  font-size: 12px;
}

.demo-toolbar p small {
  color: var(--faint);
  font-size: 11px;
}

.demo-undo {
  /* Matches the 44px trackside touch-target floor the app holds itself to. */
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.demo-undo:disabled {
  color: var(--faint);
  background: var(--shelf);
  cursor: not-allowed;
}

.demo-undo:focus-visible,
.driver-card__tap:focus-visible,
.faq summary:focus-visible {
  outline: 3px solid rgba(255, 182, 0, 0.78);
  outline-offset: 3px;
}

.demo-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.live-board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.live-board__top div {
  display: grid;
}

.live-board__top strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.live-board__top span {
  color: var(--faint);
  font-size: 12px;
}

.finish-control {
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--shelf);
  color: var(--ink) !important;
  font-weight: 800;
}

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

.driver-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
}

.driver-card__tap {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.driver-card:has(.driver-card__tap:hover) {
  border-color: rgba(27, 26, 23, 0.42);
  box-shadow: 0 8px 22px rgba(27, 26, 23, 0.1);
  transform: translateY(-1px);
}

.driver-card:has(.driver-card__tap:active) {
  transform: scale(0.99);
}

.driver-card {
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.driver-card header {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.driver-card header b {
  font-size: 31px;
  font-variant-numeric: tabular-nums;
}

.driver-card--teal header,
.plate--teal,
.eta--teal {
  background: var(--teal);
}
.driver-card--blue header,
.plate--blue,
.eta--blue {
  background: var(--blue);
}
.driver-card--lime header,
.plate--lime,
.eta--lime {
  background: var(--lime);
}
.driver-card--yellow header,
.plate--yellow,
.eta--yellow {
  color: var(--ink) !important;
  background: #e5a500;
}

.driver-card__body {
  padding: 13px 14px 12px;
}

.status-word {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 99px;
  background: #f1f0ec;
  font-size: 11px;
  font-weight: 850;
}

/* Demo card states. The status word already spells out what is happening, so
   these are supplementary emphasis to help a glance find the urgent card.
   Meaning is never carried by colour alone. The card already transitions
   border-color and box-shadow, and reduced motion flattens that globally. */
.driver-card[data-demo-state='close'] {
  border-color: rgba(255, 182, 0, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 182, 0, 0.16);
}

.driver-card[data-demo-state='close'] .status-word {
  color: #6d4a00;
  background: #fff3d4;
}

.driver-card[data-demo-state='late'] {
  border-color: rgba(179, 38, 30, 0.72);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.driver-card[data-demo-state='late'] .status-word {
  color: #8a1f19;
  background: #fdeceb;
}

.driver-card[data-demo-state='crossed'] {
  border-color: rgba(11, 127, 117, 0.8);
  box-shadow: 0 0 0 3px rgba(11, 127, 117, 0.14);
}

.driver-card[data-demo-state='crossed'] .status-word {
  color: #04564f;
  background: #ddf2ef;
}

.live-time {
  display: block;
  margin: 17px 0 13px;
  font-size: clamp(44px, 4.2vw, 72px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.live-time span {
  color: #8a8882;
  font-size: 0.55em;
}

.arrival-gauge {
  position: relative;
  height: 5px;
  margin-bottom: 14px;
  border-radius: 99px;
  background: #dddcd8;
}

.arrival-gauge i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--ink);
}

.arrival-gauge b {
  position: absolute;
  top: 50%;
  right: 15%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.driver-card dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--shelf);
}

.driver-card dl div {
  display: flex;
  flex-direction: column-reverse;
}

.driver-card dt {
  color: var(--faint);
  font-size: 10px;
}

.driver-card dd {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.race-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 15px;
  margin-top: 12px;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(245, 243, 236, 0.76);
}

.race-control > span {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.race-control strong {
  font-size: 16px;
}

.eta-row {
  display: flex;
  justify-self: end;
  gap: 7px;
}

.eta {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.live-notes {
  display: grid;
  gap: 44px;
}

.live-notes div {
  position: relative;
  display: grid;
  gap: 7px;
  padding-left: 22px;
}

.live-notes div::before {
  position: absolute;
  top: 8px;
  left: -16px;
  width: 27px;
  height: 1px;
  content: '';
  background: #cdbf9f;
}

.live-notes div::after {
  position: absolute;
  top: 5px;
  left: -18px;
  width: 7px;
  height: 7px;
  content: '';
  border-radius: 50%;
  background: #cdbf9f;
}

.live-notes b {
  font-size: 12px;
}

.live-notes span {
  color: var(--muted);
  font-size: 13px;
}

.workflow {
  height: 300svh;
  overflow: clip;
  padding: 0;
}

.workflow__sticky {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
}

.workflow__stage {
  display: grid;
  align-content: center;
  padding: clamp(86px, 10vh, 112px) 0 clamp(26px, 4vh, 46px);
}

.workflow__heading {
  text-align: center;
}

.workflow__heading h2 {
  max-width: 1180px;
  margin-inline: auto;
  font-size: clamp(54px, 5vw, 80px);
}

.workflow-motion {
  position: relative;
  z-index: 2;
  height: 140px;
  margin: 12px 0 4px;
  pointer-events: none;
}

.workflow-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.workflow-route path {
  fill: none;
  stroke: none;
}

.workflow-kart {
  --kart-x: -160px;
  --kart-y: 76px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: clamp(126px, 9vw, 148px);
  filter: drop-shadow(0 10px 12px rgba(24, 23, 20, 0.2));
  transform: translate3d(var(--kart-x), var(--kart-y), 0) translate(-50%, -50%);
  will-change: transform;
}

.workflow-puff,
.step-puff {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 11px;
  border: 2px solid rgba(70, 68, 62, 0.15);
  border-radius: 38%;
  background: rgba(248, 245, 236, 0.88);
  box-shadow:
    -4px 2px 0 rgba(248, 245, 236, 0.62),
    4px -3px 0 rgba(248, 245, 236, 0.52);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.workflow-step {
  opacity: 0.72;
  transform: translateY(0) scale(0.98);
  transform-origin: 50% 15%;
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.22, 0.68, 0.22, 1);
}

.workflow-step.is-active {
  opacity: 1;
  transform: translateY(-8px) scale(1);
}

.step-kart-lane {
  display: none;
}

.workflow-step header {
  display: flex;
  min-height: 120px;
  align-items: flex-start;
  gap: 16px;
}

.workflow-step header > span {
  color: var(--yellow);
  font-family: var(--serif);
  font-size: 92px;
  font-weight: 700;
  line-height: 0.8;
}

.workflow-step h3 {
  margin: 0 0 7px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.workflow-step p {
  margin: 0;
  color: var(--muted);
}

.roster-paper,
.review-paper,
.tap-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.roster-paper {
  padding: 12px 14px;
}

.roster-paper > div {
  display: flex;
  min-height: 63px;
  align-items: center;
  gap: 12px;
  padding: 8px 3px;
  border-bottom: 1px solid var(--line);
}

.roster-paper > div:last-child {
  border-bottom: 0;
}

.roster-paper span {
  display: grid;
  font-weight: 750;
}

.roster-paper small {
  color: var(--muted);
  font-weight: 500;
}

.plate {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.tap-demo {
  position: relative;
  min-height: 325px;
  padding-top: 34px;
}

.tap-card {
  overflow: hidden;
  transform-origin: 82% 78%;
}

.tap-card__header {
  padding: 16px;
  color: #fff;
  background: var(--teal);
  font-size: 22px;
  font-weight: 900;
}

.tap-card__header b {
  margin-right: 8px;
  font-size: 34px;
}

.tap-card > span {
  display: inline-block;
  margin: 15px 15px 0;
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--shelf);
  font-size: 11px;
  font-weight: 800;
}

.tap-card > strong {
  display: block;
  margin: 10px 16px 28px;
  font-size: 74px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 1;
}

.tap-card > strong span {
  color: #85827b;
  font-size: 0.54em;
}

.tap-card > i {
  display: block;
  width: calc(100% - 32px);
  height: 5px;
  margin: 0 16px 23px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ink) 0 62%, #deddd8 62% 100%);
}

.tap-cue {
  position: absolute;
  right: 34px;
  bottom: 68px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(22px, 18px, 0) rotate(-3deg);
}

.tap-cue__label {
  padding: 7px 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  color: var(--yellow);
  background: rgba(27, 26, 23, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 12px rgba(27, 26, 23, 0.16);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.tap-cue__pointer {
  width: 38px;
  height: 42px;
  overflow: visible;
  filter: drop-shadow(0 4px 5px rgba(27, 26, 23, 0.2));
  transform-origin: 8px 8px;
}

.tap-cue__cursor {
  fill: var(--ink);
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.tap-cue__rays {
  fill: none;
  stroke: var(--yellow);
  stroke-linecap: round;
  stroke-width: 2.5;
  opacity: 0;
}

.workflow-step.is-tap-cue-visible .tap-cue {
  animation: tap-cue-arrive 3000ms cubic-bezier(0.22, 0.68, 0.22, 1) 180ms 1 both;
}

.workflow-step.is-tap-cue-visible .tap-cue__pointer {
  animation: tap-pointer-press 3000ms cubic-bezier(0.22, 0.68, 0.22, 1) 180ms 1 both;
}

.workflow-step.is-tap-cue-visible .tap-cue__rays {
  animation: tap-click-rays 3000ms ease-out 180ms 1 both;
}

.workflow-step.is-tap-cue-visible .tap-card {
  animation: tap-card-press 3000ms cubic-bezier(0.22, 0.68, 0.22, 1) 180ms 1 both;
}

@keyframes tap-cue-arrive {
  0% {
    opacity: 0;
    transform: translate3d(22px, 18px, 0) rotate(-3deg);
  }
  10% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-4px, -6px, 0) rotate(-3deg);
  }
}

@keyframes tap-pointer-press {
  0%,
  38%,
  52%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  44% {
    transform: translate3d(0, 2px, 0) scale(0.86);
  }
}

@keyframes tap-click-rays {
  0%,
  40%,
  52%,
  100% {
    opacity: 0;
  }
  44%,
  48% {
    opacity: 1;
  }
}

@keyframes tap-card-press {
  0%,
  38%,
  52%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  44% {
    transform: translate3d(0, 2px, 0) scale(0.992);
  }
}

.review-paper {
  padding: 14px;
}

.review-paper__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 12px;
  border-bottom: 1px solid var(--line);
}

.review-paper__top span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
}

.review-row {
  display: grid;
  grid-template-columns: 38px 1fr auto 48px;
  min-height: 57px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.review-row:last-child {
  border-bottom: 0;
}

.review-row .plate {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 13px;
}

.review-row span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-row strong,
.review-row small {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.review-row em {
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--yellow);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.comparison {
  padding: 125px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.comparison__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.comparison__heading {
  max-width: 820px;
  text-align: center;
}

.comparison__heading h2 {
  font-size: clamp(58px, 6vw, 92px);
}

.comparison__heading p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: 58px;
  gap: 14px;
}

.method-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 10px;
  overflow: hidden;
  padding: 12px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.method-card__visual {
  grid-column: 1 / -1;
  margin: -2px -8px 14px;
}

.method-card__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 550;
  filter: drop-shadow(0 14px 15px rgba(27, 26, 23, 0.15));
  object-fit: contain;
}

.method-card > span:not(.method-card__visual) {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
}

.method-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.method-card b {
  grid-column: 1 / -1;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.method-card--kartpace {
  border-color: #d99a00;
  background: var(--yellow);
  box-shadow: 0 16px 38px rgba(217, 154, 0, 0.16);
}

.method-card--kartpace > span:not(.method-card__visual) {
  color: rgba(27, 26, 23, 0.72);
}

.method-card--kartpace b {
  border-color: rgba(27, 26, 23, 0.22);
}

.comparison__note {
  margin: 25px auto 0;
  padding: 11px 17px;
  border-radius: 99px;
  color: var(--cream);
  background: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.offline {
  padding: 135px 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 182, 0, 0.06), transparent 36rem), var(--charcoal);
}

.offline__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(560px, 1.25fr);
  align-items: center;
  gap: clamp(60px, 8vw, 130px);
}

.offline__copy h2 {
  max-width: 520px;
  color: var(--cream);
}

.offline__copy > p {
  max-width: 570px;
  margin: 30px 0 0;
  color: #d2cec4;
  font-size: 19px;
  line-height: 1.65;
}

.proof-list {
  display: grid;
  max-width: 520px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.proof-list li {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(244, 242, 234, 0.18);
}

.proof-list li:last-child {
  border-bottom: 0;
}

.proof-list span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-size: 25px;
  font-weight: 800;
}

.proof-list b {
  font-size: 17px;
}

.trackside-photo {
  position: relative;
  margin: 0;
}

.trackside-photo::before {
  position: absolute;
  z-index: 2;
  inset: -13px;
  content: '';
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 31px;
}

.trackside-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  object-fit: cover;
}

.trackside-photo figcaption {
  margin-top: 18px;
  color: #918d84;
  font-size: 12px;
}

.pro {
  overflow: hidden;
  padding: 150px 0;
}

.pro__inner {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(70px, 9vw, 150px);
}

.pro__offer h2 {
  font-size: clamp(55px, 5.2vw, 84px);
}

.price-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.price-row strong {
  font-size: clamp(82px, 8vw, 132px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.price-row span {
  padding: 8px 13px;
  border-radius: 99px;
  background: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.forever {
  margin: 24px 0 28px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 600;
}

.pro-store-note {
  width: min(100%, 430px);
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.pro-list {
  max-width: 520px;
  margin: 0 0 24px;
  padding: 0 19px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 15px 35px rgba(27, 26, 23, 0.05);
  list-style: none;
}

.pro-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  min-height: 59px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.pro-list li:last-child {
  border-bottom: 0;
}

.pro-list span {
  font-size: 24px;
  font-weight: 900;
}

.pro-list b {
  font-size: 15px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.trust-row span::before {
  margin-right: 7px;
  color: var(--yellow);
  content: '●';
}

.review-showcase {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  place-items: center;
}

.review-showcase__art {
  position: relative;
  z-index: 1;
  width: 150%;
  max-width: 1060px;
  height: auto;
  aspect-ratio: 4 / 3;
  filter: drop-shadow(0 28px 36px rgba(27, 26, 23, 0.16));
  object-fit: contain;
}

.plan-compare {
  display: grid;
  grid-template-columns: minmax(300px, 0.66fr) minmax(620px, 1.34fr);
  align-items: center;
  gap: clamp(55px, 7vw, 115px);
  margin-top: 105px;
  padding-top: 105px;
  border-top: 1px solid var(--line);
}

.plan-compare__heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.plan-compare__heading p {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.plan-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 20px 50px rgba(27, 26, 23, 0.08);
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.plan-table th,
.plan-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.plan-table thead th {
  color: var(--muted);
  background: var(--shelf);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.plan-table thead th:last-child {
  color: var(--ink);
  background: var(--yellow);
}

.plan-table tbody th {
  width: 34%;
  font-size: 13px;
}

.plan-table td {
  color: var(--muted);
}

.plan-table td:last-child {
  color: var(--ink);
  font-weight: 850;
}

.plan-table tbody tr:last-child > * {
  border-bottom: 0;
}

.plan-table__price > * {
  background: #fffaf0;
}

.plan-table__price td:last-child {
  font-size: 17px;
}

.faq {
  padding: 145px 0;
  color: var(--cream);
  background: var(--charcoal);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.66fr) minmax(620px, 1.34fr);
  align-items: start;
  gap: clamp(55px, 8vw, 130px);
}

.faq .eyebrow,
.faq__heading p {
  color: #aaa69d;
}

.faq__heading h2 {
  color: var(--cream);
  font-size: clamp(54px, 5.4vw, 86px);
}

.faq__heading p {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.faq__list {
  border-top: 1px solid rgba(244, 242, 234, 0.22);
}

.faq details {
  border-bottom: 1px solid rgba(244, 242, 234, 0.22);
}

.faq summary {
  position: relative;
  padding: 24px 54px 24px 0;
  color: var(--cream);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(244, 242, 234, 0.3);
  border-radius: 50%;
  content: '+';
  font-size: 20px;
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: '−';
}

.faq details p {
  max-width: 690px;
  margin: -4px 0 25px;
  padding-right: 54px;
  color: #c8c4ba;
  font-size: 15px;
  line-height: 1.65;
}

.closing {
  min-height: 790px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.closing__inner {
  display: flex;
  min-height: 790px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 190px;
  text-align: center;
}

.closing h2 {
  font-size: clamp(70px, 8vw, 132px);
}

.closing p {
  margin: 28px 0 26px;
  color: var(--muted);
  font-size: 21px;
}

.store-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.store-badge {
  display: flex;
  width: 218px;
  aspect-ratio: 119.66407 / 40;
  align-items: center;
  justify-content: center;
}

.store-badge--ios,
.store-badge--android {
  gap: 15px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 14px;
  color: #fff;
  background: #090909;
  box-shadow: 0 12px 30px rgba(9, 9, 9, 0.14);
}

.store-badge--ios {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 14px;
  text-align: left;
}

.store-badge--ios > img {
  grid-row: 1 / 3;
  align-self: center;
  width: 35px;
  height: auto;
}

.store-badge--ios > span {
  align-self: end;
  color: rgba(255, 255, 255, 0.64);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a.store-badge--ios:hover,
a.store-badge--ios:focus-visible {
  color: #090909;
  background: var(--yellow);
  transform: translateY(-2px);
}

a.store-badge--ios:hover > span,
a.store-badge--ios:focus-visible > span {
  color: rgba(9, 9, 9, 0.62);
}

a.store-badge--ios:hover > img,
a.store-badge--ios:focus-visible > img {
  filter: invert(1);
}

.store-badge--android img {
  width: 46px;
  height: auto;
}

.store-badge--ios strong,
.store-badge--android strong {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.closing__note {
  margin-top: 16px;
  color: var(--faint);
  font-size: 14px;
}

.platform-attribution {
  width: min(100%, 620px);
  margin-top: 10px;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.45;
}

.platform-attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.finish-line {
  position: absolute;
  right: 0;
  bottom: 65px;
  left: 0;
  height: 170px;
}

.finish-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.finish-line path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1900;
  stroke-dashoffset: 1900;
}

.closing__inner.is-visible .finish-line path {
  animation: draw-line 1.4s ease-out 250ms 1 forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.site-footer {
  display: grid;
  grid-template-columns: repeat(8, auto) 1fr;
  min-height: 110px;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.site-footer .footer-provider {
  grid-column: 1 / -1;
}

.site-footer span {
  justify-self: end;
  color: var(--muted);
}

/* Scroll reveal.
   Seventeen elements on the Timer page carry .reveal, covering roughly 71% of
   its text including the hero, and only script.js can add .is-visible. Hiding
   them unconditionally meant that with scripting off the page rendered blank.
   Gating on `scripting: enabled` keeps the animation for everyone who can run
   it and leaves the content visible for everyone who cannot, with no flash of
   hidden content the way a JS-set attribute would cause. Browsers that do not
   know the `scripting` feature drop the block entirely and show the content
   unanimated, which is the correct failure direction. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 650ms ease,
      transform 650ms cubic-bezier(0.22, 0.68, 0.22, 1);
  }

  .reveal--delay {
    transition-delay: 110ms;
  }
  .reveal--delay-2 {
    transition-delay: 220ms;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .page-width {
    width: min(100% - 40px, 1100px);
  }
  .site-header {
    width: calc(100% - 28px);
  }
  .hero {
    min-height: 820px;
  }
  .hero__inner {
    grid-template-columns: 1.1fr 0.7fr;
    gap: 32px;
  }
  .hero__copy {
    padding-bottom: 40px;
  }
  .hero-device-stage {
    width: clamp(290px, 31vw, 380px);
  }
  .live__inner {
    grid-template-columns: minmax(240px, 0.7fr) minmax(560px, 1.3fr);
  }
  .live-notes {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
  }
  .live-notes div::before,
  .live-notes div::after {
    display: none;
  }
  .workflow-steps {
    gap: 20px;
  }
  .offline__inner {
    gap: 50px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .hero {
    min-height: 800px;
    padding-top: 120px;
    padding-bottom: 48px;
  }
  .hero__inner {
    min-height: 632px;
  }
  .hero__copy {
    padding-bottom: 18px;
  }
  h1 {
    font-size: clamp(64px, 7vw, 82px);
  }
}

@media (max-width: 980px) {
  .comparison__inner,
  .offline__inner,
  .pro__inner,
  .plan-compare,
  .faq__inner {
    grid-template-columns: 1fr;
  }

  .comparison__heading,
  .offline__copy,
  .pro__offer,
  .plan-compare__heading,
  .faq__heading {
    max-width: 650px;
  }

  .plan-compare {
    align-items: start;
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trackside-photo {
    width: min(100%, 760px);
  }

  .review-showcase {
    width: min(100%, 680px);
  }

  .workflow {
    height: auto;
    overflow: hidden;
    padding: 105px 0;
  }

  .workflow__sticky {
    position: relative;
    min-height: auto;
    overflow: visible;
  }

  .workflow__stage {
    display: block;
    padding: 0;
  }

  .workflow__heading {
    margin-bottom: 52px;
  }

  .workflow-motion {
    display: none;
  }

  .workflow-steps {
    grid-template-columns: 1fr;
    width: min(100%, 620px);
    margin-inline: auto;
    gap: 70px;
  }

  .workflow-step,
  .workflow-step.is-active {
    opacity: 1;
    transform: none;
  }

  .workflow-step header {
    min-height: auto;
    margin-bottom: 10px;
  }

  .step-kart-lane {
    position: relative;
    display: block;
    height: 72px;
    overflow: hidden;
    margin: 0 0 14px;
    pointer-events: none;
  }

  .step-kart {
    --step-kart-x: -120px;
    --step-kart-y: 36px;
    position: absolute;
    top: 0;
    left: 0;
    width: 108px;
    filter: drop-shadow(0 8px 9px rgba(24, 23, 20, 0.18));
    transform: translate3d(var(--step-kart-x), var(--step-kart-y), 0) translateY(-50%);
    will-change: transform;
  }

  .step-puff--one {
    top: 42%;
    right: 91%;
    transform: scale(0.58);
  }

  .step-puff--two {
    top: 31%;
    right: 108%;
    transform: scale(0.74);
  }

  .step-puff--three {
    top: 52%;
    right: 126%;
    transform: scale(0.9);
  }

  .step-puff--four {
    top: 38%;
    right: 145%;
    transform: scale(1.04);
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding-left: 16px;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) contrast(1.02);
    backdrop-filter: blur(18px) saturate(1.2) contrast(1.02);
  }
  .brand {
    width: 156px;
    height: 44px;
  }
  .brand--product {
    width: auto;
    gap: 10px;
  }
  .brand--product .brand__logo-frame {
    width: 128px;
  }
  .brand__product-tag {
    padding-left: 10px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--header-border);
    border-radius: 26px;
    background: var(--header-menu-background);
    box-shadow:
      inset 0 1px 0 var(--header-inset-highlight),
      0 18px 44px rgba(27, 26, 23, 0.24);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
  }
  .site-header[data-menu-open='true'] .nav-links {
    display: flex;
  }
  .nav-links a {
    justify-content: center;
  }
  .button--compact {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 13px;
  }
  .hero {
    min-height: auto;
    padding-top: 146px;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__copy {
    max-width: 800px;
    margin-inline: auto;
    padding-bottom: 0;
  }
  .hero__lede {
    margin-inline: auto;
  }
  .button-row {
    justify-content: center;
  }
  .hero__product {
    justify-self: center;
    padding: 20px 0 110px;
  }
  .hero__product.reveal {
    opacity: 1;
    transform: none;
  }
  .hero-device-stage {
    width: min(76vw, 380px);
  }
  .live {
    padding: 100px 0;
  }
  .live__inner {
    grid-template-columns: 1fr;
  }
  .section-copy {
    max-width: 640px;
    text-align: center;
    margin-inline: auto;
  }
  .live-board {
    width: min(100%, 720px);
    margin-inline: auto;
  }
  .live-notes {
    grid-template-columns: repeat(3, 1fr);
    width: min(100%, 720px);
    margin-inline: auto;
  }
  .comparison,
  .faq {
    padding: 100px 0;
  }
  .faq__inner {
    gap: 55px;
  }
  .offline {
    padding: 100px 0;
  }
  .offline__inner {
    grid-template-columns: 1fr;
  }
  .offline__copy {
    max-width: 650px;
  }
  .trackside-photo {
    width: min(100%, 760px);
  }
  .pro {
    padding: 110px 0;
  }
  .pro__inner {
    grid-template-columns: 1fr;
  }
  .pro__offer {
    max-width: 650px;
  }
  .review-showcase {
    width: min(100%, 680px);
  }
  .plan-compare {
    gap: 45px;
    margin-top: 75px;
    padding-top: 75px;
  }
  .closing__inner {
    min-height: 700px;
  }
  .site-footer {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    padding: 30px 0;
  }
  .site-footer a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
  }
  .site-footer span {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .site-footer .footer-provider {
    justify-self: center;
    text-align: center;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  .hero {
    padding: 128px 0 56px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(250px, 0.72fr);
    min-height: 720px;
    align-items: center;
    gap: 28px;
    text-align: left;
  }

  .hero__copy {
    margin-inline: 0;
    text-align: left;
  }

  h1 {
    font-size: clamp(54px, 7.5vw, 66px);
  }

  .hero__lede {
    margin-inline: 0;
    font-size: 17px;
  }

  .button-row {
    justify-content: flex-start;
  }

  .hero__product {
    align-self: end;
    padding: 20px 0 0;
  }

  .hero-device-stage {
    width: min(39vw, 320px);
  }
}

@media (max-width: 620px) {
  .page-width {
    width: calc(100% - 32px);
  }
  .section {
    scroll-margin-top: 78px;
  }
  .site-header {
    top: 8px;
    width: calc(100% - 20px);
    min-height: 56px;
    margin-top: 8px;
    margin-bottom: -64px;
    padding: 6px 8px 6px 14px;
  }
  .brand {
    width: 128px;
    height: 44px;
  }
  .brand--product {
    width: auto;
    min-width: 0;
    gap: 7px;
  }
  .brand--product .brand__logo-frame {
    width: 92px;
  }
  .brand__product-tag {
    padding-left: 7px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .button--compact {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .hero {
    padding-top: 108px;
  }
  h1 {
    font-size: clamp(50px, 14.5vw, 64px);
  }
  .hero__lede {
    margin-top: 20px;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.5;
  }
  .button-row {
    display: grid;
  }
  .button {
    width: 100%;
  }
  .button-row .button {
    min-height: 54px;
  }
  .honest-note {
    margin-top: 18px;
    font-size: 12px;
  }
  .hero__product {
    padding-top: 8px;
    padding-bottom: 72px;
  }
  .hero__product.reveal {
    opacity: 1;
    transform: none;
  }
  .hero-device-stage {
    width: min(78vw, 310px);
    margin: -20px;
    padding: 20px;
  }
  .live {
    padding: 68px 0 72px;
  }
  .live__inner {
    gap: 34px;
  }
  .section-copy h2 {
    font-size: 46px;
  }
  .section-copy p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.55;
  }
  .live-board {
    padding: 9px;
    border-radius: 24px;
  }
  .demo-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin: -2px -2px 10px;
    padding: 8px 8px 12px;
  }
  .demo-toolbar p {
    grid-template-columns: auto 1fr;
  }
  .demo-undo {
    width: 100%;
  }
  .driver-grid {
    gap: 7px;
  }
  .driver-card {
    border-radius: 15px;
  }
  .driver-card header {
    min-height: 50px;
    gap: 5px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .driver-card header b {
    font-size: 23px;
  }
  .driver-card__body {
    padding: 9px 8px 8px;
  }
  .live-time {
    margin: 14px 0 13px;
    font-size: 46px;
  }
  .driver-card dl {
    gap: 3px;
    padding: 7px 5px;
  }
  .driver-card dd {
    font-size: 10px;
  }
  .driver-card dt {
    font-size: 8px;
  }
  .race-control {
    grid-template-columns: 1fr auto;
    padding: 12px;
  }
  .race-control strong {
    font-size: 13px;
  }
  .live-notes {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .live-notes div {
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
  }
  .workflow {
    padding: 74px 0 82px;
  }
  .workflow__heading {
    margin-bottom: 38px;
  }
  .workflow__heading h2 {
    font-size: 46px;
  }
  .workflow-steps {
    gap: 48px;
  }
  .workflow-step header {
    margin-bottom: 4px;
  }
  .workflow-step header > span {
    font-size: 64px;
  }
  .workflow-step h3 {
    font-size: 20px;
  }
  .workflow-step p {
    font-size: 14px;
    line-height: 1.45;
  }
  .step-kart-lane {
    height: 56px;
    margin-bottom: 8px;
  }
  .step-kart {
    width: 84px;
  }
  .comparison,
  .faq {
    padding: 76px 0 82px;
  }
  .faq__inner {
    gap: 38px;
  }
  .comparison__heading h2,
  .faq__heading h2 {
    font-size: 48px;
  }
  .comparison__heading p {
    margin-top: 22px;
    font-size: 16px;
  }
  .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 34px;
    gap: 8px;
  }
  .method-card {
    min-height: 0;
    gap: 0 7px;
    padding: 8px 10px 14px;
    border-radius: 17px;
  }
  .method-card__visual {
    margin: 0 0 12px;
  }
  .method-card > span:not(.method-card__visual) {
    font-size: 11px;
  }
  .method-card h3 {
    margin: 0;
    font-size: 21px;
  }
  /* These captions are real comparison copy, not chrome, so they should not
     drop to 10px on a phone. */
  .method-card b {
    margin-top: 12px;
    padding-top: 11px;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .comparison__note {
    margin-top: 18px;
    border-radius: 18px;
    line-height: 1.4;
  }
  .offline {
    padding: 76px 0 82px;
  }
  .offline__inner {
    gap: 42px;
  }
  .offline__copy h2,
  .pro__offer h2 {
    font-size: 48px;
  }
  .offline__copy > p {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.55;
  }
  .proof-list {
    margin-top: 28px;
  }
  .proof-list li {
    min-height: 68px;
    gap: 14px;
  }
  .proof-list span {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .trackside-photo::before {
    inset: -7px;
    border-radius: 26px;
  }
  .pro {
    padding: 78px 0 70px;
  }
  .pro__inner {
    gap: 44px;
  }
  .price-row {
    align-items: flex-end;
    gap: 10px;
    margin-top: 22px;
  }
  .price-row strong {
    font-size: clamp(72px, 22vw, 92px);
  }
  .price-row span {
    margin-bottom: 8px;
    font-size: 10px;
  }
  .forever {
    margin: 18px 0 22px;
    font-size: 17px;
  }
  .pro-list {
    padding-inline: 16px;
  }
  .review-showcase__art {
    width: 145%;
  }
  .plan-compare {
    gap: 34px;
    margin-top: 58px;
    padding-top: 58px;
  }
  .plan-compare__heading h3 {
    font-size: 46px;
  }
  .plan-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
  }
  .plan-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 12px;
  }
  .plan-table th,
  .plan-table td {
    padding: 14px 10px;
    overflow-wrap: anywhere;
  }
  .plan-table thead th:first-child {
    width: 31%;
  }
  .plan-table thead th:nth-child(2) {
    width: 37%;
  }
  .plan-table thead th:last-child {
    width: 32%;
  }
  .plan-table tbody th {
    width: auto;
    font-size: 12px;
  }
  .faq summary {
    padding-block: 21px;
    font-size: 16px;
  }
  .faq details p {
    padding-right: 34px;
    font-size: 14px;
  }
  .closing {
    min-height: 560px;
  }
  .closing__inner {
    min-height: 560px;
    padding: 72px 0 140px;
  }
  .closing h2 {
    font-size: 50px;
  }
  .closing p {
    margin: 22px 0;
    font-size: 18px;
  }
  .store-links {
    width: min(100%, 240px);
    flex-direction: column;
  }
  .store-badge {
    width: 100%;
  }
  .finish-line {
    bottom: 38px;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    padding-block: 22px;
    text-align: center;
  }
  .site-footer span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .section-copy h2 {
    font-size: clamp(44px, 13vw, 50px);
  }
  .workflow__heading h2 {
    font-size: 43px;
  }
  .workflow-step header {
    gap: 12px;
  }
  .workflow-step header > span {
    font-size: 60px;
  }
  .offline__copy h2,
  .pro__offer h2 {
    font-size: 46px;
  }
  .closing h2 {
    font-size: 47px;
  }
  .tap-cue {
    right: 20px;
  }
}

@media (max-width: 350px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    padding-inline: 10px;
  }
  .brand {
    width: 124px;
    height: 44px;
  }
  .brand--product {
    width: auto;
    gap: 8px;
  }
  .brand--product .brand__logo-frame {
    width: 96px;
  }
  .brand__product-tag {
    padding-left: 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .button--compact {
    min-height: 44px;
    padding-inline: 11px;
    font-size: 11px;
  }
  .nav-toggle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 92px 0 46px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(170px, 0.75fr);
    min-height: auto;
    align-items: center;
    gap: 20px;
    text-align: left;
  }
  .hero__copy {
    text-align: left;
  }
  h1 {
    font-size: clamp(44px, 7.4vw, 56px);
  }
  .hero__lede {
    margin-inline: 0;
    margin-top: 16px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.4;
  }
  .button-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .button-row .button {
    width: auto;
    min-height: 48px;
    padding-inline: 20px;
  }
  .honest-note {
    margin-top: 14px;
  }
  .hero__product {
    align-self: center;
    padding: 0;
  }
  .hero-device-stage {
    width: min(29vw, 215px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-device-stage {
    --glare-opacity: 0 !important;
    --shadow-x: 0px !important;
    --shadow-y: 0px !important;
    --shadow-opacity: 0.24 !important;
    --shadow-scale: 1 !important;
  }
  .hero-device-tilt {
    transform: none !important;
  }
  .hero-device-glare {
    display: none;
  }
  .workflow {
    height: auto;
    padding: 120px 0;
  }
  .workflow__sticky {
    position: relative;
    min-height: auto;
    overflow: visible;
  }
  .workflow__stage {
    padding: 0;
  }
  .workflow-motion {
    display: block;
    height: 100px;
    margin: 18px 0 12px;
  }
  .workflow-route,
  .workflow-puff,
  .step-kart-lane {
    display: none;
  }
  .workflow-kart {
    top: 50%;
    left: 50%;
    width: 126px;
    opacity: 0.84;
    transform: translate(-50%, -50%) !important;
  }
  .workflow-step,
  .workflow-step.is-active {
    opacity: 1;
    transform: none;
  }
  .tap-cue,
  .workflow-step.is-tap-cue-visible .tap-cue {
    opacity: 1;
    animation: none !important;
    transform: none;
  }
  .workflow-step.is-tap-cue-visible .tap-cue__pointer,
  .workflow-step.is-tap-cue-visible .tap-cue__rays,
  .workflow-step.is-tap-cue-visible .tap-card {
    animation: none !important;
  }
  .tap-cue__rays {
    opacity: 1;
  }
  .kart-heading {
    transform: none;
  }
  .kart-sprite {
    background-position: 0 0 !important;
  }
  .finish-line path {
    stroke-dashoffset: 0;
  }
  .site-header::after {
    opacity: 0.18;
  }
  .site-header .button--compact:hover,
  .site-header .button--compact:focus-visible,
  .site-header .button--compact:active {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .site-header,
  .site-header[data-scrolled='true'] {
    --header-border: rgba(255, 255, 255, 0.5);
    --header-link-border: rgba(255, 255, 255, 0.42);
    --header-link-background: rgba(255, 255, 255, 0.18);
    --header-link-current: rgba(255, 255, 255, 0.24);
    background: #11100e;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 14px 34px rgba(27, 26, 23, 0.28);
  }

  .site-header[data-surface='dark'] {
    --header-border: rgba(27, 26, 23, 0.42);
    --header-link-border: rgba(27, 26, 23, 0.3);
    --header-link-background: rgba(255, 255, 255, 0.84);
    --header-link-current: rgba(255, 255, 255, 0.96);
  }

  .site-header::before {
    background: #f9f8f3;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header[data-scrolled='true'] {
    background: var(--charcoal);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header::before {
    background: #f9f8f3;
  }
  .site-header::after {
    display: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header,
  .site-header[data-scrolled='true'] {
    background: var(--charcoal);
  }

  .site-header::before {
    background: #f9f8f3;
  }
  .site-header::after {
    display: none;
  }
}

/* Parent-brand and product support pages. The Timer product page above keeps
   its own richer campaign layout; these classes define the shared KartPace shell. */
.brand-home {
  min-height: 100vh;
}

.brand-header {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(1440px, calc(100% - 64px));
  min-height: 92px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand-header__logo img {
  width: 174px;
  height: auto;
}

.brand-header__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 800;
}

.brand-header__nav > a:not(.brand-header__cta):hover,
.brand-header__nav > a:not(.brand-header__cta):focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.brand-header__cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--yellow);
}

.brand-shell {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
}

.brand-hero {
  display: grid;
  min-height: min(770px, calc(100vh - 92px));
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: 7vw;
  padding: 90px 0 120px;
}

.brand-eyebrow {
  margin: 0 0 20px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-hero__copy h1 {
  max-width: 900px;
}

.brand-lede {
  max-width: 680px;
  margin: 30px 0 32px;
  color: var(--muted);
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.55;
}

.brand-hero__mark {
  display: grid;
  min-height: 360px;
  align-content: center;
  gap: 34px;
  padding: clamp(30px, 4vw, 56px);
  border-radius: 40px;
  color: var(--cream);
  background:
    radial-gradient(circle at 80% 4%, rgba(255, 182, 0, 0.28), transparent 45%), var(--charcoal);
  box-shadow: var(--shadow);
}

.brand-hero__mark img {
  width: min(100%, 380px);
  height: auto;
  aspect-ratio: 1751 / 380;
  justify-self: center;
  object-fit: contain;
}

.brand-hero__mark span {
  display: block;
  max-width: 300px;
  margin: 0;
  justify-self: center;
  color: rgba(244, 242, 234, 0.72);
  font-size: 16px;
  font-weight: 700;
}

.brand-product {
  --device-overhang: clamp(250px, 21vw, 300px);
  --product-padding: clamp(48px, 6vw, 88px);
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(48px, 8vw, 130px);
  margin-bottom: 0;
  padding: var(--product-padding);
  border-radius: 44px;
  color: var(--cream);
  background: var(--charcoal);
}

.brand-product::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.54), transparent);
  content: '';
  pointer-events: none;
}

.brand-product__visual {
  position: relative;
  display: grid;
  min-height: 460px;
  align-self: stretch;
  place-items: center;
}

.brand-product__device {
  position: absolute;
  z-index: 2;
  bottom: calc(-1 * (var(--device-overhang) + var(--product-padding)));
  left: 50%;
  width: min(100%, 300px);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 52px;
  background: #050505;
  box-shadow:
    0 34px 70px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform: translateX(-50%) rotate(-1.5deg);
}

.brand-product__device img {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 44px;
  object-fit: contain;
}

.brand-product__copy h2 {
  margin-bottom: 28px;
}

.brand-product__copy > p:not(.brand-eyebrow),
.brand-product__facts {
  max-width: 650px;
  color: rgba(244, 242, 234, 0.76);
  font-size: 18px;
  line-height: 1.65;
}

.brand-product__facts {
  display: grid;
  gap: 9px;
  margin: 28px 0 34px;
  padding-left: 22px;
}

.button--dark {
  border-color: var(--yellow);
  color: var(--ink);
  background: var(--yellow);
}

.button--dark:hover,
.button--dark:focus-visible {
  color: var(--ink);
  background: #ffc638;
}

.brand-principles {
  display: grid;
  gap: 70px;
  padding: 140px 0;
}

.brand-principles > div:first-child {
  max-width: 860px;
}

.brand-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.brand-principles article {
  min-height: 270px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
}

.brand-principles article > span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
}

.brand-principles h3 {
  margin: 72px 0 10px;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.brand-principles article p {
  margin: 0;
  color: var(--muted);
}

.brand-footer {
  display: flex;
  width: min(1440px, calc(100% - 64px));
  min-height: 110px;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* Direct children only: the address block's email link must stay inline.
   20px tall links missed the WCAG 2.5.8 24px minimum, and on a phone the
   rows sat 8px apart, so the spacing exception did not rescue them. */
.brand-footer > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.brand-footer span {
  margin-left: auto;
}

.footer-provider {
  flex-basis: 100%;
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.6;
}

.footer-provider a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page {
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 110px 0 90px;
}

.legal-page h1 {
  font-size: clamp(54px, 10vw, 88px);
}

.legal-page h2 {
  margin-top: 46px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.legal-page h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.legal-page li + li {
  margin-top: 8px;
}

.legal-page strong {
  color: var(--ink);
}

.legal-lede {
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 650;
}

.legal-effective {
  color: var(--faint) !important;
  font-size: 14px !important;
  font-weight: 750;
}

.legal-address {
  color: var(--muted);
  font-size: 16px;
  font-style: normal;
  line-height: 1.75;
}

.legal-caps {
  font-size: 15px !important;
  font-weight: 700;
}

.legal-page a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  /* Legal pages carry no site header, so this is the only way back. */
  margin-bottom: 24px;
  font-weight: 800;
}

.support-page > p:first-of-type:not(.brand-eyebrow) {
  font-size: 20px;
}

.legal-footer {
  display: flex;
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.legal-footer nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* Same WCAG 2.5.8 floor as the homepage footer: these wrapped to rows 8px
   apart on a phone, so neither 24px nor the spacing exception was met. */
.legal-footer nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.legal-footer a:hover,
.legal-footer a:focus-visible,
.legal-footer a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.legal-footer p {
  max-width: 300px;
  margin: 0;
  text-align: right;
}

@media (max-width: 900px) {
  .brand-header,
  .brand-shell,
  .brand-footer {
    width: min(100% - 36px, 720px);
  }

  .brand-header__nav > a:not(.brand-header__cta) {
    display: none;
  }

  .brand-hero {
    grid-template-columns: 1fr;
    padding: 70px 0 90px;
  }

  .brand-hero__mark {
    min-height: 300px;
  }

  .brand-product {
    --device-overhang: 245px;
    --product-padding: 54px;
    grid-template-columns: 1fr;
    min-height: 0;
    margin-bottom: 0;
    padding: var(--product-padding) 28px;
  }

  .brand-product__visual {
    order: 2;
    min-height: 340px;
  }

  .brand-product__device {
    width: min(100%, 250px);
  }

  .brand-principles__grid {
    grid-template-columns: 1fr;
  }

  .brand-principles article {
    min-height: 220px;
  }

  .brand-principles h3 {
    margin-top: 40px;
  }

  .brand-footer {
    flex-wrap: wrap;
    padding: 28px 0;
  }

  .brand-footer span {
    width: 100%;
    margin-left: 0;
  }

  .legal-footer {
    flex-direction: column;
  }

  .legal-footer p {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .brand-header__logo img {
    width: 142px;
  }

  .brand-header__cta {
    min-height: 42px;
    padding-inline: 16px;
  }

  .brand-hero h1 {
    font-size: clamp(58px, 18vw, 82px);
  }

  .brand-hero__mark {
    min-height: 250px;
    border-radius: 30px;
  }

  .brand-product {
    --device-overhang: 205px;
    border-radius: 30px;
  }

  .brand-product::after {
    height: 24px;
  }

  .brand-product__visual {
    min-height: 260px;
  }

  .brand-product__device {
    width: min(100%, 210px);
    border-radius: 44px;
  }

  .brand-product__device img {
    border-radius: 36px;
  }
}

/* KartPace parent homepage: product-led editorial layout. These overrides stay
   under .brand-home so the Timer campaign and legal pages keep their own layout. */
.brand-home {
  --brand-ease: cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: clip;
  background:
    radial-gradient(circle at 12% 2%, rgba(255, 255, 255, 0.9), transparent 34rem), var(--bone);
}

.brand-home .brand-text-link::after {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--yellow);
  content: '';
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--brand-ease);
}

.brand-home .brand-text-link:hover::after,
.brand-home .brand-text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.brand-home main .button {
  transition:
    transform 220ms var(--brand-ease),
    box-shadow 220ms ease,
    background-color 180ms ease;
}

.brand-home main .button:hover,
.brand-home main .button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(27, 26, 23, 0.14);
}

.brand-home main .button:active {
  transform: translateY(0) scale(0.98);
}

.brand-home .brand-shell {
  width: min(1440px, calc(100% - 64px));
}

/* The homepage opens on the notebook COVER: a bright warm-white sheet with the
   brand-yellow CTA, lifted off the bone canvas the product pages sit on. Timer
   and legal pages never use it, so the first viewport alone tells you which
   page you are on. */
.brand-cover {
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 clamp(30px, 4vw, 46px) clamp(30px, 4vw, 46px);
  background:
    radial-gradient(circle at 82% -8%, rgba(255, 182, 0, 0.12), transparent 46%),
    linear-gradient(180deg, #fffefb, #fdfbf6 72%, #faf8f0);
  box-shadow: 0 30px 60px -52px rgba(27, 26, 23, 0.4);
}

.brand-cover .brand-eyebrow {
  /* 5.17:1 against the cover gradient's darkest stop. #9c6a00 sat at 4.41. */
  color: #8e6000;
}

.brand-home .brand-cover .button {
  border-color: rgba(255, 196, 39, 0.92);
  color: var(--ink);
  background: linear-gradient(180deg, #ffc82e, var(--yellow));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(153, 91, 0, 0.24),
    0 10px 24px rgba(255, 182, 0, 0.2);
}

.brand-home .brand-cover .button:hover,
.brand-home .brand-cover .button:focus-visible {
  background: linear-gradient(180deg, #ffd04a, #ffb300);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(153, 91, 0, 0.28),
    0 14px 30px rgba(255, 182, 0, 0.26);
}

.brand-home .brand-hero {
  display: grid;
  min-height: min(830px, calc(100dvh - 82px));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  padding: clamp(72px, 8vw, 120px) 0 clamp(94px, 10vw, 150px);
}

.brand-home .brand-hero__copy {
  z-index: 2;
  grid-column: 1 / span 7;
  align-self: center;
}

.brand-home .brand-hero__copy h1 {
  max-width: 940px;
  font-size: clamp(72px, 7.3vw, 126px);
  line-height: 0.86;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.brand-home .brand-lede {
  max-width: 650px;
  margin: 34px 0 30px;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.55;
  text-wrap: pretty;
}

.brand-hero__actions,
.brand-closing__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.brand-text-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  font-weight: 850;
}

.brand-hero__note {
  margin: 28px 0 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 750;
}

.brand-hero__visual {
  position: relative;
  display: grid;
  margin: 0;
  min-height: 660px;
  grid-column: 8 / -1;
  place-items: center;
}

.brand-hero__toolkit {
  width: min(118%, 720px);
  height: auto;
  animation: brand-toolkit-bob 5.2s ease-in-out infinite;
  filter: drop-shadow(0 34px 32px rgba(64, 51, 20, 0.2));
  will-change: transform;
}

@keyframes brand-toolkit-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1.25deg);
  }

  50% {
    transform: translate3d(0, -16px, 0) rotate(-0.45deg);
  }
}

.brand-ledger {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr 1.05fr;
  margin-top: clamp(72px, 8vw, 110px);
  margin-bottom: clamp(100px, 10vw, 150px);
  border-block: 1px solid var(--line);
}

.brand-ledger__fact {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: 150px;
  align-content: center;
  gap: 3px;
  padding: 26px clamp(22px, 3vw, 46px);
  border-left: 1px solid var(--line);
}

.brand-ledger__fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.brand-ledger__fact strong {
  position: relative;
  display: block;
  width: max-content;
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.brand-ledger__fact span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.brand-ledger__fact strong::after {
  position: absolute;
  z-index: 0;
  right: -18px;
  bottom: -0.08em;
  left: -18px;
  height: 0.82em;
  border-radius: 7px 13px 5px 11px;
  background: var(--yellow);
  content: '';
  mix-blend-mode: multiply;
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 300ms var(--brand-ease);
}

@media (hover: hover) and (pointer: fine) {
  .brand-ledger__fact:hover strong::after {
    transform: scaleX(1) rotate(-1deg);
  }
}

.brand-home .brand-product {
  --device-overhang: 300px;
  --product-padding: clamp(52px, 6vw, 86px);
  min-height: 690px;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(54px, 8vw, 120px);
  padding: var(--product-padding);
  border-radius: 46px;
  background: var(--charcoal);
  scroll-margin-top: 116px;
}

.brand-home .brand-product::after {
  height: 36px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
  opacity: 1;
  transition: opacity 420ms ease;
}

.brand-home .brand-product[data-revealed='true']::after {
  opacity: 0.2;
}

.brand-home .brand-product__visual {
  min-height: 510px;
  align-self: stretch;
  transition: min-height 620ms var(--brand-ease);
}

.brand-product__device-trigger {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: default;
  appearance: none;
}

.brand-product__device-trigger:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -6px;
  border-radius: 30px;
}

.brand-home .brand-product__device {
  bottom: calc(-1 * (var(--device-overhang) + var(--product-padding)));
  width: min(100%, 300px);
  transform: translate3d(-50%, 0, 0) rotate(-1.5deg);
  transition:
    transform 700ms var(--brand-ease),
    box-shadow 700ms var(--brand-ease);
  will-change: transform;
}

.brand-home .brand-product[data-revealed='true'] .brand-product__device {
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform: translate3d(-50%, calc(-1 * var(--device-overhang)), 0) rotate(0deg);
}

.brand-home .brand-product__copy {
  position: relative;
  z-index: 5;
  align-self: center;
}

.brand-home .brand-product__copy h2 {
  max-width: 700px;
  margin-bottom: 28px;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 0.93;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.brand-home .brand-product__copy > p:not(.brand-eyebrow),
.brand-home .brand-product__facts {
  font-size: clamp(16px, 1.35vw, 19px);
}

.brand-home .brand-product__facts {
  list-style: none;
  padding: 0;
}

.brand-home .brand-product__facts li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-home .brand-product__facts li::before {
  width: 24px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--yellow);
  content: '';
}

.brand-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  align-items: start;
  gap: clamp(54px, 8vw, 130px);
  padding: clamp(130px, 13vw, 190px) 0 clamp(110px, 12vw, 170px);
  scroll-margin-top: 116px;
}

.brand-story__intro {
  position: sticky;
  top: 126px;
  align-self: start;
}

.brand-story__intro h2 {
  max-width: 500px;
  font-size: clamp(64px, 5.8vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.brand-story__intro > p:not(.brand-eyebrow) {
  max-width: 440px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.brand-story__index {
  display: grid;
  max-width: 420px;
  margin-top: 54px;
}

.brand-story__index a {
  display: grid;
  min-height: 54px;
  grid-template-columns: 44px 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition:
    color 180ms ease,
    padding-left 220ms var(--brand-ease);
}

.brand-story__index a:last-child {
  border-bottom: 1px solid var(--line);
}

.brand-story__index a:hover,
.brand-story__index a:focus-visible {
  padding-left: 8px;
  color: var(--ink);
}

.brand-story__index span,
.brand-story__copy > span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.brand-story__panels {
  display: grid;
  gap: clamp(48px, 6vw, 84px);
}

.brand-story__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 610px;
  scroll-margin-top: 120px;
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid var(--line);
  background: var(--paper);
}

.brand-story__panel--live {
  border-radius: 26px 72px 26px 26px;
  background: var(--shelf);
}

.brand-story__panel--review {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 44px;
  border-radius: 72px 26px 26px 26px;
}

.brand-story__panel--product {
  display: grid;
  min-height: 430px;
  align-content: space-between;
  gap: 70px;
  border-radius: 26px 26px 72px 26px;
  background: #f2efe6;
}

.brand-story__copy {
  position: relative;
  z-index: 2;
  max-width: 420px;
}

.brand-story__copy h3 {
  margin: 18px 0 16px;
  font-family: var(--serif);
  font-size: clamp(44px, 4.3vw, 68px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.brand-story__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.brand-story__panel--live .brand-story__copy {
  max-width: min(350px, calc(100% - min(43%, 330px) - clamp(28px, 5vw, 70px) - 12px));
}

.brand-story__screen {
  overflow: hidden;
  margin: 0;
  border: 7px solid #0a0908;
  background: #0a0908;
  box-shadow: 0 24px 48px rgba(27, 26, 23, 0.18);
}

.brand-story__screen img {
  width: 100%;
  height: auto;
}

.brand-story__screen--live {
  position: absolute;
  right: clamp(28px, 5vw, 70px);
  bottom: -270px;
  width: min(43%, 330px);
  height: 720px;
  border-radius: 50px;
  transform: rotate(2deg);
}

.brand-story__screen--live img {
  border-radius: 41px;
}

.brand-story__screen--review {
  align-self: end;
  width: 100%;
  height: auto;
  max-height: 570px;
  border-radius: 44px;
  transform: translateY(94px) rotate(-2deg);
}

.brand-story__screen--review img {
  border-radius: 35px;
}

.brand-story__product-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr auto;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.brand-story__product-row img {
  width: 100%;
  height: auto;
}

.brand-story__product-row > div {
  display: grid;
  gap: 4px;
}

.brand-story__product-row > div span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand-story__product-row strong {
  font-size: 24px;
  letter-spacing: -0.03em;
}

.brand-story__product-row > b {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--yellow);
  font-size: 11px;
  text-transform: uppercase;
}

.brand-closing {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.58fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  padding: clamp(110px, 11vw, 170px) clamp(28px, 7vw, 104px) clamp(120px, 12vw, 190px);
  border-top: 1px solid var(--line);
}

.brand-closing__copy {
  min-width: 0;
}

.brand-closing h2 {
  max-width: 900px;
  margin-bottom: 42px;
  font-size: clamp(66px, 8vw, 118px);
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.brand-closing__visual {
  display: grid;
  margin: 0;
  place-items: center;
}

.brand-closing__visual img {
  width: min(100%, 430px);
  height: auto;
  filter: drop-shadow(0 28px 26px rgba(64, 51, 20, 0.18));
  transform: rotate(1.5deg);
}

/* Gated the same way as .reveal, and for a sharper reason than no-JS support.
   This used to hang off [data-brand-ready='true'], which brand.js sets from a
   deferred script. The page therefore painted with the content visible, then
   transitioned it from opacity 1 down to 0, then back up once the observer
   fired. On a plain load first paint usually hid that pulse. Arriving through
   a cross-document view transition it did not: the new document is already
   composited and held, so the fade-out-then-in was plainly visible and read
   as the page glitching. Applying the hidden state at initial style
   resolution means there is no transition into it at all. */
@media (scripting: enabled) {
  .brand-home [data-brand-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
      opacity 650ms ease,
      transform 760ms var(--brand-ease);
  }

  .brand-home [data-brand-reveal='2'] {
    transition-delay: 90ms;
  }

  .brand-home [data-brand-reveal='3'] {
    transition-delay: 160ms;
  }

  .brand-home [data-brand-reveal='4'] {
    transition-delay: 230ms;
  }

  .brand-home [data-brand-reveal][data-visible='true'] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1120px) {
  .brand-home .brand-hero__copy {
    grid-column: 1 / span 7;
  }

  .brand-hero__visual {
    grid-column: 8 / -1;
  }

  .brand-hero__toolkit {
    width: min(120%, 660px);
  }

  .brand-story {
    grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
    gap: 58px;
  }

  .brand-story__panel--review {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 30px;
  }
}

@media (max-width: 900px) {
  .brand-home .brand-shell,
  .brand-home .brand-footer {
    width: min(100% - 36px, 720px);
  }

  .brand-home .brand-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 72px;
    padding: 86px 0 112px;
  }

  .brand-home .brand-hero__copy,
  .brand-hero__visual {
    grid-column: 1;
  }

  .brand-home .brand-hero__copy h1 {
    max-width: 700px;
    font-size: clamp(72px, 13vw, 102px);
  }

  .brand-hero__visual {
    width: min(100%, 620px);
    min-height: 520px;
    justify-self: end;
  }

  .brand-hero__toolkit {
    width: min(100%, 620px);
  }

  .brand-ledger {
    grid-template-columns: 1fr 1fr;
  }

  .brand-ledger__fact {
    min-height: 132px;
  }

  .brand-ledger__fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .brand-ledger__fact:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .brand-home .brand-product {
    --device-overhang: 245px;
    --product-padding: 54px;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 46px;
    padding: var(--product-padding) 28px;
  }

  .brand-home .brand-product__copy {
    order: 1;
  }

  .brand-home .brand-product__visual {
    order: 2;
    min-height: 340px;
  }

  .brand-home .brand-product[data-revealed='true'] .brand-product__visual {
    min-height: 600px;
  }

  .brand-home .brand-product__device {
    width: min(100%, 250px);
  }

  .brand-story {
    grid-template-columns: 1fr;
    gap: 70px;
    padding-top: 130px;
  }

  .brand-story__intro {
    position: static;
  }

  .brand-story__index {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .brand-story__index a,
  .brand-story__index a:last-child {
    display: grid;
    min-height: 86px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  .brand-story__index a:hover,
  .brand-story__index a:focus-visible {
    padding-left: 12px;
    background: var(--paper);
  }

  .brand-story__panels {
    gap: 40px;
  }

  .brand-story__panel--review {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .brand-closing {
    grid-template-columns: 1fr;
  }

  .brand-closing__visual {
    justify-items: end;
  }

  .brand-closing__visual img {
    width: min(72%, 380px);
  }

  .brand-footer {
    row-gap: 8px;
  }
}

@media (max-width: 620px) {
  /* The floating header overlaps the hero by design (it is sticky with a
     negative bottom margin), so this padding is what keeps the first line of
     copy clear of it. 52px left only 14px of daylight and the pill read as
     sitting on the eyebrow; the Timer page hero leaves 70px. 78px lands close
     to that while keeping the waitlist field above the fold. */
  .brand-home .brand-hero {
    gap: 44px;
    padding: 78px 0 76px;
  }

  /* 18vw put this at 70px on a 390px screen: four ragged lines filling only
     two thirds of the column, and it pushed the waitlist field far below the
     fold. 14vw lands near 55px, sets better, and lifts the form up a screen. */
  .brand-home .brand-hero__copy h1 {
    font-size: clamp(44px, 14vw, 76px);
    line-height: 0.94;
    letter-spacing: -0.045em;
  }

  .brand-home .brand-lede {
    margin: 20px 0 26px;
    font-size: 17px;
  }

  .brand-hero__actions {
    display: grid;
    gap: 10px;
  }

  .brand-hero__actions .button,
  .brand-closing__actions .button {
    width: 100%;
  }

  .brand-text-link {
    width: max-content;
  }

  .brand-hero__visual {
    min-height: 340px;
  }

  .brand-hero__toolkit {
    width: min(110%, 520px);
  }

  .brand-ledger {
    margin-bottom: 88px;
  }

  .brand-ledger__fact {
    min-height: 116px;
    padding: 20px 12px 20px 20px;
  }

  .brand-ledger__fact strong {
    font-size: clamp(34px, 10vw, 48px);
  }

  .brand-ledger__fact span {
    font-size: 12.5px;
  }

  .brand-home .brand-product {
    --device-overhang: 205px;
    --product-padding: 42px;
    gap: 36px;
    padding: var(--product-padding) 24px;
    border-radius: 30px;
  }

  .brand-home .brand-product__copy h2 {
    font-size: clamp(52px, 14vw, 70px);
  }

  .brand-home .brand-product__visual {
    min-height: 260px;
  }

  .brand-home .brand-product[data-revealed='true'] .brand-product__visual {
    min-height: 500px;
  }

  .brand-home .brand-product__device {
    width: min(100%, 210px);
    border-radius: 44px;
  }

  .brand-home .brand-product__device img {
    border-radius: 36px;
  }

  .brand-story {
    gap: 54px;
    padding: 100px 0 90px;
  }

  .brand-story__intro h2 {
    font-size: clamp(54px, 14vw, 72px);
  }

  .brand-story__index {
    grid-template-columns: 1fr;
  }

  .brand-story__index a,
  .brand-story__index a:last-child {
    min-height: 60px;
    grid-template-columns: 38px 1fr;
  }

  .brand-story__panel {
    min-height: 610px;
    padding: 28px;
  }

  .brand-story__panel--live,
  .brand-story__panel--review,
  .brand-story__panel--product {
    border-radius: 24px;
  }

  .brand-story__panel--review {
    display: flex;
    min-height: 700px;
    align-items: stretch;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 24px;
  }

  .brand-story__panel--product {
    min-height: 470px;
    gap: 44px;
  }

  .brand-story__copy h3 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .brand-story__screen--live {
    right: 28px;
    bottom: -245px;
    width: 56%;
    height: 620px;
  }

  .brand-story__screen--review {
    width: min(75%, 270px);
    max-height: 500px;
    margin-inline: auto;
    transform: translateY(140px) rotate(-2deg);
  }

  .brand-story__product-row {
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

  .brand-story__product-row img {
    grid-column: 1 / -1;
    width: 160px;
  }

  .brand-story__product-row > b {
    justify-self: end;
  }

  .brand-closing {
    gap: 48px;
    padding: 92px 0 112px;
  }

  .brand-closing h2 {
    font-size: clamp(58px, 16vw, 82px);
  }

  .brand-closing__actions {
    display: grid;
    gap: 12px;
  }

  .brand-closing__visual {
    justify-items: center;
  }

  .brand-closing__visual img {
    width: min(90%, 330px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-home *,
  .brand-home *::before,
  .brand-home *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }

  .brand-home [data-brand-reveal] {
    opacity: 1;
    transform: none;
  }

  .brand-hero__toolkit {
    animation: none;
    transform: rotate(-1.25deg);
  }
}

/* Cross-page view transitions. Same-origin navigations morph the floating
   header (and its yellow CTA) between pages while the page body crossfades,
   instead of a hard cut. Browsers without cross-document view transitions
   simply navigate normally; reduced-motion users never opt in. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  .site-header .button--compact {
    view-transition-name: header-cta;
  }

  ::view-transition-old(root) {
    animation: page-exit 200ms ease both;
  }

  ::view-transition-new(root) {
    animation: page-enter 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  ::view-transition-group(site-header),
  ::view-transition-group(header-cta) {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes page-exit {
  to {
    opacity: 0;
  }
}

/* Crossfade only. This used to also translate the whole page 14px, which
   stacked on top of the 26px each revealed element travels, so two separate
   vertical animations ran over the same pixels. The header morph already
   carries the sense of movement between pages. */
@keyframes page-enter {
  from {
    opacity: 0;
  }
}

/* ==========================================================================
   Waitlist
   The site had no form controls before this, so every control here is authored
   from the shared tokens: 54px control height to match .button, 99px pill
   radius, --line borders, --paper fills, and the site-wide yellow focus ring.
   Both instances sit on light surfaces (.brand-cover, .brand-closing, .hero,
   .closing), so there is no dark variant.
   ========================================================================== */

.waitlist-block {
  width: 100%;
  max-width: 560px;
}

.brand-hero__copy .waitlist-block + .brand-hero__actions {
  margin-top: 22px;
}

.brand-closing .waitlist-block {
  margin-top: 34px;
  scroll-margin-top: 108px;
}

.brand-closing .waitlist-block + .brand-closing__actions {
  margin-top: 26px;
}

.brand-closing .waitlist-block,
.closing .waitlist-block {
  max-width: 620px;
}

.closing .waitlist-block {
  margin-inline: auto;
  text-align: left;
}

.waitlist {
  display: grid;
  gap: 16px;
  margin: 0;
}

.waitlist__field {
  display: grid;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}

.waitlist__label,
.waitlist__legend {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.waitlist__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.waitlist__input {
  width: 100%;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(27, 26, 23, 0.04);
  font-family: var(--sans);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.waitlist__input::placeholder {
  color: var(--faint);
}

.waitlist__input:hover {
  border-color: #d5d1c6;
}

.waitlist__input:focus {
  border-color: var(--ink);
  outline: 3px solid rgba(255, 182, 0, 0.72);
  outline-offset: 3px;
  box-shadow: inset 0 1px 2px rgba(27, 26, 23, 0.06);
}

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

.waitlist__input:read-only {
  color: var(--muted);
  background: var(--shelf);
}

.waitlist__submit {
  flex: 0 0 auto;
  cursor: pointer;
  font-family: var(--sans);
}

.waitlist__submit:disabled {
  cursor: progress;
  opacity: 0.62;
  box-shadow: none;
  transform: none;
}

.waitlist__platform {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.waitlist__legend {
  margin-bottom: 10px;
}

.waitlist__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.waitlist__choice {
  position: relative;
  display: inline-flex;
}

.waitlist__choice input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.waitlist__choice span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  font-weight: 700;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.waitlist__choice input:hover + span {
  border-color: #d5d1c6;
  background: var(--paper);
}

.waitlist__choice input:checked + span {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}

.waitlist__choice input:focus-visible + span {
  outline: 3px solid rgba(255, 182, 0, 0.72);
  outline-offset: 3px;
}

/* Every paragraph rule below is scoped through .waitlist-block so that page
   level rules such as `.closing p` (21px, muted, 28px margins) cannot leak in. */
.waitlist-block .waitlist__hint {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.5;
}

.waitlist-block .waitlist__hint a {
  border-bottom: 1px solid rgba(122, 119, 112, 0.45);
}

.waitlist-block .waitlist__hint a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.waitlist-block .waitlist__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.waitlist-block .waitlist__error::before {
  flex: 0 0 auto;
  content: '!';
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border-radius: 50%;
  color: var(--paper);
  background: #b3261e;
  font-size: 12px;
  font-weight: 900;
}

/* Bot trap. Removed from the accessibility tree and the tab order, but still
   rendered, so automated fillers see a real field. */
.waitlist__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.waitlist-block .waitlist__announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.waitlist__done {
  display: grid;
  gap: 8px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 18px 44px -34px rgba(27, 26, 23, 0.5);
}

.waitlist-block .waitlist__done-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.waitlist-block .waitlist__done-title::before {
  flex: 0 0 auto;
  content: '✓';
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 900;
}

.waitlist-block .waitlist__done-note {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.waitlist-block .waitlist__done-note b {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.waitlist-block .waitlist__noscript {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.closing .waitlist-block {
  margin-block: 4px 6px;
}

/* The success card and error line carry explicit display values, and an author
   `display` beats the user-agent `[hidden] { display: none }` rule. Without
   this, both would render permanently. Must stay after every rule above that
   sets `display` on a togglable element. */
.waitlist-block [hidden] {
  display: none;
}

@media (max-width: 620px) {
  .waitlist-block,
  .brand-closing .waitlist-block,
  .closing .waitlist-block {
    max-width: none;
  }

  .waitlist__row {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  /* The row is a column here, so flex-basis would size the field's HEIGHT and
     stretch the input well past its 54px control height. */
  .waitlist__field {
    flex: 0 0 auto;
  }

  .waitlist__submit {
    width: 100%;
  }

  .waitlist__done {
    padding: 20px;
  }

  .waitlist-block .waitlist__done-title {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist__input,
  .waitlist__choice span,
  .waitlist__submit {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .waitlist__input,
  .waitlist__choice span {
    border-color: var(--ink);
  }

  .waitlist-block .waitlist__hint,
  .waitlist-block .waitlist__done-note {
    color: var(--ink);
  }
}

/* ==========================================================================
   Contact dialog
   Email is the only support channel here, and a bare mailto does nothing on a
   desktop without a configured mail client. contact.js upgrades every mailto
   link to open this instead: the address as selectable text, a copy button,
   and opening the mail app kept as a secondary choice.
   ========================================================================== */

.contact-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 32px 80px -40px rgba(27, 26, 23, 0.6);
}

.contact-dialog::backdrop {
  background: rgba(27, 26, 23, 0.44);
}

.contact-dialog__close-form {
  display: flex;
  justify-content: flex-end;
  margin: -10px -10px 0 0;
}

.contact-dialog__close {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: none;
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.contact-dialog__close:hover {
  color: var(--ink);
  background: var(--shelf);
}

.contact-dialog__title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.contact-dialog__lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
}

.contact-dialog__address {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bone);
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
  user-select: all;
}

.contact-dialog__subject {
  margin: 0 0 16px;
  color: var(--faint);
  font-size: 13px;
}

.contact-dialog__subject b {
  color: var(--ink);
}

.contact-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-dialog__actions .button {
  flex: 1 1 auto;
  cursor: pointer;
  font-family: var(--sans);
}

.contact-dialog__status {
  margin: 12px 0 0;
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 420px) {
  .contact-dialog {
    padding: 22px 20px 18px;
  }

  .contact-dialog__actions .button {
    flex-basis: 100%;
  }
}