/* Centrely's public site, in the look of the app's public pages (Zikry, 29 Oct 2026: design VII,
   "Enquiries"): Centrely blue bands with message bubbles rising through them, white cards on the
   blue, and a navy main button there (centre-ops: "Public pages" in src/app/globals.css, and
   src/components/public-backdrop.tsx). Light only, as the app's public pages are.
   - Every text colour passes WCAG AA (4.5:1) on the surface it sits on.
   - Things move only when the visitor's system allows motion, and "Pause motion" on the home
     page stops them (site.js puts .paused on the page and remembers it on that device).
   - Without JavaScript, every page reads complete: site.js only hides what it then reveals. */

@font-face {
  font-family: "Geist";
  src: url("Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Surfaces */
  --band: #2460ed; /* the blue bands: Centrely blue, the app's public canvas */
  --blue: #2460ed; /* links and marks on light surfaces */
  --blue-hover: #1d52d4;
  --navy: #14213d; /* the main button on blue, and the footer */
  --navy-hover: #23345d;
  --tint: rgb(11 31 92 / 0.22); /* a darker patch of blue, for pills and buttons on it */
  --canvas: #f4f6fa;
  --card: #fff;
  --fill: #eef2f9;
  --wash: #edf3ff;
  --chat: #eef2fb;
  --line: #e2e7f0;
  --line-strong: #d3dbe8;
  --off: #b8c2d3;
  /* Text */
  --ink: #101218;
  --ink-soft: #646a74;
  --on-blue: #fff;
  --on-blue-soft: #f0f4ff;
  --on-navy-soft: #aab6d3;
  /* The bubbles, as in the app's public background */
  --bubble-parent: #3369ee;
  --bubble-parent-line: #5e8ff4;
  --bubble-centre: #c9d8fb;
  --bubble-centre-line: #a8c0f8;
  --bubble-tick: #7ea6ff;
  /* Shape and motion */
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px #0b1f5c12, 0 20px 44px -24px #0b1f5c3d;
  --shadow-public: 0 1px 2px #0b1f5c29, 0 28px 64px -32px #0b1f5ca8;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--blue-hover);
}

/* Focus: Centrely blue on light surfaces, white on the blue and navy ones. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.site-header :focus-visible,
.hero :focus-visible,
.doc-head :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}

svg {
  flex: none;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute;
  top: 12px;
  left: -9999px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.skip:focus {
  left: max(16px, env(safe-area-inset-left, 0px));
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The header: on blue on every page, with the mark in white, as on the app's public pages. */
.site-header {
  background: var(--band);
  color: var(--on-blue);
  padding-block: 18px;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.brand:hover {
  color: inherit;
}
.brand svg {
  width: 26px;
  height: 28px;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-right: -12px;
  font-size: 15px;
  font-weight: 550;
}
.site-nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--on-blue);
  text-decoration: none;
  transition: background-color 0.2s;
}
.site-nav a:hover {
  background: var(--tint);
  color: var(--on-blue);
}

/* The one main action on a screen: navy, as on the app's public pages. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px 15px 24px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 12px 28px -14px rgb(11 31 92 / 0.7);
  transition:
    background-color 0.2s,
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.button:hover {
  background: var(--navy-hover);
  color: #fff;
}
.button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}

/* Status chips: what's built, and what's coming later, said beside it. */
.chip,
.later {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 2px;
}
.chip svg {
  width: 13px;
  height: 13px;
}
.chip.built {
  background: var(--wash);
  color: var(--blue);
}
.later {
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--ink-soft);
}
.later::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.later.on-blue {
  border-color: rgb(255 255 255 / 0.3);
  background: var(--tint);
  color: #fff;
}

/* The opening, on blue: what Centrely is for and where it is, then the demo of how it answers. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--band);
  color: var(--on-blue);
  padding-block: 20px 56px;
}
/* Bubbles peek in from the screen's edges, half off it, as on the app's public pages on phones;
   only from 1280px, where the text never comes near them (a pale bubble behind white text would
   make it hard to read). */
