/* ==========================================================================
   Kaivix Labs — Apple design language
   Implements kaivix-lab-apple-design-system/project/uploads/DESIGN-apple.md
   Single accent (Action Blue), alternating full-bleed tiles, one drop-shadow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand & accent — the only interactive color in the system */
  --blue: #0066cc;
  --blue-focus: #0071e3;
  --blue-on-dark: #2997ff;

  /* Fixed surfaces */
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --tile-1: #272729;
  --tile-2: #2a2a2c;
  --tile-3: #252527;
  --black: #000000;
  --chip-translucent: rgba(210, 210, 215, 0.64);

  /* Fixed ink */
  --ink: #1d1d1f;
  --ink-80: #333333;
  --ink-48: #7a7a7a; /* doc token — disabled states only; fails AA as body text */
  --ink-secondary: #6e6e73; /* readable secondary text (AA on white and parchment) */
  --on-dark: #ffffff;
  --body-muted: #cccccc;

  /* Hairlines */
  --divider-soft: #f0f0f0;
  --hairline-fixed: #e0e0e0;

  /* Status — the only semantic color */
  --live: #34d399;

  /* The one shadow in the system: product renders resting on a surface */
  --shadow-product: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

  /* Radii */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* Spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* Containers */
  --w-grid: 1440px;
  --w-content: 1180px;
  --w-text: 980px;
  --w-prose: 740px;
  --gutter: 24px;

  /* Chrome heights */
  --nav-h: 44px;
  --subnav-h: 52px;

  /* Type — negative tracking is the signature "Apple tight" cadence.
     Values are the doc's px tracking converted to em, plus the -0.01em
     nudge the doc prescribes when substituting Inter for SF Pro. */
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --track-hero: -0.02em;
  --track-display: -0.015em;
  --track-body: -0.022em;
  --track-caption: -0.016em;
  --track-fine: -0.01em;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Theme: light (default) ---------------------------------------------- */
:root,
[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --t-ink: #1d1d1f;
  --t-muted: #6e6e73;
  --t-body: #333333;
  --hairline: #e0e0e0;
  --link: #0066cc;

  --card-bg: #ffffff;
  --card-line: #e0e0e0;
  --subnav-bg: rgba(245, 245, 247, 0.8);
  --bar-bg: rgba(245, 245, 247, 0.8);
  --bar-line: #e0e0e0;

  /* Alternating tile surfaces. Surface A is the dark band, surface B the
     light band; each carries its own ink so the pair reads in both themes. */
  --surf-a: #272729;
  --surf-a-ink: #ffffff;
  --surf-a-body: #cccccc;
  --surf-a-accent: #2997ff;
  --surf-a-card: #1d1d1f;
  --surf-a-card-ink: #ffffff;
  --surf-a-bubble: #333333;
  --surf-a-chip: #333333;
  --surf-a-fine: #98989d;

  --surf-a2: #2a2a2c;
  --surf-a2-chip: #3a3a3c;

  --surf-b: #f5f5f7;
  --surf-b-ink: #1d1d1f;
  --surf-b-body: #333333;
  --surf-b-accent: #0066cc;
  --surf-b-card: #ffffff;
  --surf-b-card-ink: #1d1d1f;
  --surf-b-bubble: #f5f5f7;
  --surf-b-chip: #ffffff;
  --surf-b-fine: #6e6e73;
}

/* --- Theme: dark --------------------------------------------------------
   The doc lists dark counterparts as a known gap. Tiles are re-pitched so
   the light/dark alternation still reads against a #272729 page. */
