/* ==========================================================================
   The Apple layer.

   Loaded after styles.css and written as overrides rather than a rewrite, so the whole change is one file and
   one <link> to remove. The design language is read off apple.com, not remembered: SF Pro set at 17px with
   slightly tightened tracking, near-black #1d1d1f on white with #f5f5f7 sections alternating, a single blue
   for every action, pill buttons, a 44-52px translucent bar with saturate-and-blur behind it, centred
   headlines with large grey subheads, and a great deal of space between sections.

   What it keeps from the page underneath: the gradient on the headline's key phrase and the card pictures —
   Apple's own product pages use gradient headings and colourful imagery against exactly this restraint, which
   is what makes them read. Teal survives only as the brand colour of the small section labels.

   Token overrides follow the same three-state pattern as styles.css (bare :root for light, then the
   prefers-color-scheme block and the [data-theme] stamp for dark, each with the same selector as the original
   so the later one wins).
   ========================================================================== */

:root {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink:        #FFFFFF;
  --ink-2:      #F5F5F7;
  --alt:        #F5F5F7;
  --panel:      #FFFFFF;
  --panel-2:    #FFFFFF;
  --line:       #D2D2D7;
  --line-soft:  #E8E8ED;

  --fg:         #1D1D1F;
  --fg-2:       #1D1D1F;
  --mut:        #6E6E73;
  --faint:      #86868B;

  /* One colour for everything that acts: buttons fill with it, links are written in it. */
  --action:       #0071E3;
  --action-hover: #0077ED;
  --link:         #0066CC;

  --nav-bg:     rgba(245, 245, 247, .8);
  --nav-bg-on:  rgba(245, 245, 247, .8);
  --card-hover-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
  --hero-wash-apple: rgba(255, 255, 255, .84);

  --radius:     18px;
  --radius-lg:  22px;
  --shell:      1080px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #000000;
    --ink-2:      #161617;
    --alt:        #161617;
    --panel:      #1D1D1F;
    --panel-2:    #1D1D1F;
    --line:       #424245;
    --line-soft:  #2D2D30;

    --fg:         #F5F5F7;
    --fg-2:       #F5F5F7;
    --mut:        #A1A1A6;
    --faint:      #86868B;

    --action:       #0071E3;
    --action-hover: #0077ED;
    --link:         #2997FF;

    --nav-bg:     rgba(22, 22, 23, .8);
    --nav-bg-on:  rgba(22, 22, 23, .8);
    --card-hover-shadow: none;
    --hero-wash-apple: rgba(0, 0, 0, .74);
  }
}

:root[data-theme="dark"] {
  --ink:        #000000;
  --ink-2:      #161617;
  --alt:        #161617;
  --panel:      #1D1D1F;
  --panel-2:    #1D1D1F;
  --line:       #424245;
  --line-soft:  #2D2D30;

  --fg:         #F5F5F7;
  --fg-2:       #F5F5F7;
  --mut:        #A1A1A6;
  --faint:      #86868B;

  --action:       #0071E3;
  --action-hover: #0077ED;
  --link:         #2997FF;

  --nav-bg:     rgba(22, 22, 23, .8);
  --nav-bg-on:  rgba(22, 22, 23, .8);
  --card-hover-shadow: none;
  --hero-wash-apple: rgba(0, 0, 0, .74);
}

/* Blue and green, alternating ------------------------------------------------ */
/* Every section takes one accent and the next takes the other, so the page reads blue, green, blue, green on
   the way down. Apple's own system blue and green, each in a shade that passes contrast as text on its ground.
   --tone is the section's colour; --tone-2 is the other one, the second colour of its card pictures. The
   buttons stay the single action blue: one colour to press is part of what was borrowed. */
