/* Hallmark · checked: 2026-10-22 · genre: modern-minimal (inferred)
 * built: the project · redesign: polish · v2.0.0
 * scope: shared UI; existing layout, brand, artwork and content retained.
 * Full legacy gate compliance is not claimed; see .hallmark/review.json. */
/* ==========================================================================
   Vamocles — components
   header · mega menu · mobile sheet · buttons · chips · cards · theme switch ·
   device frames · forms · accordion · footer
   ========================================================================== */

/* ------------------------------------------------------------------ Icons */
vm-icon { display: inline-flex; line-height: 0; flex: none; }
.icon { flex: none; }
/* Until icons.js upgrades it, an icon reserves its drawn size, so buttons and
   labels do not widen when the glyph appears. Zero specificity: any rule that
   sizes an icon still wins. */
:where(vm-icon:not(:defined)) { inline-size: 24px; block-size: 24px; }
:where(vm-icon:not(:defined)[size="12"]) { inline-size: 12px; block-size: 12px; }
:where(vm-icon:not(:defined)[size="13"]) { inline-size: 13px; block-size: 13px; }
:where(vm-icon:not(:defined)[size="14"]) { inline-size: 14px; block-size: 14px; }
:where(vm-icon:not(:defined)[size="15"]) { inline-size: 15px; block-size: 15px; }
:where(vm-icon:not(:defined)[size="16"]) { inline-size: 16px; block-size: 16px; }
:where(vm-icon:not(:defined)[size="17"]) { inline-size: 17px; block-size: 17px; }
:where(vm-icon:not(:defined)[size="18"]) { inline-size: 18px; block-size: 18px; }
:where(vm-icon:not(:defined)[size="20"]) { inline-size: 20px; block-size: 20px; }
:where(vm-icon:not(:defined)[size="22"]) { inline-size: 22px; block-size: 22px; }
:where(vm-icon:not(:defined)[size="26"]) { inline-size: 26px; block-size: 26px; }
:where(vm-icon:not(:defined)[size="28"]) { inline-size: 28px; block-size: 28px; }
:where(vm-icon:not(:defined)[size="30"]) { inline-size: 30px; block-size: 30px; }
:where(vm-icon:not(:defined)[size="40"]) { inline-size: 40px; block-size: 40px; }
:where(vm-icon:not(:defined)[size="44"]) { inline-size: 44px; block-size: 44px; }

/* --------------------------------------------------------------- Header */
/* A stable bar. At the top of a page it is opaque paper; once the page has
   scrolled 8px it gains a hairline and a translucent, blurred surface. The blur
   switches on or off (never interpolated); colour and hairline fade over 240ms.
   An open dropdown or sheet goes back to opaque paper. No per-section tone
   changes and no change of size or shape. */
vm-header { display: contents; }
/* Before the module runs, the bar's surface is already in place, so the page
   never shifts or flashes when the header renders. */
.js vm-header:not(:defined) {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: calc(var(--header-h) + 1px);
  background: var(--paper);
}

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  pointer-events: none;
}
.hdr__shell {
  pointer-events: auto;
  position: relative;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease-soft), border-color 240ms var(--ease-soft);
}
.hdr.is-condensed:not([data-open="true"]):not(.is-menu) .hdr__shell {
  border-bottom-color: var(--line);
  background: rgb(var(--paper-rgb) / 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr.is-condensed:not([data-open="true"]):not(.is-menu) .hdr__shell { background: var(--paper); }
}
/* An open dropdown is edged by a hairline in both themes (the shadow alone
   disappears on night). */
.hdr[data-open="true"] .hdr__shell { border-bottom-color: var(--line-2); }

:is(.hdr__bar, .mnav__top) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Brand */
.hdr__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-radius: var(--r-xs);
  color: var(--ink);
}
.hdr__mark { width: 30px; height: auto; color: var(--crimson); }
.hdr__word { width: 104px; height: auto; }

/* Primary nav: hover and an open menu tint the item; the current section
   carries a short accent rule under its label. */
.hdr__nav { position: relative; justify-self: center; }
.hdr__nav ul { display: flex; align-items: center; }
.hdr__link {
  --pad: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding-inline: var(--pad);
  border-radius: var(--r-xs);
  font-size: var(--control-text-sm);
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
}
/* Hover answers a pointer that can hover only: after a tap, a control that stays on the
   page must not keep its hover colours (no lingering highlight after touch). */
