/* home/base.css: the shared motion, glass and press system of index.html. Owned by base.
   Every section builds on these tokens and classes and never restyles them.
   The manual for section agents is home-100x/reports/base.md.

   SHAPE RULE (same as consultation.html, so the site reads as one product)
     Pressed things are pills (.h-btn), a lone icon is a circle (.h-btn--icon).
     Things you fill in or pick: 12px (--h-r-ctl). Things that hold content:
     18px (--h-r-box). Small marks: 6px (--h-r-mark). Nested corners are
     concentric: inner radius = outer radius minus the gap.

   MOTION RULE
     Every movement answers the visitor (a scroll, a point, a press) or marks
     the one arrival at the top. Nothing loops. One curve per job:
       --h-ease         apple.com content curve: fades, rises, blur settling
       --h-ease-out     feedback: hover, colour, an arrow nudging
       --h-ease-std     menus opening, things leaving
       --h-ease-sheet   anything that travels or resizes: heights, panels
       --h-spring       a restrained spring for a press releasing, a toggle
                        landing. Small controls only, never a big surface.
     Content arrives with a short rise and a blur settling to sharp, things
     that arrive together come in page order 70ms apart, state changes cross
     fade while the container's height glides. Reduced motion: instant.

   GLASS RULE
     Glass is the control layer that floats over content (nav, play and
     carousel controls over imagery, sheets). Never body text, cards or whole
     sections, never over flat white. Refraction is budgeted in base.js. */

/* Kept from the old inline style: the delay utilities (now a no op for the
   homepage arrival, which staggers by itself) and the small dot lists. */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
