/* Bundled from css/app.css with its layers kept: the site's own stylesheet is
   left out (exolog-site-css: none), so nothing unlayered competes. */

/* --- import: editable areas covering several elements --- */
.pb-group { display: flex; flex-direction: column; gap: inherit; align-items: inherit; min-width: 0; }

/* --- import: a call to action's field draws no box --- */
:where(div.rich-text:has(> a:only-child:is(.button, .text-link, .nav-link, .underlined-link))) { display: contents; }
:where(.site-header, .site-menu, .site-footer, [data-block]) .nav-link { display: revert; padding: revert; }

@layer reset, tokens, global, compositions, utilities, components, blocks;

/* --- global/reset.css --- */
@layer reset {
/* A small, opinionated reset: remove default spacing and chrome, keep semantics. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

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

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  letter-spacing: inherit;
}

button,
summary,
[role="option"] {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: inherit;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

[hidden] {
  display: none !important;
}

}

/* --- global/tokens.css --- */
@layer tokens {
/*
  Design tokens.
  Breakpoints used throughout (custom properties can't be used in media queries):
    40rem (sm) · 48rem (md) · 64rem (lg) · 80rem (xl) · 96rem (2xl)
*/

:root {
  /* Brand */
  --color-signal: #24a6c6;
  --color-signal-hover: #1f97b5;
  --color-signal-bright: #3db6d4; /* hover state on dark backgrounds */
  --color-signal-deep: #167c96;
  --color-signal-tint: #e3f3f7;

  /* Neutrals */
  --color-ink: #0f1518;
  --color-ink-2: #2e393e;
  --color-muted: #5f6b71;
  --color-rule: #d9dcd6;
  --color-paper: #f3f3ef;
  --color-white: #fff;

  /* Supporting surfaces */
  --color-blue-tint: #e4e9fb;
  --color-warm: #f3eee4;

  /* Telegram UI (only inside product visuals) */
  --color-tg-wall: #dfe6d6;
  --color-tg-out: #e6f8d2;
  --color-tg-name: #c8683f;
  --color-tg-blue: #3390ec;

  /* Example client brand colours (agency and customisation visuals) */
  --color-brand-pink: #e0245e;
  --color-brand-blue: #1f5bff;
  --color-brand-green: #1d5b45;
  --color-brand-forest: #2b3a33;

  /* Feedback and third parties */
  --color-danger: #b3372f;
  --color-danger-ring: #c2413a;
  --color-linkedin: #0a66c2;
  --color-linkedin-hover: #004182;

  /* Transparent ink and white, used for rules and overlays */
  --ink-06: rgb(15 21 24 / 0.06);
  --ink-07: rgb(15 21 24 / 0.07);
  --ink-10: rgb(15 21 24 / 0.1);
  --ink-15: rgb(15 21 24 / 0.15);
  --ink-30: rgb(15 21 24 / 0.3);
  --white-10: rgb(255 255 255 / 0.1);
  --white-15: rgb(255 255 255 / 0.15);

  /* Typography */
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --size-3xs: 0.625rem;
  --size-2xs: 0.6875rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-ui: 0.9375rem;
  --size-base: 1rem;
  --size-md: 1.0625rem;
  --size-lg: 1.125rem;
  --size-xl: 1.25rem;
  --size-2xl: 1.5rem;
  --size-3xl: 1.875rem;
  --size-4xl: 2.25rem;
  --size-5xl: 3rem;
  --size-6xl: 3.75rem;
  --size-7xl: 4.5rem;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-tighter: -0.03em;
  --tracking-tightest: -0.035em;
  --tracking-caps: 0.14em;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 2.5rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 7rem;

  /* Layout */
  --wrapper-max: 90rem;
  --gutter: 1.25rem;
  --column-gap: 2.5rem;
  --measure: 42rem;

  /* Shape */
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
  --radius-full: 999px;

  /* Elevation */
  --shadow-menu: 0 20px 40px -16px rgb(15 21 24 / 0.3);
  --shadow-float: 0 30px 70px -20px rgb(15 21 24 / 0.35);
  --shadow-phone: 0 30px 70px -24px rgb(15 21 24 / 0.45);
  --shadow-soft: 0 24px 50px -28px rgb(15 21 24 / 0.45);
  --ring: 0 0 0 1px var(--ink-06);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --duration: 150ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --gutter: 2.5rem;
  }
}

}

/* --- global/global.css --- */
@layer global {
/* Global defaults: most of the styling happens here and in the tokens. */

html {
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--color-signal-deep);
  outline-offset: 3px;
}

::selection {
  background: var(--color-signal-tint);
  color: var(--color-ink);
}

strong {
  font-weight: 600;
}

output {
  font-variant-numeric: tabular-nums;
}

}

/* --- compositions/compositions.css --- */
@layer compositions {
/*
  Compositions: layout-only primitives. They arrange children and never style them.
*/

/* Wrapper: centred page column with the responsive gutter */
.wrapper {
  width: 100%;
  max-width: var(--wrapper-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Region: vertical rhythm for page sections */
.region {
  padding-block: var(--region-space-top, var(--region-space, 5rem)) var(--region-space-bottom, var(--region-space, 5rem));
}

@media (min-width: 48rem) {
  .region {
    --region-space: 7rem;
  }
}

/* Flow: consistent space between siblings */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* Cluster: items that wrap, with even gaps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
  gap: var(--cluster-gap, var(--space-s));
}

/* Repel: push two groups to either end, wrap when there's no room */
.repel {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--repel-align, center);
  justify-content: space-between;
  gap: var(--repel-gap, var(--space-s));
}

/*
  Split: an asymmetric 12-column layout from 64rem up; a single column below.
  The data-split value names the column spans, e.g. "7-4" = 7 columns, then 4 columns starting at column 9.
*/
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--split-gap, var(--space-xl));
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--column-gap);
  }

  .split > * {
    grid-column: 1 / -1;
  }

  .split[data-align="end"] {
    align-items: end;
  }

  .split[data-align="center"] {
    align-items: center;
  }

  .split[data-split="3-9"] > :nth-child(1) { grid-column: 1 / span 3; }
  .split[data-split="3-9"] > :nth-child(2) { grid-column: 4 / span 9; }

  .split[data-split="3-8"] > :nth-child(1) { grid-column: 1 / span 3; }
  .split[data-split="3-8"] > :nth-child(n + 2) { grid-column: 5 / span 8; }

  .split[data-split="4-7"] > :nth-child(1) { grid-column: 1 / span 4; }
  .split[data-split="4-7"] > :nth-child(2) { grid-column: 6 / span 7; }

  .split[data-split="4-8"] > :nth-child(1) { grid-column: 1 / span 4; }
  .split[data-split="4-8"] > :nth-child(n + 2) { grid-column: 5 / span 8; }

  .split[data-split="6-5"] > :nth-child(1) { grid-column: 1 / span 6; }
  .split[data-split="6-5"] > :nth-child(2) { grid-column: 8 / span 5; }

  .split[data-split="7-4"] > :nth-child(1) { grid-column: 1 / span 7; }
  .split[data-split="7-4"] > :nth-child(2) { grid-column: 9 / span 4; }

  .split[data-split="7-5"] > :nth-child(1) { grid-column: 1 / span 7; }
  .split[data-split="7-5"] > :nth-child(2) { grid-column: 8 / span 5; }
}

/* Auto grid: equal columns that wrap at a minimum width */
.auto-grid {
  display: grid;
  gap: var(--auto-grid-gap, var(--space-s));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--auto-grid-min, 16rem), 100%), 1fr));
}

}

/* --- utilities/utilities.css --- */
@layer utilities {
/* Utilities: do one job, apply a token. */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Caps label above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--color-signal-deep));
}

.eyebrow[data-tone="on-dark"] {
  --eyebrow-color: var(--color-signal);
}

.eyebrow[data-size="small"] {
  font-size: var(--size-sm);
}

@media (min-width: 48rem) {
  .eyebrow:not([data-size="small"]) {
    font-size: var(--size-lg);
  }
}

/* Headings */
.heading-page,
.heading-display,
.heading-section,
.heading-large,
.heading-card {
  font-weight: 600;
}

.heading-page {
  font-size: 2.75rem;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

.heading-display {
  font-size: 2.75rem;
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
}

.heading-section {
  font-size: var(--size-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

.heading-large {
  font-size: var(--size-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

.heading-card {
  font-size: var(--size-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 48rem) {
  .heading-page,
  .heading-display {
    font-size: var(--size-7xl);
  }

  .heading-section {
    font-size: var(--size-5xl);
  }

  .heading-large {
    font-size: var(--size-6xl);
  }

  .heading-card {
    font-size: 1.75rem;
  }
}

@media (min-width: 64rem) {
  .heading-page {
    font-size: 5.25rem;
  }

  .heading-display {
    font-size: 5.5rem;
  }
}

/* Intro paragraph */
.lead {
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--lead-color, var(--color-ink-2));
}

@media (min-width: 48rem) {
  .lead {
    font-size: var(--size-xl);
  }
}

.measure {
  max-width: var(--measure);
}

/* Colours */
.color-ink { color: var(--color-ink); }
.color-ink-2 { color: var(--color-ink-2); }
.color-muted { color: var(--color-muted); }
.color-signal { color: var(--color-signal); }
.color-signal-deep { color: var(--color-signal-deep); }
.color-white { color: var(--color-white); }

.bg-white { background: var(--color-white); }
.bg-ink { background: var(--color-ink); color: var(--color-white); }

/* Text */
.font-mono { font-family: var(--font-mono); }
.text-sm { font-size: var(--size-sm); }
.text-ui { font-size: var(--size-ui); }
.text-lg { font-size: var(--size-lg); }
.weight-medium { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.leading-snug { line-height: var(--leading-snug); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.align-center { text-align: center; }

/* Underlined link with the Morse cyan and an arrow that nudges on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  color: var(--color-ink);
}

.link-arrow__label {
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.link-arrow__icon {
  transition: translate var(--duration) ease;
}

.link-arrow:hover .link-arrow__icon {
  translate: 0.125rem 0;
}

.link-inline {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The Morse line: "— — ·" as a repeating dash pattern, drawn from the dashes in the logo */
.morse-line {
  --morse-angle: 90deg;
  background-image: repeating-linear-gradient(
    var(--morse-angle),
    var(--color-signal) 0 18px,
    transparent 18px 26px,
    var(--color-signal) 26px 44px,
    transparent 44px 52px,
    var(--color-signal) 52px 56px,
    transparent 56px 66px
  );
}

.morse-line[data-direction="vertical"] {
  --morse-angle: 180deg;
}

/* Icons */
.icon {
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
  flex-shrink: 0;
}

/* Smaller page heading for task pages (Try, success) */
@media (min-width: 48rem) {
  .heading-page[data-size="compact"] {
    font-size: var(--size-6xl);
  }
}

@media (min-width: 64rem) {
  .heading-page[data-size="compact"] {
    font-size: var(--size-7xl);
  }
}

}

/* --- components/button.css --- */
@layer components {
/*
  Button (used for links and buttons that look like buttons).
  Exceptions: data-size="small|large", data-variant="dark|on-dark|outline|ghost|linkedin", data-width="full"
*/

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: var(--button-height, 3rem);
  padding-inline: var(--button-padding, 1.75rem);
  border-radius: var(--radius-full);
  font-size: var(--button-font-size, var(--size-base));
  font-weight: 600;
  white-space: nowrap;
  color: var(--button-color, var(--color-ink));
  background: var(--button-bg, var(--color-signal));
  box-shadow: var(--button-ring, none);
  transition:
    background-color var(--duration) ease,
    box-shadow var(--duration) ease,
    color var(--duration) ease;
}

.button:hover {
  background: var(--button-bg-hover, var(--color-signal-hover));
}

.button[data-size="small"] {
  --button-height: 2.5rem;
  --button-padding: 1.25rem;
  --button-font-size: var(--size-ui);
}

@media (min-width: 48rem) {
  .button[data-size="small"] {
    --button-height: 2.75rem;
    --button-padding: 1.5rem;
  }
}

.button[data-size="large"] {
  --button-height: 3.5rem;
  --button-padding: 2rem;
  --button-font-size: var(--size-lg);
}

.button[data-variant="dark"] {
  --button-bg: var(--color-ink);
  --button-bg-hover: var(--color-ink-2);
  --button-color: var(--color-white);
}

.button[data-variant="on-dark"] {
  --button-bg-hover: var(--color-signal-bright);
}

.button[data-variant="outline"] {
  --button-bg: transparent;
  --button-bg-hover: var(--color-white);
  --button-ring: inset 0 0 0 1px var(--color-ink);
}

.button[data-variant="ghost"] {
  --button-bg: transparent;
  --button-bg-hover: var(--color-white);
  --button-ring: inset 0 0 0 1px var(--color-rule);
  font-weight: 500;
}

.button[data-variant="linkedin"] {
  --button-bg: var(--color-linkedin);
  --button-bg-hover: var(--color-linkedin-hover);
  --button-color: var(--color-white);
}

.button[data-width="full"] {
  width: 100%;
}

/* Round icon-only button (slider arrows, share, stepper) */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size, 3rem);
  height: var(--icon-button-size, 3rem);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--color-ink);
  background: var(--icon-button-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--icon-button-ring, var(--color-rule));
  transition:
    background-color var(--duration) ease,
    box-shadow var(--duration) ease,
    opacity var(--duration) ease;
}

.icon-button:hover {
  background: var(--color-white);
}

.icon-button:disabled {
  opacity: 0.35;
  background: var(--icon-button-bg, transparent);
}

}

/* --- components/check-list.css --- */
@layer components {
/*
  Lists with a small marker. Exceptions:
    data-marker="check" (cyan check badge, default) | "dot" (cyan dot)
    data-columns="2" → two columns from 40rem
*/

.check-list {
  display: grid;
  gap: var(--check-list-gap, 0.875rem) var(--space-l);
  font-size: var(--check-list-size, var(--size-ui));
  color: var(--color-ink);
}

@media (min-width: 40rem) {
  .check-list[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.check-list li {
  display: flex;
  align-items: var(--check-list-align, center);
  gap: var(--space-xs);
}

.check-list__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  color: var(--color-white);
  --icon-size: 0.875rem;
}

.check-list[data-marker="dot"] {
  --check-list-align: flex-start;
  --check-list-gap: var(--space-xs);
}

.check-list[data-marker="dot"] li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.65em;
  border-radius: var(--radius-full);
  background: var(--color-signal);
}

}

/* --- components/accordion.css --- */
@layer components {
.accordion {
  border-block: 1px solid var(--color-rule);
}
.accordion details + details {
  border-top: 1px solid var(--color-rule);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-size: var(--size-lg);
  font-weight: 500;
}
@media (min-width: 48rem) {
.accordion summary {
    font-size: var(--size-xl);
  }
}
.accordion__icon {
  font-size: var(--size-2xl);
  line-height: 1;
  color: var(--color-signal-deep);
  transition: rotate var(--duration) ease;
}
.accordion details[open] .accordion__icon {
  rotate: 45deg;
}
.accordion__answer {
  max-width: var(--measure);
  padding-bottom: 1.75rem;
  color: var(--color-ink-2);
}
.accordion__answer[data-size="relaxed"] {
  line-height: var(--leading-relaxed);
}

}

/* --- components/rail.css --- */
@layer components {
/*
  Rail: a vertical timeline on the Morse line.
  Exceptions on items: data-marker="filled" (default) | "open" | "check"
  On dark or white backgrounds set --rail-bg so the markers are cut out of the line cleanly.
*/

.rail {
  --rail-bg: var(--color-paper);
}

.rail__item {
  position: relative;
  padding: 0 0 var(--rail-space, var(--space-l)) 2.5rem;
}

.rail__item:last-child {
  padding-bottom: 0;
}

/* The line: from the marker down to the next item; the last item gets a short stub */
.rail__item::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0;
  left: 11px;
  width: 2px;
  background-image: repeating-linear-gradient(
    180deg,
    var(--color-signal) 0 18px,
    transparent 18px 26px,
    var(--color-signal) 26px 44px,
    transparent 44px 52px,
    var(--color-signal) 52px 56px,
    transparent 56px 66px
  );
}

.rail__item:not(:first-child)::before {
  top: 0;
}

.rail__item:last-child::before {
  bottom: auto;
  height: 0.75rem;
}

.rail__item:only-child::before {
  display: none;
}

/* Marker */
.rail__item::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 12px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  box-shadow: 0 0 0 4px var(--rail-bg);
  translate: -50% -50%;
}

.rail__item[data-marker="open"]::after {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--rail-bg);
  box-shadow: inset 0 0 0 2px var(--color-signal);
}