.hdr__link[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); }
@media (hover: hover) { .hdr__link:hover { color: var(--ink); background: var(--paper-2); } }
.hdr__link:is([aria-current="page"], [data-current]) { color: var(--ink); }
.hdr__link:is([aria-current="page"], [data-current])::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 4px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent-text);
}
.hdr__link--menu[data-current]::after { right: calc(var(--pad) + 19px); }   /* under the label, not the chevron */
.hdr__chev { display: inline-flex; opacity: 0.7; transition: transform 240ms var(--ease-out); }
.hdr__link[aria-expanded="true"] .hdr__chev { transform: rotate(180deg); }

/* Actions */
.hdr__actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.hdr__icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--r-xs);
  color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
@media (hover: hover) { .hdr__icon-btn:hover { background: var(--paper-2); color: var(--ink); } }
.hdr__burger { display: none; }
/* Two lines that turn into a cross: transform only, 240ms */
:is(.hdr__burger, .mnav__close) span {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(50% - 0.875px);
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
}
.hdr__burger span { transition: translate 240ms var(--ease-out), rotate 240ms var(--ease-out); }
.hdr__burger span:first-child { translate: 0 -3.5px; }
.hdr__burger span:last-child { translate: 0 3.5px; }
.hdr.is-menu .hdr__burger span:first-child, .mnav__close span:first-child { translate: none; rotate: 45deg; }
.hdr.is-menu .hdr__burger span:last-child, .mnav__close span:last-child { translate: none; rotate: -45deg; }

/* Dropdown (desktop). The surface morphs from 0 to the measured height of the
   panel (site-header.js sets --mega-h) and between panels px to px; the
   panels sit in one grid cell and cross-fade with a 6px settle. */
.hdr__mega {
  height: 0;
  overflow: clip;
  box-shadow: var(--hm-shadow, 0 20px 48px -36px rgb(5 5 6 / 0.3));
  transition: height var(--t-exit) var(--ease-soft);
}
.hdr[data-open="true"] .hdr__mega { height: var(--mega-h, auto); transition: height var(--t-ui) var(--ease-out); }
.mega__inner {
  display: grid;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
}
.mega__panel {
  grid-area: 1 / 1;
  align-self: start;
  display: grid;
  gap: 32px 48px;
  align-items: start;
  padding: 32px var(--gutter) 40px;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 140ms var(--ease-soft), translate var(--t-ui) var(--ease-out), visibility 0s linear 140ms;
}
.hdr[data-open="true"][data-menu="platform"] .mega__panel--platform,
.hdr[data-open="true"][data-menu="domains"] .mega__panel--domains,
.hdr[data-open="true"][data-menu="products"] .mega__panel--products {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  translate: none;
  transition: opacity 200ms var(--ease-soft) 60ms, translate var(--t-ui) var(--ease-out) 40ms, visibility 0s;
}
.mega__panel--platform { grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) 300px; }
.mega__panel--domains, .mega__panel--products { grid-template-columns: minmax(0, 1fr) 300px; }
.mega__head {
  display: block;
  padding: 0 12px 14px;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-label);
  color: var(--ink-3);
}
a.mega__head { transition: color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { a.mega__head:hover { color: var(--ink); } }
.mega__list { display: grid; gap: 2px; }
.mega__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.mega__panel--domains .mega__list--cols, .mega__panel--products .mega__list--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border-radius: var(--r-xs);
  transition: background-color var(--t-fast) var(--ease-soft);
}
.mega__item:focus-visible { background: rgb(var(--ink-rgb) / 0.05); }
@media (hover: hover) { .mega__item:hover { background: rgb(var(--ink-rgb) / 0.05); } }
/* Navigation stays neutral: icons stand on their own, ink on hover */
.mega__icon { display: grid; flex: none; padding-top: 2px; color: var(--ink-2); transition: color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { .mega__item:hover .mega__icon { color: var(--ink); } }
.mega__text { display: grid; gap: 1px; min-width: 0; }
.mega__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.mega__desc { margin-top: 2px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-3); }
/* Maturity reads the same in every panel: the label face, sentence case, quiet ink */
.mega__status, .mega__desc--status {
  font-family: var(--font-label);
  font-size: var(--fs-badge);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-label);
  text-transform: none;
  color: var(--ink-3);
}
.mega__status { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; white-space: nowrap; vertical-align: 1px; }
.mega__desc--status { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
/* The same state glyphs as .status (tick, half circle, dotted ring) at menu size; the
   status--* class on each label supplies the glyph and the ink */
.mega__status::before, .mega__desc--status::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--status-glyph) center / contain no-repeat; mask: var(--status-glyph) center / contain no-repeat; }
@media (forced-colors: active) { .mega__status::before, .mega__desc--status::before { forced-color-adjust: none; background: CanvasText; } }
.mega__links { display: grid; gap: 2px; }
.mega__links a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
}
.mega__links a:focus-visible { color: var(--ink); background: rgb(var(--ink-rgb) / 0.05); }
@media (hover: hover) { .mega__links a:hover { color: var(--ink); background: rgb(var(--ink-rgb) / 0.05); } }
.mega__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 188px;
  padding: 22px;
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--ink);
  background: var(--paper-2);
  transition: background-color var(--t-fast) var(--ease-soft);
}
@media (hover: hover) { .mega__feature:hover { background: var(--paper-3); } }
.mega__feature-mark { position: absolute; top: 24px; right: 24px; width: 44px; color: var(--crimson); }
.mega__feature-kicker { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--tracking-label); line-height: var(--lh-label); color: var(--ink-3); }
.mega__feature-title { font-family: var(--font-sans); font-size: 1.15rem; line-height: 1.18; font-weight: 650; letter-spacing: -0.025em; }
.mega__feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }

