/* The public site's stylesheet, loaded after the kit's /design/tokens/tokens.css, /design/tokens/components.css and
   /design/identity/motion/tpp-motion.css. It is the holding page's own: the rules of content/source/site.css (kit
   e2bbb40) that content/source/customer-holding.html uses, unchanged except one selector: the header's glass rule drops
   site.css's nav-panel clause (.site-header:has(.tpp-nav__panel:not([hidden]))::before), as this page has no nav panel;
   then that page's own <style> block, unchanged, then the eyebrow and the legal pages' reading rules, added here. Surface class: marketing. Every value is a token. */

/* ---- from content/source/site.css: the base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--tpp-nav-height-marketing); color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--tpp-mkt-page); color: var(--tpp-mkt-text); font-family: var(--tpp-font-sans);
  font-size: var(--tpp-font-size-base); line-height: var(--tpp-line-height-base); letter-spacing: var(--tpp-letter-spacing-body);
  -webkit-font-smoothing: antialiased; }
::selection { background: var(--tpp-mkt-tint); color: var(--tpp-mkt-text); }
:focus-visible { outline: var(--tpp-focus-ring-width) solid var(--tpp-focus-ring); outline-offset: var(--tpp-focus-ring-offset); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: var(--tpp-border-hairline); }
p, h1, h2, h3, ol, ul, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { width: min(90%, 90rem); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--tpp-space-8); }

.lead { font-size: var(--tpp-font-size-lg); line-height: var(--tpp-line-height-base); color: var(--tpp-mkt-text-secondary); }

/* ---- from content/source/site.css: the header, over the hero at the top, the glass plate once the page has scrolled ---- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-bottom: calc(-1 * var(--tpp-nav-height-marketing)); }
.site-header::before { content: ""; position: absolute; inset: 0; background: var(--tpp-mkt-glass-fill);
  -webkit-backdrop-filter: blur(var(--tpp-mkt-glass-blur)); backdrop-filter: blur(var(--tpp-mkt-glass-blur));
  border-bottom: var(--tpp-border-hairline) solid var(--tpp-mkt-line); opacity: 0;
  transition: opacity var(--tpp-mkt-duration-quick) var(--tpp-mkt-ease-standard); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header .tpp-nav { position: relative; width: min(90%, 90rem); margin-inline: auto; background: transparent; color: var(--tpp-mkt-text); border-bottom: 0; }
.site-header .tpp-nav > a { flex: none; }
.site-header .tpp-nav__lockup { max-width: none; }
.lockup-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lockup-light { display: none; } :root:not([data-theme="light"]) .lockup-dark { display: block; } }
:root[data-theme="dark"] .lockup-light { display: none; }
:root[data-theme="dark"] .lockup-dark { display: block; }

/* ---- from content/source/site.css: the hero, the aurora, the plates bottom right panning in, the words on the left ---- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(var(--tpp-space-4) * 56.25);
  padding-top: calc(var(--tpp-space-4) * 12.5); padding-bottom: var(--tpp-space-24); }
.hero .set { position: absolute; z-index: 0; width: min(51.67vw, calc(var(--tpp-space-4) * 46.5));
  left: calc(50% + var(--tpp-space-4) * 6.875); top: calc(var(--tpp-space-4) * 32.5); }
.hero-copy { position: relative; z-index: 1; align-items: start; row-gap: var(--tpp-space-6); }
.hero-head { grid-column: 1 / span 9; display: grid; gap: var(--tpp-space-6); justify-items: start; }
.hero-side { grid-column: 1 / span 6; display: grid; gap: var(--tpp-space-6); }
.hero-side .lead { max-width: 35rem; }
.hero-title { justify-self: stretch; }

/* ---- from content/source/site.css: the footer, on the navy ground ---- */
.foot-bar { color: var(--tpp-mkt-text-on-blue-secondary); }
.foot-bar a { display: inline-flex; align-items: center; min-height: var(--tpp-input-height); font-size: var(--tpp-font-size-sm);
  color: var(--tpp-mkt-text-on-blue); text-decoration: none; }
.foot-bar a:hover { text-decoration: underline; }
.foot-bar { margin-top: var(--tpp-space-16); padding-top: var(--tpp-space-5); border-top: var(--tpp-border-hairline) solid var(--tpp-mkt-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--tpp-space-4); font-size: var(--tpp-font-size-xs); }
.tagline { font-family: var(--tpp-font-display); font-weight: var(--tpp-font-weight-regular); }