.rail__item[data-marker="check"]::after {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-signal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1518' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E")
    center / 0.75rem no-repeat;
}

.rail__title {
  font-weight: 600;
}

.rail__text {
  margin-top: var(--space-3xs);
  line-height: var(--leading-snug);
  color: var(--rail-text-color, var(--color-ink-2));
}

/* Numbered variant: a numbered badge instead of a dot (guide CTA, closing lists) */
.rail[data-variant="numbered"] {
  counter-reset: rail;
}

.rail[data-variant="numbered"] .rail__item {
  padding-left: 3rem;
  counter-increment: rail;
}

.rail[data-variant="numbered"] .rail__item::before {
  left: 15px;
}

.rail[data-variant="numbered"] .rail__item::after {
  content: counter(rail);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-ink);
  translate: none;
  box-shadow: none;
}

}

/* --- components/toc.css --- */
@layer components {
/*
  Sticky table of contents with a growing cyan dash on the current item (FAQ, Terms, guide article).
  Current item: aria-current="true" (set by js/main.js while scrolling).
  Also: the collapsible "Contents" panel for small screens, and the section layout next to the TOC.
*/

.toc-layout {
  padding-bottom: 5rem;
}

@media (min-width: 48rem) {
  .toc-layout {
    padding-bottom: 7rem;
  }
}

.toc {
  display: none;
}

@media (min-width: 64rem) {
  .toc {
    display: block;
  }

  .toc__inner {
    position: sticky;
    top: 7rem;
  }
}

.toc__label {
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}

.toc__list {
  margin-top: var(--space-s);
}

.toc__list li + li {
  margin-top: 0.125rem;
}

.toc__list a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: 0.375rem;
  font-size: var(--size-ui);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  transition: color var(--duration) ease;
}

.toc__list a::before {
  content: "";
  width: 1rem;
  height: 2px;
  flex-shrink: 0;
  background: var(--color-rule);
  transition:
    width var(--duration) ease,
    background-color var(--duration) ease;
}

.toc__list a:hover,
.toc__list a[aria-current="true"] {
  color: var(--color-ink);
}

.toc__list a[aria-current="true"] {
  font-weight: 500;
}

.toc__list a[aria-current="true"]::before {
  width: 1.75rem;
  background: var(--color-signal);
}

/* Small screens: a collapsible contents list */
.toc-panel {
  margin-bottom: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--ring);
}

.toc-panel summary {
  display: flex;
  justify-content: space-between;
  padding: var(--space-s) 1.25rem;
  font-weight: 600;
}

.toc-panel summary span {
  color: var(--color-signal-deep);
}

.toc-panel ol {
  padding: 0 1.25rem var(--space-s);
}

.toc-panel a {
  display: flex;
  gap: var(--space-xs);
  padding-block: 0.375rem;
  color: var(--color-ink-2);
}

.toc-panel a span {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-signal-deep);
}

@media (min-width: 64rem) {
  .toc-panel {
    display: none;
  }
}

/* Topic chips for small screens (FAQ page) */
.chip-row {
  display: flex;
  gap: var(--space-2xs);
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

@media (min-width: 64rem) {
  .chip-row {
    display: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  height: var(--chip-height, 2.5rem);
  padding-inline: var(--chip-padding, var(--space-s));
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  font-size: var(--chip-size, var(--size-sm));
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-ink-2);
  transition:
    border-color var(--duration) ease,
    background-color var(--duration) ease,
    color var(--duration) ease;
}

.chip:hover {
  border-color: var(--ink-30);
  color: var(--color-ink);
}

.chip[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.chip__count {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  opacity: 0.6;
}

/* Numbered section heading used next to the TOC */
.numbered-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.numbered-heading__number {
  font-family: var(--font-mono);
  font-size: var(--size-base);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-signal-deep);
}

}

/* --- components/chat-widget.css --- */
@layer components {
/* The Morse chat widget, as it appears on a customer's website (product visual). */

.chat-widget {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 19rem;
  height: 26rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--ink-06);
}

@media (min-width: 48rem) {
  .chat-widget {
    height: 29rem;
    margin-right: 0;
    margin-left: auto;
  }
}

@media (min-width: 64rem) {
  .chat-widget {
    max-width: 21rem;
  }
}

.chat-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.875rem var(--space-s);
  border-bottom: 1px solid var(--ink-07);
}

.chat-widget__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  color: var(--color-white);
  --icon-size: 1.1rem;
}

.chat-widget__title {
  flex: 1;
  min-width: 0;
}

.chat-widget__name {
  display: block;
  font-size: var(--size-ui);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.chat-widget__status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  font-size: var(--size-xs);
  color: var(--color-muted);
}

.chat-widget__status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: #2fbf71;
}

.chat-widget__menu {
  font-size: var(--size-lg);
  line-height: 1;
  color: var(--color-muted);
}

.chat-widget__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-s);
  padding: var(--space-s);
}

.chat-widget__composer {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border-top: 1px solid var(--ink-07);
}

.chat-widget__input {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 2.5rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-m);
  background: #f5f6f7;
  box-shadow: inset 0 0 0 1px var(--ink-07);
  font-size: var(--size-sm);
}

.chat-widget__typed {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-widget__placeholder {
  color: var(--color-muted);
}

.chat-widget__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-m);
  background: var(--color-signal);
  color: var(--color-white);
}

.chat-widget__footer {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-s) 0.625rem;
  font-size: var(--size-3xs);
  color: var(--color-muted);
}

.chat-widget__footer span:first-child {
  text-decoration: underline;
}

/* Messages */
.chat-message {
  max-width: 85%;
}

.chat-message[data-from="visitor"] {
  margin-left: auto;
}

.chat-message__bubble {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-l);
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
}

.chat-message[data-from="visitor"] .chat-message__bubble {
  border-bottom-right-radius: 0.375rem;
  background: var(--color-signal-deep);
  color: var(--color-white);
}

.chat-message__time {
  margin-top: var(--space-3xs);
  font-size: var(--size-2xs);
  color: var(--color-muted);
}

.chat-message[data-from="visitor"] .chat-message__time {
  text-align: right;
}

.chat-message[data-from="team"] {
  display: flex;
  gap: var(--space-2xs);
  max-width: 88%;
}

.chat-message__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-top: 1.25rem;
  border-radius: var(--radius-full);
  background: #e7d9cc;
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--color-ink-2);
}

.chat-message__meta {
  font-size: var(--size-2xs);
  color: var(--color-muted);
}

.chat-message__meta strong {
  color: var(--color-ink-2);
}

.chat-message[data-from="team"] .chat-message__bubble {
  margin-top: var(--space-3xs);
  border-top-left-radius: 0.375rem;
  background: #eff1f3;
  color: var(--color-ink);
}

}

/* --- components/phone.css --- */
@layer components {
/* A phone showing a Telegram group (product visual, light Telegram theme). */

.phone {
  width: 100%;
  padding: var(--space-2xs);
  border-radius: 2.6rem;
  background: var(--color-ink);
  box-shadow: var(--shadow-phone);
}

.phone__screen {
  display: flex;
  flex-direction: column;
  height: 28rem;
  overflow: hidden;
  border-radius: 2.1rem;
  background: var(--color-tg-wall);
}

@media (min-width: 48rem) {
  .phone__screen {
    height: 33rem;
  }
}

.phone__top {
  background: rgb(255 255 255 / 0.95);
}

.phone__status {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-m) 0;
  font-size: var(--size-2xs);
  font-weight: 600;
}

.phone__battery {
  display: flex;
  gap: var(--space-3xs);
}

.phone__battery span {
  width: 0.75rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--color-ink);
}

.phone__battery span + span {
  width: 1rem;
  background: none;
  border: 1px solid var(--color-ink);
}

.tg-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-s) 0.625rem;
  border-bottom: 1px solid var(--ink-07);
}

.tg-chat-header__back {
  font-size: var(--size-xl);
  line-height: 1;
  color: var(--color-tg-blue);
}

.tg-chat-header__title {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.tg-chat-header__name {
  display: block;
  font-size: var(--size-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.tg-chat-header__members {
  display: block;
  font-size: var(--size-2xs);
  color: var(--color-muted);
}

.tg-chat-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: #8fb7a1;
  font-size: var(--size-2xs);
  font-weight: 600;
  color: var(--color-white);
}

.tg-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  padding: 0 0.625rem var(--space-xs);
}

.tg-chat__date {
  margin: 0 auto var(--space-3xs);
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  background: rgb(15 21 24 / 0.2);
  font-size: var(--size-2xs);
  font-weight: 500;
  color: var(--color-white);
}

.tg-message {
  max-width: 80%;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-l);
  border-bottom-left-radius: 0.375rem;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
}

.tg-message__sender {
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--sender-color, var(--color-tg-name));
}

.tg-message__meta {
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  color: var(--color-muted);
}

.tg-message__text {
  font-size: 0.8125rem;
  line-height: var(--leading-snug);
}

.tg-message__meta + .tg-message__text {
  margin-top: var(--space-3xs);
}

.tg-message__time {
  font-size: var(--size-3xs);
  text-align: right;
  color: var(--color-muted);
}

/* Message from the Morse bot, with its avatar */
.tg-incoming {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  max-width: 88%;
}

.tg-incoming .tg-message {
  max-width: none;
  --sender-color: var(--color-signal-deep);
}

.tg-incoming__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  color: var(--color-white);
  --icon-size: 0.875rem;
}

/* The team's reply, quoting the visitor's message */
.tg-message[data-from="team"] {
  max-width: 82%;
  margin-left: auto;
  border-bottom-left-radius: var(--radius-l);
  border-bottom-right-radius: 0.375rem;
  background: var(--color-tg-out);
}

.tg-message[data-from="team"] .tg-message__time {
  color: #4fae4e;
}

.tg-quote {
  margin-bottom: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-left: 3px solid var(--color-signal);
  border-radius: 0.375rem;
  background: rgb(36 166 198 / 0.1);
  font-size: var(--size-2xs);
}

.tg-quote__sender {
  font-weight: 600;
  color: var(--color-signal-deep);
}

.tg-quote__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-2);
}

.tg-composer {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.625rem var(--space-xs);
  background: rgb(255 255 255 / 0.95);
}

.tg-composer__attach {
  font-size: var(--size-lg);
  line-height: 1;
  color: var(--color-muted);
}

.tg-composer__input {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 2rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--ink-10);
  font-size: 0.8125rem;
}

.tg-composer__typed {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-composer__placeholder {
  color: var(--color-muted);
}

.tg-composer__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-tg-blue);
  color: var(--color-white);
  --icon-size: 0.875rem;
}

}

/* --- components/page-intro.css --- */
@layer components {
/* The opening block of a sub page: eyebrow, large heading, optional lead. */

.page-intro {
  padding-top: var(--space-2xl);
  padding-bottom: var(--page-intro-bottom, var(--space-2xl));
}

@media (min-width: 48rem) {
  .page-intro {
    padding-top: var(--space-4xl);
    padding-bottom: var(--page-intro-bottom-md, var(--space-3xl));
  }
}

.page-intro .heading-page {
  margin-top: var(--space-s);
}

.page-intro__row {
  margin-top: var(--space-s);
  --split-gap: var(--space-l);
}

.page-intro__row .heading-page {
  margin-top: 0;
}

.page-intro__row .lead {
  max-width: 28rem;
}

@media (min-width: 64rem) {
  .page-intro__row .lead {
    align-self: end;
  }
}

/* Highlighted placeholder, for content the client still has to supply */
.placeholder {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--color-signal-tint);
  font-weight: 600;
  color: var(--color-signal-deep);
}

/* Dashed "text to be supplied" box */
.pending {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 2px dashed var(--ink-15);
  border-radius: var(--radius-l);
}

.pending__label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

.pending__label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
}

.pending p + p {
  margin-top: var(--space-2xs);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
}

}

/* --- components/cta.css --- */
@layer components {
.cta-row {
  --split-gap: var(--space-xl);
}
.cta-row__text p {
  max-width: 36rem;
  margin-top: var(--space-m);
}
.cta-row__actions {
  --cluster-gap: var(--space-s);
}
@media (min-width: 64rem) {
.cta-row__actions {
    align-self: end;
    justify-content: flex-end;
  }
}
.cta-band {
  background: var(--color-ink);
  color: var(--color-white);
  --lead-color: rgb(255 255 255 / 0.65);
}

}

/* --- components/guide-card.css --- */
@layer components {
.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem var(--space-xl);
}
@media (min-width: 48rem) {
.guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 5rem;
  }
}
.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.guide-card__topic {
  margin-top: var(--space-m);
}
.guide-card__title {
  margin-top: var(--space-2xs);
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.guide-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
}
.guide-card__title a:focus-visible {
  outline: none;
}
.guide-card__title a:focus-visible::after {
  outline: 2px solid var(--color-signal-deep);
  outline-offset: 4px;
}
.guide-card__excerpt {
  max-width: 32rem;
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}
.guide-card .link-arrow {
  margin-top: 1.25rem;
}
.guide-card:hover .link-arrow__icon {
  translate: 0.25rem 0;
}
@media (min-width: 48rem) {
.guide-card__title {
    font-size: 1.75rem;
  }
.guide-card[data-featured] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--space-xl);
  }
.guide-card[data-featured] .guide-card__body {
    padding-block: var(--space-m);
  }