[data-theme="dark"] {
  --bg: #272729;
  --bg-alt: #2a2a2c;
  --t-ink: #ffffff;
  --t-muted: #cccccc;
  --t-body: #cccccc;
  --hairline: rgba(255, 255, 255, 0.14);
  --link: #2997ff;

  --card-bg: #303032;
  --card-line: rgba(255, 255, 255, 0.12);
  --subnav-bg: rgba(42, 42, 44, 0.8);
  --bar-bg: rgba(29, 29, 31, 0.82);
  --bar-line: rgba(255, 255, 255, 0.14);

  --surf-a: #1d1d1f;
  --surf-a-ink: #ffffff;
  --surf-a-body: #cccccc;
  --surf-a-accent: #2997ff;
  --surf-a-card: #2a2a2c;
  --surf-a-card-ink: #ffffff;
  --surf-a-bubble: #3a3a3c;
  --surf-a-chip: #333333;
  --surf-a-fine: #98989d;

  --surf-a2: #191919;
  --surf-a2-chip: #303032;

  --surf-b: #303032;
  --surf-b-ink: #f5f5f7;
  --surf-b-body: #cccccc;
  --surf-b-accent: #3ba3ff; /* one step brighter than Sky Blue — AA on this lighter surface */
  --surf-b-card: #1d1d1f;
  --surf-b-card-ink: #ffffff;
  --surf-b-bubble: #3a3a3c;
  --surf-b-chip: #3a3a3c;
  --surf-b-fine: #a1a1a6;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--t-ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

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

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--blue-focus); }

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

strong, b { font-weight: 600; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--canvas);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 14px;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.t-hero {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: var(--track-hero);
}
.t-display-lg {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}
.t-display-md {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-display);
}
.t-lead {
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.t-lead-airy {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
}
.t-tagline {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.01em;
}
.t-body-strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--track-body);
}
.t-body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: var(--track-body);
}
.t-dense {
  font-size: 17px;
  font-weight: 400;
  line-height: 2.41;
  letter-spacing: 0;
}
.t-caption {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
}
.t-caption-strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: var(--track-caption);
}
.t-fine {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--track-fine);
}
.t-micro {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.t-eyebrow {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted { color: var(--t-muted); }
.body-ink { color: var(--t-body); }
.fine-print { color: var(--t-muted); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-grid); margin-inline: auto; }
.wrap--content { max-width: var(--w-content); }
.wrap--text { max-width: var(--w-text); }
.wrap--prose { max-width: var(--w-prose); }

.section {
  padding: var(--s-section) var(--gutter);
}
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.center { text-align: center; }

/* Two-column tile body: copy on one side, product render on the other */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-xxl);
  align-items: center;
}
/* Flip the render to the left on desktop; copy still leads when stacked. */
.split--flip > *:last-child { order: -1; }

