/*
 * The website's own layout (see "The website" in docs/DESIGN.md): the top
 * bar, the hero, sections, cards, the plans and the footer. Colours come
 * only from tokens.css, and buttons, fields, notices, badges and tags are
 * the shared ones from base.css. Sides are logical, so a right-to-left
 * pack mirrors the page.
 */

/* The website reads a size up from the apps: 18px to the rem, so body
   text is about 17px and every heading and gap grows with it. */
html:has(> body.site) {
  font-size: 112.5%;
}

/* On a phone a little less, so the top bar keeps to one line. */
@media (max-width: 520px) {
  html:has(> body.site) {
    font-size: 106.25%;
  }
}

.site-actions .btn {
  white-space: nowrap;
}

.site {
  background: var(--bg);
}

.site-wrap {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* A reading column, from the left of the page like everything else. */
.site-narrow > * {
  max-width: 48rem;
}

/* Text reads from the left everywhere, and lines break evenly: headings
   balanced, paragraphs with no word left alone on the last line. */
.site h1,
.site h2,
.site h3 {
  text-wrap: balance;
}

.site p,
.site li,
.site dd {
  text-wrap: pretty;
}

/* ------------------------------------------------------------- top bar */

/* The top bar stays over the page, so a link to a part of a page (or a
   scroll to it) stops below the bar instead of under it. */
html {
  scroll-padding-block-start: 5.5rem;
}

.site-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}

.site-top-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--text);
  text-decoration: none;
}

.site-brand:hover {
  color: var(--text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-inline-start: auto;
}

.site-nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Light, Dark and Auto: icons only in the top bar, with their words in Menu. */
.site-theme-top button {
  padding-inline: 0.4375rem;
  min-height: 1.875rem;
}

.site-theme-top span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- hero */

.site-hero {
  position: relative;
  padding-block: 4.5rem 4rem;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(40rem 26rem at 8% -4rem, var(--site-glow-1), transparent 70%),
    radial-gradient(36rem 26rem at 85% 10%, var(--site-glow-2), transparent 70%),
    radial-gradient(30rem 20rem at 60% 110%, var(--site-glow-3), transparent 70%);
}

/* A faint grid of dots behind the hero, fading out away from its right. */
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--site-dots) 1px, transparent 1.3px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60rem 30rem at 75% 20%, var(--mix-dark), transparent 70%);
}

.site-badge {
  display: inline-flex;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* One sentence, one accent, wrapped to two even lines. */
.site-hero-title {
  max-width: 20ch;
  margin-block: 1.25rem 1rem;
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The headline's key words shade from the blue to the teal. */
.site-word-1 {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-hero-lead {
  max-width: 38rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.site-hero .site-buttons {
  margin-block: 2rem 0.75rem;
}

.site-hero-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.site-lead {
  max-width: 44rem;
  font-size: 1.0625rem;
  color: var(--muted);
}


.site-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 2rem 3rem;
}

.site-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block: 3.5rem 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.site-chip {
  padding: 0.75rem 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
}

.site-chip > :not(img) {
  margin-inline: 0.625rem;
}

.site-chip h2 {
  margin-block: 0.25rem 0.375rem;
}

.site-chip p:last-child {
  color: var(--muted);
  font-size: 0.875rem;
}

.site-chip-verb {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone);
}

.site-tone-1 {
  --tone: var(--accent);
}

.site-tone-2 {
  --tone: var(--muted);
}

.site-tone-3 {
  --tone: var(--accent-2);
}

/* ------------------------------------------------------------ sections */

.site-section {
  padding-block: 4rem;
}

/* Two sections on the same plain page read as one run: the second starts
   at the first one's bottom padding, not double it. */
.site-section:not(.site-band) + .site-section:not(.site-band) {
  padding-block-start: 0;
}

/* A head with nothing after it in its section (a page's own head) leaves
   the section's padding as the only gap below it. */
.site-head:last-child {
  margin-block-end: 0;
}

/* Bands take a soft wash in turn: blue to teal, teal to lavender,
   lavender to blue. */
.site-band {
  background: linear-gradient(160deg, var(--site-wash-blue), var(--site-wash-teal));
}

.site-band:nth-child(3n + 2 of .site-band) {
  background: linear-gradient(160deg, var(--site-wash-teal), var(--site-wash-lavender));
}

.site-band:nth-child(3n of .site-band) {
  background: linear-gradient(160deg, var(--site-wash-lavender), var(--site-wash-blue));
}

/* Cards with no tone of their own get a thin blue-to-teal top edge. */
.site-card:not(.site-tone-1, .site-tone-2, .site-tone-3),
.site-chip {
  border-block-start: 3px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
}

/* The small labels over headings sit in a tinted pill. */
.site .eyebrow {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--site-pill);
}

.site-head {
  max-width: 48rem;
  margin-block-end: 2.5rem;
}

.site-head h1,
.site-head h2 {
  margin-block: 0.5rem 0.75rem;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.site-head-start {
  text-align: start;
}

.site-head-start .site-lead {
  margin-inline: 0;
}

.site-grid {
  display: grid;
  gap: 1.25rem;
}

.site-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
}

.site-band .site-card {
  background-color: var(--surface);
}

.site-card.site-tone-1,
.site-card.site-tone-2,
.site-card.site-tone-3 {
  border-block-start: 3px solid var(--tone);
}

.site-card h2,
.site-card h3 {
  font-size: 1.125rem;
}

.site-card > p {
  color: var(--muted);
}

.site-card-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-fix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  border-block-start: 1px dashed var(--border);
  font-weight: 600;
  color: var(--text);
}

/* A list with a tick drawn in CSS before each line. */
/* ------------------------------------------------------- verification */

.site-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.site-points {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}

.site-points dt {
  font-weight: 700;
}

.site-points dd {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.site-cert {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow);
}

.site-cert-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.site-cert-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.site-cert-course {
  font-size: 1.25rem;
  font-weight: 700;
}

.site-cert-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
}

.site-cert-foot > span:last-child {
  display: flex;
  flex-direction: column;
}

.site-cert-qr {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-s);
  background:
    repeating-linear-gradient(90deg, var(--text) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(0deg, var(--surface) 0 4px, transparent 4px 9px);
  border: 4px solid var(--text);
}

.site-cert-link {
  font-family: var(--font-mono);
  color: var(--accent);
}

/* -------------------------------------------------------------- plans */

.site-plans:empty {
  display: none;
}

.site-plans {
  margin-block-end: 1.5rem;
}

/* ------------------------------------------------------------- add-ons */

.site-addons {
  margin-block-end: 1.5rem;
}

.site-addons .site-lead {
  margin-block-end: 1.75rem;
}

.site-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}

.site-addon {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--accent-2);
}

.site-addon h4 {
  font-size: 1.0625rem;
}