:root { --blue: #0066CC; --green: #248A3D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --blue: #2997FF; --green: #30D158; }
}
:root[data-theme="dark"] { --blue: #2997FF; --green: #30D158; }

/* The section's colour also stands in for the teal inside it (--signal and --signal-dim), so every accent the
   base stylesheet draws in teal — the overview diagram, the ticker dots, tick marks — follows the section
   rather than staying teal inside a blue or green band. The logo sits outside <main> and keeps the brand teal. */
main > section:nth-of-type(odd)  { --tone: var(--blue);  --tone-2: var(--green); --signal: var(--blue);  --signal-dim: var(--blue); }
main > section:nth-of-type(even) { --tone: var(--green); --tone-2: var(--blue);  --signal: var(--green); --signal-dim: var(--green); }

/* Inside a section the two colours alternate as well: every second figure, card or tile takes the other one,
   so no section reads as a single accent ("The difference" was four blue numbers in a row). The item swaps
   its own --tone and --signal, and everything drawn inside it — a number, an icon, a tick — follows.
   Written per section parity with the colours named, because an item redefining --tone from --tone-2 and
   --tone-2 from --tone in the same rule would be a cycle and void both. */
main > section:nth-of-type(odd) :is(.counters > div:nth-child(even), .kpi-row > .kpi:nth-child(even), .facility-grid > .facility-card:nth-child(even), article.card:nth-of-type(even)) {
  --tone: var(--green); --tone-2: var(--blue); --signal: var(--green); --signal-dim: var(--green);
}
main > section:nth-of-type(even) :is(.counters > div:nth-child(even), .kpi-row > .kpi:nth-child(even), .facility-grid > .facility-card:nth-child(even), article.card:nth-of-type(even)) {
  --tone: var(--blue); --tone-2: var(--green); --signal: var(--blue); --signal-dim: var(--blue);
}
/* The overview diagram keeps its original look — grey rings and spokes around a brand-teal core — rather than
   the section's blue and green: it was coloured that way once and asked back. The section's colour stands in
   for --signal everywhere else in <main>, so the diagram restores the teal for itself, in each theme's shade. */
.orbit { --signal: #007C68; --signal-dim: #009B81; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orbit { --signal: #00E0B8; --signal-dim: #0FA98D; }
}
:root[data-theme="dark"] .orbit { --signal: #00E0B8; --signal-dim: #0FA98D; }

.kicker,
.eyebrow,
.card .area { color: var(--tone, var(--signal)); }

/* What stands alone in a section — its label, and the hero's — carries both colours at once: the headline's
   green-to-blue gradient. Repeated things alternate instead (above); a gradient on every card would stop
   reading as an accent. The solid colour above stays as the fallback, and forced-colours mode keeps the
   system's text colour rather than a transparent fill. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kicker,
  .eyebrow {
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
  }
  .section-head .kicker { margin-inline: auto; }
}
@media (forced-colors: active) {
  .kicker, .eyebrow { -webkit-text-fill-color: currentColor; background: none; }
}
.eyebrow .live { background: var(--tone, var(--signal)); }
.spot-icon { --i-brand: var(--tone, var(--action)); --i-accent: var(--tone-2, var(--signal)); }
.ticks li::before { color: var(--tone, var(--signal)); border-color: var(--tone, var(--signal)); }

/* The headline's key phrase runs green into blue — the two colours of the page, in one line. */
:root { --grad-hero: linear-gradient(95deg, #248A3D 0%, #0071E3 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grad-hero: linear-gradient(95deg, #30D158 0%, #2997FF 100%); }
}
:root[data-theme="dark"] { --grad-hero: linear-gradient(95deg, #30D158 0%, #2997FF 100%); }

/* Accessibility ------------------------------------------------------------- */
/* WCAG 2.1 AA, checked with axe in both themes and, where axe cannot measure (text on a gradient or over the
   hero photograph), by working the contrast out from the colours involved. Each rule names what failed. */

/* Small grey text: Apple's #86868B is 3.6:1 on white, under the 4.5:1 small text needs (the counters' source
   line, the diagram caption, the breadcrumb). The light theme's faint grey takes the secondary grey instead. */
:root { --faint: #6E6E73; }

/* Light-theme green: #248A3D was 4.39:1 on the #F5F5F7 sections. #1D7A34 is about 5.2:1 there, 5.6:1 on white.
   The gradient's blue end moves to the link blue for the same reason: #0071E3 is about 4.2:1 on the grey. */
:root { --green: #1D7A34; --grad-hero: linear-gradient(95deg, #1D7A34 0%, #0066CC 100%); }

/* Over the hero photograph the 84% white wash left the darkest patch near #EBEBEB, which put the grey subhead
   and note at about 4.2:1. A 90% wash lifts that to about 4.7:1 while keeping the picture visible. */
:root { --hero-wash-apple: rgba(255, 255, 255, .9); }
.hero-note { color: var(--mut); }

/* Links inside a sentence were distinguishable by colour alone (axe: link-in-text-block). They carry an
   underline; links that stand on their own — the nav, the footer lists, buttons — do not need one. */
:is(p, li, dd, figcaption, .crumb) a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.crumb a { color: inherit; }

/* The footer's column titles are h2 now (they were h4, which skipped levels after the page's h2 and h3); they
   keep the look the h4 had. */
.foot h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  margin: 0 0 3px;
}

/* The ticker moves on its own. It is decorative (aria-hidden) and already stops under reduced motion; it also
   pauses while a pointer rests on it. */
.ticker:hover .ticker-run { animation-play-state: paused; }

/* Type -------------------------------------------------------------------- */

body {
  color: var(--fg);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
}
h1, h2, h3, h4 { color: var(--fg); font-family: var(--font-display); font-weight: 600; }
h2 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.012em; }

a { color: var(--link); }
a:hover { color: var(--link); text-decoration: underline; text-underline-offset: .15em; }

/* Buttons: pills, one blue. ----------------------------------------------- */

.btn {
  --btn-pad: 11px 22px;
  border-radius: 980px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  box-shadow: none;
  transform: none;
}
.btn:hover { text-decoration: none; transform: none; }
.btn-lg { --btn-pad: 12px 24px; font-size: 17px; }
.btn-primary,
.btn-primary:visited { background: var(--action); color: #fff; border-color: var(--action); box-shadow: none; animation: none; }
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; box-shadow: none; }
.btn-ghost { background: transparent; border-color: var(--action); color: var(--link); }
.btn-ghost:hover { background: var(--action); border-color: var(--action); color: #fff; }

/* Nav: thin, translucent, blurred. ---------------------------------------- */

.nav,
.nav.scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: none;
}
.nav.scrolled { border-bottom-color: var(--line-soft); }
.nav-inner { height: 52px; }
.nav .brand-word { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.nav-links a { font-size: 13px; color: var(--fg); opacity: .8; letter-spacing: -0.01em; }
.nav-links a:hover { opacity: 1; color: var(--fg); text-decoration: none; }
.nav .btn { --btn-pad: 6px 15px; font-size: 13px; }
.nav-progress { display: none; }

/* Hero: centred, clean ground, the product below the words. --------------- */

/* The hero fills the screen below the 52px bar, as Apple's do: the first view is the headline and nothing else.
   svh rather than vh so a phone's collapsing address bar never pushes the bottom edge out of sight; vh first as
   the fallback. The copy centres vertically and the ticker keeps to the bottom edge. */
.hero {
  display: flex;
  flex-direction: column;
  /* 53px, not 52: the bar is 52px tall plus a 1px bottom border, and a hero one pixel too tall puts the
     ticker's bottom edge just past the fold. */
  min-height: calc(100vh - 53px);
  min-height: calc(100svh - 53px);
  padding: 0;
  background: var(--ink);
  text-align: center;
}
/* The breathing room scales with the window's height, not a fixed 72px: on a short laptop screen fixed padding
   made the copy taller than the space and pushed the ticker just below the fold. */
.hero > .hero-grid { margin-block: auto; padding-block: clamp(28px, 7svh, 72px); }
.hero-field { display: none; }
/* The photograph stays behind the centred copy; the scrim is an even wash rather than the old left-weighted
   one, since the words now sit in the middle of the picture instead of down its left side. */
.hero-veil {
  background:
    linear-gradient(180deg, transparent 70%, var(--ink) 100%),
    var(--hero-wash-apple);
}
.hero-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 64px;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 860px; }
/* No background reset here: this rule comes after the gradient-label rule above, and clearing the background
   left the label's transparent text with nothing behind it — the words vanished and only the dot showed. The
   base stylesheet's pill fill is cleared by the gradient rule itself. */
.eyebrow {
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--signal);
}
/* Type and spacing scale with whichever is smaller, the window's width or its height. Width alone kept a wide
   but short laptop screen (1280x640) at full size, and the copy outgrew the hero it has to fit inside. */
.hero h1 {
  margin-top: clamp(8px, 1.8svh, 14px);
  font-size: clamp(2.2rem, min(6.4vw, 8.4svh), 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 em { margin-inline: auto; }
.hero .lead {
  margin: clamp(12px, 2.8svh, 22px) auto 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, min(2.1vw, 2.6svh), 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--mut);
}
.hero-actions { justify-content: center; margin-top: clamp(18px, 4.2svh, 34px); }
.hero-note { margin-top: clamp(10px, 2svh, 16px); font-size: 14px; color: var(--faint); }
.hero .console { width: 100%; max-width: 980px; margin-inline: auto; text-align: left; }
.console-glow { opacity: .55; }

/* Sections: space, alternating grounds, centred heads. -------------------- */

.section { padding: 120px 0; }
.section.ruled { border-top: 0; }
main > section:nth-of-type(even) { background: var(--alt); }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 64px; }
.kicker {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--signal);
  margin-bottom: 10px;
}
.section-lead {
  margin: 18px auto 0;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--mut);
}
.section-foot { text-align: center; margin-inline: auto; color: var(--mut); }

/* A page's own head (the contact page) centres like the home page's sections, and its breadcrumb is a quiet
   sentence rather than tracked mono capitals. */
.pagehead .wrap { text-align: center; }
.pagehead h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; }
.pagehead .lead { margin-inline: auto; font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.4; color: var(--mut); }
.crumb { font-family: var(--font-body); font-size: 14px; letter-spacing: -0.01em; text-transform: none; color: var(--faint); }

/* Where a head sits beside something (the contact form) it stays left-aligned, so its subhead must too. */
.demo-copy .section-lead { margin-inline: 0; }

/* The small area label above a module card's title: a word in the brand colour, not tracked capitals. */
.card .area {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--signal);
}