.guide-card[data-featured] .guide-card__topic {
    margin-top: 0;
  }
}
@media (min-width: 64rem) {
.guide-card[data-featured] .guide-card__title {
    font-size: var(--size-5xl);
    line-height: 1.02;
    letter-spacing: var(--tracking-tighter);
  }
.guide-card[data-featured] .guide-card__excerpt {
    margin-top: 1.25rem;
    font-size: var(--size-xl);
  }
}
.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18rem;
  padding-inline: var(--space-l);
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--cover-bg, var(--color-signal-tint));
  box-shadow: var(--ring);
  transition:
    translate 300ms ease,
    box-shadow 300ms ease;
}
.guide-card:hover .cover {
  translate: 0 -0.25rem;
  box-shadow: var(--ring), var(--shadow-soft);
}
@media (min-width: 48rem) {
.cover {
    height: 21.5rem;
  }
}
@media (min-width: 64rem) {
.guide-card[data-featured] .cover {
    height: 29rem;
  }
}
.cover[data-cover-tone="how-to"] { --cover-bg: var(--color-tg-wall); }
.cover[data-cover-tone="compare-dark"] { --cover-bg: var(--color-ink); color: var(--color-white); }
.cover[data-cover-tone="widget-vs-button"] { --cover-bg: var(--color-warm); }
.cover[data-cover-tone="helpdesk"] { --cover-bg: var(--color-blue-tint); }
.cover[data-cover-tone="wordpress"] { --cover-bg: var(--color-white); }
.cover__pill {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-l);
  background: var(--color-white);
  font-size: var(--size-sm);
  font-weight: 500;
  box-shadow: 0 12px 30px -14px rgb(15 21 24 / 0.35);
  flex-shrink: 0;
}
.cover__pill[data-tone="telegram"] {
  background: var(--color-tg-out);
}
.cover__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  color: var(--color-white);
  --icon-size: 1.25rem;
}
.cover__icon[data-tone="telegram"] {
  background: var(--color-tg-blue);
}
.cover__connector {
  width: 4rem;
  height: 3px;
  flex-shrink: 0;
}
@media (min-width: 40rem) {
.cover__connector {
    width: 7rem;
  }
}
.cover__steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.cover__steps::before {
  content: "";
  position: absolute;
  inset: 50% 0.5rem auto;
  height: 3px;
  translate: 0 -50%;
  background-image: repeating-linear-gradient(90deg, var(--color-signal) 0 18px, transparent 18px 26px, var(--color-signal) 26px 44px, transparent 44px 52px, var(--color-signal) 52px 56px, transparent 56px 66px);
}
.cover__steps span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--size-lg);
  color: var(--color-white);
  box-shadow: 0 0 0 8px var(--color-tg-wall);
  --icon-size: 1rem;
}
.cover__steps span:last-child {
  background: var(--color-signal);
  color: var(--color-ink);
}
.cover__chains {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  font-size: var(--size-lg);
  font-weight: 500;
}
.cover__chains p {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.cover__chains p:first-child {
  color: rgb(255 255 255 / 0.35);
}
.cover__chains .cover__connector {
  flex: 1;
  width: auto;
}
@media (min-width: 40rem) {
.cover__chains {
    font-size: var(--size-xl);
  }
}
.cover__mini-widget {
  width: 10rem;
  padding: var(--space-xs);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: 0 16px 36px -16px rgb(15 21 24 / 0.4);
}
.cover__mini-widget p:first-child {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--size-xs);
  font-weight: 600;
}
.cover__mini-widget .cover__icon {
  width: 1.5rem;
  height: 1.5rem;
  --icon-size: 0.875rem;
}
.cover__bubble {
  display: block;
  margin-top: var(--space-xs);
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-m);
  font-size: var(--size-3xs);
}
.cover__bubble[data-from="visitor"] {
  width: 6rem;
  margin-left: auto;
  border-bottom-right-radius: 0.125rem;
  background: var(--color-signal-deep);
  color: var(--color-white);
}
.cover__bubble[data-from="team"] {
  width: 7rem;
  margin-top: 0.375rem;
  border-top-left-radius: 0.125rem;
  background: #eff1f3;
}
.cover__vs {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: rgb(15 21 24 / 0.5);
}
.cover__tg-button {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.625rem var(--space-s);
  border-radius: var(--radius-full);
  background: var(--color-tg-blue);
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-white);
  box-shadow: 0 16px 36px -16px rgb(15 21 24 / 0.4);
}
.cover__ticket {
  position: relative;
  width: 14rem;
}
.cover__ticket-shadow {
  position: absolute;
  left: 1.25rem;
  top: -0.75rem;
  width: 100%;
  height: 3rem;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.5);
}
.cover__ticket-shadow + .cover__ticket-shadow {
  left: 0.625rem;
  top: -0.375rem;
  background: rgb(255 255 255 / 0.75);
}
.cover__ticket-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  padding-inline: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--color-white);
  font-size: var(--size-sm);
  box-shadow: 0 12px 30px -14px rgb(15 21 24 / 0.35);
}
.cover__ticket-card strong {
  font-weight: 500;
}
.cover__ticket-card span {
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-full);
  background: #f7ecd6;
  font-size: var(--size-xs);
  color: #8a5a12;
}
.cover__question {
  position: absolute;
  right: -2.5rem;
  bottom: -4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  font-size: var(--size-3xl);
  font-weight: 600;
  color: var(--color-white);
}
.cover__admin {
  position: absolute;
  inset: 2rem 2rem 0;
  overflow: hidden;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--ink-10);
}
.cover__admin-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding-inline: var(--space-xs);
  border-bottom: 1px solid var(--ink-10);
}
.cover__admin-bar span,
.cover__admin-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--ink-15);
}
.cover__admin-body {
  display: flex;
  height: 100%;
}
.cover__admin-side {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  width: 4rem;
  padding: var(--space-xs);
  background: var(--color-ink);
}
.cover__admin-side span {
  height: 0.375rem;
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 0.3);
}
.cover__admin-side span:nth-child(3) {
  background: var(--color-signal);
}
.cover__admin-main {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 0.625rem;
  padding: var(--space-s);
}
.cover__admin-main span {
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--ink-10);
}
.cover__admin-main span:first-child {
  width: 50%;
  height: 0.75rem;
  background: var(--ink-15);
}
.cover__admin-main span:nth-child(2) { width: 80%; }
.cover__admin-main span:nth-child(3) { width: 60%; }
.cover__launcher {
  position: absolute;
  right: 3rem;
  bottom: 1.5rem;
  --launcher-size: 3.5rem;
  box-shadow: 0 12px 30px -10px rgb(15 21 24 / 0.45);
}
.cover__versus {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: var(--size-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.cover__versus span:last-child {
  color: rgb(255 255 255 / 0.55);
}
.cover__versus .cover__vs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  font-family: var(--font-mono);
  font-size: var(--size-base);
  font-weight: 400;
  color: var(--color-ink);
}
@media (min-width: 40rem) {
.cover__versus {
    font-size: var(--size-4xl);
  }
}
.cover__duo {
  --cluster-gap: var(--space-m);
  --cluster-justify: center;
  flex-wrap: nowrap;
}

}

/* --- blocks/site-header.css --- */
@layer blocks {
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 60;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: var(--color-ink);
  color: var(--color-white);
  translate: 0 -200%;
}
.skip-link:focus {
  translate: 0 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgb(243 243 239 / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--duration) ease;
}
.site-header[data-scrolled] {
  border-bottom-color: var(--color-rule);
}
.site-header__bar {
  --repel-gap: var(--space-m);
  height: 4rem;
  flex-wrap: nowrap;
}
.site-header__logo {
  flex-shrink: 0;
  color: var(--color-ink);
}
.site-header__logo svg {
  width: auto;
  height: 1.5rem;
}
.site-header__actions {
  --cluster-gap: var(--space-2xs);
  flex-wrap: nowrap;
}
@media (min-width: 48rem) {
.site-header__bar {
    height: 5rem;
  }
.site-header__logo svg {
    height: 1.75rem;
  }
.site-header__actions {
    --cluster-gap: var(--space-xs);
  }
}
.site-nav {
  display: none;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  font-size: var(--size-ui);
  color: var(--color-ink-2);
}
@media (min-width: 80rem) {
.site-nav__list {
    gap: 2.25rem;
  }
}
.site-nav__list a {
  padding-block: var(--space-2xs);
  transition: color var(--duration) ease;
}
.site-nav__list a:hover {
  color: var(--color-ink);
}
.site-nav__list a[aria-current="page"] {
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
@media (min-width: 64rem) {
.site-nav {
    display: block;
  }
}
.popover-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  width: var(--popover-width, 13rem);
  margin-top: var(--space-2xs);
  padding: 0.375rem;
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: var(--shadow-menu), 0 0 0 1px rgb(15 21 24 / 0.08);
}
.popover-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem var(--space-xs);
  border-radius: var(--radius-s);
  font-size: var(--size-ui);
  color: var(--color-ink-2);
}
.popover-menu__item:hover,
.popover-menu__item[data-active] {
  background: var(--color-paper);
  color: var(--color-ink);
}
.popover-menu__item[aria-current="true"],
.popover-menu__item[aria-selected="true"] {
  font-weight: 500;
  color: var(--color-ink);
}
.popover-menu__check {
  --icon-size: 1rem;
  color: var(--color-signal-deep);
  visibility: hidden;
}
.popover-menu__item[aria-current="true"] .popover-menu__check,
.popover-menu__item[aria-selected="true"] .popover-menu__check {
  visibility: visible;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: var(--radius-full);
  color: var(--color-ink);
}
.mobile-nav {
  padding: 0 var(--gutter) var(--space-m);
  border-top: 1px solid var(--color-rule);
}
.mobile-nav__list {
  font-size: var(--size-lg);
}
.mobile-nav__list li + li {
  border-top: 1px solid var(--color-rule);
}
.mobile-nav__list a {
  display: block;
  padding-block: var(--space-s);
}
.mobile-nav__list a[aria-current="page"] {
  font-weight: 500;
  color: var(--color-signal-deep);
}
.mobile-nav__languages {
  margin-top: var(--space-2xs);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
}
.mobile-nav__label {
  font-size: var(--size-sm);
  color: var(--color-muted);
}
@media (min-width: 64rem) {
.menu-toggle,
  .mobile-nav {
    display: none;
  }
}
.menu-toggle .icon {
  --icon-size: 1.25rem;
}
.mobile-nav__pills {
  --cluster-gap: var(--space-2xs);
}

}

/* --- blocks/site-footer.css --- */
@layer blocks {
.site-footer {
  background: var(--color-ink);
  color: rgb(255 255 255 / 0.6);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--white-10);
}
@media (min-width: 48rem) {
.site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--column-gap);
  }
.site-footer__brand { grid-column: span 5; }
.site-footer__nav { grid-column: span 4; }
.site-footer__contact { grid-column: span 3; }
}
.site-footer__logo {
  display: inline-block;
  color: var(--color-white);
}
.site-footer__logo svg {
  width: auto;
  height: 1.75rem;
}
.site-footer__tagline {
  margin-top: var(--space-s);
  max-width: 20rem;
}
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--space-xs);
}
.site-footer__links a {
  transition: color var(--duration) ease;
}
.site-footer__links a:hover {
  color: var(--color-white);
}
.site-footer__email a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration) ease;
}
.site-footer__email a:hover {
  text-decoration-color: var(--color-white);
}
.site-footer__legal {
  padding-block: var(--space-m);
  border-top: 1px solid var(--white-10);
  font-size: var(--size-sm);
  color: rgb(255 255 255 / 0.4);
}
/* The legal line is a rich-text field now: its paragraph and the Privacy link
   inside keep the line's own look. */
.site-footer__legal > p {
  margin: 0;
}
.site-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

}

/* --- blocks/pb-hero.css --- */
@layer blocks {
/*
  Homepage hero: the website on the left, Telegram on the right, and in between
  (where a helpdesk would normally sit) only the headline and the Morse line.
  Grid areas change per breakpoint: stacked → headline on top → headline in the middle.
  Pageblock "hero" - fields: title, lead, button, link, note, demo_caption, replay.
  From Pim's blocks/hero.css; only the scroll link changed (see below).
*/

.hero {
  position: relative;
  overflow-x: clip;
  padding-block: 2.5rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "web" "line" "tg";
}

@media (min-width: 48rem) {
  .hero { padding-top: 4rem; }
}

@media (min-width: 64rem) {
  .hero { padding-bottom: 3rem; }

  .hero__grid {
    grid-template-columns: minmax(0, 22rem) minmax(6rem, 1fr) minmax(0, 19rem);
    grid-template-areas: "head head head" "web line tg";
    column-gap: 2.5rem;
  }
}

@media (min-width: 80rem) {
  .hero { padding-top: 3.5rem; }

  .hero__grid {
    grid-template-columns: 25rem minmax(0, 1fr) 20rem;
    grid-template-rows: auto 1fr;
    grid-template-areas: "web head tg" "web line tg";
    column-gap: 3.5rem;
  }
}

/* Headline and intro */
.hero__head {
  grid-area: head;
}

.hero__title {
  font-size: 2.875rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  text-wrap: balance;
}

.hero__intro {
  margin-top: var(--space-m);
}

.hero__lead {
  max-width: 30rem;
}

.hero__actions {
  --cluster-gap: var(--space-s) var(--space-m);
  margin-top: 1.75rem;
}

.hero__note {
  margin-top: var(--space-s);
  font-size: var(--size-sm);
  color: var(--color-muted);
}

/* "See how it works" is a link field now (<a class="scroll-link"> as the only
   content of a rich-text div), so it carries a variant word instead of
   .hero__scroll-link, and the ↓ that was typed after it is drawn here. */
.hero__actions .scroll-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 3rem;
  font-weight: 500;
}

.hero__actions .scroll-link::after {
  content: "↓";
  content: "↓" / "";
  transition: translate var(--duration) ease;
}

.hero__actions .scroll-link:hover::after {
  translate: 0 0.125rem;
}

@media (min-width: 40rem) {
  .hero__title { font-size: var(--size-6xl); }
}

@media (min-width: 48rem) {
  .hero__title { font-size: var(--size-7xl); }
  .hero__intro { margin-top: var(--space-l); }
}

@media (min-width: 64rem) {
  .hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2xl);
  }

  .hero__title { font-size: 5.5rem; }
  .hero__intro { margin-top: 0; }
}

@media (min-width: 80rem) {
  .hero__head {
    display: block;
    padding-top: var(--space-xl);
  }

  .hero__title { font-size: 4.75rem; }
  .hero__intro { margin-top: var(--space-l); }
}

@media (min-width: 96rem) {
  .hero__title { font-size: 5.25rem; }
}

