/* ==========================================================================
   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;
  /* #6E6E73 was the system grey and it had nothing to spare: 156 elements take this colour in the light theme —
     every audience line, caption and secondary sentence on the page — and on the grey sections it measured 4.66:1
     against a 4.5:1 bar, 4.30:1 on the darkest ground it lands on. A colour that close to the line fails the next
     time anybody tints a surface under it, which is exactly how the featured price card broke: a 6% wash took two
     of these lines to 4.28:1 and nothing said so. #5D5D62 is 5.55:1 at its worst across every background the colour
     actually appears on, so the margin now absorbs a tint rather than being spent by one. It stays well clear of
     --fg, so the muted/primary distinction the page reads by is intact. */
  --mut:        #5D5D62;
  --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);

  --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;
  }
}

: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;
}

/* 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), .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), .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%); }

/* The reasoning above this line used to be about a wash over the hero photograph, which has gone; the note now
   sits on the section's own background, where --mut is checked against it like every other muted text. */
.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-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); }
/* Sections: space, alternating grounds, centred heads. -------------------- */

/* The section rhythm is a pair of tokens because these two rules are exactly where it was last lost. Both sat
   unguarded in this file, which loads after styles.css, so they beat that sheet's own `@media (max-width: 780px)`
   tightening on source order alone — same specificity, later file, no warning. A phone was therefore holding 120px
   of padding above and below every section where 76px had been written for it, and reading a page 26,000px long.
   Declared once and varied by a media query on :root, the value cannot be overridden out of existence that way
   again, and the two sheets stop disagreeing about a number only one of them was ever applying. */
:root { --section-gap: 88px; --section-head-gap: 48px; }
@media (max-width: 780px) { :root { --section-gap: 56px; --section-head-gap: 32px; } }

.section { padding: var(--section-gap) 0; }
.section.ruled { border-top: 0; }
/* The alternating ground earns its keep — it says "new section" before a word is read — but it was landing on a
   hard line, a tonal step across the full width with nothing to explain it. Neither a rule nor a shadow would help:
   both add a second device to a boundary that already has one. The band simply arrives and leaves across its own
   top and bottom padding instead, which is empty, so the fade costs no space and crosses nothing the reader is
   looking at. It is the --section-gap token rather than a number for exactly that reason: a fixed distance would
   reach past the padding on a phone, where the gap is 56px, and start dissolving the ground under the heading.
   The ends are the page's own ground rather than a new colour, so an even section still sits exactly between two
   odd ones; only the edge moves from a line to a distance. */
main > section:nth-of-type(even) {
  background: linear-gradient(
    to bottom,
    var(--ink) 0,
    var(--alt) var(--section-gap),
    var(--alt) calc(100% - var(--section-gap)),
    var(--ink) 100%
  );
}
.section-head { text-align: center; max-width: 780px; margin: 0 auto var(--section-head-gap); }
.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; }

/* Not everything on this page is a card. ----------------------------------
   Four sections ran consecutively — facilities, modules, integrations, security — each a centred heading over a grid
   of tiles at the same radius, the same padding and the same ground: twenty-three interchangeable containers in a
   row, which is what made the page read as one shape repeated rather than as an argument with parts. A border, a
   fill and a radius each say "separate object", and two of those four sections are not made of objects.

   Facilities is a taxonomy: six kinds of customer, a line apiece, where the reader's question is "is mine on this
   list". Security is a single argument in six paragraphs. Both read better as ruled lists, which also gives the two
   sections that genuinely are made of objects — the module groups and the systems you connect to — their tiles back
   as a distinction rather than as the default. The texture down the page becomes list, figures, tiles, tiles, list.

   Done by removing chrome rather than by rewriting the markup: the headings, the icons and the reveal behaviour are
   untouched, so nothing here can change what a screen reader meets or what the observer animates. */
#facilities .facility-card,
#security .mechanisms .card {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  /* Asymmetric on purpose: the rule belongs to the row beneath it, so it sits closer to the heading it introduces
     than to the paragraph it follows. Equal padding read as a line floating between two rows owned by neither. */
  padding: 24px 0 32px;
  box-shadow: none;
}
/* The lift belonged to a tile. A ruled row has no edge to lift off, and a row that moves under the pointer while its
   rule stays put reads as a rendering fault rather than as a response. */
#facilities .facility-card:hover,
#security .mechanisms .card:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--line);
}
/* Tighter columns and no row gap, so consecutive rules read as a continuous rhythm rather than as floating edges. */
#facilities .facility-grid,
#security .mechanisms { gap: 0 40px; }
/* The icon was sized to anchor a 32px-padded tile; at that size it dominates a row whose job is to be scanned. */
#facilities .spot-icon,
#security .mechanisms .spot-icon { width: 34px; height: 34px; }
@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); }
/* "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 trust page: an index of the published documents beside the one being read. Two columns where there is room
   and one below it, index first, because on a phone the list is how you get to a document and a document is long.
   The documents come from the API as rendered HTML, so everything under .doc-body is styled by element — there are
   no classes to hang anything on, and a document a lawyer edits must not need a stylesheet change to look right. */
.doc-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .doc-layout { grid-template-columns: minmax(200px, 260px) 1fr; gap: 48px; } }

.doc-index { display: grid; gap: 4px; align-content: start; }
@media (min-width: 900px) { .doc-index { position: sticky; top: 96px; } }
.doc-index a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--mut); }
.doc-index a:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
.doc-index a[aria-current="true"] { background: color-mix(in oklab, var(--signal) 12%, transparent); color: var(--fg); }
.doc-index a strong { font-size: .95rem; font-weight: 600; color: var(--fg); }
.doc-index a span { font-size: .8rem; line-height: 1.45; }

/* A published document's own markup. Tables carry most of the substance in these — the sub-processor register is
   one — so they get room to scroll sideways rather than squeezing columns to nothing on a phone. */
.doc h3 { margin: 22px 0 0; font-size: 1.05rem; color: var(--fg); }
.doc table { width: 100%; border-collapse: collapse; font-size: .875rem; display: block; overflow-x: auto; }
.doc th, .doc td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
.doc th { color: var(--fg); font-weight: 600; white-space: nowrap; }
.doc blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--signal); }
/* A link the reader is not entitled to follow arrives with its address removed rather than pointing nowhere —
   see PolicyMarkdown. It has to read as text, not as a link that does nothing when pressed. */
.doc a[data-unavailable] { color: inherit; text-decoration: none; cursor: text; }

/* 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-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); }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 520px) { .hero-proof { flex-direction: column; align-items: center; gap: 8px; } }
/* 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. */