/* Cards: borderless tiles that lift a little. ------------------------------ */

.card,
.facility-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 32px;
  box-shadow: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* On a white section the tiles take the grey, on a grey section the white — the contrast Apple's store uses. */
main > section:nth-of-type(odd) .card,
main > section:nth-of-type(odd) .facility-card { background: var(--alt); }
.card:hover,
.facility-card:hover { transform: scale(1.015); box-shadow: var(--card-hover-shadow); border-color: transparent; }
.card p, .facility-card p, .card-sub { color: var(--mut); }
.facility-grid { gap: 20px; }
@media (prefers-reduced-motion: reduce) {
  .card, .facility-card { transition: none; }
  .card:hover, .facility-card:hover { transform: none; }
}

/* FAQ ------------------------------------------------------------------- */

.faq-item { border-bottom-color: var(--line); }
.faq-item summary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
  padding: 26px 0;
}

/* Forms ------------------------------------------------------------------ */

.field input,
.field select,
.field textarea { border-radius: 12px; border-color: var(--line); background: var(--panel); }
.form-shell { border-radius: var(--radius-lg); }

/* Footer: small grey type on the light ground. ---------------------------- */

.foot {
  background: var(--alt);
  border-top: 0;
  padding: 56px 0 32px;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--mut);
}
.foot h4 { font-size: 12px; color: var(--fg); }
.foot a { color: var(--mut); }
.foot a:hover { color: var(--fg); }
.foot-base { border-top-color: var(--line); color: var(--mut); }