.pv-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; }
.pv-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.88rem; color: var(--text-2); line-height: 1.7; font-family: var(--sans); }
.pv-list__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 0.52rem; }
.pv-list--dark li { color: rgba(255, 255, 255, 0.55); }
.pv-list--dark .pv-list__dot { background: var(--teal); }

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
@property --h-p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --h-shine { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  /* Curves */
  --h-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --h-ease-out: cubic-bezier(0, 0, 0.5, 1);
  --h-ease-std: cubic-bezier(0.4, 0, 0.6, 1);
  --h-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* Springs. Fallbacks first: a var() that resolves to an unsupported
     linear() would not fall back, so the real springs swap in below. */
  --h-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --h-spring-dur: 500ms;
  --h-spring-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --h-spring-smooth-dur: 600ms;

  /* Time */
  --h-t-press: 120ms;
  --h-t-quick: 200ms;
  --h-t: 320ms;
  --h-t-content: 500ms;
  --h-t-sheet: 600ms;
  --h-t-arrive: 900ms;
  --h-t-focus: 700ms;
  --h-step: 70ms;
  --h-step-ui: 30ms;
  --h-rise: 18px;
  --h-blur: 8px;

  /* Shape */
  --h-r-pill: 999px;
  --h-r-ctl: 12px;
  --h-r-box: 18px;
  --h-r-mark: 6px;

  /* Material: a hairline ring and a top light make a white surface read as
     a sheet; shadows are layered (contact plus ambient) and navy tinted. */
  --h-hairline: 0 0 0 1px rgba(11, 15, 46, 0.07);
  --h-hairline-2: 0 0 0 1px rgba(11, 15, 46, 0.13);
  --h-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --h-shadow-1: 0 1px 2px rgba(11, 15, 46, 0.05), 0 3px 10px -2px rgba(11, 15, 46, 0.07);
  --h-shadow-2: 0 2px 6px rgba(11, 15, 46, 0.05), 0 14px 34px -10px rgba(11, 15, 46, 0.16);
  --h-shadow-3: 0 4px 12px rgba(11, 15, 46, 0.06), 0 34px 80px -24px rgba(11, 15, 46, 0.3);
  --h-tint-1: rgba(11, 15, 46, 0.055);
  --h-tint-2: rgba(11, 15, 46, 0.09);
  --h-tint-3: rgba(11, 15, 46, 0.13);
  /* Navy lifted and pressed: the same two values global.css gives the site
     pills (--cx-ink-2, --cx-ink-3), so every navy button moves alike. */
  --h-ink-2: #1A1F52;
  --h-ink-3: #05071C;
  /* One focus colour: 4.1:1 on white, 4.6:1 on navy. */
  --h-focus: var(--teal-2);

  /* Glass. Light: Apple's regular material. Dark: the same over dark
     imagery and the navy sections. Liquid: the refracting version (thinner,
     since the lens itself does the work). Solid: no transparency at all. */
  --h-glass-tint: rgba(255, 255, 255, 0.72);
  --h-glass-tint-hover: rgba(255, 255, 255, 0.84);
  --h-glass-solid: rgba(255, 255, 255, 0.97);
  --h-glass-filter: blur(20px) saturate(180%);
  --h-glass-rim: inset 1px 1px 0 rgba(255, 255, 255, 0.9), inset -1px -1px 0 rgba(255, 255, 255, 0.42);
  --h-glass-shadow: 0 0 0 0.5px rgba(11, 15, 46, 0.12), 0 10px 30px -10px rgba(11, 15, 46, 0.3);
  --h-glass-dark-tint: rgba(11, 15, 46, 0.62);
  --h-glass-dark-tint-hover: rgba(20, 24, 64, 0.7);
  --h-glass-dark-solid: rgba(11, 15, 46, 0.96);
  --h-glass-dark-filter: blur(20px) saturate(140%);
  --h-glass-dark-rim: inset 1px 1px 0 rgba(255, 255, 255, 0.26), inset -1px -1px 0 rgba(255, 255, 255, 0.1);
  --h-glass-dark-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --h-lq-tint: rgba(255, 255, 255, 0.5);
  --h-lq-tint-hover: rgba(255, 255, 255, 0.62);
  --h-lq-dark-tint: rgba(11, 15, 46, 0.42);
  --h-lq-dark-tint-hover: rgba(20, 24, 64, 0.5);
  --h-lq-blur: 2px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* SwiftUI .snappy (duration 0.4, bounce 0.15): 0.6 percent overshoot. */
    --h-spring: linear(0, 0.006 1.2%, 0.014 2%, 0.025 2.8%, 0.056 4.2%, 0.095 5.8%, 0.141 7.2%, 0.19 8.8%, 0.411 15%, 0.512 18%, 0.567 19.8%, 0.61 21.2%, 0.658 23%, 0.696 24.5%, 0.763 27.5%, 0.793 29%, 0.823 30.8%, 0.872 34%, 0.912 37.5%, 0.945 41.2%, 0.97 45.5%, 0.988 50.2%, 1 55.8%, 1.005 61%, 1.006 67.8%, 1);
    --h-spring-dur: 560ms;
    /* SwiftUI .smooth (duration 0.5, bounce 0): no overshoot. Panels, heights. */
    --h-spring-smooth: linear(0, 0.004 1%, 0.019 2.2%, 0.042 3.5%, 0.079 5%, 0.114 6.2%, 0.161 7.8%, 0.363 13.8%, 0.465 17%, 0.558 20.2%, 0.596 21.8%, 0.638 23.5%, 0.707 26.8%, 0.739 28.5%, 0.768 30.2%, 0.818 33.8%, 0.86 37.5%, 0.899 42%, 0.929 46.8%, 0.953 52.2%, 0.971 58.5%, 0.983 65.5%, 0.991 73.8%, 0.996 83.2%, 1);
    --h-spring-smooth-dur: 735ms;
  }
}

/* ── PAGE POLISH ────────────────────────────────────────────────────────── */
/* Background only, so selected text keeps its own colour on light and dark. */
::selection { background: rgba(14, 165, 233, 0.24); }

/* One focus ring for links and buttons. Zero specificity: any section's own
   focus treatment wins. */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--h-focus);
  outline-offset: 3px;
}
:where(.h-dark) :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: #fff; }

/* Phones: global.css stops sideways scroll with overflow-x: hidden on BOTH
   html and body (max-width 900px). That makes body a scroll container that
   never scrolls, which silently breaks position: sticky and CSS scroll
   timelines for every section on a phone. clip stops sideways scroll the
   same way without making a scroll container. Browsers without clip keep
   the global hidden. */
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
}

