/* ============================================================================
   BrownPOS — marketing site
   The same espresso-and-gold palette as the product, so the site and the till
   read as one thing. Luxury here comes from space, type and restraint, not from
   ornament: the pages must still open fast on a phone on 3G in Battambang.
   ========================================================================== */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-2: #f1f7f8;
  --surface: #ffffff;
  --surface-2: #f1f7f8;
  --border: #dde8ea;
  --border-strong: #b6cbcf;
  --ink: #0b1220;
  --ink-2: #2b4249;
  --muted: #566a70;
  --brand: #003349;
  --brand-2: #06485f;
  --brand-ink: #e9f3f6;
  --accent: #005d7b;
  --accent-2: #7fd0e2;
  --accent-soft: #e2eef2;
  --accent-ink: #005d7b;
  --ok: #00c48c;
  --ok-ink: #00795a;
  /* the 404 till's own red (VOID tags, strikethrough, the stamp): a deeper brick red reads fine on the light
     page but is too close to the dark theme's near-black ground to read at a glance (ADR-1150) */
  --t404-red: #b3261e;
  --shadow-sm: 0 1px 2px #0b122014;
  --shadow: 0 2px 4px #0b122010, 0 18px 44px -20px #0b122033;
  --shadow-lg: 0 4px 8px #0b122012, 0 40px 90px -30px #0b122047;
  --radius: 12px;
  --radius-lg: 20px;
  --measure: 36rem;
  --gutter: clamp(20px, 5vw, 56px);
  --wrap: 1400px;
  --head-h: 80px;
  /* one height for every control in the bar: menu pill, language switch, theme dial, button */
  --ctl-h: 38px;
  --accent-solid: #005d7b;
  --accent-solid-ink: #ffffff;
  /* Poppins carries the Latin. It has no Khmer, so the browser falls through to Noto Sans Khmer
     glyph by glyph, which is why a mixed line like "BrownPOS ដំណើរការ" still sets correctly. */
  --font: 'Poppins', 'Noto Sans Khmer', 'Khmer OS Battambang', system-ui, -apple-system, sans-serif;

  /* One scale, used everywhere. Poppins is geometric with a tall x-height, so display sizes want
     negative tracking and weight 600; 700 reads as shouting rather than as premium. */
  --step--1: 0.8125rem; /* 13px — micro labels */
  --step-0: 1rem; /* 16px — body */
  --step-1: 1.125rem; /* 18px — lead, card headings */
  --step-2: clamp(1.375rem, 1.8vw, 1.625rem); /* 22 → 26px */
  --step-3: clamp(1.5rem, 2.4vw, 2.125rem); /* 24 → 34px */
  --step-4: clamp(1.875rem, 3.4vw, 2.875rem); /* 30 → 46px */
}

/* Dark comes from the system unless the visitor chose otherwise, and from data-theme when they did.
   Both selectors carry the same tokens; the second is generated from the first so they cannot drift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a0f1a;
    --bg-2: #0e1524;
    --surface: #111a2c;
    --surface-2: #17223a;
    --border: #223050;
    --border-strong: #35486f;
    --ink: #eaf0ff;
    --ink-2: #c3cfe6;
    --muted: #8d9cb8;
    --brand: #001f2d;
    --brand-2: #06333f;
    --accent: #3fa9c4;
    --accent-2: #7fd0e2;
    --accent-soft: #0a2c3a;
    --accent-ink: #7fd0e2;
    --ok: #00c48c;
    --ok-ink: #3fdcae;
    --t404-red: #ff6a5c;
    --shadow-sm: 0 1px 2px #0006;
    --shadow: 0 2px 4px #0006, 0 18px 44px -20px #000000b3;
    --shadow-lg: 0 4px 8px #0008, 0 40px 90px -30px #000000cc;
  }
}
:root[data-theme='dark'] {
  --bg: #0a0f1a;
  --bg-2: #0e1524;
  --surface: #111a2c;
  --surface-2: #17223a;
  --border: #223050;
  --border-strong: #35486f;
  --ink: #eaf0ff;
  --ink-2: #c3cfe6;
  --muted: #8d9cb8;
  --brand: #001f2d;
  --brand-2: #06333f;
  --accent: #3fa9c4;
  --accent-2: #7fd0e2;
  --accent-soft: #0a2c3a;
  --accent-ink: #7fd0e2;
  --ok: #00c48c;
  --ok-ink: #3fdcae;
  --t404-red: #ff6a5c;
  --shadow-sm: 0 1px 2px #0006;
  --shadow: 0 2px 4px #0006, 0 18px 44px -20px #000000b3;
  --shadow-lg: 0 4px 8px #0008, 0 40px 90px -30px #000000cc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* every jump to a place on a page stops below the bar that sits over it, and glides rather than snaps (ADR-739, owner:
   "it should direct to the content topic with smooth effect … apply to all website without stuck") */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 22px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  /* Khmer stacks vowels above and below the base letter, so it needs more room than Latin, and
     Poppins' tall x-height wants air too. One generous line height serves both. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}

/* ---- layout --------------------------------------------------------------- */
.wrap,
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.narrow {
  max-width: 820px;
}
section {
  padding-block: clamp(38px, 5.4vw, 77px);
} /* 40% off the old 64/9vw/128 */
.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* ---- type ----------------------------------------------------------------- */
h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}
h1 {
  font-size: var(--step-4);
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--step-3);
  letter-spacing: -0.028em;
}
h3 {
  font-size: var(--step-1);
  letter-spacing: -0.012em;
  font-weight: 600;
}

/* Latin and Khmer do not read the same size at the same pixel value: Khmer carries its weight in
   the middle of the line with tall marks above and below, so 40px of Khmer looks composed where
   40px of Poppins looks like a poster. Khmer sets its own display sizes a few rules below and is
   deliberately left alone; English sits a little UNDER those pixel values so the two languages read
   at the same volume. Only the two display steps move — body, lead and labels already match. */
:root:lang(en) {
  --step-3: clamp(1.25rem, 1.85vw, 1.625rem); /* 20 → 26px, Khmer h2 is 30px */
  --step-4: clamp(1.625rem, 2.6vw, 2.25rem); /* 26 → 36px, Khmer h1 is 40px */
}
/* Khmer has no capitals and no negative-tracking tradition: tightening it just damages legibility */
:lang(km) h1,
:lang(km) h2,
:lang(km) h3 {
  letter-spacing: 0;
  line-height: 1.45;
}
:lang(km) h1 {
  font-size: clamp(1.625rem, 2.8vw, 2.5rem);
}
:lang(km) h2 {
  font-size: clamp(1.375rem, 2vw, 1.875rem);
}
p {
  margin: 0 0 1.15em;
  max-width: var(--measure);
  color: var(--ink-2);
}
.lead {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-2);
}
/* a banner of words alone ends on its last line, so the band has the same room below its words as above (ADR-722) */
.hero .narrow > :last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .lead {
    font-size: 1.1875rem;
  }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 18px;
}
:lang(km) .eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--accent);
}
.muted {
  color: var(--muted);
}

/* ---- buttons -------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.06s;
}

/* A light sweeps across the face on hover. One pseudo-element, no JavaScript, and `isolate` keeps
   the z-index:-1 inside the button so the label always stays on top. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.62s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.btn:hover::before {
  transform: translateX(120%);
}

/* Primary: a deep, saturated gold with a cream label. The old pairing put near-black on light gold,
   which is technically legible and reads as muddy; cream on deep gold is both lighter and calmer. */
/* --btn-face is the LIGHTEST stop of the gradient, so it is the worst case for the label. It is a
   custom property rather than a literal because a test reads it and checks the contrast: a gradient
   cannot be sampled from computed style, so the value has to be declared somewhere honest.
   Cream on #005d7b is 4.57; anything lighter drops under AA. */
.btn-primary {
  --btn-face: #005d7b;
  background: linear-gradient(180deg, var(--btn-face), #00455c);
  color: #ffffff;
  box-shadow:
    0 6px 18px -10px #00394ccc,
    inset 0 1px 0 #ffffff2e;
}
/* hover deepens rather than brightens: brighter gold would push the label under AA */
.btn-primary:hover {
  --btn-face: #005872;
  background: linear-gradient(180deg, var(--btn-face), #00394c);
  box-shadow:
    0 12px 28px -10px #00394ce6,
    inset 0 1px 0 #ffffff3d;
}
.btn-primary::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.3) 48%, transparent 66%);
}

/* Ghost: the gold fills in from the leading edge rather than simply appearing */
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--accent-soft);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-ghost:hover::after {
  transform: scaleX(1);
}

/* On the dark hero: the ring warms to gold and a soft glow rises behind it */
.btn-on-dark {
  border-color: #ffffff33;
  color: var(--brand-ink);
  background: transparent;
}
.btn-on-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(120% 160% at 50% 130%, #7fd0e252, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-on-dark:hover {
  border-color: var(--accent-2);
  color: #ffffff;
}
.btn-on-dark:hover::after {
  opacity: 1;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
/* the header's call to action: present, never shouting over the wordmark */
.btn-sm {
  min-height: var(--ctl-h);
  padding: 0 18px;
  font-size: 0.875rem;
}

/* ============================================================================
   Main navigation
   A shop owner should be able to tell where they are without reading. So the
   active item carries a gold rule and a dot, hover grows a rule from the centre,
   and the whole bar firms up once the page scrolls.
   ========================================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  /* a light wash rather than plain white (owner review): teal from the left, a little gold from the right, over a tint of the brand */
  background:
    radial-gradient(55% 160% at 6% 0%, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 62%),
    radial-gradient(38% 140% at 96% 0%, color-mix(in srgb, #e0b04f 16%, transparent) 0%, transparent 60%), color-mix(in srgb, color-mix(in srgb, var(--accent-soft) 62%, var(--bg)) 86%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}
.site-head[data-scrolled] {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -12px #0b122040;
}
.site-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 38%, transparent) 22%,
    color-mix(in srgb, #e0b04f 55%, transparent) 50%,
    color-mix(in srgb, var(--accent) 38%, transparent) 78%,
    transparent
  );
}
/* Once the page moves, the bar tightens from 80px to 64px: at rest it can afford presence, in use
   it should give the page back its height. The drawer lives inside .site-head, so redefining the
   token here carries its top edge down with the bar. It is held at full height while the drawer is
   open, or the open panel would jump under the reader's thumb. */
body:not([data-menu]) .site-head[data-scrolled] {
  --head-h: 64px;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--head-h);
  transition: height 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---- wordmark ---- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.015em;
  flex: none;
}
.logo .brand-mark {
  display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.logo:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
}
.logo-word {
  display: inline-block;
}
.logo-word b {
  color: var(--accent-ink);
  font-weight: 600;
}
:root[data-theme='dark'] .logo-word b {
  color: var(--accent-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-word b {
    color: var(--accent-2);
  }
}

/* ---- the menu itself ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--ctl-h);
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.nav-link svg {
  flex: none;
  opacity: 0.7;
  transition:
    opacity 0.2s ease,
    transform 0.32s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link:hover svg {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
}
.nav-link[aria-current] {
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-link[aria-current] svg {
  opacity: 1;
}

/* No-JavaScript baseline: each item carries its own soft pill. */
.nav-link:hover,
.nav-link[aria-current] {
  background: var(--accent-soft);
}

/* ---- the glide -----------------------------------------------------------
   With JavaScript, one pill slides between items instead of each lighting up
   on its own. It rests under the current page and follows the pointer, which
   reads as a single object moving rather than six things blinking.        */
.nav-list.has-glide .nav-link:hover,
.nav-list.has-glide .nav-link[aria-current] {
  background: transparent;
}

.nav-glide {
  /* positioned against .site-head, never against .nav-list: a positioned list would become the
     containing block for the full-width Features panel and crush it into the menu's own box */
  /* centred on the bar rather than placed at a measured `top`: the bar changes height on scroll,
     and a percentage follows that for free while a pixel value would hang where the tall bar was */
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  height: 40px;
  width: 0;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 17%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 #ffffff2e;
  opacity: 0;
  transform: translate(0, -50%);
  transition:
    transform 0.42s cubic-bezier(0.34, 1.3, 0.38, 1),
    width 0.42s cubic-bezier(0.34, 1.3, 0.38, 1),
    opacity 0.2s ease;
}
.nav-glide[data-on] {
  opacity: 1;
}
.nav-glide[data-instant] {
  transition: none;
}

/* a thin gold seam along the top of the pill: the 2026 detail, not a 2014 underline */
.nav-glide::after {
  content: '';
  position: absolute;
  inset-inline: 22%;
  top: -1px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

/* ---- dropdown: a full-width panel, six abreast ---------------------------
   On a laptop the panel spans the whole bar rather than hanging off one link, so
   all six features read as one row. It anchors to .site-head, which means
   .nav-item must not be a positioned ancestor at this width.               */
.nav-item {
  position: static;
}
.nav-toggle {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.nav-caret {
  transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nav-item[data-open] .nav-caret {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -28px #0b122059;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    visibility 0.28s;
}
.nav-item[data-open] .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The same box as .wrap, so the first column's text starts on the logo and the last ends on the
   button. Each column carries 16px of its own padding, so the gutter is reduced by exactly that
   much; otherwise the row sits 16px inboard of everything else on the page. */
.nav-panel-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: calc(var(--gutter) - 16px);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
/* more than six features: three columns of rows, the icon beside its words (ADR-534) */
.nav-panel-inner.is-many {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2px;
}
.nav-panel-inner.is-many a {
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  align-content: center;
  padding: 14px 16px;
}
.nav-panel-inner.is-many a i {
  grid-row: span 2;
}
.nav-panel-inner.is-many a:nth-child(3n + 1)::before {
  display: none;
}
.nav-panel a {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px 16px 22px;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
/* hairlines between columns, never after the last */
.nav-panel a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--border);
}
.nav-panel a:hover {
  background: var(--surface-2);
}
.nav-panel a:hover + a::before {
  opacity: 0;
}

.nav-panel i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-style: normal;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  transition:
    transform 0.3s cubic-bezier(0.3, 1.4, 0.4, 1),
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}
.nav-panel a:hover i {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 0 8px 18px -8px #005d7b8c;
  border-color: var(--accent);
}
.nav-panel i svg {
  display: block;
}
.nav-panel strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav-panel span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}
:lang(km) .nav-panel span {
  line-height: 1.7;
}

/* no rule grows under the item pointed at: its tint and lifted icon say it, and the line read as untidy (ADR-549) */

/* the columns arrive one after another rather than all at once */
@keyframes nav-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.nav-item[data-open] .nav-panel a {
  animation: nav-rise 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

.nav-panel-foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--gutter) 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}
.nav-panel-foot a {
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  gap: 6px;
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-panel-foot a::after,
.nav-panel-foot a + a::before {
  display: none;
}
.nav-panel-foot a:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* six columns need room; below this the panel steps down before the drawer takes over */
@media (max-width: 1240px) {
  .nav-panel-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ---- the Features menu as columns with a spotlight (ADR-689) ----
   Three labelled columns of compact rows, the icon beside its name and line, and a card beside them holding a real screen
   from the demo shops. Same box as .wrap, so the first column starts on the logo and the card ends on the Menu button. */
.nav-mega {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter) 4px calc(var(--gutter) - 12px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.nav-mega.has-spot {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
}
.nav-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
}
.nav-group {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding-inline-end: 10px;
}
.nav-group + .nav-group {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 14px;
}
.nav-group-name {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.nav-mega .nav-group a {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  align-content: center;
  padding: 9px 12px;
  border-radius: 12px;
}
.nav-mega .nav-group a::before {
  display: none;
}
.nav-mega .nav-group a i {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.nav-mega .nav-group a i svg {
  width: 19px;
  height: 19px;
}
.nav-mega .nav-group a strong {
  font-size: 0.9rem;
}
.nav-mega .nav-group a span {
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-spot {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: radial-gradient(120% 90% at 100% 0%, var(--accent-soft), var(--surface-2) 70%);
  overflow: hidden;
}
.nav-item[data-open] .nav-spot {
  animation: nav-rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}
.nav-spot-shot {
  margin: 0 0 6px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.nav-spot-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-spot:hover .nav-spot-shot img {
  transform: scale(1.04);
}
.nav-spot strong {
  font-size: 0.95rem;
}
.nav-spot span {
  font-size: 0.8rem;
}
.nav-panel .nav-spot a.nav-spot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-top: 4px;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.nav-panel .nav-spot a.nav-spot-link::before {
  display: none;
}
.nav-panel .nav-spot a.nav-spot-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* a feature on its way (ADR-692): shown, dimmed a little, with a Soon tag, and not a link */
.nav-panel a.is-soon {
  cursor: default;
}
.nav-panel a.is-soon:hover {
  background: transparent;
}
.nav-panel a.is-soon:hover i {
  transform: none;
  box-shadow: none;
}
.nav-panel a.is-soon i {
  border-style: dashed;
}
.nav-panel a.is-soon span {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}
.nav-soon {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  vertical-align: 2px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a4a00;
  background: #ffe7b3;
  border: 1px solid #f2c46b;
}
:root[data-theme='dark'] .nav-soon {
  color: #ffd48a;
  background: #3a2a0a;
  border-color: #6b4a14;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav-soon {
    color: #ffd48a;
    background: #3a2a0a;
    border-color: #6b4a14;
  }
}
@media (max-width: 1240px) {
  .nav-mega.has-spot {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-spot {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-spot-shot img {
    transition: none;
  }
}

/* ---- language and theme ---- */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang-pick {
  display: inline-flex;
  align-items: stretch;
  height: var(--ctl-h);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: var(--step--1);
  font-weight: 500;
}
.lang-pick a,
.lang-pick span {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
/* A language switched off keeps its flag and its place, exactly as it looked, and simply stops being a
   link (owner review, ADR-373). */
.lang-pick span.is-off {
  cursor: default;
  opacity: 0.45;
}
.lang-pick span.is-off .flag {
  filter: grayscale(1);
}
/* The flag is recognition; the word beside it is what names the language and what a screen reader
   reads. Its ring flips with the pill: a dark hairline on the surface, a light one on the fill. */
.flag {
  flex: none;
  display: block;
  width: 17px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.lang-pick a[aria-current] .flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.lang-pick a:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.lang-pick a[aria-current] {
  background: var(--accent-solid);
  color: var(--accent-solid-ink);
  font-weight: 600;
}

/* ---- the colour-mode dial: an eclipse with a horizon ----------------------------------------
   Three states on one drawing (ADR-1328). Light is the whole sun with its rays out. Dark is the shadow
   biting deep, leaving a crescent, the rays folded away and three stars out. Auto is dusk: the sun half
   sunk behind a horizon line, the rays above it still out, one star up — and the button's border becomes
   a day ring, filled as far round as the clock has gone, because auto goes by the clock (ADR-340). The
   shadow, the sea and the rays share one mask, so the drawing works on any background in either theme. */
@property --day {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.theme-dial {
  position: relative;
  width: var(--ctl-h);
  height: var(--ctl-h);
  flex: none;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--accent-ink);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.3s ease,
    color 0.2s ease;
}
.theme-dial:hover {
  background: var(--accent-soft);
}
/* the day ring: a conic fill from midnight at the top, masked down to the border's width */
.theme-dial::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(var(--accent) calc(var(--day) * 1turn), color-mix(in srgb, var(--accent) 28%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  opacity: 0;
  transition:
    opacity 0.35s ease,
    --day 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.theme-dial .dial {
  position: relative;
  width: 19px;
  height: 19px;
  display: block;
  transition: transform 0.55s cubic-bezier(0.4, 1.5, 0.4, 1);
}
.theme-dial .dial svg {
  display: block;
  overflow: visible;
}
.dial-bite,
.dial-sea,
.dial-rays {
  transform-box: view-box;
}
.dial-bite,
.dial-sea {
  transition: transform 0.55s cubic-bezier(0.5, 1.35, 0.4, 1);
}
.dial-rays {
  transform-origin: 12px 12px;
  transition:
    opacity 0.34s ease,
    transform 0.55s cubic-bezier(0.4, 1.5, 0.4, 1);
}
.dial-stars {
  transition: opacity 0.34s ease 0.08s;
}
.dial-horizon {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  opacity: 0;
  transition:
    stroke-dashoffset 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s,
    opacity 0.2s ease;
}

/* light: the whole sun */
.theme-dial[data-mode='light'] .dial-bite {
  transform: translate(-16px, -10px);
}
.theme-dial[data-mode='light'] .dial-sea,
.theme-dial[data-mode='dark'] .dial-sea {
  transform: translateY(12px);
}
.theme-dial[data-mode='light'] .dial-rays {
  opacity: 1;
  transform: none;
}
.theme-dial[data-mode='light'] .dial-stars {
  opacity: 0;
}

/* dark: a crescent, and the sky comes out */
.theme-dial[data-mode='dark'] .dial-bite {
  transform: translate(-3.6px, -2.6px);
}
.theme-dial[data-mode='dark'] .dial-rays {
  opacity: 0;
  transform: scale(0.4) rotate(80deg);
}
.theme-dial[data-mode='dark'] .dial-stars {
  opacity: 1;
}
.theme-dial[data-mode='dark'] .dial {
  transform: rotate(-150deg);
}
.theme-dial[data-mode='dark'] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* auto: dusk — half a sun on the horizon, one star up, and the day ring on */
.theme-dial[data-mode='auto'] .dial-bite {
  transform: translate(-16px, -10px);
}
.theme-dial[data-mode='auto'] .dial-sea {
  transform: none;
}
.theme-dial[data-mode='auto'] .dial-rays {
  opacity: 1;
  transform: scale(0.88);
}
.theme-dial[data-mode='auto'] .dial-stars {
  opacity: 0.7;
}
.theme-dial[data-mode='auto'] .dial-stars circle:not(:first-child) {
  opacity: 0;
}
.theme-dial[data-mode='auto'] .dial-horizon {
  opacity: 1;
  stroke-dashoffset: 0;
}
.theme-dial[data-mode='auto'] {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.theme-dial[data-mode='auto']::before {
  opacity: 1;
}

.theme-dial:hover .dial {
  transform: rotate(0deg) scale(1.08);
}
.theme-dial[data-mode='dark']:hover .dial {
  transform: rotate(-150deg) scale(1.08);
}
/* the first frame is the remembered state, not a morph from the server's "light" */
:root:not([data-theme-live]) .theme-dial *,
:root:not([data-theme-live]) .theme-dial::before {
  transition: none !important;
}
@media (max-width: 620px) {
  .theme-dial .dial,
  .theme-dial .dial svg {
    width: 16px;
    height: 16px;
  }
}

/* ---- the swap itself: the new colours grow out of the dial in a circle (View Transitions) --------
   site.js animates a clip-path on the new page's snapshot; these rules only stop the browser's default
   cross-fade fighting it. Browsers without the API never match the pseudo-elements and swap at once. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 0;
}
::view-transition-new(root) {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .dial-bite,
  .dial-sea,
  .dial-rays,
  .dial-stars,
  .dial-horizon,
  .theme-dial::before,
  .theme-dial .dial {
    transition: none;
  }
}

/* ---- every page, one sheet (ADR-518) ----------------------------------------------------------
   Menu on a computer and the round button on a phone drop one sheet from the header, as wide as the bar:
   the main menu as tiles, the features with what each does, the footer's columns and a way to get in touch.
   It unrolls from the bar's edge (a clip, not a slide, so nothing moves under the pointer), the groups
   follow a beat apart, and the page behind dims. */
.nav-burger {
  display: none;
  align-items: center;
  gap: 9px;
  height: var(--ctl-h);
  padding: 0 14px 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.nav-burger:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.nav-burger-lines {
  display: block;
  width: 16px;
}
.nav-burger-lines span {
  display: block;
  width: 16px;
  height: 1.7px;
  margin: 3.4px 0;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.2s ease;
}
.nav-burger-word {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
body[data-menu] .nav-burger-lines span:nth-child(1) {
  transform: translateY(5.4px) rotate(45deg);
}
body[data-menu] .nav-burger-lines span:nth-child(2) {
  opacity: 0;
}
body[data-menu] .nav-burger-lines span:nth-child(3) {
  transform: translateY(-5.4px) rotate(-45deg);
}
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ctl-h);
  padding: 0 14px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.nav-menu-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.nav-menu-btn svg {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-menu] .nav-menu-btn {
  background: var(--accent-soft);
  border-color: var(--accent);
}
body[data-menu] .nav-menu-btn svg {
  transform: rotate(45deg);
}

body[data-menu] .site-head {
  backdrop-filter: none;
  background: var(--bg);
  border-bottom-color: var(--border);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(4, 16, 22, 0.42);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
  pointer-events: none;
}
body[data-menu]::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.menu-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* The rings behind the sheet are drawn 160px past its right edge, which made the sheet itself scrollable sideways
     by that much — the blank strip the owner kept seeing on a tablet and a phone (ADR-863). `clip` cuts the decoration
     off without making a scroll container of it, so the list still scrolls down as before. */
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 40px 70px -40px rgba(4, 16, 22, 0.55);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.5s;
}
body[data-menu] .menu-sheet {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition-delay: 0s;
}
.ms-rings {
  position: absolute;
  right: 0;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    transparent 38%,
    color-mix(in srgb, var(--accent) 9%, transparent) 38.4%,
    transparent 39%,
    transparent 52%,
    color-mix(in srgb, var(--accent) 7%, transparent) 52.4%,
    transparent 53%,
    transparent 66%,
    color-mix(in srgb, var(--accent) 5%, transparent) 66.4%,
    transparent 67%
  );
}
/* not .wrap: inside the header that class is the bar itself, a fixed-height flex row.
   Three columns that end level (ADR-532): the pages and the company's links, the features, and a dark card to ask for a demo. */
.menu-sheet-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.85fr);
  grid-template-areas: 'main features spot';
  gap: 20px 32px;
  padding-block: 26px 28px;
  align-items: stretch;
}
.ms-main {
  grid-area: main;
}
.ms-features {
  grid-area: features;
}
.ms-spot {
  grid-area: spot;
}
.ms-group,
.ms-spot {
  min-width: 0;
}
body[data-menu] .ms-group,
body[data-menu] .ms-spot {
  animation: ms-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--g) * 70ms + 80ms);
}
@keyframes ms-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.ms-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ms-title::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--accent);
}
.ms-title b {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

/* the pages: a column of rows that lean in on hover, the one you are on lit */
.ms-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.ms-tile {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px 7px 7px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9688rem;
  border: 1px solid transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ms-tile i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  transition:
    transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1),
    background-color 0.2s ease,
    color 0.2s ease;
}
.ms-tile i svg {
  width: 18px;
  height: 18px;
}
.ms-go {
  color: var(--muted);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ms-tile:hover {
  background: var(--bg-2, var(--accent-soft));
  border-color: var(--border);
  transform: translateX(3px);
}
.ms-tile:hover i {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #06303f);
  transform: rotate(-8deg);
}
.ms-tile:hover .ms-go {
  opacity: 1;
  transform: none;
}
.ms-tile[aria-current] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.ms-tile[aria-current] i {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #06303f);
}
.ms-tile[aria-current]::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold, #e0b04f);
}

/* the company's own links, under the pages */
.ms-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
}
.ms-cols .ms-title {
  margin-bottom: 8px;
}
.ms-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.ms-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-2, var(--ink));
  font-size: 0.9375rem;
  transition:
    background-color 0.2s ease,
    padding 0.2s ease;
}
.ms-links a i {
  display: grid;
  color: var(--muted);
}
.ms-links a i svg {
  width: 17px;
  height: 17px;
}
.ms-links a:hover {
  background: var(--accent-soft);
  padding-inline-start: 12px;
}
.ms-links a[aria-current] {
  color: var(--accent-ink);
  font-weight: 600;
}

/* the features: cards in two columns, what each does under its name */
.ms-features {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  border-radius: 22px;
  background: var(--bg-2, color-mix(in srgb, var(--accent-soft) 50%, var(--bg)));
  border: 1px solid var(--border);
}
.ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  flex: 1 1 auto;
}
.ms-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* the box for every feature, beside the last one (ADR-551) */
.ms-list li.is-more a {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.ms-list li.is-more a i {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-ink));
}
.ms-list li.is-more a strong {
  color: var(--accent-ink);
}
.ms-list li.is-more a:hover {
  border-style: solid;
  border-color: var(--accent);
}
.ms-list a {
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ms-list a i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ms-list a strong {
  font-size: 0.9375rem;
  line-height: 1.25;
}
.ms-list a small {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--muted);
}
.ms-list a:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 14px 28px -22px rgba(4, 16, 22, 0.55);
  transform: translateY(-2px);
}
.ms-list a:hover i {
  transform: scale(1.08) rotate(-6deg);
}
.ms-list a[aria-current] {
  border-color: var(--accent);
}
.ms-list a[aria-current] strong {
  color: var(--accent-ink);
}
.ms-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  padding: 12px 4px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.ms-more:hover svg {
  transform: translateX(3px);
}
.ms-more svg {
  transition: transform 0.2s ease;
}