.hdr__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgb(0 0 0 / 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-exit) var(--ease-soft);
}
:root[data-theme="dark"] .hdr__scrim { background: rgb(0 0 0 / 0.55); }
.mega-open .hdr__scrim { opacity: 1; pointer-events: auto; transition-duration: 240ms; }

/* Menu sheet (tablets and phones): a modal dialog over the whole page, with
   its own bar and close button in exactly the place of the header's. It fades
   in over 240ms while its rows rise 10px in a short stagger; it closes in a
   single 200ms fade. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  display: none;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-exit) var(--ease-soft), visibility 0s linear var(--t-exit);
}
.mnav-open .mnav { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-soft), visibility 0s; }
.mnav-open, .mnav-open body { overflow: hidden; }
.mnav__top { flex: none; grid-template-columns: 1fr auto; }
.mnav__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.mnav__list > li { border-bottom: 1px solid var(--line); }
.mnav__list > li, .mnav__foot {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0s linear var(--t-exit), translate 0s linear var(--t-exit);   /* reset once the sheet has faded */
}
.mnav-open :is(.mnav__list > li, .mnav__foot) {
  opacity: 1;
  translate: none;
  transition: opacity 260ms var(--ease-soft), translate 360ms var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 5) * 30ms + 60ms);
}
.mnav__foot { --i: 5; display: grid; gap: 16px; }
.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  cursor: pointer;
  list-style: none;
}
.mnav__link::-webkit-details-marker { display: none; }
.mnav__link .icon { color: var(--ink-4); }
.mnav__link[aria-current="page"] { color: var(--accent-text); }
.mnav__plus { display: inline-flex; color: var(--ink-4); transition: rotate 240ms var(--ease-out), color var(--t-fast) var(--ease-soft); }
.mnav__group[open] .mnav__plus { rotate: 45deg; color: var(--ink); }
.mnav__sub { display: grid; gap: 2px; padding: 0 0 16px; }
.mnav__sub a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: var(--r-xs); color: var(--ink-2); font-size: 1.05rem; font-weight: 500; transition: color var(--t-fast) var(--ease-soft); }
.mnav__sub a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .mnav__sub a:hover { color: var(--ink); } }
.mnav__sub a .icon { color: var(--ink-3); }

@media (max-width: 1100px) and (min-width: 1025px) {
  .hdr__bar { gap: 16px; padding-inline: 24px; }
  .hdr__link { --pad: 8px; }
  .hdr__word { width: 92px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .mega__panel { column-gap: 32px; }
  .mega__panel--platform { grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) 240px; }
  .mega__panel--domains, .mega__panel--products { grid-template-columns: minmax(0, 1fr) 240px; }
  .mega__list--cols { column-gap: 12px; }
}
@media (max-width: 1024px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-grid; }
  .hdr .hdr__cta { min-height: var(--control-h-sm); padding-inline: 16px; font-size: var(--control-text-sm); }
  .hdr__bar { grid-template-columns: 1fr auto; }
  .mnav { display: flex; }
}
@media (max-width: 560px) { .hdr .hdr__cta { display: none; } }
/* In print the bar heads the first page only */
@media print {
  .hdr { position: absolute; }
  .hdr__scrim, .mnav { display: none; }
}