/* Small caps label above each side */
.demo-label {
  padding-bottom: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Website side */
.hero__web {
  position: relative;
  grid-area: web;
  margin-top: var(--space-2xl);
}

.hero__stage {
  position: relative;
}

/* The customer's website: a complete window on small screens; on large screens it bleeds off the left edge */
.browser-fragment {
  position: absolute;
  inset: 0 0 var(--space-xl) 0;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: 0 1px 2px var(--ink-06), 0 0 0 1px var(--ink-07);
}

/* 16:9 screenshot: scales with the screen (never below 40rem, never above its real 1280px), blurred, cropped by the window */
.browser-fragment__image {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  aspect-ratio: 16 / 9;
  width: clamp(40rem, 70vw, 80rem);
  max-width: none;
  filter: blur(3px);
  user-select: none;
}

/* Keeps the site's header and hero visible above the widget */
.hero__spacer {
  height: 16.5rem;
}

@media (min-width: 48rem) {
  .browser-fragment { right: var(--space-m); }
  .hero__spacer { height: 15.5rem; }
}

@media (min-width: 64rem) {
  .hero__web { margin-top: var(--space-3xl); }

  .browser-fragment {
    right: var(--space-xl);
    left: calc(-1 * (max(0px, (100vw - var(--wrapper-max)) / 2) + var(--gutter)));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .hero__spacer { height: 16.5rem; }
}

@media (min-width: 80rem) {
  .hero__web { margin-top: 0; }
  .hero__spacer { height: 17rem; }
}

/* The empty middle: only the connection */
.hero__line {
  position: relative;
  grid-area: line;
  display: flex;
  justify-content: center;
  padding-block: 1.25rem;
}

.demo-line {
  position: relative;
  width: 2px;
  height: 6rem;
}

.demo-line__traveller {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  box-shadow: 0 0 0 4px var(--color-paper);
  translate: -50% -50%;
  opacity: 0;
}

@media (min-width: 48rem) {
  .hero__line {
    justify-content: flex-end;
    padding-right: 9.5rem;
  }
}

@media (min-width: 64rem) {
  .hero__line {
    align-items: flex-end;
    margin-inline: -2.5rem;
    padding: 0 0 3.6rem;
  }

  .demo-line {
    width: 100%;
    height: 2px;
    --morse-angle: 90deg;
  }

  .demo-line__traveller {
    top: 50%;
    left: 0;
  }
}

@media (min-width: 80rem) {
  .hero__line {
    align-items: flex-start;
    margin-inline: -3.5rem;
    padding: 14rem 0 0;
  }
}

/* Telegram side */
.hero__tg {
  position: relative;
  grid-area: tg;
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .hero__tg { margin-right: 0; }
}

@media (min-width: 64rem) {
  .hero__tg {
    margin-inline: 0;
    margin-top: var(--space-3xl);
  }
}

@media (min-width: 80rem) {
  .hero__tg { margin-top: 6rem; }
}

/* Replay button under the demo */
.hero__replay {
  display: flex;
  justify-content: center;
  margin-top: var(--space-m);
}

.hero__replay .button {
  --button-height: 2.5rem;
  --button-padding: 1rem;
  --button-font-size: var(--size-sm);
  color: var(--color-ink-2);
}

.hero__replay .button:not([data-visible]) {
  visibility: hidden;
}

@media (min-width: 64rem) {
  .hero__replay {
    justify-content: flex-start;
    margin-top: var(--space-2xs);
  }
}

/* Demo items fade in and slide up while the conversation plays */
.demo-item {
  transition:
    opacity 500ms ease,
    translate 500ms ease;
}

.demo-item[data-state="hidden"] {
  opacity: 0;
  translate: 0 0.5rem;
}

/* The demo figure is a wrapper for meaning only: its parts sit directly in the hero grid */
.hero__demo {
  display: contents;
}

}

/* --- blocks/pb-how-steps.css --- */
@layer blocks {
/*
  Three steps in a row (homepage "How it works").
  Exception: [data-active] turns the top rule cyan while the hero demo plays that step.
  Pageblock "how-steps" - fields: heading; container "steps" (form "step": menu_title, text).
  From Pim's blocks/steps-strip.css. The step numbers ("01") were text in each step;
  they are a CSS counter now, so the items an editor adds, removes or reorders stay numbered.
*/

.steps-strip-section {
  border-top: 1px solid var(--color-rule);
}

.steps-strip-section .split {
  padding-block: var(--space-3xl);
}

@media (min-width: 48rem) {
  .steps-strip-section .split {
    padding-block: var(--space-4xl);
  }
}

.steps-strip {
  display: grid;
  gap: var(--space-l);
  counter-reset: step;
}

@media (min-width: 40rem) {
  .steps-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

@media (min-width: 64rem) {
  .steps-strip {
    gap: var(--space-xl);
  }
}

.steps-strip__item {
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-rule);
  transition: border-color 500ms ease;
  counter-increment: step;
}

.steps-strip__item[data-active] {
  border-top-color: var(--color-signal);
}

/* Was .steps-strip__number, an inline <span>01</span> before the title */
.steps-strip__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-signal-deep);
}

.steps-strip__title {
  margin-top: var(--space-xs);
  font-size: var(--size-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.steps-strip__text {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
}

@media (min-width: 48rem) {
  .steps-strip__title {
    font-size: 1.375rem;
  }
}

}

/* --- blocks/pb-why.css --- */
@layer blocks {
/*
  "Why Morse": one chain in which the Morse line runs straight through the steps
  other live-chat tools put in between. Vertical rail on small screens, one row from 64rem.
  Exceptions:
    .strike[data-state="ready"]  → line not drawn yet, skipped steps still bright (set by JS before animating)
    .strike__item[data-col="n"]  → grid column of the item on large screens
    .strike__label[data-removed] → a step Morse leaves out
  Pageblock "why" - fields: heading, lead, caption, figure_caption; per column
  website_/dashboard_/inbox_/telegram_ label + benefit (and dashboard_/inbox_hint).
  From Pim's blocks/strike.css. The eyebrow and title are one rich-text field now
  (<hgroup><p>label</p><h2>title</h2></hgroup>), styled through the hgroup with the
  declarations of .eyebrow[data-tone="on-dark"] and .heading-display; each column's
  benefit text (h3 + p) is a rich-text field (.strike__body) beside its icon.
*/

.why {
  --region-space: 5rem;
  background: var(--color-ink);
  color: var(--color-white);
}

@media (min-width: 48rem) {
  .why {
    --region-space: 7rem;
  }
}

.why__head {
  --split-gap: var(--space-m);
}

/* Was <p class="eyebrow" data-tone="on-dark"> */
.why__heading hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal);
}

/* Was <h2 class="heading-display why__title"> */
.why__heading hgroup > h2 {
  margin-top: var(--space-m);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .why__heading hgroup > p {
    font-size: var(--size-lg);
  }

  .why__heading hgroup > h2 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .why__heading hgroup > h2 {
    font-size: 5.5rem;
  }
}

.why__lead {
  --lead-color: rgb(255 255 255 / 0.6);
  max-width: 28rem;
}

.why__lead strong {
  font-weight: inherit;
  color: var(--color-white);
}

@media (min-width: 64rem) {
  .why__lead {
    align-self: end;
  }
}

.strike {
  margin-top: var(--space-3xl);
}

@media (min-width: 48rem) {
  .strike {
    margin-top: 6rem;
  }
}

.strike__caption {
  display: none;
  margin-bottom: var(--space-m);
  margin-left: calc(21.4% + 1rem);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}

.strike__grid {
  position: relative;
}

.strike__line {
  display: none;
}

.strike__item {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-xl);
}

.strike__item[data-col="4"] {
  padding-bottom: 0;
}

/* Vertical rail and end dots (small screens) */
.strike__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
}

.strike__item[data-col="1"] .strike__rail {
  top: 1rem;
}

.strike__item[data-col="4"] .strike__rail {
  bottom: auto;
  height: 1rem;
}

.strike__dot {
  position: absolute;
  top: 1rem;
  left: 12px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  box-shadow: 0 0 0 4px var(--color-ink);
  translate: -50% -50%;
}

.strike__label {
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.strike__label[data-removed] {
  font-weight: 500;
  color: rgb(255 255 255 / 0.3);
  text-decoration: line-through;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  transition: color 700ms ease;
}

.strike__end {
  display: none;
}

.strike__benefit {
  margin-top: var(--space-s);
  --icon-size: 1.5rem;
}

.strike__benefit .icon {
  color: var(--color-signal);
}

.strike__body > h3 {
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  font-weight: 600;
}

.strike__body > p {
  margin-top: 0.375rem;
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.6);
}

@media (min-width: 64rem) {
  .strike__caption {
    display: block;
  }

  .strike__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-l);
  }

  /* The line through the skipped steps */
  .strike__line {
    position: relative;
    z-index: 1;
    display: block;
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: center;
    height: 3px;
    pointer-events: none;
    transform-origin: left;
    transition: scale 1600ms var(--ease-in-out);
  }

  .strike__item {
    display: contents;
  }

  .strike__rail,
  .strike__dot {
    display: none;
  }

  .strike__label {
    grid-row: 1;
    align-self: center;
  }

  .strike__label[data-removed] {
    text-decoration: none;
  }

  .strike__label[data-end] {
    position: relative;
    z-index: 2;
    background: var(--color-ink);
  }

  .strike__item[data-col="1"] .strike__label {
    width: fit-content;
    padding-right: 1.25rem;
  }

  .strike__item[data-col="4"] .strike__label {
    padding-left: var(--space-m);
  }

  .strike__end {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-full);
    background: var(--color-signal);
    box-shadow: 0 0 0 4px var(--color-ink);
    translate: -50% -50%;
    transition: opacity 500ms ease 1400ms;
  }

  .strike__benefit {
    grid-row: 2;
    margin-top: 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--white-10);
  }

  .strike__item[data-col="1"] > .strike__label,
  .strike__item[data-col="1"] > .strike__benefit { grid-column: 1; }
  .strike__item[data-col="2"] > .strike__label,
  .strike__item[data-col="2"] > .strike__benefit { grid-column: 2; }
  .strike__item[data-col="3"] > .strike__label,
  .strike__item[data-col="3"] > .strike__benefit { grid-column: 3; }
  .strike__item[data-col="4"] > .strike__label,
  .strike__item[data-col="4"] > .strike__benefit { grid-column: 4; }

  /* The skipped steps fade as the line passes them */
  .strike__item[data-col="2"] .strike__label[data-removed] { transition-delay: 500ms; }
  .strike__item[data-col="3"] .strike__label[data-removed] { transition-delay: 900ms; }

  .strike[data-state="ready"] .strike__line { scale: 0 1; }
  .strike[data-state="ready"] .strike__label[data-removed] { color: rgb(255 255 255 / 0.75); }
  .strike[data-state="ready"] .strike__end { opacity: 0; }
}

@media (min-width: 80rem) {
  .strike__label {
    font-size: 1.75rem;
  }
}

@media (min-width: 96rem) {
  .strike__label {
    font-size: 2rem;
  }
}

}

/* --- blocks/pb-product.css --- */
@layer blocks {
/*
  Horizontal product scroller: slides snap into place, dots and arrows below/above.
  Exceptions: .slide[data-tint="signal|blue|telegram"] sets the panel colour and line position;
  dot buttons use aria-current="true" for the active slide.
  Pageblock "product" - fields: heading; container "slides" (form "slide": image,
  menu_title, text, checks, tint = data-tint).
  From Pim's blocks/slider.css. The eyebrow and title are one rich-text field now,
  styled through the hgroup with the declarations of .eyebrow and .heading-section.
  The slide counter ("01 / 03") and the dot buttons are no longer in the markup:
  js/site.js writes them, so the empty elements keep their height here.
*/

.slider-head {
  --repel-align: flex-end;
  --repel-gap: var(--space-m);
}

/* Was <p class="eyebrow"> */
.slider-head__heading hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

/* Was <h2 class="heading-section slider-head__title"> */
.slider-head__heading hgroup > h2 {
  max-width: 16ch;
  margin-top: var(--space-s);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .slider-head__heading hgroup > p {
    font-size: var(--size-lg);
  }

  .slider-head__heading hgroup > h2 {
    font-size: var(--size-5xl);
  }
}

.slider-controls {
  display: none;
  gap: var(--space-2xs);
}

@media (min-width: 48rem) {
  .slider-controls {
    display: flex;
  }
}

.slider {
  display: flex;
  gap: 1.25rem;
  margin-top: var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .slider {
    margin-top: 3.5rem;
  }
}

@media (min-width: 64rem) {
  .slider {
    gap: 0;
  }
}

/* A slide: the next one peeks in on small screens */
.slide {
  width: 86%;
  flex-shrink: 0;
  scroll-snap-align: start;
  align-items: center;
}

@media (min-width: 40rem) {
  .slide {
    width: 100%;
  }
}

.slide__figure {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: var(--space-l);
}

@media (min-width: 64rem) {
  .slide__figure {
    padding-block: var(--space-2xl);
  }
}

.slide__panel {
  position: absolute;
  inset: 0 6%;
  border-radius: 2.5rem;
  background: var(--slide-tint, var(--color-signal-tint));
}

.slide__line {
  position: absolute;
  top: var(--line-y, 64%);
  right: 6%;
  left: 0;
  height: 2px;
}

.slide__dot {
  position: absolute;
  top: var(--line-y, 64%);
  right: 6%;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  box-shadow: 0 0 0 4px var(--color-paper);
  translate: 50% -50%;
}

.slide__image {
  position: relative;
  width: min(19rem, 68%);
  border-radius: 1.1rem;
  filter: drop-shadow(0 30px 50px rgb(15 21 24 / 0.22));
}

.slide[data-tint="blue"] {
  --slide-tint: var(--color-blue-tint);
  --line-y: 36%;
}

/* On the second slide the line comes in from the right and ends in a dot on the left */
.slide[data-tint="blue"] .slide__line {
  right: 0;
  left: 6%;
}

.slide[data-tint="blue"] .slide__dot {
  right: auto;
  left: 6%;
  translate: -50% -50%;
}

.slide[data-tint="telegram"] {
  --slide-tint: var(--color-tg-wall);
  --line-y: 58%;
}

.slide[data-tint="telegram"] .slide__image {
  width: min(17rem, 62%);
  border-radius: 0;
  filter: drop-shadow(0 30px 50px rgb(15 21 24 / 0.28));
}

.slide__counter {
  min-height: 1lh; /* empty until js/site.js writes "01 / 03" */
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-muted);
}

.slide__title {
  margin-top: var(--space-xs);
  font-size: var(--size-3xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.slide__text {
  max-width: 28rem;
  margin-top: var(--space-s);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

@media (min-width: 48rem) {
  .slide__title {
    font-size: var(--size-4xl);
  }
}

.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 1.75rem; /* one dot button, so the row does not jump when js/site.js adds them */
  margin-top: var(--space-l);
}

@media (min-width: 64rem) {
  .slider-dots {
    justify-content: flex-start;
  }
}

.slider-dots button {
  padding: var(--space-2xs);
}

.slider-dots span {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--ink-15);
  transition:
    background-color var(--duration) ease,
    scale var(--duration) ease;
}

.slider-dots button[aria-current="true"] span {
  background: var(--color-signal);
  scale: 1.25;
}

/* The checks are a rich-text field: <ul class="check-list"><li><p>…</p></li></ul>,
   empty on slides without a list. The margin sits on the list so an empty field
   takes no room; the two columns (was data-columns="2") and the check badge (was
   <span class="check-list__badge"> with an SVG in each item) are drawn here,
   because the editor keeps neither an attribute on the list nor a span in an item. */
.slide__checks > ul {
  margin-top: 1.75rem;
}

@media (min-width: 40rem) {
  .slide__checks > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.slide__checks > ul > li::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 0.875rem 0.875rem no-repeat;
}

}