/* the card: a demo, the phone and Telegram, on the brand's deep teal */
.ms-spot {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 18px;
  border-radius: 22px;
  color: #eaf6f9;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 70%, #9fdeeb) 0%, transparent 55%), linear-gradient(160deg, #0a5a73 0%, #06303f 70%);
  box-shadow: 0 30px 60px -36px rgba(4, 16, 22, 0.8);
}
.ms-spot::before {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 26px rgba(255, 255, 255, 0.04),
    0 0 0 52px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
.ms-spot-mark {
  position: absolute;
  right: 18px;
  top: 18px;
  opacity: 0.9;
}
.ms-spot-mark svg {
  width: 38px;
  height: 38px;
}
.ms-spot-kicker {
  margin: 0;
  padding-right: 48px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fdeeb;
}
.ms-spot-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.ms-spot-cta {
  align-self: flex-start;
  margin-top: 4px;
  background: #fff;
  color: #06303f;
  border-color: #fff;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}
.ms-spot-cta:hover {
  background: #e7f6fa;
  color: #06303f;
}
/* three blocks, each reading in full (ADR-769, owner: "redesign into 3 blocked with professional so we can read full text
   you add design with nice svg icon"). They were one nowrap line each with an ellipsis eating the end of the sentence. */
.ms-spot-points {
  list-style: none;
  margin: 6px 0 0;
  padding: 12px 0 0;
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ms-spot-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.ms-spot-points li:hover {
  border-color: rgba(159, 222, 235, 0.45);
  background: rgba(255, 255, 255, 0.1);
}
.ms-spot-point-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #06303f;
  background: #9fdeeb;
}
.ms-spot-point-icon svg {
  width: 17px;
  height: 17px;
}
.ms-spot-point-words {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ms-spot-point-words b {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.ms-spot-point-words small {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #cfe7ef;
}
/* the phone number and Telegram each on a row of their own, the full width of the card, so a number never breaks (owner: "make it to separate row") */
.ms-spot-chips {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ms-spot-chips .ms-chip {
  justify-content: center;
  white-space: nowrap;
}
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ctl-h);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.ms-chip svg {
  width: 17px;
  height: 17px;
  color: var(--accent-ink);
}
.ms-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ms-spot .ms-chip {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.ms-spot .ms-chip svg {
  color: #9fdeeb;
}
.ms-spot .ms-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}
.ms-spot .lang-pick {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

/* the bar holds Home, Features and Pricing, the dial, the demo button and Menu with its word; a narrow computer draws them closer */
@media (min-width: 1025px) and (max-width: 1180px) {
  .site-head .wrap {
    gap: 14px;
  }
  .nav-list .nav-link {
    padding: 0 10px;
  }
  .site-nav {
    gap: 8px;
  }
}
@media (max-width: 1240px) {
  .menu-sheet-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'features features' 'main spot';
  }
}
@media (max-width: 1024px) {
  .nav-burger {
    display: inline-flex;
    order: 3;
  }
  .nav-menu-btn {
    display: none;
  }
  .nav-list {
    display: none;
  }
  .site-nav > .btn {
    display: none;
  }
  .nav-tools {
    margin-inline-start: auto;
  }
  body[data-menu] {
    overflow: hidden;
  }
  .nav-glide {
    display: none;
  }
}
@media (max-width: 760px) {
  .menu-sheet-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'main' 'features' 'spot';
    gap: 18px;
    padding-block: 16px 26px;
  }
  .ms-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ms-tile {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 8px;
    font-size: 0.9063rem;
    background: var(--bg-2, var(--accent-soft));
    border-color: var(--border);
  }
  .ms-tile i {
    width: 32px;
    height: 32px;
  }
  .ms-go {
    display: none;
  }
  .ms-features {
    padding: 14px 12px 10px;
    border-radius: 18px;
  }
  .ms-list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  /* right: 0, not -160px: hanging the decoration past the edge made the sheet itself scrollable sideways by that
     much, which is the blank strip on a tablet and a phone (ADR-863) */
  .ms-rings {
    width: 360px;
    height: 360px;
    right: 0;
    top: -140px;
  }
  .ms-spot {
    border-radius: 18px;
  }
  .ms-spot-cta {
    align-self: stretch;
    justify-content: center;
  }
  .ms-spot-chips > * {
    flex: 1;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-sheet,
  body::after {
    transition: none;
  }
  body[data-menu] .ms-group,
  body[data-menu] .ms-spot {
    animation: none;
  }
}

/* ---- questions and answers (ADR-519) --------------------------------------------------------------
   The page's width: the title, a count, a drawing and a way to ask stay beside the list while it is read;
   one answer is open at a time, and each opens with its number lit and its plus turned to a minus. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
/* the intro as a help desk (ADR-710): the brand ground, the count set large, the section's own questions arriving as a
   customer's messages one after another with a reply typing under them, and the way to ask anything else */
.faq-intro {
  position: sticky;
  top: calc(var(--head-h) + 28px);
  display: grid;
  justify-items: start;
  gap: 12px;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 26px;
  color: #eaf0ffd9;
  background: linear-gradient(150deg, var(--brand-2), var(--brand) 70%);
  isolation: isolate;
}
.faq-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #eaf0ff1f 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: radial-gradient(90% 70% at 100% 0%, #000 20%, transparent 75%);
}
.faq-intro .eyebrow {
  color: var(--accent-2);
}
.faq-intro .eyebrow::before {
  background: var(--accent-2);
}
.faq-intro h2 {
  margin: 0;
  color: #fff;
}
.faq-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: #eaf0ffcc;
  font-weight: 500;
}
.faq-count b {
  color: var(--accent-2);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.faq-chat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-height: 150px;
  margin: 6px 0 4px;
}
.faq-bubble {
  position: relative;
  max-width: 88%;
  padding: 11px 14px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}
.faq-bubble.is-q {
  display: none;
  justify-self: start;
  border-bottom-left-radius: 6px;
  color: #0b1220;
  background: #fff;
  box-shadow: 0 10px 24px -14px #000c;
  cursor: pointer;
}
.faq-bubble.is-q.is-on {
  display: block;
  animation: faq-bubble 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
.faq-bubble.is-q:hover {
  background: #f1f7f8;
}
.faq-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #04202a;
  opacity: 0.5;
  animation: faq-type 1s ease-in-out infinite;
}
.faq-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.faq-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.faq-bubble.is-a {
  justify-self: end;
  border-bottom-right-radius: 6px;
  color: #04202a;
  background: var(--accent-2);
}
.faq-intro.is-typing .faq-bubble.is-a {
  animation: faq-bubble 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
.faq-typing {
  display: none;
  gap: 4px;
  padding: 3px 0;
}
.faq-intro.is-typing .faq-typing {
  display: inline-flex;
}
.faq-intro.is-typing .faq-bubble.is-a > span {
  display: none;
}
@keyframes faq-bubble {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
}
@keyframes faq-type {
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.faq-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px 10px 16px;
  border: 1px solid #ffffff2e;
  border-radius: 16px;
  color: #eaf0ffd9;
  background: #ffffff10;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.faq-ask b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #04202a;
  background: var(--accent-2);
  font-weight: 600;
}
.faq-ask:hover {
  border-color: #ffffff55;
  background: #ffffff1c;
}
.faq-ask svg {
  transition: transform 0.2s ease;
}
.faq-ask:hover svg {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .faq-bubble.is-q.is-on,
  .faq-bubble.is-a,
  .faq-typing i {
    animation: none;
  }
  .faq-typing {
    display: none;
  }
}
.faq-list {
  display: grid;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    background-color 0.25s ease;
}
.faq-item:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg));
  box-shadow: 0 18px 40px -30px rgba(4, 16, 22, 0.45);
}
.faq-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  border-radius: 18px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.faq-n {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--accent-soft);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.faq-item[open] .faq-n {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #06303f);
  transform: rotate(-6deg);
}
.faq-q {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.faq-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.faq-toggle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.25s ease;
}
.faq-toggle i + i {
  transform: rotate(90deg);
}
.faq-item[open] .faq-toggle {
  background: var(--accent);
  border-color: var(--accent);
}
.faq-item[open] .faq-toggle i {
  background: #fff;
}
.faq-item[open] .faq-toggle i + i {
  transform: rotate(0deg);
}
.faq-a {
  padding: 0 20px 20px 74px;
}
.faq-a p {
  margin: 0;
  color: var(--ink-2);
  max-width: 68ch;
}
.faq-item[open] .faq-a {
  animation: faq-open 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* the glide (ADR-735): where the script runs it animates the answer's own height, so the plain reveal above is left to a
   page without it. A question on its way out wears its shut face from the first frame, or it would sit lit up while it
   folds; the words of the answer coming in rise a moment after its box, so the two do not arrive flat together. */
.faq-item.is-glide[open] .faq-a {
  animation: none;
}
.faq-item.is-shut {
  border-color: var(--border);
  background: var(--bg);
  box-shadow: none;
}
.faq-item.is-shut .faq-n {
  color: var(--accent-ink);
  background: var(--accent-soft);
  transform: none;
}
.faq-item.is-shut .faq-toggle {
  background: transparent;
  border-color: var(--border-strong);
}
.faq-item.is-shut .faq-toggle i {
  background: var(--ink);
}
.faq-item.is-shut .faq-toggle i + i {
  transform: rotate(90deg);
}
.faq-item.is-lit .faq-a > * {
  animation: faq-rise 0.3s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes faq-rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}
@media (max-width: 900px) {
  .faq {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .faq-intro {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 16px;
  }
  .faq-intro > :not(.faq-art) {
    grid-column: 1;
  }
}
@media (max-width: 620px) {
  .faq-item summary {
    gap: 12px;
    padding: 14px 14px;
  }
  .faq-n {
    min-width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .faq-q {
    font-size: 1rem;
  }
  .faq-a {
    padding: 0 16px 16px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a,
  .faq-item.is-lit .faq-a > * {
    animation: none;
  }
  .faq-n,
  .faq-toggle i {
    transition: none;
  }
}

/* ---- hero ----------------------------------------------------------------- */
/* Symmetric padding, deliberately: the band used to carry 132px above the content and 0 below,
   which read as a large gap at the top rather than as a centred composition. */
/* The hero wears the sign-in panel's ground: a diagonal three-stop gradient rather than one flat
   brand colour, two lights drifting across it, a masked dot grid, and the concentric rings that
   read as a scanner's field. The dots move onto their own element so ::after is free for the
   rings — the same three layers the login panel has. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--brand-ink);
  padding-block: clamp(52px, 5.6vw, 76px);
  background: linear-gradient(160deg, var(--brand-2) 0%, var(--brand) 55%, #021a26 100%);
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -30% -20% auto -20%;
  height: 150%;
  pointer-events: none;
  background: radial-gradient(38% 42% at 22% 76%, #7fd0e24d, transparent 66%), radial-gradient(34% 38% at 80% 16%, #00c48c24, transparent 68%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(3%, -1%, 0) scale(1.02);
  }
}
/* the rings: clipped by the hero's own overflow, so only the arc shows */
.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 456px;
  height: 456px;
  right: -162px;
  bottom: -192px;
  border-radius: 50%;
  border: 1px solid #7fd0e247;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 35px #7fd0e20f,
    0 0 0 52px #7fd0e20d,
    0 0 0 103px #7fd0e208;
}
/* a faint dot grid, the way a receipt's perforation reads up close */
.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: radial-gradient(circle, #eaf0ff1a 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(82% 72% at 28% 38%, #000 24%, transparent 80%);
  animation: grid-drift 34s linear infinite;
}
@keyframes grid-drift {
  to {
    background-position: 24px 24px;
  }
}
/* the rings and the lights sit behind the content: both pseudos are positioned, and without
   this the later one (::after, the rings) paints straight over the till. */
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero h1 {
  color: var(--brand-ink);
  max-width: 19ch;
}
:lang(km) .hero h1 {
  max-width: 24ch;
}
.hero p {
  color: #eaf0ffd0;
}
.hero .eyebrow {
  color: var(--accent-2);
}
.hero .eyebrow::before {
  background: var(--accent-2);
}
.hero-grid {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
/* ---- the hero's proof ------------------------------------------------------
   A crop of the real till taking money, not the whole screen and not a payment
   QR: a visitor has not bought anything yet, so a QR asks them for the one thing
   they are not here to do. Two chips call out the claims the image cannot say. */
.hero-aside {
  max-width: none;
  margin-inline: 0;
}
.shot {
  position: relative;
}
/* ---- the till, drawn and animated ------------------------------------------
   A screenshot of a point of sale looks like every other point of sale. This is the same sale
   played out instead: a scanner beam, three items arriving, the total counting in two currencies,
   a KHQR code drawing itself, a receipt sliding out, and the day going off to Telegram. One 15s
   clock drives all of it, so every part carves its window out of the same keyframe percentages
   rather than drifting on its own delay.

   The still, unanimated SVG is the FINISHED sale: rows in, $3.60 showing, receipt out, synced.
   That is what anyone who has asked for less motion sees, and it is a complete picture, not a
   blank one. */
.till {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.till text {
  font-family: var(--font);
}

.t-body {
  stroke: var(--border);
  stroke-width: 1.5;
}
/* the device body: a gradient rather than a flat fill, a hairline of light along its top edge,
   and a soft shadow beneath so it sits above the hero rather than being pasted onto it */
.t-shadow {
  fill: #ffffff;
}
.t-gloss {
  fill: #ffffff;
  opacity: 0.55;
}
:root[data-theme='dark'] .t-gloss {
  fill: #ffffff;
  opacity: 0.06;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .t-gloss {
    fill: #ffffff;
    opacity: 0.06;
  }
}

.t-bar {
  fill: var(--surface-2);
}
.t-line {
  stroke: var(--border);
  stroke-width: 1.5;
}
.t-slot {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}
.t-name {
  font-size: 21px;
  font-weight: 500;
  fill: var(--ink);
}
.t-dim {
  font-size: 18px;
  font-weight: 500;
  fill: var(--muted);
}
.t-price {
  font-size: 20px;
  font-weight: 500;
  fill: var(--ink-2);
}
.t-total {
  font-size: 27px;
  font-weight: 600;
  fill: var(--ink);
  letter-spacing: -0.02em;
}
.t-sum {
  font-size: 30px;
  font-weight: 600;
  fill: var(--ink);
  letter-spacing: -0.03em;
}
.t-riel {
  font-size: 19px;
  font-weight: 500;
  fill: var(--muted);
}
.t-chip {
  fill: var(--accent-soft);
  stroke: color-mix(in srgb, var(--accent) 30%, transparent);
  stroke-width: 1.5;
}
.t-chip-t {
  font-size: 17px;
  font-weight: 600;
  fill: var(--accent-ink);
}
.t-qty {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1.5;
}
.t-pay {
  fill: var(--brand);
}
.t-pay-t {
  font-size: 22px;
  font-weight: 600;
  fill: var(--brand-ink);
}
.t-pay-a {
  font-size: 22px;
  font-weight: 600;
  fill: var(--accent-2);
}
.t-paper {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}
.t-ink {
  fill: var(--border-strong);
}
.t-ok {
  fill: var(--ok);
}
.t-mark {
  fill: var(--accent);
}

/* On a phone the whole drawing is under 350px wide, and SVG type scales with it: 21 user units
   land at 10px. The labels step up so the till still reads as a till rather than as texture. Phones
   only: from 621px the tablet hero draws the till at 560px or more, where the stepped-up names run
   into the quantity steppers. */
@media (max-width: 620px) {
  .t-name {
    font-size: 25px;
  }
  .t-dim,
  .t-price {
    font-size: 22px;
  }
  .t-riel {
    font-size: 22px;
  }
  .t-total {
    font-size: 30px;
  }
  .t-sum {
    font-size: 34px;
  }
  .t-chip-t {
    font-size: 20px;
  }
  .t-pay-t,
  .t-pay-a {
    font-size: 25px;
  }
}

/* ---- the parts that move -------------------------------------------------- */
/* the scanner runs on its own short loop: it is the machine being awake, not a step in the sale */
.t-beam {
  opacity: 0;
  transform-box: view-box;
}
.till:not(.t-still) .t-beam {
  animation: t-beam 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes t-beam {
  0%,
  8% {
    transform: translateX(0);
    opacity: 0;
  }
  14%,
  76% {
    opacity: 0.95;
  }
  86%,
  100% {
    transform: translateX(492px);
    opacity: 0;
  }
}

/* three items arrive, one per scan, and stay until the sale resets */
.t-row-a,
.t-row-b,
.t-row-c {
  transform-box: view-box;
}
@keyframes t-row-a {
  0%,
  5.9% {
    opacity: 0;
    transform: translateX(24px);
  }
  8.7%,
  94.6% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes t-row-b {
  0%,
  14.6% {
    opacity: 0;
    transform: translateX(24px);
  }
  17.3%,
  94.6% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes t-row-c {
  0%,
  23.2% {
    opacity: 0;
    transform: translateX(24px);
  }
  26%,
  94.6% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: translateX(24px);
  }
}
.till:not(.t-still) .t-row-a {
  animation: t-row-a 15s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.till:not(.t-still) .t-row-b {
  animation: t-row-b 15s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.till:not(.t-still) .t-row-c {
  animation: t-row-c 15s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

/* a total cannot tween, so four printed values hand over to each other on the same clock */
@keyframes t-slot-0 {
  0%,
  5.9% {
    opacity: 1;
  }
  6%,
  94.9% {
    opacity: 0;
  }
  95%,
  100% {
    opacity: 1;
  }
}
@keyframes t-slot-1 {
  0%,
  5.9% {
    opacity: 0;
  }
  6%,
  14.6% {
    opacity: 1;
  }
  14.7%,
  100% {
    opacity: 0;
  }
}
@keyframes t-slot-2 {
  0%,
  14.6% {
    opacity: 0;
  }
  14.7%,
  23.2% {
    opacity: 1;
  }
  23.3%,
  100% {
    opacity: 0;
  }
}
@keyframes t-slot-3 {
  0%,
  23.2% {
    opacity: 0;
  }
  23.3%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
.t-slot-0,
.t-slot-1,
.t-slot-2 {
  opacity: 0;
}
.till:not(.t-still) .t-slot-0 {
  animation: t-slot-0 15s steps(1, end) infinite;
}
.till:not(.t-still) .t-slot-1 {
  animation: t-slot-1 15s steps(1, end) infinite;
}
.till:not(.t-still) .t-slot-2 {
  animation: t-slot-2 15s steps(1, end) infinite;
}
.till:not(.t-still) .t-slot-3 {
  animation: t-slot-3 15s steps(1, end) infinite;
}

/* a light crosses the Pay bar the moment the sale becomes payable */
.t-sweep {
  opacity: 0;
  transform-box: view-box;
}
.till:not(.t-still) .t-sweep {
  animation: t-sweep 15s ease-in-out infinite;
}
@keyframes t-sweep {
  0%,
  26% {
    transform: translateX(-170px);
    opacity: 0;
  }
  28%,
  35% {
    opacity: 0.85;
  }
  37%,
  100% {
    transform: translateX(600px);
    opacity: 0;
  }
}

/* the KHQR panel rises over the sale, draws its code, is paid, and gets out of the way */
.t-qr-panel {
  opacity: 0;
  transform-box: view-box;
}
.till:not(.t-still) .t-qr-panel {
  animation: t-qr-panel 15s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes t-qr-panel {
  0%,
  34% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  38%,
  56% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.99);
  }
}
/* the code wipes on rather than fading: it reads as being drawn, which is what a scanner sees */
.t-qr-cells {
  clip-path: inset(0 100% 0 0);
}
.till:not(.t-still) .t-qr-cells {
  animation: t-qr-cells 15s cubic-bezier(0.35, 0.1, 0.3, 1) infinite;
}
@keyframes t-qr-cells {
  0%,
  38% {
    clip-path: inset(0 100% 0 0);
  }
  47%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.t-tick {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.till:not(.t-still) .t-tick {
  animation: t-tick 15s cubic-bezier(0.34, 1.4, 0.4, 1) infinite;
}
@keyframes t-tick {
  0%,
  47% {
    opacity: 0;
    transform: scale(0.4);
  }
  51%,
  56% {
    opacity: 1;
    transform: scale(1);
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* the receipt slides out from behind the device, and the day flies off to Telegram */
.t-receipt {
  transform-box: view-box;
}
.till:not(.t-still) .t-receipt {
  animation: t-receipt 15s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes t-receipt {
  0%,
  58% {
    transform: translateY(-152px);
  }
  68%,
  94.6% {
    transform: none;
  }
  96%,
  100% {
    transform: translateY(-152px);
  }
}
.t-plane {
  opacity: 0;
  transform-box: view-box;
}
.till:not(.t-still) .t-plane {
  animation: t-plane 15s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
@keyframes t-plane {
  0%,
  70% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  74%,
  86% {
    opacity: 1;
    transform: translate(-14px, -20px) scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(140px, -320px) scale(0.85);
  }
}

/* the status chip is the whole promise: it sells offline, then catches up by itself */
.t-off {
  opacity: 0;
}
.t-on {
  opacity: 1;
}
.till:not(.t-still) .t-off {
  animation: t-off 15s steps(1, end) infinite;
}
.till:not(.t-still) .t-on {
  animation: t-on 15s steps(1, end) infinite;
}
@keyframes t-off {
  0%,
  73.9% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
  }
}
@keyframes t-on {
  0%,
  73.9% {
    opacity: 0;
  }
  74%,
  94.9% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
.t-off-t {
  fill: #9a5b0e;
}
:root[data-theme='dark'] .t-off-t {
  fill: #f3bb6a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .t-off-t {
    fill: #f3bb6a;
  }
}
/* the till's own status, drawn (ADR-559): once synced the pill glows and the cloud breathes, as the till's does */
.t-on-t {
  fill: var(--ok-ink);
}
.t-on-glow {
  opacity: 0;
}
.till:not(.t-still) .t-on-glow {
  animation: t-on-glow 2.4s ease-out infinite;
}
@keyframes t-on-glow {
  0% {
    opacity: 0.55;
    stroke-width: 2;
  }
  80%,
  100% {
    opacity: 0;
    stroke-width: 12;
  }
}
.till:not(.t-still) .t-on-ico {
  animation: t-breathe 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes t-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

/* the 404 till (ADR-1130): the same device, mid-search, finding nothing. Its own short loop, decoupled from the
   home till's 15s timeline, so it reads clearly on a page nobody stays on long: scan, miss, three lines struck
   through, a voided-receipt stamp settling in. */
.t404-chip {
  fill: rgba(0, 93, 123, 0.1);
  stroke: rgba(0, 93, 123, 0.35);
  stroke-width: 1.5;
}
.t404-chip-t {
  font-size: 17px;
  font-weight: 600;
  fill: var(--accent-ink);
}
.t404-chip.is-miss {
  fill: color-mix(in srgb, var(--t404-red) 10%, transparent);
  stroke: color-mix(in srgb, var(--t404-red) 38%, transparent);
}
.t404-chip-t.is-miss {
  fill: var(--t404-red);
}
.t404-scan,
.t404-miss {
  transform-box: view-box;
}
.t404-miss {
  opacity: 0;
}
.till-404:not(.t-still) .t404-scan {
  animation: t404-scan 6s steps(1, end) infinite;
}
.till-404:not(.t-still) .t404-miss {
  animation: t404-miss 6s steps(1, end) infinite;
}
@keyframes t404-scan {
  0%,
  45% {
    opacity: 1;
  }
  45.1%,
  100% {
    opacity: 0;
  }
}
@keyframes t404-miss {
  0%,
  45% {
    opacity: 0;
  }
  45.1%,
  100% {
    opacity: 1;
  }
}

.t404-cursor {
  fill: var(--accent);
}
.till-404:not(.t-still) .t404-cursor {
  animation: t404-cursor 1s steps(1, end) infinite;
}
@keyframes t404-cursor {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.t404-strike {
  stroke: var(--t404-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.till-404:not(.t-still) .t404-strike {
  animation: t404-strike 6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.till-404:not(.t-still) .t404-strike-b {
  animation-delay: 0.35s;
}
.till-404:not(.t-still) .t404-strike-c {
  animation-delay: 0.7s;
}
@keyframes t404-strike {
  0%,
  8% {
    stroke-dashoffset: 320;
  }
  30%,
  100% {
    stroke-dashoffset: 0;
  }
}

.t404-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--t404-red);
  opacity: 0;
}
.till-404:not(.t-still) .t404-row-a .t404-tag {
  animation: t404-tag 6s steps(1, end) infinite;
}
.till-404:not(.t-still) .t404-row-b .t404-tag {
  animation: t404-tag 6s steps(1, end) infinite 0.35s;
}
.till-404:not(.t-still) .t404-row-c .t404-tag {
  animation: t404-tag 6s steps(1, end) infinite 0.7s;
}
@keyframes t404-tag {
  0%,
  22% {
    opacity: 0;
  }
  22.1%,
  100% {
    opacity: 0.85;
  }
}

.t404-total {
  font-size: 44px;
  font-weight: 700;
  fill: var(--t404-red);
  letter-spacing: -0.02em;
}

.t404-stamp {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0;
}
.t404-stamp-box {
  fill: none;
  stroke: var(--t404-red);
  stroke-width: 3;
}
.t404-stamp-t {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  fill: var(--t404-red);
  text-anchor: middle;
}
.till-404:not(.t-still) .t404-stamp {
  animation: t404-stamp 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes t404-stamp {
  0%,
  46% {
    opacity: 0;
    transform: scale(1.5) rotate(-16deg);
  }
  58%,
  96% {
    opacity: 0.92;
    transform: scale(1) rotate(-16deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(-16deg);
  }
}

@media (max-width: 700px) {
  .t404-total {
    font-size: 36px;
  }
  .t404-stamp-t {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t404-scan {
    opacity: 1;
  }
  .t404-miss,
  .t404-cursor {
    opacity: 0;
    animation: none;
  }
  .t404-strike {
    stroke-dashoffset: 0;
    animation: none;
  }
  .t404-tag {
    opacity: 0.85;
    animation: none;
  }
  .t404-stamp {
    opacity: 0.92;
    transform: scale(1) rotate(-16deg);
    animation: none;
  }
}

@media (max-width: 979px) {
  .hero-aside {
    margin-inline: 0;
  }
}

/* ---- the home hero's first impression (ADR-537) ----------------------------
   On a computer the hero and the ticker under it fill the first screen, so the visit opens on one
   composed picture rather than a band with the next section peeking in. The words arrive one after
   another, the till settles in after them, and a soft light and a slight tilt follow the pointer
   (the three floating claims were taken away again at the owner's word, ADR-552). Nothing here hides content from someone without scripts or motion:
   the entrance runs on CSS alone and ends where the page would be anyway. */
@media (min-width: 980px) {
  /* a quarter shorter than the whole first screen, at the owner's word (ADR-558): tighter padding and a smaller till,
     still ending on the content's right edge */
  .hero.is-till {
    padding-block: clamp(42px, 3vw, 44px);
  }
  /* the small note under the buttons sits closer to them (its gap is written on the element, hence !important) */
  .hero.is-till .hero-copy > p[style] {
    margin-top: 14px !important;
  }
  .hero.is-till .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  }
  .hero.is-till .hero-aside {
    width: 100%;
    justify-self: end;
  }
}
.hero.is-till h1 {
  background: linear-gradient(100deg, var(--brand-ink) 0%, var(--brand-ink) 42%, var(--accent-2) 50%, var(--brand-ink) 58%, var(--brand-ink) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    hero-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    hero-shine 2.4s 1s ease-in-out both;
}
@keyframes hero-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.hero-copy > * {
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-copy > :nth-child(2) {
  animation-delay: 0.08s;
}
.hero-copy > :nth-child(3) {
  animation-delay: 0.18s;
}
.hero-copy > :nth-child(4) {
  animation-delay: 0.28s;
}
.hero-copy > :nth-child(5) {
  animation-delay: 0.38s;
}
.hero.is-till .hero-aside {
  animation: hero-settle 1.1s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hero-settle {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.95);
  }
}
/* the tilt: the script sets --tx and --ty between -1 and 1 from where the pointer is */
.hero.is-till .shot {
  transform: perspective(1400px) rotateY(calc(var(--tx, 0) * 5deg)) rotateX(calc(var(--ty, 0) * -4deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), #7fd0e22e, transparent 70%);
}
.hero.is-lit .hero-glow {
  opacity: 1;
}
/* ---- a sub-page's picture, beside its words (owner review, ADR-666) ------------------------------
   It used to hang under the words edge to edge, which made a banner with a picture twice the height of one
   without. Now it takes the right half of the banner, as the home page's till does: the words keep the left,
   and the banner stays about as tall as a banner with words alone. Behind the screen, a second screen and a
   soft light give it depth; once, as the page opens, a scanner's light passes down it; after that it only
   leans a little toward the pointer. The screenshot is never transformed at rest, so it stays sharp. */
@media (min-width: 980px) {
  .hero.is-shot .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  }
}
.hero.is-shot .hero-aside {
  position: relative;
  animation: hero-settle 1.1s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* the light behind the screen */
.hero.is-shot .hero-aside::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #7fd0e238, #00c48c14 55%, transparent 100%);
}
.hero-pic {
  position: relative;
  margin: 0;
  transform: perspective(1400px) rotateY(calc(var(--tx, 0) * 4deg)) rotateX(calc(var(--ty, 0) * -3deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the second screen, stacked behind and a step down to the right */
.hero-pic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-lg);
  transform: translate(18px, 18px);
  background: linear-gradient(150deg, #7fd0e22e, #ffffff0a 60%);
  border: 1px solid #7fd0e238;
}
.hero-pic .frame {
  position: relative;
  border-color: #ffffff2e;
  box-shadow:
    0 30px 70px -24px #00060bcc,
    0 0 0 1px #0000001a;
}
/* the scanner's light: one pass, top to bottom, then gone */
@media (max-width: 620px) {
  .hero-pic::before {
    transform: translate(10px, 10px);
  }
}

/* the screenshot sits in a window frame: a bar with three lights and what the screen shows */
.frame {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.frame img {
  display: block;
}
.frame-plain {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--surface);
}

/* ---- trust strip ---------------------------------------------------------- */
/* A ticker rather than four static lines: it keeps moving, which suits a shop, and it fits any
   number of claims at any width without wrapping. */
.strip {
  background: var(--brand-2);
  color: #eaf0ffc7;
  padding-block: 20px;
  font-size: 0.9375rem;
  overflow: hidden;
  position: relative;
}
.strip::before,
.strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--brand-2), transparent);
}
.strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--brand-2), transparent);
}
/* 75s for eleven claims: the duration tracks the run's length so the speed stays constant */
.ticker {
  display: flex;
  width: max-content;
  animation: ticker 75s linear infinite;
}
.strip:hover .ticker {
  animation-play-state: paused;
}
.ticker-run {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-inline-end: 44px;
}
.ticker-run span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ticker-run b {
  color: var(--accent-2);
  font-weight: 600;
}
/* --accent-2, not --accent: on this dark strip the accent is a dark teal on a dark teal and
   measured 1.30:1. The light companion is the one that belongs on a brand ground. */
.ticker-run svg {
  color: var(--accent-2);
  opacity: 0.95;
  flex: none;
}
.ticker-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eaf0ff45;
  flex: none;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-dots {
    animation: none;
  }
  .hero-copy > *,
  .hero.is-till h1,
  .hero.is-till .hero-aside {
    animation: none;
  }
  .hero.is-till h1 {
    background-position: 0 0;
  }
  .hero.is-till .shot {
    transform: none;
    transition: none;
  }
  .hero.is-shot .hero-aside,
  .hero-pic {
    transform: none;
    transition: none;
  }
  .hero-glow {
    display: none;
  }
  .card,
  .card::before,
  .card::after,
  .card-icon,
  a.card .more::after {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
  .card:hover .card-icon {
    transform: none;
  }
  /* the till holds its finished state: a sale rung up, paid and printed, with nothing moving */
  .till,
  .till * {
    animation: none !important;
  }
  .ticker {
    animation: none;
  }
  .strip {
    overflow-x: auto;
  }
}

/* Two stacked sections would otherwise put their padding back to back and space that junction
   twice as far as every other. The second one drops its top padding, so every gap between blocks
   is one section's worth. Sections that follow the ticker or a rule keep theirs, because there is
   no padding above them to inherit. */
main > section + section {
  padding-top: 0;
}
/* A hero is a band of its own, not a section whose bottom padding the next one can borrow, so the
   section after it keeps its own top padding. On the home page a ticker sits in that gap and hid the
   problem; on a page that goes straight from the hero to its first heading, the words met the dark
   edge with nothing between them (owner review, ADR-370). */
main > section.hero + section {
  padding-top: clamp(38px, 5.4vw, 77px);
}
main > section.hero + section.strip {
  padding-top: 0;
}
/* the pre-register bar is furniture under the banner, not a section of the page: it keeps its own 14px (ADR-771) */
main > section.hero + section.prereg-bar,
main > section.hero-till + section.prereg-bar {
  padding-top: 0;
}

/* ---- cards ---------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 22px;
}
.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
/* three abreast on a computer, two on a tablet, one on a phone (ADR-659): auto-fit put four abreast on a wide
   window, so six feature cards landed four and two and the last row sat half empty */
.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) and (min-width: 621px) {
  .cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cols-3:not(.posts):not(.stories) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .cols-3 {
    grid-template-columns: 1fr;
  }
}
/* Fixed counts rather than auto-fit: the eight feature cards must always land four or two abreast,
   or the last row sits half empty and the section reads as unfinished. */
.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  .cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .cols-4 {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
/* a gold light rises out of the lower corner, the way a lamp catches a counter */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(122% 92% at 88% 112%, var(--accent-soft), transparent 64%);
  transition: opacity 0.36s ease;
}
/* and a hairline seam draws itself across the top, from the centre out. Same detail as the nav
   pill wears, so the two read as one family rather than two ideas. */
.card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform: scaleX(0);
  transition: transform 0.46s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover,
a.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.card:hover::before,
a.card:focus-visible::before {
  opacity: 1;
}
.card:hover::after,
a.card:focus-visible::after {
  transform: scaleX(1);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.72;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--accent-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent) 13%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 1px 0 #ffffff5c;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.3, 0.38, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.card-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}
.card:hover .card-icon,
a.card:focus-visible .card-icon {
  transform: translateY(-2px) rotate(-6deg) scale(1.07);
  /* the glyph goes to the brand's darkest brown: --accent-ink on a lit gold tile measures 2.49:1,
     under the 3:1 a graphic needs. This pairing is 5.21:1 against the gradient's darker stop. */
  color: #0b1220;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow:
    0 12px 24px -14px color-mix(in srgb, var(--accent) 85%, transparent),
    inset 0 1px 0 #ffffff85;
}

a.card {
  text-decoration: none;
  display: block;
}
a.card .more {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-ink);
}
/* the arrow is decoration, so it is drawn by CSS and never reaches a screen reader */
a.card .more::after {
  content: '\2192';
  display: inline-block;
  margin-inline-start: 8px;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
a.card:hover .more::after,
a.card:focus-visible .more::after {
  transform: translateX(6px);
}
/* a bento (ADR-688, made compact on the owner's "this design too big … make it different"): the card with a screen stands
   on the left with a cropped view of it; the others are slim tiles stacked beside it at their own height, each tinted in
   its own colour with the icon large on the left, so the section is about half the height it was */
.grid.is-bento {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}
.grid.is-bento > .has-shot {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 0;
}
.grid.is-bento > .has-shot .card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
}
.grid.is-bento > :not(.has-shot) {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  align-content: center;
  padding: 20px 24px;
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--tile, var(--accent)) 10%, var(--surface)) 0%, var(--surface) 62%);
  border-color: color-mix(in srgb, var(--tile, var(--accent)) 22%, var(--border));
}
.grid.is-bento > :not(.has-shot):nth-child(3n + 2) {
  --tile: #229ed9;
}
.grid.is-bento > :not(.has-shot):nth-child(3n) {
  --tile: #c98a2b;
}
.grid.is-bento > :not(.has-shot) .card-icon {
  grid-row: 1 / span 3;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(140deg, var(--tile, var(--accent)), color-mix(in srgb, var(--tile, var(--accent)) 70%, #000));
  border: 0;
  box-shadow: 0 10px 22px -14px var(--tile, var(--accent));
}
.grid.is-bento > :not(.has-shot) .card-icon svg {
  width: 26px;
  height: 26px;
}
.grid.is-bento > :not(.has-shot) h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.grid.is-bento > :not(.has-shot) p {
  font-size: 0.9rem;
  line-height: 1.6;
}
.grid.is-bento > :not(.has-shot) .more {
  justify-self: start;
  margin-top: 8px;
}
.card-shot {
  position: relative;
  margin: 20px -26px 0;
  padding: 18px 22px 0;
  display: flex;
  align-items: flex-end;
  border-top: 1px solid var(--border);
  background: radial-gradient(110% 90% at 50% 0%, var(--accent-soft), var(--surface-2) 72%);
}
.card-shot .zoom-btn {
  right: 30px;
  bottom: 12px;
}
.card-shot img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px 12px 0 0;
  box-shadow:
    0 -10px 30px -18px #0b122066,
    0 0 0 1px var(--border);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card.has-shot:hover .card-shot img,
a.card.has-shot:focus-visible .card-shot img {
  transform: translateY(-6px);
}
@media (max-width: 900px) {
  .grid.is-bento {
    grid-template-columns: 1fr;
  }
  .grid.is-bento > .has-shot {
    grid-row: auto;
  }
  .card-shot img {
    height: 200px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-shot img {
    transition: none;
  }
}

/* ---- feature rows --------------------------------------------------------- */
.row {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .row.flip > *:first-child {
    order: 2;
  }
}
/* A split with nothing to show beside it (ADR-828, redrawn by ADR-833 and again at "make all this content section fit
   too"): its list of ticks takes the column a picture would have taken, so the section fills the page like every other
   one. With no list either, the words run in two columns for the same reason. */
@media (min-width: 900px) {
  /* the words and the list start together: a tall list would otherwise push the heading down to its middle */
  .row.solo {
    align-items: start;
  }
  .row.solo > :first-child > p {
    max-width: 62ch;
  }
  .row.solo-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .row.solo-wide > * {
    columns: 2;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .row.solo-wide > * > :is(.eyebrow, h2) {
    column-span: all;
  }
  .row.solo-wide > * > p {
    break-inside: avoid;
    margin-top: 0;
  }
}

/* Enlarge (ADR-707, owner: "pictures able to enlarge when click on an enlarge button … push the content to the left or right
   side with animation, smooth and fast, not slowing the website; not the top banner or the footer"). A round button on each
   content picture; on a computer the picture's section widens it to the whole row while the words beside it slide aside and
   fade, and the button brings them back; on a phone, where the picture already has the width, it opens large in a window
   that scrolls sideways. Only the grid's columns and the words' opacity move, so nothing is laid out again but that row. */
.zoomable {
  position: relative;
}
/* the tool waits small and quiet on the picture and grows to its full size as the pointer comes over it (ADR-740, owner:
   "design effect to all enlarge button animation with smaller then this when mouse over the picture it show the same size
   as now"). Where there is no pointer to come over it — a phone — it simply stands at its full size. */
.zoom-btn {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
  opacity: 0.66;
  transition: opacity 0.25s ease;
}
/* the button keeps its full size for a thumb; what grows is what is drawn on it (ADR-740) */
.zoom-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #003349;
  box-shadow: 0 8px 20px -10px #000c;
  transform: scale(0.62);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    background-color 0.2s ease;
}
.zoom-btn svg {
  position: relative;
  width: 18px;
  height: 18px;
  transform: scale(0.62);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.zoomable:hover .zoom-btn,
.zoomable:focus-within .zoom-btn,
.zoom-btn:focus-visible {
  opacity: 1;
}
.zoomable:hover .zoom-btn::before,
.zoomable:hover .zoom-btn svg,
.zoomable:focus-within .zoom-btn::before,
.zoomable:focus-within .zoom-btn svg,
.zoom-btn:focus-visible::before,
.zoom-btn:focus-visible svg {
  transform: scale(1);
}
.zoom-btn:hover::before {
  transform: scale(1.1);
  background: #005d7b;
}
@media (hover: none) {
  .zoom-btn {
    opacity: 0.92;
  }
  .zoom-btn::before,
  .zoom-btn svg {
    transform: none;
  }
}
.zoom-btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.zoom-btn .zoom-out {
  display: none;
}
.is-wide .zoom-btn {
  cursor: zoom-out;
}
.is-wide .zoom-btn .zoom-in {
  display: none;
}
.is-wide .zoom-btn .zoom-out {
  display: block;
}
/* Enlarged is a quarter wider, never a takeover (ADR-733, owner: "the concept just enlarge 25%"): the picture's column grows
   by a quarter and the words give up exactly that much, so they keep a readable column and the section keeps its height.
   The picture lifts a little, the words step back, and the button turns to make it smaller again. */
@media (min-width: 900px) {
  .row,
  .show-panel,
  .ftab-panel,
  .story {
    transition:
      grid-template-columns 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      gap 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .row > *,
  .show-panel > *,
  .ftab-panel > *,
  .story > * {
    min-width: 0;
    transition:
      opacity 0.3s ease,
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .row.is-wide {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }
  .row.flip.is-wide {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
  .show-panel.is-wide {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 255px);
  }
  .story.is-wide {
    grid-template-columns: minmax(0, 3.25fr) minmax(0, 8.75fr);
  }
  /* the feature tabs are the one place the picture takes the whole width rather than a quarter more, because the screen is
     the point of the section and the words are a short line under it (ADR-740, owner: "this feature page when click enlarge
     image full fit 100% so it fit to website content much better design") */
  .ftab-panel.is-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .ftab-panel.is-wide > :not(:has(.zoomable)):not(.zoomable) {
    opacity: 1;
  }
  .ftab-panel.is-wide .ftab-words {
    max-width: 68ch;
  }
  .is-wide > :not(:has(.zoomable)):not(.zoomable) {
    opacity: 0.62;
  }
  .is-wide .zoomable {
    box-shadow:
      0 40px 70px -34px #00334966,
      var(--shadow-lg);
  }
}
.zoom-box {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: #eaf0ff;
  background: #0b1220f2;
}
.zoom-box::backdrop {
  background: #0b1220cc;
}
.zoom-box[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  animation: zoom-in 0.25s ease;
}
@keyframes zoom-in {
  from {
    opacity: 0;
  }
}
.zoom-box-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.zoom-box-bar button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff5f57;
  cursor: pointer;
}
.zoom-box-bar button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.zoom-box-bar span {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the whole picture inside the window, top to bottom, rather than a picture wider than the window that had to be pushed
   sideways to be read (ADR-740, owner: "when click hight full fit to box. so we see small click we see full hight of picture") */
.zoom-box-scroll {
  min-width: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 0 12px 16px;
  overscroll-behavior: contain;
}
.zoom-box-scroll img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 86px);
  object-fit: contain;
  border-radius: 12px;
}
/* on a phone a picture fitted to the width would be smaller than it was on the page and the writing on it unreadable, so
   there it stands as tall as the window and is pushed sideways instead (ADR-740) */
@media (max-width: 700px) {
  .zoom-box-scroll {
    place-items: center start;
  }
  .zoom-box-scroll img {
    width: auto;
    max-width: none;
    height: calc(100dvh - 86px);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row,
  .show-panel,
  .ftab-panel,
  .story,
  .row > *,
  .show-panel > *,
  .ftab-panel > *,
  .story > *,
  .zoom-btn {
    transition: none;
  }
  .zoom-box[open] {
    animation: none;
  }
}

/* ---- stats ---------------------------------------------------------------- */
/* Four figures on a sheet of graph paper. The sheet is a light gradient; under the pointer its grid
   lights up, and every card's edge catches the same light, so moving across the block reads as one
   lamp passing over four cards rather than four separate hover states. The card under the pointer
   lifts, and its icon acts out the figure: the signal drops, the watch hand runs, the coins turn,
   the day gets ticked.
   --lx / --ly are registered so the light can glide after the pointer instead of jumping; site.js
   writes them, and without it the block is simply a still, finished panel. */
@property --lx {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --ly {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

.stats {
  --stats-glow-a: color-mix(in srgb, var(--accent-2) 40%, transparent);
  --stats-glow-b: color-mix(in srgb, var(--ok) 13%, transparent);
  --stats-grid: color-mix(in srgb, var(--accent) 7%, transparent);
  --stats-grid-lit: color-mix(in srgb, var(--accent) 32%, transparent);
  --stats-edge: var(--accent);
  --stats-wash: color-mix(in srgb, var(--accent-2) 22%, transparent);
  /* the lit tile and its glyph are a pair: white on the brand's two darkest stops is 7:1 and up */
  --tile-lit: linear-gradient(150deg, var(--accent), var(--brand));
  --tile-lit-ink: #ffffff;

  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  background:
    radial-gradient(55% 130% at 0% 0%, var(--stats-glow-a), transparent 72%), radial-gradient(45% 120% at 100% 100%, var(--stats-glow-b), transparent 70%),
    linear-gradient(125deg, var(--bg-2) 0%, var(--accent-soft) 50%, var(--bg-2) 100%);
  transition:
    --lx 0.22s ease-out,
    --ly 0.22s ease-out;
}
/* the paper: faint everywhere, fading out towards the edges */
.stats::before,
.stats::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(var(--stats-grid) 1px, transparent 1px), linear-gradient(90deg, var(--stats-grid) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(80% 110% at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(80% 110% at 50% 50%, #000 30%, transparent 90%);
}
/* and the same grid again, drawn darker and only inside a circle of light at the pointer */
.stats::after {
  background-image: linear-gradient(var(--stats-grid-lit) 1px, transparent 1px), linear-gradient(90deg, var(--stats-grid-lit) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(190px circle at var(--lx) var(--ly), #000, transparent 72%);
  mask-image: radial-gradient(190px circle at var(--lx) var(--ly), #000, transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stat {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'num ico' 'label label';
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: 20px 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px #0b122010,
    0 12px 26px -20px color-mix(in srgb, var(--brand) 40%, transparent);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.5s ease,
    border-color 0.3s ease,
    --lx 0.22s ease-out,
    --ly 0.22s ease-out;
}
.stat:nth-child(2) {
  --i: 1;
}
.stat:nth-child(3) {
  --i: 2;
}
.stat:nth-child(4) {
  --i: 3;
}
/* the edge that catches the light: a 1px ring cut out of a glow centred on the pointer */
.stat::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(210px circle at var(--lx) var(--ly), var(--stats-edge), transparent 70%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* and a wash of light across the card the pointer is actually on */
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--lx) var(--ly), var(--stats-wash), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stat b {
  grid-area: num;
  display: block;
  min-width: 0;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.stat b small {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-ink);
}
.stat-label {
  grid-area: label;
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.stat-ico {
  grid-area: ico;
  align-self: start;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  perspective: 120px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.45s cubic-bezier(0.34, 1.3, 0.38, 1);
}
.stat-ico svg {
  position: relative;
  width: 23px;
  height: 23px;
  display: block;
  overflow: visible;
}
/* the lit face is its own layer and fades in: a gradient cannot transition, and swapping the
   background made it jump while the glyph's colour faded, leaving white on a pale tile for 350ms */
.stat-ico::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--tile-lit);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stat-ico svg * {
  transform-box: view-box;
}
.stat[data-kind='speed'] .hand {
  transform-origin: 12px 13.5px;
  rotate: 45deg;
}
.stat[data-kind='currency'] .coins {
  transform-origin: 12px 12px;
}
/* the offline card's live dot: the line is down, the till is still selling */
.stat[data-kind='offline'] .stat-ico::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--surface);
}

@media (hover: hover) {
  .stats:hover::after,
  .stats:hover .stat::before {
    opacity: 1;
  }
  .stat:hover::after,
  .stat:hover .stat-ico::before {
    opacity: 1;
  }
  .stat:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow:
      0 2px 4px #0b122010,
      0 26px 44px -26px color-mix(in srgb, var(--brand) 60%, transparent);
  }
  .stat:hover b {
    color: var(--accent-ink);
  }
  .stat:hover .stat-ico {
    color: var(--tile-lit-ink);
    border-color: transparent;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--accent) 90%, transparent);
  }

  /* offline: the slash is drawn again, the signal flickers out and comes back, the dot keeps beating */
  .stat[data-kind='offline']:hover .cut {
    stroke-dasharray: 1;
    animation: stat-draw 0.5s ease-out both;
  }
  .stat[data-kind='offline']:hover .a3 {
    animation: stat-flicker 0.9s ease both;
  }
  .stat[data-kind='offline']:hover .a2 {
    animation: stat-flicker 0.9s ease 0.08s both;
  }
  .stat[data-kind='offline']:hover .a1 {
    animation: stat-flicker 0.9s ease 0.16s both;
  }
  .stat[data-kind='offline']:hover .stat-ico::after {
    animation: stat-beat 1.6s ease-out infinite;
  }
  /* speed: one full lap of the watch */
  .stat[data-kind='speed']:hover .hand {
    animation: stat-lap 0.9s cubic-bezier(0.5, 0, 0.3, 1) both;
  }
  .stat[data-kind='speed']:hover .crown {
    animation: stat-press 0.9s ease both;
  }
  /* currencies: the pair of coins turns over, the back one coming to the front */
  .stat[data-kind='currency']:hover .coins {
    animation: stat-toss 0.8s cubic-bezier(0.45, 0, 0.2, 1) both;
  }
  /* trial: the calendar hops and today gets its tick */
  .stat[data-kind='trial']:hover .tick {
    stroke-dasharray: 1;
    animation: stat-draw 0.45s ease-out 0.15s both;
  }
  .stat[data-kind='trial']:hover .rings {
    animation: stat-hop 0.5s ease both;
  }
}
@keyframes stat-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes stat-flicker {
  0%,
  100% {
    opacity: 1;
  }
  30%,
  60% {
    opacity: 0.15;
  }
}
@keyframes stat-beat {
  0% {
    box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 2px color-mix(in srgb, var(--ok) 70%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 9px transparent;
  }
}
@keyframes stat-lap {
  from {
    rotate: 45deg;
  }
  to {
    rotate: 405deg;
  }
}
@keyframes stat-press {
  0%,
  100% {
    translate: 0 0;
  }
  20% {
    translate: 0 1.2px;
  }
}
@keyframes stat-toss {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}
@keyframes stat-hop {
  0%,
  100% {
    translate: 0 0;
  }
  40% {
    translate: 0 -1.6px;
  }
}

/* On arrival the cards rise into place as they scroll into view, one after another. Scroll-driven,
   so there is no observer and nothing to go wrong: a browser without view timelines shows them
   already in place, and so does anyone who has asked for less motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* every card is finished by "entry 100%", the moment it is wholly on screen. Ending on a share
       of "cover" left the last card of the phone list still half-faded while the block sat in the
       middle of the screen. The stagger comes from starting later, never from ending later. */
    .stat {
      animation: stat-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .stat:nth-child(2) {
      animation-range: entry 18% entry 100%;
    }
    .stat:nth-child(3) {
      animation-range: entry 36% entry 100%;
    }
    .stat:nth-child(4) {
      animation-range: entry 54% entry 100%;
    }
  }
}
@keyframes stat-rise {
  from {
    opacity: 0;
    translate: 0 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat:hover,
  .stat:hover .stat-ico {
    transform: none;
  }
  .stat-ico svg *,
  .stat-ico::after {
    animation: none !important;
  }
}

/* Tablet: two by two. Phone: one card per line, icon beside the figure, so four claims fit in the
   height two cards would take. */
@media (max-width: 1024px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .stats {
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
  }
  .stat {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'ico num' 'ico label';
    column-gap: 16px;
    row-gap: 2px;
    padding: 16px 18px;
  }
  .stat-ico {
    align-self: center;
  }
}

:root[data-theme='dark'] .stats {
  --stats-glow-a: color-mix(in srgb, var(--accent) 24%, transparent);
  --stats-glow-b: color-mix(in srgb, var(--ok) 9%, transparent);
  --stats-grid: color-mix(in srgb, var(--accent-2) 6%, transparent);
  --stats-grid-lit: color-mix(in srgb, var(--accent-2) 24%, transparent);
  --stats-edge: var(--accent-2);
  --stats-wash: color-mix(in srgb, var(--accent) 16%, transparent);
  --tile-lit: linear-gradient(150deg, var(--accent-2), var(--accent));
  --tile-lit-ink: #0b1220;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .stats {
    --stats-glow-a: color-mix(in srgb, var(--accent) 24%, transparent);
    --stats-glow-b: color-mix(in srgb, var(--ok) 9%, transparent);
    --stats-grid: color-mix(in srgb, var(--accent-2) 6%, transparent);
    --stats-grid-lit: color-mix(in srgb, var(--accent-2) 24%, transparent);
    --stats-edge: var(--accent-2);
    --stats-wash: color-mix(in srgb, var(--accent) 16%, transparent);
    --tile-lit: linear-gradient(150deg, var(--accent-2), var(--accent));
    --tile-lit-ink: #0b1220;
  }
}

/* ---- checklist ------------------------------------------------------------ */
/* ---- the tick list, set like a till slip (ADR-785) ------------------------------------------------
   Owner: "redesign all bullet style for this website in content section with creative and crazy idea". They were three
   loose green ticks floating beside three loose lines. They are lines on a slip now: each one stamped with its tick in a
   rounded chip, separated by the same dashed rule the receipt in the showcase uses, and the last line closed off — so a
   list of promises reads as something the shop was handed rather than as decoration. The tick is drawn at rest and the
   chip fills when the row is pointed at, which is the one moment of movement the list gets. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.ticks li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 2px;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.ticks li + li {
  border-top: 1.5px dashed var(--border);
}
/* the rule under the last line closes the list, the way a slip's total line does */
.ticks::after {
  content: '';
  display: block;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px);
}
.ticks svg {
  grid-row: 1;
  width: 16px;
  height: 16px;
  padding: 7px;
  box-sizing: content-box;
  margin-top: -1px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.ticks li:hover {
  color: var(--ink);
}
.ticks li:hover svg {
  color: #fff;
  background: var(--accent);
  transform: rotate(-6deg) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .ticks svg {
    transition: none;
  }
  .ticks li:hover svg {
    transform: none;
  }
}

/* ---- quote ---------------------------------------------------------------- */
/* ---- the pilot quote, in two columns ----------------------------------------
   The left column says what happened that evening; the right is the owner's own
   words about it. Alone, the quote is an anecdote — with the timeline beside it,
   it is a claim with times attached.
   ========================================================================== */
/* One card, two panels. The timeline and the quote were reading as two unrelated things sitting
   near each other; a shared border and a hairline between them makes the evening and the owner's
   words one piece of evidence. */
.quote-split {
  display: grid;
  gap: 0;
  align-items: stretch;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); /* enough for the lede on one line */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.quote-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.2vw, 32px);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 72%);
  border-inline-end: 1px solid var(--border);
}
.quote-lede {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--ink);
  max-width: none;
  text-wrap: balance;
}
.outage {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* the rail the three moments hang from */
.outage::before {
  content: '';
  position: absolute;
  inset-block: 9px 9px;
  inset-inline-start: 5px;
  width: 2px;
  background: linear-gradient(180deg, var(--border-strong), var(--accent) 55%, var(--ok));
  opacity: 0.5;
}
.outage li {
  position: relative;
  padding-inline-start: 26px;
  padding-block: 0 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.outage li:last-child {
  padding-bottom: 0;
}
.outage li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
.outage li[data-state='on']::before {
  border-color: var(--accent);
}
.outage li[data-state='sync']::before {
  border-color: var(--ok);
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
/* Each marker moves the way its moment did. The outage dims like a light going out; the selling
   dot beats steadily, because sales kept happening; the sync dot sends a ring outward once the
   line came back. Same three colours the till's own status pill uses. */
.outage li::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
}
.outage li[data-state='off']::before {
  animation: dot-fade 4.4s ease-in-out infinite;
}
.outage li[data-state='on']::after {
  animation: dot-beat 2.4s ease-out infinite;
}
.outage li[data-state='sync']::after {
  animation: dot-sync 2.9s ease-out 0.5s infinite;
}
@keyframes dot-fade {
  0%,
  100% {
    opacity: 1;
  }
  46% {
    opacity: 0.3;
  }
}
@keyframes dot-beat {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 52%, transparent);
  }
  72%,
  100% {
    box-shadow: 0 0 0 9px transparent;
  }
}
@keyframes dot-sync {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 58%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 12px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .outage li::before,
  .outage li::after {
    animation: none;
  }
}
.outage b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .quote-split {
    grid-template-columns: 1fr;
  }
  .quote-aside {
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
  }
}

/* A pull quote reads as a person speaking, not as an indented paragraph: a drawn quotation mark
   behind the words, the shop owner's line under a short rule. */
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 3vw, 44px) clamp(26px, 3vw, 44px);
}
/* in the flow, not pinned to the panel: the content is vertically centred, and an absolutely
   positioned mark stayed at the top while the words moved to the middle */
.quote::before {
  content: '\201C';
  display: block;
  font-size: 76px;
  line-height: 0.62;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.18;
  margin-bottom: 10px;
  pointer-events: none;
}
:lang(km) .quote::before {
  content: '\00AB';
  font-size: 58px;
  line-height: 0.8;
}
.quote cite::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
  margin-bottom: 12px;
}

.quote p {
  max-width: none;
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.45;
  text-wrap: pretty;
}
:lang(km) .quote p {
  letter-spacing: 0;
  line-height: 1.6;
}
.quote cite {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---- call to action ------------------------------------------------------- */
.cta {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* the same ground the hero and the sign-in panel use, so the page closes on the picture it opened with */
.cta {
  background: linear-gradient(160deg, var(--brand-2) 0%, var(--brand) 55%, #021a26 100%);
}
.cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -30% -20% auto -20%;
  height: 160%;
  pointer-events: none;
  background: radial-gradient(38% 44% at 24% 78%, #7fd0e240, transparent 66%), radial-gradient(32% 38% at 78% 14%, #00c48c1f, transparent 68%);
}
.cta::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 360px;
  height: 360px;
  right: -140px;
  top: -160px;
  border-radius: 50%;
  border: 1px solid #7fd0e23d;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 28px #7fd0e20d,
    0 0 0 42px #7fd0e20a;
}
.cta > * {
  position: relative;
  z-index: 1;
}
.cta h2 {
  color: var(--brand-ink);
}
.cta p {
  color: #eaf0ffc0;
  margin-inline: auto;
}
.cta .btn-row {
  justify-content: center;
}

/* ============================================================================
   Footer
   The last thing a visitor sees, so it carries the brand rather than a list of
   links. A gold seam across the top, the mark at size, real contact details,
   and columns whose links reach forward when pointed at.
   ========================================================================== */
.site-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding-block: clamp(52px, 6vw, 76px) 26px;
}
/* the seam: a gold thread that fades out towards both edges */
.site-foot::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
}
/* a low glow in the corner, so the block is not a flat grey slab */
.site-foot::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  bottom: -60%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
  pointer-events: none;
}

/* The footer's rings are a ripple, not the three-ring halo the dark blocks carry: many fine
   circles spreading from the bottom-left corner. Same idea, different hand — and it has to be far
   fainter here, because this block is light and every line on it shows. */
.foot-rings {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 8% 116%, transparent 0 44px, color-mix(in srgb, var(--accent) 22%, transparent) 44px 45.5px);
  mask-image: radial-gradient(66% 130% at 8% 110%, #000 26%, transparent 82%);
}

.foot-top {
  display: grid;
  gap: clamp(34px, 4vw, 56px);
  margin-bottom: 44px;
}
@media (min-width: 900px) {
  .foot-top {
    grid-template-columns: 1.4fr 0.85fr 0.85fr 1.3fr;
  }
}

/* ---- where we are ----------------------------------------------------------
   Three collapsibles, the way angkordesign.com's footer sets them out. Native
   <details name>, so they open with a keyboard, one at a time, with no JavaScript
   at all; the open one is marked by an accent edge rather than by colour alone.
   With JavaScript, site.js folds them smoothly. A row that is shrinking is still
   [open] until it finishes, so .is-closing turns its edge and chevron back at once.
   ========================================================================== */
.foot-contact {
  display: grid;
  gap: 8px;
}
.fc-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color 0.28s,
    box-shadow 0.28s;
}
.fc-item[open]:not(.is-closing) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent);
}
.fc-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fc-item summary::-webkit-details-marker {
  display: none;
}
.fc-item summary:hover .fc-name {
  color: var(--accent-ink);
}
.fc-badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.fc-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
:lang(km) .fc-name {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.875rem;
}
.fc-chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fc-item[open]:not(.is-closing) .fc-chev {
  transform: rotate(180deg);
}
.fc-body {
  margin: 0;
  padding: 0 16px 14px 58px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.foot-reach {
  list-style: none;
  margin: 0;
  padding: 0 16px 10px 50px;
  display: grid;
  gap: 2px;
}
.foot-reach li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.foot-reach svg {
  color: var(--accent-ink);
  flex: none;
}
/* 40px tall: these are the links a shop owner taps on a phone */
.foot-reach a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.foot-reach a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* On a phone the footer's links go two-up, and in one of those two columns the rows left half the width
   empty and wrapped "ទូរស័ព្ទ និងអ៊ីមែល" onto two lines. They take the whole width instead. */
@media (max-width: 620px) {
  .foot-contact {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fc-chev,
  .fc-item {
    transition: none;
  }
}

.foot-brand .logo {
  font-size: 1.25rem;
}
.foot-brand > p {
  margin: 16px 0 22px;
  font-size: 0.9375rem;
  max-width: 26rem;
  color: var(--ink-2);
}

/* the same claim the till makes on its own sign-in screen */
.foot-badge {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
}
.foot-badge b {
  color: var(--accent-ink);
  font-weight: 600;
}

.foot-col h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 0.875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
:lang(km) .foot-col h4 {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 1rem;
}
.foot-col h4::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.foot-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition:
    color 0.2s ease,
    gap 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.foot-col a::after {
  content: '→';
  width: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--accent-ink);
  transition:
    width 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.2s ease;
}
.foot-col a:hover {
  color: var(--accent-ink);
  gap: 7px;
}
.foot-col a:hover::after {
  width: 1em;
  opacity: 1;
}
.foot-col .ext {
  font-size: 0.72rem;
  color: var(--muted);
  margin-inline-start: 6px;
}

/* ---- chat card ------------------------------------------------------------
   A shop owner here will message before they will fill in a form, so this is the
   loudest thing in the footer: a dark card against a light block, with a live
   dot and four channels that colour themselves when pointed at. */
/* A contained, rounded card, the same shape as the call to action above it. A full-bleed band was
   tried and read as inconsistent beside that card. */
.foot-chat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin: 0 0 30px;
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius-lg);
  color: var(--brand-ink);
  background: linear-gradient(160deg, var(--brand-2) 0%, var(--brand) 55%, #021a26 100%);
  box-shadow: 0 22px 54px -34px #0b12208c;
}
.foot-chat::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -60% 40% auto -10%;
  height: 320px;
  background: radial-gradient(circle at 30% 60%, #7fd0e23d, transparent 66%);
}
/* Not a ring here. Signal arcs sweeping out of the right edge and fading before they reach the
   copy — a card about being reachable, drawn as reception. Denser at the edge, gone by the middle,
   so nothing sits behind the icons or the text. */
.foot-chat::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: -30px;
  top: 50%;
  translate: 0 -50%;
  width: 620px;
  aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 100% 50%, transparent 0 62px, #7fd0e226 62px 63.5px);
  /* the inner region is masked away as well as the outer, so the arcs appear only in the empty
     band: nothing is drawn behind the icons, and nothing reaches the copy */
  mask-image: radial-gradient(circle at 100% 50%, transparent 0 30%, #000 40% 52%, transparent 76%);
}
@media (max-width: 940px) {
  .foot-chat::after {
    width: 420px;
    right: -60px;
  }
}
.foot-chat > div {
  position: relative;
}

.chat-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  background: #ffffff14;
  border: 1px solid #ffffff24;
  font-size: var(--step--1);
  font-weight: 500;
  color: #eaf0ffe6;
}
.chat-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00c48c;
  box-shadow: 0 0 0 0 #00c48c99;
  animation: chat-pulse 2.4s ease-out infinite;
}
@keyframes chat-pulse {
  0% {
    box-shadow: 0 0 0 0 #00c48c99;
  }
  70% {
    box-shadow: 0 0 0 7px #00c48c00;
  }
  100% {
    box-shadow: 0 0 0 0 #00c48c00;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-live i {
    animation: none;
  }
}

.foot-chat h4 {
  margin: 0 0 7px;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
:lang(km) .foot-chat h4 {
  letter-spacing: 0;
  line-height: 1.45;
}
.foot-chat p {
  margin: 0;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #eaf0ffb8;
}

.chat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* rests as a circle, opens to its name when pointed at: four channels for the room of four icons */
.chat-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 44px;
  min-width: 44px;
  padding: 0 13px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #ffffff2b;
  background: #ffffff12;
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.24s ease,
    gap 0.34s cubic-bezier(0.2, 0.7, 0.3, 1),
    padding 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.chat-ico svg {
  flex: none;
}
.chat-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 0.34s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.2s ease;
}
.chat-ico:hover,
.chat-ico:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
  gap: 9px;
  padding-inline-end: 17px;
}
.chat-ico:hover .chat-label,
.chat-ico:focus-visible .chat-label {
  max-width: 9rem;
  opacity: 1;
}

/* Each fill is its brand's colour taken down far enough that a white label clears AA — Telegram
   and WhatsApp are too light at full strength (3.02 and 2.87). The glow underneath keeps the
   brand's own value, so the colour still reads as theirs. */
.is-telegram:hover,
.is-telegram:focus-visible {
  background: #19708f;
  box-shadow: 0 12px 28px -12px #229ed9;
}
.is-whatsapp:hover,
.is-whatsapp:focus-visible {
  background: #16793b;
  box-shadow: 0 12px 28px -12px #1faf54;
}
.is-messenger:hover,
.is-messenger:focus-visible {
  background: #0653cc;
  box-shadow: 0 12px 28px -12px #0866ff;
}
/* the label was near-black here, written when --accent was a light gold; the accent is a dark
   teal now, and near-black on it measured 2.57 */
.is-mail:hover,
.is-mail:focus-visible {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 28px -12px var(--accent);
}

/* a touch screen has no hover, so the names simply stay open there */
@media (hover: none) {
  .chat-ico {
    gap: 9px;
    padding-inline-end: 17px;
  }
  .chat-label {
    max-width: 9rem;
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .foot-chat {
    gap: 20px;
    border-radius: 18px;
  }
  .chat-row {
    width: 100%;
  }
  .chat-ico {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* the control sits on the rule itself, so it costs no vertical space on a phone */
.foot-divider {
  position: relative;
  margin: 0 0 26px;
  padding-block: 8px;
}
.foot-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--border) 12%, color-mix(in srgb, var(--accent) 34%, transparent) 50%, var(--border) 88%, transparent);
}

/* Given its own surface so it reads as a considered strip rather than four runs of loose text
   left over at the bottom of the page. */
.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: var(--step--1);
  color: var(--muted);
}
.foot-base > span:first-child {
  white-space: nowrap;
}
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.foot-legal a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-2);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.foot-legal a:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}

/* the credit reads as a maker's mark: a gold lozenge, the name, and an away arrow */
.foot-by {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.foot-by:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.foot-by b {
  color: var(--ink);
  font-weight: 600;
}
.foot-by:hover b {
  color: var(--accent-ink);
}
.foot-by .lozenge {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 4px;
  rotate: 45deg;
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 0 0 1px #ffffff40;
}
.foot-by svg {
  opacity: 0.8;
  color: var(--accent-ink);
  transition:
    transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.2s ease;
} /* .55 on --muted measured 2.22:1 */
.foot-by:hover svg {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* back to the top: a small, quiet affordance at the end of a long page */
.foot-up {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.foot-up:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
  transform: translate(-50%, -50%) scale(1.1);
}
.foot-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* A thumb needs a real target: 26px of text is a link only a mouse can hit. Keyed on the pointer as
   well as the width, because a tablet is a touch device at a desktop-ish size. */
@media (max-width: 900px), (pointer: coarse) {
  .foot-col ul {
    gap: 2px;
  }
  .foot-col a {
    min-height: 44px;
    align-items: center;
  }
  .foot-base nav {
    gap: 10px 14px;
  }
  .foot-base a:not(.foot-up) {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* Stacked one per row, the four groups made the footer 1475px tall on a 390px phone: nearly two
   screens of links. The brand keeps the full width; the three link columns go two-up. */
@media (max-width: 620px) {
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
    margin-bottom: 26px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
  .foot-brand > p {
    margin: 12px 0 16px;
  }
  .foot-col h4 {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
  }
  :lang(km) .foot-col h4 {
    font-size: 0.9375rem;
  }
  .foot-col ul {
    gap: 0;
  }
  .foot-col a {
    min-height: 40px;
  }

  .foot-base {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    border-radius: 18px;
    padding: 12px 14px;
    text-align: center;
  }
  .foot-base > span:first-child {
    white-space: normal;
    padding-top: 4px;
  }
  .foot-end {
    justify-content: center;
    gap: 6px;
  }
  /* On a phone the legal row wrapped and the word "Cookies" pushed the glyph onto a line of its own (owner,
     23 Sept: "remove text Cookies and move icon svg to the same row as privacy"). The word goes, and the button
     still answers to "Cookies" for a screen reader through the aria-label render.ts now gives it — hiding the
     only text would otherwise leave it with no name at all.

     `.foot-base .foot-legal`, not `.foot-legal`: `.foot-base nav` a few rules up weighs (0,1,1) and takes the
     gap off any lone class, which is why the row still measured 273px inside a 273px nav and spilled by a
     hair. Two classes out-weigh it. Same trap as the one in the cookie card's stamp. */
  .foot-base .foot-legal {
    justify-content: center;
    column-gap: 8px;
  }
  .foot-cookies span {
    display: none;
  }

  .foot-top {
    margin-bottom: 32px;
  }
}

/* ---- misc ----------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 500;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hr {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: var(--surface);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible {
  outline-offset: 3px;
}
.btn:focus-visible::before {
  transform: translateX(120%);
}

/* ============================================================================
   Responsive
   The design is authored at 1280px and steps down. Every breakpoint here exists
   because something actually broke at that width, not on a round number.
   ========================================================================== */

/* Large desktop: hold the 1280 container, do not let the hero copy run wide */
@media (min-width: 1500px) {
  :root {
    --gutter: 72px;
  }
}

/* Laptop: the hero's two columns still fit, but the gap must give first */
@media (max-width: 1280px) {
  .hero-grid {
    gap: 40px;
  }
}

/* Tablet: single column everywhere, and the QR stops competing with the headline */
@media (max-width: 980px) {
  .hero {
    padding-block: 56px;
  }
  .row {
    gap: 32px;
  }
}

/* Tablet, stacked (621–979px). Sized like a phone, the hero left an iPad half empty: a 26px headline
   wrapped at 19ch, and the till held to 560px on the left with bare ground beside it. On a tablet it
   takes the whole width instead: the desktop's display sizes, the intro across the column, and the
   till edge to edge, so its sides land on the same lines as the cards below. The till's width is still
   capped by the screen's height (the 80px bar and the band's 56px + 56px off, at the drawing's
   652:624), so on a landscape phone or a short window it stays visible whole and centres. */
@media (min-width: 621px) and (max-width: 979px) {
  .hero {
    --step-4: 2.25rem;
  } /* English 36px, as on desktop */
  :lang(km) .hero h1 {
    font-size: 2.5rem;
  } /* Khmer 40px, as on desktop */
  .hero h1,
  :lang(km) .hero h1 {
    max-width: none;
  }
  .hero p {
    max-width: none;
  }
  .hero-grid > *:last-child {
    width: 100%;
    max-width: max(560px, (100svh - 192px) * 652 / 624);
    margin-inline: auto;
  }
}

/* Phone: the reference's smaller type is right here, where every pixel is rented */
/* Below this the bar cannot hold the wordmark, the language switch, the dial and the burger at
   once: at 320px they need 364px. The language switch moves into the drawer, where it gets a
   full-width control instead of a cramped one. */
@media (max-width: 620px) {
  .nav-tools .lang-pick {
    display: none;
  }
  /* Then the search button (ADR-1189) took the space the language switch had given back, and at 390px — an
     iPhone 14 — the row wanted 361px of a 350px box. Nothing scrolled sideways, because a flex child simply
     gave up the width, which is the quiet kind of broken: the burger was being squeezed to pay for it. So the
     gaps close first, before any control or the name is touched. The 380px block below draws in further. */
  .site-head .wrap {
    gap: 10px;
  }
  .site-nav {
    gap: 8px;
  }
  .nav-tools {
    gap: 6px;
  }
  .logo {
    gap: 9px;
  }
}

@media (max-width: 620px) {
  :root {
    --head-h: 64px;
    --ctl-h: 34px;
  }
  body:not([data-menu]) .site-head[data-scrolled] {
    --head-h: 56px;
  }
  body {
    font-size: 0.9375rem;
  }
  section {
    padding-block: 34px;
  }
  .card {
    padding: 26px 24px;
  }
  .cta {
    padding: 36px 26px;
  }
  .btn {
    width: 100%;
  } /* thumb-sized, not a 120px target */
  .btn-row {
    gap: 12px;
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip .wrap {
    flex-direction: column;
    gap: 10px;
  }
  .quote {
    padding-inline-start: 20px;
  }
  .hero-grid > *:last-child {
    max-width: none;
  }
}

/* Small phone: 360px is still common on Android in Cambodia */
@media (max-width: 380px) {
  :root {
    --gutter: 16px;
    --ctl-h: 32px;
  }
  .lang-pick {
    font-size: 0.75rem;
  }
  /* the smallest phones keep the MENU word: the button and the gaps around it draw in rather than drop it */
  .site-head .wrap,
  .site-nav {
    gap: 6px;
  }
  .nav-burger {
    gap: 6px;
    padding: 0 8px;
  }
  .nav-burger-word {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  /* The search button (ADR-1189) joined this row, and on a 320px phone the row ran 30px past the screen: the
     wordmark alone was 153px of a 288px budget. Rather than drop a control or the name, everything in the row
     draws in a little — the name is still the name, the mark still the mark, and both fit with room to spare.
     Measured rather than guessed: this leaves ~5px of slack at 320px, where 0.95rem left 0.1px. */
  .logo {
    gap: 8px;
    font-size: 0.9rem;
  }
  .logo .brand-mark {
    width: 30px;
    height: 30px;
  }
  .nav-tools {
    gap: 6px;
  }
}

/* A phone shows the till straight under the headline (ADR-714, asked for by the owner):
   the words stop being one column and stand in the hero's own grid, so the till can sit between the headline and the lead
   without the page repeating any of them. */
@media (max-width: 620px) {
  .hero.is-till .hero-grid {
    gap: 0;
  }
  .hero.is-till .hero-copy {
    display: contents;
  }
  .hero.is-till .hero-copy > .eyebrow {
    order: 1;
    justify-self: start;
  }
  .hero.is-till .hero-copy > h1 {
    order: 2;
  }
  .hero.is-till .hero-aside {
    order: 3;
    margin: 14px 0 6px;
  } /* the till keeps room under it for the receipt it prints */
  .hero.is-till .hero-copy > .lead {
    order: 4;
  }
  .hero.is-till .hero-copy > .btn-row {
    order: 5;
  }
  .hero.is-till .hero-copy > p {
    order: 6;
  }
}

/* Wide screenshots must scroll inside their frame rather than push the page sideways */
.frame,
.frame-plain {
  max-width: 100%;
}
.frame img,
.frame-plain img {
  width: 100%;
}

/* ---- Get in touch form (ADR-359): what a visitor sends lands in the portal's Leads inbox ---- */
.lead-form {
  display: grid;
  gap: 16px;
  max-width: 640px;
  margin: 28px auto 0;
}
/* a sent form steps aside for its thank-you; without this the grid display beat the hidden attribute and the form stayed on screen saying "Sending…" (ADR-659) */
.lead-form[hidden] {
  display: none !important;
}
.lead-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lead-field {
  display: grid;
  gap: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.lead-field input,
.lead-field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lead-field textarea {
  min-height: 96px;
  resize: vertical;
}
.lead-field input:focus-visible,
.lead-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* the mark on a field (ADR-782, owner: "add icons to each fields in form for contact and request a demo it would be
   nice"): one drawing per kind of answer, the same one wherever that field appears. It sits inside the box, so the label
   above it stays where it was and nothing on the page moves; it lights up with the field it belongs to. */
.lead-field.has-mark {
  position: relative;
}
.field-mark {
  position: absolute;
  left: 15px;
  /* anchored from the bottom of the label, which is the input's own bottom edge (ADR-1148): the label also holds the
     field's name above the box, so a top-based offset has to guess the label's full height, and that guess went
     stale once a later rule (~line 6481) grew the input taller than it was when this was first tuned */
  bottom: 15px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.2s ease;
}
.field-mark svg {
  width: 18px;
  height: 18px;
}
.lead-field.has-mark input,
.lead-field.has-mark textarea,
.lead-field.has-mark select {
  padding-left: 44px;
}
.lead-field.has-mark:focus-within .field-mark {
  color: var(--accent);
}
/* a textarea's mark sits with the first line rather than in the middle of a tall box */
.lead-field.is-tall .field-mark {
  top: 46px;
  margin-top: 0;
}
/* the survey dropdown wears the site's one control set, not the browser's */
.lead-field select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}
.lead-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.lead-reach {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lead-reach legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.lead-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.lead-pick input {
  accent-color: var(--accent);
}
.lead-pick:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
/* the honeypot: off screen for a person, filled in by a robot */
.lead-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lead-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.lead-note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.lead-failed {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: #b3261e;
}
/* what the thank-you adds when the server would not keep the e-mail address (ADR-810) */
.lead-thanks-off {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--warn, #a8641b);
}
.lead-thanks-off[hidden] {
  display: none;
}
.lead-thanks {
  max-width: 640px;
  margin: 28px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
/* The contact and demo forms' own thank-you slip (ADR-1146, owner: "make it more creative as POS system style"):
   a chip either side of an arrow, echoing how the 404 page reads a search — a message goes in, a status comes
   back — then a scan strip that fills in once the slip is shown, the same beat as a receipt printing through. */
.lead-thanks-scan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
}
.lead-thanks-scan[hidden] {
  display: none;
}
.lts-chips {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lts-chip {
  padding: 5px 11px;
  border-radius: 999px;
  text-transform: uppercase;
}
.lts-chip.from {
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.lts-chip.to {
  background: var(--ok);
  color: #fff;
}
.lts-arrow {
  color: var(--border-strong);
  font-weight: 700;
}
.lts-msg {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.lts-strip {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.lts-strip i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ok);
  transform: scaleX(0);
  transform-origin: left;
  animation: lts-fill 0.42s ease-out forwards;
}
.lts-strip i:nth-child(1) {
  animation-delay: 0.05s;
}
.lts-strip i:nth-child(2) {
  animation-delay: 0.14s;
}
.lts-strip i:nth-child(3) {
  animation-delay: 0.23s;
}
.lts-strip i:nth-child(4) {
  animation-delay: 0.32s;
}
.lts-strip i:nth-child(5) {
  animation-delay: 0.41s;
}
@keyframes lts-fill {
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lts-strip i {
    animation: none;
    transform: scaleX(1);
  }
}
@media (max-width: 640px) {
  .lead-two {
    grid-template-columns: 1fr;
  }
}

/* ---- the Request a demo form (ADR-538) ---------------------------------------
   The whole width: the steps of a demo in a dark card that stays in view on the left, the form in four numbered
   parts on the right. Every choice is a tile or a chip, one tap on a phone, and a chosen one is marked by more
   than colour (a tick on a tile, weight on a chip). */
.demo-ask .section-head {
  max-width: 760px;
}
.demo-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 36px);
}
.demo-side {
  position: sticky;
  top: calc(var(--head-h) + 24px);
  display: grid;
  gap: 22px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  color: #eaf0ffd9;
  background: radial-gradient(120% 70% at 0% 0%, #7fd0e233, transparent 60%), linear-gradient(160deg, var(--brand-2) 0%, var(--brand) 60%, #021a26 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.demo-side h3 {
  margin: 0;
  color: var(--brand-ink);
  font-size: 1.25rem;
}
.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: none;
}
.demo-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 20px;
}
.demo-steps li:last-child {
  padding-bottom: 0;
}
.demo-steps li::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: #eaf0ff26;
}
.demo-steps li:last-child::before {
  display: none;
}
.demo-steps li > b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--brand);
  background: var(--accent-2);
  box-shadow: 0 0 0 5px #7fd0e21f;
}
.demo-steps strong {
  display: block;
  margin-top: 6px;
  color: var(--brand-ink);
  font-weight: 600;
}
.demo-steps p {
  margin: 4px 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: #eaf0ffb8;
}
.demo-perks {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #eaf0ff21;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-ink);
  background: #eaf0ff14;
  border: 1px solid #eaf0ff24;
}
.demo-perks svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
  stroke-width: 2.4;
}

.demo-main {
  min-width: 0;
}
/* a light ground under the form rather than plain white, so it reads as a sheet to fill in and its fields stand out on it
   (ADR-750, owner: "you can add some light color to this form and contact form it to white color now"). The same wash on both
   forms, because every form on this website wears one look. */
.lead-form.demo-form {
  max-width: none;
  margin: 0;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)) 0%, var(--surface) 62%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.demo-part {
  margin: 0;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 16px;
}
.demo-part legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.demo-part legend + * {
  clear: both;
}
.demo-part legend b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 0.8125rem;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.demo-hint {
  margin: -8px 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.demo-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.demo-fields .is-wide {
  grid-column: 1 / -1;
}
.lead-field em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--muted);
  margin-inline-start: 4px;
}
.lead-field.is-missing input {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #b3261e 16%, transparent);
}
.demo-q {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.demo-q-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.demo-q-label small {
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.demo-tiles {
  display: grid;
  gap: 10px;
}
.demo-tiles.is-kinds {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demo-tiles.is-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demo-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 30px 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.demo-tiles.is-kinds .demo-tile {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 96px;
  padding: 14px 10px;
}
.demo-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.demo-tile i {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-ink);
  background: var(--surface-2);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.demo-tiles.is-kinds .demo-tile i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.demo-tile i svg {
  width: 19px;
  height: 19px;
}
.demo-tile::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface) center / 10px no-repeat;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.demo-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.demo-tile:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-tile:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.demo-tile:has(input:checked) i {
  color: #fff;
  background: var(--accent);
}
.demo-tile:has(input:checked)::after {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.6'/%3E%3C/svg%3E");
}
/* the feature tiles start collapsed to two rows; "Show all" reveals the rest and then hides itself (ADR-1149) */
[data-tiles-collapse] {
  display: grid;
  gap: 10px;
}
[data-tiles-collapse]:not(.is-open) .demo-tiles.is-features .demo-tile:nth-child(n + 7) {
  display: none;
}
.tiles-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.tiles-more svg {
  width: 16px;
  height: 16px;
}
/* site.js hides the button by its `hidden` property once the fold is open; the class rule above out-weighs the
   browser's own `[hidden]` rule, so say it here or "Show all" stays drawn under the tiles it revealed (ADR-1149) */
.tiles-more[hidden] {
  display: none;
}
.tiles-more:hover,
.tiles-more:focus-visible {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.demo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
.demo-pair.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
}
.demo-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.demo-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.demo-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.demo-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* dark mode's accent is a light teal: white on it measured 2.73:1, so its label turns to the brand's deep ink (ADR-658) */
:root[data-theme='dark'] .upd-index a[aria-current] b {
  color: #001f2d;
}
.demo-send {
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: var(--surface-2);
}
.demo-form .lead-failed {
  padding: 0 clamp(20px, 2.4vw, 28px) 18px;
  background: var(--surface-2);
}
.demo-thanks {
  max-width: none;
  margin: 0;
  padding: 28px;
  font-size: 1.0625rem;
}

/* One form style for the whole website (ADR-703, owner: "every form on my website one style: buttons, dropdowns and every
   element"). Every text box, choice chip, choice tile, search box and send button on the site is drawn by these rules,
   whichever form it sits in: a soft filled box that lights with a ring when it is being typed in and earns a tick when a
   required box is right; chips that are pills with a dot that fills; tiles with a tick badge; a send button with an arrow. */
:root {
  --fx-h: 50px;
  --fx-r: 14px;
  --fx-bad: #b3261e;
}
.lead-field {
  gap: 8px;
}
.lead-field input,
.lead-field textarea {
  min-height: var(--fx-h);
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--fx-r);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
/* on a tinted sheet the fields go white, so what is to be filled in stands out from what is only read (ADR-750) */
.demo-form .lead-field input,
.demo-form .lead-field textarea,
.cdesk-form .lead-field input,
.cdesk-form .lead-field textarea {
  background: var(--surface);
}
.lead-field textarea {
  min-height: 112px;
  line-height: 1.6;
}
.lead-field input:hover,
.lead-field textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.lead-field input:focus,
.lead-field textarea:focus,
.lead-field input:focus-visible,
.lead-field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.lead-field input[required]:user-valid {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a676' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.lead-field.is-missing input,
.lead-field input:user-invalid {
  border-color: var(--fx-bad);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-bad) 14%, transparent);
}
.lead-reach {
  gap: 8px;
}
.lead-pick,
.demo-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.lead-pick input,
.demo-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lead-pick::before,
.demo-chip::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.lead-pick:hover,
.demo-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.lead-pick:has(input:checked),
.demo-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.lead-pick:has(input:checked)::before,
.demo-chip:has(input:checked)::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--surface);
}
.lead-pick:has(input:focus-visible),
.demo-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-tile {
  border-width: 1.5px;
  border-radius: 16px;
}
.demo-tile::after {
  width: 20px;
  height: 20px;
  border-width: 1.5px;
}
.demo-tile:has(input:checked)::after {
  animation: fx-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
@keyframes fx-pop {
  from {
    transform: scale(0.4);
  }
}
.lead-send .btn-primary,
.demo-send .btn-primary {
  gap: 10px;
}
.lead-send .btn-primary::after,
.demo-send .btn-primary::after {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5 M21 3l-6.5 18-4-8.5L2 9z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lead-send .btn-primary:hover::after,
.demo-send .btn-primary:hover::after {
  transform: translate(3px, -3px);
}
@media (prefers-reduced-motion: reduce) {
  .demo-tile:has(input:checked)::after {
    animation: none;
  }
  .lead-send .btn-primary::after,
  .demo-send .btn-primary::after {
    transition: none;
  }
}
@media (max-width: 1180px) {
  .demo-pair.is-three {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 980px) {
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-side {
    position: static;
  }
  .demo-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
  .demo-steps li {
    padding-bottom: 0;
  }
  .demo-steps li::before {
    display: none;
  }
}
@media (max-width: 720px) {
  .demo-tiles.is-kinds,
  .demo-tiles.is-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* two narrow tiles a row: the icon and the tick share the top line and the words take the tile's whole width below,
     so a word like Customer never runs under the tick (ADR-729) */
  .demo-tiles.is-features .demo-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 12px;
  }
  .demo-tiles.is-features .demo-tile span {
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  /* two columns here, so two rows collapsed is four tiles rather than the six above ADR-1149 */
  [data-tiles-collapse]:not(.is-open) .demo-tiles.is-features .demo-tile:nth-child(n + 5) {
    display: none;
  }
  .demo-pair,
  .demo-pair.is-three,
  .demo-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-send .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-tile,
  .demo-tile i,
  .demo-tile::after,
  .demo-chip {
    transition: none;
  }
  .demo-tile:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .card:hover {
    transform: none;
  }
  .btn::before {
    display: none;
  } /* the sweep is decoration; the colour change is the signal */
  .btn-ghost::after {
    transform: scaleX(1);
    transition: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Print: someone will print the pricing page */
@media print {
  .site-head,
  .site-foot,
  .btn-row,
  .cta {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
}

/* ---- News and posts (ADR-372) --------------------------------------------------------------------
   Posts are written in English alone, at the owner's word, so an article sets its own measure and reads
   as a column rather than as a set of bands. */
.posts .post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.posts .post-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #0b6f8f);
  box-shadow: 0 18px 40px -24px rgba(0, 20, 30, 0.45);
}
.post-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1.91;
  object-fit: cover;
}
.post-card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}
.post-card-text h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
}
.post-card-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #3d5963);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b8189);
}
.post-meta b {
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent, #0b6f8f);
  background: rgba(11, 111, 143, 0.1);
}

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 24px) 24px clamp(38px, 5.4vw, 77px);
}

