/*
 * HeyHi design system: the site's chrome. The header and its Products catalogue, the phone menu sheet, the night
 * footer the page lifts off, and back-to-top (shared/_navbar, shared/_footer; navbar_controller.js,
 * back_to_top_controller.js, clock_controller.js).
 *
 * The header is quiet paper that stays at the top: on the page's own paper with no line while the page sits at its
 * top, then blurred paper with a hairline under it, and blurred night while a night band or the footer passes under. Its Products menu is a catalogue, each product a ruled row beside
 * a tinted column for our AI's own line; it opens as every menu here does, with a short fade and settle from
 * @starting-style, its rows a beat apart and the page behind dimmed a little. The footer is the page's night: the line
 * and the way round, then the wordmark from rail to rail, wiped open as it arrives, and a bar with South Africa's time.
 * The page ends on rounded corners over it, as if lifted off it.
 */

/* ---------- Shared: a live dot, and the wordmark ---------- */
/* Live: our AI's line in the header, the menu sheet and the footer's clock. A solid amber dot that breathes, as a live
   product's status mark does (.status--live, 10_base.css). */
.live-dot { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber);
  animation: status-breathe 2.4s var(--ease-in-out) infinite;
}

.wordmark { display: block; height: auto; aspect-ratio: 2861 / 1027; fill: currentColor; }

/* ---------- Header ---------- */
/* In the page's flow, so it never covers a page's first words, and sticky. Blurred paper with a hairline is its own
   look, which it keeps without scripts; the navbar controller adds .is-top while the page sits at the very top, where
   it's simply the paper. It stays put between pages (12_motion.css). */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--ink);
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
  view-transition-name: site-header;
  transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.site-nav.is-top { background-color: var(--c-paper); box-shadow: 0 1px 0 transparent; }
/* Over a night band or the footer it's night instead (navbar_controller.js adds .surface-night), its roles re-pointed
   (00_tokens.css), so the links, the wordmark, the hairline and the buttons all invert with it. It drops the blur
   there: over dark there's little to soften, and the blur would draw the paper beyond the window's top edge into it
   as a pale band. */
.site-nav.surface-night {
  background-color: color-mix(in srgb, var(--c-night) 94%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav { background-color: var(--c-paper); }
  .site-nav.surface-night { background-color: var(--c-night); }
}

.site-nav__inner { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px); height: var(--header-h); }

/* The mark and the wordmark, the letters' capitals centred on the mark */
.brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; color: var(--ink); text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}
.brand .mark { width: 26px; }
.brand__wordmark { width: auto; height: 20px; translate: 0 1.5px; }

.site-nav__links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-round);
  background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--font-text); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* The page you're on: About, or Products on a product's page, in ink and underlined with a hairline */
.nav-link[aria-current="page"], .nav-link.is-current { color: var(--ink); }
.nav-link[aria-current="page"]::after, .nav-link.is-current::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: currentColor;
}
.nav-link .icon { width: 14px; height: 14px; }
.nav-products__toggle .icon { margin-right: -2px; transition: transform var(--dur-ui) var(--ease-out); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }

.site-nav__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
/* Our AI's line: a quiet link with a live dot, since a page's own call leads in amber, and the number itself while the
   call is by phone */
