/* ============================================================
   anna · website
   shared styles — extends the deck's visual system
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --ink-soft: #1a1a1a;
  --paper: #ffffff;
  --paper-warm: #fdfaf4;
  --paper-warm-2: #f6f4ef;
  --rule: #e6e4df;
  --rule-strong: #d6d2c9;
  --muted: #6b6b6b;
  --muted-2: #9a9a98;
  --accent: #C25A3D;
  --accent-soft: #e9d4cb;

  --display: 'Quicksand', system-ui, -apple-system, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --nav-h: 56px;
  --pad-x: clamp(24px, 5vw, 96px);
  --rad: 0px;
}

* { box-sizing: border-box; }
/* The hidden attribute only hides at UA-stylesheet strength; any author
   display rule on the same element silently wins. Guard it globally. */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper-warm);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--paper-warm); }

/* ============================================================
   typography
   ============================================================ */

.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow.accent { color: var(--accent); }

.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1.display { font-size: clamp(48px, 8vw, 128px); }
h2.display { font-size: clamp(36px, 5.5vw, 80px); line-height: 1.05; }
h3.display { font-size: clamp(24px, 2.5vw, 38px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
h4.display { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }

.light { color: var(--muted); font-weight: 400; }

.lede {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 60ch;
}
.body-lg {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}
.small {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.j { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ============================================================
   layout
   ============================================================ */

.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.maxw { max-width: 1480px; margin: 0 auto; }
.section { padding: clamp(80px, 12vh, 160px) var(--pad-x); position: relative; }
.section.tight { padding-top: clamp(48px, 6vh, 80px); padding-bottom: clamp(48px, 6vh, 80px); }
.section.flush { padding-top: 0; padding-bottom: 0; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ============================================================
   top navigation
   ============================================================ */

/* Full-width Apple-style nav: shell is edge-to-edge with the translucent
   backdrop and bottom hairline; nav content is centered inside. */
.nav-shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(253,250,244,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav-shell.scrolled {
  background: rgba(253,250,244,0.88);
  border-bottom-color: var(--rule-strong);
}
.nav-bar {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1480px;
  height: 52px;
  padding: 0 22px;
  margin: 0 auto;
  background: transparent;
  border: none;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: lowercase;
}
/* .nav-logo handles sizing — keep this generic rule from clobbering it */
.nav-brand-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.nav-links {
  display: flex; align-items: center;
  gap: 2px;
  margin-left: 28px;
  flex: 1;
}
.nav-links a {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 8px 12px;
  position: relative;
  transition: color 0.18s ease;
  text-transform: lowercase;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: 2px; height: 1px;
  background: var(--accent);
}

.nav-right { display: flex; align-items: center; gap: 6px; }

.lang-switch {
  position: relative;
  display: flex; align-items: center;
}
.lang-trigger {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lang-trigger:hover, .lang-trigger[aria-expanded="true"] { color: var(--ink); border-color: var(--rule); }
.lang-trigger svg { width: 10px; height: 10px; opacity: 0.6; }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-strong);
  display: flex; flex-direction: column;
  padding: 6px;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 18px 50px -20px rgba(10,10,10,0.22);
}
.lang-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.lang-menu button {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--body);
  color: var(--ink);
  text-align: left;
}
.lang-menu button:hover { background: var(--paper-warm-2); }
.lang-menu button .code {
  font-size: 11px; letter-spacing: 0.18em; color: var(--muted-2); text-transform: uppercase;
}
.lang-menu button.active { background: var(--ink); color: var(--paper-warm); }
.lang-menu button.active .code { color: rgba(253,250,244,0.7); }

/* ---- Professionals nav dropdown ---- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-drop-trigger {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--ink); padding: 8px 12px;
  position: relative; transition: color 0.18s ease;
  text-transform: lowercase;
}
.nav-drop-trigger:hover { color: var(--accent); }
.nav-drop-trigger.active { color: var(--accent); }
.nav-drop-trigger.active::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: 2px; height: 1px;
  background: var(--accent);
}
.nav-drop-trigger svg { width: 10px; height: 10px; opacity: 0.5; transition: transform 0.15s ease; }
.nav-dropdown:hover .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--paper-warm);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 18px 50px -20px rgba(10,10,10,0.22);
  z-index: 200;
}
.nav-dropdown:hover .nav-drop-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-item {
  display: block; padding: 9px 12px;
  font-size: 13px; font-family: var(--body); font-weight: 500;
  color: var(--ink); white-space: nowrap; border-radius: 6px;
  text-transform: lowercase; transition: background 0.12s ease, color 0.12s ease;
}
.nav-drop-item:hover { background: var(--paper-warm-2, #f0ebe0); color: var(--accent); }
/* mobile sub-links */
.mobile-drawer .md-sub-link {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  color: var(--muted); padding: 10px 14px 10px 28px;
  border-bottom: 1px solid var(--rule); display: block;
  text-transform: lowercase; transition: color 0.15s ease;
}
.mobile-drawer .md-sub-link:hover { color: var(--accent); }
/* Audience card grid — professionals overview */
.audience-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 80px 0;
}
.audience-card {
  background: var(--paper-warm-2, #f5f0e7);
  border: 1px solid var(--rule);
  border-radius: 16px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.audience-card-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.audience-card h2 { font-size: 22px; font-family: var(--display); font-weight: 600; line-height: 1.25; }
.audience-card p { font-size: 15px; line-height: 1.65; color: var(--muted); flex: 1; }
.audience-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  transition: gap 0.15s ease;
}
.audience-card-link:hover { gap: 10px; }
@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr; gap: 16px; padding: 48px 0; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper-warm);
  border: 1px solid var(--ink);
  border-radius: 999px; /* pill — matches the circular logo mark */
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper-warm); border-color: var(--ink); }
.btn.lg { padding: 16px 28px; font-size: 14px; }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
}
.mobile-toggle:hover { border-color: var(--rule); }
.mobile-toggle .bar {
  display: block; width: 18px; height: 1px; background: var(--ink);
  position: relative;
  transition: background 0.2s ease, transform 0.25s ease;
}
.mobile-toggle .bar::before, .mobile-toggle .bar::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ink);
  transition: top 0.2s ease, transform 0.25s ease;
}
.mobile-toggle.open .bar { background: transparent; }
.mobile-toggle.open .bar::before { top: 0; transform: rotate(45deg); }
.mobile-toggle.open .bar::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer (hamburger menu panel) — flows seamlessly below the
   full-width nav, sharing the same backdrop blur for an Apple feel. */