/* --- blocks/pb-pricing.css --- */
@layer blocks {
/*
  Pricing: the two prices and a calculator for your own number of websites.
  Pageblock "pricing" - fields: intro; first_label, first_amount, first_unit;
  extra_label, extra_amount, extra_unit; calc_label, total_label, month_before,
  month_after, button, note.
  From Pim's blocks/pricing.css. The agency note under the price card is its own
  block now ("agencies", pb-agencies.css), placed right after this one: this block's
  bottom padding is the gap the aside kept above itself (its margin-top), and the
  agencies block carries the bottom padding this section had (6rem, 8rem from 48rem).
  The intro is one rich-text field (hgroup + p); the prices are a list, not a <dl>.
*/

.pricing {
  padding-bottom: var(--space-3xl);
}

@media (min-width: 48rem) {
  .pricing {
    padding-bottom: var(--space-4xl);
  }
}

.pricing .split {
  --split-gap: var(--space-2xl);
}

@media (min-width: 64rem) {
  .pricing__intro {
    padding-top: var(--space-m);
  }
}

/* The label above the heading (was <p class="eyebrow">). Pim's ".pricing__intro p"
   below also caught that paragraph and, being in the later blocks layer, won over
   .eyebrow: so this label is ink-2, lg at every width, with a 1.25rem top margin.
   Kept exactly as it rendered. */
.pricing__intro hgroup > p {
  max-width: 20rem;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

/* Was <h2 class="heading-section"> */
.pricing__intro hgroup > h2 {
  margin-top: var(--space-s);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .pricing__intro hgroup > h2 {
    font-size: var(--size-5xl);
  }
}

.pricing__intro > p {
  max-width: 20rem;
  margin-top: 1.25rem;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

.price-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--ring);
}

@media (min-width: 48rem) {
  .price-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.price-card__prices,
.calculator {
  padding: 1.75rem;
}

@media (min-width: 48rem) {
  .price-card__prices,
  .calculator {
    padding: var(--space-xl);
  }
}

.price-card__prices {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-l);
}

/* Was each <dt> */
.price-card__label {
  color: var(--color-ink-2);
}

.price-card__amount {
  margin-top: var(--space-3xs);
  font-size: var(--size-6xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.price-card__unit {
  margin-left: 0.375rem;
  font-size: var(--size-xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--color-muted);
}

.price-card__extra {
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-rule);
}

.price-card__extra .price-card__amount {
  font-size: var(--size-4xl);
  letter-spacing: -0.04em;
}

.price-card__extra .price-card__unit {
  font-size: var(--size-lg);
}

.price-card__plus {
  color: var(--color-signal-deep);
}

@media (min-width: 48rem) {
  .price-card__amount {
    font-size: var(--size-7xl);
  }

  .price-card__extra .price-card__amount {
    font-size: var(--size-5xl);
  }
}

/* Calculator */
.calculator {
  background: var(--color-signal-tint);
}

.calculator__label {
  font-weight: 500;
}

.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.stepper__button {
  --icon-button-bg: var(--color-white);
  --icon-button-ring: var(--ink-10);
  font-size: var(--size-xl);
}

.stepper__button:hover {
  box-shadow: inset 0 0 0 1px var(--ink-30);
}

.stepper__button:disabled {
  opacity: 0.4;
}

.stepper__count {
  width: 3.5rem;
  font-size: var(--size-3xl);
  font-weight: 600;
  text-align: center;
}

.calculator__total-label {
  margin-top: var(--space-l);
  color: var(--color-ink-2);
}

.calculator__total {
  margin-top: var(--space-3xs);
  font-size: var(--size-5xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .calculator__total {
    font-size: var(--size-6xl);
  }
}

.calculator__month {
  margin-top: var(--space-2xs);
  font-size: var(--size-sm);
  color: var(--color-ink-2);
}

.calculator .button {
  margin-top: var(--space-l);
}

.calculator__note {
  margin-top: var(--space-xs);
  font-size: var(--size-sm);
  text-align: center;
  color: var(--color-ink-2);
}

}

/* --- blocks/pb-agencies.css --- */
@layer blocks {
/*
  Agencies: the agency note, a secondary use case shown right after the pricing block.
  Pageblock "agencies" - fields: body (h2 + p), link (mailto). The launchers are decoration.
  From Pim's blocks/pricing.css ("Agencies"). It was an <aside> under the price card
  inside the pricing section; it is its own section now, in the same wrapper and
  4-8 split with the aside in the right column. The gap above the card (the aside's
  margin-top: 4rem, 5rem from 48rem) is now the pricing block's bottom padding, so the
  card has no top margin and the section has no top padding; the section carries the
  bottom padding the pricing section had (6rem, 8rem from 48rem) and the aside's
  scroll-margin, since #agencies is the section now.
*/
.agencies {
  padding-bottom: 6rem;
  scroll-margin-top: 6rem;
}

@media (min-width: 48rem) {
  .agencies {
    padding-bottom: 8rem;
  }
}

/* Holds the split's first column so the aside is its second child (5 / span 8 from
   64rem); it draws no box, so there is no row gap above the aside on small screens. */
.agencies__spacer {
  display: none;
}

.agency {
  padding: 1.75rem;
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--ring);
}

@media (min-width: 48rem) {
  .agency {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl);
  }

  .agency__text {
    flex: 1;
  }
}

/* Was <h2 class="heading-card"> */
.agency__body > h2 {
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 48rem) {
  .agency__body > h2 {
    font-size: 1.75rem;
  }
}

.agency__body > p {
  max-width: 32rem;
  margin-top: var(--space-xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

/* The link is a field: <a class="link-arrow"> alone in a rich-text div, without the
   .link-arrow__label / .link-arrow__icon spans (rich text keeps no spans). The
   underline the label had is on the link, and the arrow is drawn after it as an
   inline-block, which an underline does not reach. */
.agency__more .link-arrow {
  display: inline-block;
  margin-top: 1.25rem;
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.agency__more .link-arrow::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: translate var(--duration) ease;
}

.agency__more .link-arrow:hover::after {
  translate: 0.125rem 0;
}

.launchers {
  --cluster-gap: var(--space-xs);
  margin-top: var(--space-l);
  flex-wrap: nowrap;
}

@media (min-width: 48rem) {
  .launchers {
    margin-top: 0;
  }
}

/* A chat launcher in a client's brand colour: data-brand="signal|pink|blue|green|forest" */
.launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--launcher-size, 3.5rem);
  height: var(--launcher-size, 3.5rem);
  border-radius: var(--radius-full);
  background: var(--launcher-color, var(--color-signal));
  color: var(--color-white);
  --icon-size: calc(var(--launcher-size, 3.5rem) * 0.43);
}

.launcher[data-brand="pink"] { --launcher-color: var(--color-brand-pink); }
.launcher[data-brand="blue"] { --launcher-color: var(--color-brand-blue); }
.launcher[data-brand="green"] { --launcher-color: var(--color-brand-green); }
.launcher[data-brand="forest"] { --launcher-color: var(--color-brand-forest); }

}

/* --- blocks/pb-short-answers.css --- */
@layer blocks {
/*
  Homepage "Short answers": a sticky heading beside five questions.
  Pageblock "short-answers" - fields: heading; container "questions" (form "faq":
  menu_title, answer); link.
  From Pim's blocks/accordion.css ("Homepage Short answers"); the accordion itself is
  the shared component (components/accordion.css).
*/

.short-answers {
  background: var(--color-white);
}

@media (min-width: 64rem) {
  .short-answers .heading-section {
    position: sticky;
    top: 8rem;
  }
}

/* "See all questions" is a field: <a class="link-arrow"> alone in a rich-text div,
   without the .link-arrow__label / .link-arrow__icon spans (rich text keeps no spans).
   The underline the label had is on the link, and the arrow is drawn after it as an
   inline-block, which an underline does not reach. */
.short-answers__more .link-arrow {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.short-answers__more .link-arrow::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: translate var(--duration) ease;
}

.short-answers__more .link-arrow:hover::after {
  translate: 0.125rem 0;
}

}

/* --- blocks/pb-closing.css --- */
@layer blocks {
/*
  Homepage closing: website → Telegram → website, in type.
  Pageblock "closing" - fields: first_line, second_line, third_line (the title's three
  lines, each its own text field on Pim's spans, so the span rules below still hold),
  button, note.
  From Pim's blocks/closing.css (the homepage part; cta-row and cta-band are components).
*/
.closing {
  background: var(--color-ink);
  color: var(--color-white);
}

.closing .wrapper {
  padding-block: 6rem 5rem;
}

@media (min-width: 48rem) {
  .closing .wrapper {
    padding-block: 9rem 7rem;
  }
}

.closing__title {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tightest);
}

.closing__title span {
  display: block;
  max-width: 17ch;
}

.closing__title span + span {
  margin-top: var(--space-s);
}

.closing__title span:nth-child(2) {
  color: rgb(255 255 255 / 0.5);
}

.closing__title span:nth-child(3) {
  max-width: none;
  color: var(--color-signal);
}

@media (min-width: 40rem) {
  .closing__title { font-size: var(--size-5xl); }
}

@media (min-width: 48rem) {
  .closing__title { font-size: var(--size-6xl); }

  .closing__title span + span {
    margin-top: var(--space-m);
  }

  .closing__title span:nth-child(2) {
    margin-left: auto;
    text-align: right;
  }
}

@media (min-width: 64rem) {
  .closing__title { font-size: var(--size-7xl); }
}

@media (min-width: 80rem) {
  .closing__title { font-size: 5.5rem; }
}

.closing__actions {
  --cluster-gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-xl);
}

.closing__actions > p {
  color: rgb(255 255 255 / 0.6);
}

@media (min-width: 48rem) {
  .closing__actions {
    margin-top: var(--space-2xl);
  }
}

}

/* --- blocks/pb-hiw-intro.css --- */
@layer blocks {
/* Pageblock: hiw-intro (How it works: intro with "What you need").
   Fields: body (rich text: hgroup [label p + h1], p.lead) · needs_title (text) · needs (container, form "need": menu_title) */

.hiw-intro {
  padding-block: var(--space-2xl) var(--space-3xl);
  --split-gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .hiw-intro {
    padding-block: var(--space-4xl) 6rem;
  }
}

/* The label above the heading (was p.eyebrow) */
.hiw-intro__body hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

@media (min-width: 48rem) {
  .hiw-intro__body hgroup > p {
    font-size: var(--size-lg);
  }
}

/* The heading (was h1.heading-page) */
.hiw-intro__body hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .hiw-intro__body hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .hiw-intro__body hgroup > h1 {
    font-size: 5.25rem;
  }
}

.hiw-intro .lead {
  max-width: 36rem;
  margin-top: var(--space-m);
}

@media (min-width: 64rem) {
  .hiw-intro > :nth-child(2) {
    align-self: end;
  }
}

.needs-card {
  padding: 1.75rem;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--ring);
}

@media (min-width: 48rem) {
  .needs-card {
    padding: var(--space-l);
  }
}

.needs-card h2 {
  font-size: var(--size-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.needs-card .check-list {
  --check-list-size: var(--size-base);
  --check-list-align: flex-start;
  --check-list-gap: var(--space-s);
  margin-top: 1.25rem;
}

}

/* --- blocks/pb-hiw-flow.css --- */
@layer blocks {
/* Pageblock: hiw-flow (How it works: what happens to a message).
   Fields: title (text) · steps (container, form "flow-step": tint + role (data-tint, data-role), picture (image), menu_title, text)
   Every step is written the same way: the Morse line and label show only on the step with data-role="line",
   its image is hidden; the step number is a CSS counter. */

.flow-panel-section {
  padding-bottom: 5rem;
}

@media (min-width: 48rem) {
  .flow-panel-section {
    padding-bottom: 7rem;
  }
}

.flow-panel {
  display: grid;
  margin-top: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--color-white);
  box-shadow: var(--ring);
  counter-reset: flow-step;
}

@media (min-width: 48rem) {
  .flow-panel {
    margin-top: 3.5rem;
  }
}

@media (min-width: 64rem) {
  .flow-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

.flow-panel__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-m) var(--space-l);
  text-align: center;
  counter-increment: flow-step;
}

@media (min-width: 48rem) {
  .flow-panel__step {
    padding-inline: var(--space-xl);
  }
}

.flow-panel__step[data-tint="signal"] {
  background: var(--color-signal-tint);
}

.flow-panel__step[data-tint="telegram"] {
  background: var(--color-tg-wall);
}

.flow-panel__step img {
  width: auto;
  height: 19rem;
}

.flow-panel__step[data-tint="signal"] img {
  border-radius: var(--radius-l);
  filter: drop-shadow(0 24px 40px rgb(15 21 24 / 0.2));
}

.flow-panel__step[data-tint="telegram"] img {
  filter: drop-shadow(0 24px 40px rgb(15 21 24 / 0.25));
}

/* A picture step: the line and label are not drawn, and the text wrapper
   adds no box, so its parts sit in the step's column as before */
.flow-panel__step:not([data-role="line"]) > .flow-panel__line,
.flow-panel__step:not([data-role="line"]) > .flow-panel__label {
  display: none;
}

.flow-panel__step:not([data-role="line"]) > div {
  display: contents;
}

.flow-panel__number {
  margin-top: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-signal-deep);
}

.flow-panel__number::before {
  content: counter(flow-step, decimal-leading-zero);
}

.flow-panel__step h3 {
  margin-top: var(--space-2xs);
  font-size: var(--size-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.flow-panel__step p:last-child {
  max-width: 20rem;
  margin-top: var(--space-2xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

/* The middle step sits on the Morse line */
.flow-panel__step[data-role="line"] {
  position: relative;
  justify-content: center;
  padding-block: var(--space-2xl);
}

.flow-panel__step[data-role="line"] img {
  display: none;
}

.flow-panel__line {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
}

@media (min-width: 64rem) {
  .flow-panel__line {
    inset: calc(50% - 4.5rem) 0 auto;
    width: 100%;
    height: 2px;
    translate: none;
    --morse-angle: 90deg;
  }

  /* Without layers, .morse-line[data-direction="vertical"] would outrank the rule above
     and keep the dashes vertical; Pim's blocks layer won regardless of specificity */
  .flow-panel__step[data-role="line"] .flow-panel__line {
    --morse-angle: 90deg;
  }
}

.flow-panel__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.5rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  font-weight: 600;
  color: var(--color-white);
  box-shadow: 0 12px 30px -12px rgb(15 21 24 / 0.5);
  --icon-size: 1.5rem;
}

.flow-panel__label .icon {
  color: var(--color-signal);
}

.flow-panel__step[data-role="line"] > div {
  position: relative;
  margin-top: var(--space-l);
  padding-inline: var(--space-2xs);
  background: var(--color-white);
}

.flow-panel__step[data-role="line"] .flow-panel__number {
  margin-top: 0;
}

}

/* --- blocks/pb-hiw-setup.css --- */
@layer blocks {
/* Pageblock: hiw-setup (How it works: set up in six steps, section id "setup").
   Fields: body (rich text: hgroup [label p + h2], p.lead, last paragraph one button link)
           · steps (container, form "setup-step": menu_title, text (rich text: p, optional last paragraph with one text link),
             visual (data-visual: "launchers" shows the chat launchers under the step))
           · live (text)
   Step numbers are a CSS counter. "You're live." stands after the list in .numbered-steps__end. */

/* Chat launchers in a client's brand colour (shared with the homepage's pricing block, copied so this block stands alone) */
.launchers {
  --cluster-gap: var(--space-xs);
  margin-top: var(--space-l);
  flex-wrap: nowrap;
}

@media (min-width: 48rem) {
  .launchers {
    margin-top: 0;
  }
}

.launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--launcher-size, 3.5rem);
  height: var(--launcher-size, 3.5rem);
  border-radius: var(--radius-full);
  background: var(--launcher-color, var(--color-signal));
  color: var(--color-white);
  --icon-size: calc(var(--launcher-size, 3.5rem) * 0.43);
}

.launcher[data-brand="pink"] { --launcher-color: var(--color-brand-pink); }
.launcher[data-brand="blue"] { --launcher-color: var(--color-brand-blue); }
.launcher[data-brand="green"] { --launcher-color: var(--color-brand-green); }
.launcher[data-brand="forest"] { --launcher-color: var(--color-brand-forest); }

/* Setup guide */
.setup {
  background: var(--color-white);
}

.setup .split {
  --split-gap: var(--space-2xl);
}

@media (min-width: 64rem) {
  .setup .split > :nth-child(2) {
    grid-column: 6 / span 7;
  }

  .setup__intro-inner {
    position: sticky;
    top: 8rem;
  }
}

/* The label above the heading (was p.eyebrow, which .setup__intro p also reached) */
.setup__intro-inner hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

@media (min-width: 48rem) {
  .setup__intro-inner hgroup > p {
    font-size: var(--size-lg);
  }
}

/* The heading (was h2.heading-section) */
.setup__intro-inner hgroup > h2 {
  margin-top: var(--space-s);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .setup__intro-inner hgroup > h2 {
    font-size: var(--size-5xl);
  }
}

.setup__intro-inner hgroup > p,
.setup__intro-inner > p {
  max-width: 24rem;
  margin-top: 1.25rem;
}

/* The paragraph holding the call to action adds nothing; the button keeps its own space */
.setup__intro-inner > p:has(> a.button:only-child) {
  max-width: none;
  margin-top: 0;
}

.setup__intro .button {
  margin-top: var(--space-l);
}

.numbered-steps {
  counter-reset: setup-step;
}

.numbered-steps > li,
.numbered-steps__end {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--space-s);
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-rule);
}