.grid {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--narrow { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--tight { gap: 20px; }

.stack { display: flex; flex-direction: column; }
.stack--lg { gap: var(--s-lg); }
.stack--xl { gap: var(--s-xl); }

.actions {
  display: flex;
  gap: var(--s-sm);
  flex-wrap: wrap;
  align-items: center;
}
.actions--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Full-bleed tiles — the color change IS the divider
   -------------------------------------------------------------------------- */
.tile { padding: var(--s-section) var(--gutter); }

.tile--canvas { background: var(--bg); color: var(--t-ink); }
.tile--alt { background: var(--bg-alt); color: var(--t-ink); }

.tile--a  { background: var(--surf-a);  color: var(--surf-a-ink); }
.tile--a2 { background: var(--surf-a2); color: var(--surf-a-ink); }
.tile--b  { background: var(--surf-b);  color: var(--surf-b-ink); }

/* A tile boxed inside a container rather than run full-bleed */
.tile--boxed { border-radius: var(--r-lg); padding: 40px; }
@media (max-width: 640px) { .tile--boxed { padding: 28px; } }

.tile--a .tile__eyebrow,
.tile--a2 .tile__eyebrow { color: var(--surf-a-accent); }
.tile--b .tile__eyebrow { color: var(--surf-b-accent); }

.tile--a .tile__body,
.tile--a2 .tile__body { color: var(--surf-a-body); }
.tile--b .tile__body { color: var(--surf-b-body); }

.tile--a .tile__fine,
.tile--a2 .tile__fine { color: var(--surf-a-fine); }
.tile--b .tile__fine { color: var(--surf-b-fine); }

.tile--a a:not(.btn),
.tile--a2 a:not(.btn) { color: var(--surf-a-accent); }
.tile--b a:not(.btn) { color: var(--surf-b-accent); }

.tile__eyebrow {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.tile__head { margin: 0 0 14px; }
.tile__body { margin: 0 0 var(--s-lg); }

/* --------------------------------------------------------------------------
   6. Buttons — two grammars only: blue pill, compact utility rect
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: var(--track-body);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease),
              border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }

.btn--primary {
  background: var(--blue);
  color: var(--on-dark);
}
.btn--primary:hover { background: var(--blue-focus); color: var(--on-dark); }

.btn--ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 10px 22px;
}
.btn--ghost:hover { background: rgba(0, 102, 204, 0.06); color: var(--blue); }

.tile--a .btn--ghost,
.tile--a2 .btn--ghost {
  color: var(--blue-on-dark);
  border-color: var(--blue-on-dark);
}
.tile--a .btn--ghost:hover,
.tile--a2 .btn--ghost:hover { background: rgba(41, 151, 255, 0.12); }

[data-theme="dark"] .btn--ghost { color: var(--blue-on-dark); border-color: var(--blue-on-dark); }
[data-theme="dark"] .btn--ghost:hover { background: rgba(41, 151, 255, 0.12); }

.btn--dark {
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: var(--track-caption);
  border-radius: var(--r-sm);
  padding: 8px 15px;
}
.btn--dark:hover { background: #000; color: var(--on-dark); }

.btn--pearl {
  background: var(--pearl);
  color: var(--ink-80);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: var(--track-caption);
  border: 3px solid var(--divider-soft);
  border-radius: var(--r-md);
  padding: 8px 14px;
}
.btn--pearl:hover { color: var(--ink); }

.btn--hero {
  font-size: 18px;
  font-weight: 300;
  padding: 14px 28px;
}

.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--chip-translucent);
  color: var(--ink);
  font-size: 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--icon:hover { background: rgba(210, 210, 215, 0.82); color: var(--ink); }

/* Text link with the system arrow */
.link-arrow { font-size: 17px; letter-spacing: var(--track-body); white-space: nowrap; }

/* --------------------------------------------------------------------------
   7. Global nav — true black, 44px, the only pure black on the page
   -------------------------------------------------------------------------- */
.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}
.gnav__inner {
  max-width: var(--w-grid);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
}
.gnav__logo {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  white-space: nowrap;
}
.gnav__logo:hover { color: var(--on-dark); }
.gnav__logo .dot { color: var(--blue-on-dark); }

.gnav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gnav__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--track-fine);
  color: var(--on-dark);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.gnav__link:hover { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, 0.4); }
.gnav__link[aria-current="page"] { border-bottom-color: var(--blue); }

.gnav__actions { display: flex; align-items: center; gap: var(--s-sm); }

.gnav__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(210, 210, 215, 0.28);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s var(--ease);
}
.gnav__icon-btn:hover { background: rgba(210, 210, 215, 0.45); }

.gnav__burger { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.gnav__burger span {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--on-dark);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.gnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.gnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile tray */
.gnav__tray {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 49;
  background: var(--bg);
  padding: var(--s-xl) var(--gutter) var(--s-xxl);
  overflow-y: auto;
}
.gnav__tray.is-open { display: block; }
.gnav__tray a {
  display: block;
  color: var(--t-ink);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: var(--track-display);
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.gnav__tray a:hover { color: var(--blue); }
.gnav__tray .gnav__tray-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}
.gnav__tray .gnav__tray-ctas .btn { border-bottom: 0; padding: 11px 22px; font-size: 17px; }
.gnav__tray .gnav__tray-ctas a { border-bottom: 0; }

/* --------------------------------------------------------------------------
   8. Sub-nav — frosted glass, 52px, persistent right-aligned CTA
   -------------------------------------------------------------------------- */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--subnav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  min-height: var(--subnav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.subnav__inner {
  max-width: var(--w-grid);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
}
.subnav__label {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t-ink);
}
.subnav .btn--primary { font-size: 17px; padding: 9px 20px; }

/* --------------------------------------------------------------------------
   9. Cards & containers
   -------------------------------------------------------------------------- */
/* store-utility-card: hairline, 18px radius, no shadow */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  color: var(--t-ink);
}
.card--pad-lg { padding: var(--s-xl); }
.card--flat { background: var(--bg-alt); border-color: transparent; }
.card--link { transition: border-color 0.15s var(--ease); }
.card--link:hover { border-color: var(--blue); }

.card__title { margin-bottom: var(--s-xs); }
.card__body { color: var(--t-muted); }