.nav-call { gap: 9px; margin-right: var(--space-1); }
.nav-call__number {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; word-spacing: -0.28em;
  color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.nav-call:hover .nav-call__number { color: var(--ink-soft); }

/* ---------- Products: the catalogue ---------- */
/* A white sheet under the Products button: every product as a ruled row on the left, our AI's own line in a tinted
   column on the right, and About and Get in touch along the foot. The navbar controller shows and hides it with
   [hidden], so it opens from @starting-style and closes with display held for its exit. */
.nav-products { position: relative; }
.nav-products__panel {
  position: absolute; top: calc(100% + 20px); left: -12px; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) auto;
  width: min(784px, calc(100vw - 2 * var(--gutter)));
  /* However many products there are, the menu fits the window, and its list scrolls */
  max-height: calc(100dvh - var(--header-h) - 32px);
  overflow: hidden; border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-pop);
  transform-origin: 40px 0;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), display var(--dur-ui) allow-discrete;
}
@starting-style {
  .nav-products__panel { opacity: 0; transform: translateY(-6px) scale(0.985); }
}
.nav-products__panel[hidden] {
  opacity: 0; transform: translateY(-4px) scale(0.99); pointer-events: none;
  transition-duration: var(--dur-fast); transition-timing-function: var(--ease-in);
}
/* With no line to call, the catalogue has the sheet to itself */
.nav-products__panel:not(:has(.nav-feature)) { grid-template-columns: minmax(0, 1fr); width: min(520px, calc(100vw - 2 * var(--gutter))); }

.nav-products__catalogue { display: flex; flex-direction: column; min-height: 0; padding-top: 22px; }
.nav-products__label { padding: 0 26px 14px; }
.nav-products__list {
  list-style: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line);
}
.nav-products__list > li + li { border-top: 1px solid var(--line); }