.numbered-steps > li {
  counter-increment: setup-step;
}

.numbered-steps > li:first-child,
.numbered-steps__end {
  border-top-color: var(--color-ink);
}

.numbered-steps__end {
  align-items: center;
  padding-bottom: 0;
}

@media (min-width: 48rem) {
  .numbered-steps > li,
  .numbered-steps__end {
    grid-template-columns: 5rem minmax(0, 1fr);
    padding-block: var(--space-xl);
  }

  .numbered-steps__end {
    padding-bottom: 0;
  }
}

.numbered-steps__number {
  font-family: var(--font-mono);
  font-size: var(--size-3xl);
  line-height: 1;
  color: var(--color-signal-deep);
}

.numbered-steps__number::before {
  content: counter(setup-step, decimal-leading-zero);
}

@media (min-width: 48rem) {
  .numbered-steps__number {
    font-size: var(--size-4xl);
  }
}

.numbered-steps h3 {
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.numbered-steps__text > p {
  max-width: 32rem;
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

/* A step's text may end with one text link (was a.link-arrow); the arrow is drawn here */
.numbered-steps__text > p:has(> a.text-link:only-child) {
  max-width: none;
  margin-top: var(--space-s);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.numbered-steps__text .text-link {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.numbered-steps__text .text-link::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: translate var(--duration) ease;
}

.numbered-steps__text .text-link:hover::after {
  translate: 0.125rem 0;
}

.numbered-steps .launchers {
  --launcher-size: 2.75rem;
  --cluster-gap: 0.625rem;
  margin-top: 1.25rem;
}

.numbered-steps > li:not([data-visual="launchers"]) .launchers {
  display: none;
}

.numbered-steps__done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  color: var(--color-ink);
  --icon-size: 1.25rem;
}

@media (min-width: 48rem) {
  .numbered-steps__done {
    width: 3rem;
    height: 3rem;
  }
}

/* Inside the list, Pim's ".numbered-steps p" set this line's size, spacing and colour; kept as it looked */
.numbered-steps__live {
  max-width: 32rem;
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-2);
}

}

/* --- blocks/pb-hiw-live.css --- */
@layer blocks {
/* Pageblock: hiw-live (How it works: day to day, on dark).
   Fields: heading (rich text: hgroup [label p + h2]) · benefits (container, form "live-benefit": icon (image), menu_title, text) */

/* The label above the heading (was p.eyebrow data-tone="on-dark") */
.day-to-day__body hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal);
}

@media (min-width: 48rem) {
  .day-to-day__body hgroup > p {
    font-size: var(--size-lg);
  }
}

/* The heading (was h2.heading-large) */
.day-to-day__body hgroup > h2 {
  max-width: 14ch;
  margin-top: var(--space-s);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .day-to-day__body hgroup > h2 {
    font-size: var(--size-6xl);
  }
}

.columns-divided {
  display: grid;
  gap: var(--space-xl);
  margin-top: 3.5rem;
}

@media (min-width: 48rem) {
  .columns-divided {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 5rem;
  }

  .columns-divided > * {
    padding-inline: var(--space-xl);
  }

  .columns-divided > * + * {
    border-left: 1px solid var(--white-10);
  }

  .columns-divided > :first-child {
    padding-left: 0;
  }

  .columns-divided > :last-child {
    padding-right: 0;
  }
}

.columns-divided .icon {
  --icon-size: 2rem;
  color: var(--color-signal);
}

.columns-divided h3 {
  margin-top: var(--space-m);
  font-size: var(--size-xl);
  font-weight: 600;
}

.columns-divided p {
  margin-top: var(--space-2xs);
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.65);
}

}

/* --- blocks/pb-hiw-cta.css --- */
@layer blocks {
/* Pageblock: hiw-cta (How it works: closing row, above a rule).
   Fields: title (text) · button (call to action) · note (text) */

.close-row {
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-ink);
}

.close-row .heading-large {
  max-width: 16ch;
}

/* The call to action's field draws no box: the button is the cluster's item, as before */
.close-row .cluster > .rich-text {
  display: contents;
}

}

/* --- blocks/pb-faq-intro.css --- */
@layer blocks {
/*
  Pageblock: faq-intro
  Fields: heading (rich text: hgroup with the label and the h1) · lead (rich text: p.lead with the mailto link)
  Layout and spacing: components/page-intro.css (.page-intro, .page-intro__row).
  The label and the heading are one field, so the label moved into the row's first column,
  directly above the heading; the rules below give both the look .eyebrow and .heading-page gave them.
*/

/* The label used to sit above the row, which kept a gap below it; inside the row that gap is the heading's margin */
.pb-faq-intro .page-intro__row {
  margin-top: 0;
}

/* Label (was p.eyebrow) */
.pb-faq-intro__heading hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--color-signal-deep));
}

/* Heading (was h1.heading-page) */
.pb-faq-intro__heading hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .pb-faq-intro__heading hgroup > p {
    font-size: var(--size-lg);
  }

  .pb-faq-intro__heading hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .pb-faq-intro__heading hgroup > h1 {
    font-size: 5.25rem;
  }
}

/* A link in the lead (was a.link-inline) */
.pb-faq-intro__lead > p a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

}

/* --- blocks/pb-faq-topics.css --- */
@layer blocks {
/*
  Pageblock: faq-topics
  Fields: toc_label (text) · topics (container, form faq-topic: anchor, menu_title;
  children: questions, form faq: menu_title, answer (rich text))
  FAQ page: topics next to a sticky TOC, the topic chips above them on small screens.
  Components: toc.css (chip-row, chip, toc, toc-layout, numbered-heading), accordion.css.
*/

.faq-topics {
  display: grid;
  gap: 4rem;
}

@media (min-width: 48rem) {
  .faq-topics {
    gap: 5rem;
  }
}

.faq-topics .numbered-heading {
  font-size: var(--size-3xl);
}

@media (min-width: 48rem) {
  .faq-topics .numbered-heading {
    font-size: var(--size-4xl);
  }
}

/* The topic's number comes from a counter, so topics can be added and reordered
   (it was a span with "01" typed in; styled as .numbered-heading__number) */
.faq-topics {
  counter-reset: faq-topic;
}

.faq-topics .numbered-heading {
  counter-increment: faq-topic;
}

.faq-topics .numbered-heading::before {
  content: counter(faq-topic, decimal-leading-zero);
  content: counter(faq-topic, decimal-leading-zero) / "";
  font-family: var(--font-mono);
  font-size: var(--size-base);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-signal-deep);
}

.faq-topics .accordion {
  margin-top: var(--space-m);
}

.faq-topics .accordion__answer {
  line-height: var(--leading-relaxed);
}

/* A link in an answer (was a.link-inline) */
.faq-topics .accordion__answer > p a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.toc-layout[data-page="faq"] {
  padding-top: var(--space-xl);
}

/* The FAQ topic list is shorter, so it gets larger items */
.toc-layout[data-page="faq"] .toc__list li + li {
  margin-top: 0.25rem;
}

.toc-layout[data-page="faq"] .toc__list a {
  padding-block: var(--space-2xs);
  font-size: var(--size-base);
}

@media (min-width: 64rem) {
  .toc-layout[data-page="faq"] {
    padding-top: var(--space-l);
  }

  /* Scoped to the FAQ layout (Pim's rule was for every .toc-layout; terms-topics carries its own) */
  .toc-layout[data-page="faq"] > :first-child {
    grid-column: 1 / span 3;
  }

  .toc-layout[data-page="faq"] > :nth-child(2) {
    grid-column: 5 / span 8;
  }
}

}

/* --- blocks/pb-faq-help.css --- */
@layer blocks {
/*
  Pageblock: faq-help
  Fields: body (rich text: h2, p.lead) · email_button · try_button
  Light closing band. Layout: components/cta.css (.cta-row, .cta-row__text, .cta-row__actions).
*/

.help-band {
  background: var(--color-white);
}

.help-band .button[data-variant="outline"]:hover {
  background: var(--color-paper);
}

/* Heading (was h2.heading-large) */
.pb-faq-help__body > h2 {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .pb-faq-help__body > h2 {
    font-size: var(--size-6xl);
  }
}

}

/* --- blocks/pb-guides-intro.css --- */
@layer blocks {
/*
  Pageblock: guides-intro - the opening of the guides overview.
  Fields: heading (rich text: hgroup with the label and the h1) · lead (text)
  Layout and spacing: components/page-intro.css (.page-intro, .page-intro__row).
  The label and the heading are one field, so the label moved into the row's first column,
  directly above the heading; the rules below give both the look .eyebrow and .heading-page gave them.
*/

.guides-intro {
  --page-intro-bottom: var(--space-xl);
  --page-intro-bottom-md: 3.5rem;
}

/* The label used to sit above the row, which kept a gap below it; inside the row that gap is the heading's margin */
.pb-guides-intro .page-intro__row {
  margin-top: 0;
}

/* Label (was p.eyebrow) */
.pb-guides-intro__heading hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--color-signal-deep));
}

/* Heading (was h1.heading-page) */
.pb-guides-intro__heading hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .pb-guides-intro__heading hgroup > p {
    font-size: var(--size-lg);
  }

  .pb-guides-intro__heading hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .pb-guides-intro__heading hgroup > h1 {
    font-size: 5.25rem;
  }
}

}

/* --- blocks/pb-guides-list.css --- */
@layer blocks {
/*
  Pageblock: guides-list - filters, search, sort menu, the guide cards and the empty state.
  Fields: search_label · sort_by_label · sort_label · sort_current · count · empty_text · reset_label (all text)
  Containers: topics (form guide-topic: menu_title, filter) · sort_options (form guide-sort: menu_title, value)
              guides (form guide, permalink /guides/{alias}: cover (picture), topic, menu_title, excerpt; data-topic, data-cover)
  The cards and the grid are the guide-card component; .guide-card[data-featured] is set by the script.
*/

.guides-controls {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--color-rule);
}

@media (min-width: 64rem) {
  .guides-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.guides-controls .chip-row {
  display: flex;
  --chip-height: 2.75rem;
  --chip-padding: 1.25rem;
  --chip-size: var(--size-ui);
}

@media (min-width: 48rem) {
  .guides-controls .chip-row {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.guides-controls__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@media (min-width: 40rem) {
  .guides-controls__right {
    flex-direction: row;
    align-items: center;
  }
}

.search-field {
  position: relative;
  display: block;
}

@media (min-width: 40rem) {
  .search-field {
    width: 16rem;
  }
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: var(--space-s);
  translate: 0 -50%;
  color: var(--color-muted);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--space-s) 0 2.5rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--size-ui);
  outline: none;
}

.search-field input::placeholder {
  color: var(--color-muted);
}

.search-field input:hover {
  border-color: var(--ink-30);
}

.search-field input:focus {
  border-color: var(--color-signal-deep);
  box-shadow: 0 0 0 1px var(--color-signal-deep);
}

.sort-menu {
  position: relative;
}

.sort-menu__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--space-s) 0 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--size-ui);
  transition: border-color var(--duration) ease;
}

.sort-menu__button:hover {
  border-color: var(--ink-30);
}

@media (min-width: 40rem) {
  .sort-menu__button {
    width: auto;
  }
}

.sort-menu__label {
  color: var(--color-ink-2);
}

.sort-menu__current {
  flex: 1;
  font-weight: 500;
  text-align: left;
}

@media (min-width: 40rem) {
  .sort-menu__current {
    flex: none;
  }
}

.sort-menu__chevron {
  margin-left: var(--space-3xs);
  color: var(--color-muted);
  transition: rotate 200ms ease;
}

.sort-menu__button[aria-expanded="true"] .sort-menu__chevron {
  rotate: 180deg;
}

.sort-menu .popover-menu {
  --popover-width: 15rem;
  z-index: 30;
  outline: none;
}

.guides-count {
  margin-top: 1.25rem;
  color: var(--color-ink-2);
}

.guides-list {
  padding-block: var(--space-l) 5rem;
}

@media (min-width: 48rem) {
  .guides-list {
    padding-bottom: 7rem;
  }
}