.site-addon-price {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.site-addon-text {
  flex: 1;
}

.site-addon-where {
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---------------------------------------------------------- calculator */

.site-calculator {
  margin-block-end: 1.5rem;
}

.site-calculator .site-lead {
  margin-block-end: 1.75rem;
}

.site-calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
}

.site-calc-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-calc-bill {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-calc-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-calc-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.375rem;
  border-block-end: 1px solid var(--border);
}

.site-calc-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-calc-total {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.site-calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- faq */

.site-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-faq details {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.site-faq summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.site-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.site-faq details p {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ verify */

/* The code form, then what a code we have shows. */
.site-check + .site-check {
  margin-block-start: 1.5rem;
}

.site-check:empty {
  display: none;
}

/* ------------------------------------------------------------ contact */

.site-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
}

.site-interests {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}

.site-interests legend {
  padding: 0;
  margin-block-end: 0.5rem;
  font-weight: 600;
}

/* Turnstile's widget: room kept for it, so the button doesn't jump when it loads. */
.site-turnstile {
  min-height: 4.0625rem;
}

/* The field people never see; bots fill it in. */
.site-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- footer */

/* The brand and its line, then Product, Resources and Legal as short
   columns of quiet links, and a bottom line with the copyright and the
   languages. */
.site-foot {
  padding-block: 3.5rem 2rem;
  border-block-start: 1px solid var(--border);
  font-size: 0.875rem;
}

.site-foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.site-foot-about {
  display: grid;
  gap: 0.75rem;
  max-width: 22rem;
}

.site-foot-about .hint {
  margin: 0;
}

.site-foot-title {
  margin: 0 0 0.875rem;
  color: var(--text);
  font-weight: 600;
}

.site-foot-col ul {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot-col a,
.site-languages a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot-col a:hover,
.site-languages a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}

.site-foot-base .hint {
  margin: 0;
}

.site-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.site-languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-languages a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 760px) {
  .site-foot-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .site-foot-about {
    grid-column: 1 / -1;
  }
}

/* ------------------------- terms, DPA, privacy and technical deployment */

.site-legal,
.site-doc {
  display: grid;
  gap: 1rem;
}

.site-legal .site-head,
.site-doc .site-head {
  margin-block-end: 0.5rem;
}

.site-legal h2,
.site-doc h2 {
  margin-block: 1.5rem 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.site-legal h3,
.site-doc h3 {
  margin-block: 0.75rem 0;
  font-size: 1.0625rem;
}

.site-legal p,
.site-legal ul,
.site-legal ol,
.site-doc p,
.site-doc ul,
.site-doc ol {
  margin: 0;
}

.site-legal ul,
.site-legal ol,
.site-doc ul,
.site-doc ol {
  display: grid;
  gap: 0.5rem;
  padding-inline-start: 1.25rem;
}

/* The guide's head sits at the top of its column, and its contents box. */
.site-doc .site-head h2 {
  margin-block: 0;
}

.site-contents {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.site-doc .site-contents ul {
  gap: 0.25rem;
}

/* A card's link to its part of the guide sits at the card's foot. */
.site-card-link {
  margin-block-start: auto;
  font-weight: 600;
}

.site-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.site-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.site-table caption {
  padding: 0.75rem 1rem 0;
  color: var(--muted);
  text-align: start;
}

.site-table th,
.site-table td {
  padding: 0.625rem 1rem;
  border-block-end: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.site-table tbody tr:last-child > * {
  border-block-end: 0;
}

.site-table tbody th {
  font-weight: 600;
}

/* --------------------------------------------------------- section bar */

/* Every part of the home page, under the top bar; site.js marks the one in view. */

.site-chip h2 a {
  color: inherit;
  text-decoration: none;
}

.site-chip h2 a:hover {
  color: var(--tone);
}

/* ------------------------------------------------------------ the tour */

/*
 * The tour (see "The website" in docs/DESIGN.md): a stage where the visitor
 * picks who they are, then a narrator takes them through ten scenes, from
 * the whole system on one screen to the report at the end. Without scripts
 * each scene's slide is listed in turn; site.js adds .is-live and shows the
 * title screen, then one scene at a time. A scene's parts animate when it
 * is shown (a scene that was hidden starts its animations again), and
 * base.css stops them all for people who ask for less motion.
 */

/* The title screen keeps the switches, but not the stages or what only a scene needs. */

/* Without scripts: each scene's slide, one after another. */

/* The top of the stage: the four stages, who you are, and the switches. */

.game-you-tag,
.jw-you {
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
}

/* The title screen: who are you? */

/* A scene: the slide on one side, the set where the little people act on the other. */

/* A choice the visitor makes, which changes what the scene shows and says. */

/* A choice waiting to be made: the box lights up, the answers turn into solid buttons and pulse, and a hint says what to do. */

/* While the narrator reads, what the sentence is about lights up: a line of the slide, the question, or a prop. */

/* What the scene shows for the option picked; the first, until the visitor picks. */

/* The real screen: when the narrator comes to it, it takes the stage in front of the set. Clicking it opens it bigger. */

/* The stage is the player's control: clicking it pauses and plays the tour (see Players in docs/DESIGN.md). */

/* Over the real screen, the play sign shows above it. */

/* The set: a speech bubble on top, the props in the middle, the people along the bottom. */

/* Two people talk in turn: the first says their line, then the second answers. */

/* "You": the role the chosen character plays, above their head. */
.jw-you {
  position: absolute;
  inset-block-end: calc(100% + 0.25rem);
  display: none;
  white-space: nowrap;
}

/* Scene 0: the whole system on one screen. */
.gp-map {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: 100%;
}

.gp-account {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
  animation: jp-pop 0.5s 0.2s both;
}

.gp-account::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  height: 1.25rem;
  background: var(--accent-line);
}

.gp-account small {
  font-size: 0.75rem;
  color: var(--muted);
}

.gp-pool {
  display: flex;
  width: 10rem;
  height: 0.625rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.gp-pool span {
  transform-origin: 0 50%;
  animation: jp-grow 0.6s both;
}

[dir="rtl"] .gp-pool span {
  transform-origin: 100% 50%;
}

.gp-pool span:nth-child(1) {
  flex: 8;
  background: var(--chart-1);
  animation-delay: 0.6s;
}

.gp-pool span:nth-child(2) {
  flex: 5;
  background: var(--chart-3);
  animation-delay: 0.9s;
}

.gp-pool span:nth-child(3) {
  flex: 2;
  background: var(--chart-5);
  animation-delay: 1.2s;
}

.gp-insts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.gp-inst {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--tone);
  font-size: 0.875rem;
  animation: jp-rise 0.45s 1.2s both;
}

.gp-inst:nth-child(1) { --tone: var(--chart-1); }
.gp-inst:nth-child(2) { --tone: var(--chart-3); animation-delay: 1.5s; }
.gp-inst:nth-child(3) { --tone: var(--chart-5); animation-delay: 1.8s; }

.gp-cads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.gp-cad {
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
}

.gp-cad {
  animation: jp-pop 0.35s 2.4s both;
}

.gp-cad-assign { animation-delay: 2.7s; }
.gp-cad-deliver { animation-delay: 3s; }

.gp-cad-create {
  --tone: var(--accent);
}

.gp-cad-assign {
  --tone: var(--text);
}

.gp-cad-deliver {
  --tone: var(--accent-2);
}

/* Scene 1: an instance, at its address, in its region, then in its brand. */
.gp-site {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(21rem, 100%);
}

.gp-browser {
  width: 100%;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: jp-pop 0.5s 0.2s both;
}

.gp-bar,
.walk-chrome {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
}

.gp-dots,
.walk-dots {
  flex: none;
  width: 2.25rem;
  height: 0.625rem;
  background:
    radial-gradient(circle at 0.3125rem 50%, var(--danger) 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 1.125rem 50%, var(--warn) 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 1.9375rem 50%, var(--ok) 0.25rem, transparent 0.27rem);
}

.gp-url,
.walk-address {
  flex: 1;
  min-width: 0;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: start;
}

.gp-url {
  animation: jp-type 1s 0.8s steps(22) both;
}

.gp-page {
  display: flex;
  gap: 0.875rem;
  min-height: 6rem;
  padding: 1rem;
  animation: jp-paint 0.6s 4.4s both;
}

.gp-logo {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--accent);
  animation: jp-pop 0.4s 4.6s both;
}

.gp-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4375rem;
}

.gp-lines span {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
}

.gp-lines span:nth-child(1) { width: 85%; }
.gp-lines span:nth-child(2) { width: 65%; }
.gp-lines span:nth-child(3) { width: 75%; }

.gp-page .gp-lines span:nth-child(1) {
  animation: jp-brand 0.6s 4.6s both;
}

.gp-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gp-tag {
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  animation: jp-rise 0.4s 1.9s both;
}

.gp-tag + .gp-tag {
  animation-delay: 2.3s;
}

/* Scene 2: build it from pieces, or bring the zip. */
.gp-composer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  width: min(22rem, 100%);
  padding: 0.75rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.gp-tile {
  padding: 0.75rem 0.25rem 0.5rem;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  border-block-start: 3px solid var(--tone);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  animation: jp-drop 0.5s both;
}

.gp-tile-1 { --tone: var(--chart-1); animation-delay: 0.6s; }
.gp-tile-2 { --tone: var(--chart-2); animation-delay: 1.1s; }
.gp-tile-3 { --tone: var(--chart-3); animation-delay: 1.6s; }
.gp-tile-4 { --tone: var(--chart-4); animation-delay: 2.1s; }

.gp-build {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0.375rem 1.125rem;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  animation: jp-press 0.6s 2.9s both;
}

.gp-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.gp-zip {
  position: relative;
  padding: 2.25rem 1.25rem 0.75rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  animation: jp-drop 0.6s 0.5s both;
}

.gp-zip::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: calc(50% - 0.25rem);
  width: 0.5rem;
  height: 1.25rem;
  background: repeating-linear-gradient(var(--muted) 0 0.1875rem, transparent 0.1875rem 0.375rem);
}

.gp-checked {
  animation: jp-pop 0.4s 1.8s both;
}

/* Scene 3: a draft, approved, onto the course store's shelf. */
.gp-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.gp-draft {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 10rem;
  padding: 0.875rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: jp-slide 0.5s 0.3s both;
}

.gp-draft .gp-lines {
  width: 100%;
}

.gp-stamp {
  position: absolute;
  inset-block-end: -0.75rem;
  inset-inline-end: -1rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  border: 2px solid var(--ok);
  background: var(--surface);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  rotate: -8deg;
  animation: jp-stamp 0.4s 2.4s both;
}

.gp-shelf {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  animation: jp-fade 0.4s 0.6s both;
}

.gp-books {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  padding-block-end: 0.25rem;
  border-block-end: 3px solid var(--border);
}

.gp-books span {
  width: 1.5rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  background: var(--chart-2);
}

.gp-books span:nth-child(2) {
  height: 2rem;
  background: var(--chart-4);
}

.gp-books .gp-new {
  background: var(--accent);
  animation: jp-fly 0.6s 3.2s both;
}

/* Scene 4: people come in, and fill seats; one leaves, and the seat is free. */
.gp-people {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.gp-source {
  animation: jp-fly 0.6s 0.4s both;
}

.gp-sheet {
  position: relative;
  padding: 0.5rem 0.75rem;
  padding-inline-start: 2.25rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.gp-sheet::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.625rem;
  top: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border-radius: 0.1875rem;
  border: 2px solid var(--ok);
  background:
    linear-gradient(var(--ok), var(--ok)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(var(--ok), var(--ok)) 0 50% / 100% 2px no-repeat;
}

/* A work account's badge. */
.gp-key {
  position: relative;
  width: 2.75rem;
  height: 3.25rem;
  border-radius: 0.375rem;
  border: 2px solid var(--chart-2);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.gp-key::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--chart-2);
}

.gp-key::after {
  content: "";
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline: 0.5rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--surface-3);
}

/* Two systems talking: a pair of arrows. */
.gp-api {
  position: relative;
  width: 4.5rem;
  height: 2.75rem;
  border-radius: var(--radius-s);
  border: 2px solid var(--chart-6);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.gp-api::before,
.gp-api::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.375rem);
  width: 0.75rem;
  height: 0.75rem;
  border: solid var(--chart-6);
  border-width: 0 0 3px 3px;
}