.hero > .bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  --time: 30s;
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
@media (min-width: 1280px) {
  .hero > .bubbles {
    display: block;
  }
}
.hero > .bubbles .bubble {
  height: 60px;
  gap: 9px;
  padding-inline: 26px;
  border-radius: 30px;
}
.hero > .bubbles .bubble.short {
  height: 46px;
  border-radius: 23px;
}
.hero > .bubbles .bubble i {
  height: 9px;
}
.hero-head {
  display: grid;
  justify-items: center;
  text-align: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(40px, 6.6vw, 80px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hero h1 .line {
  display: block;
}
.swash {
  position: relative;
  display: inline-block;
}
.swash svg {
  position: absolute;
  z-index: -1;
  left: -1%;
  bottom: -0.1em;
  width: 102%;
  height: 0.3em;
  overflow: visible;
  color: var(--bubble-centre-line);
}
.hero .lede {
  max-width: 36em;
  margin: 0 0 32px;
  color: var(--on-blue-soft);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}
.quiet {
  color: var(--on-blue);
  font-weight: 550;
  text-decoration-color: rgb(255 255 255 / 0.55);
  text-underline-offset: 5px;
}
.quiet:hover {
  color: var(--on-blue);
  text-decoration-color: currentColor;
}

/* The demo (site.js): pick a question, or watch them asked in turn. The phone shows it asked;
   the centre's published rows are checked, and the ones used light up; the reply comes from them,
   with a line drawn from each row to it on wide screens. A question that isn't set out is passed
   to a person, whose card slides in. Without JavaScript, the conversation shows as it ends, and
   the questions to pick aren't shown. */
.demo {
  position: relative;
  display: grid;
  gap: 28px;
  max-width: 560px;
  margin: clamp(40px, 6vw, 72px) auto 0;
}
.demo-label {
  margin: 0 0 12px;
  color: var(--on-blue);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.asks {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}
.js .asks {
  display: flex;
}
.try {
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 20px 20px 20px 6px;
  background: var(--tint);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.try:hover {
  background: rgb(11 31 92 / 0.36);
}
.try[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}
.demo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.demo-steps li {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 8px;
  color: var(--on-blue-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.demo-steps span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
.demo-steps li.is-on {
  color: #fff;
  font-weight: 650;
}
.demo-steps li.is-on span,
.demo-steps li.is-done span {
  border-color: #fff;
  background: #fff;
  color: var(--blue);
}
.demo-steps li.is-on span {
  box-shadow: 0 0 0 5px rgb(255 255 255 / 0.2);
}
.stage {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
}
.demo-info {
  min-width: 0;
}
.info {
  display: grid;
  padding: 8px;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-public);
}
.info-card {
  padding: 8px 6px 6px;
}
.info-card + .info-card {
  border-top: 1px solid var(--line);
}
.info-title {
  margin: 0 6px 6px;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.info dl {
  display: grid;
  gap: 2px;
  margin: 0;
}
.row {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 6px 40px 6px 12px;
  border-radius: 12px;
}
.row dt {
  font-size: 14px;
  font-weight: 620;
  line-height: 1.3;
}
.row dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.35;
}
.row.is-scan {
  background: var(--fill);
}
.row.is-used {
  background: var(--wash);
  box-shadow: inset 3px 0 0 var(--blue);
}
.row.is-used dt {
  color: var(--blue);
}
.row.is-missing {
  background: var(--fill);
  box-shadow: inset 3px 0 0 var(--off);
}
.row.is-used::after,
.row.is-missing::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.row.is-missing::after {
  background: var(--off) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.1.9-1.1 1.8M12 17h.01'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.handover {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-public);
}
.js .demo .handover:not(.is-in) {
  display: none;
}
.handover-text {
  display: grid;
  line-height: 1.3;
}
.handover-text strong {
  font-size: 14px;
  font-weight: 650;
}
.handover-text span {
  color: var(--ink-soft);
  font-size: 13px;
}
.handover > svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
  transform-origin: 50% 10%;
}
.demo-links {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.demo-links .halo,
.demo-links .core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.demo-links .halo {
  stroke: #fff;
  stroke-width: 6;
  opacity: 0.9;
}
.demo-links .core {
  stroke: var(--blue);
  stroke-width: 2;
}
.demo-links circle {
  fill: var(--blue);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
}
.demo-links.is-drawn .halo,
.demo-links.is-drawn .core {
  stroke-dashoffset: 0;
}
.demo-links.is-drawn circle {
  opacity: 1;
}
.demo-foot {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 28px;
}
/* Phones and tablets: once it plays, only the part of the published information it used. */
@media (max-width: 1023px) {
  .js .demo .info-card:not(.has-used) {
    display: none;
  }
  .js .demo .info-card + .info-card {
    border-top: 0;
  }
}
@media (min-width: 1024px) {
  .hero {
    padding-block: 32px 72px;
  }
  .demo {
    grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
    max-width: none;
  }
  .demo-ask {
    padding-top: 56px;
  }
  .js .asks {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-steps {
    grid-template-columns: none;
    gap: 12px;
    margin-top: 28px;
  }
  .demo-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
  }
  .demo-info {
    padding-top: 30px;
  }
  .demo-links {
    display: block;
  }
  .js .demo .handover:not(.is-in) {
    display: grid;
    visibility: hidden;
  }
}

.phone {
  width: min(100%, 340px);
  padding: 9px;
  border-radius: 46px;
  background: var(--card);
  box-shadow:
    var(--shadow-public),
    0 0 0 1px rgb(11 31 92 / 0.06);
}
.screen {
  display: flex;
  flex-direction: column;
  height: 580px;
  overflow: hidden;
  border-radius: 37px;
  background: var(--chat);
}
.screen-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 12px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.screen-top > svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--blue);
  font-size: 15px;
  font-weight: 650;
}
.who {
  display: grid;
  line-height: 1.25;
}
.who-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 620;
}
.who-sub {
  color: var(--ink-soft);
  font-size: 12.5px;
}
.chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 16px 12px;
  overflow: hidden;
  list-style: none;
  mask-image: linear-gradient(180deg, transparent, #000 40px);
}
.msg {
  display: grid;
  gap: 4px;
  max-width: 86%;
}
.msg.parent {
  align-self: flex-start;
  justify-items: start;
  transform-origin: bottom left;
}
.msg.centre {
  align-self: flex-end;
  justify-items: end;
  transform-origin: bottom right;
}
.msg .text {
  display: flow-root; /* holds the floated time inside the bubble */
  padding: 9px 12px 8px 13px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.42;
}
.msg.parent .text {
  border-bottom-left-radius: 6px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 1px rgb(11 31 92 / 0.07);
}
.msg.centre .text {
  border-bottom-right-radius: 6px;
  background: var(--blue);
  color: #fff;
}
.time {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 7px 0 -2px 10px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
}
.msg.centre .time {
  color: var(--on-blue-soft);
}
.time svg {
  width: 15px;
  height: 10px;
  color: var(--bubble-centre);
}
.label,
.source {
  padding-inline: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.label {
  color: var(--ink-soft);
}
.source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
}
.source svg {
  width: 12px;
  height: 12px;
}
.note {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.3;
  box-shadow: 0 1px 1px rgb(11 31 92 / 0.07);
}
.note svg {
  width: 14px;
  height: 14px;
  color: var(--blue);
}
/* "Typing": three dots in a bubble, on the side of whoever's about to write. */
.msg .text.dots {
  display: flex;
  gap: 4px;
  padding: 13px 14px;
}
.msg.parent .dots {
  color: var(--ink-soft);
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.screen-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.screen-input span {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.screen-input i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.screen-input svg {
  width: 16px;
  height: 16px;
}
.preview-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--on-blue);
  font-size: 14px;
  font-weight: 550;
  text-align: center;
}
.motion {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
}
.motion:hover {
  background: rgb(11 31 92 / 0.34);
}
.motion svg {
  width: 14px;
  height: 14px;
}
.motion .i-play,
.paused .motion .i-pause {
  display: none;
}
.paused .motion .i-play {
  display: block;
}
.js .motion {
  display: inline-flex;
}

/* Bubbles (decoration only), as the app's public background: each rises through its band in
   --time, spread out by --start; without motion they rest at --rest, in the same zigzag. */
.bubbles {
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.bubble {
  position: absolute;
  top: var(--rest);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: var(--w);
  height: 70px;
  padding-inline: 28px;
  border-radius: 35px;
}
.bubble.short {
  height: 52px;
  border-radius: 26px;
}
.bubble i {
  display: block;
  height: 10px;
  border-radius: 5px;
}
.bubble.parent {
  left: var(--x);
  background: var(--bubble-parent);
}
.bubble.parent i {
  background: var(--bubble-parent-line);
}
.bubble.centre {
  right: var(--x);
  background: var(--bubble-centre);
}
.bubble.centre i {
  background: var(--bubble-centre-line);
}
.bubble svg {
  position: absolute;
  right: 22px;
  bottom: 15px;
  width: 20px;
  height: 13px;
  color: var(--bubble-tick);
}
.contact-band > .bubbles,
.lost > .bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  --time: 25s;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* Laptops and wider: three a side, at the band's edges; phones and tablets: two a side, half off
   the screen, behind the card (the app's own sizes). */
.bubbles-wide {
  display: none;
}
.bubbles-wide .bubble {
  height: 78px;
  gap: 11px;
  padding-inline: 34px;
  border-radius: 39px;
}
.bubbles-wide .bubble.short {
  height: 56px;
  border-radius: 28px;
}
.bubbles-wide .bubble i {
  height: 11px;
  border-radius: 6px;
}
.bubbles-wide .bubble svg {
  right: 26px;
  bottom: 18px;
  width: 22px;
  height: 14px;
}
.bubbles-narrow .bubble {
  height: 60px;
  gap: 9px;
  padding-inline: 26px;
  border-radius: 30px;
}
.bubbles-narrow .bubble.short {
  height: 46px;
  border-radius: 23px;
}
.bubbles-narrow .bubble i {
  height: 9px;
}
@media (min-width: 1280px) {
  .bubbles-wide {
    display: block;
  }
  .bubbles-narrow {
    display: none;
  }
}

/* Sections */
.section {
  padding-block: clamp(72px, 9vw, 120px);
}
.section.how {
  background: var(--card);
}
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.tag {
  margin: 0 0 16px;
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.section-head > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.45vw, 19px);
}
.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--wash);
  color: var(--blue);
}
.icon svg {
  width: 22px;
  height: 22px;
}
.topic h3,
.team-tile h3,
.tile h3,
.timeline h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 630;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* What parents ask: two rows drifting past (decoration: a sentence says it for screen readers).
   Without motion, one set of each, wrapped. */
.ticker {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(56px, 8vw, 88px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
}
.ticker-group {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}
.ticker-group span {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 20px 20px 20px 6px;
  background: var(--card);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(11 31 92 / 0.05);
}

/* What a centre sets out: six tiles, two, three or four across, and the "not given yet" tile. */
.topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topics > li {
  display: grid;
  min-width: 0;
}
.topics > li.wide {
  grid-column: 1 / -1;
}
@media (min-width: 760px) {
  .topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .topics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .topics > li.wide {
    grid-column: span 2;
  }
}
.topic {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s;
}
.topic:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.ask {
  justify-self: start;
  margin: 0;
  padding: 8px 13px;
  border-radius: 16px 16px 16px 5px;
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.4;
}
.topic.honest {
  align-content: center;
  gap: 18px;
  border-color: transparent;
  background: var(--navy);
  color: #fff;
}
.topic.honest:hover {
  border-color: transparent;
}
.honest p {
  margin: 6px 0 0;
  color: var(--on-navy-soft);
  font-size: 15.5px;
}
@media (min-width: 560px) {
  .topic.honest {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }
}
.field {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.5);
}
.field-label {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}
.field-value {
  display: grid;
  font-size: 17px;
  font-weight: 620;
  line-height: 1.4;
}
.field-value .v {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.v-free,
.v-none {
  opacity: 0;
  color: var(--ink-soft);
}
.v-free::after,
.v-none::after {
  content: "";
  position: absolute;
  top: 52%;
  left: -3px;
  right: -3px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.v-ok {
  color: var(--blue);
}
.v-ok svg {
  width: 18px;
  height: 18px;
}

.team {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 760px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.team-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.team-tile p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* How it works: four steps joined by a line. The first is built, and its line is drawn in as the
   section scrolls into view; the rest are dashed, still to come. */
.timeline {
  position: relative;
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  padding-left: 64px;
}
.timeline p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}
.node {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 650;
}
.done .node {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px var(--wash);
}
.node svg {
  width: 20px;
  height: 20px;
}
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: -22px;
  left: 21px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.timeline li.done::before {
  background: var(--blue);
  transform-origin: top;
}
@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .timeline li {
    padding: 70px 0 0;
  }
  .timeline li:not(:last-child)::before {
    top: 21px;
    bottom: auto;
    left: 58px;
    right: -16px;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .timeline li.done::before {
    background: var(--blue);
    transform-origin: left;
  }
}

/* It stays yours: one large tile and three smaller ones, down to one column on phones. */
.bento {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile-big,
  .tile-wide {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tile-big {
    grid-row: span 2;
  }
}
.tile {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.tile-big {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}
.tile-big h3 {
  font-size: 21px;
}
.tile-big p {
  max-width: 34em;
  margin-top: 8px;
  font-size: 16.5px;
}

/* The connection: the centre's WhatsApp account, Centrely, and the access between them, which
   the centre can switch off (the switch goes off and on again, slowly, while motion is on). */
.connect {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 28px 16px 76px;
  border-radius: 20px;
  background: var(--fill);
  align-content: center;
}
.end {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.end-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--card);
  color: var(--blue);
  box-shadow: var(--shadow-card);
}
.end-icon svg {
  width: 28px;
  height: 28px;
}
.wire {
  position: relative;
  height: 10px;
  margin-top: 25px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px) center / 100% 2px no-repeat;
}
.flow,
.flow i {
  position: absolute;
  inset: 0;
}
.flow i {
  opacity: 0;
  transform: translateX(-100%);
}
.flow i::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.access {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: var(--shadow-card);
}
.switch {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--blue);
}
.knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(16px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}
.access-text {
  display: grid;
}
.access-text > span {
  grid-area: 1 / 1;
}
.access-on {
  color: var(--ink);
}
.access-off {
  opacity: 0;
  color: var(--ink-soft);
}

/* Two separate bills: Meta's for WhatsApp messages, Centrely's for Centrely. */
.bills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.bill {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 148px;
  padding: 12px 16px 14px;
  border-radius: 12px 12px 0 0;
  background: var(--fill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
}
.bill::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 7px;
  background:
    linear-gradient(135deg, var(--fill) 25%, transparent 25%) -7px 0 / 14px 14px repeat-x,
    linear-gradient(225deg, var(--fill) 25%, transparent 25%) -7px 0 / 14px 14px repeat-x;
}
.bill-from {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Contact: a white card on blue, with bubbles rising at the band's edges, as on the app's public
   pages. */
.contact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 11vw, 136px);
  background: var(--band);
}
.contact-card {
  display: grid;
  justify-items: center;
  max-width: 580px;
  margin-inline: auto;
  padding: clamp(28px, 4.5vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: center;
  box-shadow: var(--shadow-public);
}
.contact-card h1,
.contact-card h2 {
  margin: 0 0 14px;
}
.contact-card h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.contact-card .lead {
  max-width: 30em;
  margin: 0 0 28px;
  color: var(--ink-soft);
}
.address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 20px 0 0;
  font-size: 15.5px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.copy {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--blue);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.copy:hover {
  border-color: var(--line-strong);
  background: var(--fill);
}
.copy svg {
  width: 14px;
  height: 14px;
}
.js .copy {
  display: inline-flex;
}
.contact-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  width: 100%;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.contact-meta div {
  display: flex;
  gap: 6px;
}
.contact-meta dt {
  color: var(--ink-soft);
}
.contact-meta dd {
  margin: 0;
  font-weight: 550;
  overflow-wrap: anywhere;
}

/* The footer: who runs Centrely, on every page (Meta's business check reads it), and the
   policies. */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding-block: 44px max(44px, env(safe-area-inset-bottom, 0px));
  font-size: 14.5px;
}
.site-footer .wrap {
  display: grid;
  gap: 24px;
}
@media (min-width: 860px) {
  .site-footer .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.site-footer .brand {
  color: #fff;
  font-size: 21px;
}
.site-footer .brand svg {
  width: 23px;
  height: 25px;
}
.footer-about p {
  max-width: 34em;
  margin: 12px 0 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
}
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* The policies: the title on blue, the text on a white sheet laid over it. */
.doc-head {
  background: var(--band);
  color: var(--on-blue);
  padding-block: 28px 116px;
}
.doc-head h1 {
  margin: 0 0 12px;
  font-size: clamp(38px, 5.6vw, 58px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.042em;
}
.doc-head p {
  margin: 0;
  color: var(--on-blue-soft);
  font-size: 15.5px;
}
.doc-head .lang {
  margin-top: 14px;
}
.doc-head a {
  color: #fff;
}
.doc-body {
  display: grid;
  gap: 16px;
  margin-top: -84px;
  padding-bottom: clamp(56px, 8vw, 104px);
}
.doc {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-public);
}
@media (min-width: 1100px) {
  .doc-body.has-toc {
    grid-template-columns: 250px minmax(0, 800px);
    align-items: start;
    justify-content: center;
    gap: 32px;
  }
  .doc-body.has-toc .doc {
    margin: 0;
  }
}
.doc > :first-child {
  margin-top: 0;
}
.doc h2 {
  margin: 44px 0 12px;
  font-size: clamp(21px, 2.1vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  scroll-margin-top: 24px;
}
.doc h3 {
  margin: 26px 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.doc p,
.doc li {
  max-width: 68ch;
}
.doc p {
  margin: 0 0 14px;
}
.doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.doc li + li {
  margin-top: 8px;
}
.doc li::marker {
  color: var(--blue);
}
.doc .later {
  margin-inline: 4px;
}
/* "The short version": the page's few main points, first, as the big companies' policies do. */
.doc .summary {
  margin: 0 0 32px;
  padding: 20px 22px 18px;
  border-radius: 18px;
  background: var(--wash);
}
.doc .summary h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.doc .summary ul {
  margin: 0;
}
.doc .summary li + li {
  margin-top: 6px;
}
.table-scroll {
  margin: 6px 0 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.doc table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}
.doc th,
.doc td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.doc thead th {
  background: var(--fill);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.doc tbody tr + tr td {
  border-top: 1px solid var(--line);
}
.doc td:first-child {
  font-weight: 600;
}
.from {
  display: none;
}
@media (max-width: 639px) {
  .table-scroll {
    overflow: visible;
  }
  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
  }
  .doc table {
    min-width: 0;
  }
  .doc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc tbody tr {
    padding: 16px;
  }
  .doc tbody tr + tr {
    border-top: 1px solid var(--line);
  }
  .doc tbody tr + tr td {
    border-top: 0;
  }
  .doc td {
    padding: 0;
  }
  .doc td:first-child {
    margin-bottom: 8px;
  }
  .doc td:last-child {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 14px;
  }
  .from {
    display: inline;
    font-weight: 600;
  }
}
.doc td p {
  margin: 0 0 8px;
}
.doc td p:last-child {
  margin-bottom: 0;
}

/* "On this page": a card above the policy on phones (closed until opened), a sticky list beside
   it on wide screens, marking the section being read (site.js). */
.toc {
  padding: 4px 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 620;
  list-style: none;
  cursor: pointer;
}
.toc summary::-webkit-details-marker {
  display: none;
}
.toc summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.toc[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
.toc ol {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.35;
  text-decoration: none;
}
.toc a:hover {
  background: var(--fill);
  color: var(--ink);
}
.toc a[aria-current="true"] {
  background: var(--wash);
  color: var(--blue);
  font-weight: 600;
}
@media (min-width: 1100px) {
  .toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding-block: 6px 8px;
  }
  .toc summary {
    pointer-events: none;
    cursor: default;
  }
  .toc summary::after {
    display: none;
  }
}

/* Page not found: a white card on blue, as the app's welcome page. */
.lost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: calc(100svh - 170px);
  padding-block: 72px;
  background: var(--band);
}

@media (max-width: 559px) {
  body {
    font-size: 16px;
  }
  .site-nav {
    margin-inline: -12px 0;
  }
  .hero {
    padding-block: 12px 56px;
  }
  .actions .button {
    width: 100%;
  }
  .actions .quiet {
    margin-inline: auto;
  }
  .topic {
    gap: 12px;
    padding: 18px;
  }
  .topic h3 {
    font-size: 16px;
  }
  .topic .ask {
    display: none;
  }
}
@media (max-width: 360px) {
  .msg .text {
    font-size: 13px;
  }
  .screen-top {
    padding: 14px 14px 10px 10px;
  }
  .chat {
    gap: 8px;
    padding: 12px 10px;
  }
}

/* Motion, only when the visitor's system allows it. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .hero .pill {
    animation: rise 0.8s var(--ease) both;
  }
  .pill .dot {
    animation: ping 2.4s var(--ease) 1.2s infinite;
  }
  .hero h1 .line {
    animation: rise 0.9s var(--ease) 0.08s both;
  }
  .hero h1 .line + .line {
    animation-delay: 0.18s;
  }
  .swash path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.9s var(--ease) 0.9s forwards;
  }
  .hero .lede {
    animation: rise 0.9s var(--ease) 0.28s both;
  }
  .hero .actions {
    animation: rise 0.9s var(--ease) 0.38s both;
  }
  .stage {
    animation: stage-in 1.1s var(--ease) 0.3s both;
  }
  .demo-ask,
  .demo-info {
    animation: rise 0.9s var(--ease) 0.5s both;
  }
  .motion {
    animation: rise 0.8s var(--ease) 1s both;
  }
  /* The demo: messages arrive, dots type, rows light up, lines draw, the person's card slides in. */
  .chat .is-new {
    animation: msg-in 0.45s var(--ease) both;
  }
  .dots i {
    animation: typing 1.1s infinite;
  }
  .dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
  .row {
    transition:
      background-color 0.35s var(--ease),
      box-shadow 0.35s var(--ease);
  }
  .row.is-used::after,
  .row.is-missing::after {
    animation: pop 0.45s var(--ease) both;
  }
  .try {
    transition:
      background-color 0.2s,
      color 0.2s,
      border-color 0.2s;
  }
  .demo-steps span {
    transition:
      background-color 0.3s,
      color 0.3s,
      border-color 0.3s,
      box-shadow 0.3s;
  }
  .demo-links .halo,
  .demo-links .core {
    transition: stroke-dashoffset 0.75s var(--ease);
  }
  .demo-links circle {
    transition: opacity 0.3s 0.6s;
  }
  .js .demo .handover.is-in {
    animation: rise 0.55s var(--ease) both;
  }
  .js .demo .handover.is-in > svg {
    animation: ring 1s var(--ease) 0.4s;
  }
  .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -14px rgb(11 31 92 / 0.8);
  }
  .button:hover svg {
    transform: translateX(3px);
  }
  .topic:hover {
    transform: translateY(-3px);
  }
  @supports (height: 1cqh) {
    .bubble {
      top: 100%;
      animation: bubble-rise var(--time, 25s) linear infinite;
      animation-delay: calc(var(--time, 25s) * var(--start) * -1);
      will-change: transform;
    }
  }
  .ticker-track {
    animation: drift 75s linear infinite;
  }
  .ticker-row.reverse .ticker-track {
    animation-direction: reverse;
    animation-duration: 90s;
  }
  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }
  /* Revealing (site.js marks what's below the fold .pending, then .in once it's on screen). */
  .js [data-reveal] {
    transition:
      opacity 0.8s var(--ease),
      translate 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].pending {
    opacity: 0;
    translate: 0 26px;
  }
  .timeline li.done::before {
    transition: transform 1.1s var(--ease) 0.4s;
  }
  .js .timeline.pending li.done::before {
    transform: scale(0);
  }
  /* "Not given yet": "Free", then "None", each struck out, before it settles; every 10 seconds. */
  .in .v-free {
    animation: v-free 10s var(--ease) infinite;
  }
  .in .v-free::after {
    animation: v-free-strike 10s var(--ease) infinite;
  }
  .in .v-none {
    animation: v-none 10s var(--ease) infinite;
  }
  .in .v-none::after {
    animation: v-none-strike 10s var(--ease) infinite;
  }
  .in .v-ok {
    animation: v-ok 10s var(--ease) infinite;
  }
  .flow i {
    animation: travel 2.4s linear infinite;
  }
  .flow i:nth-child(2) {
    animation-delay: 0.8s;
  }
  .flow i:nth-child(3) {
    animation-delay: 1.6s;
  }
  .flow {
    animation: flow-gate 10s var(--ease) infinite;
  }
  .switch {
    animation: switch-bg 10s var(--ease) infinite;
  }
  .knob {
    animation: switch-knob 10s var(--ease) infinite;
  }
  .access-on {
    animation: access-on 10s var(--ease) infinite;
  }
  .access-off {
    animation: access-off 10s var(--ease) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .motion {
    display: none;
  }
  .ticker {
    mask-image: none;
  }
  .ticker-track {
    width: auto;
    justify-content: center;
  }
  .ticker-group {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 20px;
  }
  .ticker-group + .ticker-group {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 639px) {
  .ticker-row.reverse {
    display: none;
  }
}

/* "Pause motion" (site.js): what drifts stops where it is; what loops goes back to its still
   picture, the one shown without motion. */
.paused .bubble,
.paused .ticker-track {
  animation-play-state: paused !important;
}
.paused .dots i,
.paused .demo-ask,
.paused .demo-info,
.paused .chat .is-new,
.paused .handover,
.paused .handover > svg,
.paused .pill .dot,
.paused .hero .pill,
.paused .hero h1 .line,
.paused .hero .lede,
.paused .hero .actions,
.paused .stage,
.paused .motion,
.paused .swash path,
.paused .flow,
.paused .flow i,
.paused .switch,
.paused .knob,
.paused .access-on,
.paused .access-off,
.paused .v,
.paused .v::after {
  animation: none !important;
}
.paused .swash path {
  stroke-dashoffset: 0;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0.6);
  }
  75%,
  100% {
    box-shadow: 0 0 0 9px rgb(255 255 255 / 0);
  }
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes ring {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: rotate(16deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  60% {
    transform: rotate(7deg);
  }
  80% {
    transform: rotate(-3deg);
  }
}
@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes bubble-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-100cqh - 140px));
  }
}
@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}
@keyframes v-free {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  4%,
  14% {
    opacity: 1;
    transform: none;
  }
  18%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes v-free-strike {
  0%,
  8% {
    transform: scaleX(0);
  }
  13%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes v-none {
  0%,
  18% {
    opacity: 0;
    transform: translateY(6px);
  }
  22%,
  32% {
    opacity: 1;
    transform: none;
  }
  36%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes v-none-strike {
  0%,
  26% {
    transform: scaleX(0);
  }
  31%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes v-ok {
  0%,
  36% {
    opacity: 0;
    transform: translateY(6px);
  }
  41%,
  95% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes travel {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}
@keyframes flow-gate {
  0%,
  57% {
    opacity: 1;
  }
  60%,
  90% {
    opacity: 0;
  }
  94%,
  100% {
    opacity: 1;
  }
}
@keyframes switch-bg {
  0%,
  58% {
    background: var(--blue);
  }
  62%,
  88% {
    background: var(--off);
  }
  92%,
  100% {
    background: var(--blue);
  }
}
@keyframes switch-knob {
  0%,
  58% {
    transform: translateX(16px);
  }
  62%,
  88% {
    transform: translateX(0);
  }
  92%,
  100% {
    transform: translateX(16px);
  }
}
@keyframes access-on {
  0%,
  58% {
    opacity: 1;
  }
  61%,
  89% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}
@keyframes access-off {
  0%,
  58% {
    opacity: 0;
  }
  61%,
  89% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
  }
}

@media print {
  :root {
    --band: #fff;
    --navy: #fff;
    --tint: transparent;
    --on-blue: #000;
    --on-blue-soft: #333;
    --on-navy-soft: #333;
  }
  .js [data-reveal].pending {
    opacity: 1 !important;
    translate: none !important;
  }
  .bubbles,
  .ticker,
  .motion,
  .copy,
  .toc,
  .skip {
    display: none !important;
  }
  .site-footer .brand,
  .footer-links a {
    color: #000;
  }
}