/* Dashed "quote pending" card — we show nothing rather than invent a quote */
.card--pending {
  background: transparent;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
}
.tile--a .card--pending,
.tile--a2 .card--pending { border-color: rgba(255, 255, 255, 0.3); }

/* Product render resting on a surface — the one shadow in the system */
.mock {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-product);
  padding: 20px;
  text-align: left;
}
.mock--light { background: var(--canvas); color: var(--ink); }
.mock--dark { background: var(--ink); color: var(--on-dark); }
.tile--a .mock,
.tile--a2 .mock { background: var(--surf-a-card); color: var(--surf-a-card-ink); }
.tile--b .mock { background: var(--surf-b-card); color: var(--surf-b-card-ink); }

.mock__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--track-caption);
  margin-bottom: 12px;
}
.mock__note { font-size: 12px; letter-spacing: var(--track-fine); color: var(--ink-secondary); }

/* Chat bubbles inside a mock */
.bubble {
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
  margin-bottom: 8px;
  max-width: 85%;
}
.bubble--in { background: var(--parchment); color: var(--ink); }
.bubble--out { background: var(--blue); color: var(--on-dark); margin-left: auto; }
.mock--dark .bubble--in { background: #333333; color: var(--on-dark); }
.tile--a .bubble--in,
.tile--a2 .bubble--in { background: var(--surf-a-bubble); color: var(--surf-a-card-ink); }
.tile--b .bubble--in { background: var(--surf-b-bubble); color: var(--surf-b-card-ink); }
.bubble:last-child { margin-bottom: 0; }

/* Live status dot */
.live-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--live);
  animation: livePulse 2s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Slot rows (scheduling mock) */
.slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-sm);
  background: var(--parchment);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: var(--track-caption);
  color: var(--ink);
}
.tile--b .slot { background: var(--surf-b-bubble); color: var(--surf-b-card-ink); }
.mock--dark .slot { background: #333333; color: var(--on-dark); }

/* Chips */
.chips { display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.chip {
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: var(--track-caption);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  background: var(--bg-alt);
  color: var(--t-ink);
}
.tile--a .chip { background: var(--surf-a-chip); color: var(--surf-a-ink); }
.tile--a2 .chip { background: var(--surf-a2-chip); color: var(--surf-a-ink); }
.tile--b .chip { background: var(--surf-b-chip); color: var(--surf-b-ink); }

/* Kicker labels above a card grid */
.kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.kicker--strong { color: var(--live); }
.kicker--limits { color: var(--blue); }
.kicker--early { color: var(--t-muted); }

/* Stat cells */
.stat__num {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}
.stat__label { font-size: 14px; letter-spacing: var(--track-caption); color: var(--t-muted); margin-top: 6px; }
.tile--a .stat__label, .tile--a2 .stat__label { color: var(--surf-a-body); }
.tile--b .stat__label { color: var(--surf-b-body); }

/* Definition rows (metric tables inside mocks and cards) */
.metrics { display: flex; flex-direction: column; }
.metrics > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  letter-spacing: var(--track-caption);
}
.metrics > div:first-child { border-top: 0; }
.metrics dt { color: var(--t-muted); }
.metrics dd { margin: 0; font-weight: 600; text-align: right; }

/* Numbered process steps */
.step__num {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
[data-theme="dark"] .step__num { color: var(--blue-on-dark); }

/* Feature list with the system checkmark */
.ticks { display: flex; flex-direction: column; gap: 8px; }
.ticks li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
  color: var(--t-body);
}
.ticks li::before {
  content: "✓";
  color: var(--blue);
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.5;
}
[data-theme="dark"] .ticks li::before { color: var(--blue-on-dark); }
.tile--a .ticks li, .tile--a2 .ticks li { color: var(--surf-a-body); }
.tile--a .ticks li::before, .tile--a2 .ticks li::before { color: var(--surf-a-accent); }

/* Dense link list (footer / utility columns) */
.dense-links { font-size: 17px; line-height: 2.41; }
.dense-links a { color: inherit; }
.dense-links a:hover { color: var(--blue); }
[data-theme="dark"] .dense-links a:hover { color: var(--blue-on-dark); }

/* Callout — a plain hairline note, no chrome */
.note {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-md);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
  color: var(--t-muted);
}