/* A row: the name, with an arrow that comes in on hover, where it stands on the right, and its job under them */
.nav-product {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "line line";
  align-items: baseline; gap: 5px 16px; padding: 15px 26px 17px;
  color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-fast);
}
.nav-product:hover, .nav-product:focus-visible { background: var(--c-paper); }
/* The page you're on, marked by an amber rule at its edge */
.nav-product[aria-current="page"] { background: var(--c-paper); box-shadow: inset 2px 0 0 var(--amber); }
/* Inside the row, which the list's scrolling would otherwise clip */
.nav-product:focus-visible { outline-offset: -2px; border-radius: 0; }
.nav-product__name {
  grid-area: name; display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -0.012em;
}
.nav-product .status { grid-area: status; font-size: 11px; color: var(--ink-mute); }
.nav-product .status--live { color: var(--ink); }
.nav-product__tagline {
  grid-area: line; max-width: 36em; font-size: 14px; line-height: 1.45; color: var(--ink-mute); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.nav-product__go {
  width: 15px; height: 15px; color: var(--ink-mute); opacity: 0; translate: -4px 3px;
  transition: opacity var(--dur-fast), translate var(--dur-ui) var(--ease-out), color var(--dur-fast);
}
.nav-product:hover .nav-product__go, .nav-product:focus-visible .nav-product__go { opacity: 1; translate: 0 0; color: var(--ink); }

/* The rows come in a beat apart as the menu opens, dropping into place as the sheet itself does. They start a little
   above where they land, never below: a row on its way up from under the list's edge would count as overflow for a
   moment and flash the list's scrollbar while the menu settles. */
.nav-products__list > li {
  transition: opacity 0.42s var(--ease-out), translate 0.5s var(--ease-out);
  transition-delay: calc(50ms + var(--row, 0) * 30ms);
}
@starting-style {
  .nav-products__list > li { opacity: 0; translate: 0 -6px; }
}
.nav-products__list > li:nth-child(2) { --row: 1; }
.nav-products__list > li:nth-child(3) { --row: 2; }
.nav-products__list > li:nth-child(4) { --row: 3; }
.nav-products__list > li:nth-child(5) { --row: 4; }
.nav-products__list > li:nth-child(6) { --row: 5; }
.nav-products__list > li:nth-child(n + 7) { --row: 6; }

/* Our AI's own line: its card, compact, saying its first words once the menu is open, and the call */
.nav-feature {
  display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 22px 24px 24px;
  background: var(--c-panel); overflow-y: auto;
}
.nav-feature__label { padding-bottom: 2px; }
.nav-feature .ui-card__head { min-height: 46px; padding: 8px 16px; }
.nav-feature .ui-card__icon { width: 26px; height: 26px; }
.nav-feature .ui-card__icon .icon { width: 13px; height: 13px; }
.nav-feature .call { gap: 10px; padding: 14px 16px 14px; }
.nav-feature .call__text { font-size: 14px; line-height: 1.45; }
.nav-feature .call__listening { padding: 0 16px 14px; }
.nav-feature__note { max-width: 22em; font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.nav-feature__call { align-self: flex-start; }

/* About and Get in touch, along the foot, each under its column */
.nav-products__foot {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center;
  border-top: 1px solid var(--line);
}
.nav-products__panel:not(:has(.nav-feature)) .nav-products__foot { grid-template-columns: auto auto; justify-content: start; }
.nav-products__foot .arrow-link { justify-self: start; margin: 13px 26px 14px; font-size: 14.5px; }
.nav-products__foot .arrow-link + .arrow-link { margin-left: 24px; }
.nav-products__foot button.arrow-link { border: 0; padding-inline: 0; color: var(--ink); cursor: pointer; }

/* The page behind dims a little while the catalogue is open; a click there closes it (navbar#closeOnOutsideClick) */
@media (min-width: 981px) {
  .site-nav::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; z-index: -1; height: 100vh;
    background: color-mix(in srgb, var(--c-night) 16%, transparent);
    opacity: 0; visibility: hidden;
    /* It clears as the catalogue leaves: quicker, easing in */
    transition: opacity var(--dur-fast) var(--ease-in), visibility var(--dur-fast);
  }
  .site-nav:has(.nav-products__toggle[aria-expanded="true"])::after {
    opacity: 1; visibility: visible;
    transition: opacity var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
  }
}

/* ---------- The menu button and the phone menu sheet ---------- */
/* Two hairlines that cross into a close mark while the sheet is open */
.menu-toggle {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.menu-toggle:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.menu-toggle__bars { position: relative; width: 18px; height: 9px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: top var(--dur-ui) var(--ease-in-out), transform var(--dur-ui) var(--ease-in-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: calc(100% - 1.5px); }
.site-nav.is-open .menu-toggle__bars::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.site-nav.is-open .menu-toggle__bars::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* The sheet: only on small screens, and only while open */
.site-menu { display: none; }

@media (max-width: 980px) {
  .site-nav__links, .nav-call { display: none; }
  .menu-toggle { display: grid; }
  /* Solid while the sheet is open, the sheet ruled off under it */
  .site-nav.is-open { background-color: var(--c-paper); box-shadow: 0 1px 0 var(--line); }

  /* The open sheet fills the screen under the header, so the page behind it is out of sight; the navbar controller
     also takes the page out of reach (inert). It hangs from the header, which keeps its own height, and it leaves as
     it came, quicker and easing in, the page showing through as it goes. */
  .site-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--c-paper); border-top: 1px solid var(--line);
    opacity: 0; translate: 0 -8px;
    transition: opacity var(--dur-fast) var(--ease-in), translate var(--dur-fast) var(--ease-in), display var(--dur-fast) allow-discrete;
  }
  .site-nav.is-open .site-menu {
    display: flex; opacity: 1; translate: 0 0;
    transition: opacity var(--dur-ui) var(--ease-out), translate var(--dur-ui) var(--ease-out), display var(--dur-ui) allow-discrete;
  }
  @starting-style {
    .site-nav.is-open .site-menu { opacity: 0; translate: 0 -8px; }
  }
  .site-menu__sheet {
    display: flex; flex-direction: column; flex: 1 0 auto;
    padding-top: clamp(24px, 5vw, 40px);
  }
  .site-menu__heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .site-menu__list { list-style: none; display: grid; }
  .site-menu__list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 0 16px;
    font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); line-height: 1.08; letter-spacing: -0.018em;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
  }
  .site-menu__list a .icon { width: 22px; height: 22px; color: var(--ink-mute); }
  /* The page you're on, marked by an amber rule at its edge */
  .site-menu__list a[aria-current="page"] { padding-left: 16px; box-shadow: inset 2px 0 0 var(--amber); }
  /* Each product says where it stands, and what it does where the screen is tall enough to keep the way in in view */
  .site-menu__list .site-menu__product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .site-menu__name { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .site-menu__name .status { flex: none; transform: translateY(-0.2em); }
  .site-menu__tagline {
    max-width: 34em; font-family: var(--font-text); font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.45; color: var(--ink-mute);
    text-wrap: pretty;
  }
  @media (max-height: 719px) { .site-menu__tagline { display: none; } }
  /* About sits apart from the products, a little smaller */
  .site-menu__list--pages { margin-top: clamp(16px, 4vh, 32px); }
  .site-menu__list--pages a { min-height: 56px; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem); }
  /* The ways in sit at the bottom of the sheet, under the thumb, and stay there over a list too long for the screen */
  .site-menu__foot {
    position: sticky; bottom: 0; display: grid; gap: var(--space-3); margin-top: auto;
    padding-block: var(--space-5) max(20px, env(safe-area-inset-bottom, 0px)); background: var(--c-paper);
  }
  .site-menu__foot .btn { --btn-h: 52px; }

  /* The sheet's parts arrive one after another as it opens, dropping into place as the sheet does, from above where
     they land, so none of them pokes past the sheet's foot and flashes its scrollbar on the way in */
  .site-menu__sheet > *, .site-menu__list > li {
    transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out);
    transition-delay: calc(var(--row, 0) * 40ms);
  }
  @starting-style {
    .site-nav.is-open .site-menu__sheet > *,
    .site-nav.is-open .site-menu__list > li { opacity: 0; translate: 0 -10px; }
  }
  .site-menu__list > li:nth-child(1) { --row: 1; }
  .site-menu__list > li:nth-child(2) { --row: 2; }
  .site-menu__list > li:nth-child(3) { --row: 3; }
  .site-menu__list > li:nth-child(4) { --row: 4; }
  .site-menu__list > li:nth-child(n + 5) { --row: 5; }
  .site-menu__sheet > .site-menu__list--pages, .site-menu__list--pages > li { --row: 6; }
  .site-menu__sheet > .site-menu__foot { --row: 7; }

  /* The sheet has its own, larger Get in touch */
  .nav-cta { transition: opacity var(--dur-fast), visibility var(--dur-fast); }
  .site-nav.is-open .nav-cta { opacity: 0; visibility: hidden; }
}
/* Only the narrowest phones are too tight for the header's Get in touch beside the menu button */
@media (max-width: 359px) { .nav-cta { display: none; } }