/* Anchors and keyboard focus never land under the fixed nav. */
:where([id], a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + 1rem);
  scroll-margin-bottom: 1rem;
}

/* ── ARRIVAL ────────────────────────────────────────────────────────────────
   base.js adds html.h-arrive (motion allowed) and .h-rv to every
   [data-reveal] element and every item of a [data-h-stagger] group. Until it
   is in view an item is held invisible by a paused animation; then it rises
   18px out of an 8px blur, once. Animations, not transitions, so a section's
   own hover and transitions never fight the arrival, and the finished
   animation leaves nothing behind (fill: backwards). The rise composites
   onto the element's own translate. */
@keyframes h-wait { from, to { opacity: 0; } }
@keyframes h-fade { from { opacity: 0; } }
@keyframes h-lift { from { translate: 0 var(--h-rise); } }
@keyframes h-focus { from { filter: blur(var(--h-blur)); } }
@keyframes h-settle { from { scale: 0.96; } }

/* With base.js running, the old global reveal state is retired: the element
   rests visible and only the animations above hide and move it. Same
   specificity as global.css and loaded later; section files still win. */
:where(.h-arrive) [data-reveal],
:where(.h-arrive) [data-reveal-left] { opacity: 1; transform: none; }
/* For the one frame where base.js switches over, so no section transition
   can replay the old fade. */
.h-arrive-init [data-reveal],
.h-arrive-init [data-reveal-left],
.h-arrive-init .h-rv { transition: none !important; }

.h-arrive .h-rv:not(.h-in) { animation: h-wait 1s linear both paused; }
.h-arrive .h-rv.h-in:not(.h-done) {
  animation:
    h-fade var(--h-t-arrive) var(--h-ease) var(--h-delay, 0ms) backwards,
    h-lift var(--h-t-arrive) var(--h-ease) var(--h-delay, 0ms) backwards,
    h-focus var(--h-t-focus) var(--h-ease) var(--h-delay, 0ms) backwards;
  animation-composition: replace, add, replace;
}
/* Surfaces and pictures settle instead of focusing: base.js adds .h-rv--media
   to anything with its own background or an img or video inside (force it
   with data-h-arrive="media", or keep the blur with data-h-arrive="blur").
   No blur (it smears a big tile and costs most on large layers); a longer
   rise and a settle in scale instead. */
.h-arrive .h-rv.h-in:not(.h-done):is(.h-rv--media, [data-h-arrive="media"], [data-h-arrive="media"] > *) {
  --h-rise: 28px;
  animation:
    h-fade var(--h-t-arrive) var(--h-ease) var(--h-delay, 0ms) backwards,
    h-lift var(--h-t-arrive) var(--h-ease) var(--h-delay, 0ms) backwards,
    h-settle var(--h-t-arrive) var(--h-ease) var(--h-delay, 0ms) backwards;
  animation-composition: replace, add, replace;
}
/* data-h-arrive="fade": opacity only, for things that must not move. */
.h-arrive .h-rv.h-in:not(.h-done):is([data-h-arrive="fade"], [data-h-arrive="fade"] > *) {
  animation: h-fade var(--h-t-focus) var(--h-ease) var(--h-delay, 0ms) backwards;
}

/* Reduced motion, no script, print: everything is simply there. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-left] { opacity: 1; transform: none; }
  .h-arrive .h-rv, .h-arrive .h-rv.h-in { animation: none !important; }
}
@media (scripting: none) {
  [data-reveal], [data-reveal-left] { opacity: 1; transform: none; }
}
@media print {
  [data-reveal], [data-reveal-left] { opacity: 1 !important; transform: none !important; }
  .h-rv { animation: none !important; }
}

/* ── SCROLL AS A TIMELINE ──────────────────────────────────────────────────
   [data-h-scrub] (cover | contain | entry | exit) gives the element --h-p,
   0 to 1 through that range of the viewport, inherited by its children.
   Native scroll timeline where the browser has one; base.js writes --h-p
   elsewhere (and where a clipping ancestor would break the native one).
   Under reduced motion nothing scrubs and --h-p stays 0. */