/* ---- from content/source/site.css: narrower screens ---- */
@media (max-width: 64rem) {
  .hero-head { grid-column: 1 / span 12; }
  .hero-side { grid-column: 1 / span 9; }
  .hero { min-height: 0; padding-top: calc(var(--tpp-nav-height-marketing) + var(--tpp-space-16)); padding-bottom: 56vw; }
  .hero .set { width: 72%; left: auto; right: -10%; top: auto; bottom: -14vw; }
}
@media (max-width: 48rem) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  html .grid > * { grid-column: 1 / -1; }
  .site-header .tpp-nav__lockup { width: var(--tpp-nav-lockup-width-compact); }
  .hero { min-height: 0; padding-top: calc(var(--tpp-nav-height-marketing) + var(--tpp-space-12)); padding-bottom: 72vw; }
  .hero .set { width: 92%; left: auto; right: -14%; bottom: -20vw; }
}

/* ---- from content/source/site.css: the inner pages ---- */
.inner .lead { text-wrap: pretty; }
.inner .hero-head { grid-column: 1 / -1; }

/* ---- from content/source/customer-holding.html: the page's own <style> block ---- */
.holding { min-height: max(calc(100svh - var(--tpp-space-24)), calc(var(--tpp-space-4) * 50)); }
.holding-lines { display: grid; gap: var(--tpp-space-4); max-width: 32rem; }
.holding .hero-side { gap: var(--tpp-space-8); justify-items: start; }
.site-header--bare .tpp-nav { justify-content: flex-start; }
.holding-foot { padding-block: var(--tpp-space-8); }
.holding-foot .foot-bar { margin-top: 0; padding-top: 0; border-top: 0; }
.holding-foot nav { display: flex; flex-wrap: wrap; column-gap: var(--tpp-space-6); }

/* ---- added: the eyebrow over the headline (Randall's text of 3 October), in the headline's colour ---- */
.eyebrow { font-size: var(--tpp-font-size-base); font-weight: var(--tpp-font-weight-medium);
  letter-spacing: var(--tpp-letter-spacing-label); color: var(--tpp-mkt-text); }

/* ---- added: the focus ring on the navy foot in the on-blue text colour, since the interactive blue does not read on
   blue (as tpp-motion.css says of the footer's buttons) ---- */
.foot-bar a:focus-visible { outline-color: var(--tpp-mkt-text-on-blue); }

/* ---- added: the legal pages, plain reading pages on the page ground, the body at a readable measure ---- */
.legal-main { padding-top: calc(var(--tpp-nav-height-marketing) + var(--tpp-space-12)); padding-bottom: var(--tpp-space-24); }
.legal { width: min(90%, 42rem); overflow-wrap: break-word; }
.legal h1 { font-size: var(--tpp-font-size-3xl); font-weight: var(--tpp-font-weight-regular); line-height: var(--tpp-line-height-snug);
  letter-spacing: var(--tpp-letter-spacing-normal); text-wrap: balance; margin-bottom: var(--tpp-space-8); }
.legal h2 { font-size: var(--tpp-font-size-xl); font-weight: var(--tpp-font-weight-regular); line-height: var(--tpp-line-height-snug);
  margin-block: var(--tpp-space-12) var(--tpp-space-4); }
.legal h3 { font-size: var(--tpp-font-size-lg); font-weight: var(--tpp-font-weight-regular); line-height: var(--tpp-line-height-snug);
  margin-block: var(--tpp-space-8) var(--tpp-space-3); }
.legal p, .legal ul { margin-block: 0 var(--tpp-space-4); }
.legal ul { padding-left: var(--tpp-space-6); list-style: disc; }
.legal li + li { margin-top: var(--tpp-space-2); }
.legal a { text-decoration: underline; }
.legal-foot { margin-top: var(--tpp-space-12); padding-top: var(--tpp-space-5); border-top: var(--tpp-border-hairline) solid var(--tpp-mkt-line);
  font-size: var(--tpp-font-size-sm); color: var(--tpp-mkt-text-secondary); }
@media (max-width: 48rem) {
  .legal-main { padding-top: calc(var(--tpp-nav-height-marketing) + var(--tpp-space-8)); }
  .legal h1 { font-size: var(--tpp-font-size-2xl); }
}