:root {
  --teal-50: #E4F7F4;
  --teal-500: #0FB5A3;
  --teal-600: #0C9A8B;
  --teal-700: #087A6E;
  --teal-900: #04332E;
  --ink-900: #0B1416;
  --ink-600: #33403E;
  --slate-500: #5E6E6C;
  --line: #E1E8E6;
  --paper: #F7F9F8;
  --surface: #FFFFFF;
  --dark-copy: #D7E1DE;
  --dark-muted: #A6B8B4;
  --radius-control: 11px;
  --radius-card: 20px;
  --radius-section: 28px;
  --shadow-header: 0 12px 38px rgba(11, 20, 22, .08);
  --shadow-frame: 0 24px 70px rgba(11, 20, 22, .12);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 5px var(--teal-700);
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shell: min(1280px, calc(100vw - 48px));
  --header-height: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 148px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: var(--teal-700); }

button, input, select, textarea { font: inherit; }

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

:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--teal-500);
  color: var(--ink-900);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  transform: translateY(-160%);
}

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

.shell { width: var(--shell); margin-inline: auto; }

.section { padding-block: clamp(72px, 8vw, 120px); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--teal-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 32px;
  height: 2px;
  background: currentColor;
  content: "";
}

h1, h2, h3, p { text-wrap: pretty; }

h1, h2, h3 {
  margin-top: 0;
  color: inherit;
  font-weight: 700;
  letter-spacing: -.035em;
}