/* ---------- The page lifts off the footer ---------- */
/* The page ends on rounded corners, and the night footer tucks up under them. The page clips to its corners, so a band
   with a colour of its own at the foot of a page follows the curve too; clipping isn't scrolling, so what sticks
   inside the page still sticks. */
main {
  z-index: 1; background: var(--surface);
  border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl);
  overflow: clip;
}

/* ---------- Footer ---------- */
/* Night, with the rails carried on down it (.surface-night.has-rails, 10_base.css), and room at the foot for the AI
   launcher and back-to-top in the corner */
.site-footer {
  position: relative; margin-top: calc(-1 * var(--radius-xl));
  padding-top: calc(var(--radius-xl) + clamp(72px, 8vw, 128px));
  padding-bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 52px + var(--space-6));
  background: var(--surface); color: var(--ink-soft); font-size: var(--text-small);
}

.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.site-footer__brand { display: grid; align-content: start; gap: var(--space-5); }
.site-footer__line {
  max-width: 10em; font-family: var(--font-display); font-size: var(--text-heading); font-weight: 400;
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink); text-wrap: balance;
}

.site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--col-gap); }
.site-footer__col { display: grid; align-content: start; gap: 18px; }
.site-footer__col ul { list-style: none; display: grid; gap: 10px; }
.site-footer__col :is(a, .site-footer__button) {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink-soft); text-align: left; text-decoration: none;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.site-footer__col :is(a, .site-footer__button):hover { color: var(--ink); text-decoration-color: var(--amber); }
.site-footer__note { display: block; margin-top: 2px; color: var(--ink-mute); font-size: var(--text-caption); }