/* -------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-ink: var(--paper);
  --btn-line: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  height: auto;
  max-width: 100%;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-text);
  font-size: var(--control-text);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-control);
  letter-spacing: var(--tracking-body);
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn :is(vm-icon, .icon) { flex-shrink: 0; }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(0.97); transition-duration: var(--t-press); }

.btn--primary { --btn-bg: var(--crimson); --btn-ink: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 8px 20px -12px rgb(10 10 12 / 0.3); }
@media (hover: hover) { .btn--primary:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: var(--crimson-600); } }   /* no sticky hover after a tap */
.btn--ink { --btn-bg: var(--ink); --btn-ink: var(--paper); }
@media (hover: hover) { .btn--ink:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: rgb(var(--ink-rgb) / 0.86); } }
.btn--secondary { --btn-bg: transparent; --btn-ink: var(--ink); --btn-line: var(--line-2); }
@media (hover: hover) { .btn--secondary:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: rgb(var(--ink-rgb) / 0.04); --btn-line: var(--ink-3); } }
.btn--glass {
  --btn-bg: rgb(255 255 255 / 0.1);
  --btn-ink: #fff;
  --btn-line: rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
@media (hover: hover) { .btn--glass:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: rgb(255 255 255 / 0.16); --btn-line: rgb(255 255 255 / 0.4); } }
.btn--white { --btn-bg: #fff; --btn-ink: var(--crimson); }
@media (hover: hover) { .btn--white:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: #EBEBEF; } }   /* a calm colour answer, like every other button */
.btn--ghost { --btn-bg: transparent; --btn-ink: var(--ink); padding-inline: 14px; }
@media (hover: hover) { .btn--ghost:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: rgb(var(--ink-rgb) / 0.06); } }
.btn--sm { min-height: var(--control-h-sm); padding: 10px 18px; font-size: var(--control-text-sm); }
.btn--lg { min-height: var(--control-h-lg); padding: 16px 28px; font-size: var(--control-text); }
.btn--block { width: 100%; }

/* Text link: the underline grows in (below); the arrow stays still */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: -0.012em;
}
.link-arrow .icon { transition: transform var(--t-med) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--ink { color: var(--ink); }

/* ------------------------------------------------------ Chips & badges */
/* Tags: plain label text. No box, border, tint or corner ticks. */
.chip {
  --tick: rgb(var(--ink-rgb) / 0.55);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--ink-2);
  white-space: nowrap;
  line-height: var(--lh-label);
}
.chip::before, .chip::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border: 0 solid var(--tick);
  pointer-events: none;
  display: none;
}
.chip::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.chip::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.chip .icon { width: 14px; height: 14px; color: currentColor; }
.chip--accent { color: var(--ink); }
.chip--solid { color: var(--ink); }
.chip--mono { font-family: var(--font-mono); }
.chip + .chip { margin-inline-start: 8px; }   /* plain labels need air between them */

/* Legacy hook — no blinking dots anywhere */
.status-dot { display: none; }

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- Cards */
.card {
  --card-pad: clamp(22px, 2.6vw, 34px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-exit) var(--ease-out), border-color var(--t-fast) var(--ease-soft);
}
.card h3, .card .h4 { color: var(--ink); }
.card p { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.55; }
a.card:hover, .card--hover:hover { border-color: var(--line-2); }
.card--flat { box-shadow: none; background: var(--paper-2); border-color: transparent; }
.card--glass { background: var(--card); border-color: var(--card-line); }
.card--crimson { background: linear-gradient(160deg, var(--crimson) 0%, var(--crimson-700) 100%); border-color: rgb(255 255 255 / 0.12); color: #fff; }
.card--crimson h3, .card--crimson p { color: #fff; }
.card--crimson p { color: rgb(255 255 255 / 0.8); }
.card--night { background: var(--night-1); border-color: var(--night-line); color: var(--night-ink); }
.card--night h3 { color: var(--night-ink); }
.card--night p { color: var(--night-ink-3); }
.card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  transition: transform var(--t-slow) var(--ease-spring), background-color var(--t-med), color var(--t-med);
}
.card:hover .card__icon { transform: none; }
.card--crimson .card__icon { color: #fff; }
.card__link { margin-top: auto; padding-top: 8px; }
.card__kicker { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--ink-3);  line-height: var(--lh-label); }

/* Check list */
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.checks li::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 4px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.surface-crimson .checks li::before, .checks--light li::before { background: #fff; }

/* ------------------------------------------------------- Theme switch */
.theme-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: calc(var(--r-xs) + 3px);
  border: 1px solid var(--line);
  background: rgb(var(--ink-rgb) / 0.04);
}
.theme-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-3);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) { .theme-seg button:hover { color: var(--ink); } }
.theme-seg button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 0 0 1px var(--line); }