/* News (ADR-701): the list with the newest post large and the rest in two columns, a post read beside the same sidebar of
   topics, latest posts and a way to the demo shops. The sidebar drops under the list on a phone. */
.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.news-layout.is-post {
  padding-top: clamp(10px, 2vw, 24px);
  padding-bottom: clamp(38px, 5.4vw, 77px);
}
/* An article sets its own measure (ADR-1290). The comment above has said so since ADR-372 and no rule ever did
   it: a paragraph kept the site-wide --measure of 36rem while the headings and pictures beside it filled the
   column, so every paragraph stopped 204px short of the picture above it and the column had two right edges.
   One width now for all three. 680px at 17px is about 83 characters a line — above the 70 a bare paragraph
   wants, which is what the 1.75 line-height below is for, and the price of a column that lines up. */
.news-layout.is-post .post {
  max-width: none;
  margin: 0;
  padding: 0;
}
.news-layout.is-post .post-part p {
  max-width: none;
}
.news-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}
.post-cover-wrap {
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}
.post-cover-wrap .post-cover {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-card:hover .post-cover {
  transform: scale(1.04);
}
.post-card .post-card-text {
  flex: 1;
}
.post-excerpt {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.post-read {
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}
.post-read span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.post-card:hover .post-read span {
  transform: translateX(3px);
}
.post-card.is-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.post-card.is-featured .post-cover-wrap {
  height: 100%;
}
.post-card.is-featured .post-cover {
  height: 100%;
  min-height: 280px;
  aspect-ratio: auto;
}
.post-card.is-featured .post-card-text {
  justify-content: center;
  gap: 12px;
  padding: clamp(22px, 3vw, 36px);
}
.post-card.is-featured h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.3;
  text-wrap: balance;
}
.news-main .post-card[hidden] {
  display: none;
}
/* an odd card at the end takes the whole row, so no half row stands empty */
.news-grid > .post-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.news-grid > .post-card:last-child:nth-child(odd):has(.post-cover-wrap) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.news-grid > .post-card:last-child:nth-child(odd) .post-cover {
  height: 100%;
  aspect-ratio: auto;
}
.news-layout.is-post .news-side {
  margin-top: 32px;
}
.news-side {
  display: grid;
  gap: 16px;
}
.news-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.news-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.news-side-card {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.news-side-card h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.news-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.news-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.news-topic b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface-2);
  font-size: 0.74rem;
  font-weight: 600;
}
.news-topic:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.news-topic.is-on {
  border-color: transparent;
  color: #fff;
  background: var(--accent);
}
.news-topic.is-on b {
  color: var(--accent);
  background: #fff;
}
.news-latest {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-latest a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px;
  margin: 0 -6px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.news-latest a:hover {
  background: var(--surface-2);
}
.news-latest img,
.news-latest-blank {
  display: block;
  width: 72px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
}
.news-latest b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-latest time {
  color: var(--ink-2);
  font-size: 0.76rem;
}
.news-side-card.is-demo {
  color: #eaf0ffd9;
  background: linear-gradient(145deg, var(--brand-2), var(--brand) 70%);
  border-color: transparent;
  isolation: isolate;
}
.news-side-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #eaf0ff1f 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: radial-gradient(90% 90% at 100% 0%, #000 20%, transparent 75%);
}
.news-side-card.is-demo h2 {
  color: var(--accent-2);
}
.news-side-card.is-demo p {
  margin: 0;
  color: #eaf0ffd1;
  font-size: 0.92rem;
  line-height: 1.6;
}
.news-side-card.is-demo .btn {
  justify-self: start;
}
.post-steps {
  margin: 22px 0 8px;
}
@media (max-width: 1080px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-grid > .post-card:last-child:nth-child(odd):has(.post-cover-wrap) {
    display: flex;
  }
  .news-grid > .post-card:last-child:nth-child(odd) .post-cover {
    height: auto;
    aspect-ratio: 1.91;
  }
  .post-card.is-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-card.is-featured .post-cover {
    min-height: 0;
    aspect-ratio: 1.91;
  }
}
@media (max-width: 900px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-cover-wrap .post-cover,
  .post-read span {
    transition: none;
  }
}
.post-cover-full {
  display: block;
  width: 100%;
  height: auto;
  margin: 32px 0 8px;
  border-radius: 18px;
}
.post-part {
  padding: 26px 0 0;
}
.post-part h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.post-part p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.75;
}
.post-part figure {
  margin: 24px 0;
}
.post-part figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.post-part figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted, #6b8189);
}
.post-quote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent, #0b6f8f);
  font-size: 21px;
  line-height: 1.5;
  font-style: normal;
  color: var(--ink, #0b1220);
}
.post + * {
  margin-top: clamp(38px, 5.4vw, 77px);
}
/* What a post is about, at its foot (ADR-1293, owner: "add at least 15 tags for all blog post ... and the
   bottom of blog post"). They borrow the sidebar topics' pill, quieter: these are words, not filters, so they
   carry no count, no hover and no link. A tag that led anywhere would lead to a page holding one or two posts,
   which is the thin page search engines discount and the owner would have to maintain. They are read instead as
   the article's `keywords`, which is where a search engine actually looks. */