@keyframes h-p { from { --h-p: 0; } to { --h-p: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-h-scrub]:not(.h-scrub-js) {
      animation: h-p linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    [data-h-scrub="contain"]:not(.h-scrub-js) { animation-range: contain; }
    [data-h-scrub="entry"]:not(.h-scrub-js) { animation-range: entry; }
    [data-h-scrub="exit"]:not(.h-scrub-js) { animation-range: exit; }
  }
}

/* ── GLASS ──────────────────────────────────────────────────────────────────
   .h-glass                 frosted, the apple.com recipe, light
   .h-glass--dark           the same over dark imagery or a navy section
   .h-glass--liquid         base.js upgrades it to real refraction where it
                            can (desktop Chromium, fine pointer, budgeted),
                            frosted everywhere else
   The rim is two inset lights (top left bright, bottom right soft); a light
   follows the pointer on fine pointers and blooms under a finger on touch.
   Each look is a set of --hg-* values on the element, so a section can tune
   one value (for example --hg-tint) without rewriting the material. */
.h-glass,
.h-btn--glass {
  --hg-tint: var(--h-glass-tint);
  --hg-tint-hover: var(--h-glass-tint-hover);
  --hg-lq-tint: var(--h-lq-tint);
  --hg-lq-tint-hover: var(--h-lq-tint-hover);
  --hg-filter: var(--h-glass-filter);
  --hg-rim: var(--h-glass-rim);
  --hg-shadow: var(--h-glass-shadow);
  --hg-sheen: 0.5;
  --h-shine: 0;
  -webkit-backdrop-filter: var(--hg-filter);
  backdrop-filter: var(--hg-filter);
}
.h-glass {
  border-radius: var(--h-r-box);
  background:
    radial-gradient(130px circle at var(--h-mx, 50%) var(--h-my, 0%), rgb(255 255 255 / calc(var(--h-shine) * var(--hg-sheen))), transparent 70%)
    var(--hg-tint);
  box-shadow: var(--hg-rim), var(--hg-shadow);
  color: var(--ink);
  transition:
    background-color var(--h-t) var(--h-ease-out),
    box-shadow var(--h-t) var(--h-ease-out),
    --h-shine var(--h-t) var(--h-ease-out);
}
.h-glass--dark,
.h-dark .h-btn--glass {
  --hg-tint: var(--h-glass-dark-tint);
  --hg-tint-hover: var(--h-glass-dark-tint-hover);
  --hg-lq-tint: var(--h-lq-dark-tint);
  --hg-lq-tint-hover: var(--h-lq-dark-tint-hover);
  --hg-filter: var(--h-glass-dark-filter);
  --hg-rim: var(--h-glass-dark-rim);
  --hg-shadow: var(--h-glass-dark-shadow);
  --hg-sheen: 0.22;
  color: #fff;
}
/* Refraction: html.h-refract and .h-lq are set by base.js only when it built
   a filter for this element, so nothing here can apply by accident. */
.h-refract .h-lq {
  --hg-tint: var(--hg-lq-tint);
  --hg-tint-hover: var(--hg-lq-tint-hover);
  -webkit-backdrop-filter: var(--h-lq-url) blur(var(--h-lq-blur)) saturate(170%) brightness(1.05);
  backdrop-filter: var(--h-lq-url) blur(var(--h-lq-blur)) saturate(170%) brightness(1.05);
}
@media (hover: hover) and (pointer: fine) {
  .h-glass:hover { --hg-tint: var(--hg-tint-hover); --h-shine: 1; }
}
.h-glass:active, .h-btn--glass:active { --h-shine: 1; }

/* ── BUTTONS ────────────────────────────────────────────────────────────────
   One pill, several looks; each look is a set of --b-* values so the states
   are written once. Hover: a colour shift and a softer, larger shadow, never
   a jump. Press: gives way fast (scale 0.97) and springs back on release. */