.mobile-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(253,250,244,0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 14px 18px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 50px -22px rgba(10,10,10,0.22);
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer .md-link {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 14px 14px;
  border-bottom: 1px solid var(--rule);
  text-transform: lowercase;
}
.mobile-drawer .md-link:last-of-type { border-bottom: 0; }
.mobile-drawer .md-link:hover { color: var(--accent); }
.mobile-drawer .md-divider { height: 1px; background: var(--rule); margin: 8px 0; }
.mobile-drawer .md-section { padding: 4px 14px 12px; }
.mobile-drawer .md-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.mobile-drawer .md-langs { display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer .md-lang {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 999px;
}
.mobile-drawer .md-lang:hover { background: var(--paper-warm-2); }
.mobile-drawer .md-lang.active { background: var(--ink); color: var(--paper-warm); }
.mobile-drawer .md-lang .md-lang-code {
  font-size: 11px; letter-spacing: 0.18em; color: var(--muted-2); text-transform: uppercase;
}
.mobile-drawer .md-lang.active .md-lang-code { color: rgba(253,250,244,0.7); }
.mobile-drawer .md-cta {
  margin: 4px 14px 6px;
  justify-content: center;
}
body.drawer-open { overflow: hidden; }
.mobile-toggle .bar::before { top: -5px; }
.mobile-toggle .bar::after { top: 5px; }

/* ============================================================
   hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper-warm);
}
.hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
  transform: scale(1.05);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 60px) var(--pad-x) clamp(48px, 7vh, 88px);
}
.hero-eyebrow {
  font-family: var(--body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(253,250,244,0.78);
  display: flex; align-items: center; gap: 16px;
}
.hero-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: rgba(253,250,244,0.5);
}
.hero-headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--paper-warm);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}
.hero-headline .accent-line { color: rgba(253,250,244,0.65); font-weight: 400; }
.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.hero-sub {
  font-family: var(--body); font-size: clamp(16px, 1.2vw, 20px);
  color: rgba(253,250,244,0.85);
  line-height: 1.5;
  max-width: 38ch;
  margin: 0;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-cta .btn { background: var(--paper-warm); color: var(--ink); border-color: var(--paper-warm); }
.hero-cta .btn:hover { background: var(--accent); color: var(--paper-warm); border-color: var(--accent); }
.hero-cta .btn.ghost {
  background: transparent; color: var(--paper-warm); border-color: rgba(253,250,244,0.4);
}
.hero-cta .btn.ghost:hover { background: var(--paper-warm); color: var(--ink); border-color: var(--paper-warm); }

.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(253,250,244,0.65);
  z-index: 3;
}
.scroll-cue .line {
  width: 1px; height: 36px; background: rgba(253,250,244,0.4);
  animation: cueDrop 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   intro / opening statement
   ============================================================ */

.statement {
  padding: clamp(120px, 18vh, 220px) var(--pad-x);
  position: relative;
}
.statement-mark {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.statement-mark .light { color: var(--muted); font-weight: 400; }
.statement-cap { margin-top: 32px; max-width: 60ch; color: var(--muted); }

/* ============================================================
   problem stats — quiet
   ============================================================ */

/* Apple-style centered composition for the 20-hour gap section */
.gap-hero {
  background: var(--paper-warm-2);
  padding: clamp(120px, 18vh, 220px) var(--pad-x);
}
.gap-hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gap-hero .eyebrow { margin-bottom: 28px; }
.gap-headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 22ch;
  margin: 0;
}
.gap-headline .light { color: var(--muted); font-weight: 400; }
.gap-lede {
  margin-top: 28px;
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.gap-figure {
  margin-top: clamp(80px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gap-figure-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(160px, 24vw, 320px);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.gap-figure-cap {
  margin-top: 24px;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  text-wrap: pretty;
}
.gap-stats-row {
  margin-top: clamp(80px, 12vh, 140px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(40px, 6vw, 96px);
  width: 100%;
  max-width: 760px;
}
.gap-stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.gap-stat-cell .v {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.gap-stat-cell .l {
  font-size: 14px;
  color: var(--muted);
  max-width: 24ch;
  line-height: 1.5;
}
.gap-stats-divider {
  width: 1px;
  background: var(--rule);
  align-self: stretch;
}
.gap-source {
  margin-top: clamp(56px, 8vh, 88px);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ============================================================
   pinned scroll — what anna does
   the "AirPods" moment
   ============================================================ */

.pin-section {
  position: relative;
  background: var(--paper-warm);
}
.pin-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding: 0 var(--pad-x);
  align-items: start;
}
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px, 12vh, 120px) 0;
}
.pin-frame {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  background: transparent;
  overflow: hidden;
}
.pin-frame .layer {
  position: absolute; inset: 0;
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pin-frame .layer.active { opacity: 1; }
.pin-frame::after { display: none; }
.pin-tag {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--paper-warm);
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid rgba(253,250,244,0.5);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
}
.pin-counter {
  position: absolute; right: 24px; top: 24px; z-index: 2;
  font-family: var(--display); font-weight: 500;
  font-size: 14px; color: var(--paper-warm);
  letter-spacing: 0.04em;
}
.pin-counter .now { font-size: 28px; line-height: 1; vertical-align: top; }

.pin-steps {
  display: flex; flex-direction: column;
  padding: clamp(24vh, 30vh, 36vh) 0;
  gap: 30vh;
}
.pin-step {
  display: flex; flex-direction: column; gap: 16px;
  scroll-snap-align: center;
}
.pin-step .num {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
}
.pin-step h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
.pin-step p {
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
  margin: 0;
}
.pin-step .quote {
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-top: 6px;
  max-width: 36ch;
  font-weight: 500;
}

/* ============================================================
   hardware reveal — placeholder device
   ============================================================ */

.hw-section {
  background: var(--ink);
  color: var(--paper-warm);
  padding: clamp(120px, 16vh, 200px) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: center;
}
.hw-text .eyebrow { color: var(--accent); }
.hw-text h2 {
  color: var(--paper-warm);
  margin-top: 16px;
}
.hw-text h2 .light { color: rgba(253,250,244,0.55); }
.hw-text .lede { color: rgba(253,250,244,0.78); margin-top: 24px; }
.hw-stats {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(253,250,244,0.18);
}
.hw-stats .s { padding: 20px 12px 0 0; border-right: 1px solid rgba(253,250,244,0.12); }
.hw-stats .s:last-child { border-right: 0; }
.hw-stats .v { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.hw-stats .l { font-size: 12px; color: rgba(253,250,244,0.6); margin-top: 4px; max-width: 18ch; }

.device-stage {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  display: grid; place-items: center;
  perspective: 1400px;
}
.device {
  position: relative;
  width: 78%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #2a2a2a, #0a0a0a 65%),
    #0a0a0a;
  box-shadow:
    inset 0 0 60px rgba(255,255,255,0.04),
    0 60px 120px -40px rgba(194,90,61,0.35),
    0 30px 80px -20px rgba(0,0,0,0.6);
  display: grid; place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.device::before {
  content: ''; position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(253,250,244,0.08);
}
.device::after {
  content: ''; position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
.device-grill {
  position: relative;
  width: 62%; height: 62%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 6px, rgba(255,255,255,0.05) 6px 6.5px);
  display: grid; place-items: center;
}
.device-ring {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: 1px solid rgba(194,90,61,0.45);
  animation: ringPulse 4s ease-in-out infinite;
}
.device-ring.r2 { inset: -10%; animation-delay: 0.6s; opacity: 0.6; }
.device-ring.r3 { inset: -18%; animation-delay: 1.2s; opacity: 0.3; }
@keyframes ringPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.2; }
  50% { transform: scale(1.04); opacity: 0.7; }
}
.device-led {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
  animation: ledBlink 2.4s ease-in-out infinite;
}
@keyframes ledBlink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.device-placeholder-tag {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(253,250,244,0.45);
  white-space: nowrap;
}

/* ============================================================
   parallax full-bleed family section
   ============================================================ */

.bleed {
  position: relative;
  min-height: 90vh;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--paper-warm);
}
.bleed-photo {
  position: absolute; inset: -10% 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.bleed-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.65) 100%);
}
.bleed-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(96px, 14vh, 160px) var(--pad-x);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: end;
  max-width: 1480px;
  margin: 0 auto;
}
.bleed-inner h2 { color: var(--paper-warm); max-width: 14ch; }
.bleed-inner h2 .light { color: rgba(253,250,244,0.65); }
.bleed-features { display: flex; flex-direction: column; gap: 14px; }
.bleed-features .item {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--paper-warm);
  padding-left: 16px;
  border-left: 2px solid var(--paper-warm);
  letter-spacing: -0.005em;
}