/* ------------------------------------------------------ Device frames */
.iphone {
  --w: 300px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1206 / 2622;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(145deg, #3a3a3f 0%, #1b1b1f 30%, #0c0c0e 60%, #2b2b30 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08) inset,
    0 0 0 calc(var(--w) * 0.006) #0a0a0b,
    0 60px 100px -40px rgb(0 0 0 / 0.55);
  flex: none;
}
.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--w) * 0.14);
  overflow: hidden;
  background: #000;
}
.iphone__screen img { width: 100%; height: 100%; object-fit: cover; }
.iphone__screen::before { /* Dynamic Island */
  content: "";
  position: absolute;
  top: 2.1%;
  left: 50%;
  width: 31%;
  height: 3.6%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
  z-index: 2;
}
.iphone::after { /* side button glint */
  content: "";
  position: absolute;
  right: calc(var(--w) * -0.012);
  top: 28%;
  width: calc(var(--w) * 0.012);
  height: 12%;
  border-radius: 0 3px 3px 0;
  background: #2a2a2e;
}

.macbook { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; }
.macbook__lid {
  position: relative;
  aspect-ratio: 16 / 10.3;
  padding: 1.6% 1.6% 2.2%;
  border-radius: 2.4% 2.4% 0 0 / 3.6% 3.6% 0 0;
  background: linear-gradient(180deg, #2b2b30, #111114);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 50px 90px -40px rgb(0 0 0 / 0.55);
}
.macbook__screen { position: relative; width: 100%; height: 100%; border-radius: 1.2%; overflow: hidden; background: #000; }
.macbook__notch {
  position: absolute;
  top: 0; left: 50%;
  width: 14.5%;
  height: 3.9%;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: #000;
  z-index: 3;
}
.macbook__base {
  position: relative;
  height: clamp(10px, 1.6vw, 18px);
  margin: 0 -7%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #d9d9de 0%, #a9a9b0 45%, #6e6e75 100%);
  box-shadow: 0 30px 40px -20px rgb(0 0 0 / 0.45);
}
[data-theme="dark"] .macbook__base, .surface-night .macbook__base { background: linear-gradient(180deg, #4a4a52 0%, #2a2a30 50%, #141418 100%); }
.macbook__base::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 16%; height: 45%;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: rgb(0 0 0 / 0.18);
}

/* ---------------------------------------------------------------- Forms */
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-micro); color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: var(--r-xs);
  border: 1px solid var(--ink-4);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 160ms var(--ease-soft), box-shadow 200ms var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
  caret-color: var(--accent-text);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
@media (hover: hover) { .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); } }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 44px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--paper); display: grid; place-items: center; transition: background-color var(--t-fast), border-color var(--t-fast); cursor: pointer; }
.check input::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform var(--t-exit) var(--ease-out); }
.check input:checked { background: var(--crimson); border-color: var(--crimson); }
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { box-shadow: var(--focus); }

/* ------------------------------------------------------------ Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 240ms var(--ease-out), background-color var(--t-fast) var(--ease-soft);
}
.accordion details[open] summary::after { transform: rotate(45deg); background-color: var(--ink); }
@media (hover: hover) { .accordion summary:hover::after { background-color: var(--ink); } }
.accordion .accordion__body { padding: 0 56px 28px 0; color: var(--ink-3); max-width: 760px; }
.accordion .accordion__body > * + * { margin-top: 0.8em; }
/* Disclosures (FAQ and the menu sheet) open and close over 280ms. The clip
   margin keeps keyboard focus rings on the content whole. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  :is(.accordion details, .mnav__group)::details-content {
    block-size: 0;
    overflow: clip;
    overflow-clip-margin: 6px;
    transition: block-size var(--t-ui) var(--ease-out), content-visibility var(--t-ui) allow-discrete;
  }
  :is(.accordion details, .mnav__group)[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------- Footer */