/* The wordmark from rail to rail (on phones, from margin to margin), wiped open from the top as it arrives */
.site-footer__wordmark { margin-top: clamp(72px, 9vw, 152px); color: var(--ink); }
.site-footer__wordmark .wordmark { width: 100%; }
@media (min-width: 48em) {
  .site-footer__wordmark { margin-inline: calc(-1 * var(--frame-inset)); }
}

/* The bar: the year and the legal pages on the left; on the right, our AI's live dot and South Africa's time */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  margin-top: clamp(28px, 3.2vw, 44px); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-footer__legal a { color: var(--ink-soft); text-decoration: none; transition: color var(--dur-fast); }
.site-footer__legal a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.site-footer__time { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); white-space: nowrap; }
.site-footer__time time { color: var(--ink); font-variant-numeric: tabular-nums; }
.site-footer__time abbr { text-decoration: none; }

/* On wide screens it keeps to the page's thirds of the frame from rail to rail, as .split and the homepage's plates do
   (10_base.css): the line in the first third, then the way round from the line where the first third ends: Products
   there, Company from the middle, Contact from where the second third ends */
@media (min-width: 64em) {
  .site-footer__top {
    --sixth: calc((100% + 2 * var(--frame-inset)) / 6);
    grid-template-columns: calc(2 * var(--sixth) - var(--frame-inset)) var(--sixth) var(--sixth) minmax(0, 1fr);
    gap: 0;
  }
  .site-footer__brand { padding-right: var(--split-pad); }
  .site-footer__nav { display: contents; }
  .site-footer__col { padding-right: var(--space-5); }
}
@media (max-width: 35.99em) {
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__nav > :last-child { grid-column: 1 / -1; }
  /* A finger's height for each link */
  .site-footer__col ul { gap: 0; }
  .site-footer__col li > :is(a, .site-footer__button) { display: inline-flex; align-items: center; min-height: 44px; }
  /* Who answers stays with the number it's about */
  .site-footer__note { margin: -8px 0 10px; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0; padding-top: var(--space-2); }
  .site-footer__time { min-height: 44px; }
}

/* ---------- Back to top ---------- */
/* Just inside the right rail (on phones, which have no rails, at the content's edge), and with the AI launcher in the
   corner, above it and clear of it. Its arrow leads the way up when it's pointed at. Over the night its focus ring is
   amber, where ink wouldn't show (back_to_top_controller.js marks it .is-on-night). */
.back-to-top {
  --btt-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  position: fixed; right: var(--btt-right); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-white); color: var(--c-ink); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity var(--dur-ui) var(--ease-out), translate var(--dur-ui) var(--ease-out), visibility var(--dur-ui), background-color var(--dur-fast);
}
@media (min-width: 48em) {
  .back-to-top { --btt-right: calc(var(--rail) - var(--frame-inset) + var(--space-3)); }
}
.assistant-launcher ~ .back-to-top { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 52px + var(--space-3)); }
/* On phones the launcher is a disc in the corner, and the button stands centred over it */
@media (max-width: 47.99em) {
  .assistant-launcher ~ .back-to-top { --btt-right: calc(max(20px, env(safe-area-inset-right, 0px)) + 4px); }
}
.back-to-top:hover { background: var(--c-paper); }
.back-to-top.is-on-night:focus-visible { outline-color: var(--amber); }
.back-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.back-to-top__icon { width: 18px; height: 18px; transform: rotate(-90deg); transition: translate var(--dur-ui) var(--ease-out); }
.back-to-top:hover .back-to-top__icon { translate: 0 -2px; }

/* On paper, the page lies flat and the chrome stays off it (70_pages.css hides the header and footer on legal pages) */
@media print {
  main { border-radius: 0; overflow: visible; background: none; }
  .site-footer { margin-top: 0; }
}