/* ----- Bleed interactive 2x2 grid (desktop/tablet only) -----
   Each tile shows a quadrant of family-connection.jpg via background-position
   on a 2x-scaled image. Hover darkens the tile and reveals the body + arrow. */
.bleed-grid { display: none; }

@media (min-width: 721px) {
  .bleed {
    min-height: 0;
    display: block;
    background: var(--ink);
    color: var(--paper-warm);
  }
  .bleed-photo,
  .bleed-inner { display: none !important; }
  .bleed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    max-width: 2400px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }
  .bleed-tile {
    position: relative;
    overflow: hidden;
    color: var(--paper-warm);
    background-image: url('/assets/family-connection.jpg');
    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-color: var(--ink);
    cursor: default;
    isolation: isolate;
  }
  .bleed-tile[data-pos="tl"] { background-position: 0% 0%; }
  .bleed-tile[data-pos="tr"] { background-position: 100% 0%; }
  .bleed-tile[data-pos="bl"] { background-position: 0% 100%; }
  .bleed-tile[data-pos="br"] { background-position: 100% 100%; }

  .bleed-tile::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
    transition: background 0.45s ease, opacity 0.45s ease;
    z-index: 1;
    pointer-events: none;
  }
  .bleed-tile:hover::before {
    background: rgba(10,10,10,0.55);
  }

  .bleed-tile-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(28px, 3.5vw, 56px);
    z-index: 2;
    transition: justify-content 0.4s ease;
  }
  .bleed-tile:hover .bleed-tile-content {
    justify-content: center;
  }

  .bleed-tile-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(253,250,244,0.85);
    margin: 0 0 14px 0;
    transition: color 0.3s ease;
  }
  .bleed-tile-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 16ch;
    text-wrap: balance;
  }
  .bleed-tile-body {
    margin: 18px 0 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(253,250,244,0.85);
    max-width: 38ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .bleed-tile:hover .bleed-tile-body {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   audience cards — for home care / for gov
   ============================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.audience-card {
  position: relative;
  background: var(--paper-warm);
  padding: clamp(56px, 9vh, 96px) var(--pad-x);
  display: flex; flex-direction: column;
  gap: 28px;
  min-height: 70vh;
  overflow: hidden;
  transition: background 0.4s ease;
}
.audience-card .photo {
  position: absolute; inset: 0;
  background: #0d0c0a;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.audience-card:hover .photo { opacity: 1; }
.audience-card:hover { color: var(--paper-warm); }
.audience-card .inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.audience-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  max-width: 12ch;
  margin: 0;
  text-wrap: balance;
  transition: color 0.3s ease;
}
.audience-card .ix {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
  transition: color 0.3s ease;
}
.audience-card:hover .ix { color: var(--paper-warm); }
.audience-card .ix .arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 13px;
  letter-spacing: 0.04em; text-transform: none;
}
.audience-card p {
  font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 44ch;
  transition: color 0.3s ease;
}
.audience-card:hover p { color: rgba(253,250,244,0.85); }
.audience-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.audience-card ul li {
  font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.audience-card:hover ul li { color: var(--paper-warm); border-bottom-color: rgba(253,250,244,0.18); }
.audience-card ul li:last-child { border-bottom: 0; }

/* ============================================================
   evidence / why now strip
   ============================================================ */

.evidence-grid {
  display: grid; grid-template-columns: 60px 1fr; gap: 0 32px;
}
.evidence-grid > .num { font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; }
.evidence-grid > .row { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.evidence-grid > .row:last-of-type { border-bottom: 0; }
.evidence-grid h4 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0 0 8px 0; letter-spacing: -0.01em; }
.evidence-grid p { color: var(--muted); margin: 0; max-width: 70ch; }
.evidence-grid p .em { color: var(--ink); font-weight: 500; }

/* ============================================================
   founder / signature
   ============================================================ */

.signature-section { background: var(--paper-warm-2); }
.signature {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.signature .photo {
  width: 220px; height: 260px;
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.05);
}
.signature .quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 36ch;
  margin: 0;
  text-wrap: balance;
}
.signature .meta { margin-top: 24px; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.signature .meta strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   final CTA
   ============================================================ */

.cta-section {
  background: var(--ink);
  color: var(--paper-warm);
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
}
.cta-inner { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.cta-inner h2 {
  color: var(--paper-warm);
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 500;
  font-family: var(--display);
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.cta-inner h2 .light { color: rgba(253,250,244,0.5); }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cta-row .btn { background: var(--paper-warm); color: var(--ink); border-color: var(--paper-warm); }
.cta-row .btn:hover { background: var(--accent); color: var(--paper-warm); border-color: var(--accent); }
.cta-row .btn.ghost { background: transparent; color: var(--paper-warm); border-color: rgba(253,250,244,0.4); }
.cta-row .btn.ghost:hover { background: var(--paper-warm); color: var(--ink); border-color: var(--paper-warm); }
.cta-meta {
  border-top: 1px solid rgba(253,250,244,0.18);
  padding-top: 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.cta-meta .col .l { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253,250,244,0.55); margin-bottom: 8px; }
.cta-meta .col .v { font-family: var(--display); font-size: 18px; color: var(--paper-warm); font-weight: 500; }

/* ============================================================
   footer
   ============================================================ */

footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  padding: 64px var(--pad-x) 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 56px;
}
.foot-brand .lockup {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 28px;
  letter-spacing: -0.015em; text-transform: lowercase;
}
.foot-brand p { color: var(--muted); max-width: 36ch; margin-top: 16px; font-size: 14px; }
.foot-col h5 {
  font-family: var(--body); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500;
  margin: 0 0 18px 0;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col ul a { font-size: 14px; color: var(--ink); transition: color 0.15s ease; }
.foot-col ul a:hover { color: var(--accent); }
.foot-col ul li.foot-sub a { font-size: 13px; color: var(--muted); padding-left: 10px; }
.foot-col ul li.foot-sub a:hover { color: var(--accent); }
.foot-brand .foot-social-icons { margin-top: 24px; }

.foot-social-icons {
  display: flex; gap: 10px;
}
.foot-social-icons a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.foot-social-icons a:hover {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.foot-social-icons svg { width: 16px; height: 16px; }

.foot-region {
  max-width: 1480px; margin: 0 auto;
  padding: 20px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px;
}
.foot-region-label {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  flex-shrink: 0;
}
.foot-region-links { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-region-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.foot-region-item:hover { color: var(--ink); border-color: var(--rule); }
.foot-region-item.active {
  color: var(--ink);
  border-color: var(--rule-strong);
  font-weight: 500;
}

.foot-bottom {
  max-width: 1480px; margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: var(--muted);
}
.foot-bottom .legal { display: flex; gap: 18px; }
.foot-bottom .legal a:hover { color: var(--accent); }

/* ============================================================
   FAQ (/faq/)
   ============================================================ */

.faq-section { padding: clamp(48px, 7vh, 96px) var(--pad-x); }
.faq-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }

.faq-group-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 20px;
}
.faq-list { margin: 0; padding: 0; }
.faq-item {
  border-top: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--muted-2);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  display: none;
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 68ch;
}
.faq-item.open .faq-a { display: block; }

/* ============================================================
   product form (/products/anna/)
   ============================================================ */

.product-hero .page-hero-inner { max-width: 640px; }

.product-form-section { padding: clamp(48px, 7vh, 96px) var(--pad-x); }
.product-form-wrap {
  max-width: 560px;
  margin: 0 auto;
}

/* steps */
.pf-step { display: flex; flex-direction: column; gap: 32px; }
.pf-step-title { font-family: var(--display); font-size: clamp(22px, 3vw, 28px); font-weight: 600; margin: 0; }

/* radio option cards */
.pf-options { display: flex; flex-direction: column; gap: 10px; }
.pf-option {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pf-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pf-option:hover { border-color: var(--rule-strong); background: var(--paper-warm-2); }
.pf-option:has(input:checked) { border-color: var(--ink); background: var(--paper-warm-2); }
.pf-option-label { font-weight: 500; font-size: 15px; }
.pf-option-sub { font-size: 13px; color: var(--muted); }

/* text / email / select fields */
.pf-fields { display: flex; flex-direction: column; gap: 18px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.pf-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--body); font-size: 15px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.pf-input:focus { border-color: var(--ink); }

/* nav row */
.pf-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-note { font-size: 12px; color: var(--muted-2); margin: 0; }

/* success */
.pf-success { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 64px 0; }
.pf-success-icon { font-size: 40px; color: var(--accent); }
.pf-success h2 { font-family: var(--display); font-size: 28px; font-weight: 600; margin: 0; }
.pf-success p { color: var(--muted); max-width: 36ch; margin: 0; }

/* ============================================================
   reveal animations (intersection observer driven)
   ============================================================ */

.r-up { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.r-up.in { opacity: 1; transform: none; }
.r-fade { opacity: 0; transition: opacity 1s ease; }
.r-fade.in { opacity: 1; }
.r-up.d1 { transition-delay: 0.08s; }
.r-up.d2 { transition-delay: 0.16s; }
.r-up.d3 { transition-delay: 0.24s; }
.r-up.d4 { transition-delay: 0.32s; }
.r-up.d5 { transition-delay: 0.40s; }

/* ============================================================
   sub-page hero (for-home-care, for-gov, about, contact)
   ============================================================ */

/* unified Apple-style centered hero — used on all subpages */
.page-hero {
  padding: calc(var(--nav-h) + clamp(72px, 12vh, 140px)) var(--pad-x) clamp(72px, 11vh, 130px);
  border-bottom: 0;
  text-align: center;
}

/* For Government: tighten the gap between the hero and the first feature
   section. Default is page-hero bottom + section top, which compounded to
   ~290px of empty space — too cavernous for this page. */
body[data-page="gov"] .page-hero {
  padding-bottom: clamp(40px, 5vh, 64px);
}
body[data-page="gov"] .page-hero + .section {
  padding-top: clamp(24px, 3vh, 40px);
}
.page-hero-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: 28px; }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.page-hero h1 .light { color: var(--muted); font-weight: 400; }
.page-hero .lede {
  margin-top: 28px;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  max-width: 58ch;
  color: var(--muted);
  text-wrap: pretty;
}
.hero-cta-row { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }

/* feature row */
.feature-row {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(80px, 12vh, 140px) 0;
  border-bottom: 1px solid var(--rule);
}
.feature-row:last-child { border-bottom: 0; }
.feature-row .ix {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
}
.feature-row h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 8px 0 0 0;
  max-width: 14ch; text-wrap: balance;
}
.feature-row h2 .light { color: var(--muted); font-weight: 400; }
.feature-row .body-cell { padding-top: 12px; }
.feature-row .body-cell p {
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55; color: var(--ink); margin: 0;
  max-width: 60ch;
}
.feature-row .body-cell p + p { margin-top: 16px; color: var(--muted); }
.feature-row .img {
  margin-top: 32px;
  aspect-ratio: 16/9;
  background: var(--paper-warm-2);
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--rule);
}

.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  margin-top: 48px;
}
.kpi {
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
.kpi:last-child { border-right: 0; }
.kpi .v { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 3.5vw, 48px); letter-spacing: -0.02em; }
.kpi .l { font-size: 13px; color: var(--muted); }

/* timeline-like phases */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.phase {
  border: 1px solid var(--rule);
  border-right: 0;
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.phase:last-child { border-right: 1px solid var(--rule); }
.phase.dark { background: var(--ink); color: var(--paper-warm); border-color: var(--ink); }
.phase .stage { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.phase.dark .stage { color: rgba(253,250,244,0.6); }
.phase .when { font-family: var(--display); font-weight: 600; font-size: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.phase.dark .when { border-bottom-color: rgba(253,250,244,0.18); }
.phase h4 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0; line-height: 1.2; letter-spacing: -0.005em; }
.phase p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.phase.dark p { color: rgba(253,250,244,0.78); }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--body); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 15px;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--ink);
}
.field textarea { resize: vertical; min-height: 100px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.contact-meta { font-size: 14px; color: var(--muted); }
.contact-meta .row { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.contact-meta .row:last-child { border-bottom: 0; }
.contact-meta .l { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.contact-meta .v { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 18px; }

/* about */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}
.about-photo {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.05);
}
.about-body p { color: var(--muted); margin: 0 0 16px 0; }
.about-body p strong { color: var(--ink); font-weight: 500; }
.about-body p:first-child { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; letter-spacing: -0.01em; max-width: 32ch; }

/* ============================================================
   tech grid pattern — subtle dot matrix on dark sections
   gives a quiet "engineered" feel without competing with the text
   ============================================================ */

/* CTA blocks (Home, For Home Care, For Government): always-on pattern
   with a very slow diagonal drift so it doesn't feel static. */
.cta-section {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle, rgba(253,250,244,0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  animation: techGridDrift 45s linear infinite;
  position: relative;
}
.cta-section .cta-inner { position: relative; z-index: 1; }
@keyframes techGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 28px 28px; }
}