h1 {
  max-width: 1050px;
  margin-bottom: 26px;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

h1 span { color: var(--teal-700); }

h2 {
  max-width: 850px;
  margin-bottom: 24px;
  font-size: clamp(30px, 3.3vw, 42px);
  line-height: 1.08;
}

h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

p { margin-top: 0; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button--primary {
  border-color: var(--teal-500);
  background: var(--teal-500);
  color: var(--ink-900);
}

.button--primary:hover {
  border-color: var(--teal-600);
  background: var(--teal-600);
  color: var(--ink-900);
}

.button--secondary {
  border-color: color-mix(in srgb, var(--ink-900) 22%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink-900);
}

.button--secondary:hover {
  border-color: var(--teal-700);
  color: var(--teal-700);
}

/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  padding: 12px 20px 0;
  pointer-events: none;
}

.site-header__inner {
  width: min(1328px, 100%);
  min-height: 64px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 7px 10px 7px 18px;
  border: 1px solid rgba(11, 20, 22, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-header);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.brand { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.brand img { width: 112px; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.desktop-nav a, .header-resources {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.desktop-nav a:hover, .desktop-nav a.is-active {
  background: var(--teal-50);
  color: var(--teal-700);
}

.site-header__actions { display: flex; align-items: center; gap: 8px; }
.header-resources { display: none; }
.header-cta { white-space: nowrap; }

.menu-button {
  width: 48px;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
}

.menu-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-button__icon, .menu-button__icon::before, .menu-button__icon::after { width: 20px; height: 2px; display: block; background: currentColor; content: ""; }
.menu-button__icon { position: relative; }
.menu-button__icon::before { position: absolute; top: -6px; }
.menu-button__icon::after { position: absolute; top: 6px; }

.mobile-nav {
  width: min(520px, calc(100% - 40px));
  max-height: calc(100vh - 96px);
  margin: 8px 0 0 auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-header);
  overflow: auto;
  pointer-events: auto;
}

.mobile-nav:not([hidden]) { display: grid; }
.mobile-nav a:not(.button) { min-height: 48px; display: flex; align-items: center; padding: 8px 12px; border-radius: 9px; color: var(--ink-600); font-weight: 650; text-decoration: none; }
.mobile-nav a[aria-current="page"] { background: var(--teal-50); color: var(--teal-700); }

/* Hero */
.hero {
  position: relative;
  min-height: 920px;
  margin-top: calc(-1 * var(--header-height));
  padding: 184px 0 104px;
  background: linear-gradient(180deg, var(--surface), var(--paper));
  overflow: hidden;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
  opacity: .6;
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__lead {
  max-width: 790px;
  margin-bottom: 32px;
  color: var(--ink-600);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }

.trust-list {
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  list-style: none;
}

.trust-list li {
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 18px 20px 18px 34px;
  border-right: 1px solid var(--line);
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  position: relative;
}

.trust-list li::before { position: absolute; left: 10px; width: 12px; height: 12px; border: 3px solid var(--teal-500); border-radius: 50%; content: ""; }
.trust-list li:last-child { border-right: 0; }

.product-frame {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink-900) 16%, var(--line));
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-frame);
}

.product-frame__bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.product-frame__bar > span:not(.product-frame__title) { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--slate-500) 34%, var(--surface)); }
.product-frame__title { margin-left: 8px; color: var(--slate-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.product-frame img { width: 100%; height: auto; }
.product-frame--dark { border-color: rgba(255,255,255,.18); }
.hero__media { max-width: 1180px; margin-inline: auto; }

/* Intro + module navigation */
.problem { background: var(--surface); }
.problem__grid { display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.section-index { margin: 2px 0 0; color: var(--teal-700); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.problem__copy { padding-top: 42px; color: var(--ink-600); font-size: 18px; }
.problem__copy p:last-child { margin-bottom: 0; color: var(--ink-900); font-weight: 650; }

.module-nav-wrap {
  position: sticky;
  z-index: 80;
  top: 84px;
  padding: 10px 0;
  border-block: 1px solid var(--line);
  background: rgba(247, 249, 248, .94);
  backdrop-filter: blur(14px);
}

.module-nav { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.module-nav a { min-height: 44px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--ink-600); font-size: 13px; font-weight: 650; text-decoration: none; }
.module-nav a span { color: var(--slate-500); font-family: var(--font-mono); font-size: 10px; }
.module-nav a:hover, .module-nav a.is-active { background: var(--teal-50); color: var(--teal-700); }
.module-nav a.is-active span { color: var(--teal-700); }

/* Modules */
.module { background: var(--surface); scroll-margin-top: 156px; }
.module--wash { background: var(--paper); }
.module__shell { display: grid; gap: clamp(40px, 6vw, 78px); }
.module__header { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: clamp(24px, 5vw, 68px); }
.module__number { padding-top: 5px; color: var(--teal-700); font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.module__number span { color: var(--slate-500); font-size: 12px; letter-spacing: 0; }
.module__description { max-width: 710px; margin-bottom: 0; color: var(--ink-600); font-size: 19px; }
.module__body { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.45fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.module__body--media-first .feature-list { order: 2; }
.module__body--media-first .module__media { order: 1; }

.feature-list { margin: 0; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list p { margin-bottom: 0; color: var(--ink-600); font-size: 15px; }
.feature-list__number { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--teal-700); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.feature-list__highlight { margin: 0 -18px; padding-inline: 18px !important; border: 1px solid color-mix(in srgb, var(--teal-500) 42%, var(--line)) !important; border-radius: 14px; background: rgba(15,181,163,.1); }
.feature-list__highlight { border-left: 4px solid var(--teal-500) !important; }
.feature-list__highlight h3 { font-size: 24px; }

.module__footer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 32px; align-items: end; padding-top: 32px; border-top: 1px solid var(--line); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-list li { min-height: 36px; display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-600); font-family: var(--font-mono); font-size: 10px; font-weight: 650; letter-spacing: .045em; line-height: 1.2; text-transform: uppercase; }
.module__closing { margin: 0; color: var(--ink-900); font-size: 16px; font-weight: 650; }

.module--dark, .module--central { background: var(--ink-900); color: var(--surface); }
.module--dark .eyebrow, .module--central .eyebrow, .security .eyebrow { color: var(--teal-500); }
.module--dark .module__number, .module--central .module__number { color: var(--teal-500); }
.module--dark .module__number span, .module--central .module__number span { color: var(--dark-muted); }
.module--dark .module__description, .module--central .module__description,
.module--dark .feature-list p, .module--central .feature-list p { color: var(--dark-copy); }
.module--dark .feature-list li, .module--central .feature-list li, .module--dark .module__footer, .module--central .module__footer { border-color: rgba(255,255,255,.16); }
.module--dark .feature-list__number, .module--central .feature-list__number { border-color: rgba(15,181,163,.45); background: rgba(15,181,163,.12); color: var(--teal-500); }
.module--dark .feature-list__highlight { border-color: rgba(15,181,163,.55) !important; background: rgba(15,181,163,.12); }
.module--dark .tag-list li, .module--central .tag-list li { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--dark-copy); }
.module--dark .module__closing, .module--central .module__closing { color: var(--surface); }

.module--central { padding-block: clamp(96px, 11vw, 160px); }
.central-stage { position: relative; padding: clamp(18px, 3vw, 40px); border: 1px solid rgba(15,181,163,.28); border-radius: var(--radius-section); background: radial-gradient(circle at 50% 0%, rgba(15,181,163,.14), transparent 45%); }
.central-stage__path { height: 48px; display: flex; align-items: center; justify-content: space-between; margin: 0 12% 18px; position: relative; }
.central-stage__path::before { position: absolute; right: 0; left: 0; height: 1px; background: var(--teal-500); content: ""; }
.central-stage__path span { z-index: 1; width: 14px; height: 14px; border: 3px solid var(--ink-900); border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 1px var(--teal-500); }
.feature-list--three-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature-list--three-column li { grid-template-columns: 42px 1fr; border-bottom: 1px solid rgba(255,255,255,.16); }

/* Security / audience / differences */
.security { background: var(--ink-900); color: var(--surface); }
.section-heading { margin-bottom: clamp(40px, 6vw, 72px); }
.section-heading h2 { margin-bottom: 0; }
.section-heading--light { color: var(--surface); }
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-card); overflow: hidden; }
.security-grid article { min-height: 280px; padding: 30px; border-right: 1px solid rgba(255,255,255,.16); }
.security-grid article:last-child { border-right: 0; }
.security-grid h3 { margin-top: 54px; }
.security-grid p { margin: 0; color: var(--dark-copy); font-size: 15px; }
.line-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--teal-500); border-radius: 9px; color: var(--teal-500); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

.audience { background: var(--paper); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.audience-grid article { padding: 40px 32px; border-right: 1px solid var(--line); }
.audience-grid article:first-child { padding-left: 0; }
.audience-grid article:last-child { padding-right: 0; border-right: 0; }
.audience-grid article > span, .difference-list article > span { color: var(--teal-700); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.audience-grid h3 { margin-top: 42px; font-size: 24px; }
.audience-grid p { margin-bottom: 0; color: var(--ink-600); }

.difference { background: var(--surface); }
.difference__grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(48px, 9vw, 140px); }
.difference-list { border-top: 1px solid var(--line); }
.difference-list article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.difference-list p { margin: 0; color: var(--ink-600); }

/* Walkthrough */
.walkthrough { background: var(--teal-50); }
.walkthrough__grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(420px, 1.16fr); gap: clamp(48px, 9vw, 132px); align-items: start; }
.walkthrough__copy > p:not(.eyebrow):not(.walkthrough__note) { max-width: 570px; color: var(--ink-600); font-size: 18px; }
.walkthrough__note { margin: 36px 0 0; color: var(--teal-700); font-weight: 700; }
.calendly-panel {
  min-width: 0;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid color-mix(in srgb, var(--teal-700) 20%, var(--line));
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(11, 20, 22, .08);
}

.calendly-panel__icon {
  width: 88px;
  height: 88px;
  padding: 12px;
  border-radius: 20px;
  background: var(--teal-50);
  color: var(--teal-700);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.calendly-panel .button { min-width: min(100%, 220px); }

/* Footer */
.site-footer { padding: 48px 0; background: var(--ink-900); color: var(--dark-copy); }
.site-footer__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 42px; align-items: center; }
.site-footer__brand { display: inline-flex; border-radius: 8px; }
.site-footer__brand img { width: 112px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--dark-copy); font-size: 14px; font-weight: 600; text-decoration: none; }
.site-footer nav a:hover { color: var(--teal-500); }
.site-footer p { max-width: 280px; margin: 0; color: var(--dark-muted); font-size: 13px; text-align: right; }

@media (max-width: 1120px) {
  .desktop-nav { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__actions { grid-column: 3; }
  .header-resources { display: inline-flex; }
  .menu-button { display: inline-flex; }
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-list li:nth-child(2) { border-right: 0; }
  .trust-list li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .security-grid article:nth-child(2) { border-right: 0; }
  .security-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 40px, 760px); }
  .hero { min-height: 0; padding-top: 166px; }
  .problem__grid { grid-template-columns: 48px 1fr; }
  .problem__copy { grid-column: 2; padding-top: 0; }
  .module__header { grid-template-columns: 88px 1fr; }
  .module__body, .module__body--media-first { grid-template-columns: 1fr; }
  .module__body--media-first .feature-list, .module__body--media-first .module__media { order: initial; }
  .module__body--media-first .module__media { order: 2; }
  .module__footer { grid-template-columns: 1fr; align-items: start; }
  .feature-list--three-column { grid-template-columns: 1fr; gap: 0; }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-grid article, .audience-grid article:first-child, .audience-grid article:last-child { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .audience-grid article:last-child { border-bottom: 0; }
  .audience-grid h3 { margin-top: 24px; }
  .difference__grid { grid-template-columns: 1fr; }
  .walkthrough__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; justify-items: start; }
  .site-footer nav { justify-content: flex-start; }
  .site-footer p { text-align: left; }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 32px); --header-height: 68px; }
  html { scroll-padding-top: 132px; }
  .site-header { padding: 8px 8px 0; }
  .site-header__inner { min-height: 60px; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 15px; }
  .brand img { width: 92px; }
  .header-resources { padding-inline: 8px; font-size: 13px; }
  .header-cta { display: none; }
  .mobile-nav { width: calc(100% - 16px); margin-inline: auto; }
  .hero { padding-top: 144px; padding-bottom: 72px; }
  .grid-overlay { background-size: 44px 44px; }
  h1 { font-size: clamp(39px, 12vw, 56px); }
  h2 { font-size: clamp(30px, 9.5vw, 40px); }
  .hero__lead { font-size: 18px; }
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-list li { min-height: 68px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-list li:nth-child(2) { border-right: 0; }
  .trust-list li:last-child { border-bottom: 0; }
  .product-frame { border-radius: 14px; }
  .product-frame__bar { height: 34px; }
  .problem__grid { grid-template-columns: 1fr; gap: 18px; }
  .problem__copy { grid-column: 1; }
  .section-index { display: none; }
  .module-nav-wrap { top: 76px; }
  .module { scroll-margin-top: 138px; }
  .module__header { grid-template-columns: 1fr; gap: 16px; }
  .module__number { font-size: 20px; }
  .module__description { font-size: 17px; }
  .feature-list li { grid-template-columns: 36px 1fr; gap: 12px; }
  .feature-list__highlight { margin-inline: -8px; padding-inline: 8px !important; }
  .central-stage { padding: 12px; border-radius: 18px; }
  .central-stage__path { display: none; }
  .security-grid { grid-template-columns: 1fr; }
  .security-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .security-grid article:last-child { border-bottom: 0; }
  .security-grid h3 { margin-top: 32px; }
  .calendly-panel { min-height: 300px; }
}

@media (max-width: 390px) {
  .header-resources { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .menu-button { grid-column: 3; }
  .mobile-nav a[href*="resources"] { display: flex; }
  .module-nav { width: calc(100% - 16px); }
}

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