.gp-api::before {
  inset-inline-start: 0.875rem;
  rotate: 45deg;
}

.gp-api::after {
  inset-inline-end: 0.875rem;
  rotate: -135deg;
}

[dir="rtl"] .gp-api::before {
  rotate: -135deg;
}

[dir="rtl"] .gp-api::after {
  rotate: 45deg;
}

.gp-seats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.gp-seat-row {
  display: grid;
  grid-template-columns: repeat(10, 1.125rem);
  gap: 0.25rem;
}

.gp-seat-row span {
  height: 1.125rem;
  border-radius: 0.25rem;
  background: var(--surface-3);
  animation: jp-seat 0.3s both;
}

.gp-seat-row span:nth-child(1) { animation-delay: 1.2s; }
.gp-seat-row span:nth-child(2) { animation-delay: 1.35s; }
.gp-seat-row span:nth-child(3) { animation-delay: 1.5s; }
.gp-seat-row span:nth-child(4) { animation-delay: 1.65s; }
.gp-seat-row span:nth-child(5) { animation-delay: 1.8s; }
.gp-seat-row span:nth-child(6) { animation-delay: 1.95s; }
.gp-seat-row span:nth-child(7) { animation-delay: 2.1s; }
.gp-seat-row span:nth-child(8) { animation: jp-seat 0.3s 2.25s both, jp-unseat 0.5s 4.4s forwards; }
.gp-seat-row span:nth-child(n + 9) { animation: none; }

.gp-free {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ok);
  animation: jp-rise 0.4s 4.6s both;
}

/* Scene 5: groups, each with its own people; the manager sees only theirs. */
.gp-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(24rem, 100%);
}

.gp-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--tone);
  font-size: 0.75rem;
  animation: jp-rise 0.4s 0.3s both;
}

.gp-group-1 { --tone: var(--chart-1); animation: jp-rise 0.4s 0.3s both, jp-ring 0.5s 3s both; }
.gp-group-2 { --tone: var(--chart-3); animation: jp-rise 0.4s 0.6s both, jp-dim 0.5s 3s both; }
.gp-group-3 { --tone: var(--chart-5); animation: jp-rise 0.4s 0.9s both, jp-dim 0.5s 3s both; }

.gp-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gp-members span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 55%, var(--surface));
}

.gp-ends {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 700;
  animation: jp-pop 0.4s 4.2s both;
}

/* Scene 6: a course, given to groups, with a due date. */
.gp-assign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.gp-course {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
  animation: jp-pop 0.45s 0.3s both;
}

.gp-due,
.gp-yearly {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  animation: jp-pop 0.4s 2.6s both;
}

.gp-yearly {
  color: var(--ok);
  background: var(--ok-soft);
  animation-delay: 0.3s;
}

.gp-targets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gp-targets span {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  animation: jp-drop 0.5s 1.1s both;
}

.gp-targets span:nth-child(2) { animation-delay: 1.4s; }
.gp-targets span:nth-child(3) { animation-delay: 1.7s; }

/* Scene 7: a phone, a code by email, then their learning. */
.gp-phone {
  width: 9.5rem;
  height: 12.5rem;
  padding: 0.625rem 0.5rem;
  border-radius: 1.5rem;
  background: var(--text);
  box-shadow: var(--shadow-l);
  animation: jp-rise 0.5s 0.2s both;
}

.gp-screen {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 0.625rem 0.5rem;
  border-radius: 1rem;
  background: var(--surface);
  overflow: hidden;
}

.gp-mail {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--accent-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  animation: jp-mail 0.7s 0.9s both;
}

.gp-learning {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
  animation: jp-rise 0.5s 2.6s both;
}

.gp-row {
  height: 1.25rem;
  border-radius: 0.375rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.gp-progress {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.gp-progress span {
  display: block;
  width: 60%;
  height: 100%;
  background: var(--ok);
  transform-origin: 0 50%;
  animation: jp-grow 1.2s 3.2s both;
}

[dir="rtl"] .gp-progress span {
  transform-origin: 100% 50%;
}

/* Scene 8: a certificate, then the check that it's genuine. */
.gp-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.gp-paper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  width: 14rem;
  padding: 1rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow);
  animation: jp-rise 0.5s 0.3s both;
}

.gp-paper .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.gp-qr {
  width: 2.75rem;
  height: 2.75rem;
  border-width: 3px;
}

.gp-check {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.8125rem;
  font-weight: 700;
  animation: jp-pop 0.4s 2.8s both;
}

/* Scene 9: who's done, in progress and overdue. */
.gp-chart {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  padding-block-end: 0.25rem;
  border-block-end: 2px solid var(--border);
}

.gp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.gp-col > span {
  width: 3rem;
  border-radius: 0.375rem 0.375rem 0 0;
  transform-origin: 50% 100%;
  animation: jp-column 0.8s both;
}