vm-footer { display: block; }
.ftr { position: relative; overflow: hidden; padding-top: clamp(56px, 7vw, 104px); }

.ftr__cta { position: relative; z-index: 1; text-align: center; padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(80px, 10vw, 140px); }
.ftr__cta .eyebrow { justify-content: center; }
.ftr__headline {
  max-width: 980px;
  margin: 22px auto 0;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.ftr__actions { justify-content: center; margin-top: 40px; }
.ftr__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 48px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.ftr__tag { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.ftr__note { margin-top: 12px; max-width: 380px; font-size: var(--fs-small); color: var(--ink-3); }
.ftr__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; color: var(--ink); transition: color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { .ftr__mail:hover { color: var(--accent-text); } }
.ftr__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1200px) { .ftr__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } }
.ftr__title { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: none; color: var(--ink-2); margin-bottom: 16px;  line-height: var(--lh-label); }
.ftr__col ul { display: grid; gap: 10px; }
.ftr__col a { font-size: var(--fs-small); color: var(--ink-2); transition: color var(--t-fast); }
@media (hover: hover) { .ftr__col a:hover { color: var(--ink);  text-decoration: underline;  text-decoration-thickness: 1px;  text-underline-offset: 0.2em; } }
.ftr__lockup { position: relative; z-index: 1; margin-top: clamp(64px, 9vw, 120px); }
.ftr__lockup-art {
  width: 100%;
  aspect-ratio: 2168 / 296;
  background: var(--night-2) center 42% / cover no-repeat;
  -webkit-mask: url("../assets/brand/lockup-mask.svg") center / contain no-repeat;
  mask: url("../assets/brand/lockup-mask.svg") center / contain no-repeat;
}
/* The network film shows through the letters once the footer is near (site-footer.js),
   lifted by a flat tint so the word never breaks up into the black. */