.empty-state {
  padding: 4rem var(--space-m);
  border: 2px dashed var(--ink-15);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.empty-state p {
  font-size: var(--size-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.empty-state .button {
  margin-top: 1.25rem;
}

/*
  Covers are pictures, one per guide, taken from Pim's illustrated covers at 660x344 (a 1440px wide page).
  The picture takes the box the illustrated cover took: height, radius, ring and hover lift come from .cover
  in the guide-card component, and data-cover (a field of each guide) still picks the background colour.
  At 660x344 it fills the box exactly; in a box of another shape (the featured card, narrower columns,
  phones) it is shown whole and the rest of the box is that same colour, as Pim's covers centre their
  illustration on a flat background. The WordPress one sits on the bottom edge, as its admin screen did.
*/
.cover--image {
  display: block;
  width: 100%;
  padding: 0;
  object-fit: contain;
}

.cover--image[data-cover-tone="wordpress"] {
  object-position: 50% 100%;
}

}

/* --- blocks/pb-guides-cta.css --- */
@layer blocks {
/*
  Pageblock: guides-cta - the dark "Rather see it for yourself?" band under the guides overview.
  Fields: body (rich text: h2, p.lead) · button (call to action: one button link to try.html)
  The band and its row are the cta component (cta-band, cta-row).
*/

/* The heading (was h2.heading-large) */
.pb-guides-cta .cta-row__text > h2 {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .pb-guides-cta .cta-row__text > h2 {
    font-size: var(--size-6xl);
  }
}

/* The call to action's field draws no box: the button is the cluster's item, as before */
.pb-guides-cta .cta-row__actions > .rich-text {
  display: contents;
}

/* Dark CTA rules from Pim's article.css; in his build they reach every .cta-band, this one included */
.cta-band .split {
  --split-gap: var(--space-2xl);
}

.cta-band .lead {
  max-width: 36rem;
  margin-top: var(--space-m);
}

.cta-band .button {
  margin-top: var(--space-xl);
}

}

/* --- blocks/pb-guide-article.css --- */
@layer blocks {
/*
  Pageblock: guide-article - the page of one guide (item page of the form "guide", at /guides/{alias}).
  Fields (the guide's own): topic (text) · menu_title (text) · standfirst (text) · author_photo (picture, twice)
    · author_name (text, twice) · date (text) · read_time (text) · author_linkedin (call to action: icon link)
    · hero_wide (picture, from 48rem) · hero_mobile (picture, below 48rem)
    · body (rich text: p.lead, p, h2, h3, ul, ol, blockquote, blockquote.note with h4, figure > img, strong, br)
    · author_role (text) · author_bio (text) · author_linkedin_button (call to action: LinkedIn button)
  The table of contents is the toc component; its list is built from the body's h2 elements by the script.
*/

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 3px;
  background: var(--color-signal);
  transform-origin: left;
  scale: 0 1;
}

.article-header {
  padding-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .article-header {
    padding-top: var(--space-3xl);
  }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: var(--size-ui);
  color: var(--color-ink-2);
}

.breadcrumb a:hover {
  color: var(--color-ink);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--color-muted);
}

.article-title {
  max-width: 18ch;
  margin-top: var(--space-l);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .article-title {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .article-title {
    font-size: 5rem;
  }
}

.article-standfirst {
  max-width: 42rem;
  margin-top: var(--space-m);
  font-size: var(--size-xl);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

@media (min-width: 48rem) {
  .article-standfirst {
    font-size: var(--size-2xl);
  }
}

.byline-bar {
  --repel-gap: var(--space-m);
  margin-top: var(--space-xl);
  padding-block: 1.25rem;
  border-block: 1px solid var(--color-rule);
}

.byline {
  --cluster-gap: var(--space-s);
  flex-wrap: nowrap;
}

.avatar {
  width: var(--avatar-size, 3rem);
  height: var(--avatar-size, 3rem);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: #b4b1a3;
  object-fit: cover;
}

.byline__name {
  font-weight: 600;
}

.byline__meta {
  margin-top: 0.125rem;
  font-size: var(--size-sm);
  color: var(--color-ink-2);
}

.share {
  --cluster-gap: var(--space-2xs);
}

.share__label {
  margin-right: var(--space-3xs);
  font-size: var(--size-sm);
  color: var(--color-ink-2);
}

.share .icon-button,
.byline .icon-button {
  --icon-button-size: 2.5rem;
}

.byline .icon-button {
  color: var(--color-linkedin);
}

.share .button {
  --button-height: 2.5rem;
  --button-padding: 1rem;
  --button-font-size: var(--size-sm);
}

.article-hero {
  padding-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .article-hero {
    padding-top: 3.5rem;
  }
}

.article-body {
  padding-block: 3.5rem 5rem;
}

@media (min-width: 48rem) {
  .article-body {
    padding-block: 5rem 7rem;
  }
}

@media (min-width: 64rem) {
  .article-body > :first-child {
    grid-column: 1 / span 3;
  }

  .article-body > :nth-child(2) {
    grid-column: 5 / span 8;
  }
}

.article-sections {
  display: grid;
  gap: 5rem;
}

@media (min-width: 48rem) {
  .article-sections {
    gap: 6rem;
  }
}

/* Hero: Pim's <picture> as two pictures, the wide one from 48rem and the tall one below */
.pb-guide-article__hero-wide {
  display: none;
}

@media (min-width: 48rem) {
  .pb-guide-article__hero-wide {
    display: block;
  }

  .pb-guide-article__hero-mobile {
    display: none;
  }
}

/*
  Prose: the whole article is one rich-text field (was an intro and one section per topic).
  Styled by element type; "> p" so the <p> the editor writes inside every <li> keeps the list's own type.
*/
.prose {
  --flow-space: var(--space-m);
}

.prose > * {
  max-width: var(--measure);
}

.prose > p {
  font-size: var(--size-lg);
  line-height: 1.7;
  color: var(--color-ink-2);
}

/* was .prose strong, .prose p[data-emphasis]: an emphasised line is now <p><strong>…</strong></p> */
.prose strong {
  font-weight: 600;
  color: var(--color-ink);
}

.prose > h2 {
  font-size: var(--size-3xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}

/* Each h2 opens a topic: the space the sections' grid gap gave */
.prose > * + h2 {
  margin-top: 5rem;
}

.prose > h3 {
  padding-top: var(--space-s);
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
  .prose > h2 {
    font-size: 2.625rem;
  }

  .prose > * + h2 {
    margin-top: 6rem;
  }
}

.prose > ul > li {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
}

.prose > ul > li + li,
.prose > ol > li + li {
  margin-top: var(--space-xs);
}

.prose > ul > li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
}

.prose > ol {
  padding-left: var(--space-m);
  list-style: decimal;
}

.prose > ol > li {
  padding-left: var(--space-2xs);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
}

.prose > ol > li::marker {
  font-weight: 600;
  color: var(--color-signal-deep);
}

.prose > blockquote:not(.note) {
  padding: 0.25rem 0 0.25rem var(--space-m);
  border-left: 3px solid var(--color-signal);
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

/* was p.prose__intro */
.prose > p.lead {
  font-size: var(--size-xl);
  color: var(--color-ink);
}

.prose > figure {
  max-width: none;
}

/* The "Worth knowing" note (was aside.note with p.note__label): blockquote.note, its label an h4.
   Values are what Pim's page computes: .prose p outranked .note__label's size and colour. */
.prose > blockquote.note {
  padding: var(--space-m);
  border-radius: var(--radius-xl);
  background: var(--color-signal-tint);
}

@media (min-width: 48rem) {
  .prose > blockquote.note {
    padding: var(--space-l);
  }
}

.prose > blockquote.note > h4 {
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

.prose > blockquote.note > p {
  margin-top: var(--space-xs);
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

/* Author card */
.author-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 1.75rem;
  border-radius: var(--radius-3xl);
  background: var(--color-white);
  box-shadow: var(--ring);
  --avatar-size: 5rem;
}

@media (min-width: 40rem) {
  .author-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (min-width: 48rem) {
  .author-card {
    padding: var(--space-xl);
  }
}

.author-card__name {
  margin-top: var(--space-2xs);
  font-size: var(--size-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.author-card__role {
  margin-top: var(--space-3xs);
  color: var(--color-ink-2);
}

.author-card__bio {
  max-width: 36rem;
  margin-top: var(--space-s);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
}

.author-card .button {
  --button-height: 2.75rem;
  --button-padding: 1.25rem;
  margin-top: var(--space-m);
}

}

/* --- blocks/pb-guide-cta.css --- */
@layer blocks {
/*
  Pageblock: guide-cta - the dark call to action under every guide, with the numbered steps.
  Fields: body (rich text: h2, p.lead, one button link as its last paragraph)
  Containers: steps (form guide-step: menu_title) - numbered by the rail component's CSS counter.
  The band is the cta component (cta-band); the steps are the rail component (rail, data-variant="numbered").
*/

/* Dark CTA with numbered steps (Pim's article.css) */
.cta-band .split {
  --split-gap: var(--space-2xl);
}

.cta-band .lead {
  max-width: 36rem;
  margin-top: var(--space-m);
}

.cta-band .button {
  margin-top: var(--space-xl);
}

@media (min-width: 64rem) {
  .cta-band .split[data-split="6-5"] > :nth-child(2) {
    grid-column: 8 / span 5;
  }
}

.cta-band .rail {
  --rail-bg: var(--color-ink);
  --rail-space: var(--space-l);
}

.cta-band .rail__item p {
  padding-top: var(--space-3xs);
  font-size: var(--size-xl);
  font-weight: 600;
}

.cta-band .rail[data-variant="numbered"] .rail__item::after {
  background: var(--color-signal);
}

/* The heading (was h2.heading-large) */
.pb-guide-cta__body > h2 {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .pb-guide-cta__body > h2 {
    font-size: var(--size-6xl);
  }
}

/* The button ending the body (was a.button[data-size="large"][data-variant="on-dark"] with a typed arrow) */
.pb-guide-cta__body > p > .button {
  --button-height: 3.5rem;
  --button-padding: 2rem;
  --button-font-size: var(--size-lg);
  --button-bg-hover: var(--color-signal-bright);
}

.pb-guide-cta__body > p > .button::after {
  content: "→" / "";
}

}

/* --- blocks/pb-guide-related.css --- */
@layer blocks {
/*
  Pageblock: guide-related - "Keep reading" under every guide.
  Fields: heading (text) · link (call to action: text link to guides.html)
  The cards are drawn from the published guides (data-items-of="guide", data-limit="2"), in the guide-card component's markup.
*/

.related .guide-grid {
  margin-top: var(--space-xl);
}

/* "All guides" (was a.link-arrow with a label and an arrow span): the underline on the words, the arrow drawn here.
   inline-block keeps the arrow out of the underline. */
.pb-guide-related .text-link {
  display: inline-block;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.pb-guide-related .text-link::after {
  content: "→" / "";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: translate var(--duration) ease;
}

.pb-guide-related .text-link:hover::after {
  translate: 0.125rem 0;
}

/* The call to action's field draws no box: the link is the row's item, as before */
.pb-guide-related .repel > .rich-text {
  display: contents;
}

/* Covers are pictures, one per guide (same rules as pb-guides-list.css, which may not be on this page):
   shown whole in the cover's box, the rest of the box in the colour data-cover picks. */
.cover--image {
  display: block;
  width: 100%;
  padding: 0;
  object-fit: contain;
}

.cover--image[data-cover-tone="wordpress"] {
  object-position: 50% 100%;
}

}

/* --- blocks/pb-about-intro.css --- */
@layer blocks {
/* Pageblock: about-intro (About: opening).
   Fields: heading (rich text: hgroup [label p + h1]) · lead (text) */

.about-intro {
  --page-intro-bottom: var(--space-3xl);
  --page-intro-bottom-md: 6rem;
}

/* The label above the heading (was p.eyebrow) */
.about-intro__body hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

@media (min-width: 48rem) {
  .about-intro__body hgroup > p {
    font-size: var(--size-lg);
  }
}

/* The heading (was h1.heading-page, with .page-intro's margin above it) */
.about-intro__body hgroup > h1 {
  max-width: 17ch;
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .about-intro__body hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .about-intro__body hgroup > h1 {
    font-size: 5.75rem;
  }
}

.about-intro__lead {
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .about-intro__lead {
    margin-top: 3.5rem;
  }
}

@media (min-width: 64rem) {
  .about-intro__lead > p {
    grid-column: 7 / span 5;
  }
}

}

/* --- blocks/pb-about-facts.css --- */
@layer blocks {
/* Pageblock: about-facts (About: four large facts).
   Fields: facts (container, form "fact": menu_title (the figure), unit (optional smaller word after it), text (rich text: p with strong))
   Was a <dl>: each <div> is now an <li>, <dt> is .facts__value (its <span> .facts__unit), <dd> is .facts__text. */

.facts {
  display: grid;
  gap: var(--space-2xl) var(--space-xl);
  padding-bottom: 5rem;
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .facts {
    padding-bottom: 7rem;
  }
}

.facts > li {
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-ink);
}

.facts__value {
  font-size: var(--size-6xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.facts__unit {
  font-size: var(--size-3xl);
  letter-spacing: var(--tracking-tight);
}

.facts__text {
  max-width: 20rem;
  margin-top: 1.25rem;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

.facts__text > p strong {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .facts__value {
    font-size: var(--size-7xl);
  }

  .facts__unit {
    font-size: var(--size-4xl);
  }
}

}

/* --- blocks/pb-about-belief.css --- */
@layer blocks {
/* Pageblock: about-belief (About: what we believe).
   Fields: body (rich text: h2 label, p statement with <em> for its muted second sentence, p.lead)
   The signal-end mark above it is decoration. */

.belief {
  background: var(--color-white);
  --region-space: 5rem;
}

@media (min-width: 48rem) {
  .belief {
    --region-space: 8rem;
  }
}

.signal-end {
  display: flex;
  align-items: center;
}

.signal-end__line {
  width: 5rem;
  height: 3px;
}

.signal-end__dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
}

@media (min-width: 48rem) {
  .signal-end__line {
    width: 8rem;
  }
}

/* The label (was h2.eyebrow) */
.belief__body > h2 {
  margin-top: var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

@media (min-width: 48rem) {
  .belief__body > h2 {
    font-size: var(--size-lg);
  }
}

/* The statement (was p.belief__statement; its muted <span> is now <em>) */
.belief__body > p:not(.lead) {
  max-width: 26ch;
  margin-top: 1.25rem;
  font-size: var(--size-3xl);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
}

.belief__body > p:not(.lead) em {
  font-style: normal;
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .belief__body > p:not(.lead) {
    font-size: var(--size-5xl);
  }
}

@media (min-width: 64rem) {
  .belief__body > p:not(.lead) {
    font-size: var(--size-6xl);
  }
}

.belief .lead {
  max-width: 36rem;
  margin-top: var(--space-xl);
  font-size: var(--size-lg);
}

}

/* --- blocks/pb-about-manifesto.css --- */
@layer blocks {
/* Pageblock: about-manifesto (About: manifesto rows on dark).
   Fields: heading (rich text: hgroup [label p + h2]) · principles (container, form "principle": menu_title, aside (optional muted words after the title), text)
   The row number is a CSS counter. */

/* The label above the heading (was p.eyebrow data-tone="on-dark") */
.manifesto__body hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal);
}

@media (min-width: 48rem) {
  .manifesto__body hgroup > p {
    font-size: var(--size-lg);
  }
}

/* The heading (was h2.heading-large) */
.manifesto__body hgroup > h2 {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .manifesto__body hgroup > h2 {
    font-size: var(--size-6xl);
  }
}

.manifesto {
  margin-top: 3.5rem;
  counter-reset: principle;
}

@media (min-width: 48rem) {
  .manifesto {
    margin-top: 5rem;
  }
}

.manifesto li {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-top: 1px solid var(--white-15);
  counter-increment: principle;
}

.manifesto li:last-child {
  border-bottom: 1px solid var(--white-15);
}

@media (min-width: 48rem) {
  .manifesto li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--column-gap);
    padding-block: var(--space-xl);
  }

  .manifesto__number { grid-column: span 1; }
  .manifesto li h3 { grid-column: span 4; }
  .manifesto li p { grid-column: 7 / span 6; }
}

.manifesto__number {
  font-family: var(--font-mono);
  font-size: var(--size-lg);
  color: var(--color-signal);
}

.manifesto__number::before {
  content: counter(principle, decimal-leading-zero);
}

.manifesto li h3 {
  font-size: var(--size-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.manifesto li h3 .manifesto__aside {
  color: rgb(255 255 255 / 0.5);
}

.manifesto li p {
  max-width: 36rem;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.7);
}

}

/* --- blocks/pb-about-cta.css --- */
@layer blocks {
/* Pageblock: about-cta (About: built with your feedback).
   Fields: body (rich text: h2, p.lead) · email (call to action: outline button, mailto) · button (call to action: try.html)
   Layout and the lead come from the cta-row component. */

/* The heading (was h2.heading-large) */
.pb-about-cta .cta-row__text > h2 {
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .pb-about-cta .cta-row__text > h2 {
    font-size: var(--size-6xl);
  }
}

/* The calls to action's fields draw no box: the buttons are the cluster's items, as before */
.pb-about-cta .cta-row__actions > .rich-text {
  display: contents;
}

}

/* --- blocks/pb-mini-header.css --- */
@layer blocks {
/* Pageblock: mini-header - the minimal header of the Try page (the page shows no site header).
   Fields: skip_link (text) · back link (call to action)
   The logo uses .site-header__logo and the skip link .skip-link, both styled in site-header.css. */

.mini-header {
  border-bottom: 1px solid var(--color-rule);
}

.mini-header__bar {
  height: 4rem;
}

/* The back link is a call-to-action field now: the class sits on its rich-text
   wrapper, the link inside keeps the look; the arrow is drawn, not typed. */
.mini-header__link > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 2.75rem;
  font-size: var(--size-ui);
  color: var(--color-ink-2);
}

.mini-header__link > a::before {
  content: "←";
  content: "←" / "";
}

.mini-header__link > a:hover {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .mini-header__bar {
    height: 5rem;
  }
}

}

/* --- blocks/pb-try-signup.css --- */
@layer blocks {
/* Pageblock: try-signup - the Try page: intro, the signup form card with its confirmation, and the aside.
   Fields: intro (rich text) · details_title · website_hint · payment_legend · payment_title · payment_badge ·
   payment_note · card_label · card_hint · fineprint · next_title · next_steps (container) · plan_title ·
   plan_lines (container) · plan_note · help (rich text); form "signup" with its data-form-sent confirmation.
   Field errors: aria-invalid="true" on the input, message in .field__error (hidden until needed). */

/* The FAQ is its own block now (try-faq) and carries the page's bottom space;
   the bottom here is the gap that used to separate the two (--split-gap). */
.signup {
  padding-block: var(--space-2xl);
  --split-gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .signup {
    padding-top: var(--space-3xl);
  }
}

@media (min-width: 64rem) {
  .signup[data-split="7-4"] > :nth-child(2) {
    padding-top: 10rem;
  }
}

/* Intro: label, page heading and lead are one rich-text field.
   The label keeps the .eyebrow look, the heading .heading-page[data-size="compact"]. */
.signup__intro hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

.signup__intro hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

.signup__intro > p {
  max-width: 32rem;
  margin-top: 1.25rem;
}

@media (min-width: 48rem) {
  .signup__intro hgroup > p {
    font-size: var(--size-lg);
  }

  .signup__intro hgroup > h1 {
    font-size: var(--size-6xl);
  }
}

@media (min-width: 64rem) {
  .signup__intro hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

/* The form card */
.form-card {
  margin-top: var(--space-xl);
  padding: var(--space-m);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--ring);
}

@media (min-width: 48rem) {
  .form-card {
    padding: var(--space-xl);
  }
}

.form-card fieldset {
  min-width: 0;
}

.form-card fieldset + fieldset,
.form-card__submit {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-rule);
}

.form-card__submit {
  margin-top: var(--space-l);
}

.form-step {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.form-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-white);
}

.form-card__fields {
  display: grid;
  gap: 1.25rem;
  margin-top: var(--space-m);
}

@media (min-width: 48rem) {
  .form-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-card [data-card-element] {
  margin-top: var(--space-m);
}

.form-card__note {
  max-width: 32rem;
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
}

.badge {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-signal-tint);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-signal-deep);
}

/* Fields */
.field__label {
  display: block;
  font-size: var(--size-sm);
  font-weight: 500;
}

.field__input {
  display: block;
  width: 100%;
  height: 3rem;
  margin-top: var(--space-2xs);
  padding-inline: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--ink-10);
  font-size: var(--size-base);
  color: var(--color-ink);
  outline: none;
}

.field__input::placeholder {
  color: rgb(95 107 113 / 0.7);
}

.field__input:focus {
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-signal-deep);
}

.field__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--color-danger-ring);
}