/* "I'm not a robot" — shaped like the checks people already know from other sites, so nobody has to read it. */
.human-check {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.hc-box {
  position: relative; width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 2px solid var(--mut); border-radius: 7px; background: transparent; color: #fff;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s;
}
.hc-box:hover { border-color: var(--signal); }
.hc-box:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.hc-tick { width: 18px; height: 18px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s; }
.hc-spin {
  position: absolute; inset: -2px; border-radius: 50%; opacity: 0;
  border: 3px solid color-mix(in srgb, var(--signal) 25%, transparent); border-top-color: var(--signal);
}
.hc-label { font-weight: 600; color: var(--fg); }
.hc-note { font-size: 12px; color: var(--mut); text-align: right; }
.human-check[data-state="working"] .hc-box { border-color: transparent; cursor: progress; }
.human-check[data-state="working"] .hc-spin { opacity: 1; animation: hc-spin .8s linear infinite; }
.human-check[data-state="done"] .hc-box { background: var(--signal); border-color: var(--signal); cursor: default; }
.human-check[data-state="done"] .hc-tick { opacity: 1; transform: none; }
.human-check[data-state="failed"] .hc-label { color: #C4322B; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .human-check[data-state="working"] .hc-spin { animation-duration: 2.4s; } }
@media (max-width: 420px) { .hc-note { display: none; } }

/* Policy documents (privacy.html): one readable column at about seventy characters with generous leading, so a
   person scanning for "what do you do with my phone number" can find their way through. Headings carry the
   structure; body text sits a step quieter; links are underlined like every link in running text on this site. */
.doc-section { padding-top: 8px; }
.doc { max-width: 68ch; display: grid; gap: 14px; font-size: 1rem; line-height: 1.75; color: var(--mut); }
.doc h2 { margin: 26px 0 0; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc ul { margin: 0; }
.doc ul { padding-left: 1.2em; display: grid; gap: 8px; }
.doc li::marker { color: var(--signal); }
.doc strong { color: var(--fg); font-weight: 600; }
.doc a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.doc-meta { margin: 14px 0 0; font-size: .85rem; color: var(--mut); }

/* The legal band under the footer: full width and a shade darker than the footer, so the declarations read as the
   small print they are rather than as more navigation. It ends the way apple.com does — one line under a hairline:
   the copyright, the legal links divided by bars, and the country the site speaks for. The footer's own bottom
   padding moves here, or a strip of footer colour would sit under the band. Selectors are two classes deep on
   purpose: `.foot a`, `.foot nav a` and `.foot h2` above would otherwise restyle these as footer navigation. */
.foot { padding-bottom: 0; }
/* The small print's own ink. The footer's grey falls just short of 4.5:1 once the band's tint is under it in the
   light theme, so light gets a darker one; dark keeps the footer's, which passes. */
:root { --legal-ink: #55555A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --legal-ink: var(--mut); } }
:root[data-theme="dark"] { --legal-ink: var(--mut); }
.foot-legal {
  margin-top: 48px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.foot .foot-decl { display: grid; gap: 12px; max-width: 110ch; font-size: .8rem; line-height: 1.65; color: var(--legal-ink); }
.foot .foot-decl h2 {
  margin: 0; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
}
.foot .foot-decl p { margin: 0; }
.foot .foot-decl strong { color: var(--fg); font-weight: 600; }
.foot .foot-decl a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

.foot .foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--legal-ink);
}
.foot .foot-bottom p { margin: 0; }
.foot .foot-legal-links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.foot .foot-legal-links a { font-size: .82rem; color: var(--fg); }
.foot .foot-legal-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.foot .foot-legal-links span { color: var(--line); }
.foot .foot-bottom .foot-region { margin-left: auto; color: var(--fg); }
@media (max-width: 640px) { .foot .foot-bottom .foot-region { margin-left: 0; } }

/* The country, as apple.com shows it: the flag before the name. Drawn inline at the flag's real proportions —
   black, red and green at 6:1:4:1:6 with their white fimbriations, the Maasai shield and crossed spears — and shown
   as a round badge centred on the shield, which keeps all five bands. Inline rather than an image or an emoji: no
   request, sharp at any zoom, and the same on Windows, which draws no flag emoji. The hairline ring keeps the black
   band from dissolving into the dark theme; the name beside it is what a screen reader hears. */
.foot .foot-bottom .foot-region { display: inline-flex; align-items: center; gap: 8px; }
.foot-region .flag { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }

/* ---------------------------------------------------------------------------
   Hero additions: who it is for, three facts, and two moments from a working day — more to read without more to
   wade through. Everything is sized off the viewport's height like the rest of the hero, because the hero still has
   to fit one screen; on short screens the chips go first, since the facilities section repeats them.
   --------------------------------------------------------------------------- */
.hero-chips {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: clamp(12px, 2.4svh, 20px) 0 0; padding: 0;
}
.hero-chips li {
  padding: 5px 12px; border-radius: 999px; font-size: .8rem; line-height: 1.3; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  backdrop-filter: blur(6px);
}

.hero-proof {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: clamp(16px, 3.2svh, 28px) 0 0; padding: 0;
}
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--fg); }
.hero-proof svg { width: 18px; height: 18px; flex: none; color: var(--signal); }

/* Frosted panels in the theme's own surface colour, so they belong to light and dark alike. Shown only where there
   is room beside the copy; they sit level with the paragraph and button, not the headline, which runs nearly full
   width on a laptop. */
.hero-float {
  position: absolute; z-index: 2; display: none; align-items: center; gap: 12px;
  width: 236px; padding: 12px 14px; border-radius: 16px; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  animation: hero-float 7s ease-in-out infinite;
}
.hero-float b { display: block; font-size: .88rem; font-weight: 600; }
.hero-float small { display: block; margin-top: 2px; font-size: .75rem; color: var(--mut); }
.hero-float-icon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  color: var(--signal); background: color-mix(in srgb, var(--signal) 18%, transparent);
}
.hero-float-icon svg { width: 18px; height: 18px; }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (min-width: 1280px) and (min-height: 700px) {
  .hero-float { display: flex; }
  .hero-float--pay { left: max(28px, calc(50% - 620px)); top: 56%; }
  .hero-float--lab { right: max(28px, calc(50% - 620px)); top: 68%; animation-delay: -3.5s; }
}
@media (max-height: 760px) { .hero-chips { display: none; } }
@media (max-width: 520px) { .hero-proof { flex-direction: column; align-items: center; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } }
/* On a phone the six chips wrap to three rows and push the hero past the first screen; the facilities section just
   below lists the same six, so they step aside here too, the same rule as on short screens. */
@media (max-width: 520px) { .hero-chips { display: none; } }