.post-tags {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--border);
}
.post-tags-head {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.post-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Smaller than they were, and each one a link to its own page (ADR-1294, owner: "make this size smaller and
   each tags link able with their own name url"). Eighteen of them under an article is a block of texture, not a
   row of buttons, so they read at the size of a caption. */
.post-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface-2);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}
.post-tags a:hover,
.post-tags a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
@media (max-width: 700px) {
  .post-tags a {
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.72rem;
  }
}

@media (max-width: 700px) {
  .post {
    padding: 0 18px;
  }
  .post-part p {
    font-size: 16px;
  }
}

/* ---- Plans and prices (ADR-377) ----------------------------------------------------------------
   Every number on a card is read from the plans table; the words around them are the page's. */
/* ---- Packages compared (ADR-661) ---------------------------------------------------------------
   Each package is a price tag torn off a till roll: its code printed small beside a scrap of barcode, the price, one
   line, three headline limits under a dashed rule and a perforated foot. Below, one itemised bill compares them: a row
   per limit and per feature with dashed rules between like a receipt, the most popular column lit down its length,
   the row under the pointer lit like a scanner line, and a switch that leaves only the rows where packages differ. */
.plans {
  align-items: stretch;
}
.plans .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 30px;
  border-radius: 20px 20px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px #0b12200d,
    0 18px 40px -30px #00334966;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s;
}
.plans .plan:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px #0b12200d,
    0 26px 50px -30px #00334980;
}
/* the perforation the tag was torn along */
.plans .plan::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 9px;
  pointer-events: none;
  background: radial-gradient(circle at 8px 9px, var(--bg) 5px, var(--border) 5.5px 6.3px, transparent 6.8px) 0 0 / 16px 9px repeat-x;
}
.plans .plan.is-marked::after {
  background: radial-gradient(circle at 8px 9px, var(--bg) 5.5px, transparent 6px) 0 0 / 16px 9px repeat-x;
}
.plans .plan.is-marked {
  color: var(--brand-ink);
  border-color: transparent;
  background: linear-gradient(165deg, var(--brand-2) 0%, var(--brand) 60%, #021a26 100%);
  box-shadow:
    0 0 0 1px var(--accent-2, #7fd0e2),
    0 30px 60px -30px #003349b3;
}
.plans .plan.is-marked h3,
.plans .plan.is-marked .plan-price b,
.plans .plan.is-marked .pr-keys b {
  color: #fff;
}
.plans .plan.is-marked .plan-price small,
.plans .plan.is-marked .plan-blurb,
.plans .plan.is-marked .pr-keys span,
.plans .plan.is-marked .pr-sku {
  color: #eaf0ffc2;
}
.plans .plan.is-marked .pr-keys {
  border-color: #7fd0e240;
}
/* the flag's ink is dark on the accent rather than white: in the dark theme the accent lightens to
   #3fa9c4 and white on it measured 2.73:1, which is under the bar for 12px uppercase. --accent-solid-ink
   over --accent-solid keeps one pair in both themes. */
.plan-flag {
  position: absolute;
  top: -13px;
  left: 22px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-solid-ink);
  background: var(--accent-solid);
  box-shadow: 0 6px 16px -8px #00334999;
}
.pr-sku {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    600 11px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  color: var(--muted, #6b8189);
}
.pr-sku i {
  width: 26px;
  height: 12px;
  opacity: 0.7;
  background: linear-gradient(
    90deg,
    currentColor 0 1.5px,
    transparent 1.5px 3px,
    currentColor 3px 5px,
    transparent 5px 6.5px,
    currentColor 6.5px 7.5px,
    transparent 7.5px 9.5px,
    currentColor 9.5px 12px,
    transparent 12px 13.5px,
    currentColor 13.5px 14.5px,
    transparent 14.5px 16.5px,
    currentColor 16.5px 19px,
    transparent 19px 20.5px,
    currentColor 20.5px 21.5px,
    transparent 21.5px 23px,
    currentColor 23px 26px
  );
}
.plans .plan h3 {
  margin: 2px 0 0;
  font-size: 20px;
}
/* A month or a year, switched by a checkbox and this stylesheet alone (ADR-912, ADR-914). Both prices are in the
   page, so the switch works with JavaScript off and there is nothing to hydrate. */
.pr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pr-every {
  display: flex;
  justify-content: center;
  margin: 0 0 26px;
}
.pr-every label {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line, #dbe7ea);
  border-radius: 999px;
  background: var(--card, #fff);
  cursor: pointer;
}
.pr-every label > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted, #6b8189);
  transition:
    background-color 0.16s,
    color 0.16s;
}
.pr-every em {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f6ef;
  color: #0f7a52;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pr-every .pr-every-m {
  background: var(--accent-solid, #003349);
  color: var(--accent-solid-ink, #fff);
}
#pr-yearly:checked ~ .pr-every label .pr-every-m {
  background: none;
  color: var(--muted, #6b8189);
}
#pr-yearly:checked ~ .pr-every label .pr-every-y {
  background: var(--accent-solid, #003349);
  color: var(--accent-solid-ink, #fff);
}
#pr-yearly:focus-visible ~ .pr-every label {
  outline: 2px solid var(--accent-solid, #003349);
  outline-offset: 2px;
}
/* a card writes both prices; the switch decides which one is read */
/* One price at a time (ADR-1004, owner: "you have yearly price on monthly box"). The shared rule below
   used to sit after the one that hides the year, at the same specificity, so `display: flex` won and both
   prices stood side by side whichever way the switch was thrown. It carries no `display` of its own now:
   the layout is shared, and which of the two is shown is decided in one place, here. */
.plan-price .pr-m,
.plan-price .pr-y {
  align-items: baseline;
  gap: 8px;
}
.plan-price .pr-m {
  display: flex;
}
.plan-price .pr-y,
.pr-save {
  display: none;
}
#pr-yearly:checked ~ .plans .plan-price .pr-m {
  display: none;
}
#pr-yearly:checked ~ .plans .plan-price .pr-y {
  display: flex;
}
#pr-yearly:checked ~ .plans .pr-save {
  display: block;
}
.pr-save {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #0f7a52;
}
@media (prefers-reduced-motion: reduce) {
  .pr-every label > span {
    transition: none;
  }
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.plan-price b {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan-price.is-quote b {
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.plan-price small {
  font-size: 14px;
  color: var(--muted, #6b8189);
}
.plan-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #3d5963);
  min-height: 4.8em;
}
.pr-keys {
  list-style: none;
  margin: 4px 0 6px;
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px dashed var(--border-strong, var(--border));
}
.pr-keys li {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pr-keys b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pr-keys span {
  font-size: 12px;
  color: var(--muted, #6b8189);
}
.pr-keys.is-agreed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.pr-long {
  display: inline;
}
.pr-short {
  display: none;
}
.plans .plan .btn {
  margin-top: auto;
  justify-content: center;
}

.pr-compare {
  margin-top: clamp(44px, 5.4vw, 72px);
}
.pr-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pr-compare-head h3 {
  margin: 0;
  font-size: 24px;
}
.pr-diff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.pr-diff:hover {
  border-color: var(--accent);
}
.pr-diff:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pr-diff i {
  position: relative;
  width: 38px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong, var(--border));
  transition: background-color 0.25s;
}
.pr-diff i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px #0b122040;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pr-diff[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pr-diff[aria-pressed='true'] i {
  background: var(--accent-solid);
  border-color: transparent;
}
.pr-diff[aria-pressed='true'] i::after {
  transform: translateX(14px);
}
/* the count of folded rows, in the switch's own colour; empty (and taking no room) until the switch is on */
.pr-diff-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
}
.pr-diff-n:empty {
  display: none;
}
.pr-diff-n::before {
  content: '·';
  margin-right: 8px;
  font-weight: 400;
  color: var(--muted);
}
/* clip, not hidden: the rounded box trims its table without becoming a scroller, so the header row can still stick */
.pr-scroll {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  overflow: clip;
  box-shadow:
    0 1px 2px #0b12200a,
    0 24px 50px -40px #00334966;
}
.pr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  table-layout: fixed;
}
.pr-table th,
.pr-table td {
  padding: 13px 16px;
  text-align: center;
  vertical-align: middle;
}
.pr-table th[scope='row'] {
  width: 26%;
  text-align: left;
  font-weight: 500;
  color: var(--ink-2, #3d5963);
}
.pr-table thead th,
.pr-table thead td {
  position: sticky;
  top: 64px;
  z-index: 2;
  padding-top: 18px;
  padding-bottom: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pr-col-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.pr-col-price {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.pr-col-price small {
  font-weight: 400;
  color: var(--muted, #6b8189);
}
.pr-table tbody tr + tr > * {
  border-top: 1px dashed var(--border);
}
/* The buttons in the table's last row have only the column's width to live in — 123px of it on a tablet,
   against the 137 "Request a demo" wants — so there they give up their side padding and wrap rather than
   being cut off (ADR-1012, found by sweeping every page at three widths). */
.pr-table .btn {
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 1000px) {
  .pr-table th,
  .pr-table td {
    padding-inline: 8px;
  }
  .pr-table .btn {
    padding-inline: 10px;
    font-size: 13.5px;
    line-height: 1.25;
  }
}
.pr-group th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--surface-2);
}
.pr-table tbody + tbody .pr-group th {
  border-top: 1px solid var(--border);
}
.pr-table .is-marked {
  background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface));
}
.pr-table thead th.is-marked {
  box-shadow: inset 0 3px 0 var(--accent-solid);
}
.pr-table tbody tr:not(.pr-group) {
  transition: background-color 0.15s;
}
.pr-table tbody tr:not(.pr-group):hover > * {
  background-color: color-mix(in srgb, var(--accent-2, #7fd0e2) 16%, var(--surface));
}
.pr-table tbody tr:not(.pr-group):hover > th {
  box-shadow: inset 3px 0 0 var(--accent-solid);
}
.pr-num {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pr-yes {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ok-ink, #007a55);
  background: color-mix(in srgb, var(--ok, #00c48c) 18%, transparent);
}
.pr-yes svg {
  width: 15px;
  height: 15px;
}
.pr-no {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  vertical-align: middle;
  background: var(--border-strong, #b9c4c9);
}
.pr-pick,
.pr-agreed {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2, #3d5963);
  border: 1px dashed var(--border-strong, var(--border));
  white-space: nowrap;
}
.pr-table tfoot td {
  padding: 18px 12px 20px;
  border-top: 1px solid var(--border);
}
.pr-table tfoot .btn {
  width: 100%;
  justify-content: center;
  padding-inline: 12px;
}
.pr-compare.is-diff tr[data-same] {
  display: none;
}
.plan-note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--muted, #6b8189);
}
@media (max-width: 1180px) {
  .plan-blurb {
    min-height: 0;
  }
}
@media (max-width: 900px) {
  /* on a tablet or phone the bill scrolls sideways, the row names held on the left */
  .pr-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .pr-table {
    min-width: 720px;
  }
  .pr-table thead th,
  .pr-table thead td {
    position: static;
  }
  .pr-table th[scope='row'],
  .pr-table .pr-corner,
  .pr-group th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
  .pr-table th[scope='row'] {
    width: 170px;
    box-shadow: 1px 0 0 var(--border);
  }
  .pr-group th {
    background: var(--surface-2);
  }
}
@media (max-width: 700px) {
  .plan-price b {
    font-size: 36px;
  }
}
@media (max-width: 620px) {
  /* a phone reads the bill a row at a time: the row's name on its own line, the packages' answers side by side under
     it, and the package names held at the top while the rows go by */
  .pr-scroll {
    overflow: clip;
    border-radius: 16px;
  }
  .pr-table,
  .pr-table thead,
  .pr-table tbody,
  .pr-table tfoot {
    display: block;
    min-width: 0;
  }
  .pr-table tr {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  }
  .pr-table thead tr {
    position: sticky;
    top: 56px;
    z-index: 3;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .pr-table thead th,
  .pr-table thead td {
    position: static;
    padding: 12px 4px 10px;
    border-bottom: 0;
  }
  .pr-table .pr-corner {
    display: none;
  }
  .pr-col-name {
    font-size: 13.5px;
  }
  .pr-col-price {
    font-size: 12px;
  }
  .pr-col-price small {
    display: none;
  }
  .pr-table th[scope='row'] {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    box-shadow: none;
    padding: 12px 14px 0;
    font-size: 13.5px;
    background: transparent;
  }
  .pr-table td {
    padding: 8px 4px 12px;
  }
  .pr-table tbody tr + tr > * {
    border-top: 0;
  }
  .pr-table tbody tr + tr {
    border-top: 1px dashed var(--border);
  }
  .pr-table .pr-group {
    display: block;
  }
  .pr-group th {
    display: block;
    position: static;
    padding: 10px 14px;
  }
  .pr-table tbody tr:not(.pr-group):hover > th {
    box-shadow: none;
  }
  .pr-long {
    display: none;
  }
  .pr-short {
    display: inline;
  }
  .pr-pick,
  .pr-agreed {
    padding: 2px 8px;
    font-size: 12px;
  }
  .pr-num {
    font-size: 14.5px;
  }
  .pr-table tfoot {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plans .plan,
  .plans .plan:hover {
    transition: none;
    transform: none;
  }
}

/* ---- The help centre (ADR-384) ------------------------------------------------------------------
   A shop floor reads this with one hand and a queue at the counter, so the answers are grouped under
   their topics, the filter works in the page itself, and every card says its whole answer in a line. */
/* the box takes the whole width it is given, and what it finds drops under it as you type (ADR-741, owner: "add dropdown
   suggestion with creative … redesign this box with premuim and make serch box width full fit with the content") */
.help-find {
  position: relative;
  max-width: none;
  margin: 0 0 30px;
}
.help-search {
  position: relative;
  display: flex;
  align-items: center;
}
.help-search-mark {
  position: absolute;
  left: 18px;
  display: grid;
  place-items: center;
  color: var(--accent, #005d7b);
  pointer-events: none;
}
.help-search input {
  width: 100%;
  height: 54px;
  padding: 0 18px 0 50px;
  border-radius: var(--fx-r);
  font: inherit;
  font-size: 17px;
  color: var(--ink, #0b1220);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.help-find .help-search input {
  height: 62px;
  padding: 0 128px 0 62px;
  font-size: 17.5px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 18px 40px -34px #00334966;
}
.help-find .help-search-mark {
  left: 0;
  width: 62px;
  height: 62px;
  border-radius: 20px 0 0 20px;
}
.help-find .help-search-mark svg {
  width: 21px;
  height: 21px;
}
.help-find .help-search:focus-within .help-search-mark {
  color: var(--accent);
}
.help-key {
  position: absolute;
  right: 16px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.help-search:focus-within .help-key {
  opacity: 0;
}
.help-clear {
  position: absolute;
  right: 12px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.help-clear:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.help-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.help-clear[hidden] {
  display: none;
}
/* what it finds, under the box: the name with the typed part kept whole, and the topic it belongs to */
.help-sugg {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 0;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 30px 60px -32px #00334966,
    0 2px 10px -6px #00334922;
  animation: help-sugg 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.help-sugg[hidden] {
  display: none;
}
@keyframes help-sugg {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* What a search finds (ADR-786, owner: "redesign dropdown text with professional and cleat text not to big with light
   color block for section"). The topic used to be repeated on the end of every row, which read as noise and pushed the
   names onto two lines; it is a light band above its answers now, said once, and each answer is one clear line. This is
   the one dropdown style on the site: the What's new search wears it too, from the same rules. */
.help-sugg-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-2);
}
.help-sugg-group + .help-sugg-group {
  margin-top: 6px;
}
.help-sugg-head {
  padding: 7px 10px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.help-sugg-row {
  display: block;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.help-sugg-name {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.help-sugg-name b {
  font-weight: 700;
  color: var(--accent-ink, #04202a);
  background: var(--accent-soft);
  border-radius: 3px;
}
.help-sugg-row.is-on,
.help-sugg-row:hover {
  color: var(--accent-ink, #04202a);
  background: var(--accent-soft);
}
@media (max-width: 700px) {
  .help-find .help-search input {
    height: 56px;
    padding: 0 16px 0 54px;
  }
  .help-find .help-search-mark {
    width: 54px;
    height: 56px;
  }
  .help-key {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .help-sugg {
    animation: none;
  }
}
.help-search input:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.help-search input::placeholder {
  color: var(--muted, #566a70);
}
/* the browser's own cross is hidden: this site empties a box with its own Clear, and never with a ✕ (owner's rule) */
.help-search input::-webkit-search-cancel-button,
.help-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.help-search input:focus {
  outline: none;
  border-color: var(--accent, #005d7b);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.help-none {
  margin: 14px 2px 0;
  font-size: 15.5px;
  color: var(--muted, #566a70);
}
.help-group,
.help-popular {
  margin-top: 40px;
}
.help-popular + .help-group {
  margin-top: 46px;
}
.help-topic {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.help-topic-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  color: var(--accent, #005d7b);
  background: var(--accent-soft, #e2eef2);
}
.help-topic-icon svg {
  width: 19px;
  height: 19px;
}
.help-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted, #566a70);
}
.help-card {
  text-decoration: none;
  color: inherit;
}
.help-card[hidden] {
  display: none !important;
}
.help-card h3 {
  font-size: 17.5px;
  line-height: 1.35;
}
.help-card p {
  font-size: 14.5px;
}
.help-centre .grid {
  align-items: stretch;
}

/* one answer, read as a column: the same measure a post has, with its steps numbered */
.help-article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 24px) 24px clamp(38px, 5.4vw, 77px);
}
.help-part {
  padding: 26px 0 0;
}
.help-part h2 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.help-part p {
  margin: 0 0 15px;
  font-size: 17px;
  line-height: 1.75;
}
.help-steps {
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: help-step;
  display: grid;
  gap: 12px;
}
.help-steps li {
  counter-increment: help-step;
  position: relative;
  padding: 2px 0 2px 44px;
  font-size: 16.5px;
  line-height: 1.65;
}
.help-steps li::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #005d7b);
}
.help-note {
  margin: 20px 0;
  padding: 16px 18px 16px 20px;
  border-radius: 14px;
  border-left: 3px solid var(--accent, #005d7b);
  background: var(--surface-2, #f1f7f8);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2, #2b4249);
}
.help-shot {
  margin: 22px 0;
}
.help-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.help-shot figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted, #566a70);
}
.help-after {
  margin: 40px 0 0;
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--surface-2, #f1f7f8);
  border: 1px solid var(--border);
}
.help-after h2 {
  margin: 0 0 8px;
  font-size: 21px;
}
.help-after p {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--ink-2, #2b4249);
}
.help-article + * {
  margin-top: clamp(38px, 5.4vw, 77px);
}
/* an answer beside the other answers (ADR-705): the way back, the answers in this topic with this one marked, and common
   questions from the other topics on the left; each screenshot in a window frame; on a phone the list follows the answer */
/* ADR-841, owner: "this left sidebar too small width and fonts small too" — both reading rails widened and their
   names set at a size you read rather than squint at. */
.help-layout.has-side {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(10px, 2vw, 24px);
  padding-bottom: clamp(38px, 5.4vw, 77px);
}
.help-layout.has-side .help-article {
  max-width: 800px;
  margin: 0;
  padding: 0;
}
/* the list of answers stays with the reader instead of scrolling away, and a click lands on the answer rather than the top
   of the page (ADR-739, owner: "you should keep stick in the content it so annoy"). Only where there is room beside the
   words; narrower than that the list sits above the answer as before. */
.help-side {
  display: grid;
  gap: 14px;
}
/* The news sidebar is ordinary page content, not a pinned panel (ADR-1296, owner: "just remove stick it will the
   same because when you stick sidebar on sub page it not nice" and "i don't like scroll block on right sidebar").
   It used to be sticky with a scroll box of its own, so a reader's wheel moved the sidebar or the page depending
   on where the pointer sat. One wheel, one thing. */
@media (min-width: 1000px) {
  .help-layout.has-side .help-side {
    position: sticky;
    top: calc(var(--head-h) + 20px);
    max-height: calc(100dvh - var(--head-h) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
}
.help-side .news-back {
  justify-self: start;
}
.help-side-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.help-side-card h2 {
  margin: 0 0 4px;
  padding: 0 6px;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.help-side-card ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.help-side-card a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.help-side-card a:hover {
  background: var(--surface-2);
  color: var(--accent);
}
.help-side-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--surface-2);
}
.help-side-mark svg {
  width: 17px;
  height: 17px;
}
.help-side-card a[aria-current] {
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-weight: 600;
}
.help-side-card a[aria-current] .help-side-mark {
  color: #fff;
  background: var(--accent);
}
.help-shot {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.help-shot-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.help-shot-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}
.help-shot-bar i:nth-child(2) {
  background: #febc2e;
}
.help-shot-bar i:nth-child(3) {
  background: #28c840;
}
.help-shot img {
  border-radius: 0;
  background: var(--surface-2);
}
.help-shot img[width='390'] {
  width: min(100%, 320px);
  margin: 16px auto;
  border-radius: 22px;
}
.help-shot figcaption {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .help-layout.has-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .help-side {
    order: 2;
  }
}
@media (max-width: 700px) {
  .help-article {
    padding: 0 18px;
  }
  .help-part p {
    font-size: 16px;
  }
  .help-topic {
    font-size: 18px;
  }
}

/* ---- Customer stories and the hardware list (ADR-399) -------------------------------------------
   A story is somebody's own words, so it is set as a quotation with its face beside it; the hardware
   list is a table people come back to, so it reads as rows with a plain verdict on each. */
.stories .story {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.story-stars {
  font-size: 14px;
  letter-spacing: 2px;
  color: #e0a12a;
}
.story blockquote {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink, #0b1220);
}
.story blockquote::before {
  content: '“';
}
.story blockquote::after {
  content: '”';
}
.story figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.story-face {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.story-face-mark {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #005d7b);
  background: var(--accent-soft, #e2eef2);
}
.story figcaption b {
  display: block;
  font-size: 15px;
}
.story figcaption small {
  display: block;
  font-size: 13px;
  color: var(--muted, #566a70);
}

.devices {
  display: grid;
  gap: 28px;
}
.devices-kind {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 18px;
}
.devices-kind-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  color: var(--accent, #005d7b);
  background: var(--accent-soft, #e2eef2);
}
.devices-kind-icon svg {
  width: 17px;
  height: 17px;
}
.devices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.device {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.device-name {
  font-weight: 600;
  font-size: 15.5px;
}
.device-how {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #566a70);
}
.device-verdict {
  justify-self: end;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ok-ink, #00795a);
  background: rgba(0, 196, 140, 0.14);
  white-space: nowrap;
}
.device.is-works_note .device-verdict {
  color: #8a5a00;
  background: rgba(245, 165, 36, 0.16);
}
.device.is-no .device-verdict {
  color: #9b2f28;
  background: rgba(226, 0, 15, 0.1);
}
.device-note,
.device-where {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, #2b4249);
}
.device-where {
  font-size: 13px;
  color: var(--muted, #566a70);
}
.devices-foot {
  margin: 26px 0 0;
  font-size: 14.5px;
  color: var(--muted, #566a70);
}
@media (max-width: 640px) {
  .device {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .device-how {
    grid-column: 1;
  }
}

/* ---- What's new (ADR-494) -----------------------------------------------------------------------
   A timeline, newest first, under month labels. The kind of update is the first thing read — a colour and a
   mark on the rail, and a chip in words — so a shop owner scanning for fixes finds them without reading titles. */
.updates {
  --upd-new: #2459a6;
  --upd-new-soft: #e6effa;
  --upd-improved: #00795a;
  --upd-improved-soft: #ddf5ed;
  --upd-fixed: #9a5b0f;
  --upd-fixed-soft: #fbefdc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .updates {
    --upd-new: #8db8f0;
    --upd-new-soft: #16263f;
    --upd-improved: #3fdcae;
    --upd-improved-soft: #0d3329;
    --upd-fixed: #e2a95c;
    --upd-fixed-soft: #34271a;
  }
}
:root[data-theme='dark'] .updates {
  --upd-new: #8db8f0;
  --upd-new-soft: #16263f;
  --upd-improved: #3fdcae;
  --upd-improved-soft: #0d3329;
  --upd-fixed: #e2a95c;
  --upd-fixed-soft: #34271a;
}
.updates:not(.has-side) .wrap > * {
  max-width: 1040px;
}
.updates:not(.has-side) .upd-tools {
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.updates:not(.has-side) .upd-search {
  max-width: 640px;
}
/* the whole width (ADR-535): filters and months stay in view on the left, the updates two abreast on the right */
.upd-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
/* the side stands on the page rather than in a box of its own — its border and tinted ground made it read as a window cut
   into the page (ADR-747, owner: "don't put this left sidebar in the iframe like this … just sticky enouge") */
.upd-side {
  position: sticky;
  top: calc(var(--head-h) + 24px);
  display: grid;
  gap: 22px;
  max-height: calc(100dvh - var(--head-h) - 48px);
  overflow: auto;
  padding: 2px 10px 8px 2px;
  border: 0;
  background: none;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.upd-tools {
  display: grid;
  gap: 14px;
  margin: 0;
}
.upd-index {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 16px;
}
.upd-progress {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.upd-progress i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transition: height 0.12s linear;
}
.upd-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.upd-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  color: var(--ink-2);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding 0.2s ease;
}
.upd-index a b {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
}
.upd-index a:hover {
  background: var(--surface-2);
  padding-left: 14px;
}
.upd-index a[aria-current] {
  color: var(--accent-ink);
  font-weight: 600;
  background: var(--accent-soft);
}
.upd-index a[aria-current] b {
  color: #fff;
  background: var(--accent);
}
.upd-index li[hidden] {
  display: none;
}
/* The versions folded into one line (ADR-766, owner: "for version you can auto collapse and group it can save our space").
   The line says the version you are reading and how many updates it holds; the rest of them are a list you open when you
   go looking, and it folds again the moment you pick one. Six rows become one, and the side fits the screen. */
.upd-vers {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.upd-vers > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 3px 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.upd-vers > summary::-webkit-details-marker {
  display: none;
}
.upd-vers > summary:hover {
  background: var(--surface-2);
}
.upd-vers > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.upd-vers-of {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.upd-vers-now {
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.upd-vers > summary b {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: var(--accent);
  font-variant-numeric: tabular-nums;
}
.upd-vers-caret {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.upd-vers-caret svg {
  width: 16px;
  height: 16px;
}
.upd-vers[open] > summary {
  border-bottom: 1px solid var(--border);
}
.upd-vers[open] .upd-vers-caret {
  transform: rotate(180deg);
}
.upd-vers ol {
  padding: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .upd-vers-caret {
    transition: none;
  }
}
.upd-chip {
  --k: var(--accent);
  --k-soft: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.upd-chip b {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.upd-chip.is-new {
  --k: var(--upd-new);
  --k-soft: var(--upd-new-soft);
}
.upd-chip.is-improved {
  --k: var(--upd-improved);
  --k-soft: var(--upd-improved-soft);
}
.upd-chip.is-fixed {
  --k: var(--upd-fixed);
  --k-soft: var(--upd-fixed-soft);
}
.upd-chip:hover {
  border-color: var(--k);
  color: var(--ink);
}
.upd-chip.on {
  color: var(--k);
  background: var(--k-soft);
  border-color: var(--k);
  font-weight: 600;
}
.upd-chip.on b {
  color: var(--k-soft);
  background: var(--k);
}
.upd-chip:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--k) 45%, transparent);
  outline-offset: 2px;
}
/* the side redrawn to fit its column (ADR-704): the kinds as four tiles, two by two, each with its icon and count; the areas
   as rows, one under another, each with its icon and count; nothing wraps into a tall pile of pills */
.upd-kind-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.upd-chip.upd-kind-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'icon count' 'label label';
  align-items: center;
  gap: 8px 10px;
  min-height: 0;
  padding: 10px 12px 11px;
  border-radius: 16px;
  text-align: left;
}
.upd-kind-tile i {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--k);
  background: var(--k-soft);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.upd-kind-tile i svg {
  width: 18px;
  height: 18px;
}
.upd-kind-tile span {
  grid-area: label;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}
.upd-chip.upd-kind-tile b {
  grid-area: count;
  justify-self: end;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.upd-chip.upd-kind-tile.on {
  background: var(--k-soft);
}
.upd-chip.upd-kind-tile.on i {
  color: #fff;
  background: var(--k);
}
.upd-chip.upd-kind-tile.on b {
  color: #fff;
  background: var(--k);
}
.upd-area-rows {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.upd-chip.upd-area-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px 0 6px;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
.upd-area-row i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent);
  background: var(--surface-2);
}
.upd-area-row i svg {
  width: 16px;
  height: 16px;
}
.upd-area-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upd-chip.upd-area-row:hover {
  border-color: transparent;
  background: var(--surface-2);
}
.upd-chip.upd-area-row.on {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-weight: 600;
}
.upd-chip.upd-area-row.on i {
  color: #fff;
  background: var(--accent);
}
.upd-chip.upd-area-row.on b {
  color: #fff;
  background: var(--accent);
}
.upd-month-label em {
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
}
/* how long BrownPOS has been in the making, above the list (ADR-704): the words beside a short road of milestones */
.upd-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  overflow: hidden;
  margin: 0 0 clamp(28px, 4vw, 48px);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 28px;
  color: #eaf0ffd9;
  background: linear-gradient(140deg, var(--brand-2), var(--brand) 65%);
  isolation: isolate;
}
.upd-story-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #eaf0ff1f 1px, transparent 1.2px);
  background-size: 20px 20px;
  mask-image: radial-gradient(80% 90% at 100% 50%, #000 20%, transparent 75%);
}
.upd-story-words h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  text-wrap: balance;
}
.upd-story-words p {
  margin: 0;
  color: #eaf0ffcc;
  line-height: 1.7;
}
.upd-story-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.upd-story-road::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #eaf0ff33, var(--accent-2));
}
.upd-story-road li {
  position: relative;
  display: grid;
  gap: 4px;
  padding-top: 28px;
}
.upd-story-road li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid var(--accent-2);
  border-radius: 50%;
  background: var(--brand);
}
.upd-story-road li.is-now::after {
  background: var(--accent-2);
  box-shadow: 0 0 0 6px #7fd0e22e;
}
.upd-story-road b {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}
.upd-story-road span {
  color: #eaf0ffc2;
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .upd-story {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .upd-story-road {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .upd-story-road::before {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .upd-story-road li {
    padding: 0 0 18px 30px;
  }
}

.upd-timeline {
  display: grid;
  gap: clamp(34px, 4.5vw, 56px);
  min-width: 0;
}
/* an update or a month the filters have put away; the grid above would otherwise draw it anyway */
.upd[hidden],
.upd-month[hidden],
.updates .help-none[hidden] {
  display: none !important;
}
/* the bar's own height is kept once, by scroll-padding on the root (ADR-739); these only ask for a little more air */
.upd-month {
  display: grid;
  gap: 16px;
}
.upd-month-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.upd-month-label b {
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.upd-month-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.upd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.upd-grid .upd.is-highlight {
  grid-column: 1 / -1;
}
.upd {
  --k: var(--upd-improved);
  --k-soft: var(--upd-improved-soft);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
}
.upd-grid .upd {
  display: block;
  min-width: 0;
  scroll-margin-top: 42px;
}
.upd.is-new {
  --k: var(--upd-new);
  --k-soft: var(--upd-new-soft);
}
.upd.is-fixed {
  --k: var(--upd-fixed);
  --k-soft: var(--upd-fixed-soft);
}
/* the rail joins the marks of one month; it stops at the last one */
.upd::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 50px;
  bottom: -14px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.upd-grid .upd::before {
  display: none;
}
.upd-grid .upd-dot {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.upd-grid .upd-card {
  height: 100%;
  box-sizing: border-box;
  padding: 18px 20px 18px 74px;
}
.upd-grid .upd.is-highlight .upd-dot {
  top: 22px;
  left: 22px;
  width: 46px;
  height: 46px;
}
.upd-grid .upd.is-highlight .upd-card {
  padding-left: 86px;
}
.upd:last-child::before {
  display: none;
}
.upd-dot {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--k);
  background: var(--k-soft);
  border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
}
.upd-dot svg {
  width: 21px;
  height: 21px;
}
.upd-card {
  min-width: 0;
  padding: 18px 22px 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.upd-card:hover {
  border-color: color-mix(in srgb, var(--k) 40%, var(--border));
  box-shadow: 0 18px 36px -26px rgba(4, 16, 22, 0.45);
}
.upd-dot {
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.upd-grid .upd:hover .upd-dot {
  transform: rotate(-8deg) scale(1.06);
}
/* the cards rise into place as they scroll into view, a beat apart across the row; only once scripts run */
.updates[data-reveal] .upd {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.updates[data-reveal] .upd.is-in {
  opacity: 1;
  transform: none;
}
.updates[data-reveal] .upd-month-label::after {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.updates[data-reveal] .upd-month.is-in .upd-month-label::after {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .updates[data-reveal] .upd,
  .updates[data-reveal] .upd-month-label::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 1100px) {
  .upd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .upd-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .upd-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .upd-index {
    padding-left: 0;
  }
  .upd-progress {
    display: none;
  }
  .upd-index ol {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .upd-index a {
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
  }
}
@media (max-width: 560px) {
  .upd-grid .upd-dot {
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
  }
  .upd-grid .upd-card {
    padding: 16px 16px 16px 62px;
  }
}
.upd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.upd-meta time {
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.upd-kind {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k);
  background: var(--k-soft);
}
.upd-area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upd-area svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.upd h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.upd-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.upd-more {
  margin-top: 12px;
}
.upd-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  list-style: none;
}
.upd-more summary::-webkit-details-marker {
  display: none;
}
.upd-more summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.upd-more[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.upd-more ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.upd-more li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.upd-more li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k);
}
/* a highlight is the update every shop should know about: drawn larger, in its own colour */
.upd.is-highlight .upd-card {
  padding: 22px 26px 22px;
  border-color: color-mix(in srgb, var(--k) 45%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--k-soft) 70%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow: var(--shadow);
}
.upd.is-highlight h3 {
  font-size: 22px;
}
.upd.is-highlight .upd-dot {
  color: var(--surface);
  background: var(--k);
}
@media (max-width: 640px) {
  .upd {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }
  .upd::before {
    left: 16px;
    top: 40px;
  }
  .upd-dot {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
  .upd-dot svg {
    width: 17px;
    height: 17px;
  }
  .upd-card,
  .upd.is-highlight .upd-card {
    padding: 16px 16px;
  }
  .upd h3,
  .upd.is-highlight h3 {
    font-size: 17.5px;
  }
  .upd-summary {
    font-size: 15.5px;
  }
  .upd-chip {
    flex: none;
  }
}

/* ---- breadcrumbs (ADR-658) ----------------------------------------------------------------------
   Every page's banner opens with where you are, drawn as a strip of receipt tape: a perforation along its
   foot, a tiny barcode between the steps instead of an arrow, a scanner's line under a link as the pointer
   passes, and a green "scanned" light on the page you are on, which blinks once as it opens, like a till's
   beep. The banner is the dark brand ground in both colour modes, so the tape's colours hold in both. */
.crumbs {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.crumbs-tape {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 14px 4px 4px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #7fd0e22e;
  box-shadow: inset 0 1px 0 #ffffff14;
  background: linear-gradient(90deg, #ffffff17, #ffffff08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13.5px;
  line-height: 1;
}
.crumbs-tape::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 1px;
  height: 1px;
  pointer-events: none;
  background-image: radial-gradient(circle, #7fd0e270 0.7px, transparent 0.9px);
  background-size: 5px 1px;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.crumbs li + li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 12px;
  margin: 0 9px;
  opacity: 0.5;
  background: linear-gradient(90deg, #eaf0ff 0 1px, transparent 1px 2.5px, #eaf0ff 2.5px 4.5px, transparent 4.5px 6px, #eaf0ff 6px 7px, transparent 7px 8.4px, #eaf0ff 8.4px 10px);
}
.crumbs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: #eaf0ffc9;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.crumbs-home a {
  padding: 0 12px;
  background: #ffffff14;
}
.crumbs a:hover {
  color: #fff;
  background: #ffffff1f;
}
.crumbs a::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.crumbs a:hover::after,
.crumbs a:focus-visible::after {
  transform: scaleX(1);
}
.crumbs a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.crumbs-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 2px;
  color: #fff;
  font-weight: 600;
}
.crumbs-now > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}
.crumbs-scan {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00c48c;
  box-shadow: 0 0 0 3px #00c48c33;
  animation: crumb-beep 1.6s 0.35s ease-out both;
}
@keyframes crumb-beep {
  0% {
    box-shadow: 0 0 0 0 #00c48cb3;
  }
  55% {
    box-shadow: 0 0 0 10px #00c48c00;
  }
  100% {
    box-shadow: 0 0 0 3px #00c48c33;
  }
}
.crumbs li.crumbs-gap {
  display: none;
}
.crumbs-plain {
  padding: 8px 4px;
  color: #eaf0ffa8;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .crumbs-tape {
    padding-right: 12px;
    font-size: 13px;
  }
  .crumbs-tape.is-long li.crumbs-mid {
    display: none;
  }
  .crumbs-tape.is-long li.crumbs-gap {
    display: inline-flex;
    color: #eaf0ffb3;
    letter-spacing: 0.08em;
  }
  .crumbs-home a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .crumbs-now > span:last-child {
    max-width: 52vw;
  }
  .crumbs li + li::before {
    margin: 0 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crumbs-scan {
    animation: none;
  }
  .crumbs a::after {
    transition: none;
  }
}

/* a help answer and a news post open on the same banner as every other page (ADR-658) */
.hero.is-article .narrow {
  max-width: 760px;
}
.hero.is-article h1 {
  max-width: 26ch;
}
/* an answer's banner is the help centre's banner (ADR-789): the answer on the left, the box on the right, in the page's
   own margins rather than a 760px column adrift in a full-width band. Trimmed to a strip at the owner's word (ADR-836,
   19 Sep: "make this title in one line and move box search outside their box and make this height for this banner
   short"): the question on one line, the search field standing on the banner with no panel around it, and the band's
   own padding cut by a third. What a reader came for is the answer, and it now starts higher up the screen. */
.hero.is-article.is-find {
  padding-block: clamp(26px, 2.8vw, 40px);
}
/* A banner with no picture: the page's name on the left, the line about it and its buttons on the right, on one row
   (ADR-839). These eleven pages carried a column half a screen tall — an eyebrow, a 36px title, a lead and two buttons
   stacked under 76px of padding — before a reader reached anything the page was for. Nothing is removed; it is laid
   out instead, which takes them from about 540px to about 230px, the height of the help centre's own banner. */
.hero.is-brief {
  padding-block: clamp(26px, 3vw, 44px);
}
.hero.is-brief .crumbs {
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.hero.is-brief .eyebrow {
  display: block;
  margin-bottom: 8px;
}
/* One line (owner, 19 Sep: "titles for subpage should one line only"). Two things were breaking them: `.hero h1` is
   capped at 19 characters, which suits a 40px headline on the home page and not a 23px one in a strip; and
   `text-wrap: balance` evens the lines of a heading that wraps, which is the opposite of not wrapping. The cap goes,
   the balance goes, and the longest title on the site — "Tables, rounds and bills, the way a restaurant works" — sits
   on one line in the room the banner gives it. A narrow screen still breaks it, which is what a narrow screen is for. */
.hero.is-brief h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  text-wrap: pretty;
}
/* only where there is room for the longest of them; between 900 and 1200 a long one may take two lines rather than
   push the page sideways */
@media (min-width: 1200px) {
  .hero.is-brief h1 {
    white-space: nowrap;
  }
}
.hero.is-brief .lead {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.6;
}

/* A post opens with that same strip (ADR-1290), with two differences it cannot share. A feature page's title is a
   label — "Stock & suppliers" — and is held to one line above 1200px; a post's is a whole sentence, so the nowrap
   has to come back off or the longest of them pushes the page sideways. And a post has no eyebrow: the tag, date,
   author and reading time stand in its place, so they carry the eyebrow's gap under them. */
.hero.is-brief.is-article h1 {
  max-width: none;
  white-space: normal;
  text-wrap: pretty;
}
.hero.is-brief.is-article .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.hero-brief {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .hero-brief {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
}

/* The help centre's own banner gets the same trim (owner, 19 Sep: "make this banner page help centre much better
   too"): the empty panel around the search is gone, the question and the box sit on one line, and the band is a third
   shorter. The page keeps its heading — it is the help centre's own title, not a label repeated from the article. */
.hero.is-find:not(.is-article) {
  padding-block: clamp(26px, 3vw, 44px);
}
.hero.is-find:not(.is-article) h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  text-wrap: balance;
}
.hero.is-find:not(.is-article) .hero-find-box {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero.is-find .crumbs {
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

/* one row of chrome: where you are on the left, the search on the right, wrapping on a narrow screen */
.hero.is-article.is-find .hero-find.is-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 28px);
}
.hero.is-article.is-find .hero-find.is-strip .crumbs {
  margin: 0;
  min-width: 0;
}
.hero.is-article.is-find .hero-find.is-strip .hero-find-box {
  flex: 1 1 300px;
  max-width: 400px;
}
/* the field is the box: a panel around one search field was a second frame inside a banner that is already a frame */
.hero.is-article.is-find .hero-find-box {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.help-index {
  display: none;
}
/* the answer's own opening: the topic it belongs to, the question, and the line of summary the banner used to carry
   before it was trimmed to a strip (ADR-837) */
.help-open {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--border);
}
.help-open .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.help-open h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.help-open .lead {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.6;
}
.hero .post-meta {
  margin-bottom: 14px;
  color: #eaf0ffb3;
}
.hero .post-meta b {
  color: #fff;
  background: #ffffff1f;
}

/* ---- Screenshot gallery (ADR-663) -------------------------------------------------------------
   The tabs are the till's own top bar: a dark teal capsule of icons and names, each with its F-key, the chosen one lit
   with a line filling under it while the gallery turns by itself. Each screen stands in a device frame, and its words
   come out beside it on a slip of receipt paper, fed from the top as the tab changes, with a barcode at its foot. */
.show-bar {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  padding: 6px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--brand-2), var(--brand) 70%);
  box-shadow:
    0 18px 40px -22px #003349b3,
    inset 0 1px 0 #ffffff1f,
    inset 0 0 0 1px #7fd0e22e;
}
.show-bar::-webkit-scrollbar {
  display: none;
}
.show-tab {
  /* the bar runs the content's full width, as the header and footer do, its tabs sharing it (owner: "full width in content") */
  position: relative;
  flex: 1 0 auto;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #eaf0ffbf;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.2s,
    background-color 0.25s;
}
.show-tab:hover {
  color: #fff;
  background: #ffffff14;
}
.show-tab:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.show-tab[aria-selected='true'] {
  color: #fff;
  background: #ffffff21;
  box-shadow: inset 0 0 0 1px #7fd0e240;
}
.show-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff12;
}
.show-ico svg {
  width: 18px;
  height: 18px;
}
.show-tab[aria-selected='true'] .show-ico {
  color: #001f2d;
  background: var(--accent-2);
}
.show-tab kbd {
  padding: 2px 6px;
  border-radius: 6px;
  font:
    600 11px/1.2 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  color: #eaf0ff99;
  background: #ffffff12;
  border: 1px solid #ffffff1f;
}
/* the time line runs under the tab's own words, not the whole pill (owner: "it should run under the text") */
.show-name {
  position: relative;
}
.show-run {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff1f;
  opacity: 0;
  font-style: normal;
}
.show-run::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), #00c48c);
  transform: scaleX(0);
  transform-origin: left;
}
.show-tab[aria-selected='true'] .show-run {
  opacity: 1;
}
.show.is-playing .show-tab[aria-selected='true'] .show-run::after {
  animation: show-run var(--show-ms, 7000ms) linear both;
}
@keyframes show-run {
  to {
    transform: scaleX(1);
  }
}

.show-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
}
.show-panel[hidden] {
  display: none;
}
.show-panel.is-phone {
  grid-template-columns: minmax(0, 440px) minmax(280px, 380px);
  justify-content: center;
}
.show-device {
  position: relative;
  margin: 0;
  animation: show-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.show-device::before {
  content: '';
  position: absolute;
  inset: 8% 4% -6%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, #7fd0e259, transparent 70%);
  filter: blur(30px);
}
.show-screen {
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.show-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.show-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.show-chrome i:nth-child(2) {
  background: #febc2e;
}
.show-chrome i:nth-child(3) {
  background: #28c840;
}
.show-chrome span {
  margin-inline-start: 10px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.show-screen img,
.show-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.show-phone {
  position: relative;
  width: min(320px, 100%);
  margin: 0 auto;
  padding: 38px 12px 16px;
  border-radius: 46px;
  background: linear-gradient(160deg, #1c2b33, #0b1220);
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 2px #ffffff1a;
}
.show-phone img {
  border-radius: 24px;
  max-height: 620px;
  object-fit: cover;
  object-position: top;
}
.show-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 14px;
  margin-left: -42px;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

.show-slip {
  position: relative;
  padding: 22px 22px 34px;
  color: #1d2b31;
  background: #fffdf7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius: 4px 4px 0 0;
  box-shadow:
    0 1px 2px #0b12201a,
    0 24px 44px -26px #0b122066;
  animation: show-feed 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}
/* the torn foot of the slip */
.show-slip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background:
    linear-gradient(135deg, #fffdf7 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
    linear-gradient(225deg, #fffdf7 50%, transparent 50%) 0 0 / 12px 8px repeat-x;
}
.show-slip-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1.5px dashed #b9c4c9;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: #5b6b72;
}
.show-slip-head b {
  color: #005d7b;
  letter-spacing: 0.14em;
}
.show-slip h3 {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 21px;
  line-height: 1.3;
  color: #0b1220;
}
.show-slip p {
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: #3d5963;
}
.show-lines {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: grid;
  gap: 9px;
  border-top: 1.5px dashed #b9c4c9;
}
.show-lines li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1d2b31;
}
.show-lines svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #00795a;
}
.show-code {
  display: block;
  height: 30px;
  margin-top: 18px;
  opacity: 0.78;
  background: repeating-linear-gradient(
    90deg,
    #1d2b31 0 2px,
    transparent 2px 4px,
    #1d2b31 4px 5px,
    transparent 5px 8px,
    #1d2b31 8px 11px,
    transparent 11px 12px,
    #1d2b31 12px 13px,
    transparent 13px 16px
  );
}
@keyframes show-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
@keyframes show-feed {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 -20px 0);
    transform: none;
  }
}
@media (max-width: 1180px) {
  .show-tab kbd {
    display: none;
  }
  .show-tab {
    padding: 0 12px 0 8px;
  }
}
/* when the names do not fit, first the F-keys go, then the tabs become keys sharing the capsule's width (ADR-686) */
.show-bar.is-snug .show-tab kbd {
  display: none;
}
.show-bar.is-snug .show-tab {
  padding: 0 12px 0 8px;
}
.show-bar.is-keys {
  width: 100%;
  overflow: visible;
  border-radius: 24px;
}
/* The icon stays beside the name rather than above it (ADR-980, owner: "make icon svg and text the same row").
   A stacked tab reads as a keypad key; these are the names of screens, and a name with its mark in front of it is
   how the rest of the site writes one. A long name wraps under itself, still beside the icon. */
/* Every name on one line, and the bar takes a second row rather than breaking one (ADR-980, owner: "I need text
   show one line only"). Eight names laid end to end need about 1470px; sharing one row instead left each name box
   49px wide — narrower than the word "Right-click" — which is how "booking" came apart into "bookin / g". Each tab
   now takes the width its own name needs and the rows fill up as they will. */
/* One row that slides rather than two that wrap (ADR-997). `safe center` keeps the row centred while
   it fits and pins it to the start once it does not, so the first tab is never scrolled out of reach. */
.show-bar.is-keys {
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 8px;
  scrollbar-width: none;
}
.show-bar.is-keys::-webkit-scrollbar {
  display: none;
}
.show-bar.is-rail {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.show-bar.is-keys .show-tab {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
  min-height: 50px;
  padding: 9px 12px 11px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}
.show-bar.is-keys .show-name {
  white-space: nowrap;
}
.show-bar.is-keys .show-ico {
  flex: none;
}
.show-bar.is-keys .show-run {
  bottom: -4px;
}
@media (max-width: 900px) {
  /* One row that slides, not a keypad (ADR-857, owner: "redesign for tablet and mobile phone devices only, make it
     easy to use"). Seven screens laid out as a keypad stood 177px tall on a phone, broke "Day summary" and "Guest
     menu" across two lines each, and left a hole where an eighth would have been. They are pills on a rail now — an
     icon and one line of words each, swiped with a thumb, the chosen one lit. The gallery already brings the chosen
     tab into view when the bar is wider than the screen, so a screen that turns by itself drags the rail with it, and
     the rail fades at its right edge to say there is more. */
  /* `is-keys` is put on by the script when the F-key chips fit, and its own rules are two classes deep, so the rail
     has to name it too or a keypad comes back the moment the script runs */
  .show-bar,
  .show-bar.is-keys {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    padding: 5px;
    border-radius: 999px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 6px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  .show-tab,
  .show-bar.is-keys .show-tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    height: 44px;
    min-height: 0;
    padding: 0 14px 0 7px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .show-tab kbd {
    display: none;
  }
  .show-ico {
    width: 30px;
    height: 30px;
  }
  .show-ico svg {
    width: 16px;
    height: 16px;
  }
  .show-run {
    bottom: -4px;
  }
  .show-panel,
  .show-panel.is-phone {
    grid-template-columns: minmax(0, 1fr);
  }
  .show-slip {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 620px) {
  .show-tab {
    font-size: 12.5px;
    padding: 0 12px 0 6px;
  }
  .show-ico {
    width: 28px;
    height: 28px;
  }
  .show-screen {
    border-radius: 12px;
  }
  .show-chrome {
    padding: 8px 10px;
  }
  .show-chrome span {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .show-device,
  .show-slip {
    animation: none;
  }
  .show.is-playing .show-tab[aria-selected='true'] .show-run::after {
    animation: none;
  }
}

/* ---- a feature told in steps (ADR-672) ------------------------------------------------------------------------
   Where a feature section had one screenshot, it can hold its steps: five to seven real screens from the demo shops,
   one at a time in a window whose bar says which step it is. Under it the steps sit on a line like stations on a
   route; the one showing fills its ring as the seconds pass, the ones behind are stamped done, and a sentence says
   what happens there. Seven steps fit a phone without scrolling: the line only ever holds numbers. */
@property --steps-p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.steps-screen {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  touch-action: pan-y;
}
.steps-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.steps-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.steps-chrome i:nth-child(1) {
  background: #ff5f57;
}
.steps-chrome i:nth-child(2) {
  background: #febc2e;
}
.steps-chrome i:nth-child(3) {
  background: #28c840;
}
.steps-now {
  margin-inline-start: 10px;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* the arrows and the count as one pill in the bar (ADR-690): ‹ 3 / 5 ›, the halves lighting as they are pressed */
.steps-nav {
  margin-inline-start: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.steps-count {
  flex: none;
  min-width: 44px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.steps-go {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.steps-go svg {
  width: 14px;
  height: 14px;
}
.steps-go:hover {
  color: #fff;
  background: var(--accent);
}
.steps-go.is-prev:active {
  transform: translateX(-2px);
}
.steps-go.is-next:active {
  transform: translateX(2px);
}
.steps-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* a thumb needs more than a pointer does: on a touch screen, a phone or a tablet each arrow is a full 34px target */
@media (max-width: 900px), (hover: none) {
  .steps-go {
    width: 34px;
    height: 34px;
  }
  .steps-go svg {
    width: 16px;
    height: 16px;
  }
}
.steps-slides {
  position: relative;
}
.steps-slide {
  margin: 0;
}
/* every slide the same 3:2 frame, so a phone's tall screen sits in the middle instead of the deck jumping in height (ADR-682).
   The frames above hold min-width: 0 because a picture's own width must never set the frame's: a percentage max-width does not
   count when a grid works out how narrow an item may be, so while a newly shown slide was still loading the deck sprang out to
   the picture's width and sprang back when it arrived (ADR-734). */
.steps-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface-2) 70%);
}
.steps-slide:not([hidden]) {
  animation: steps-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes steps-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--steps-dir, 1) * 22px));
  }
}
/* the route as a till roll (ADR-718, owner: "more creative"): a strip of paper torn in teeth along both edges, each step a
   ticket with its number, a perforation between them. The chosen ticket prints out wider in ink with its name, a line of
   gold running under it while the deck plays; a ticket already seen keeps a tick beside its number. */
.steps-rail {
  position: relative;
  display: flex;
  gap: 0;
  padding: 11px 6px;
  background: var(--surface-2);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x;
}
/* A folded step needs room for two digits and no more; the open one needs room for its name. They used to share the rail
   evenly (`flex: 1 1 0` with the open one growing to four), which gave the open step 40% of the deck — not enough for
   "Order, and receive against the order", so nearly every name on this page was cut by 30 to 185 pixels (ADR-779, owner:
   "what to do if we can't ready full text on sliders"). A folded step is held to the 52px its number needs and the open one
   grows into everything else, which is three to four times what it had. Sizing the folded ones to their content instead was
   worse, not better: the name's `max-width: 100%` then resolved against a stub whose own width came from its content, so
   the browser gave it almost nothing — the same trap as the slider's frames in ADR-742. `flex-grow` still animates. */
.steps-stub {
  position: relative;
  flex: 1 1 0;
  min-width: 52px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition:
    flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.25s ease,
    background-color 0.25s ease;
}
.steps-stub + .steps-stub::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  border-left: 2px dotted var(--border-strong);
  transition: opacity 0.25s ease;
}
.steps-stub[aria-selected='true']::before,
.steps-stub[aria-selected='true'] + .steps-stub::before {
  opacity: 0;
}
.steps-num {
  position: relative;
  flex: none;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.steps-name {
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition:
    max-width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
}
.steps-stub:hover {
  color: var(--accent);
}

.steps-stub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.steps-stub.is-done {
  color: var(--accent);
}

.steps-stub.is-done .steps-num::after {
  content: '';
  position: absolute;
  right: -12px;
  top: -7px;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.steps-stub[aria-selected='true'] {
  flex-grow: 14;
  min-width: 0;
  justify-content: flex-start;
  padding-inline: 14px;
  color: #fff;
  background: #003349;
}
.steps-stub[aria-selected='true'] .steps-name {
  max-width: 100%;
  opacity: 1;
}
.steps-stub[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f3d9a4 var(--steps-p), rgb(255 255 255 / 0.18) 0);
}
.steps.is-playing .steps-stub[aria-selected='true'] {
  animation: steps-fill var(--steps-ms, 6000ms) linear both;
}
.steps:not(.is-playing) .steps-stub[aria-selected='true'] {
  --steps-p: 100%;
}
@keyframes steps-fill {
  from {
    --steps-p: 0%;
  }
  to {
    --steps-p: 100%;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .steps-stub[aria-selected='true'] {
    color: #003349;
    background: #f3d9a4;
  }
  :root:not([data-theme='light']) .steps-stub[aria-selected='true']::after {
    background: linear-gradient(90deg, #003349 var(--steps-p), rgb(0 51 73 / 0.2) 0);
  }
}
:root[data-theme='dark'] .steps-stub[aria-selected='true'] {
  color: #003349;
  background: #f3d9a4;
}
:root[data-theme='dark'] .steps-stub[aria-selected='true']::after {
  background: linear-gradient(90deg, #003349 var(--steps-p), rgb(0 51 73 / 0.2) 0);
}
.steps-text {
  margin: 0;
  min-height: 3.2em;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Above a phone the open step is never squeezed below the width its name needs: where the deck is narrow — a split row at
   1024px leaves the rail about 400px — the rail scrolls sideways instead, and the script already walks the open step back
   into the middle of it. Squeezing was what cut "Order, and receive against the order" by 207px (ADR-779). */
@media (min-width: 621px) {
  .steps-rail {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .steps-rail::-webkit-scrollbar {
    display: none;
  }
  .steps-stub[aria-selected='true'] {
    min-width: min(330px, 100%);
  }
}
@media (max-width: 620px) {
  /* a phone keeps every ticket a thumb wide: the chosen one widens with its number, and the bar above names it */
  .steps-rail {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .steps-rail::-webkit-scrollbar {
    display: none;
  }
  .steps-stub {
    flex: 1 0 44px;
    height: 44px;
    padding: 0 4px;
  }
  .steps-stub[aria-selected='true'] {
    flex: 2 0 64px;
    justify-content: center;
    padding-inline: 6px;
  }
  .steps-stub[aria-selected='true'] .steps-name {
    display: none;
  }
  .steps-stub[aria-selected='true']::after {
    left: 8px;
    right: 8px;
    bottom: 6px;
  }
  .steps-num {
    font-size: 0.9rem;
  }
  .steps-now {
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps-slide:not([hidden]),
  .steps.is-playing .steps-stub[aria-selected='true'] {
    animation: none;
  }
}

/* ---- a live menu in a phone (ADR-684) ------------------------------------------------------------------------------
   A phone of today's standard size, 393 × 852 points, in natural titanium, with the island, the side keys and a status
   bar whose clock keeps the visitor's time; the real menu runs below the status bar, as a web page does on a phone. Drawn
   at 0.78 (about 330 by 690 px): the owner first asked for it small, then found 0.62 "too small". */
.live-phone {
  --s: 0.78;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
  isolation: isolate;
}
.live-phone::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 4% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  filter: blur(10px);
}
/* The "live" badge is the phone's Dynamic Island (ADR-794, owner: "move this live demo into badge on guest menu with
   animation design with creative", then "move LIVE DEMO to somewhere not blocked on this QR menu demo"). A pill in the
   menu's own corner covered the shop's cloche button, so the badge went where a phone shows a live activity: the island
   at the top of the screen, which stretches when the page opens to reveal a breathing green dot and the word, with the
   front camera still in its right end. It covers nothing of the menu, because the status bar is the frame's, not the
   menu's. Every size is in the phone's own points times --s, so it scales with the device it sits on. */
.live-phone-tag {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(27px * var(--s));
  height: calc(36px * var(--s));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--s));
  padding: 0 calc(41px * var(--s)) 0 calc(14px * var(--s));
  border-radius: calc(20px * var(--s));
  font-size: calc(14px * var(--s));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: #000;
  box-shadow: inset 0 0 0 1px #1c1d20;
  overflow: hidden;
  pointer-events: none;
  animation: lp-open 1.1s cubic-bezier(0.2, 1.25, 0.3, 1) 0.4s both;
}
/* the front camera, kept at the island's right end as the island stretches */
.live-phone-tag::after {
  content: '';
  position: absolute;
  right: calc(14px * var(--s));
  top: 50%;
  width: calc(13px * var(--s));
  height: calc(13px * var(--s));
  margin-top: calc(-6.5px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34405a, #0a0c12 60%);
}
.live-phone-tag i {
  position: relative;
  flex: none;
  width: calc(9px * var(--s));
  height: calc(9px * var(--s));
  border-radius: 50%;
  background: #1fb866;
  box-shadow: 0 0 0 0 #1fb86680;
  animation: lp-live 2s ease-out infinite;
}
/* a second ring, out of step with the first, so the dot is never still */
.live-phone-tag i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #1fb86666;
  animation: lp-live 2s ease-out infinite 1s;
}
/* the island opens outward from its own size, the word arriving once there is room for it */
@keyframes lp-open {
  0% {
    max-width: calc(124px * var(--s));
    color: transparent;
  }
  55% {
    color: transparent;
  }
  100% {
    max-width: calc(300px * var(--s));
    color: #fff;
  }
}
@keyframes lp-live {
  70% {
    box-shadow: 0 0 0 7px #1fb86600;
  }
  100% {
    box-shadow: 0 0 0 0 #1fb86600;
  }
}
.live-phone-fit {
  width: calc(425px * var(--s));
  height: calc(884px * var(--s));
}
.lp-device {
  position: relative;
  width: 425px;
  height: 884px;
  padding: 16px;
  border-radius: 70px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: linear-gradient(145deg, #e9ebee 0%, #a9aeb6 22%, #eef0f2 46%, #8f949c 70%, #d6d9dd 100%);
  box-shadow:
    inset 0 0 0 1.5px #ffffffb0,
    inset 0 0 0 5px #5f646b55,
    0 42px 70px -30px #0b1220a6,
    0 18px 30px -18px #0b122066;
}
.lp-device::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 63px;
  background: #050506;
  box-shadow: inset 0 0 0 2px #2b2d31;
}
.lp-key {
  position: absolute;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7f848b, #d4d7db 60%, #9ba0a7);
}
.lp-key.is-action {
  left: -4px;
  top: 150px;
  height: 34px;
}
.lp-key.is-up {
  left: -4px;
  top: 212px;
  height: 62px;
}
.lp-key.is-down {
  left: -4px;
  top: 290px;
  height: 62px;
}
.lp-key.is-side {
  right: -4px;
  top: 238px;
  height: 98px;
}
.lp-key.is-camera {
  right: -3px;
  top: 520px;
  height: 76px;
  width: 4px;
  opacity: 0.8;
}
.lp-screen {
  position: relative;
  z-index: 1;
  width: 393px;
  height: 852px;
  padding-top: 54px;
  border-radius: 55px;
  overflow: hidden;
  background: #050506;
}
.lp-screen iframe {
  display: block;
  width: 393px;
  height: 798px;
  border: 0;
  background: var(--surface-2);
}
.lp-status {
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  padding: 0 30px 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font:
    600 17px/1 -apple-system,
    'SF Pro Text',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.lp-status time {
  width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lp-island {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 20px;
  background: #000;
  box-shadow: inset 0 0 0 1px #1c1d20;
}
.lp-island::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 11px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34405a, #0a0c12 60%);
}
.lp-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-icons svg {
  fill: currentColor;
}
.lp-home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 138px;
  height: 5px;
  margin-left: -69px;
  border-radius: 3px;
  background: #0b1220;
  opacity: 0.55;
  pointer-events: none;
}
/* A one-time guide on the live menu (ADR-796, owner: "add guide tour alert them when they are here that you can touch with
   our real QR menu demo"). When the phone has been in view a moment, a tap beacon pulses on the first dish and a sheet
   rises at the foot of the screen — "It's the real menu. Touch it." — with the red light to close it. It leaves the moment
   the visitor touches the menu, or after nine seconds, and stays away for the rest of the visit. It sits over the last row
   of dishes and the home bar only, never the shop's bar or the search, and the beacon lets touches through. */
.lp-guide {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: calc(884px * var(--s));
  pointer-events: none;
}
.lp-guide[hidden] {
  display: none;
}
.lp-tap {
  position: absolute;
  left: calc(50% - 425px * var(--s) / 2 + 115px * var(--s));
  top: calc(321px * var(--s));
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #0b1220cc;
  box-shadow: 0 6px 18px -8px #000c;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.lp-tap i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #9fdeeb;
  animation: lp-tap-ring 1.8s ease-out infinite;
}
.lp-tap svg {
  width: 22px;
  height: 22px;
  animation: lp-tap-press 1.8s ease-in-out infinite;
}
@keyframes lp-tap-ring {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
@keyframes lp-tap-press {
  0%,
  100% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(3px) scale(0.88);
  }
  30% {
    transform: translateY(0);
  }
}
.lp-say {
  position: absolute;
  left: 50%;
  top: calc(700px * var(--s));
  width: calc(365px * var(--s));
  transform: translate(-50%, 26px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 13px 15px 14px;
  border-radius: 18px;
  color: #fffdf7;
  background: #04202af0;
  border: 1px solid #ffffff2b;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px #000e;
  font-family: var(--font);
  text-align: left;
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.2, 1.2, 0.3, 1);
  pointer-events: auto;
}
.lp-say b {
  grid-column: 1;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}
.lp-say span {
  grid-column: 1;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #cfe6ec;
}
.lp-say-shut {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 2px;
}
.lp-guide.is-on .lp-tap {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.45s;
}
.lp-guide.is-on .lp-say {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .lp-tap i,
  .lp-tap svg {
    animation: none;
  }
  .lp-tap,
  .lp-say {
    transition: none;
  }
}
.live-phone figcaption {
  max-width: 34ch;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}
.live-phone figcaption a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
/* in a gallery the phone stands where the screenshot stood, centred in its column (ADR-691) */
.show-device .live-phone {
  margin: 0 auto;
}
@media (max-width: 420px) {
  .live-phone {
    --s: 0.72;
  }
}
@media (max-width: 360px) {
  .live-phone {
    --s: 0.66;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-phone-tag,
  .live-phone-tag i,
  .live-phone-tag i::after {
    animation: none;
  }
  .live-phone-tag {
    max-width: none;
  }
}

/* ---- the demo shops as shop fronts (ADR-694) ---------------------------------------------------------------------
   Three fronts on one street: a striped awning with a scalloped hem in the shop's colour, a sign with its initials, a
   window onto one of its real screens, its facts as chips, and the way in. The front lifts and its window slides a
   little when pointed at. */
.fronts-row {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 22px;
}
.front {
  --front: #0e7490;
  --front-ink: #0b5f76;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.front.tone-gold {
  --front: #b7791f;
  --front-ink: #7d5210;
}
.front.tone-coral {
  --front: #c2553b;
  --front-ink: #9a3d28;
}
.front.tone-jade {
  --front: #2f855a;
  --front-ink: #256c49;
}
/* the words in each shop's colour, dark enough on white and light enough on the dark theme (WCAG AA) */
:root[data-theme='dark'] .front {
  --front-ink: #7cc7da;
}
:root[data-theme='dark'] .front.tone-gold {
  --front-ink: #e3b267;
}
:root[data-theme='dark'] .front.tone-coral {
  --front-ink: #f0a28f;
}
:root[data-theme='dark'] .front.tone-jade {
  --front-ink: #7fd1a3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .front {
    --front-ink: #7cc7da;
  }
  :root:not([data-theme='light']) .front.tone-gold {
    --front-ink: #e3b267;
  }
  :root:not([data-theme='light']) .front.tone-coral {
    --front-ink: #f0a28f;
  }
  :root:not([data-theme='light']) .front.tone-jade {
    --front-ink: #7fd1a3;
  }
}
a.front:hover,
a.front:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--front) 45%, var(--border));
}
a.front:focus-visible {
  outline: 2px solid var(--front);
  outline-offset: 3px;
}
.front-awning {
  display: block;
  height: 30px;
  background: repeating-linear-gradient(90deg, var(--front) 0 28px, color-mix(in srgb, var(--front) 22%, #fff) 28px 56px);
  -webkit-mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 0 0 / 28px 100% repeat-x;
  mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 0 0 / 28px 100% repeat-x;
}
/* Each sign reserves the room the longest of them needs — one line of kind, two of name, one of
   place — so the four pictures below start on the same line instead of stepping down the row. */
.front-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 4px;
  min-height: 110px;
}
.front-mark {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(140deg, var(--front), color-mix(in srgb, var(--front) 68%, #000));
  box-shadow: 0 10px 22px -14px var(--front);
}
.front-id {
  display: grid;
  min-width: 0;
}
.front-id small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--front-ink);
}
.front-id strong {
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ink);
}
.front-id em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--muted);
}
.front-window {
  position: relative;
  display: block;
  margin: 14px 22px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--front) 10%, transparent);
}
.front-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
a.front:hover .front-window img {
  transform: scale(1.04) translateY(-2%);
}
.front-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 22px 0;
  padding: 0;
}
.front-facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--front) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--front) 20%, var(--border));
}
.front-facts li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--front);
}
.front-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: auto 22px 0;
  padding-top: 16px;
  padding-bottom: 20px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--front-ink);
}
.front-facts + .front-more,
.front-window + .front-more {
  margin-top: auto;
}
/* Four fronts need the full desk. Below that they pair off rather than each keeping a column
   too narrow for "4 tables kept back for walk-ins" to sit on one line. */
/* More fronts than fit: three at a time on a reel the browser scrolls and snaps itself, with the
   steps deck's own arrows above it (ADR-993). A finger swipes it; the arrows move it by one shop. */
.fronts-nav {
  display: flex;
  width: max-content;
  margin: -6px 0 14px auto;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.fronts-row.is-reel {
  position: relative;
  --n: 3;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n) - 1) * 22px) / var(--n));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 0 12px;
}
/* A shop off to the side waits its turn: dimmed and a shade smaller, lifting into full colour as
   it snaps into place. The reel keeps moving on its own, so this is what makes the movement read
   as one shop stepping forward rather than the whole row sliding. */
.fronts-row.is-reel > .front {
  opacity: 0.55;
  transform: scale(0.965);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.fronts-row.is-reel > .front.is-here {
  opacity: 1;
  transform: none;
}
.fronts-row.is-reel > .front.is-lead {
  border-color: color-mix(in srgb, var(--front) 40%, var(--border));
  box-shadow:
    0 22px 44px -28px color-mix(in srgb, var(--front) 70%, transparent),
    var(--shadow-sm);
}
a.front:hover {
  transform: translateY(-5px) scale(1);
}
/* the bar counts down to the next shop, so the movement is never a surprise */
.fronts-tick {
  position: relative;
  flex: none;
  width: 34px;
  height: 3px;
  margin: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  overflow: hidden;
}
.fronts-tick i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--accent);
}
.fronts-tick.is-running i {
  animation: fronts-tick var(--fronts-ms, 5200ms) linear forwards;
}
@keyframes fronts-tick {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.fronts-row.is-reel::-webkit-scrollbar {
  display: none;
}
.fronts-row.is-reel > .front {
  scroll-snap-align: start;
}
.fronts-row.is-reel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 26px;
}
.steps-go[disabled] {
  opacity: 0.35;
  cursor: default;
}
.steps-go[disabled]:hover {
  color: var(--accent);
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .fronts-row.is-reel {
    scroll-behavior: auto;
  }
  .fronts-row.is-reel > .front {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fronts-tick {
    display: none;
  }
}
/* two on a tablet, one on a phone (owner, 20 Sept: "need to display 2 boxs only for table and mobile 1 box only") */
@media (max-width: 1280px) {
  .fronts-row:not(.is-reel) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin-inline: auto;
  }
  .fronts-row.is-reel {
    --n: 2;
  }
}
@media (max-width: 1000px) {
  .fronts-row:not(.is-reel) {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .fronts-row.is-reel {
    --n: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .front,
  .front-window img {
    transition: none;
  }
}

/* ---- a card grid as a switcher (ADR-685) ---------------------------------------------------------------------------
   The owner found the nine cards "too big" and asked for tabs, premium and creative. The names stand in a column of keys
   on a raised panel, the chosen one lit in the brand's deep teal with a line filling along it while the switcher turns by
   itself; the stage beside it holds that card's real screen in a window and its words. On a phone and a tablet the keys are
   a grid of three over the stage, so nothing scrolls sideways. */
.ftabs {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.ftabs-keys {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ftab-key {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.ftab-key:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.ftab-key:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ftab-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.ftab-icon svg {
  width: 18px;
  height: 18px;
}
.ftab-icon b {
  font-size: 0.8rem;
}
.ftab-name {
  min-width: 0;
}
.ftab-key[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 78%, #000) 100%);
  box-shadow: 0 10px 24px -14px var(--brand);
}
.ftab-key[aria-selected='true'] .ftab-icon {
  color: #fff;
  background: #ffffff26;
}
/* on the dark theme the brand's deep teal is the panel's own colour, so the chosen key is lit in the brighter teal */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ftab-key[aria-selected='true'] {
    color: #04202a;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    box-shadow: 0 10px 24px -14px var(--accent);
  }
  :root:not([data-theme='light']) .ftab-key[aria-selected='true'] .ftab-icon {
    color: #04202a;
    background: #ffffff59;
  }
  :root:not([data-theme='light']) .ftab-fill {
    background: #04202a80;
  }
  :root:not([data-theme='light']) .ftab-art-icon {
    color: #04202a;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
  }
}
:root[data-theme='dark'] .ftab-key[aria-selected='true'] {
  color: #04202a;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 24px -14px var(--accent);
}
:root[data-theme='dark'] .ftab-key[aria-selected='true'] .ftab-icon {
  color: #04202a;
  background: #ffffff59;
}
:root[data-theme='dark'] .ftab-fill {
  background: #04202a80;
}
:root[data-theme='dark'] .ftab-art-icon {
  color: #04202a;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.ftab-fill {
  position: absolute;
  left: 56px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: #ffffffb3;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.ftabs.is-playing .ftab-key[aria-selected='true'] .ftab-fill {
  opacity: 1;
  animation: ftab-fill var(--ftab-ms, 7000ms) linear both;
}
@keyframes ftab-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.ftabs-stage {
  min-width: 0;
}
.ftab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.ftab-panel[hidden] {
  display: none;
}
.ftab-panel:not([hidden]) {
  animation: ftab-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ftab-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ftab-shot {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.ftab-shot-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ftab-shot-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}
.ftab-shot-bar i:nth-child(2) {
  background: #febc2e;
}
.ftab-shot-bar i:nth-child(3) {
  background: #28c840;
}
.ftab-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface-2) 70%);
}
.ftab-art {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: radial-gradient(90% 80% at 30% 20%, var(--accent-soft), var(--surface-2) 70%);
  box-shadow: var(--shadow);
}
.ftab-art-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000));
  box-shadow: 0 22px 40px -22px var(--brand);
}
.ftab-art-icon svg {
  width: 46px;
  height: 46px;
}
.ftab-words {
  min-width: 0;
}
.ftab-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ftab-kicker .ftab-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.ftab-words h3 {
  margin: 12px 0 10px;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.2;
  text-wrap: balance;
}
.ftab-words p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.ftab-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.ftab-more span {
  transition: transform 0.2s ease;
}
.ftab-more:hover span {
  transform: translateX(4px);
}
@media (max-width: 1100px) {
  .ftab-panel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ftab-shot,
  .ftab-art {
    width: 100%;
    max-width: 560px;
  }
}
@media (max-width: 900px) {
  .ftabs {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ftabs-keys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .ftab-key {
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    min-height: 86px;
    padding: 12px 6px 14px;
    font-size: 0.78rem;
    text-align: center;
  }
  .ftab-fill {
    left: 14px;
    bottom: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ftab-panel:not([hidden]),
  .ftabs.is-playing .ftab-key[aria-selected='true'] .ftab-fill {
    animation: none;
  }
}

/* The Contact page's desk (ADR-700): the form in a card on the left; on the right the chat apps on the brand ground under
   a live reply note, each number to tap or copy, the e-mail, and each place folded shut with its address and a map. */
.cdesk {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.cdesk-form {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)) 0%, var(--surface) 62%);
  box-shadow: var(--shadow);
}
.cdesk-form .section-head {
  margin-bottom: 0;
}
.cdesk-form .lead-form {
  flex: 1;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  max-width: none;
  margin: 26px 0 0;
}
.cdesk-form .lead-field:has(textarea) {
  grid-template-rows: auto minmax(120px, 1fr);
}
.cdesk-form .lead-field textarea {
  height: 100%;
}
.cdesk-form .lead-form[hidden] + .lead-thanks {
  flex: 1;
}
.cdesk-form .lead-thanks {
  max-width: none;
  margin: 26px 0 0;
}
.cdesk-side {
  display: grid;
  gap: 16px;
}
.cdesk-chat {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 26px;
  border-radius: 28px;
  color: #eaf0ffd9;
  background: linear-gradient(145deg, var(--brand-2), var(--brand) 65%);
  isolation: isolate;
}
.cdesk-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #eaf0ff1f 1px, transparent 1.2px);
  background-size: 20px 20px;
  mask-image: radial-gradient(80% 90% at 90% 0%, #000 20%, transparent 75%);
}
.cdesk-chat .chat-live {
  justify-self: start;
}
.cdesk-chat h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.3;
  text-wrap: balance;
}
.cdesk-chat p {
  margin: 0;
  color: #eaf0ffc7;
  font-size: 0.93rem;
  line-height: 1.6;
}
.cdesk-apps {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.cdesk-app {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid #ffffff24;
  border-radius: 16px;
  color: #fff;
  background: #ffffff0f;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cdesk-app:hover,
.cdesk-app:focus-visible {
  transform: translateX(4px);
  border-color: #ffffff55;
  background: #ffffff1f;
}
.cdesk-app-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
}
.cdesk-app-icon svg {
  width: 20px;
  height: 20px;
}
.cdesk-app.is-telegram .cdesk-app-icon {
  background: #229ed9;
}
.cdesk-app.is-whatsapp .cdesk-app-icon {
  background: #1fa855;
}
.cdesk-app.is-messenger .cdesk-app-icon {
  background: linear-gradient(135deg, #0a7cff, #a033ff);
}
.cdesk-app b {
  flex: 1;
  font-weight: 600;
}
.cdesk-app-go {
  color: #eaf0ff99;
  transition: transform 0.25s ease;
}
.cdesk-app:hover .cdesk-app-go {
  transform: translate(2px, -2px);
  color: #fff;
}
.cdesk-card {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}
.cdesk-card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.cdesk-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 0;
  border-radius: 14px;
}
.cdesk-line > a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.cdesk-line > a span:last-child {
  display: grid;
  min-width: 0;
}
.cdesk-line small {
  color: var(--ink-2);
  font-size: 0.76rem;
}
.cdesk-line b {
  overflow: hidden;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a number never breaks (owner, ADR-700), but an address must never be cut either: at 768px "ask@brownpos.com" lost its
   last letters to an ellipsis (audit, 16 Sep). An address may wrap, at the @ if it must, and is never shortened. */
.cdesk-line a[href^='mailto:'] b {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.cdesk-line > a:hover b {
  color: var(--accent);
}
.cdesk-line-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}
.cdesk-line-icon svg {
  width: 17px;
  height: 17px;
}
.cdesk-copy {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.cdesk-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cdesk-copy.is-done {
  border-color: transparent;
  color: var(--ok-ink, #0b7a55);
  background: color-mix(in srgb, #00c48c 16%, transparent);
}
.cdesk-place {
  border-top: 1px solid var(--border);
}
.cdesk-place:first-of-type {
  border-top: 0;
}
.cdesk-place summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  list-style: none;
  cursor: pointer;
}
.cdesk-place summary::-webkit-details-marker {
  display: none;
}
.cdesk-place summary b {
  flex: 1;
  color: var(--ink);
  font-weight: 600;
}
.cdesk-place summary > svg:last-child {
  color: var(--ink-2);
  transition: transform 0.3s ease;
}
.cdesk-place[open] summary > svg:last-child {
  transform: rotate(180deg);
}
.cdesk-place-body {
  display: grid;
  gap: 8px;
  padding: 0 0 14px 50px;
}
.cdesk-place-body p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}
.cdesk-place-body a {
  justify-self: start;
  font-size: 0.9rem;
  font-weight: 600;
}
@media (max-width: 960px) {
  .cdesk {
    grid-template-columns: minmax(0, 1fr);
  }
  .cdesk-side {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}
@media (max-width: 560px) {
  .cdesk-form,
  .cdesk-chat {
    border-radius: 22px;
  }
  .cdesk-form .lead-two {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cdesk-app,
  .cdesk-app-go,
  .cdesk-place summary > svg:last-child {
    transition: none;
  }
}

/* The till made your own (ADR-711): a large window holding the real till and a deck of looks beside it; a look wipes in with
   a circle opening from the deck's side, a phone leans at the window's corner, and a line fills under the chosen look while
   the deck turns by itself. */
.looks {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.looks-stage {
  position: relative;
  padding: 0 0 72px clamp(56px, 7vw, 110px);
}
.looks-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow:
    0 40px 80px -40px #00334999,
    var(--shadow-lg);
}
.looks-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.looks-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.looks-bar i:nth-child(2) {
  background: #febc2e;
}
.looks-bar i:nth-child(3) {
  background: #28c840;
}
.looks-bar span {
  margin-left: 10px;
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 600;
}
.looks-screens {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
}
.looks-screen {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: circle(0% at var(--x, 100%) var(--y, 50%));
  transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.looks-screen.is-on {
  z-index: 2;
  clip-path: circle(150% at var(--x, 100%) var(--y, 50%));
}
.looks-screen.was-on {
  z-index: 1;
  clip-path: circle(150% at var(--x, 100%) var(--y, 50%));
  transition: none;
}
.looks-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.looks-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(84px, 17%, 172px);
  margin: 0;
  padding: 7px;
  border-radius: 28px;
  background: #0b1220;
  box-shadow: 0 30px 50px -24px #000c;
  transform: rotate(-4deg);
  animation: looks-float 7s ease-in-out infinite;
}
.looks-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}
/* the phone's own top: a solid block over the till's icon bar with the island on it (ADR-871, owner: "make sure
   block dot for phone header"), so nothing of the screenshot shows through around a floating pill */
.looks-phone-notch {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 7px;
  height: 8.1%;
  border-radius: 22px 22px 0 0;
  background: #0b1220;
}
.looks-phone-notch::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  height: 42%;
  min-height: 4px;
  border-radius: 999px;
  background: #1a2436;
  transform: translate(-50%, -50%);
}
/* a quiet label on one line, a small point turned to the phone, rather than a heavy tilted pill (ADR-733) */
.looks-phone figcaption {
  position: absolute;
  left: 100%;
  bottom: 14px;
  width: max-content;
  max-width: none;
  margin-left: 16px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 10px 24px -16px #00334988;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.looks-phone figcaption::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-right: -5px;
  border: 1px solid var(--border);
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 3px;
  background: var(--surface);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes looks-float {
  50% {
    transform: rotate(-2deg) translateY(-8px);
  }
}
.looks-deck {
  display: grid;
  gap: 18px;
}
.looks-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* a heading over the chips it names, across the whole row (ADR-870); the first one keeps no space above it */
.looks-group {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.looks-group:first-child {
  margin-top: 0;
}
.looks-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.looks-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.looks-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.looks-chip-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.looks-chip-icon svg {
  width: 18px;
  height: 18px;
}
.looks-chip.is-sun .looks-chip-icon {
  color: #b45309;
  background: #fef3c7;
}
.looks-chip.is-moon .looks-chip-icon {
  color: #e0e7ff;
  background: #1e1b4b;
}
.looks-chip.is-glass .looks-chip-icon {
  color: #fff;
  background: linear-gradient(135deg, #22d3ee, #6366f1 60%, #ec4899);
}
/* each style wears its own colours, so the Styles group reads as a palette (ADR-870) */
.looks-chip.is-classic .looks-chip-icon {
  color: #ccfbf1;
  background: #0f3f49;
}
.looks-chip.is-clay .looks-chip-icon {
  color: #7c2d12;
  background: #fed7aa;
}
.looks-chip.is-soft .looks-chip-icon {
  color: #475569;
  background: #e2e8f0;
}
.looks-chip.is-ink .looks-chip-icon {
  color: #fff;
  background: #141414;
}
.looks-chip[aria-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.looks-chip[aria-selected='true']:not(.is-sun):not(.is-moon):not(.is-glass):not(.is-classic):not(.is-clay):not(.is-soft):not(.is-ink) .looks-chip-icon {
  color: var(--surface);
  background: var(--accent);
}
.looks-fill {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.looks.is-playing .looks-chip[aria-selected='true'] .looks-fill {
  opacity: 1;
  animation: looks-fill var(--looks-ms, 4500ms) linear both;
}
@keyframes looks-fill {
  to {
    transform: scaleX(1);
  }
}
.looks-text {
  min-height: 3.4em;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--ink-2);
  background: var(--surface-2);
  line-height: 1.6;
}
@media (max-width: 1000px) {
  .looks {
    grid-template-columns: minmax(0, 1fr);
  }
  .looks-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .looks-stage {
    padding: 0 0 40px 40px;
  }
  .looks-phone {
    padding: 4px;
    border-radius: 18px;
  }
  .looks-phone img {
    border-radius: 14px;
  }
  .looks-phone-notch {
    left: 4px;
    right: 4px;
    top: 4px;
    border-radius: 14px 14px 0 0;
  }
  .looks-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .looks-phone figcaption {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .looks-screen {
    transition: none;
  }
  .looks-phone {
    animation: none;
  }
  .looks.is-playing .looks-chip[aria-selected='true'] .looks-fill {
    animation: none;
  }
}

/* The floor plan, from drawing to dinner (ADR-712): the real screen in a window, a light on the spot its tool stands on with the
   rest dimmed, a pointer that glides there and clicks the way a hand would, two sides (Design, Serve) and the stops beside it. */
.tour {
  display: grid;
  gap: 22px;
}
.tour-sides {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tour-side {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 20px 8px 8px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tour-side:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.tour-side:focus-visible,
.tour-stop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tour-side-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--accent);
  background: var(--accent-soft);
}
.tour-side-icon svg,
.tour-stop-icon svg {
  width: 20px;
  height: 20px;
}
.tour-side-words {
  display: grid;
  line-height: 1.2;
}
.tour-side-words small {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tour-side-words b {
  font-size: 1.02rem;
}
.tour-side[aria-pressed='true'] {
  border-color: #003349;
  color: #fff;
  background: #003349;
}
.tour-side[aria-pressed='true'] .tour-side-words small {
  color: #f3d9a4;
}
.tour-side[aria-pressed='true'] .tour-side-icon {
  color: #003349;
  background: #f3d9a4;
}
.tour-body {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(270px, 4fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}
.tour-window {
  overflow: hidden;
  border: 1px solid #0b2a3b;
  border-radius: 20px;
  background: #0b2a3b;
  box-shadow:
    0 40px 80px -44px #003349aa,
    var(--shadow-lg);
}
.tour-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
}
.tour-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.tour-bar i:nth-child(2) {
  background: #febc2e;
}
.tour-bar i:nth-child(3) {
  background: #28c840;
}
.tour-bar span {
  margin-left: 10px;
  color: #dbe7ee;
  font-size: 0.88rem;
  font-weight: 600;
}
.tour-screens {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #eef3f6;
}
.tour-screen {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 0.5s ease,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tour-screen.is-on {
  opacity: 1;
  transform: none;
}
.tour-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.tour-spot {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 12px;
  box-shadow:
    0 0 0 2px #f3d9a4,
    0 0 0 9999px rgb(2 18 28 / 0.4);
  pointer-events: none;
  transition:
    left 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.4s ease;
}
.tour-spot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 #f3d9a4cc;
  animation: tour-ring 2.4s ease-out infinite;
}
.tour-spot.is-off {
  opacity: 0;
}
@keyframes tour-ring {
  70%,
  100% {
    box-shadow: 0 0 0 14px #f3d9a400;
  }
}
.tour-cursor {
  position: absolute;
  z-index: 4;
  color: #0b1220;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: clamp(18px, 2.2vw, 28px);
  opacity: 0;
  pointer-events: none;
  transition:
    left 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s ease;
}
.tour-cursor svg {
  display: block;
  width: 100%;
  transform: translate(-21%, -15%);
  fill: #fff;
  stroke: #0b1220;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px #0006);
}
.tour-screens:not([data-gesture='none']) .tour-cursor {
  opacity: 1;
}
.tour-ripple {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 30px;
  height: 30px;
  border: 2px solid #f3d9a4;
  border-radius: 50%;
  opacity: 0;
}
.tour-screens.is-clicking .tour-ripple {
  animation: tour-click 0.7s ease-out both;
}
.tour-screens[data-gesture='right'].is-clicking .tour-ripple {
  border-color: #fff;
}
@keyframes tour-click {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
.tour-gesture {
  position: absolute;
  right: 100%;
  bottom: 100%;
  width: max-content;
  margin: 0 2px 2px 0;
  padding: 3px 9px;
  border-radius: 999px;
  color: #003349;
  background: #f3d9a4;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.tour-screens[data-gesture='right'].is-clicking .tour-gesture {
  opacity: 1;
  transform: none;
}
.tour-stops {
  display: grid;
  gap: 8px;
}
/* With fourteen stops the list outgrows the screen it describes, so on a wide screen the picture stays where it is and the
   list goes by (ADR-745, redone in ADR-776: owner, "I have test this floor plan section block it not smooth when I scroll
   up or down", then "if possible you can make this tour scroll up and down and stick just images sliders on the left side").
   It used to be the other way about: the list was *also* sticky and scrolled inside itself, which meant a reader's wheel
   sometimes moved the list and sometimes moved the page, depending on where the pointer was — that is the roughness they
   felt. Now only the picture is pinned, the list is ordinary page content, and one wheel moves one thing. */
@media (min-width: 1000px) {
  .tour-body {
    align-items: start;
  }
  /* below the header and below the pre-register bar, if one is stuck up there too (ADR-788) */
  .tour-window {
    position: sticky;
    top: calc(var(--head-now, 80px) + var(--prereg-h, 0px) + 20px);
  }
  /* every stop shows its words beside the pinned picture, which is what gives the list something to scroll past: folded
     to one line each the list was 646px against a 595px picture, so the picture had 51px of travel and never felt pinned.
     Below 1000px the list flows under the picture and stays folded, or a phone would be one long wall of text. */
  /* the page settles on one stop at a time (ADR-791, owner: "when scroll up or down in this section must scroll to each
     tour tabs so we can see the tour animation smoothly"): each stop is a snap point in the middle of the window, which
     is the same band the observer uses to choose the screen — so the wheel lands on a stop and its picture is already
     the one being shown. `proximity`, never `mandatory`: the reader must always be able to scroll straight past. */
  html:has(.tour-stops) {
    scroll-snap-type: y proximity;
  }
  .tour-stop {
    scroll-snap-align: center;
  }
  .tour-stop .tour-stop-words {
    grid-template-rows: auto 1fr;
  }
  .tour-stop .tour-stop-words span {
    padding-top: 4px;
  }
  .tour-stop {
    min-height: 0;
  }
}
.tour-stop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 56px;
  padding: 9px 14px 9px 9px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}
.tour-stop[hidden] {
  display: none;
}
.tour-stop:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.tour-stop-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
}
.tour-stop-words {
  display: grid;
  grid-template-rows: auto 0fr;
  align-self: center;
  transition: grid-template-rows 0.4s ease;
}
.tour-stop-words b {
  font-size: 0.96rem;
  line-height: 1.35;
}
.tour-stop-words span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.55;
}
.tour-stop[aria-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tour-stop[aria-selected='true'] .tour-stop-icon {
  color: var(--surface);
  background: var(--accent);
}
.tour-stop[aria-selected='true'] .tour-stop-words {
  grid-template-rows: auto 1fr;
}
.tour-stop[aria-selected='true'] .tour-stop-words span {
  padding-top: 4px;
}
.tour-fill {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.tour.is-playing .tour-stop[aria-selected='true'] .tour-fill {
  opacity: 1;
  animation: looks-fill var(--tour-ms, 5200ms) linear both;
}
/* on a dark page the chosen side turns gold, so it stands out from the dark ground rather than sinking into it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tour-side[aria-pressed='true'] {
    border-color: #f3d9a4;
    color: #003349;
    background: #f3d9a4;
  }
  :root:not([data-theme='light']) .tour-side[aria-pressed='true'] .tour-side-words small {
    color: #6b4a12;
  }
  :root:not([data-theme='light']) .tour-side[aria-pressed='true'] .tour-side-icon {
    color: #f3d9a4;
    background: #003349;
  }
}
:root[data-theme='dark'] .tour-side[aria-pressed='true'] {
  border-color: #f3d9a4;
  color: #003349;
  background: #f3d9a4;
}
:root[data-theme='dark'] .tour-side[aria-pressed='true'] .tour-side-words small {
  color: #6b4a12;
}
:root[data-theme='dark'] .tour-side[aria-pressed='true'] .tour-side-icon {
  color: #f3d9a4;
  background: #003349;
}
@media (max-width: 1000px) {
  .tour-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .tour-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tour-side {
    padding-right: 10px;
  }
  .tour-side-icon {
    width: 34px;
    height: 34px;
  }
  .tour-spot {
    border-radius: 6px;
  }
  .tour-gesture {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-screen,
  .tour-spot,
  .tour-cursor,
  .tour-stop-words {
    transition: none;
  }
  .tour-spot::after,
  .tour-screens.is-clicking .tour-ripple {
    animation: none;
  }
  .tour.is-playing .tour-stop[aria-selected='true'] .tour-fill {
    animation: none;
  }
}

/* The person behind BrownPOS (ADR-698). The portrait stands in a doorway arch, the pointed shape of an Angkor gateway, with a
   second arch drawn a step behind it on a soft halo, a seal turning at its shoulder, light passing over it once in a while and
   the name on a plate across its foot. The road under the story opens each stop's detail beside it, under it on a phone. */
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.founder-photo {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  margin: 26px 0 34px;
}
.founder-defs {
  position: absolute;
  width: 0;
  height: 0;
}
/* The halo is 128% of the photo and absolutely placed, so on a narrow screen it reaches past the viewport and
   the whole page gains a sideways scroll — 434px inside 430 (ADR-1300, found while checking the About page at
   phone width). The clip belongs to the SECTION, not the photo: the photo has two things that are MEANT to
   hang off it — the name plate 24px below its bottom edge and the seal 24–34px past its right — and clipping
   the photo cut both of them off (ADR-1302). The section runs the full width of the window, so clipping it
   horizontally stops the halo at the window edge while the plate and the seal, which sit well inside it, are
   left alone. `clip` rather than `hidden`, and only on x: it contains the decoration without making a scroll
   container and without ever cutting something that hangs downward. */
.founder {
  overflow-x: clip;
}
.founder-halo {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 128%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
  pointer-events: none;
}
.founder-outline {
  position: absolute;
  left: 20px;
  top: -20px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: visible;
  pointer-events: none;
}
.founder-outline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.founder-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  clip-path: url(#founder-arch);
  background: var(--surface-2);
}
.founder-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 36%;
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.founder-photo:hover .founder-frame img {
  transform: scale(1.04);
}
.founder-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, #ffffff40 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: founder-shine 9s ease-in-out infinite 1.5s;
  pointer-events: none;
}
@keyframes founder-shine {
  0%,
  70% {
    background-position: 160% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
.founder-plate {
  position: absolute;
  left: 50%;
  bottom: -24px;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: min(82%, 300px);
  padding: 11px 22px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  white-space: nowrap;
}
.founder-plate b {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}
.founder-plate small {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}
.founder-seal {
  position: absolute;
  top: 20%;
  right: -34px;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.founder-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: founder-turn 30s linear infinite;
}
.founder-ring text {
  fill: currentColor;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.founder-seal-mark {
  display: grid;
  place-items: center;
}
.founder-seal-mark svg {
  width: 38px;
  height: 38px;
}
@keyframes founder-turn {
  to {
    transform: rotate(360deg);
  }
}
.founder-words h2 {
  margin: 10px 0 18px;
  text-wrap: balance;
}
.founder-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 16px;
}
.founder-name b {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
}
.founder-name span {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 500;
}
.founder-words > p:not(.founder-name) {
  max-width: 40rem;
  margin: 0 0 14px;
  color: var(--ink-2);
  line-height: 1.75;
}
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 600;
}
.founder-link span {
  transition: transform 0.25s ease;
}
.founder-link:hover span {
  transform: translate(2px, -2px);
}
.founder-facts {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  margin: 24px 0 0;
  border-block: 1px solid var(--border);
}
.founder-facts div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px 16px 0;
}
.founder-facts div + div {
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.founder-facts dd {
  order: -1;
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}
.founder-facts dt {
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.4;
}
.founder-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 14px;
  margin: clamp(56px, 6vw, 84px) 0 0;
  padding: 0;
  list-style: none;
}
.founder-road::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent));
}
.founder-stop {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 44px 16px 16px;
  border-radius: 18px;
  outline: none;
  transition: background-color 0.25s ease;
}
.founder-stop::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 16px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  transition: transform 0.25s ease;
}
.founder-stop.is-now::after {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.founder-stop[tabindex] {
  cursor: help;
}
.founder-stop[tabindex]:hover,
.founder-stop[tabindex]:focus-visible {
  background: var(--surface-2);
}
.founder-stop[tabindex]:hover::after,
.founder-stop[tabindex]:focus-visible::after {
  transform: scale(1.25);
}
.founder-stop:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}
.founder-stop b {
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.founder-stop.is-now b {
  color: var(--accent);
}
.founder-what {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
}
.founder-what::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, var(--accent) 1.3px, transparent 1.6px),
    linear-gradient(var(--accent), var(--accent)) 50% 72% / 1.6px 5px no-repeat;
  box-shadow: inset 0 0 0 1.4px var(--accent);
  opacity: 0.7;
}
.founder-stop:not([tabindex]) .founder-what::after {
  display: none;
}
.founder-tip {
  position: absolute;
  z-index: 5;
  left: 8px;
  bottom: calc(100% - 6px);
  width: min(300px, 80vw);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s 0.2s;
  pointer-events: none;
}
.founder-tip::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 100%;
  width: 12px;
  height: 12px;
  border: solid var(--border);
  border-width: 0 1px 1px 0;
  background: var(--surface);
  transform: translateY(-6px) rotate(45deg);
}
.founder-stop:last-child .founder-tip,
.founder-stop:nth-last-child(2) .founder-tip {
  left: auto;
  right: 8px;
}
.founder-stop:last-child .founder-tip::after,
.founder-stop:nth-last-child(2) .founder-tip::after {
  left: auto;
  right: 22px;
}
.founder-stop:hover .founder-tip,
.founder-stop:focus .founder-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .founder-photo {
    width: min(100% - 48px, 400px);
  }
  .founder-seal {
    right: -24px;
    width: 88px;
    height: 88px;
  }
  .founder-seal-mark svg {
    width: 30px;
    height: 30px;
  }
  .founder-road {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .founder-road::before {
    top: 0;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(var(--border), var(--accent));
  }
  .founder-stop {
    padding: 14px 14px 18px 48px;
    cursor: auto;
  }
  .founder-stop::after {
    top: 20px;
    left: 16px;
  }
  .founder-stop[tabindex]:hover,
  .founder-stop[tabindex]:focus-visible {
    background: transparent;
  }
  .founder-what::after {
    display: none;
  }
  .founder-tip,
  .founder-stop:hover .founder-tip,
  .founder-stop:focus .founder-tip {
    position: static;
    width: auto;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .founder-tip::after {
    display: none;
  }
}
@media (max-width: 620px) {
  .founder-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .founder-facts div,
  .founder-facts div + div {
    padding: 14px 0;
    border-left: 0;
  }
  .founder-facts div + div {
    border-top: 1px solid var(--border);
  }
  .founder-plate {
    white-space: normal;
    min-width: 78%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .founder-ring,
  .founder-shine {
    animation: none;
  }
  .founder-frame img,
  .founder-tip {
    transition: none;
  }
}

/* Vision and mission (ADR-698): the vision's statement on the brand ground beside the end-of-day receipt it promises, torn at
   the foot, tilted a little until the pointer straightens it; the mission's question beside four principle tiles. */
.beliefs-vision {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  overflow: hidden;
  padding: clamp(32px, 5vw, 72px);
  border-radius: 32px;
  color: #eaf0ffd9;
  background: linear-gradient(140deg, var(--brand-2), var(--brand) 62%);
  isolation: isolate;
}
.beliefs-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #eaf0ff1f 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 90% at 80% 50%, #000 20%, transparent 78%);
}
.beliefs-vision .eyebrow {
  color: var(--accent-2);
}
.beliefs-vision .eyebrow::before {
  background: var(--accent-2);
}
.beliefs-vision h2 {
  margin: 10px 0 18px;
  color: #fff;
}
.beliefs-statement {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.beliefs-more {
  max-width: 36rem;
  margin: 0;
  color: #eaf0ffcc;
  line-height: 1.75;
}
.beliefs-receipt {
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
  padding: 22px 24px 34px;
  color: #1b2433;
  background: #fffdf7;
  box-shadow: 0 30px 60px -30px #000c;
  transform: rotate(2.5deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.beliefs-receipt:hover {
  transform: rotate(0);
}
.beliefs-receipt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed #1b243340;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.beliefs-receipt-head svg {
  width: 26px;
  height: 26px;
}
.beliefs-receipt ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.beliefs-receipt li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
.beliefs-receipt li i {
  flex: 1;
  min-width: 12px;
  border-bottom: 2px dotted #1b243359;
  transform: translateY(4px);
}
.beliefs-receipt li svg {
  flex: none;
  color: #0b7a55;
}
.beliefs-receipt-code {
  display: block;
  height: 30px;
  margin-top: 20px;
  background: repeating-linear-gradient(90deg, #1b2433 0 2px, transparent 2px 4px, #1b2433 4px 5px, transparent 5px 8px, #1b2433 8px 11px, transparent 11px 12px);
  opacity: 0.85;
}
/* why it was built, beside the loop it runs on: four steps around a ring, arrows flowing from each to the next, the brand
   mark and "we improve together" in the middle */
.beliefs-why {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.beliefs-why-words h2 {
  margin: 10px 0 18px;
  text-wrap: balance;
}
.beliefs-why-words p {
  max-width: 40rem;
  margin: 0 0 14px;
  color: var(--ink-2);
  line-height: 1.75;
}
.beliefs-cycle {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1;
  container-type: inline-size;
}
.beliefs-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.beliefs-loop path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  animation: beliefs-flow 1.8s linear infinite;
}
.beliefs-loop marker path {
  fill: var(--accent);
  stroke: none;
  animation: none;
}
@keyframes beliefs-flow {
  to {
    stroke-dashoffset: -18;
  }
}
.beliefs-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 40%;
  aspect-ratio: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  text-align: center;
}
.beliefs-centre svg {
  width: 36px;
  height: 36px;
}
.beliefs-centre b {
  color: var(--accent);
  font-size: clamp(0.78rem, 3.4cqi, 0.95rem);
  font-weight: 600;
  line-height: 1.3;
}
.beliefs-cycle ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.beliefs-cycle li {
  --a: calc(360deg / var(--n) * var(--i) - 90deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 34cqi;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transform: rotate(var(--a)) translate(39cqi) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}
.beliefs-cycle li:hover {
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 900px) {
  .beliefs-why {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .beliefs-cycle {
    width: min(100%, 360px);
  }
  .beliefs-loop {
    transform: scale(0.85);
  }
  .beliefs-cycle li {
    max-width: 30cqi;
    padding: 8px 10px;
    font-size: 0.76rem;
    transform: rotate(var(--a)) translate(33cqi) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  }
  .beliefs-centre svg {
    width: 28px;
    height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beliefs-loop path {
    animation: none;
  }
}
.beliefs-mission {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
/* the mission is the one question the work is judged by, so it is set as a statement on its own ground rather than a line
   of text with a question mark leaning on it (ADR-742, owner: "redesign this Our Mission it not nice job"). The mark itself
   becomes the panel's watermark, and the panel stays with the reader while the principles that answer it go by. */
.beliefs-ask {
  position: relative;
  align-self: start;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(26px, 2.8vw, 40px);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(158deg, var(--accent-soft), var(--surface) 66%);
  box-shadow: 0 30px 60px -48px #00334966;
}
.beliefs-ask::before {
  content: '?';
  position: absolute;
  z-index: -1;
  right: -6px;
  top: -64px;
  color: var(--accent);
  opacity: 0.09;
  font-size: clamp(9rem, 16vw, 15rem);
  font-weight: 700;
  line-height: 1;
}
.beliefs-ask h2 {
  margin: 10px 0 16px;
}
.beliefs-question {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.85vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.beliefs-question::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
@media (min-width: 901px) {
  .beliefs-ask {
    position: sticky;
    top: calc(var(--head-h) + 24px);
  }
}
/* What BrownPOS is built on (ADR-1300, redrawn ADR-1301). Seven names on cards read as a logo wall, which is
   the one thing a technology row must not be — a shop owner cannot tell a real stack from a pasted scrapbook.
   So the row is mounted instead: a board with its own faint grid, each part a plate wired into it by a trace,
   each mark cut as a hexagon rather than the rounded square every other card on this site uses. Nothing here
   is a brand logo, every colour is a token, and the numbers come from a CSS counter — so the portal can add
   or drop a part and the board still reads as a board. */
.beliefs-tech {
  position: relative;
  margin-top: clamp(38px, 5vw, 64px);
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.6vw, 34px) clamp(28px, 3.8vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(820px 280px at 14% -12%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%), var(--surface-2);
  /* the grid and the glow both have to stop at the corners, and a plate lifted on hover must not escape */
  overflow: clip;
}
/* the board itself, faded out before it reaches the far corner so it never competes with the words on it */
.beliefs-tech::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border-strong) 72%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border-strong) 72%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask: radial-gradient(900px 460px at 16% 0, #000, transparent 82%);
  pointer-events: none;
}
.beliefs-tech-say {
  position: relative;
  max-width: var(--measure);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.beliefs-tech-say h2 {
  margin: 6px 0 8px;
}
.beliefs-tech-say p {
  margin: 0;
  color: var(--ink-2);
}
.beliefs-tech-list {
  position: relative;
  /* flex, not grid, and the reason is the empty mounting position. Seven plates in a four-column grid leave a
     hole the width of a plate at the end of the second row, and a board with a gap in it looks unfinished
     rather than deliberate. Wrapping flex lets the last row's plates grow into the space instead, so the row
     comes out flush at any count and any width — and a plate left alone on the last row fills that row rather
     than sitting beside a hole, which is why it is laid out wide below. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tech;
}
.beliefs-tech-list li {
  position: relative;
  counter-increment: tech;
  flex: 1 1 250px;
  container-type: inline-size;
  padding: 18px 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  /* a lit edge along the top of the plate, over a face that is barely warmer than the board behind it */
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 75%, transparent) 32%, transparent 82%) top / 100% 1.5px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
  overflow: clip;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the part number, stamped where a board stamps it. decimal-leading-zero keeps 01…09 two digits wide, and a
   counter means the portal can add an eighth part without anyone editing a number. */
.beliefs-tech-list li::after {
  content: counter(tech, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--muted) 62%, transparent);
}
.beliefs-tech-list li:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
/* a hexagon, cut twice: the outer one is the ring, ::before is the face 1.5px inside it. Every other mark on
   this site sits in a rounded square, so the shape alone says this row is about machinery. */
.beliefs-tech-mark {
  position: relative;
  display: grid;
  margin-bottom: 8px;
  place-items: center;
  width: 46px;
  height: 50px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 52%, transparent);
  transition: filter 0.3s ease;
}
.beliefs-tech-mark::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--accent-soft);
}
.beliefs-tech-list li:hover .beliefs-tech-mark {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 45%, transparent));
}
.beliefs-tech-mark svg {
  position: relative;
  width: 22px;
  height: 22px;
}
.beliefs-tech-face {
  /* the mark on its own line above the name, as the principles above do it, rather than spanning two rows
     beside a paragraph it has no relationship to the height of */
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
}
/* the trace: the hairline that runs in from the edge of the plate to the mark, so a part looks wired to the
   board rather than dropped on it. It hangs off the face rather than the plate so that it can move with the
   mark when a wide plate turns — a container query reaches the face, but never the plate that measures it.
   -18px is the plate's own padding, and the plate clips what runs past its border. */
.beliefs-tech-face::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 25px;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.beliefs-tech-list b {
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.beliefs-tech-face > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
/* One row that slides (ADR-1310, owner: "can you make it one row as carousel sliders"). The wrapping row
   above stays the fallback for four parts or fewer; past that the list becomes the shop fronts' own reel,
   with the same nav, the same driver and the browser's own scroll-snap. --n is how many plates are on
   screen, and it belongs to the stylesheet rather than to an inline style, because an inline custom
   property beats every media query below and a phone would go on showing four. */
.beliefs-tech-list.is-reel {
  --n: 4;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-left: 1px;
  padding-bottom: 4px;
}
.beliefs-tech-list.is-reel::-webkit-scrollbar {
  display: none;
}
.beliefs-tech-list.is-reel > li {
  /* a fixed share of the row rather than flex-grow: every plate the same width is what makes the reel
     step by exactly one plate, and it is the measurement the driver reads to know its stride */
  flex: 0 0 calc((100% - (var(--n) - 1) * 12px) / var(--n));
  max-width: none;
  scroll-snap-align: start;
}
/* The endless reel scrolls into a second copy of the row, and a CSS counter would carry straight on
   numbering it 08 to 14. A counter-reset on an element starts a fresh count for that element AND for the
   siblings after it, so resetting on the first copy makes the second row read 01 to 07 again — which is
   what a loop should show. */
.beliefs-tech-list > li.is-twin-first {
  counter-reset: tech 0;
}
.beliefs-tech-list.is-reel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 14px;
}
@media (max-width: 1180px) {
  .beliefs-tech-list.is-reel {
    --n: 3;
  }
}
@media (max-width: 860px) {
  .beliefs-tech-list.is-reel {
    --n: 2;
  }
}
@media (max-width: 580px) {
  .beliefs-tech-list.is-reel {
    --n: 1;
  }
}
/* A plate left alone on the last row fills that row, and at that width the mark stacked above two short lines
   leaves the right two-thirds of it empty. So a wide plate turns: the mark to the left, the name and the line
   beside it. The query asks the PLATE's own width, not the window's, because what matters is how wide this one
   came out — which depends on the part count as much as on the screen. */
@container (min-width: 520px) {
  .beliefs-tech-face {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-content: center;
  }
  .beliefs-tech-face::before {
    top: 50%;
  }
  .beliefs-tech-mark {
    grid-row: span 2;
    align-self: center;
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beliefs-tech-list li:hover {
    transform: none;
  }
}

.beliefs-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beliefs-principles li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.beliefs-principles li:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-lg);
}
.beliefs-principles li::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.beliefs-principles li {
  position: relative;
}
.beliefs-principles li:hover::after {
  opacity: 1;
}
.beliefs-principles li:hover .beliefs-icon {
  color: #fff;
  background: linear-gradient(140deg, var(--accent), #06303f);
}
.beliefs-icon {
  transition:
    color 0.3s ease,
    background 0.3s ease;
}
.beliefs-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
}
.beliefs-icon svg {
  width: 24px;
  height: 24px;
}
.beliefs-principles h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.beliefs-principles p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.93rem;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .beliefs-vision,
  .beliefs-mission {
    grid-template-columns: minmax(0, 1fr);
  }
  .beliefs-receipt {
    transform: rotate(0);
  }
}
@media (max-width: 560px) {
  .beliefs-principles {
    grid-template-columns: minmax(0, 1fr);
  }
  .beliefs-vision {
    border-radius: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beliefs-receipt,
  .beliefs-principles li {
    transition: none;
  }
}

/* The cards as one row of panels (ADR-708): the open panel wide on the brand ground with its words, the rest folded to a slim
   column with the icon and the title running up it; the row turns by itself, a line filling under the open panel. On a phone
   the row is a list that opens one at a time. */
.panels {
  display: flex;
  gap: 10px;
  height: clamp(300px, 26vw, 360px);
}
.panel {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  transition:
    flex-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.panel:hover:not(.is-open) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface-2);
}
.panel.is-open {
  flex-grow: 5.5;
  border-color: transparent;
  color: #eaf0ffd9;
  background:
    radial-gradient(circle, #eaf0ff1a 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--brand-2), var(--brand) 70%);
  box-shadow: var(--shadow-lg);
}
.panel-head {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 18px 0 20px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.panel-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.panel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    width 0.5s ease,
    height 0.5s ease,
    background-color 0.4s ease,
    color 0.4s ease;
}
.panel-icon svg {
  width: 22px;
  height: 22px;
}
.panel-title {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 100%;
}
.panel.is-open .panel-head {
  flex: none;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 26px 28px 8px;
  color: #fff;
  cursor: default;
}
.panel.is-open .panel-icon {
  width: 54px;
  height: 54px;
  color: #04202a;
  background: var(--accent-2);
}
.panel.is-open .panel-icon svg {
  width: 26px;
  height: 26px;
}
.panel.is-open .panel-title {
  overflow: visible;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  white-space: normal;
  writing-mode: horizontal-tb;
  transform: none;
  text-wrap: balance;
}
.panel-body {
  display: none;
}
.panel.is-open .panel-body {
  display: block;
  flex: 1;
  padding: 8px 28px 28px 98px;
  animation: panel-in 0.5s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.panel-inner p {
  max-width: 34rem;
  margin: 0;
  color: #eaf0ffd9;
  font-size: 1.02rem;
  line-height: 1.7;
}
.panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  color: var(--accent-2);
  font-weight: 600;
}
.panel-mark {
  position: absolute;
  right: -28px;
  bottom: -40px;
  width: 210px;
  height: 210px;
  color: var(--accent-2);
  opacity: 0;
  transform: rotate(-12deg) scale(0.8);
  transition:
    opacity 0.5s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.panel-mark svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}
.panel.is-open .panel-mark {
  opacity: 0.14;
  transform: rotate(-8deg) scale(1);
}
.panel:not(.is-open) .panel-mark {
  visibility: hidden;
}
@media (max-width: 900px) {
  .panel-mark {
    display: none;
  }
}
.panel-fill {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 16px;
  height: 3px;
  border-radius: 3px;
  background: #eaf0ff26;
  opacity: 0;
}
.panel-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
}
.panels.is-playing .panel.is-open .panel-fill {
  opacity: 1;
}
.panels.is-playing .panel.is-open .panel-fill::after {
  animation: panel-fill var(--panel-ms, 5000ms) linear both;
}
@keyframes panel-fill {
  to {
    transform: scaleX(1);
  }
}
/* Which card of how many (ADR-763, owner: "I want to show number slider inside the card buttom right for example 1/8"):
   the line that fills says how long this one has left, and this says where in the row you are. Every panel carries its own
   number, rendered in the page, so it is right before the script runs and stays right when the row is turned by hand. It
   sits at the left end of that line, where the filling starts (owner, 16 Sep: "the number in this card move to left"). */
.panel-no {
  position: absolute;
  left: 28px;
  bottom: 27px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 11px;
  border: 1px solid #eaf0ff24;
  border-radius: 999px;
  color: #eaf0ff8c;
  background: #04202a33;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.45s ease 0.15s,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
  pointer-events: none;
}
.panel.is-open .panel-no {
  opacity: 1;
  transform: none;
}
.panel-no b {
  color: var(--accent-2);
  font-size: 0.95rem;
  font-weight: 700;
}
.panel-no i {
  font-style: normal;
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .panel-no {
    transition: none;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .panel.is-open .panel-body {
    padding-left: 28px;
  }
}
@media (max-width: 900px) {
  .panels {
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
  .panel,
  .panel.is-open {
    flex: none;
  }
  .panel-head,
  .panel.is-open .panel-head {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
  }
  .panel-title,
  .panel.is-open .panel-title {
    font-size: 1rem;
    white-space: normal;
    writing-mode: horizontal-tb;
    transform: none;
  }
  .panel.is-open .panel-icon {
    width: 44px;
    height: 44px;
  }
  .panel.is-open .panel-body {
    padding: 0 18px 20px 74px;
  }
  .panel-fill,
  .panel-no {
    display: none;
  }
}
@media (max-width: 560px) {
  .panel.is-open .panel-body {
    padding-left: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel-icon {
    transition: none;
  }
  .panel.is-open .panel-body {
    animation: none;
  }
  .panels.is-playing .panel.is-open .panel-fill::after {
    animation: none;
  }
}

/* The cards told beside their screens (ADR-697): a column of cards and one window that holds still while the page scrolls,
   showing the screen of the card being read. The card being read is lifted and its icon lit; on a phone each card carries
   its own screen instead. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.story-list {
  display: grid;
  gap: 10px;
}
.story-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.story.is-live .story-item {
  cursor: pointer;
}
.story.is-live .story-item:not(.is-on) {
  opacity: 0.6;
}
.story.is-live .story-item:not(.is-on):hover {
  opacity: 0.9;
  background: var(--surface-2);
}
.story-item.is-on {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
  transform: translateX(6px);
}
.story-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}
.story-icon svg {
  width: 24px;
  height: 24px;
}
.story-icon b {
  font-size: 0.85rem;
}
.story-item.is-on .story-icon {
  color: #fff;
  background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000));
  box-shadow: 0 12px 24px -14px var(--brand);
}
.story-words h3 {
  margin: 3px 0 6px;
  font-size: 1.12rem;
  line-height: 1.3;
  text-wrap: balance;
}
.story-words p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.65;
}
.story-more {
  display: inline-flex;
  gap: 6px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}
.story-inline {
  display: none;
}
.story-stage {
  position: sticky;
  top: calc(var(--head-h) + 28px);
}
.story-frame {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.story-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.story-bar i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.story-bar i:nth-child(2) {
  background: #febc2e;
}
.story-bar i:nth-child(3) {
  background: #28c840;
}
.story-bar-title {
  min-width: 0;
  margin-left: 10px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.story-pics {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface-2) 70%);
}
.story-pic {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.story-pic.is-on {
  opacity: 1;
  transform: none;
}
.story-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-stage {
    display: none;
  }
  .story.is-live .story-item,
  .story.is-live .story-item:not(.is-on) {
    opacity: 1;
    cursor: auto;
  }
  .story-item,
  .story-item.is-on {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow);
    transform: none;
  }
  .story-item .story-icon {
    color: #fff;
    background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000));
  }
  .story-inline {
    display: block;
    grid-column: 1 / -1;
    margin: 18px 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
  }
  .story-inline img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 520px) {
  .story-item {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
  }
  .story-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .story-icon svg {
    width: 21px;
    height: 21px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .story-item.is-on .story-icon {
    color: #04202a;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    box-shadow: 0 12px 24px -14px var(--accent);
  }
}
:root[data-theme='dark'] .story-item.is-on .story-icon {
  color: #04202a;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 24px -14px var(--accent);
}
@media (max-width: 900px) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .story-item .story-icon {
      color: #04202a;
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
    }
  }
  :root[data-theme='dark'] .story-item .story-icon {
    color: #04202a;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-item,
  .story-icon,
  .story-pic {
    transition: none;
  }
}

/* ---- pre-register: a bell on the bar, a window behind it (ADR-765, redrawn ADR-771 and ADR-772) --
   Owner: "redesign this pre-register margin fit to the header and content section and some svg creative bell animation.
   and collapse not nice you can change to popup button with very creative Pre register". The bar is one line under the
   banner, standing in the page's own margins; the fold is gone and the form is a window that takes the focus and gives
   it back. The bell rings by itself every so often, and rings properly when you point at it. */
/* it rides under the header while the reader goes down the page, and slides away when they turn back (ADR-774, owner:
   "sticky this pre register when scroll down only"). --head-now is the header's real height, published by the script,
   so the bar sits against it whether the header is at its full 80px or tightened to 64px. On a phone as well, since
   ADR-848: it was held back because the card stacked to 213px there and a bar that tall stuck to the top would have
   been the page — with the eyebrow and the sentence gone it is 70px, the height of its own button (ADR-855). */
.prereg-bar {
  position: relative;
  padding-block: 0;
}
@media (min-width: 0) {
  .prereg-bar {
    position: sticky;
    top: calc(var(--head-now, 80px) - 6px);
    z-index: 55;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.25s ease;
  }
  .prereg-bar.is-up {
    opacity: 0;
    transform: translateY(calc(-100% - var(--head-now, 80px)));
    pointer-events: none;
  }
  /* Only the card floats, not a band across the window (owner: "I need only selected boxed sticky not whole block like
     this"). The section is what sticks — a card cannot stick inside a container no taller than itself — but it paints
     nothing and catches nothing, so the page goes by in the strip either side of the card, and the card lifts off it. */
  .prereg-bar {
    pointer-events: none;
  }
  .prereg-bar .wrap {
    position: relative;
  }
  .prereg-line {
    pointer-events: auto;
    transition:
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }
  .prereg-bar.is-stuck .prereg-line {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow:
      0 22px 44px -26px rgba(0, 40, 58, 0.45),
      0 2px 8px -4px rgba(0, 40, 58, 0.18);
  }
}
.prereg-bar .wrap {
  padding-block: 14px;
}
.prereg-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--surface-2), var(--surface) 55%, var(--accent-soft));
  box-shadow: var(--shadow-sm);
}
.prereg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prereg-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: prereg-live 2.6s ease-in-out infinite;
}
@keyframes prereg-live {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}
/* the words are two rows of a grid, so the sentence can fold to nothing while the card is stuck (owner: "when stick auto
   hide this text so our box will hight shorter") and unfold again when it settles back into the page */
.prereg-say {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.5;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prereg-say b {
  display: block;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 700;
}
.prereg-say > span {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.prereg-bar.is-stuck .prereg-say {
  grid-template-rows: auto 0fr;
}
.prereg-bar.is-stuck .prereg-say > span {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .prereg-say,
  .prereg-say > span {
    transition: none;
  }
}

/* the button: the bell leads, and the ground shifts under it as the pointer crosses */
.prereg-ring {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--brand-2, #0a5a73), var(--brand, #003349));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(0, 40, 58, 0.9);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
}
.prereg-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, #ffffff3d 50%, transparent 65%) -120% 0 / 260% 100% no-repeat;
}
.prereg-ring:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -16px rgba(0, 40, 58, 0.95);
}
.prereg-ring:hover::after {
  animation: prereg-sheen 0.9s ease;
}
@keyframes prereg-sheen {
  to {
    background-position: 220% 0;
  }
}
.prereg-ring:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* the bell itself: the body swings, the clapper lags behind it, and the sound leaves one ring at a time */
.prereg-bell {
  flex: none;
  color: var(--accent-2);
}
.prereg-bell .bell-body {
  transform-origin: 16px 6px;
}
.prereg-bell .bell-clapper {
  transform-origin: 16px 21px;
}
.prereg-bell .bell-ring {
  opacity: 0;
}
/* left alone it rings once every eight seconds, so the bar is alive without being restless */
.prereg-ring .bell-body {
  animation: bell-swing 8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.prereg-ring .bell-clapper {
  animation: bell-tap 8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.prereg-ring .bell-ring.is-near {
  animation: bell-out 8s ease-out infinite;
}
.prereg-ring .bell-ring.is-far {
  animation: bell-out 8s ease-out infinite 0.12s;
}
/* pointed at, it rings three times as often */
.prereg-ring:hover .bell-body,
.prereg-ring:focus-visible .bell-body {
  animation-duration: 2.4s;
}
.prereg-ring:hover .bell-clapper,
.prereg-ring:focus-visible .bell-clapper {
  animation-duration: 2.4s;
}
.prereg-ring:hover .bell-ring,
.prereg-ring:focus-visible .bell-ring {
  animation-duration: 2.4s;
}
@keyframes bell-swing {
  0%,
  74%,
  100% {
    transform: rotate(0deg);
  }
  77% {
    transform: rotate(13deg);
  }
  81% {
    transform: rotate(-11deg);
  }
  85% {
    transform: rotate(8deg);
  }
  89% {
    transform: rotate(-5deg);
  }
  93% {
    transform: rotate(2deg);
  }
}
@keyframes bell-tap {
  0%,
  74%,
  100% {
    transform: rotate(0deg);
  }
  78% {
    transform: rotate(-16deg);
  }
  83% {
    transform: rotate(14deg);
  }
  88% {
    transform: rotate(-8deg);
  }
  93% {
    transform: rotate(3deg);
  }
}
@keyframes bell-out {
  0%,
  74%,
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
  80% {
    opacity: 0.9;
    transform: scale(1);
  }
  92% {
    opacity: 0;
    transform: scale(1.25);
  }
}
.prereg-bell .bell-ring {
  transform-origin: 16px 14px;
}

/* the window is a slip off the printer (ADR-773, owner: "redesign all inside this popup box make int more professional
   and very crazy creative idea"). BrownPOS prints receipts, so the one thing it asks for before it opens is printed like
   everything it will ever print: the name struck at the top, dashed rules, the fields as lines, and a torn foot. The slip
   keeps its own warm paper colour in both themes, because paper is paper. */
.prereg-pop {
  width: min(460px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  color: #1d2b31;
  background: transparent;
  overflow: visible;
}
.prereg-pop::backdrop {
  background: #04202ad9;
  backdrop-filter: blur(4px);
}
.prereg-pop[open] {
  animation: prereg-feed 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* it feeds out of the top, the way a slip leaves a printer */
@keyframes prereg-feed {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 -30px 0);
    transform: none;
  }
}
.prereg-pop-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 14px 14px 0 0;
  background: #04202a;
}
/* the red light every pop-up on this site closes with — never a square cross. 13px is what a Mac light is,
   and a 13px button is not something a thumb can hit (the same fix already made for the cookie card's own
   light): the pressable box grows to 35px on padding, the negative margin puts it back where it stood, and
   background-clip keeps the dot itself exactly as small as it always was. */
.prereg-pop-shut,
.lp-say-shut,
.nick-shut {
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  padding: 11px;
  margin: -11px;
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  background-color: #ff5f57;
  cursor: pointer;
}
.prereg-pop-shut:focus-visible,
.lp-say-shut:focus-visible,
.nick-shut:focus-visible {
  outline: 2px solid #9fdeeb;
  outline-offset: -8px;
}
/* the light says its word when pointed at (owner: "ad mouse hover with text Close too with creative"): the word rises out
   from under it the way the ways' names do, drawn from the same data-say a screen reader is given, and the light itself
   grows a little and shows the cross a Mac light shows under the pointer */
.prereg-pop-shut,
.lp-say-shut,
.nick-shut {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.prereg-pop-shut:hover,
.prereg-pop-shut:focus-visible,
.lp-say-shut:hover,
.lp-say-shut:focus-visible,
.nick-shut:hover,
.nick-shut:focus-visible {
  transform: scale(1.25);
}
.prereg-pop-shut::before,
.lp-say-shut::before,
.nick-shut::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#3d0906, #3d0906) center / 8px 1.8px no-repeat,
    linear-gradient(#3d0906, #3d0906) center / 1.8px 8px no-repeat;
  opacity: 0;
  transform: rotate(45deg);
  transition: opacity 0.15s ease;
}
.prereg-pop-shut:hover::before,
.prereg-pop-shut:focus-visible::before,
.lp-say-shut:hover::before,
.lp-say-shut:focus-visible::before,
.nick-shut:hover::before,
.nick-shut:focus-visible::before {
  opacity: 1;
}
.prereg-pop-shut::after,
.lp-say-shut::after,
.nick-shut::after {
  content: attr(data-say);
  position: absolute;
  left: 50%;
  /* 100% is now the padded 35px box, not the 13px dot the bubble hangs from; 11px padding + 13px dot + the
     original 9px gap */
  top: calc(11px + 13px + 9px);
  padding: 4px 9px;
  border-radius: 7px;
  color: #fffdf7;
  background: #04202a;
  border: 1px solid #ffffff2b;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px) scale(0.9);
  transform-origin: 50% -20%;
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}
.prereg-pop-shut:hover::after,
.prereg-pop-shut:focus-visible::after,
.lp-say-shut:hover::after,
.lp-say-shut:focus-visible::after,
.nick-shut:hover::after,
.nick-shut:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .prereg-pop-shut,
  .prereg-pop-shut::after {
    transition: none;
  }
  .prereg-pop-shut:hover {
    transform: none;
  }
}
/* This light's name rises ABOVE the card (owner: "your Close should out of box"). Below the light is the heading and
   inside the bar is the brand name, so the only free air is outside. A pseudo-element cannot go there — it would be
   cut off by the card's own clipping — so here alone the name is a real element, `.nick-say`, a sibling of the card
   rather than a descendant of it. The shared ::after is switched off for this one light so there is only ever one.
   Placed after the shared rule on purpose: same specificity, later wins. (ADR-1275) */
.nick-shut::after {
  content: none;
}
.nick-say {
  position: absolute;
  /* the light's own centre: 13px of bar padding plus half of a 13px light */
  left: 19.5px;
  bottom: calc(100% + 10px);
  padding: 4px 9px;
  border-radius: 7px;
  color: #fffdf7;
  background: #04202a;
  border: 1px solid #ffffff2b;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.9);
  transform-origin: 50% 120%;
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}
.nick:has(.nick-shut:hover) .nick-say,
.nick:has(.nick-shut:focus-visible) .nick-say {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.prereg-pop-bar span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #cfe7ef;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the paper is the slip's own, so the tear at its foot has somewhere to show rather than being clipped by the scroll */
.prereg-pop-scroll {
  overflow-y: auto;
  max-height: calc(100dvh - 90px);
  padding-bottom: 9px;
  background: transparent;
}
.prereg-slip {
  position: relative;
  padding: 24px 24px 30px;
  background: #fffdf7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* the torn foot, the same tear the showcase slip has */
.prereg-slip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 9px;
  background:
    linear-gradient(135deg, #fffdf7 50%, transparent 50%) 0 0 / 13px 9px repeat-x,
    linear-gradient(225deg, #fffdf7 50%, transparent 50%) 0 0 / 13px 9px repeat-x;
}
.prereg-slip-top {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed #b9c4c9;
  text-align: center;
}
.prereg-slip-top .prereg-bell.is-big {
  color: #005d7b;
  margin-bottom: 4px;
}
.prereg-slip-top b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #0b1220;
}
.prereg-slip-top span {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #5b6b72;
}
/* the lines of the slip: label, a run of dots, then the value — as a receipt sets them */
.prereg-slip-rows {
  display: grid;
  gap: 7px;
  margin: 14px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed #b9c4c9;
}
.prereg-slip-rows > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.prereg-slip-rows dt {
  color: #5b6b72;
  letter-spacing: 0.04em;
}
.prereg-slip-rows dt::after {
  content: '';
}
.prereg-slip-rows > div::after {
  content: '';
  flex: 1;
  order: 1;
  height: 1px;
  margin-bottom: 3px;
  background: repeating-linear-gradient(90deg, #b9c4c9 0 2px, transparent 2px 5px);
}
.prereg-slip-rows dd {
  order: 2;
  margin: 0;
  color: #1d2b31;
  font-weight: 600;
}
.prereg-slip h2 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  color: #0b1220;
  text-wrap: balance;
}
.prereg-pop-lead {
  margin: 8px 0 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  color: #3d5963;
}
.prereg-form {
  max-width: none;
  margin: 18px 0 0;
  gap: 13px;
  font-family: var(--font);
}
.prereg-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
/* the slip is written a line at a time (ADR-778): each answer opens the next, and the button only appears when there is
   something to send. The fold is a 0fr→1fr grid row, so the browser finds the height and nothing jumps. Only once the
   script has marked the form: without it every line is there from the start and the form still works. */
.prereg-step {
  display: grid;
  grid-template-rows: 1fr;
}
.prereg-form[data-stepped] .prereg-step {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prereg-form[data-stepped] .prereg-step.is-on {
  grid-template-rows: 1fr;
}
.prereg-step-in {
  overflow: hidden;
  min-height: 0;
}
.prereg-form[data-stepped] .prereg-step-in {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prereg-form[data-stepped] .prereg-step.is-on .prereg-step-in {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
/* a step that has opened keeps its own gap; a shut one must not leave the form's row-gap behind it */
.prereg-form[data-stepped] .prereg-step:not(.is-on) {
  margin-top: -13px;
}
@media (prefers-reduced-motion: reduce) {
  .prereg-form[data-stepped] .prereg-step,
  .prereg-form[data-stepped] .prereg-step-in {
    transition: none;
  }
}
/* the fields are lines on paper, not cards on a page: no boxes, just the rule each one is written on */
.prereg-slip .lead-field span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6b72;
}
.prereg-slip .lead-field {
  position: relative;
}
/* the mark sits on the line the answer is written on, and the example shows the shape of that answer */
.prereg-fi {
  position: absolute;
  left: 0;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #7d929b;
  pointer-events: none;
  transition: color 0.2s ease;
}
.prereg-fi svg {
  width: 17px;
  height: 17px;
}
.prereg-slip .lead-field:focus-within .prereg-fi {
  color: #005d7b;
}
.prereg-slip .lead-field input {
  padding: 9px 2px 9px 27px;
  border: 0;
  border-bottom: 1.5px solid #b9c4c9;
  border-radius: 0;
  color: #0b1220;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  transition: border-color 0.2s ease;
}
.prereg-slip .lead-field input::placeholder {
  color: #a8b8bf;
}
.prereg-slip .lead-field input:focus-visible {
  outline: 0;
  border-bottom-color: #005d7b;
  box-shadow: 0 1px 0 #005d7b;
}
.prereg-slip .lead-field.is-missing input {
  border-bottom-color: #c0392b;
}
.prereg-form .btn {
  width: 100%;
  justify-content: center;
}
.prereg-form .lead-note {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #5b6b72;
}
/* what a returning visitor sees instead of the form (ADR-780): the same green slip note as a fresh thank-you, naming what
   they registered with, so they know the list has them and need not wonder whether to send it again. */
.prereg-known {
  margin: 18px 0 0;
  padding: 16px;
  border: 1.5px dashed #6aa88f;
  background: #f1f8f3;
  color: #1d4f3c;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}
.prereg-known b {
  font-weight: 700;
}
.prereg-thanks {
  margin: 18px 0 0;
  max-width: none;
  padding: 16px;
  border: 1.5px dashed #6aa88f;
  border-radius: 0;
  background: #f1f8f3;
  color: #1d4f3c;
  font-family: var(--font);
}
.prereg-ways {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px dashed #b9c4c9;
}
.prereg-ways-title {
  display: block;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6b72;
}
/* icon only (owner: "change to svg icon only so it can save my website space"): five names took three lines of the slip.
   44px keeps every one a real tap target, and each carries its name for a screen reader and a hover. */
.prereg-way-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prereg-way {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid #d9dfe1;
  border-radius: 50%;
  color: #005d7b;
  background: #fff;
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}
.prereg-way svg {
  width: 19px;
  height: 19px;
}
.prereg-way:hover {
  color: #fff;
  border-color: #005d7b;
  background: #005d7b;
  transform: translateY(-2px);
}
.prereg-way:focus-visible {
  outline: 2px solid #005d7b;
  outline-offset: 2px;
}
/* the name rises out from under the circle and settles (owner: "add mouse hover text with creative animation design"):
   it is drawn from the same word the screen reader is given, so the two can never say different things */
.prereg-way::after {
  content: attr(data-say);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  padding: 5px 10px;
  border-radius: 8px;
  color: #fffdf7;
  background: #04202a;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.9);
  transform-origin: 50% 120%;
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}
.prereg-way::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  background: #04202a;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}
.prereg-way {
  position: relative;
}
.prereg-way:hover::after,
.prereg-way:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.prereg-way:hover::before,
.prereg-way:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* the first and last would run off the slip, so they hang from their own edge instead of the middle */
.prereg-way-row > :first-child::after {
  left: 0;
  transform: translate(0, 6px) scale(0.9);
  transform-origin: 20% 120%;
}
.prereg-way-row > :first-child:hover::after,
.prereg-way-row > :first-child:focus-visible::after {
  transform: translate(0, 0) scale(1);
}
.prereg-way-row > :last-child::after {
  left: auto;
  right: 0;
  transform: translate(0, 6px) scale(0.9);
  transform-origin: 80% 120%;
}
.prereg-way-row > :last-child:hover::after,
.prereg-way-row > :last-child:focus-visible::after {
  transform: translate(0, 0) scale(1);
}
/* the barcode every slip ends with */
.prereg-slip-code {
  display: block;
  height: 28px;
  margin-top: 20px;
  opacity: 0.72;
  background: repeating-linear-gradient(
    90deg,
    #1d2b31 0 2px,
    transparent 2px 4px,
    #1d2b31 4px 5px,
    transparent 5px 8px,
    #1d2b31 8px 11px,
    transparent 11px 12px,
    #1d2b31 12px 13px,
    transparent 13px 16px
  );
}

@media (max-width: 700px) {
  .prereg-line {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* in a column the words must not grow, or flex-grow: 1 stretches them into a pane of white (owner's phone walk) */
  .prereg-say {
    flex: none;
  }
  .prereg-eyebrow {
    align-self: center;
  }
  .prereg-ring {
    justify-content: center;
    width: 100%;
  }
  .prereg-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 460px) {
  .prereg-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prereg-eyebrow::before,
  .prereg-ring .bell-body,
  .prereg-ring .bell-clapper,
  .prereg-ring .bell-ring,
  .prereg-ring:hover::after,
  .prereg-pop[open] {
    animation: none;
  }
  .prereg-way::after,
  .prereg-way::before {
    transition: opacity 0.1s linear;
    transform: translate(-50%, 0) scale(1);
  }
  .prereg-pop[open] .is-big .bell-body,
  .prereg-pop[open] .is-big .bell-clapper,
  .prereg-pop[open] .is-big .bell-ring {
    animation: none;
  }
  .prereg-ring:hover,
  .prereg-way:hover {
    transform: none;
  }
}

/* ---- the founder's medal (ADR-767) ---------------------------------------------------------------
   Owner: "add something experience with hospitality filed 16 years badge with creative". The three facts under the story
   are a list you read; this is a medal you see. The laurels are drawn, not a picture, so they take the ink colour in both
   themes and stay sharp at any size, and the number is HTML in the middle of them so it stays editable and selectable. */
.founder-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 20px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent-soft), var(--surface) 78%);
  width: fit-content;
  max-width: 100%;
}
.founder-badge-medal {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
}
.founder-badge-disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.founder-badge-disc path {
  fill: var(--accent);
}
/* the inner ring is the struck line inside a medal's rim, so the number sits in a field of its own */
.founder-badge-disc circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  opacity: 0.5;
}
.founder-badge-medal b {
  position: relative;
  color: #fff;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.founder-badge-words {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.founder-badge-words b {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.founder-badge-words small {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 560px) {
  .founder-badge {
    border-radius: var(--radius-lg);
    padding: 14px 16px;
  }
}

/* ---- the help banner holds the search (ADR-768) ---------------------------------------------------
   Owner: "move this text and search box to inside the the banner right side". The banner said what the help centre is and
   then the page said it again under it, with the box a third of the way down — so a visitor who came to look something up
   scrolled past the answer to the question they were asking. The words stay on the left, the box stands on the right where
   the eye lands, and on a phone they stack in the order you would read them. */
.hero.is-find .hero-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.hero-find-words {
  min-width: 0;
}
/* The banner that carries the help search lets its panel out (ADR-784, owner: "this dropdown menu behind the content
   section why for help centre search box"). Two things were holding it in: the section clips itself, because its glow and
   its rings hang outside it, and a section with no z-index is painted in document order, so the next section covered what
   did escape. The decorations move into a clipped layer of their own and the banner takes a z-index above the page. */
.hero.is-find {
  overflow: visible;
  z-index: 5;
}
.hero-skin {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.hero.is-find::before,
.hero.is-find::after {
  display: none;
}
.hero-skin::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 150%;
  background: radial-gradient(38% 42% at 22% 76%, #7fd0e24d, transparent 66%), radial-gradient(34% 38% at 80% 16%, #00c48c24, transparent 68%);
  animation: aurora 26s ease-in-out infinite alternate;
}
.hero-skin::after {
  content: '';
  position: absolute;
  width: 456px;
  height: 456px;
  right: -162px;
  bottom: -192px;
  border-radius: 50%;
  border: 1px solid #7fd0e247;
  box-shadow:
    inset 0 0 0 35px #7fd0e20f,
    0 0 0 52px #7fd0e20d,
    0 0 0 103px #7fd0e208;
}
@media (prefers-reduced-motion: reduce) {
  .hero-skin::before {
    animation: none;
  }
}
/* and the panel itself rides above the words beside it */
.hero-find-box .help-find {
  position: relative;
  z-index: 6;
}
.hero-find-box {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid #eaf0ff2e;
  border-radius: var(--radius-lg);
  background: #04202a4d;
  backdrop-filter: blur(6px);
}
.hero-find-box .eyebrow {
  margin-bottom: 8px;
}
.hero-find-box h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: #fff;
}
.hero-find-box p {
  margin: 8px 0 16px;
  color: #eaf0ffc4;
  font-size: var(--step--1);
  line-height: 1.65;
}
.hero-find-box .help-find {
  margin: 0;
}
/* the box sits on the banner's dark ground, so its field is a lit well rather than the page's white card */
.hero-find-box .help-find .help-search input {
  height: 54px;
  padding: 0 118px 0 54px;
  color: #fff;
  background: #ffffff1a;
  border-color: #eaf0ff3d;
  box-shadow: none;
}
.hero-find-box .help-find .help-search input::placeholder {
  color: #eaf0ff8a;
}
.hero-find-box .help-find .help-search input:focus-visible {
  background: #ffffff26;
  border-color: var(--accent-2);
}
.hero-find-box .help-find .help-search-mark {
  width: 54px;
  height: 54px;
  color: var(--accent-2);
}
.hero-find-box .help-find .help-key {
  color: #eaf0ff9e;
  background: #04202a73;
  border-color: #eaf0ff2e;
}
.hero-find-box .help-find .help-clear {
  color: #04202a;
  background: var(--accent-2);
  border-color: transparent;
}
.hero-find-box .help-none {
  color: #eaf0ffc4;
}
/* what it finds is a panel of its own and keeps the page's own surface, so the answers are easy to read */
.help-centre.is-under-banner {
  padding-top: clamp(30px, 4vw, 52px);
}
@media (max-width: 1000px) {
  .hero.is-find .hero-find {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- a deck of reviews (ADR-770) ------------------------------------------------------------------
   Owner: "this section should add 5 reviews carousel sliders with very creative with crazy design". One review still
   stands on its own; two or more stack into a deck — the one in hand square on, the next two set back and tilted behind
   it, so you can see there are more without reading them. Turning takes the top card away and brings the next forward.
   The deck is only drawn when there is more than one review, so the section never shows an empty carousel of itself. */
.quote-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 40px);
  perspective: 1400px;
}
.quote-cards {
  position: relative;
  display: grid;
}
.quote-deck .quote {
  grid-area: 1 / 1;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 30px 60px -44px rgba(0, 30, 45, 0.7);
  transform-origin: 50% 100%;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
}
/* where each card sits: the one in hand in front, the rest stepped back behind it and dimmed */
.quote-deck .quote {
  --step: 3;
  opacity: 0;
  transform: translateY(26px) scale(0.9) rotateX(9deg);
  filter: saturate(0.6);
  pointer-events: none;
  z-index: 0;
}
.quote-deck .quote.is-on {
  --step: 0;
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  z-index: 4;
}
.quote-deck .quote.is-next {
  opacity: 0.55;
  transform: translateY(14px) scale(0.955) rotateX(4deg);
  z-index: 3;
}
.quote-deck .quote.is-after {
  opacity: 0.28;
  transform: translateY(26px) scale(0.915) rotateX(7deg);
  z-index: 2;
}
/* a card on its way out lifts off the deck rather than sinking into it, so the turn reads as one card taken off the top */
.quote-deck .quote.is-gone {
  opacity: 0;
  transform: translateY(-30px) scale(1.03) rotateX(-6deg);
  z-index: 5;
}
.quote-deck .quote::before {
  top: clamp(14px, 1.6vw, 20px);
  left: clamp(18px, 2vw, 26px);
}
.quote-deck .quote figcaption {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}
.quote-deck .quote figcaption small {
  color: var(--muted);
  font-size: var(--step--1);
  font-style: normal;
}
.quote-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.quote-step {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-2);
  background: var(--surface);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}
.quote-step:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--surface-2);
  transform: scale(1.06);
}
.quote-step svg {
  width: 18px;
  height: 18px;
}
.quote-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* each dot is the ring that fills while its card waits, so the deck says how long is left as well as where you are.
   The button itself is 36px now, not the 26px the dot looks — a thumb's target, same-sized dot inside it, the
   inset values on `i` grown by the same 5px on every side so the mark itself never changed size (2026-09-27
   audit). */
.quote-dot {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.quote-dot i {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--border-strong);
  transition:
    inset 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.3s ease;
}
.quote-dot:hover i {
  inset: 12px;
  background: var(--accent);
}
.quote-dot.is-on i {
  inset: 11px;
  background: var(--accent);
}
.quote-dot.is-on::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .quote-deck .quote,
  .quote-step,
  .quote-dot i {
    transition: none;
  }
  .quote-deck .quote.is-next,
  .quote-deck .quote.is-after,
  .quote-deck .quote.is-gone {
    transform: none;
  }
}

/* ---- every question in one place (ADR-787) --------------------------------------------------------
   Owner: "Create new page name FAQs by get all fags we have combine in one page … design with premium and creative crazy
   idea. all page must follow our standard with margin, top header, font, button." So it is built from the parts the site
   already agreed on: the search box is the help centre's (ADR-786), the group heads are the dropdown's light blocks, and
   the questions are the same accordion language as the FAQ sections. Nothing new to learn, and nothing to keep in step. */
.faqbook-tools {
  max-width: 640px;
  margin: 0 0 26px;
}
.faqbook-search {
  width: 100%;
}
/* ADR-840: each group is a <section>, so it was taking the site's own 77px of section padding top and bottom — 188px
   of nothing between the last question of one group and the heading of the next, five times down the page. A group
   inside a list of groups is not a section of the page; the list sets the space between them. */
.faqbook-group {
  padding-block: 0;
}
/* The rail is the page's contents: each group wearing the icon its subject wears elsewhere on the site, its name, and
   how many questions it holds, threaded on a line down the left so it reads as a list of places rather than five links
   in a box (ADR-840; owner: "not creative design"). It follows the reader down the page. */
.faqbook-layout {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.faqbook-layout > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .faqbook-layout {
    grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  }
}
.faqbook-rail {
  position: sticky;
  top: calc(var(--head-h) + 18px);
}
.faqbook-rail-head {
  margin: 0 0 10px;
  padding-inline-start: 6px;
}
.faqbook-rail ol {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
/* the thread the marks sit on */
.faqbook-rail ol::before {
  content: '';
  position: absolute;
  inset-block: 22px;
  inset-inline-start: 24px;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--border) 0 5px, transparent 5px 10px);
}
.faqbook-rail a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 8px;
  border-radius: 14px;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}
.faqbook-rail-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent-ink);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}
.faqbook-rail-mark svg {
  width: 18px;
  height: 18px;
}
.faqbook-rail b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.faqbook-rail a:hover {
  color: var(--accent-ink);
  background: var(--surface-2);
}
.faqbook-rail a:hover .faqbook-rail-mark {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.faqbook-rail a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the group you jumped to says so, on both sides */
.faqbook-group:target .faqbook-head span {
  color: var(--accent-ink);
}
@media (max-width: 999px) {
  .faqbook-rail {
    position: static;
  }
  .faqbook-rail ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .faqbook-rail ol::before {
    display: none;
  }
  .faqbook-rail a {
    padding: 7px 14px 7px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
  }
}
.faqbook-groups {
  display: grid;
  gap: clamp(26px, 3vw, 38px);
}
.faqbook-group {
  scroll-margin-top: calc(var(--head-h) + 20px);
}
.faqbook-group[hidden] {
  display: none;
}
.faqbook-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: var(--step-1);
}
.faqbook-head b {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.faqbook-list {
  display: grid;
  gap: 8px;
}
.faqbook-q {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.faqbook-q[hidden] {
  display: none;
}
.faqbook-q:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.faqbook-q[open] {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -34px rgba(0, 40, 58, 0.7);
}
.faqbook-q > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faqbook-q > summary::-webkit-details-marker {
  display: none;
}
.faqbook-q > summary span {
  flex: 1;
  min-width: 0;
}
.faqbook-q > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: var(--radius-lg);
}
/* the mark turns from a plus to a minus as the answer opens — one drawing doing two jobs */
.faqbook-q > summary i {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s ease;
}
.faqbook-q > summary i svg {
  width: 17px;
  height: 17px;
}
.faqbook-q[open] > summary i {
  transform: rotate(135deg);
  color: #fff;
  background: var(--accent);
}
.faqbook-q p {
  margin: 0;
  padding: 0 18px 18px 62px;
  color: var(--ink-2);
  line-height: 1.75;
}
.faqbook-q mark,
.faqbook-q .hit {
  padding: 0 2px;
  border-radius: 3px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
@media (max-width: 560px) {
  .faqbook-q p {
    padding-left: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faqbook-q > summary i {
    transition: none;
  }
}

/* ---- the site map (ADR-787) -----------------------------------------------------------------------
   Owner: "another page name Sitemap to list all website map with group with categories and section". Nothing on it is a
   list anybody keeps by hand: the sections are the site's own menus, help topics and posts, so a page added to a menu in
   the portal turns up here on its own. Laid out in columns that flow by height, so no section leaves a pane of white
   under it — the same fix the report chooser needed in ADR-761. */
/* ---- site map (ADR-832) ------------------------------------------------------
   Sixteen identical boxes in three packed columns told a reader nothing: a feature page, a help answer and a news story
   all looked alike, and the pages the menu and the footer share were listed three times over. Each kind gets a band of
   its own now, with its own heading and tally — the pages as tiles carrying the icon their destination wears elsewhere
   on the site, the features and the answers as grouped lists, and the small print last. */
.sitemap-count {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--step--1);
}
.sitemap-count b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sitemap-bands {
  display: grid;
  gap: clamp(34px, 4.6vw, 62px);
}

.sitemap-band-head {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.sitemap-band-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* the band's mark: the one piece of colour that says which kind of thing is below it */
.sitemap-band-head .eyebrow::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--tone, var(--accent));
}
.sitemap-band-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--step-1);
}
.sitemap-band-head h2 b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent);
  font-variant-numeric: tabular-nums;
}
.sitemap-band-head p {
  margin: 2px 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--step--1);
}
.sitemap-band.is-features {
  --tone: #2f9e7a;
}
.sitemap-band.is-help {
  --tone: #c1802a;
}
.sitemap-band.is-news {
  --tone: #7b5ec4;
}
.sitemap-band.is-legal {
  --tone: #6b7c86;
}

/* the pages, one tile each, wearing the icon their destination carries in the menu sheet */
.sitemap-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}
.sitemap-tiles.is-wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* a headline runs to two or three lines, so its mark sits with the first one rather than halfway down the tile */
.sitemap-tiles.is-wide .sitemap-tile {
  align-items: start;
}
.sitemap-tile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.sitemap-tile small {
  grid-column: 2;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.sitemap-tile-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent);
}
.sitemap-tile-name {
  font-weight: 600;
  line-height: 1.3;
}
.sitemap-tile:hover {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -18px rgba(0, 30, 45, 0.5);
}
.sitemap-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* the grouped lists keep packing by height, because a topic with two answers should not leave a pane of white under it */
.sitemap-grid {
  columns: 3;
  column-gap: 22px;
}
.sitemap-card {
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.sitemap-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: var(--step-0);
}
.sitemap-card h3 b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.sitemap-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.sitemap-card li + li {
  border-top: 1px dashed var(--border);
}
.sitemap-card a {
  display: grid;
  gap: 1px;
  padding: 8px 2px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 8px;
  transition:
    color 0.15s ease,
    padding 0.15s ease;
}
.sitemap-card a span {
  font-weight: 600;
  color: var(--ink);
}
.sitemap-card a small {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.sitemap-card a:hover {
  color: var(--accent-ink);
  padding-left: 8px;
}
.sitemap-card a:hover span {
  color: var(--accent-ink);
}
.sitemap-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .sitemap-grid {
    columns: 2;
  }
}
@media (max-width: 700px) {
  .sitemap-grid {
    columns: 1;
  }
  .sitemap-tiles,
  .sitemap-tiles.is-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sitemap-card a:hover {
    padding-left: 2px;
  }
  .sitemap-tile:hover {
    transform: none;
  }
}

/* ---- the screens are not on offer (ADR-845, redrawn by ADR-851) ---------------------------------------------------
   The little window that opens when someone tries to take a picture or a paragraph: a dark bar with the red light that
   closes every pop-up on this site and in the till, the site's own words under it, and a torn receipt foot. It goes on
   the light, on Escape, on a click anywhere else, or by itself after six seconds. Typing is left alone, because a form
   you cannot select in is a form nobody fills in. */
body {
  -webkit-user-select: none;
  user-select: none;
}
:is(input, textarea, select, [contenteditable='true']) {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.nick {
  position: fixed;
  z-index: 120;
  /* 328px, not the old 292px (owner: "increase this box width ... title drop into second lines not nice"). The
     heading measures 173px on one line and the stamp's gutter takes 99px of the 32px-padded body, so 292px left it
     12px short and it broke after "These screens are". The max-width is the phone guard: the card is placed at the
     pointer and must never be wider than the window it sits in. */
  width: 328px;
  max-width: calc(100vw - 24px);
  color: #14202b;
  font: 500 13px/1.5 var(--font, system-ui);
  letter-spacing: 0.01em;
  text-align: start;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: 50% 0;
  transition:
    opacity 0.18s ease,
    transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}
.nick[data-on] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* The skin and the clipping moved off `.nick` onto this inner box (ADR-1275). `.nick` has to stay unclipped so the
   close light's name can rise above the top edge, and the moment it stopped clipping, the torn bottom edge's teeth
   broke the 14px corner — compared at 8x against the original, which is a clean curve. Clipping here restores it. */
.nick-card {
  overflow: hidden;
  border-radius: 14px;
  background: #fffdf7;
  box-shadow:
    0 24px 50px -24px rgba(0, 24, 38, 0.62),
    0 2px 10px rgba(0, 24, 38, 0.14);
}
.nick-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: #04202a;
}
.nick-bar span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #eaf0ffb8;
}
/* The slip reads as a receipt because that is what this shop prints: a stamp across the corner the way a voided
   one gets it, a perforation between what it says and what it asks, and the torn foot it always had (ADR-1183). */
.nick-body {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 14px 16px 16px;
}
/* `.nick-body .nick-stamp`, not `.nick-stamp`: this is a <span> inside `.nick-body`, and `.nick-body span`
   (0,1,1) out-weighs a lone class (0,1,0), so the grey body colour captured the stamp and only its border came
   out red. And the red is written out rather than taken from `--t404-red`, because that token turns coral in
   dark mode for a dark page — while this slip's paper is cream in both themes, where coral barely shows. */
.nick-body .nick-stamp {
  position: absolute;
  top: 9px;
  right: 10px;
  padding: 3px 8px;
  border: 1.5px solid #b3261e;
  border-radius: 6px;
  color: #b3261e;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0.62;
  transform: rotate(-9deg);
  pointer-events: none;
}
/* 99px, not the old 74px: BROWN POS measures 85.5px with its letter-spacing and its -9deg tilt, so the narrower
   gutter let the stamp print over the heading (ADR-1274). The heading takes two lines at this width, which is the
   trade the owner chose — the stamp reads at the shoulder, where a stamp belongs. */
.nick-body b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-right: 99px;
}
.nick-body span {
  color: #55636f;
}
.nick-rule {
  align-self: stretch;
  height: 1px;
  margin: 11px 0 2px;
  background: repeating-linear-gradient(90deg, #14202b38 0 3px, transparent 3px 7px);
}
.nick-go {
  margin-top: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fffdf7;
  background: #06485f;
  text-decoration: none;
}
.nick-go:hover {
  background: #063b4e;
}
/* the torn foot of a receipt */
.nick-tear {
  display: block;
  height: 7px;
  margin-top: -1px;
  background: repeating-linear-gradient(135deg, #fffdf7 0 7px, transparent 7px 14px), repeating-linear-gradient(45deg, #fffdf7 0 7px, transparent 7px 14px);
}
@media (prefers-reduced-motion: reduce) {
  .nick {
    transition: opacity 0.18s ease;
    transform: none;
  }
}

/* On a phone the pre-register bar is the button (ADR-848, owner: "hide this selected text for mobile phone only").
   The eyebrow, the heading and the sentence take four lines of a small screen to say what the button says in five
   words, and the bar sits between the till and the first thing a reader came for. They stay on every other size. */
@media (max-width: 700px) {
  .prereg-line .prereg-eyebrow,
  .prereg-line .prereg-say {
    display: none;
  }
  .prereg-line {
    justify-content: center;
  }
}

/* the line under the home page's buttons, which used to carry its look inline (ADR-848) */
.hero-note {
  margin-top: 22px;
  font-size: 0.92rem;
  color: #eaf0ff9c;
}
/* On a phone the till's banner is the till, the promise and the two buttons (owner: "hide this selected text for
   mobile phone only"). The paragraph under the heading and the line under the buttons are four and two lines of a
   small screen, and the first thing a reader came for is below them. Both stay on every other size. */
@media (max-width: 700px) {
  .hero-copy .lead,
  .hero-copy .hero-note {
    display: none;
  }
}

/* ---- the tour, one stop at a time on a small screen (ADR-849, redrawn by ADR-854) --------------------------------
   Ten stops stacked is a wall on a phone, and the picture they describe has scrolled away above it. Below 1000px the
   chosen stop alone shows its words, with the walk beneath it.

   The walk is one small capsule, not three things floating in a band (owner: "redesign this arrows to small size and
   top and bottom with small gap with creative for tablet and mobile devices"). Two 34px arrows and the dots sit inside
   a single pill that hugs its own contents and centres itself, eight pixels under the words; the dot you are on
   stretches into a bar, so the capsule reads as a distance travelled rather than a row of buttons. The list is
   untouched on a desktop, where it sits beside the picture and there is room for all of it. */
.tour-step {
  display: none;
}
@media (max-width: 1000px) {
  .tour-stops .tour-stop[aria-selected='false'] {
    display: none;
  }
  .tour-stops .tour-stop[aria-selected='true'] {
    cursor: default;
  }
  /* the row gap of the body is meant for the picture and the words, not for this (ADR-854) */
  .tour-body {
    row-gap: 12px;
  }
  .tour-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0 auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 10px 22px -18px rgba(0, 30, 45, 0.55);
  }
  .tour-step-go {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition:
      color 0.16s ease,
      background-color 0.16s ease;
  }
  .tour-step-go:hover {
    color: var(--accent-ink);
    background: var(--surface-2);
  }
  .tour-step-go:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .tour-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 3px;
  }
  .tour-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-strong);
    transition:
      width 0.26s cubic-bezier(0.2, 0.9, 0.3, 1),
      background-color 0.2s ease;
  }
  /* the one you are on is the distance you have come, not another button */
  .tour-dots i.is-on {
    width: 16px;
    background: var(--accent);
  }
}

/* A tablet gets the biggest till of all, which is the wrong way round (ADR-853, found by auditing every page at four
   sizes): the home banner stacks to one column there, so the till takes the full 738px and stands 706px tall, and the
   banner reaches 1239px — taller than the tablet's own screen, so the page opens on nothing but itself. It is held to
   a size that leaves the first section in view. A phone's column is narrow enough already; a laptop sets it beside
   the words. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hero.is-till .hero-aside {
    max-width: 470px;
    margin-inline: auto;
  }
}

/* ---- the tour's two sides, on a phone (ADR-856) ------------------------------------------------------------------
   Owner: "redesign for mobile phone devices only, easy, make it professional". Two cards 60px tall side by side on a
   343px screen left "In the back office" broken across two lines inside a block of cream, which reads as a mistake
   rather than a choice. On a phone they are one segmented control, as the till's own tabs are: two halves of a single
   pill, an icon and one line of words each, the chosen half filled. The eyebrow above the name — DESIGN, SERVE — is
   the one thing that goes: it is a label for a label, and the name says it. */
@media (max-width: 700px) {
  .tour-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
  }
  /* 44px is the smallest thing a thumb should have to hit, and the site's own tests hold it */
  .tour-side {
    min-height: 44px;
    gap: 8px;
    padding: 8px 10px 8px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
  }
  .tour-side:hover {
    transform: none;
  }
  .tour-side-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .tour-side-icon svg {
    width: 16px;
    height: 16px;
  }
  .tour-side-words small {
    display: none;
  }
  .tour-side-words b {
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* the chosen half is a pale one here, not the dark card it is on a desktop, so it takes the page's own ink back —
     leaving it at the desktop's #fff put white words on a white ground */
  .tour-side[aria-pressed='true'] {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 6px 16px -12px rgba(0, 30, 45, 0.6);
  }
  .tour-side[aria-pressed='true'] .tour-side-icon {
    color: #fff;
    background: var(--accent);
  }
}

/* the home banner's own margin on a phone (ADR-858, owner: "make small gap for this home top banner top and bottom"):
   56px above the eyebrow and 56px under the buttons is a desktop's breathing room on a 375px screen, where the band
   is already the height of the phone. Half of it, and the ticker underneath arrives that much sooner. */
@media (max-width: 700px) {
  .hero.is-till {
    padding-block: 28px;
  }
}

/* On a tablet the bar is one row (ADR-859, owner: "with this tablet devices please make this sticky in one row"). It
   was wrapping to 112px: the eyebrow, the line and the button come to more than the 691px a tablet's content has, so
   the button dropped underneath — and a sticky bar that tall takes a third of the screen with it. The eyebrow goes
   between 701 and 1000, as it already does on a phone; "Know the day we open" and the button fit the row easily, and
   the bar holds at its own 70px. */
@media (min-width: 701px) and (max-width: 1000px) {
  /* the sentence goes too (ADR-860, owner: "remove this description text and make it nice design when not stick for
     tablet devices"): with it the block ran to two lines and the bar to 143px unstuck, the button adrift on a line of
     its own. Left with the question and the button the row is 70px, stuck or not, and the same shape as the phone's.
     The eyebrow comes back above 1000, where there is room for all three. */
  .prereg-line {
    flex-wrap: nowrap;
  }
  .prereg-line .prereg-eyebrow,
  .prereg-line .prereg-say span {
    display: none;
  }
  .prereg-line .prereg-say {
    min-width: 0;
    margin: 0;
  }
  .prereg-line .prereg-say b {
    white-space: nowrap;
  }
  .prereg-line .prereg-ring {
    margin-inline-start: auto;
    flex: none;
  }
}

/* On a phone the menu lists the pages, not every feature (ADR-861, owner: "hide this selected for mobile phone device
   menu in this dropdown"). The nine features with their descriptions stood 789px tall inside a 748px sheet — the whole
   menu was that one group. The heading and the "More features" tile stay, so the feature pages are still two taps
   away; hiding the group whole would have left no route to any of them from the menu at all. */
@media (max-width: 700px) {
  .ms-features .ms-list {
    display: none;
  }
  .ms-features {
    padding-bottom: 12px;
  }
}

/* The updates search offers what it matches, in the help centre's own list (ADR-982), and the entry it takes you
   to is lit for a moment so the page does not simply jump. */
/* In the flow, not floating over: the side column scrolls (overflow:auto), and anything positioned inside a
   scroller is clipped by it. So the offers sit under the box and push the filters down while they are open, which
   in a narrow column reads better than a panel hanging over them anyway. */
.upd-sugg {
  position: static;
  margin: 6px 0 2px;
  max-height: 260px;
  overflow-y: auto;
}
/* The updates offer a button per row, not a link — a row scrolls the page to the
   entry rather than leaving it — so the browser's own button chrome is cleared. */
.upd-sugg .help-sugg-row {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.upd.is-found {
  outline: 2px solid var(--brand, #2aa9c9);
  outline-offset: 4px;
  border-radius: 16px;
  transition: outline-color 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .upd.is-found {
    transition: none;
  }
}

/* ============================================================================
   The cookie banner (ADR-1167). Nothing but Necessary runs until the visitor
   chooses, so this is the first thing they meet — which is why it is a card at
   the foot of the page rather than a sheet across it: it has to be answerable
   without hiding what they came to read.

   Server-rendered and `hidden`, so a visitor who has already chosen never sees
   a flash of it. `[hidden]` needs its own rule here because `display: grid`
   below would otherwise beat the browser's default and show it to everyone.
   ========================================================================== */
.cc {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.cc[hidden] {
  display: none;
}
.cc-card {
  pointer-events: auto;
  position: relative;
  /* its own stacking context, so the ripple below sits above the card's background and under its words —
     the same arrangement `.faq-dots` and `.foot-rings` use on the dark blocks and the footer */
  isolation: isolate;
  /* 30% narrower than the 760px it opened at, at the owner's word (ADR-1179). The words still sit at a
     comfortable measure: 532px less the padding and the mark leaves about 60 characters a line. */
  width: min(532px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: cc-rise 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
/* The footer's ripple, quieter and smaller, spreading from the card's top-right corner — the one part of it
   with no words in it (owner, 23 Sept: "add some light background pattern"). Built from `--accent` through
   color-mix rather than a fixed colour, so it is faint on the white card and faint again on the dark one, and
   masked so it has faded out before it reaches the heading. Decoration only: it is a pseudo-element behind the
   content, takes no pointer events, and the card needs no extra markup for it. */
.cc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 104% -6%, transparent 0 32px, color-mix(in srgb, var(--accent) 15%, transparent) 32px 33.2px);
  mask-image: radial-gradient(76% 116% at 100% 0%, #000 10%, transparent 74%);
  -webkit-mask-image: radial-gradient(76% 116% at 100% 0%, #000 10%, transparent 74%);
}

@keyframes cc-rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-card {
    animation: none;
  }
}
.cc-said {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cc-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.cc-said h2 {
  margin: 0 0 4px;
  font-size: var(--step-0);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-said p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.cc-said a {
  color: var(--accent-ink);
  text-underline-offset: 3px;
}

/* the five kinds, each a switch with the reason beside it in the words a shopkeeper would use */
.cc-picks {
  display: grid;
  gap: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--border);
}
.cc-picks[hidden] {
  display: none;
}
.cc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 2px;
  cursor: pointer;
}
/* One kind: the switch row, the button that opens the longer words, and the words themselves (ADR-1180).
   The button sits beside the label rather than inside it, so pressing it cannot flip the switch. */
.cc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}
.cc-item + .cc-item {
  border-top: 1px solid var(--border);
}
.cc-why-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* ~22px tall at 5px 8px — the one control that expands the legal reasoning for a consent category
     (2026-09-27 audit) */
  padding: 9px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.14s ease;
}
.cc-why-btn:hover {
  color: var(--ink);
}
.cc-why-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cc-chev {
  transition: transform 0.18s ease;
}
.cc-why-btn[aria-expanded='true'] {
  color: var(--accent-ink);
}
.cc-why-btn[aria-expanded='true'] .cc-chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .cc-chev {
    transition: none;
  }
}
.cc-why {
  grid-column: 1 / -1;
  display: block;
  padding: 0 2px 11px 54px;
}
/* it is opened and closed with the `hidden` attribute, so the display above must give way to it */
.cc-why[hidden] {
  display: none;
}
.cc-why p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
}
/* The Mac light, ported from the apps' stylesheet (ADR-1180): every pop-up in the product closes on it rather
   than a ✕, and this is the first one on the website. Smaller than the till's 16px, which is sized for a screen
   at arm's length. The glyph stays invisible until the pointer or the keyboard is on it, as it does there. */
.cc-top {
  display: flex;
  margin-bottom: -8px;
}
/* The light is 13px because that is what a Mac light is, and a 13px button is not something a thumb can
   hit. So the two are separated: the button is a 35px pressable square with nothing drawn on it, and the
   light is the dot inside it. The negative margin puts the dot back exactly where it stood, so the card
   looks unchanged and only the reach is bigger. */
.win-light {
  min-height: 0;
  padding: 11px;
  margin: -11px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.win-dot {
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
  transition:
    color 0.15s,
    transform 0.2s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.win-light.is-close .win-dot {
  background: radial-gradient(circle at 50% 30%, #ff8b82, #ff5f57 58%, #e0443e);
}
.win-light:hover .win-dot,
.win-light:focus-visible .win-dot {
  color: rgba(0, 0, 0, 0.68);
  transform: scale(1.16);
}
.win-light:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -8px;
  border-radius: 50%;
}
/* The bubble the till hangs off its own lights (ADR-396, ported here with ADR-1180): it says what the light
   does, after a beat so it never flickers past, and it hangs from the light's LEFT EDGE rather than centred —
   the light sits in the card's top corner, and a centred bubble leans out past it. Never on a touch screen,
   where a hover is really a tap and the bubble would flash as the thing is pressed. */
.win-light[data-tip] {
  position: relative;
}
.win-light[data-tip]::before,
.win-light[data-tip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.24s cubic-bezier(0.34, 1.5, 0.64, 1);
  z-index: 40;
}
.win-light[data-tip]::after {
  content: attr(data-tip);
  top: 100%;
  left: 9px;
  transform: translate(0, -5px) scale(0.95);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 9px;
  font: 600 11px/1.35 var(--font);
  letter-spacing: 0.01em;
  color: var(--brand-ink);
  background: var(--brand);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}
.win-light[data-tip]::before {
  content: '';
  top: calc(100% - 5px);
  left: 19px;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -3px) rotate(45deg);
  border-radius: 2px;
  background: var(--brand);
}
.win-light[data-tip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-delay: 0.22s;
}
.win-light[data-tip]:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
  transition-delay: 0.22s;
}
@media (hover: none) {
  .win-light[data-tip]::before,
  .win-light[data-tip]::after {
    content: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .win-light[data-tip]::before,
  .win-light[data-tip]::after {
    transition: opacity 0.15s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .win-dot {
    transition: none;
  }
}
/* who built it, quietly, at the right of the same row as the two pages */
.cc-by {
  font-size: 0.6875rem;
  color: var(--muted);
}
.cc-by a {
  color: var(--muted);
  font-weight: 600;
  text-underline-offset: 3px;
}
.cc-by a:hover {
  color: var(--accent-ink);
}

/* the two pages this panel is really about, where someone reading it would look for them */
.cc-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0;
  padding: 11px 2px 2px;
  border-top: 1px solid var(--border);
}
.cc-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cc-legal a {
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
.cc-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cc-switch {
  flex: none;
  position: relative;
  width: 40px;
  height: 23px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.16s ease;
}
.cc-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease;
}
.cc-row input:checked + .cc-switch {
  background: var(--ok-ink);
}
.cc-row input:checked + .cc-switch::after {
  transform: translateX(17px);
}
.cc-row input:focus-visible + .cc-switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cc-row.is-fixed {
  cursor: default;
}
.cc-row.is-fixed .cc-switch {
  opacity: 0.65;
}
.cc-row-words {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.cc-row-words b {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.cc-row-words small {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}
.cc-always {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* the answers: everything, nothing, or exactly what they picked */
.cc-do {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.cc-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}
.cc-btn[hidden] {
  display: none;
}
.cc-btn:hover {
  border-color: var(--accent);
}
.cc-btn.cc-yes {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: var(--accent-solid-ink);
}
.cc-btn.cc-yes:hover {
  filter: brightness(1.08);
}
.cc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .cc-card {
    padding: 17px 16px;
  }
  /* The mask is a share of the card, so on a phone the same percentages reach much further across a much
     narrower card — the ripple was running behind the message instead of fading before it. Pulled back into
     the corner above the first line, with the rings closer together so more than one of them still shows in
     the smaller space, and a shade fainter because there is no empty room here to spare. */
  .cc-card::before {
    background: repeating-radial-gradient(circle at 104% -6%, transparent 0 24px, color-mix(in srgb, var(--accent) 12%, transparent) 24px 25px);
    mask-image: radial-gradient(50% 56% at 100% 0%, #000 6%, transparent 72%);
    -webkit-mask-image: radial-gradient(50% 56% at 100% 0%, #000 6%, transparent 72%);
  }
  /* The one-line reason under each kind wraps to three or four lines on a phone and pushes the switches apart
     (owner, 23 Sept: "in mobile phone you can hide short description"). The name and the switch are what the row
     is for; the reason is behind More, in full, where there is room to read it. */
  .cc-row-words small {
    display: none;
  }
  .cc-row {
    align-items: center;
  }
  .cc-btn {
    flex: 1 1 100%;
  }
  .cc-said {
    gap: 11px;
  }
  .cc-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
}

/* ---- the site's own search (ADR-1189) --------------------------------------
   The button in the header, and the sheet it opens under it. The box inside is the help centre's own
   `.help-search`, so it is not restyled here — only where it sits and what it opens into. */
/* Not a bare glyph. It reads as a thing you can type into — the magnifier, the word, and the key that opens it
   — and it stands in the same family as the dial beside it: the same height, the same round border, the same
   lighting. The sheen is a slow pass of light across the glass, which is the one flourish; it runs once on
   hover rather than for ever, and not at all for somebody who asked for less movement. */
.nav-find-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ctl-h);
  padding: 0 10px 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.nav-find-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.nav-find-btn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-1px);
}
.nav-find-btn:hover::after {
  animation: find-sheen 0.75s ease-out;
}
@keyframes find-sheen {
  to {
    transform: translateX(120%);
  }
}
.nav-find-btn[aria-expanded='true'] {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.nav-find-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-find-mark {
  display: grid;
  place-items: center;
}
.nav-find-mark svg {
  width: 16px;
  height: 16px;
}
.nav-find-word {
  letter-spacing: -0.01em;
}
/* the key, drawn as a key: it is a promise the page keeps, so it is shown rather than hidden in a tooltip */
.nav-find-key {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nav-find-btn {
    transition: none;
  }
  .nav-find-btn:hover {
    transform: none;
  }
  .nav-find-btn:hover::after {
    animation: none;
  }
}
/* below the wide bar there is no room for words: it goes back to a round glyph, the dial's twin */
@media (max-width: 1150px) {
  .nav-find-word,
  .nav-find-key {
    display: none;
  }
  .nav-find-btn {
    width: var(--ctl-h);
    padding: 0;
    justify-content: center;
  }
}

/* Hung below the header rather than pushed into it. `.site-head` is sticky and lays its children out to its own
   height, so a sheet in normal flow kept its 81px while the results inside it stood 460px tall and spilled down
   the page. Absolute against the header — which is positioned, being sticky — gives the panel its own box.

   A card of a middling width rather than a strip across the page (owner: "make it medium width"): a result is a
   line of words, and a line of words 1400px long is hard to read back to the start of. It floats clear of the
   header on its own shadow, with a hairline of the accent along the top so it reads as the header's own. */
.find-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);
  z-index: 70;
  width: min(640px, calc(100vw - 24px));
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    0 30px 70px -30px rgba(0, 24, 38, 0.55),
    0 2px 10px rgba(0, 24, 38, 0.08);
  animation: find-drop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
/* toggled with `hidden`, so the display above must give way to it */
.find-sheet[hidden] {
  display: none;
}
@keyframes find-drop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.985);
  }
  to {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .find-sheet {
    animation: none;
  }
}
/* Deliberately NOT `.wrap`, though it wants the same width and gutters. `.site-head .wrap` is a flex row with
   `height: var(--head-h)` on it, for the header's own bar — borrowing the class brought both, so the box and the
   results sat side by side inside an 80px row and the list spilled down the page. Overriding `display` alone
   left the height behind. The two properties that are actually wanted are written out here instead. */
.find-inner {
  padding: 14px 16px 16px;
}

/* One tab per kind, each carrying what the words found. A pill for the chosen one rather than an underline,
   because the row wraps on a narrow card and an underline under a wrapped row points at nothing. */
.find-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.find-tabs[hidden] {
  display: none;
}
.find-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}
.find-tab:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-2);
}
.find-tab.is-on {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.find-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
.find-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.find-tab-n {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  opacity: 0.75;
}
.find-tab-n:empty {
  display: none;
}
.find-box {
  width: 100%;
}
.find-hits {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  max-height: min(58vh, 460px);
  overflow-y: auto;
}
.find-hits[hidden] {
  display: none;
}
.find-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 11px;
  border-radius: 11px;
  text-decoration: none;
  color: var(--ink);
}
.find-hit b {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.find-hit span {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.find-kind {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.find-hit:hover {
  background: var(--surface-2);
}
/* The arrow-key row needs more than a tint: `--surface-2` against `--surface` is about 1.08:1, which is not an
   indicator, it is a suggestion. A solid bar down its edge carries the contrast, and the tint stays for the
   warmth. The focus outline is left alone rather than removed — a keyboard user who Tabs to a row still needs
   to see where they are. */
.find-hit.is-on {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.find-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.find-said {
  margin: 12px 2px 2px;
  font-size: 13.5px;
  color: var(--muted);
}
.find-said[hidden] {
  display: none;
}

/* the way back to the cookie choice, sitting with the legal links rather than shouting for attention.
   It takes their padding and their pill because it stands in their row and is pressed the same way: with
   none of its own it was a 14px target, which is the icon's size rather than a thumb's. */
.foot-cookies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.foot-cookies[hidden] {
  display: none;
}
/* This has to sit here, below the rule above, and not with the rest of the footer's phone rules a long way
   up the file: both are one class, so the file's order decides, and the copy up there has never once
   applied. Only the 14px mark is left at this width (owner: "remove text Cookies and move icon svg to the
   same row as privacy"), so the padding is the whole target — 11px round a 14px mark is 36px, which is what
   the three links beside it already stand at. */
@media (max-width: 620px) {
  .foot-cookies {
    padding: 11px;
  }
}
.foot-cookies svg {
  opacity: 0.75;
}
.foot-cookies:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}
.foot-cookies:hover svg {
  opacity: 1;
}
.foot-cookies:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- news beside the questions (ADR-1333) ------------------------------------------------------
   Two shelves on the figures' own sheet: the same paper, glow and edge as .stats above it, so the two
   read as one piece of the page. Each shelf is a list, not cards — a numbered row for a post, a
   question that opens for an answer — and its last line is the way to the rest. */
.nf {
  --tile-lit: linear-gradient(150deg, var(--accent), var(--brand));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  background:
    radial-gradient(55% 130% at 0% 0%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 72%),
    radial-gradient(45% 120% at 100% 100%, color-mix(in srgb, var(--ok) 13%, transparent), transparent 70%), linear-gradient(125deg, var(--bg-2) 0%, var(--accent-soft) 50%, var(--bg-2) 100%);
}
.nf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(80% 110% at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(80% 110% at 50% 50%, #000 30%, transparent 90%);
}
.nf-shelf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px #0b122010,
    0 12px 26px -20px color-mix(in srgb, var(--brand) 40%, transparent);
}
.nf-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}
.nf-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: var(--tile-lit);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 70%, transparent);
}
.nf-mark svg {
  width: 20px;
  height: 20px;
}
/* the news: numbered rows on a dotted thread */
.nf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.nf-list > li + li {
  border-top: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border));
}
.nf-row {
  display: grid;
  grid-template-columns: auto 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nf-row:hover {
  background: var(--accent-soft);
  transform: translateX(4px);
}
.nf-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.nf-thumb {
  width: 76px;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.nf-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nf-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.nf-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.nf-kicker b {
  color: var(--accent-ink);
  font-weight: 600;
}
.nf-body strong {
  font-weight: 600;
  line-height: 1.3;
}
.nf-go {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nf-go svg {
  width: 18px;
  height: 18px;
}
.nf-row:hover .nf-go {
  opacity: 1;
  transform: none;
}
.nf-none {
  margin: 0;
  color: var(--muted);
}
/* the questions: the FAQ book's own rows, each wearing the group it comes from */
.nf-qs {
  display: grid;
  gap: 8px;
}
.nf-q > summary span small {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nf-all {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* a thumb-sized target (44px): the link was 32px tall, which the real-device check rightly refused on every phone */
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.nf-all:hover {
  gap: 13px;
}
.nf-all svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .nf {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .nf-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .nf-thumb {
    display: none;
  }
  .nf-shelf {
    padding: 18px 16px 16px;
  }
}