.gp-col small {
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.gp-col-done > span {
  height: 7rem;
  background: var(--ok);
  animation-delay: 0.4s;
}

.gp-col-prog > span {
  height: 3.5rem;
  background: var(--chart-1);
  animation-delay: 0.7s;
}

.gp-col-over > span {
  height: 1.5rem;
  background: var(--danger);
  animation-delay: 1s;
}

/* The end: everyone waves. */

/* The narrator's subtitles: the line being read, in a bar under the scene. */

/* Back, the scenes, and Next. */

/* A pause sign while playing, a play triangle while paused. */

/* Paused, Play is the thing to press. */

/* The people. A little person: a head with hair and eyes, a body in their role's colour, and legs. */

.jw {
  --tone: var(--chart-1);
  --skin: var(--figure-skin);
  --hair: var(--figure-hair-1);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.jw-owner { --tone: var(--chart-1); --hair: var(--figure-hair-5); }
.jw-admin { --tone: var(--chart-2); --hair: var(--figure-hair-4); }
.jw-author { --tone: var(--chart-3); --hair: var(--figure-hair-3); }
.jw-manager { --tone: var(--chart-4); --hair: var(--figure-hair-5); }
.jw-learner { --tone: var(--chart-5); --hair: var(--figure-hair-3); }
.jw-contractor { --tone: var(--chart-6); --hair: var(--figure-hair-1); }

.jw-c-designer { --tone: var(--chart-3); --hair: var(--figure-hair-4); }
.jw-c-agency { --tone: var(--chart-1); --hair: var(--figure-hair-3); }
.jw-c-seller { --tone: var(--chart-2); --hair: var(--figure-hair-5); }
.jw-c-franchise { --tone: var(--chart-4); --hair: var(--figure-hair-2); }
.jw-c-compliance { --tone: var(--chart-5); --hair: var(--figure-hair-4); }
.jw-c-author { --tone: var(--chart-6); --hair: var(--figure-hair-1); }

.jw-figure {
  position: relative;
  display: block;
  flex: none;
  width: 3rem;
  height: 4.5rem;
  transform-origin: 50% 100%;
}

.jw-head {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--skin);
  z-index: 1;
}

/* Hair, as a cap over the top of the head. */
.jw-head::before {
  content: "";
  position: absolute;
  inset: -0.125rem -0.0625rem auto;
  height: 0.95rem;
  border-radius: 1rem 1rem 0.375rem 0.375rem;
  background: var(--hair);
}

/* Two eyes, which blink now and then. */
.jw-head::after {
  content: "";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 0.5rem;
  width: 1rem;
  height: 0.25rem;
  background:
    radial-gradient(circle at 0.125rem 50%, var(--figure-hair-1) 0.125rem, transparent 0.14rem),
    radial-gradient(circle at 0.875rem 50%, var(--figure-hair-1) 0.125rem, transparent 0.14rem);
  animation: jw-blink 4s infinite;
}

.jw-body {
  position: absolute;
  inset-block-start: 1.75rem;
  inset-inline-start: 0.25rem;
  width: 2.5rem;
  height: 2rem;
  border-radius: 1.25rem 1.25rem 0.5rem 0.5rem;
  background: var(--tone);
}

/* Legs. */
.jw-body::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0.625rem;
  width: 1.25rem;
  height: 0.75rem;
  background:
    linear-gradient(var(--text), var(--text)) 0 0 / 0.375rem 100% no-repeat,
    linear-gradient(var(--text), var(--text)) 100% 0 / 0.375rem 100% no-repeat;
}

/* Hairstyles, one for each role, so the people differ by shape rather than colour.
   Long hair, a bun, a quiff and a ponytail sit behind the head, on the figure. */
.jw-figure::before {
  content: "";
  position: absolute;
  background: var(--hair);
}

.jw-owner .jw-figure::before,
.jw-c-agency .jw-figure::before {
  content: none;
}

.jw-admin .jw-figure::before,
.jw-c-designer .jw-figure::before,
.jw-c-seller .jw-figure::before {
  inset-block-start: -0.0625rem;
  inset-inline-start: 0.3125rem;
  width: 2.375rem;
  height: 2.75rem;
  border-radius: 1.2rem 1.2rem 0.5rem 0.5rem;
}

.jw-manager .jw-figure::before,
.jw-c-franchise .jw-figure::before {
  inset-block-start: -0.5rem;
  inset-inline-start: 1.0625rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
}

.jw-learner .jw-figure::before {
  inset-block-start: -0.3125rem;
  inset-inline-start: 0.875rem;
  width: 1.25rem;
  height: 0.75rem;
  border-radius: 1rem 1rem 0.25rem 0.25rem;
  rotate: -12deg;
}

.jw-contractor .jw-figure::before,
.jw-c-compliance .jw-figure::before {
  inset-block-start: 0.5rem;
  inset-inline-start: 2.25rem;
  width: 0.625rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  rotate: -14deg;
}

/* A side parting: the cap sweeps lower on one side. */
.jw-author .jw-head::before,
.jw-c-author .jw-head::before {
  height: 1.125rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
}

/* Long hair frames the face. */
.jw-admin .jw-head::before,
.jw-c-designer .jw-head::before,
.jw-c-seller .jw-head::before {
  height: 1rem;
  border-radius: 1rem 1rem 0.25rem 0.25rem;
}

.jw-name {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------- how it works */

.how-more {
  margin-block-start: auto;
  font-weight: 700;
}

/* ------------------------------------------------- create, assign, deliver */

.stage-head {
  max-width: 50rem;
}

.stage-tag {
  color: var(--tone);
}

.stage-map {
  margin: 0 0 2rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--tone);
}

.site-band .stage-map {
  background: var(--bg);
}

.stage-map figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-block-end: 1.25rem;
}

/* The small label before a map's title, as an eyebrow in the tone. */
.stage-kicker {
  color: var(--tone);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stage-map figcaption strong {
  font-size: 1.0625rem;
}

.stage-sub {
  margin-block: 3rem 1.25rem;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* A flow: boxes in a row, with an arrow drawn before each but the first. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.flow > * {
  position: relative;
}

.flow > * + *::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.375rem);
  inset-inline-end: calc(100% + 0.6875rem);
  width: 0.625rem;
  height: 0.625rem;
  border: solid var(--muted);
  border-width: 2px 2px 0 0;
  rotate: 45deg;
}

[dir="rtl"] .flow > * + *::before {
  rotate: -135deg;
}

.flow-in {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.flow-box {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.875rem;
  font-weight: 650;
}

.flow-box small {
  font-weight: 500;
  color: var(--muted);
}

.flow-accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.flow-warn {
  border-color: transparent;
  background: var(--warn-soft);
  color: var(--warn);
}

.flow-ok {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
}

.flow-strong {
  border-color: transparent;
  background: var(--text);
  color: var(--bg);
}

.stage-points .site-card h3 {
  font-size: 1.0625rem;
}

/* The real screens: a framed card each, its number, title and words above its screen, the screens lined up along the bottom. */
.stage-shots {
  counter-reset: shot;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shot-row {
  counter-increment: shot;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.shot-row .shot-link {
  margin-block-start: auto;
}

.shot-text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.shot-text p {
  grid-column: 1 / -1;
}

.shot-num::before {
  content: counter(shot);
}

.shot-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.shot-text h4 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.shot-text p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.shot {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

.shot-link {
  display: block;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: translate 0.15s, box-shadow 0.15s;
}

.shot-link:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow);
}

.shot img,
.shot-row img {
  display: block;
  width: 100%;
  height: auto;
}

/* A single real screen: what it shows, above it, as plain as a heading. */
.shot figcaption {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--text);
}

.shot-kicker {
  display: block;
  margin-block-end: 0.125rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.stage-verify {
  margin-block-start: 3.5rem;
  padding-block-start: 3rem;
  border-block-start: 1px solid var(--border);
}

.stage-verify-title {
  margin-block: 0.5rem 0.75rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.2;
}

/* ------------------------------------------------------- build a course */

.build-section {
  background:
    radial-gradient(48rem 24rem at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
  border-block: 1px solid var(--accent-line);
}

.build-head h2 {
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
}

.walk {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
}

.walk-frame {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.walk-address {
  max-width: 18rem;
  margin-inline: auto;
  text-align: center;
  color: var(--muted);
}

.walk-shots {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.walk-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
}

.walk-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--focus, 50% 50%);
}

.walk:not(.is-live) .walk-shot:first-child,
.walk-shot.is-on {
  opacity: 1;
}

/* Each screen zooms slowly towards the part the step is about. */
.walk-shot.is-on img {
  animation: walk-zoom 12s ease-out both;
}

.walk-shot-1 { --focus: 62% 42%; }
.walk-shot-2 { --focus: 52% 45%; }
.walk-shot-3 { --focus: 84% 38%; }
.walk-shot-4 { --focus: 62% 42%; }
.walk-shot-5 { --focus: 48% 42%; }
.walk-shot-6 { --focus: 40% 45%; }
.walk-shot-7 { --focus: 60% 25%; }

.walk-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: walk;
}

.walk-steps li {
  counter-increment: walk;
}

.walk-step {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.walk-step:hover {
  background: var(--surface);
}

.walk-num {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.walk-num::after {
  content: " " counter(walk);
}

.walk-text {
  font-size: 0.875rem;
  color: var(--muted);
}

.walk.is-live .walk-step:not([aria-current]) .walk-text {
  display: none;
}

.walk-step[aria-current] {
  border-color: var(--accent-line);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.walk-step[aria-current] .walk-num {
  color: var(--accent);
}

/* The step to click next glows, so the visitor knows where to go on. */
.walk-step.is-next {
  border-color: var(--accent);
  background: var(--accent-softer);
  animation: walk-glow 1.8s ease-in-out infinite;
}

.walk-step.is-next .walk-num {
  color: var(--accent);
}

@keyframes walk-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0.875rem 0.1875rem color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* Clicking the screen goes to the next step, as its label says; from the last, back to the first. */
.walk-onward .walk-next-label,
.walk-onward .walk-first-label {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  box-shadow: var(--shadow);
}

.walk-onward .walk-next-label::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  rotate: 45deg;
}

[dir="rtl"] .walk-onward .walk-next-label::after {
  rotate: -45deg;
}

.walk-onward:not(.is-last) .walk-first-label,
.walk-onward.is-last .walk-next-label {
  display: none;
}

.walk-onward:hover :is(.walk-next-label, .walk-first-label) {
  background: var(--accent-hover);
}

/* A control that covers its screen: the walkthrough's Next step, and the play sign the tour's stage shares. */
.walk-toggle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.walk-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.walk-toggle-icon {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  box-shadow: var(--shadow-l);
  opacity: 0;
  scale: 0.85;
  transition: opacity 0.2s, scale 0.2s;
}

.walk-toggle-icon::before {
  content: "";
  position: absolute;
  inset: 1.5rem 1.375rem 1.5rem 1.75rem;
  background: var(--on-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

[dir="rtl"] .walk-toggle-icon::before {
  inset: 1.5rem 1.75rem 1.5rem 1.375rem;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

:is(.walk-toggle, .game-toggle)[aria-pressed="true"] .walk-toggle-icon::before {
  inset: 1.5rem;
  clip-path: none;
  background:
    linear-gradient(var(--on-accent), var(--on-accent)) 0 0 / 0.5rem 100% no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) 100% 0 / 0.5rem 100% no-repeat;
}

:is(.walk-toggle, .game-toggle)[aria-pressed="false"] .walk-toggle-icon,
:is(.walk-toggle, .game-toggle):hover .walk-toggle-icon,
:is(.walk-toggle, .game-toggle):focus-visible .walk-toggle-icon {
  opacity: 1;
  scale: 1;
}

/* Every screenshot on the page opens bigger, in front of the page. */
.shot-link {
  cursor: zoom-in;
}

.shot-zoom {
  width: fit-content;
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  overflow: hidden;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-l);
}

.shot-zoom::backdrop {
  background: var(--scrim);
}

.shot-zoom img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 7rem);
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  cursor: zoom-out;
}

/* A big X in the corner of each screenshot dialog, as well as the Close button. */
.shot-x {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  margin: 0;
}

.shot-x button {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--text) 82%, transparent);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.shot-x button::before,
.shot-x button::after {
  content: "";
  position: absolute;
  inset: calc(50% - 1.5px) 0.875rem auto;
  height: 3px;
  border-radius: 2px;
  background: var(--surface);
  rotate: 45deg;
}

.shot-x button::after {
  rotate: -45deg;
}

.shot-x button:hover {
  background: var(--text);
}

.shot-x button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.game-shot,
.shot-zoom {
  position: fixed;
}

.shot-zoom form:not(.shot-x) {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 0.75rem;
}

.build-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-end: 1.25rem;
}