.field__hint {
  margin-top: var(--space-2xs);
  font-size: var(--size-sm);
  color: var(--color-muted);
}

.field__error {
  margin-top: var(--space-2xs);
  font-size: var(--size-sm);
  color: var(--color-danger);
}

/* Card element placeholder (a visual stand-in; replace with the payment provider's element) */
.card-element {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-top: var(--space-2xs);
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--ink-10);
  color: rgb(95 107 113 / 0.8);
}

.card-element span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 3rem;
  padding-inline: var(--space-xs);
  white-space: nowrap;
}

.card-element span + span {
  border-left: 1px solid var(--ink-10);
}

.card-element__number {
  overflow: hidden;
  text-overflow: ellipsis;
  --icon-size: 1.25rem;
}

@media (min-width: 40rem) {
  .card-element span {
    padding-inline: var(--space-s);
  }
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.consent input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  accent-color: var(--color-signal-deep);
  cursor: pointer;
}

.consent label {
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  cursor: pointer;
}

.consent a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-underline-offset: 2px;
}

.form-card__submit .button {
  margin-top: var(--space-l);
}

.form-card__submit .button:disabled {
  opacity: 0.6;
}

.form-card__fineprint {
  margin-top: var(--space-xs);
  font-size: var(--size-sm);
  text-align: center;
  color: var(--color-ink-2);
}

/* Confirmation: shown in the form's place after a send. It holds the success page's
   message as one rich-text area, styled by element type (the success page's
   .arrived, .success__lead, .panel-card h2 and .rail looks). */
.signup__sent {
  margin-top: var(--space-xl);
  padding: 1.75rem;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--ring);
}

@media (min-width: 48rem) {
  .signup__sent {
    padding: var(--space-xl);
  }
}

/* The message has arrived: the Morse line ends in a filled dot with a check */
.signup__sent::before {
  content: "";
  display: block;
  width: 9rem;
  height: 3rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1518' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") right 0.75rem center / 1.5rem no-repeat,
    radial-gradient(closest-side, var(--color-signal) 96%, transparent) right center / 3rem 3rem no-repeat,
    repeating-linear-gradient(
      90deg,
      var(--color-signal) 0 18px,
      transparent 18px 26px,
      var(--color-signal) 26px 44px,
      transparent 44px 52px,
      var(--color-signal) 52px 56px,
      transparent 56px 66px
    ) left center / 6rem 3px no-repeat;
}

@media (min-width: 48rem) {
  .signup__sent::before {
    width: 13rem;
    background-size: 1.5rem, 3rem 3rem, 10rem 3px;
  }
}

.signup__sent > h2 {
  margin-top: var(--space-l);
  font-size: var(--size-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

@media (min-width: 48rem) {
  .signup__sent > h2 {
    font-size: var(--size-5xl);
  }
}

.signup__sent > p {
  max-width: 36rem;
  margin-top: var(--space-m);
  color: var(--color-ink-2);
}

.signup__sent > p > strong {
  color: var(--color-ink);
}

.signup__sent > p > a:not(.button) {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.signup__sent > h3 {
  margin-top: var(--space-xl);
  font-size: var(--size-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* Next steps: the rail, on white; the first step is done */
.signup__sent > ol {
  margin-top: 1.75rem;
}

.signup__sent > ol > li {
  position: relative;
  padding: 0 0 var(--space-l) 2.5rem;
}

.signup__sent > ol > li:last-child {
  padding-bottom: 0;
}

.signup__sent > ol > li::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0;
  left: 11px;
  width: 2px;
  background-image: repeating-linear-gradient(
    180deg,
    var(--color-signal) 0 18px,
    transparent 18px 26px,
    var(--color-signal) 26px 44px,
    transparent 44px 52px,
    var(--color-signal) 52px 56px,
    transparent 56px 66px
  );
}

.signup__sent > ol > li:not(:first-child)::before {
  top: 0;
}

.signup__sent > ol > li:last-child::before {
  bottom: auto;
  height: 0.75rem;
}

.signup__sent > ol > li:only-child::before {
  display: none;
}

.signup__sent > ol > li::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 12px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-signal);
  translate: -50% -50%;
}

.signup__sent > ol > li:first-child::after {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-signal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1518' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E")
    center / 0.75rem no-repeat;
  box-shadow: 0 0 0 4px var(--color-white);
}

.signup__sent > ol > li > p + p {
  margin-top: var(--space-3xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
}

/* The way back: Pim's ghost button, with its arrow drawn */
.signup__sent > p:has(> .button) {
  margin-top: var(--space-xl);
}

.signup__sent .button {
  --button-bg: transparent;
  --button-bg-hover: var(--color-paper);
  --button-ring: inset 0 0 0 1px var(--color-rule);
  font-weight: 600;
}

.signup__sent .button::before {
  content: "←";
  content: "←" / "";
}

/* Aside: next steps and plan summary */
.signup__aside h2 {
  font-size: var(--size-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.signup__aside .rail {
  margin-top: 1.75rem;
}

@media (min-width: 64rem) {
  .signup__aside-inner {
    position: sticky;
    top: 2.5rem;
  }
}

.summary-card {
  margin-top: var(--space-xl);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--ring);
}

.summary-card h2 {
  font-size: var(--size-base);
}

/* The plan lines were a <dl>; they are a list (a container) now */
.summary-card__lines {
  margin-top: var(--space-s);
  font-size: var(--size-ui);
}

.summary-card__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
}

.summary-card__line + .summary-card__line {
  border-top: 1px solid var(--color-rule);
}

.summary-card__term {
  color: var(--color-ink-2);
}

.summary-card__value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.summary-card > p {
  margin-top: var(--space-xs);
  font-size: var(--size-sm);
  color: var(--color-muted);
}

/* A rich-text field now: the class sits on the field, the link keeps .link-inline's look */
.signup__help {
  display: none;
  margin-top: var(--space-l);
  color: var(--color-ink-2);
}

.signup__help a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 64rem) {
  .signup__help {
    display: block;
  }
}

}

/* --- blocks/pb-try-faq.css --- */
@layer blocks {
/* Pageblock: try-faq - "Before you start." FAQ cards below the signup form.
   Fields: heading (text) · contact (rich text) · questions (container, form signup-question: menu_title, answer)
   It was the last row of the signup grid; as its own block it carries the page's bottom space
   (the try-signup block's bottom padding is the gap above it). */

.pb-try-faq {
  padding-bottom: 5rem;
}

@media (min-width: 48rem) {
  .pb-try-faq {
    padding-bottom: 7rem;
  }
}

/* FAQ cards: black outline on transparent */
.faq-cards {
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--color-rule);
}

@media (min-width: 48rem) {
  .faq-cards {
    padding-top: var(--space-4xl);
  }
}

.faq-cards__head {
  --repel-align: flex-end;
}

/* A rich-text field now: the link keeps .link-inline's look */
.faq-cards__contact a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.faq-cards__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .faq-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

@media (min-width: 64rem) {
  .faq-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

.outline-card {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

@media (min-width: 48rem) {
  .outline-card {
    padding: 1.75rem;
  }
}

.outline-card > h3 {
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.outline-card > p {
  margin-top: var(--space-xs);
  line-height: var(--leading-snug);
}

}

/* --- blocks/pb-mini-footer.css --- */
@layer blocks {
/* Pageblock: mini-footer - the minimal footer of the Try page (the page shows no site footer).
   Fields: copyright (text) · links (rich text: one p with the links) */

.mini-footer {
  border-top: 1px solid var(--color-rule);
}

.mini-footer__bar {
  padding-block: var(--space-m);
  font-size: var(--size-sm);
  color: var(--color-muted);
}

/* The links are one rich-text field now, so the field can't be the cluster:
   the space between the links (was --cluster-gap) is a margin. */
.mini-footer__links a + a {
  margin-left: var(--space-m);
}

.mini-footer a:hover {
  color: var(--color-ink);
}

}

/* --- blocks/pb-terms-intro.css --- */
@layer blocks {
/*
  Pageblock: terms-intro
  Fields: heading (rich text: hgroup with the label and the h1) · updated (rich text: p with the date in strong)
  Layout and spacing: components/page-intro.css (.page-intro).
*/

.legal-intro {
  --page-intro-bottom: var(--space-xl);
  --page-intro-bottom-md: 3.5rem;
}

/* Label (was p.eyebrow) */
.pb-terms-intro__heading hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--color-signal-deep));
}

/* Heading (was h1.heading-page) */
.pb-terms-intro__heading hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

@media (min-width: 48rem) {
  .pb-terms-intro__heading hgroup > p {
    font-size: var(--size-lg);
  }

  .pb-terms-intro__heading hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .pb-terms-intro__heading hgroup > h1 {
    font-size: 5.25rem;
  }
}

/* Last updated (was p.legal-intro__updated with the date in a <time>) */
.pb-terms-intro__updated {
  margin-top: var(--space-m);
}

.pb-terms-intro__updated > p {
  color: var(--color-ink-2);
}

.pb-terms-intro__updated > p strong {
  font-weight: 500;
  color: var(--color-ink);
}

}

/* --- blocks/pb-terms-topics.css --- */
@layer blocks {
/*
  Pageblock: terms-topics
  Fields: panel_label (text) · toc_label (text) · intro (rich text) ·
  sections (container, form legal-section: anchor, menu_title, body (rich text))
  Legal text (Terms of use): numbered sections next to the sticky TOC, a collapsible
  contents panel above them on small screens.
  Components: toc.css (toc-panel, toc, toc-layout, numbered-heading), page-intro.css (.placeholder).
*/

@media (min-width: 64rem) {
  /* Was Pim's .toc-layout > :first-child in faq-page.css, which the terms page relied on */
  .legal-layout > :first-child {
    grid-column: 1 / span 3;
  }

  .legal-layout > :nth-child(2) {
    grid-column: 5 / span 8;
  }
}

@media (min-width: 80rem) {
  .legal-layout > :nth-child(2) {
    grid-column: 5 / span 7;
  }
}

.legal {
  display: grid;
  gap: var(--space-2xl);
}

/* The sections are one container inside .legal, after the intro; it keeps .legal's gap between them */
.pb-terms-topics__sections {
  display: grid;
  gap: var(--space-2xl);
}

.legal .rich-text > p {
  max-width: 68ch;
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
}

.legal .rich-text > p + p {
  margin-top: var(--space-s);
}

.legal strong {
  color: var(--color-ink);
}

.legal a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.legal article {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.legal .numbered-heading {
  font-size: var(--size-2xl);
  letter-spacing: -0.02em;
}

.legal .numbered-heading + * {
  margin-top: 1.25rem;
}

@media (min-width: 48rem) {
  .legal .numbered-heading {
    font-size: var(--size-3xl);
  }
}

/* Section numbers come from counters, so sections can be added and reordered
   (they were typed in: span.numbered-heading__number in the headings, a span in each contents link) */
.legal {
  counter-reset: legal-section;
}

.legal .numbered-heading {
  counter-increment: legal-section;
}

.legal .numbered-heading::before {
  content: counter(legal-section, decimal-leading-zero);
  content: counter(legal-section, decimal-leading-zero) / "";
  font-family: var(--font-mono);
  font-size: var(--size-base);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-signal-deep);
}

.pb-terms-topics .toc-panel ol {
  counter-reset: legal-contents;
}

.pb-terms-topics .toc-panel li {
  counter-increment: legal-contents;
}

.pb-terms-topics .toc-panel a::before {
  content: counter(legal-contents, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-signal-deep);
}

/* The "+" after the panel's label is drawn here, so the summary holds only its label
   (it was a span after the text, coloured by .toc-panel summary span) */
.pb-terms-topics .toc-panel summary::after {
  content: "+";
  content: "+" / "";
  color: var(--color-signal-deep);
}

}

/* --- blocks/pb-not-found.css --- */
@layer blocks {
/* Pageblock: not-found - the site's 404 page, built on the page-intro component.
   Fields: body (rich text: hgroup [label, h1], p.lead, one call-to-action link)
   The body is a rich-text field: it spaces its children with margins and never lays them out.
   The label takes .eyebrow's look and the heading .heading-page's, through the hgroup. */

.pb-not-found__body {
  padding-bottom: var(--space-3xl);
}

.pb-not-found__body hgroup > p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-signal-deep);
}

.pb-not-found__body hgroup > h1 {
  margin-top: var(--space-s);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

.pb-not-found__body > p {
  max-width: 28rem;
  margin-top: var(--space-m);
}

.pb-not-found__body > p:has(> .button) {
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .pb-not-found__body {
    padding-bottom: var(--space-5xl);
  }

  .pb-not-found__body hgroup > p {
    font-size: var(--size-lg);
  }

  .pb-not-found__body hgroup > h1 {
    font-size: var(--size-7xl);
  }
}

@media (min-width: 64rem) {
  .pb-not-found__body hgroup > h1 {
    font-size: 5.25rem;
  }
}

}