/* Audience cards (Home: For Home Care / For Government tiles):
   pattern lives on the .photo layer that fades in on hover. */
.audience-card .photo {
  background-color: #0d0c0a;
  background-image:
    radial-gradient(circle, rgba(253,250,244,0.08) 1px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Bleed (family-connection) section gets a solid ink background on
   desktop so the grid sits on a clean dark base — no dot pattern on
   the tiles themselves, the photos read better when the hover wash
   is just a soft shade. */
@media (min-width: 721px) {
  .bleed { background-color: var(--ink); }
}

/* Respect reduced-motion: pause the drift, keep the pattern. */
@media (prefers-reduced-motion: reduce) {
  .cta-section { animation: none; }
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .mobile-toggle { display: inline-flex; margin-left: 4px; }
  .nav-bar { padding: 0 14px; position: relative; }
  .nav-brand { margin-right: auto; }
  .nav-right .lang-switch { display: none; }
  /* keep the CTA in the bar on mobile, centered between logo and menu icon */
  .nav-right .btn {
    padding: 8px 16px;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }

  .pin-track { display: block; gap: 0; }
  .pin-stage { display: none; }
  .pin-steps { padding: 24px 0 64px; gap: 64px; display: flex; flex-direction: column; }
  /* mobile/tablet: each step shows title → picture → description */
  .pin-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pin-step .num { order: 1; font-size: 11px; }
  .pin-step h3 {
    order: 2;
    font-size: clamp(28px, 6.5vw, 38px);
    line-height: 1.1;
    max-width: 16ch;
  }
  .pin-step::before {
    content: '';
    order: 3;
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--paper-warm-2);
    margin: 8px 0;
  }
  .pin-step p {
    order: 4;
    display: block;
    font-size: 15px;
    line-height: 1.55;
    max-width: 60ch;
    color: var(--muted);
  }
  .pin-step .quote {
    order: 5;
    display: block;
    font-size: 16px;
  }
  .pin-step:nth-of-type(1)::before { background-image: url('/assets/anna-job-01-checkin.jpg'); }
  .pin-step:nth-of-type(2)::before { background-image: url('/assets/anna-job-02-remind.jpg'); }
  .pin-step:nth-of-type(3)::before { background-image: url('/assets/anna-job-03-connect.jpg'); }
  .pin-step:nth-of-type(4)::before { background-image: url('/assets/anna-job-04-notice.jpg'); }
  .pin-step:nth-of-type(5)::before { background-image: url('/assets/anna-job-05-escalate.jpg'); }
  .pin-step:nth-of-type(6)::before { background-image: url('/assets/anna-job-06-report.jpg'); }

  .hw-grid { grid-template-columns: 1fr; gap: 64px; }
  .device-stage { aspect-ratio: 4/3; }

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

  .gap-hero { padding: clamp(80px, 12vh, 140px) var(--pad-x); }
  .gap-headline { font-size: clamp(34px, 8vw, 52px); }
  .gap-figure-num { font-size: clamp(140px, 36vw, 220px); }
  .gap-stats-row { flex-direction: column; gap: 32px; }
  .gap-stats-divider { width: 60%; height: 1px; align-self: center; }

  .bleed-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-meta { grid-template-columns: 1fr 1fr; gap: 20px; }

  .feature-row { grid-template-columns: 1fr; gap: 16px; padding: 64px 0; }
  .phases { grid-template-columns: 1fr 1fr; }
  .phase { border-right: 1px solid var(--rule) !important; border-bottom: 0; }
  .phases .phase:nth-child(odd) { border-right: 0 !important; }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .field-row { grid-template-columns: 1fr; }

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

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }

  .signature { grid-template-columns: 1fr; }
  .signature .photo { width: 160px; height: 200px; }

  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi { border-right: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule); }
  .kpi-strip .kpi:nth-child(even) { border-right: 0 !important; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { justify-content: center; }
  .cta-meta { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr; }
  .phase { border-right: 1px solid var(--rule) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-photo { transform: none !important; }
  .bleed-photo { transform: none !important; }
}

/* logo — icon-only mark, scales up nicely now that it's not paired with text */
.nav-logo { height: 40px; width: auto; display: block; transition: height 0.35s ease; }
.foot-logo { height: 56px; width: auto; display: block; margin-bottom: 14px; }
.nav-shell.scrolled .nav-logo { height: 34px; }

/* The first nav link "anna" carries the wordmark typography (Quicksand,
   matches the logo) so the brand reads from the menu instead of from
   the icon — desktop only, since mobile uses the hamburger. */
.nav-links a[data-nav="product"] {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: var(--ink);
}
.nav-links a[data-nav="product"]:hover { color: var(--accent); }
.nav-links a[data-nav="product"].active { color: var(--accent); }
@media (max-width: 720px) {
  .nav-logo { height: 34px; }
  .nav-shell.scrolled .nav-logo { height: 30px; }
}

/* care page — outcomes strip + buttons */
.btn.lg.dark { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn.lg.dark:hover { background: #000; }
.btn.lg.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn.lg.ghost:hover { background: rgba(0,0,0,0.04); }
.btn.lg .arrow { margin-left: 8px; }

.outcomes { padding: clamp(80px, 12vh, 140px) var(--pad-x); background: var(--paper-warm-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.outcomes-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 5vw, 80px); }
.outcome { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.outcome-num { font-family: var(--display); font-weight: 500; font-size: clamp(56px, 6.5vw, 96px); letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.outcome-label { font-size: clamp(15px, 1.05vw, 17px); color: var(--muted); max-width: 22ch; line-height: 1.45; }

@media (max-width: 720px) {
  .page-hero { padding: calc(var(--nav-h) + 72px) var(--pad-x) 72px; }
  .page-hero h1 { font-size: clamp(38px, 9vw, 56px); max-width: 16ch; }
  .page-hero .lede { font-size: 16px; max-width: 38ch; margin-top: 22px; }
  .page-hero .eyebrow { margin-bottom: 20px; }
  .hero-cta-row { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { justify-content: center; }
  .outcomes-inner { grid-template-columns: 1fr; gap: 56px; }
  .outcome-num { font-size: clamp(60px, 18vw, 96px); }
}

/* Use the portrait hero through phone and tablet widths so the full image
   remains visible before the layout has enough horizontal room for the
   desktop crop. This includes 10.1-inch landscape tablets that report as
   1280x800. */
@media (max-width: 1280px) {
  .hero-photo {
    background-image: url('/assets/anna-elderly-mobile.png') !important;
    background-position: center !important;
  }
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.78) 100%) !important;
  }
}

/* ============================================================
   IMPORTANT: this @media block lives at the very end of the file
   on purpose. Earlier in the file the desktop .hero-headline /
   .hero-inner rules appear AFTER any media block, and CSS source
   order means the later rule wins at equal specificity. Keeping
   our mobile hero layout overrides last guarantees they actually
   apply on phones.
   ============================================================ */
@media (max-width: 720px) {
  /* Mobile hero text block: keep desktop layout (eyebrow top, headline
     + subtitle anchored at the bottom via space-between). Compress the
     text and lift it well above the scroll cue. The cue sits noticeably
     higher than the viewport bottom edge so Android Chrome's viewport
     calculations (which differ from iOS Safari) don't clip it. */
  .hero-inner { padding-bottom: 170px !important; }
  /* Eyebrow: smaller and shorter so it stays on the left half and
     doesn't drift across the senior's head. */
  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    max-width: 70% !important;
  }
  .hero-eyebrow::before { width: 20px !important; }
  .hero-headline {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.025em !important;
  }
  /* Override the inline margin-top:48px on .hero-bottom in index.html. */
  .hero-bottom { margin-top: 10px !important; }
  .hero-sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-width: 32ch !important;
  }
  /* Scroll cue: bottom 64px (was 36) so Android browsers that report a
     slightly taller viewport than they actually paint (gesture bar,
     bottom URL chrome, etc.) still leave the cue fully on-screen.
     Slightly more opaque text for better contrast on any background. */
  .scroll-cue {
    bottom: 64px !important;
    color: rgba(253, 250, 244, 0.85) !important;
  }
  .scroll-cue .line { height: 24px !important; }

  /* Mobile bleed (Care continuity): stack text ABOVE the image so the
     four-panel family photo never gets crowded by the headline. */
  .bleed {
    display: flex !important;
    flex-direction: column !important;
    place-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    background: var(--paper-warm);
    color: var(--ink);
  }
  .bleed-inner {
    order: 1;
    position: relative;
    grid-template-columns: 1fr !important;
    padding: clamp(56px, 9vh, 96px) var(--pad-x) clamp(32px, 5vh, 56px);
    align-items: start;
    z-index: 2;
  }
  .bleed-inner .eyebrow { color: var(--accent) !important; }
  .bleed-inner h2 { color: var(--ink) !important; }
  .bleed-inner h2 .light { color: var(--muted) !important; }
  .bleed-photo {
    order: 2;
    background-image: url('/assets/family-connection-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;
    aspect-ratio: 4 / 9;
    height: auto;
    transform: none !important;
    flex-shrink: 0;
  }
  .bleed-photo::after { display: none !important; }

  /* Zigzag title overlays on the 4-panel mobile image. The image is
     a 4/9 stack of four square-ish panels (~25% tall each); each label
     anchors near the bottom of its panel, alternating left/right. */
  .bleed-photo-label {
    position: absolute;
    z-index: 2;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--paper-warm);
    max-width: 62%;
    text-wrap: balance;
    pointer-events: none;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
  }
  .bleed-photo-label[data-pos="tl"] { left: 6%;  bottom: calc(75% + 14px); }
  .bleed-photo-label[data-pos="tr"] { right: 6%; bottom: calc(50% + 14px); text-align: right; }
  .bleed-photo-label[data-pos="bl"] { left: 6%;  bottom: calc(25% + 14px); }
  .bleed-photo-label[data-pos="br"] { right: 6%; bottom: 18px;             text-align: right; }

  /* ============================================================
     Mobile vertical rhythm: shrink the giant section paddings so
     consecutive blocks don't pile up 200-300px gaps on phones.
     Desktop is untouched.
     ============================================================ */
  .section {
    padding-top: clamp(20px, 4vh, 40px) !important;
    padding-bottom: clamp(20px, 4vh, 40px) !important;
  }
  .section.tight {
    padding-top: clamp(16px, 3vh, 28px) !important;
    padding-bottom: clamp(16px, 3vh, 28px) !important;
  }
  .outcomes {
    padding-top: clamp(24px, 5vh, 48px) !important;
    padding-bottom: clamp(24px, 5vh, 48px) !important;
  }
  .cta-section {
    padding-top: clamp(48px, 8vh, 80px) !important;
    padding-bottom: clamp(48px, 8vh, 80px) !important;
  }
  /* gap-hero on Home has an inline padding-bottom — needs !important. */
  .gap-hero,
  .gap-hero[id="product"] {
    padding-top: clamp(32px, 6vh, 64px) !important;
    padding-bottom: clamp(12px, 2vh, 24px) !important;
  }
  .about-log {
    padding-top: clamp(24px, 5vh, 48px) !important;
    padding-bottom: clamp(24px, 5vh, 48px) !important;
  }
  .about-talk {
    padding-top: clamp(40px, 7vh, 72px) !important;
    padding-bottom: clamp(40px, 7vh, 72px) !important;
  }

  /* For Home Care feature rows on mobile: image sits BETWEEN the two
     body paragraphs. Reading order per feature becomes:
       heading → first paragraph → image → second paragraph */
  .feature-row .body-cell {
    display: flex !important;
    flex-direction: column !important;
  }
  .feature-row .body-cell p:nth-of-type(1) {
    order: 1 !important;
    margin-top: 0 !important;
  }
  .feature-row .body-cell .img {
    order: 2 !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .feature-row .body-cell p:nth-of-type(2) {
    order: 3 !important;
    margin-top: 0 !important;
  }
  .pin-steps { padding-bottom: 24px !important; }
  /* The pin-section's inner .wrap has an inline padding-top of
     clamp(80px, 12vh, 140px) — that was creating a huge gap below
     the gap-hero. Override with !important. */
  .pin-section > .wrap {
    padding-top: clamp(16px, 3vh, 32px) !important;
    padding-bottom: 12px !important;
  }
  /* Tighter page-hero bottom on mobile so subpage heroes flow into
     their first feature section without a chasm. */
  .page-hero {
    padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 72px)) !important;
    padding-bottom: clamp(16px, 3vh, 32px) !important;
  }
  /* Tighten the bleed text section paddings to match the new rhythm. */
  .bleed-inner {
    padding-top: clamp(32px, 5vh, 56px) !important;
    padding-bottom: clamp(20px, 3vh, 32px) !important;
  }
}