/* --------------------------------------------------------------------------
   10. Comparison table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  letter-spacing: var(--track-caption);
}
table.cmp th,
table.cmp td {
  text-align: left;
  padding: 14px var(--s-md);
  border-top: 1px solid var(--hairline);
  vertical-align: top;
}
table.cmp thead th {
  border-top: 0;
  font-weight: 600;
  color: var(--t-ink);
  white-space: nowrap;
}
table.cmp tbody th { font-weight: 400; color: var(--t-muted); }
table.cmp td { color: var(--t-body); }
table.cmp .yes { color: var(--blue); font-weight: 600; }
[data-theme="dark"] table.cmp .yes { color: var(--blue-on-dark); }
table.cmp .no { color: var(--t-muted); }

/* --------------------------------------------------------------------------
   11. FAQ accordion
   -------------------------------------------------------------------------- */
.faq__item { border-top: 1px solid var(--hairline); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
  text-align: left;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--track-body);
  color: var(--t-ink);
}
.faq__sign {
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
[data-theme="dark"] .faq__sign { color: var(--blue-on-dark); }
.faq__a {
  padding: 0 0 20px;
  margin-top: -6px;
  color: var(--t-muted);
  max-width: 62ch;
}
.faq__a[hidden] { display: none; }
.faq__group-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin: var(--s-xxl) 0 var(--s-xs);
}
.faq__group-label:first-child { margin-top: 0; }
.faq__empty { padding: var(--s-xl) 0; color: var(--t-muted); }

/* Search input — pill, matching the CTA grammar */
.search {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  padding: 0 20px;
  height: 44px;
  max-width: 420px;
  margin-inline: auto;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t-ink);
  font: inherit;
  font-size: 17px;
  letter-spacing: var(--track-body);
}
.search input::placeholder { color: var(--t-muted); }
.search svg { flex-shrink: 0; color: var(--t-muted); }

/* --------------------------------------------------------------------------
   12. Plan cards & floating sticky bar
   -------------------------------------------------------------------------- */
.plan {
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 28px;
  color: var(--t-ink);
  transition: border-color 0.15s var(--ease);
}
.plan[aria-pressed="true"] {
  border: 2px solid var(--blue-focus);
  padding: 27px;
}
.plan:hover { border-color: var(--blue); }
.plan__name { font-size: 17px; font-weight: 600; letter-spacing: var(--track-body); margin-bottom: 6px; }
.plan__price { font-size: 28px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 12px; }
.plan__blurb { font-size: 14px; letter-spacing: var(--track-caption); color: var(--t-muted); margin-bottom: 20px; }
.plan__features { font-size: 14px; line-height: 2.4; letter-spacing: var(--track-caption); color: var(--t-body); }
.plan__tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
[data-theme="dark"] .plan__tag { color: var(--blue-on-dark); }

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 12px var(--s-xl);
  border-top: 1px solid var(--bar-line);
}
.sticky-bar__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}
.sticky-bar__text { font-size: 17px; letter-spacing: var(--track-body); color: var(--t-ink); }

/* HubSpot lead form embedded at the base of the closing CTA tile. The tile
   this sits in is always the dark surface (tile--a), so the hairline and
   caption use the dark-surface tokens rather than the page theme. */