.build-safe {
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--accent-line);
}

.build-safe h3 {
  margin-block-end: 1.25rem;
}

.build-safe-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: safe;
}

.build-safe-list li {
  position: relative;
  padding-inline-start: 2.25rem;
  counter-increment: safe;
  color: var(--muted);
}

.build-safe-list li::before {
  content: counter(safe);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.build-more {
  margin-block: 1.5rem 0;
  padding-block-start: 1rem;
  border-block-start: 1px dashed var(--border);
  color: var(--muted);
}

.build-more strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- roles */

.role-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.role-card dl {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.role-card dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.role-card dd {
  margin: 0 0 0.625rem;
}

.role-training {
  margin-block-start: 1.75rem;
}

/* ------------------------------------------------------------ questions */

.faq-groups {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  width: min(52rem, 100%);
}

.faq-group h3 {
  margin-block-end: 0.875rem;
  font-size: 1.125rem;
}

.site-band .site-faq details {
  background: var(--bg);
}

/* ------------------------------------------------------- every feature */

.feature-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.feature-find {
  flex: 1 1 18rem;
  max-width: 28rem;
}

.feature-find .hint {
  margin: 0;
}

.feature-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-tools,
.feature-groups,
.feature-none {
  max-width: 52rem;
}

/* One column of groups, each closed to its title and the sentence saying what it covers. */
.feature-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
}

.feature-group {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.feature-group summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1rem;
  padding-inline: 1.25rem 3.5rem;
  list-style: none;
  cursor: pointer;
}

.feature-group summary::-webkit-details-marker {
  display: none;
}

.feature-group summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.375rem;
  top: 1.375rem;
  width: 0.625rem;
  height: 0.625rem;
  border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted);
  rotate: 45deg;
  transition: rotate 0.2s;
}

.feature-group[open] summary::after {
  rotate: 225deg;
  top: 1.625rem;
}

.feature-group summary:hover .feature-title {
  color: var(--accent);
}

.feature-title {
  font-size: 1.0625rem;
  font-weight: 800;
}

.feature-sum {
  font-size: 0.9375rem;
  color: var(--muted);
}

.feature-group[open] {
  border-color: var(--accent-line);
}

.feature-group summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.feature-group dl {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0 1.25rem 1.25rem;
}

.feature dt {
  font-weight: 700;
}

.feature dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.feature-none {
  text-align: center;
  color: var(--muted);
}

/* --------------------------------------------------------- animations */

@keyframes jw-enter {
  from { opacity: 0; translate: calc(var(--dir, 1) * -3rem) 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes jw-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.1875rem; }
}

@keyframes jw-wave {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -6deg; }
  75% { rotate: 6deg; }
}

@keyframes jw-blink {
  0%, 92%, 100% { scale: 1 1; }
  95% { scale: 1 0.1; }
}

@keyframes jp-say {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}

@keyframes jp-say-brief {
  0% { opacity: 0; scale: 0.6; }
  15%, 85% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 0.95; }
}

@keyframes jp-pop {
  from { opacity: 0; scale: 0.6; }
  70% { opacity: 1; scale: 1.06; }
  to { opacity: 1; scale: 1; }
}