.h-btn {
  --b-bg: var(--ink);
  --b-bg-hover: var(--h-ink-2);
  --b-bg-press: var(--h-ink-3);
  --b-fg: #fff;
  --b-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 1px 2px rgba(11, 15, 46, 0.22), 0 8px 22px -10px rgba(11, 15, 46, 0.55);
  --b-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 5px rgba(11, 15, 46, 0.2), 0 16px 34px -12px rgba(11, 15, 46, 0.6);
  --b-focus: var(--h-focus);
  --b-scale: 0.97;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--h-r-pill);
  background: var(--b-bg);
  box-shadow: var(--b-shadow);
  color: var(--b-fg);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--h-t) var(--h-ease-out),
    color var(--h-t) var(--h-ease-out),
    box-shadow var(--h-t) var(--h-ease-out),
    opacity var(--h-t) var(--h-ease-out),
    scale var(--h-spring-dur) var(--h-spring),
    --h-shine var(--h-t) var(--h-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .h-btn:hover { --b-bg: var(--b-bg-hover); --b-shadow: var(--b-shadow-hover); }
  .h-btn--glass:hover { --h-shine: 1; }
}
.h-btn:active {
  --b-bg: var(--b-bg-press);
  scale: var(--b-scale);
  transition-duration: var(--h-t-press);
  transition-timing-function: var(--h-ease-out);
}
.h-btn:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; }
.h-btn:disabled,
.h-btn[aria-disabled="true"] { opacity: 0.42; box-shadow: none; scale: none; cursor: not-allowed; pointer-events: none; }

/* Secondary: a white pill with a ring. On white it reads as an outline, on
   the grey ground it sits up as a sheet. */