.hs-form-wrap {
  max-width: 420px;
  margin: var(--s-xxl) auto 0;
  padding-top: var(--s-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hs-form-wrap p { margin-bottom: var(--s-sm); }
.hs-form-frame { min-height: 40px; }

/* --------------------------------------------------------------------------
   13. Prose (blog articles, legal pages)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--w-prose); margin-inline: auto; }
.prose > * + * { margin-top: var(--s-lg); }
.prose h2 {
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  margin-top: var(--s-xxl);
}
.prose h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--track-body);
  margin-top: var(--s-xl);
}
.prose p { color: var(--t-body); }
.prose ul { display: flex; flex-direction: column; gap: var(--s-sm); }
.prose ul li {
  position: relative;
  padding-left: var(--s-lg);
  color: var(--t-body);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--blue);
}
[data-theme="dark"] .prose ul li::before { background: var(--blue-on-dark); }
.prose ol { counter-reset: p; display: flex; flex-direction: column; gap: var(--s-sm); }
.prose ol li { counter-increment: p; position: relative; padding-left: var(--s-xl); color: var(--t-body); }
.prose ol li::before {
  content: counter(p) ".";
  position: absolute;
  left: 0;
  color: var(--blue);
}
[data-theme="dark"] .prose ol li::before { color: var(--blue-on-dark); }

.prose blockquote {
  border-left: 2px solid var(--blue);
  padding-left: var(--s-lg);
  color: var(--t-ink);
}
[data-theme="dark"] .prose blockquote { border-left-color: var(--blue-on-dark); }

/* Pull-out box inside prose — parchment tile, no shadow */
.prose .callout {
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  color: var(--t-body);
}
.prose .callout strong { color: var(--t-ink); }

.article-meta {
  display: flex;
  gap: var(--s-md);
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: var(--track-caption);
  color: var(--t-muted);
}
.article-meta span::after { content: ""; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-alt);
  padding: var(--s-section) var(--gutter) var(--s-xxl);
  color: var(--t-body);
}
.footer__grid {
  max-width: var(--w-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-xl);
}
.footer__head {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--track-caption);
  color: var(--t-ink);
  margin-bottom: var(--s-xs);
}
.footer__legal {
  max-width: var(--w-content);
  margin: var(--s-xxl) auto 0;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: var(--track-fine);
  color: var(--t-muted);
}
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--blue); }
[data-theme="dark"] .footer__legal a:hover { color: var(--blue-on-dark); }

/* --------------------------------------------------------------------------
   15. Chat widget — Bray
   -------------------------------------------------------------------------- */