@keyframes jp-fly {
  from { opacity: 0; translate: calc(var(--dir, 1) * -2.5rem) 0.75rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes jp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jp-rise {
  from { opacity: 0; translate: 0 1rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes jp-slide {
  from { opacity: 0; translate: calc(var(--dir, 1) * -1.5rem) 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes jp-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes jp-mail {
  from { opacity: 0; translate: calc(var(--dir, 1) * -4rem) -2.5rem; rotate: -20deg; }
  60% { opacity: 1; translate: 0.25rem 0; rotate: 4deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes jp-drop {
  from { opacity: 0; translate: 0 -3rem; }
  60% { opacity: 1; translate: 0 0.25rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes jp-press {
  from { opacity: 0; scale: 0.6; }
  40% { opacity: 1; scale: 1; }
  70% { scale: 0.9; }
  to { opacity: 1; scale: 1; }
}

@keyframes jp-stamp {
  from { opacity: 0; scale: 2.2; }
  to { opacity: 1; scale: 1; }
}

@keyframes jp-grow {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes jp-column {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes jp-seat {
  from { background: var(--surface-3); }
  to { background: var(--accent); }
}

@keyframes jp-unseat {
  0% { background: var(--accent); scale: 1; }
  50% { scale: 1.3; }
  100% { background: var(--ok-soft); scale: 1; box-shadow: inset 0 0 0 2px var(--ok); }
}

@keyframes jp-ring {
  to { box-shadow: 0 0 0 3px var(--chart-4); }
}

@keyframes jp-dim {
  to { opacity: 0.4; }
}

@keyframes jp-paint {
  from { background: var(--surface); }
  to { background: var(--accent-softer); }
}

@keyframes jp-brand {
  from { background: var(--surface-3); }
  to { background: var(--accent); }
}

@keyframes jp-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to { box-shadow: 0 0 0 0.625rem transparent; }
}

@keyframes walk-zoom {
  from { scale: 1; }
  to { scale: 1.12; }
}

/* ------------------------------------------------------ narrow screens */

@media (max-width: 960px) {
  .site-actions {
    margin-inline-start: auto;
  }

  .site-grid-3,
  .site-chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-split {
    grid-template-columns: minmax(0, 1fr);
  }

  

  /* The set comes first, so the scene is seen before it is read. */
  

  

  

  

  .walk {
    grid-template-columns: minmax(0, 1fr);
  }

  .walk-steps {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.25rem;
  }

  .walk-steps li {
    flex: 0 0 min(16rem, 80%);
    scroll-snap-align: start;
  }

  .walk.is-live .walk-step:not([aria-current]) .walk-text {
    display: block;
  }

  .build-safe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-shots {
    grid-template-columns: minmax(0, 1fr);
  }

  .shot-row {
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .site-wrap {
    padding-inline: 1rem;
  }

  .site-grid-2,
  .site-interests,
  .build-grid,
  .build-safe-list,
  .game-chars {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-hero {
    padding-block: 3rem 2.5rem;
  }

  .site-section {
    padding-block: 3rem;
  }

  

  

  

  

  

  

  

  

  .gp-insts {
    gap: 0.375rem;
  }

  .gp-seat-row {
    grid-template-columns: repeat(10, 0.875rem);
  }

  .gp-seat-row span {
    height: 0.875rem;
  }

  /* On a phone the subtitles and the buttons stay at the bottom of the screen while the stage is on it. */
  

  

  

  

  

  

  

  

  .flow {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }

  .flow > * + *::before {
    top: -1.25rem;
    inset-inline-end: calc(50% - 0.3125rem);
    rotate: 135deg;
  }

  [dir="rtl"] .flow > * + *::before {
    rotate: 135deg;
  }

  .flow-box {
    align-items: center;
    text-align: center;
  }

  .stage-map {
    padding: 1.25rem 1rem;
  }
}

/* ----------------------------------------- one card in the page's middle */

/* Runs on TrioLMS and For the technical people: one ticked list. */
.site-narrow-card {
  max-width: 46rem;
}

/* Under the map: who runs each site. */
.how-who {
  margin-block: 2.5rem 2rem;
}

/* The steps on For agencies, and How billing works on Pricing. */
.site-steps {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding-inline-start: 1.5rem;
}

.site-billing {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Who it's for: three readers as tabs, each panel a run of sections. */
.who-tabs {
  justify-content: flex-start;
  margin-block: 0;
}

#top:has(+ .site-who) {
  padding-block-end: 1.5rem;
}

.who-panel > .site-section:first-child {
  padding-block-start: 2.5rem;
}

.who-tabs .tab {
  font-size: 1rem;
  padding-inline: 1.125rem;
}

@media (max-width: 600px) {
  .who-tabs .tab {
    font-size: 0.9375rem;
    padding-inline: 0.625rem;
  }
}

.who-panel .site-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.who-panel .site-head h3 {
  margin-block: 0.25rem 0.5rem;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  line-height: 1.2;
}

.who-panel .site-card h4 {
  margin-block: 0 0.5rem;
  font-size: 1.125rem;
}

/* Who it's for: one real screen under a tab's steps or set-up. */
.who-shot {
  max-width: 46rem;
  margin: 2rem auto 0;
}

.who-shot figcaption {
  margin-block-start: 0.625rem;
  text-align: center;
}

.who-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pricing: how the bill is built, from the account and what is added to it. */
.price-map {
  max-width: 64rem;
}

.price-map .flow-box small {
  font-weight: 400;
  color: inherit;
  opacity: 0.8;
}

.home-compare-label {
  margin: 1rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.home-compare-with {
  color: var(--accent);
}

.price-map-included {
  margin: 1rem 0 0;
  text-align: center;
}

/* A price worked out from the price list, such as "Your first training site
   is $85.60 a month", shown once the prices have loaded. */
.site-price-from {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.site-price-line {
  margin-top: 0.75rem;
}

/* ------------------------------------------- how it works: the system map */
/* You and your account at the top, its seat pool shared between three
   sites, each a small browser window with who runs it, its people, the
   three steps and how many have finished. Drawn in CSS from the tokens. */

.how-map {
  margin: 0 0 2.5rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--chart-1) 12%, transparent), transparent 38%),
    radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--chart-5) 12%, transparent), transparent 42%),
    radial-gradient(circle at 60% 55%, color-mix(in srgb, var(--chart-3) 7%, transparent), transparent 40%),
    var(--surface);
  box-shadow: var(--shadow-s);
}

.site-band .how-map {
  background-color: var(--bg);
}

.how-top {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25rem;
}

.how-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-block-end: 0.5rem;
}

.how-account {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(26rem, 100%);
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.how-account-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
}

.how-account-head strong {
  font-size: 1.125rem;
}

.how-account-head span {
  font-size: 0.8125rem;
  color: var(--muted);
}

.how-pool {
  display: flex;
  gap: 3px;
  height: 0.875rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.how-pool span {
  transform-origin: 0 50%;
  animation: jp-grow 0.7s both;
}

[dir="rtl"] .how-pool span {
  transform-origin: 100% 50%;
}

/* 50, 80 and 20 of the 150 seats. */
.how-pool-1 { flex: 50; background: var(--chart-1); animation-delay: 0.2s; }
.how-pool-2 { flex: 80; background: var(--chart-3); animation-delay: 0.45s; }
.how-pool-3 { flex: 20; background: var(--chart-5); animation-delay: 0.7s; }

.how-pool-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
}

.how-pool-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.how-pool-key span::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 3px;
  background: var(--tone);
}

.how-key-1, .how-site-1 { --tone: var(--chart-1); }
.how-key-2, .how-site-2 { --tone: var(--chart-3); }
.how-key-3, .how-site-3 { --tone: var(--chart-5); }

/* The line down from the account, and the label on it. */
.how-label {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
  padding-block: 1.5rem 0;
}

.how-label::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  background: var(--accent-line);
}

.how-label span {
  position: relative;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The three sites, hanging from one rail. */
.how-sites {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
}

.how-sites::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc((100% - 2.5rem) / 6);
  height: 2px;
  background: var(--accent-line);
}

.how-site {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: jp-rise 0.5s both;
}

.how-site-2 { animation-delay: 0.15s; }
.how-site-3 { animation-delay: 0.3s; }

.how-site::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  height: 1.5rem;
  background: var(--tone);
}

.how-chrome {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
}

.how-dots {
  flex: none;
  width: 2.25rem;
  height: 0.5rem;
  background:
    radial-gradient(circle at 0.25rem 50%, var(--tone) 0.22rem, transparent 0.25rem),
    radial-gradient(circle at 1.125rem 50%, var(--surface-3) 0.22rem, transparent 0.25rem),
    radial-gradient(circle at 2rem 50%, var(--surface-3) 0.22rem, transparent 0.25rem);
}

.how-addr {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: ltr;
  unicode-bidi: plaintext;
}

.how-site-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.125rem 1.125rem;
}

.how-site-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

.how-site-name strong {
  font-size: 1.0625rem;
}

.how-seats {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  color: var(--tone);
  font-size: 0.75rem;
  font-weight: 750;
}

.how-run {
  margin: -0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.how-people {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem 0.5rem;
  border-radius: var(--radius-s);
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--tone) 10%, transparent));
  border-block-end: 2px solid color-mix(in srgb, var(--tone) 30%, var(--border));
}

.how-crowd {
  display: flex;
  align-items: flex-end;
  margin-inline-start: 0.5rem;
}

.how-crowd .jw + .jw {
  margin-inline-start: -0.25rem;
}

.jw-s .jw-figure {
  zoom: 0.68;
}

/* Create, Assign, Deliver: three chips with an arrow between. */
.how-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-flow li {
  position: relative;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--step);
  background: color-mix(in srgb, var(--step) 14%, var(--surface));
}

.how-flow li + li::before {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 0.21rem);
  inset-inline-end: calc(100% + 0.4rem);
  width: 0.375rem;
  height: 0.375rem;
  border: solid var(--muted);
  border-width: 2px 2px 0 0;
  rotate: 45deg;
}

[dir="rtl"] .how-flow li + li::before {
  rotate: -135deg;
}

.how-step-create { --step: var(--accent); }
.how-step-assign { --step: var(--text); }
.how-step-deliver { --step: var(--accent-2); }

.how-done {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 650;
}

.how-meter {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.how-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
  transform-origin: 0 50%;
  animation: jp-grow 0.9s 0.9s both;
}

[dir="rtl"] .how-meter span {
  transform-origin: 100% 50%;
}

/* 42 of 50, 61 of 80, and all 20. */
.how-site-1 .how-meter span { width: 84%; }
.how-site-2 .how-meter span { width: 76%; }
.how-site-3 .how-meter span { width: 100%; }

.how-results {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-weight: 700;
  color: var(--ok);
  text-align: center;
}