.h-btn--secondary {
  --b-bg: #fff;
  --b-bg-hover: #fff;
  --b-bg-press: var(--bg-2);
  --b-fg: var(--ink);
  --b-shadow: inset 0 0 0 1.5px rgba(11, 15, 46, 0.2);
  --b-shadow-hover: inset 0 0 0 1.5px rgba(11, 15, 46, 0.55), 0 6px 16px -10px rgba(11, 15, 46, 0.35);
}
/* Quiet: a tonal pill for a lesser action that still needs a target. */
.h-btn--quiet {
  --b-bg: var(--h-tint-1);
  --b-bg-hover: var(--h-tint-2);
  --b-bg-press: var(--h-tint-3);
  --b-fg: var(--ink);
  --b-shadow: 0 0 0 transparent;
  --b-shadow-hover: 0 0 0 transparent;
}
/* On dark: the primary on a navy or photographic ground, a white pill. */
.h-btn--on-dark,
.h-dark .h-btn {
  --b-bg: var(--bg-2);
  --b-bg-hover: #fff;
  --b-bg-press: var(--bg-3);
  --b-fg: var(--ink);
  --b-shadow: inset 0 1px 0 #fff, 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  --b-shadow-hover: inset 0 1px 0 #fff, 0 14px 32px -12px rgba(0, 0, 0, 0.7);
  --b-focus: #fff;
}
.h-dark .h-btn--secondary {
  --b-bg: transparent;
  --b-bg-hover: rgba(255, 255, 255, 0.08);
  --b-bg-press: rgba(255, 255, 255, 0.14);
  --b-fg: #fff;
  --b-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  --b-shadow-hover: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.h-dark .h-btn--quiet {
  --b-bg: rgba(255, 255, 255, 0.1);
  --b-bg-hover: rgba(255, 255, 255, 0.16);
  --b-bg-press: rgba(255, 255, 255, 0.22);
  --b-fg: #fff;
  --b-shadow: 0 0 0 transparent;
  --b-shadow-hover: 0 0 0 transparent;
}
/* Glass: only where the button floats over a photo, video or moving visual.
   Add .h-glass--liquid (and the budget) for refraction. */
.h-btn--glass,
.h-dark .h-btn--glass {
  --b-bg: var(--hg-tint);
  --b-bg-hover: var(--hg-tint-hover);
  --b-bg-press: var(--hg-tint-hover);
  --b-fg: var(--ink);
  --b-shadow: var(--hg-rim), var(--hg-shadow);
  --b-shadow-hover: var(--hg-rim), var(--hg-shadow);
  --b-focus: var(--h-focus);
  background:
    radial-gradient(110px circle at var(--h-mx, 50%) var(--h-my, 0%), rgb(255 255 255 / calc(var(--h-shine) * var(--hg-sheen))), transparent 70%)
    var(--b-bg);
}
.h-dark .h-btn--glass, .h-btn--glass.h-glass--dark { --b-fg: #fff; --b-focus: #fff; }
/* A real on/off control (aria-pressed): fills navy, so state never rests on
   colour alone. Never on static text. */
.h-btn--quiet[aria-pressed="true"],
.h-btn--secondary[aria-pressed="true"] {
  --b-bg: var(--ink);
  --b-bg-hover: var(--h-ink-2);
  --b-bg-press: var(--h-ink-3);
  --b-fg: #fff;
  --b-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 1px 2px rgba(11, 15, 46, 0.22);
}

/* Sizes. Small still gives a 44px target. Icon: a circle, label in aria-label. */
.h-btn--sm { min-height: 44px; padding: 0 1.15rem; gap: 0.45rem; font-size: 0.92rem; }
.h-btn--lg { min-height: 58px; padding: 0 2rem; font-size: 1.06rem; }
.h-btn--block { display: flex; width: 100%; }
.h-btn--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; border-radius: 50%; flex: none; }
.h-btn--icon.h-btn--lg { width: 56px; height: 56px; min-height: 56px; }
.h-btn--icon svg { width: 18px; height: 18px; }
.h-btn--icon.h-btn--lg svg { width: 22px; height: 22px; }

/* The arrow leans where the press takes you: right by default, down with --down. */
.h-btn__arrow { display: inline-block; transition: translate var(--h-spring-dur) var(--h-spring); }
@media (hover: hover) and (pointer: fine) {
  .h-btn:hover .h-btn__arrow { translate: 3px 0; }
  .h-btn:hover .h-btn__arrow--down { translate: 0 3px; }
}

/* A narrow phone: a long label wraps inside its pill. */
@media (max-width: 420px) {
  .h-btn:not(.h-btn--icon) { white-space: normal; padding-block: 0.7rem; text-wrap: balance; }
}

/* ── MORPH (HOME.morph) ─────────────────────────────────────────────────────
   The old content lifts 4px out of a 4px blur and fades; the new content
   rises 10px out of a 6px blur, children 55ms apart; the height glides. */
@keyframes h-swap-out { to { opacity: 0; translate: 0 -4px; filter: blur(4px); } }
@keyframes h-swap-in { from { opacity: 0; translate: 0 10px; filter: blur(6px); } }
.h-morph-out > * { animation: h-swap-out var(--h-t-quick) var(--h-ease-std) forwards; pointer-events: none; }
.h-morph-in > * { animation: h-swap-in var(--h-t-content) var(--h-ease) calc(var(--h-i, 0) * 55ms) backwards; }

/* ── FALLBACKS ──────────────────────────────────────────────────────────── */
/* No blur available: glass turns nearly solid (Apple's own no blur value). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .h-glass, .h-btn--glass { --hg-tint: rgba(255, 255, 255, 0.92); --hg-tint-hover: #fff; }
  .h-glass--dark, .h-dark .h-btn--glass { --hg-tint: rgba(11, 15, 46, 0.92); --hg-tint-hover: var(--ink); }
}
/* Reduce transparency (Chromium) and more contrast (also Safari): solid. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .h-glass, .h-btn--glass, .h-refract .h-lq {
    --hg-tint: var(--h-glass-solid);
    --hg-tint-hover: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .h-glass--dark, .h-dark .h-btn--glass, .h-refract .h-glass--dark.h-lq {
    --hg-tint: var(--h-glass-dark-solid);
    --hg-tint-hover: var(--ink);
  }
}
/* Windows high contrast drops fills and shadows, so rings become borders. */
@media (forced-colors: active) {
  .h-glass, .h-btn { border: 1px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  .h-btn, .h-btn__arrow, .h-glass { transition-duration: 0.01ms !important; }
  .h-btn:active { scale: none; }
  .h-morph-out > *, .h-morph-in > * { animation: none !important; }
}