/* ============================================================
   country suggestion bar
   ============================================================ */

.csb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  height: 40px;
  max-height: 80px;
  overflow: hidden;
  background: var(--paper-warm-2);
  border-bottom: 1px solid var(--rule-strong);
  font-size: 13px;
  font-family: var(--body);
  color: var(--muted);
  transition: max-height 0.25s ease, padding 0.22s ease, opacity 0.2s ease;
}
.csb--out {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.csb-flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.csb-text { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.csb-text span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-go {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.csb-go:hover { text-decoration: underline; }
.csb-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-2);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.csb-x:hover { color: var(--ink); }

@media (max-width: 600px) {
  .csb {
    height: auto;
    min-height: 40px;
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .csb-go { font-size: 12px; }
}

/* ============================================================
   cookie consent banner (Consent Mode)
   ============================================================ */

body.consent-banner--open {
  padding-bottom: min(240px, 38vh);
}

#consent-banner,
.consent-banner {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.consent-banner__inner {
  pointer-events: auto;
  max-width: 1480px;
  margin: 0 auto;
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -10px 40px rgba(10, 10, 10, 0.12);
  padding: clamp(18px, 3vw, 24px) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 24px;
  align-items: center;
}

.consent-banner__copy {
  min-width: 0;
}

.consent-banner__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px 0;
}

.consent-banner__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px 0;
}

.consent-banner__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px 0;
}

.consent-banner__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-banner__text a:hover { color: var(--accent); }

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-self: center;
}

.consent-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding: 10px 18px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}

.consent-banner__btn:hover {
  background: var(--paper-warm-2);
  border-color: var(--ink);
}

.consent-banner__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
}

.consent-banner__btn[aria-pressed="true"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.foot-cookie-settings {
  font: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.foot-cookie-settings:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .consent-banner__inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .consent-banner__actions {
    justify-content: stretch;
  }
  .consent-banner__btn {
    flex: 1 1 calc(50% - 5px);
  }
}