/* A tick. */
.how-results::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.8125rem;
  margin-block-start: -0.25rem;
  border: solid var(--ok);
  border-width: 0 3px 3px 0;
  rotate: 45deg;
}

.how-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-block-start: 1px dashed var(--border);
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--muted);
}

.how-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.how-legend .jw-figure {
  zoom: 0.5;
}

@media (max-width: 760px) {
  .how-top {
    flex-direction: column;
    align-items: center;
  }

  .how-you {
    flex-direction: row;
    padding: 0;
  }

  .how-sites {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .how-sites::before {
    display: none;
  }

  .how-site + .how-site::before {
    height: 1.5rem;
    background: var(--accent-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-pool span,
  .how-meter span,
  .how-site {
    animation: none;
  }
}

/* How it works: a small picture at the top of each step's card. */
.how-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  height: 8.25rem;
  margin: -0.25rem -0.25rem 1rem;
  padding: 1rem 0.75rem 0.75rem;
  border-radius: var(--radius-s);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--tone) 6%, var(--surface));
  border-block-end: 2px solid color-mix(in srgb, var(--tone) 30%, var(--border));
}

.art-files {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.art-files span,
.art-store {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.6875rem;
  font-weight: 750;
  box-shadow: var(--shadow-s);
}

.art-files span:nth-child(1) { color: var(--chart-1); }
.art-files span:nth-child(2) { color: var(--chart-3); }
.art-files span:nth-child(3) { color: var(--chart-5); }

.art-store {
  padding: 0.75rem 0.625rem;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.art-arrow {
  align-self: center;
  width: 1.25rem;
  height: 2px;
  background: var(--muted);
  position: relative;
}

.art-arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--muted);
  border-width: 2px 2px 0 0;
  rotate: 45deg;
}

[dir="rtl"] .art-arrow::after {
  rotate: -135deg;
}

.art-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  font-size: 0.75rem;
}

.art-faces {
  display: flex;
}

.art-faces span {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--chart-1);
}

.art-faces span + span { margin-inline-start: -0.375rem; }
.art-faces span:nth-child(2) { background: var(--chart-3); }
.art-faces span:nth-child(3) { background: var(--chart-5); }
.art-faces span:nth-child(4) { background: var(--chart-2); }

.art-due {
  align-self: flex-start;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 750;
  font-size: 0.6875rem;
}

.art-phone {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 6.5rem;
  padding: 0.75rem 0.5rem 0.625rem;
  border-radius: 0.875rem;
  border: 3px solid var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.6875rem;
  font-weight: 700;
}

.art-bar {
  height: 0.375rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.art-bar span {
  display: block;
  width: 75%;
  height: 100%;
  background: var(--accent-2);
}

.art-cert {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 16%, var(--surface));
  color: var(--ok);
}

.art-cert::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ok);
}

/* The guides: one column of plain reading, the problem first. */
.guide-wrap {
  max-width: 46rem;
}

.guide-crumbs {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 650;
}

.guide-head {
  margin-block-end: 2.5rem;
}

.guide-head h1 {
  margin-block: 0.5rem 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
}

.guide section {
  margin-block-start: 2.5rem;
}

.guide h2 {
  margin-block: 0 0.75rem;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.guide p,
.guide li {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.guide section > p {
  margin-block: 0 0.875rem;
}

.guide-tried,
.guide-limits {
  display: grid;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
}

.guide-tried li,
.guide-limits li {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  border-inline-start: 4px solid var(--muted);
}

.guide-limits li {
  border-inline-start-color: var(--warn);
}

.guide-steps {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.guide .who-shot {
  max-width: none;
}

.guide-more {
  margin-block-start: 2.5rem;
}

.guide-more h3 {
  margin-block: 0 0.5rem;
  font-size: 1rem;
}

.guide-more ul {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-list h2 {
  margin-block: 0 0.5rem;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.guide-list h2 a {
  color: inherit;
  text-decoration: none;
}

.guide-list h2 a:hover {
  text-decoration: underline;
}

/* The learners in a crowd differ from each other, in hair and its style. */
.how-crowd .jw:nth-child(1) { --hair: var(--figure-hair-5); }
.how-crowd .jw:nth-child(2) { --hair: var(--figure-hair-4); }
.how-crowd .jw:nth-child(3) { --hair: var(--figure-hair-2); }

.how-crowd .jw:nth-child(2) .jw-figure::before {
  inset-block-start: -0.0625rem;
  inset-inline-start: 0.3125rem;
  width: 2.375rem;
  height: 2.75rem;
  border-radius: 1.2rem 1.2rem 0.5rem 0.5rem;
  rotate: none;
}

.how-crowd .jw:nth-child(3) .jw-figure::before {
  content: none;
}

/* ------------------------------------------------ the guides' explainers */
/* Without and with TrioLMS, side by side: who, what moves, and where it
   ends up, drawn in CSS with the same people and site windows as the map. */

.ex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: min(64rem, 100vw - 2rem);
  margin: 0 0 1rem;
  margin-inline-start: calc((100% - min(64rem, 100vw - 2rem)) / 2);
}

.ex-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
}

.ex-without {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--muted) 5%, transparent) 12px 24px),
    var(--surface);
}

.ex-with {
  border: 2px solid var(--accent);
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--chart-1) 12%, transparent), transparent 45%),
    radial-gradient(circle at 95% 100%, color-mix(in srgb, var(--chart-3) 12%, transparent), transparent 45%),
    var(--surface);
  box-shadow: var(--shadow);
}

.ex-tag {
  align-self: flex-start;
  margin: 0;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--muted);
}

.ex-with .ex-tag {
  background: var(--accent);
  color: var(--surface);
}

.ex-row {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.ex-you {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.ex-arrow {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 2px;
  background: var(--muted);
}

.ex-with .ex-arrow {
  background: var(--accent);
}

.ex-arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border: solid currentcolor;
  border-width: 2px 2px 0 0;
  color: var(--muted);
  rotate: 45deg;
}

.ex-with .ex-arrow::after {
  color: var(--accent);
}

[dir="rtl"] .ex-arrow::after {
  rotate: -135deg;
}

/* A zip file, with a folded corner. */
.ex-file {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: 4.25rem;
  height: 5.25rem;
  padding: 0.375rem;
  border-radius: 6px 1.125rem 6px 6px;
  border: 1px solid var(--border);
  background:
    linear-gradient(225deg, var(--surface-3) 0.875rem, transparent 0.875rem),
    repeating-linear-gradient(var(--surface-3) 0 3px, transparent 3px 9px) 50% 0.75rem / 0.375rem 2.5rem no-repeat,
    var(--surface);
  box-shadow: var(--shadow-s);
}

.ex-file span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  direction: ltr;
}

.ex-copies {
  display: grid;
  flex: none;
}

.ex-copies .ex-file {
  grid-area: 1 / 1;
}

.ex-copies .ex-file:nth-child(1) { translate: -0.5rem -0.5rem; rotate: -6deg; }
.ex-copies .ex-file:nth-child(2) { translate: 0.5rem 0.25rem; rotate: 5deg; }

/* Where the course ends up without a site: faded people and a question. */
.ex-box {
  display: flex;
  flex: 0 1 11rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.75rem;
  border-radius: var(--radius-s);
  border: 2px dashed var(--border);
  text-align: center;
  font-size: 0.875rem;
}

.ex-box .jw {
  opacity: 0.55;
  filter: grayscale(0.6);
}

.ex-ask {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 750;
}

.ex-people {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.25rem;
}

/* A checkout, with a card going in. */
.ex-shop {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  font-size: 0.8125rem;
}

.ex-card {
  width: 3rem;
  height: 1.875rem;
  border-radius: 5px;
  background:
    linear-gradient(var(--text), var(--text)) 0 0.375rem / 100% 0.3125rem no-repeat,
    linear-gradient(135deg, var(--chart-1), var(--chart-5));
}

.ex-singles .jw {
  opacity: 1;
  filter: none;
}

/* A site window, as on the map, smaller. */
.ex-site {
  display: flex;
  flex: 0 1 15rem;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: start;
}

.ex-site .how-chrome {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  padding: 0.375rem 0.625rem;
}

.ex-site .how-addr {
  font-size: 0.6875rem;
}

.ex-site-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem 0.75rem;
}

.ex-site .how-site-name strong {
  font-size: 0.9375rem;
}