.kvx {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.kvx__panel {
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-product);
  padding: 20px;
  margin-bottom: 16px;
  display: none;
  flex-direction: column;
}
.kvx__panel.is-open { display: flex; }
[data-theme="light"] .kvx__panel {
  background: rgba(245, 245, 247, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
[data-theme="dark"] .kvx__panel {
  background: rgba(29, 29, 31, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.kvx__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.kvx__name { font-size: 14px; font-weight: 600; letter-spacing: var(--track-caption); color: var(--t-ink); }
.kvx__role { font-size: 12px; letter-spacing: var(--track-fine); color: var(--t-muted); }
.kvx__close { margin-left: auto; color: var(--t-muted); font-size: 18px; line-height: 1; padding: 4px; }
.kvx__close:hover { color: var(--t-ink); }

.kvx__log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  min-height: 120px;
  overflow-y: auto;
  margin-bottom: 12px;
  overscroll-behavior: contain;
}
.kvx__msg {
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
  max-width: 88%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kvx__msg--agent { background: var(--card-bg); color: var(--t-ink); align-self: flex-start; }
[data-theme="dark"] .kvx__msg--agent { background: #3a3a3c; }
.kvx__msg--user { background: var(--blue); color: var(--on-dark); align-self: flex-end; }
.kvx__msg a { text-decoration: underline; }
.kvx__msg--user a { color: var(--on-dark); }

.kvx__typing { display: flex; gap: 4px; align-self: flex-start; padding: 12px 14px; }
.kvx__typing span {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--t-muted);
  animation: kvxBounce 1.2s infinite;
}
.kvx__typing span:nth-child(2) { animation-delay: 0.15s; }
.kvx__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kvxBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

.kvx__fallback { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; max-width: 92%; }
.kvx__fallback a {
  font-size: 14px;
  letter-spacing: var(--track-caption);
  padding: 9px 14px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  color: var(--t-ink);
}
.kvx__fallback a:hover { border-color: var(--blue); color: var(--blue); }

.kvx__form { display: flex; gap: 8px; align-items: flex-end; }
.kvx__input {
  flex: 1;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  letter-spacing: var(--track-caption);
  color: var(--t-ink);
  resize: none;
  outline: 0;
  max-height: 96px;
  line-height: 1.4;
}
.kvx__input:focus { border-color: var(--blue); }
.kvx__input::placeholder { color: var(--t-muted); }
.kvx__send {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
}
.kvx__send:hover { background: var(--blue-focus); }
.kvx__send:disabled { opacity: 0.45; cursor: not-allowed; }

.kvx__disclaimer {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--t-muted);
  margin-top: 10px;
  text-align: center;
}

.kvx__launcher {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: rgba(210, 210, 215, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-product);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.kvx__launcher:hover { background: rgba(210, 210, 215, 1); }
.kvx__launcher:active { transform: scale(0.95); }
[data-theme="dark"] .kvx__launcher { background: rgba(90, 90, 96, 0.92); color: var(--on-dark); }
[data-theme="dark"] .kvx__launcher:hover { background: rgba(110, 110, 116, 0.95); }

/* Pages with the sticky bar need room for both it and the launcher */
body.has-sticky-bar .kvx { bottom: 88px; }

/* Desktop gets a properly-scaled panel. The 320px / 56px values above are
   sized for a phone screen (320px + the 32px gutter roughly fills a
   375–414px viewport); left alone, that same fixed size reads as an
   undersized floating toy against a 1280px+ desktop viewport instead of
   a native part of the page. Mobile (≤640px, see section 17) is untouched —
   this only fires above the same 640px boundary the rest of the file uses. */
@media (min-width: 641px) {
  .kvx__panel { width: 384px; }
  .kvx__log { max-height: 420px; }
  .kvx__launcher { width: 60px; height: 60px; font-size: 24px; }
}

/* --------------------------------------------------------------------------
   16. Hero chat mock — per-industry demo tabs
   -------------------------------------------------------------------------- */
.demo-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.demo-tab {
  font-size: 12px;
  letter-spacing: var(--track-fine);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  background: var(--parchment);
  color: var(--ink-80);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.demo-tab:hover { background: #ebebef; }
.demo-tab[aria-selected="true"] { background: var(--blue); color: var(--on-dark); }
.mock--dark .demo-tab { background: #333333; color: var(--body-muted); }
.mock--dark .demo-tab:hover { background: #3f3f42; }
.mock--dark .demo-tab[aria-selected="true"] { background: var(--blue); color: var(--on-dark); }

.demo-sender {
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.62;
  margin-bottom: 4px;
}
.demo-caption {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: var(--track-fine);
  color: var(--ink-secondary);
  border-top: 1px solid var(--divider-soft);
  padding-top: 12px;
  margin-top: 12px;
}
.mock--dark .demo-caption { border-top-color: rgba(255, 255, 255, 0.12); color: var(--body-muted); }
.demo-caption b { font-weight: 600; color: inherit; }

.demo-typing { display: flex; gap: 4px; padding: 10px 4px; }
.demo-typing span {
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-48);
  animation: kvxBounce 1.2s infinite;
}
.demo-typing span:nth-child(2) { animation-delay: 0.15s; }
.demo-typing span:nth-child(3) { animation-delay: 0.3s; }

/* --------------------------------------------------------------------------
   17. Responsive — 1440 lock, 1068, 833, 734, 640, 480
   -------------------------------------------------------------------------- */
@media (max-width: 1068px) {
  .split { gap: var(--s-xl); }
}

@media (max-width: 833px) {
  .gnav__links { display: none; }
  .gnav__burger { display: flex; }
  .subnav .subnav__label { font-size: 19px; }
  .split { grid-template-columns: 1fr; }
  .split--flip > *:last-child { order: 0; }
}

@media (max-width: 734px) {
  :root { --s-section: 56px; --gutter: 20px; }
  .footer { padding-top: var(--s-section); }
}

@media (max-width: 640px) {
  :root { --s-section: 48px; }
  .tile { padding: var(--s-section) var(--gutter); }
  .sticky-bar { padding: 10px 20px; }
  .sticky-bar__inner { gap: 12px; }
  .sticky-bar__text { font-size: 14px; letter-spacing: var(--track-caption); }
  .sticky-bar .btn { font-size: 14px; padding: 9px 16px; }
  .footer__legal { flex-direction: column; gap: 8px; }
  .kvx { right: 16px; bottom: 16px; }
  body.has-sticky-bar .kvx { bottom: 84px; }
}

@media (max-width: 480px) {
  .btn { font-size: 16px; }
  .demo-tab { padding: 6px 11px; }
  .plan { padding: 22px; }
  .plan[aria-pressed="true"] { padding: 21px; }
}

/* --------------------------------------------------------------------------
   18. Page blocks
   -------------------------------------------------------------------------- */
.hero {
  background: var(--bg);
  padding: 96px var(--gutter) var(--s-section);
  text-align: center;
}
.hero__inner { max-width: 820px; margin-inline: auto; }
.hero__eyebrow { color: var(--t-muted); margin-bottom: 20px; }
.hero__title { margin-bottom: 20px; }
.hero__lead { color: var(--t-muted); margin-bottom: 36px; }
.hero__mock { max-width: 640px; margin: 56px auto 0; }
@media (max-width: 734px) { .hero { padding-top: 64px; } .hero__mock { margin-top: 40px; } }

/* Page-header variant for interior pages: no product render, tighter */
.page-head {
  background: var(--bg);
  padding: 80px var(--gutter) var(--s-xxl);
  text-align: center;
}
.page-head__inner { max-width: 740px; margin-inline: auto; }
.page-head__eyebrow { color: var(--t-muted); margin-bottom: 16px; }
.page-head__title { margin-bottom: 16px; }
.page-head__lead { color: var(--t-muted); }

.trust {
  background: var(--bg-alt);
  padding: 18px var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust__items {
  max-width: var(--w-content);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px var(--s-xl);
}
.trust__item {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: var(--track-caption);
  color: var(--t-muted);
}

.section__head {
  max-width: 720px;
  margin: 0 auto var(--s-xxl);
  text-align: center;
}
.section__head--left { text-align: left; margin-inline: 0; }
.section__eyebrow { color: var(--t-muted); margin-bottom: 12px; }
.section__title { margin-bottom: 16px; }
.section__sub { color: var(--t-muted); }
.tile--a .section__eyebrow, .tile--a2 .section__eyebrow { color: var(--surf-a-accent); }
.tile--a .section__sub, .tile--a2 .section__sub { color: var(--surf-a-body); }
.tile--b .section__eyebrow { color: var(--surf-b-accent); }
.tile--b .section__sub { color: var(--surf-b-body); }

.tile__actions {
  display: flex;
  gap: var(--s-md);
  align-items: center;
  flex-wrap: wrap;
}

.btn--block { width: 100%; }

/* Full-width secondary action inside a product mock */
.mock__cta {
  width: 100%;
  margin-top: 14px;
  border-radius: var(--r-md);
  background: var(--parchment);
  color: var(--ink-80);
  font-size: 14px;
  letter-spacing: var(--track-caption);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s var(--ease);
}
.mock__cta:hover { background: #ebebef; color: var(--ink); }
.mock--dark .mock__cta { background: #333333; color: var(--body-muted); }
.mock--dark .mock__cta:hover { background: #3f3f42; color: var(--on-dark); }

/* Client initials mark */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--t-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--track-caption);
  flex-shrink: 0;
}
.card .avatar { background: var(--bg-alt); }

/* Tag pill on post cards and case studies */
.tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
[data-theme="dark"] .tag { color: var(--blue-on-dark); }

/* Post card */
.post { display: flex; flex-direction: column; height: 100%; }
.post__title { margin-bottom: 10px; }
.post__excerpt { color: var(--t-muted); font-size: 14px; line-height: 1.43; letter-spacing: var(--track-caption); }
.post__meta {
  margin-top: auto;
  padding-top: var(--s-md);
  font-size: 12px;
  letter-spacing: var(--track-fine);
  color: var(--t-muted);
}

/* Article header */
.article-head { background: var(--bg); padding: 64px var(--gutter) var(--s-xl); }
.article-head__inner { max-width: var(--w-prose); margin-inline: auto; }
.article-back { font-size: 14px; letter-spacing: var(--track-caption); display: inline-block; margin-bottom: var(--s-lg); }
.article-title { margin: 0 0 var(--s-md); }

/* Legal document layout */
.legal h2 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--track-body);
  margin-top: var(--s-xxl);
}
.legal p, .legal li { color: var(--t-body); }
.legal .updated { color: var(--t-muted); font-size: 14px; letter-spacing: var(--track-caption); }

/* --------------------------------------------------------------------------
   19. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .gnav, .subnav, .sticky-bar, .kvx, .gnav__tray { display: none !important; }
  body { background: #fff; color: #000; }
  .tile, .footer { background: #fff !important; color: #000 !important; }
}