.ftr__lockup.is-near .ftr__lockup-art {
  background-image: linear-gradient(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.22)), url("../assets/video/hero-poster-800.webp");
  background-blend-mode: screen;
}
/* Pages without the closing call to action: one hairline, not two around an empty band */
.ftr--bare { padding-top: 0; }
.ftr__base {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 28px 36px;
}
.ftr__legal { font-size: var(--fs-micro); color: var(--ink-4); max-width: 640px; }
.ftr__base-right { display: flex; align-items: center; gap: 18px; }
.ftr__status { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); color: var(--ink-3); }
.ftr .theme-seg button[aria-checked="true"] { background: var(--night-3); }
@media (max-width: 900px) {
  .ftr__main { grid-template-columns: 1fr; }
  .ftr__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
/* Five groups sit three and two here, never four and a lone one beside an empty half */
@media (min-width: 600px) and (max-width: 900px) { .ftr__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Maturity — where a capability stands today. Plain text led by a 14px glyph, the posture card's pattern:
   never a box, tint, pill or dot. The glyph's shape carries the state, so colour is never the only cue.
   <span class="status status--preview">Available in preview</span> (filled check) · status--dev "In development"
   (half-filled ring) · status--roadmap "On the roadmap" (dashed ring). Ink tokens adapt to dark and night surfaces. */
.status, .status--preview { --status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm3.03 4.72-3.75 4.5a.75.75 0 0 1-1.1.05l-1.75-1.75a.75.75 0 1 1 1.06-1.06l1.17 1.17 3.22-3.87a.75.75 0 1 1 1.15.96Z'/%3E%3C/svg%3E"); }
.status { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; min-height: 20px; font-family: var(--font-label); font-size: var(--fs-badge); font-weight: 600; letter-spacing: -0.005em; line-height: var(--lh-label); text-transform: none; white-space: nowrap; vertical-align: middle; color: var(--ink); }
.status::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-print-color-adjust: exact; print-color-adjust: exact; -webkit-mask: var(--status-glyph) center / contain no-repeat; mask: var(--status-glyph) center / contain no-repeat; }
.status--preview { color: var(--ink); }
.status--dev { --status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM8 3a5 5 0 1 1 0 10A5 5 0 0 1 8 3Zm0 1.25a3.75 3.75 0 0 0 0 7.5Z'/%3E%3C/svg%3E"); color: var(--ink-2); }
.status--roadmap { --status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='2.258 2.258'/%3E%3C/svg%3E"); color: var(--ink-3); }
@media (forced-colors: active) { .status::before { forced-color-adjust: none; background: CanvasText; } }
.surface-crimson .status { color: var(--ink); }
/* Over photographs and video (model atlas slides, the Sea hero film) the quietest ink can drop under 4.5:1 at the
   brightest pixels, so roadmap takes ink-2 there; the dashed ring still tells it apart from In development. */
:is(.mx, .sea-hero) .status--roadmap { color: var(--ink-2); }
.dom-status { margin-top: 14px; }
.dxs__what + .status { margin-top: 10px; }
.dom-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dom-status__note { font-size: var(--fs-small); color: var(--ink-3); max-width: 46ch; }
.sv-group__title + .status { margin-top: 10px; }
.pd-prod__top .status { margin-left: auto; }

/* C Signal: the Vamo mascot emblem on enterprise pages. */
.vamo-emblem { position: relative; display: grid; place-items: center; align-content: center; gap: 22px; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; border-radius: var(--r-2xl); color: var(--night-ink); background: #141416; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.1); }
.vamo-emblem__art { width: 208px; height: 208px; object-fit: contain; }
.vamo-emblem__label { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--night-ink-3); }
/* No HUD corners on the emblem: it frames a mascot, not a feed. */
.vamo-emblem .hud__corner { display: none; }

/* ---- Interaction polish ------------------------------------------------------------
   Focus: an outline follows each control's own shape (pills stay pills, cards keep their
   corners) instead of a box-shadow that forced a 6px radius on everything. */

.surface-night :focus-visible { outline-color: var(--night-ink); }
.surface-crimson :focus-visible { outline-color: #fff; }
.btn:focus-visible { outline-width: 2px; outline-offset: 4px; }
/* Disabled: quiet, not broken */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
/* Press feels physical on every clickable card, never a jump */
a.card:active, .ix-card:active, .ix-feature:active, .ab-team__card:active, .md-card a:active, .mx__tab:active, .tabs__list [role="tab"]:active { transform: scale(0.985); transition-duration: var(--t-press); }
/* Links: underline grows in rather than snapping on */
.link-arrow { position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -3px; height: 1px; background: currentColor; opacity: 0.4; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) { .link-arrow:hover::after { transform: scaleX(1); } }
/* A standalone arrow link is often a block's only call to action: its hit area is at
   least 44px tall, centred on the text, with nothing drawn and no change in layout. */
.link-arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
/* Controls that draw their own shaped focus ring keep it alone (no doubled outline) */
:where(.pl-dom__link,.ct-summary, .ct-tile, .cyfronts__link, .cyother, .ab-dom, .sc-console__acts button, .sea-index a, .sea-next__card, .pr-place, .check input, .vrule__toggle input, .inf *):focus-visible { outline: none; }

/* ==========================================================================
   Apple-grade layer — one finish across every page.
   Semibold headlines with optical tracking, quiet secondary text, borderless
   tiles, segmented controls, tabular numerals, a calmer header and footer.
   ========================================================================== */
/* Type */
h1, h2, .h1, .h2, .display { font-weight: var(--weight-heading); }
h3, .h3, h4, .h4 { font-weight: var(--weight-semibold); }
.page-hero__title, .mega, .art-title { font-weight: var(--weight-display); }
.lead { color: var(--ink-3); letter-spacing: var(--tracking-body); }
.surface-night .lead { color: rgb(235 235 245 / 0.66); }
p { hanging-punctuation: first; }
b, strong { font-weight: 600; }
.btn { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); }

/* Tiles: borderless, soft corners, no lifts — content does the work */
a.card:hover, .card--hover:hover, .card.spotlight:hover { transform: none; box-shadow: var(--card-shadow); }
.card p { line-height: 1.5; }
.card .card__kicker { font-size: var(--fs-label); line-height: var(--lh-label); }   /* kickers keep their own size inside cards */

/* Numbers: semibold, tabular */
.stat__num, [data-count] { font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* Segmented control — every .tabs__list (core.js sets --tab-i and --tab-n) */
.tabs__list { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 3px; border: 0; border-radius: 12px; background: rgb(118 118 128 / 0.12); }
.surface-night .tabs__list, :root[data-theme="dark"] .tabs__list { background: rgb(118 118 128 / 0.24); }
.tabs__list::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--tab-n, 2)); border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.08); transform: translateX(calc(var(--tab-i, 0) * 100%)); transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.2, 1); }
.surface-night .tabs__list::before { background: #F5F5F7; box-shadow: 0 3px 8px rgb(0 0 0 / 0.24), 0 1px 1px rgb(0 0 0 / 0.16); }
.tabs__list [role="tab"] { position: relative; z-index: 1; height: 32px; padding: 0 16px; border-radius: 9px; font-size: 0.8125rem; font-weight: 590; letter-spacing: -0.008em; background: none !important; box-shadow: none !important; color: var(--ink-2); }
.tabs__list [role="tab"][aria-selected="true"] { color: #0B0B0D; }
@media (max-width: 600px), (pointer: coarse) {
  .tabs__list [role="tab"] { min-height: var(--control-h-sm); height: auto; padding-block: 10px; line-height: var(--lh-control); }
  .theme-seg button { min-width: var(--control-h-sm); min-height: var(--control-h-sm); }
}


/* Footer: Apple's quiet scale */
.ftr__col a { font-size: 0.8125rem; color: var(--ink-3); letter-spacing: -0.004em; }
@media (hover: hover) { .ftr__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } }
.ftr__legal { font-size: 0.75rem; }
/* Touch layouts: each directory link is its whole 37px row (it was the 16px text alone) and
   the address is 44px tall. The rows keep their pitch and the text keeps its place: the
   list gap moves into the links, and the margins around them give the same amount back. */
@media (max-width: 900px), (pointer: coarse) {
  .ftr__nav { row-gap: 30.5px; }
  .ftr__title { margin-bottom: 11.5px; }
  .ftr__col ul { gap: 0; }
  .ftr__col a { display: block; width: fit-content; min-width: 44px; padding-block: 8.2px; }
  .ftr__mail { min-height: 44px; margin-block: 11.5px -8.5px; }
}

/* Hairlines: half-pixel on high-density screens */
@media (min-resolution: 2dppx) {
  .pz-list, .pz-list li, .md-flow, .md-flow li + li, .md-proof > div + div, .cz-grid, .cz-card, .stat + .stat, .art-toc ol, .art-byline, .art-end, .ix-card, .ix-feature { border-width: 0.5px; }
}

/* ---- Gradient discipline: colour comes from content, not decoration */
.btn--primary, .btn--primary:hover { box-shadow: none; }
.btn--white:hover { box-shadow: none; }
.bg-glow { opacity: 0.4; }                             /* heroes keep a faint depth cue only */
.surface-paper .bg-glow, :root[data-theme="light"] .page-hero:not(.surface-night):not(.surface-crimson) .bg-glow { opacity: 0.2; }
/* Icons stand on their own: no tinted squares behind them, anywhere */
:is(.card__icon, .svc__icon, .vlimits__icon, .lsum__icon, .ax-card__icon, .sc-rule__icon, .sc-term-card__icon, .vnvault__icon, .in-mon__icon, .ct-desk__icon, .pd-prod__mark, .cm-move__icon, .pz-ic) {
  width: auto !important; height: auto !important; min-width: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  place-items: start !important; justify-content: flex-start !important; color: var(--ink-2);
}
.surface-night :is(.card__icon, .svc__icon, .vlimits__icon, .lsum__icon, .ax-card__icon, .sc-rule__icon, .sc-term-card__icon, .vnvault__icon, .in-mon__icon, .ct-desk__icon, .pd-prod__mark, .cm-move__icon, .pz-ic),
.card--night :is(.card__icon), .card--crimson :is(.card__icon) { color: var(--night-ink); }
.card--crimson .card__icon, .surface-crimson :is(.card__icon, .pd-prod__mark) { color: #fff; }

.ink-gradient, .crimson-gradient { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.crimson-gradient { color: var(--accent-text); }

/* Control states stay legible and keep their dimensions. */
.btn[aria-busy="true"] { cursor: progress; }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--paper-2); }
.input:disabled:hover, .select:disabled:hover, .textarea:disabled:hover { border-color: var(--ink-4); }
.ftr__col a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Text fields: focus is a calm ink border with a soft halo. Crimson is kept for
   errors only, so a field you are typing in never looks like a mistake. */
:is(.input, .select, .textarea):focus,
:is(.input, .select, .textarea):focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgb(var(--ink-rgb) / 0.12);
}
:is(.input, .select, .textarea)[aria-invalid="true"],
:is(.input, .select, .textarea)[aria-invalid="true"]:focus,
:is(.input, .select, .textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px rgb(var(--crimson-rgb) / 0.12);
}