.ex-site .ex-people {
  justify-content: flex-start;
  padding-block-end: 0.375rem;
  border-block-end: 2px solid color-mix(in srgb, var(--tone) 30%, var(--border));
}

.ex-tone-1 { --tone: var(--chart-1); }
.ex-tone-3 { --tone: var(--chart-3); }
.ex-tone-5 { --tone: var(--chart-5); }

.ex-last {
  align-self: flex-start;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.6875rem;
  font-weight: 750;
}

.ex-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 650;
}

.ex-meter-90 span { width: 90%; }
.ex-meter-74 span { width: 74%; }

.ex-stack {
  display: flex;
  flex: 0 1 15rem;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.ex-stack .ex-site {
  flex: none;
}

.ex-stack .ex-site-body {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.5rem;
}

.ex-stack .ex-people {
  padding: 0;
  border: 0;
}

.ex-stack .how-crowd {
  display: none;
}

/* What each way gives you: crosses without, ticks with. */
.ex-notes {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0.875rem 0 0;
  border-block-start: 1px dashed var(--border);
  list-style: none;
}

.guide .ex-notes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.4;
}

.ex-notes li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.ex-bad li::before {
  background:
    linear-gradient(45deg, transparent 44%, var(--surface) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--surface) 44% 56%, transparent 56%),
    var(--danger);
  background-size: 60% 60%, 60% 60%, auto;
  background-position: center;
  background-repeat: no-repeat;
}

.ex-good li::before {
  background:
    linear-gradient(-45deg, transparent 46%, var(--surface) 46% 60%, transparent 60%) 62% 45% / 45% 70% no-repeat,
    linear-gradient(45deg, transparent 40%, var(--surface) 40% 58%, transparent 58%) 22% 72% / 35% 35% no-repeat,
    var(--ok);
}

@media (max-width: 760px) {
  .ex {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-inline-start: 0;
  }

  .ex-row {
    flex-direction: column;
  }

  .ex-arrow {
    width: 2px;
    height: 1.25rem;
  }

  .ex-arrow::after,
  [dir="rtl"] .ex-arrow::after {
    inset-inline-end: auto;
    inset-inline-start: -0.25rem;
    inset-block-start: auto;
    inset-block-end: 0;
    rotate: 135deg;
  }

  .ex-box,
  .ex-site,
  .ex-stack {
    flex: none;
    width: min(16rem, 100%);
  }
}

.guide .ex-tag {
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Persona stories: a portrait beside an example told as before, with TrioLMS, then and the honest bit. */
.site-chip-art {
  display: block;
  width: 100%;
  height: auto;
  margin-block-end: 0.875rem;
  border-radius: var(--radius-s);
  aspect-ratio: 4 / 3;
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.5rem;
  align-items: start;
  margin-block-start: 2.5rem;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--tone);
  box-shadow: var(--shadow-s);
}

.story-art {
  margin: 0;
}

.story-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
}

.story-art figcaption {
  margin-block-start: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.story-tag {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone);
}

.story h3 {
  margin-block: 0.375rem 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
}

.story-setup {
  margin-block: 0 1.25rem;
}

.story-rows {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.story-row {
  padding-inline-start: 0.875rem;
  border-inline-start: 3px solid var(--border);
}

.story-row-with {
  border-inline-start-color: var(--tone);
}

.story-row-honest {
  border-inline-start-style: dashed;
}

.story-row dt {
  font-weight: 700;
}

.story-row dd {
  margin: 0.125rem 0 0;
}

.story-note {
  margin-block: 1.25rem 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem;
  }
}

/* People in the diagrams are plain round dots in their role's colour, not little characters. */
.jw-figure {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: inset 0 0 0 3px var(--surface);
  outline: 2px solid var(--tone);
  outline-offset: -1px;
}

.jw-figure::before,
.jw-head,
.jw-body {
  display: none;
}

/* ---------------------------------------------- the home page's stories */
.walk-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  align-items: start;
  margin-block-start: 2.5rem;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--tone);
  box-shadow: var(--shadow-s);
}

.walk-story-flip .walk-story-art {
  order: 2;
}

.walk-story-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.walk-story-art {
  margin: 0;
  position: sticky;
  inset-block-start: 5rem;
}

.walk-story-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
}

.walk-story-art figcaption {
  margin-block-start: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.walk-story h3 {
  margin-block: 0.375rem 1rem;
  font-size: 1.375rem;
  line-height: 1.3;
}

.walk-story-label {
  margin-block: 1rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.walk-story-quote {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-style: italic;
}

.walk-story-quote p {
  margin: 0;
}

/* The steps: a numbered circle in the story's colour for each, joined by a line, like a workflow. */
.walk-story-steps {
  counter-reset: walk;
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.walk-story-steps li {
  counter-increment: walk;
  position: relative;
  display: grid;
  gap: 0.125rem;
  padding-inline-start: 2.75rem;
  min-height: 2rem;
}

.walk-story-steps li::before {
  content: counter(walk);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.875rem;
}

.walk-story-steps li + li::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(1rem - 1px);
  inset-block-start: -0.875rem;
  width: 2px;
  height: 0.875rem;
  background: var(--tone);
  opacity: 0.5;
}

.walk-story-result {
  margin-block-start: 1.25rem;
  padding: 0.25rem 1rem 0.875rem;
  border-radius: var(--radius-s);
  border-inline-start: 3px solid var(--tone);
  background: var(--surface-2);
}

.walk-story-result p:last-child {
  margin: 0;
}

/* What you get: six short lines with a tick each, in two columns. */
.home-get {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 2rem;
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
}

.home-get li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.home-get li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  inset-block-start: 0.3rem;
  width: 0.5rem;
  height: 0.875rem;
  border: solid var(--ok);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.home-faq {
  max-width: 48rem;
  margin-block-end: 1.5rem;
}

@media (max-width: 860px) {
  .walk-story,
  .walk-story-flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .walk-story-flip .walk-story-art {
    order: 0;
  }

  .walk-story-art {
    position: static;
  }

  .home-get {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pricing: every add-on, folded under See full pricing so the page stays short. */
.site-addons-more {
  margin-block-start: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.site-addons-more > summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  color: var(--accent);
}

.site-addons-more[open] > summary {
  border-block-end: 1px solid var(--border);
}

.site-addons-more > .site-addon-grid,
.site-addons-more > p {
  margin-inline: 1.25rem;
}

.site-addons-more > .site-addon-grid {
  margin-block-end: 1.25rem;
}

/* A guide's reader: the persona's portrait beside who the guide is written for. */
.guide-who {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin-block: 0 2rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--tone);
}

.guide-who img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
}

.guide-who p {
  margin-block: 0 0.375rem;
}

/* How TrioLMS works, in four boxes, in a guide's How it works part. */
.guide-map .flow-box small {
  font-weight: 400;
  color: inherit;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .guide-who {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Every guide offers the free trial under its lead, and again at its end. */
.guide-trial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-block-start: 1.25rem;
}

.guide-trial span {
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The home page's Pricing: the calculator, then where to read more. */
.home-price-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-block: 1.25rem 0;
}

/* Below 1100px the top bar's links move into Menu, which opens a list of
   the same links and Sign in under the bar. */
.site-menu {
  display: none;
  position: relative;
}

.site-menu > summary {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.site-menu > summary::-webkit-details-marker {
  display: none;
}

.site-menu[open] > summary {
  background: var(--surface);
}

.site-menu-panel {
  position: absolute;
  z-index: 10;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.5rem);
  display: grid;
  gap: 0.375rem;
  min-width: 15rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}

.site-menu-panel > nav {
  display: flex;
  flex-direction: column;
}

/* In Menu the switch shows its words, under the links. */
.site-menu-panel .site-theme-menu:not([hidden]) {
  display: flex;
  margin: 0.25rem;
}

.site-theme-menu button {
  flex: 1;
  justify-content: center;
}

.site-menu-panel > nav a {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-s);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-menu-panel > nav a:hover,
.site-menu-panel > nav a[aria-current='page'] {
  background: var(--bg);
}

@media (max-width: 1100px) {
  .site-nav {
    display: none;
  }

  .site-actions {
    margin-inline-start: auto;
  }

  .site-menu {
    display: block;
  }

  /* The switch moves into Menu with the links. */
  .site-theme-top {
    display: none;
  }
}

/* On a phone, Sign in lives in Menu so the bar keeps to one line. */
@media (max-width: 520px) {
  .site-actions > .btn.secondary {
    display: none;
  }

  .site-top-inner {
    gap: 0.75rem;
  }
}