/* ============================================================
   RelayLink — design system
   1. Tokens        2. Base          3. Typography
   4. Brand mark    5. Header & nav  6. Buttons
   7. Hero          8. Hero visual  10. Sections
   12. Boundaries   13. Connector details & tool list
   14. Footer       15. Icons & utilities
   16. Reveal motion                17. Responsive
   18. Blog       19. Error pages   20. Docs
   22. Pricing    23. Founding list & forms
   21. Legal      24. Landing: records, stories, benefits
   ============================================================ */

/* ---------- 0. Fonts ---------- */

/* Self-hosted latin variable subsets (downloaded from Google Fonts once, served
   first-party). This removes the only third-party dependency the page had: no
   preconnects, no CDN, and the landing page's CSP allows only 'self'. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */

:root {
  --rl-ink: #14213d;
  --rl-ink-soft: #3b4a67;
  --rl-ink-muted: #606b84;
  --rl-navy: #1b2d4f;
  --rl-navy-deep: #101c34;
  --rl-navy-black: #0a1122;

  --rl-paper: #faf7f2;
  --rl-paper-warm: #f5efe5;
  --rl-paper-deep: #efe6d8;
  --rl-white: #ffffff;

  --rl-amber: #c98a2e;
  --rl-amber-deep: #8f6019;
  --rl-amber-soft: #eed9ab;
  --rl-amber-wash: #fbf3e4;

  --rl-verify: #2f6b52;
  --rl-verify-wash: #e7f0ea;

  --rl-line: #e5dccd;
  --rl-line-strong: #d2c6b1;
  /* The edge that identifies a control, which is a different job from the two above and needs a
     different weight: SC 1.4.11 asks 3:1 of it, and --rl-line-strong is 1.69:1 on white. Raising
     that token instead would have carried ten decorative uses with it - the chat demo bubbles,
     the price cards, the chips, the blog tables - and turned the soft cream language of this page
     into outlined boxes, which was measured before this token existed. Only .button-secondary and
     the founding form field use it; on the navy band that field paints its border transparent and
     is identified by its paper fill instead. */
  --rl-control-line: #9a8259;

  --rl-radius: 14px;
  --rl-radius-sm: 9px;
  --rl-shadow: 0 16px 40px rgba(20, 33, 61, 0.07);
  --rl-shadow-lift: 0 26px 60px rgba(20, 33, 61, 0.14);

  --rl-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rl-font-body: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rl-shell: 74rem;
}

/* ---------- 2. Base ---------- */

* {
  box-sizing: border-box;
}

/* The controls draw their own hover and pressed states, so the grey flash a phone paints over a
   tapped link would be a second one on top of them. */
a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
  /* Clears the sticky header when an in-page anchor is followed. Sized to the bar
     (3.25rem) plus a little air, not the 4.25rem bar this used to be. */
  scroll-padding-top: 4.75rem;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--rl-ink);
  background: var(--rl-paper);
  font-family: var(--rl-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
main {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img,
svg {
  max-width: 100%;
  vertical-align: middle;
}

::selection {
  color: var(--rl-navy-deep);
  background: var(--rl-amber-soft);
}

a {
  color: inherit;
  text-decoration-color: rgba(20, 33, 61, 0.28);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--rl-amber);
}

:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

code {
  font-family: var(--rl-font-mono);
  font-size: 0.875em;
}

.rl-shell {
  width: 100%;
  max-width: var(--rl-shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  border-radius: 0 0 var(--rl-radius-sm) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ---------- 3. Typography ---------- */

h1,
h2,
h3 {
  font-family: var(--rl-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
}

h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

/* The one accent voice: italic serif in amber. Used sparingly, on the phrase that
   carries the sentence. */
h1 em,
h2 em {
  font-style: italic;
  color: var(--rl-amber-deep);
}

p {
  margin: 0;
  /* Progressive: better rag and no single-word last lines where supported. */
  text-wrap: pretty;
}

/* ---------- 4. Brand mark ---------- */

.brand-mark {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  color: var(--rl-ink);
}

.brand-mark-node-far {
  fill: var(--rl-amber);
}

.site-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--rl-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The bar is chrome; the footer can keep the larger wordmark. */
.site-brand {
  position: relative;
  z-index: 1;
  font-size: 1.12rem;
}

.site-brand .brand-mark {
  width: 1.55rem;
  height: 1.55rem;
}

.brand-word-end {
  color: var(--rl-amber-deep);
  transition: color 0.15s ease;
}

.site-brand:hover .brand-word-end {
  color: var(--rl-amber);
}

/* ---------- 5. Header & nav ---------- */

/* Glass, not a slab: the page shows through until you scroll, then the fill densifies and a
   hairline appears. No drop shadow — Apple's bar is a plane of blur, not a card sitting on
   the page. The densify is always on, including under reduced motion: opacity is not travel. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(250, 247, 242, 0.92);
  border-bottom-color: var(--rl-line);
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.25rem;
}

/* Dead-centered, the Apple row: brand left, destinations in the middle, actions right.
   Absolute so unequal side widths cannot shove the words off centre. */
.site-nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.site-nav-links a {
  text-decoration: none;
  color: var(--rl-ink-soft);
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible {
  color: var(--rl-ink);
  background: var(--rl-amber-wash);
}

.site-nav-links a[aria-current="page"] {
  color: var(--rl-ink);
  background: var(--rl-paper-deep);
}

.site-nav-links a[aria-current="page"]:hover,
.site-nav-links a[aria-current="page"]:focus-visible {
  background: var(--rl-amber-wash);
}

.site-nav-end {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

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

.nav-signin {
  text-decoration: none;
  color: var(--rl-ink-soft);
  font-size: 0.875rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-signin:hover,
.nav-signin:focus-visible {
  color: var(--rl-ink);
  background: var(--rl-amber-wash);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover {
  background: var(--rl-navy-black);
  box-shadow: 0 0 0 3px var(--rl-amber-soft);
}

.nav-cta:focus-visible {
  background: var(--rl-navy-black);
}

.button .icon {
  transition: transform 0.18s ease;
}

.button:hover .icon {
  transform: translateX(3px);
}

/* The phone menu. Still a <details>, so it opens with no script; site.js only closes it after
   a choice, on a tap outside, on Escape, and when a rotation carries the viewport past the
   width where it is shown. What changed is the shape: it was a small card hanging off the
   button, and a card is where a website puts a menu. A product puts a sheet - the whole
   viewport under the header, the destinations in display type, and the two actions as the
   buttons they already are on desktop. Sign in was the fourth grey line in a list; it is a
   button now, which is how it stops being hard to find. */
.nav-disclosure {
  display: none;
}
.nav-disclosure summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--rl-ink);
  transition: background 0.15s ease;
}
/* Only where a pointer can hover. On a phone the tint would stay on the button after the tap
   that opened the sheet, until the next tap landed somewhere else. */
@media (hover: hover) {
  .nav-disclosure summary:hover {
    background: var(--rl-amber-wash);
  }
}
.nav-disclosure summary::-webkit-details-marker {
  display: none;
}
/* Three bars that become the X: the outer two travel to the middle and turn, the middle one
   folds away. Markup rather than a sprite icon because the lines of a <use> live in a shadow
   tree page CSS cannot reach. */
.nav-burger {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.nav-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
.nav-burger span:nth-child(1) {
  top: 0;
}
.nav-burger span:nth-child(2) {
  top: 6px;
}
.nav-burger span:nth-child(3) {
  bottom: 0;
}
.nav-disclosure[open] .nav-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-disclosure[open] .nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-disclosure[open] .nav-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
/* The sheet is positioned against the sticky header, not the button, so it spans the viewport
   and sits exactly under the bar. It takes the rest of the viewport rather than the height of
   its content - a menu with the page showing underneath is a dropdown - and the dynamic unit
   is what keeps the last button clear of a phone browser's own bar. */
.nav-disclosure-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1.75rem;
  /* Opaque on purpose. A frosted sheet still let the hero set read through it —
     two layers of type — which is a dropdown wearing a full-height box. The
     header above stays glass; this surface covers the page. */
  background: var(--rl-paper);
  border-top: 1px solid var(--rl-line);
}
.nav-sheet-links {
  display: flex;
  flex-direction: column;
}
.nav-sheet-links a {
  padding: 0.7rem 0;
  font-family: var(--rl-font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--rl-ink);
  text-decoration: none;
}
@media (hover: hover) {
  .nav-sheet-links a:hover {
    color: var(--rl-amber-deep);
  }
}
.nav-sheet-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rl-line);
}
.nav-sheet-actions .button {
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-disclosure-panel {
    animation: nav-sheet-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nav-sheet-links a {
    animation: nav-item-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nav-sheet-links a:nth-child(1) { animation-delay: 0.03s; }
  .nav-sheet-links a:nth-child(2) { animation-delay: 0.06s; }
  .nav-sheet-links a:nth-child(3) { animation-delay: 0.09s; }
  .nav-sheet-links a:nth-child(4) { animation-delay: 0.12s; }
  .nav-sheet-links a:nth-child(5) { animation-delay: 0.15s; }
  .nav-sheet-links a:nth-child(6) { animation-delay: 0.18s; }
  .nav-sheet-links a:nth-child(7) { animation-delay: 0.21s; }
  .nav-sheet-actions {
    animation: nav-item-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
  }
  @keyframes nav-sheet-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes nav-item-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-burger span {
    transition: none;
  }
}

/* ---------- 6. Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease,
    border-color 0.16s ease, box-shadow 0.16s ease;
}

.button-primary {
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  box-shadow: 0 10px 24px rgba(16, 28, 52, 0.22);
}

.button-primary:hover {
  background: var(--rl-ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(16, 28, 52, 0.26);
}

.button-secondary {
  border-color: var(--rl-control-line);
  color: var(--rl-ink);
  background: transparent;
}

.button-secondary:hover {
  border-color: var(--rl-ink);
  background: var(--rl-white);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

/* ---------- 7. Hero ---------- */

.hero-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, var(--rl-paper) 0%, var(--rl-paper-warm) 100%);
  border-bottom: 1px solid var(--rl-line);
  overflow: hidden;
}

/* The amber wash lives on a pseudo-element so it can drift — a barely-there
   ambient motion that keeps the fold feeling alive without demanding attention. */
.hero-section::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background: radial-gradient(46rem 30rem at 72% 18%, var(--rl-amber-wash) 0%, transparent 60%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-section::before {
    animation: hero-drift 26s ease-in-out infinite alternate;
  }

  @keyframes hero-drift {
    from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
    to { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.hero-overline::before {
  content: "";
  width: 2.25rem;
  height: 1.5px;
  background: var(--rl-amber);
}

.hero-lede {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.175rem;
  color: var(--rl-ink-soft);
}

.hero-lede em {
  font-style: italic;
  color: var(--rl-ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.15rem;
}

/* ---------- 8. Hero visual ---------- */

.hero-visual {
  position: relative;
}

/* A second card peeking out behind the first: this is correspondence, so there is
   always another one on the thread. */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 1.5rem -0.75rem -1.25rem 1.5rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  transform: rotate(1.6deg);
  opacity: 0.65;
}

/* ---------- 10. Sections & cards ---------- */

.section {
  padding: clamp(3.5rem, 6.5vw, 6rem) 0;
}

.section-tint {
  background: var(--rl-paper-warm);
  border-top: 1px solid var(--rl-line);
  border-bottom: 1px solid var(--rl-line);
}

.section-deep {
  background: var(--rl-navy-deep);
  color: rgba(250, 247, 242, 0.82);
}

.section-deep h2,
.section-deep h3 {
  color: var(--rl-paper);
}

.section-deep .section-kicker {
  color: var(--rl-amber-soft);
}

.section-deep .section-intro {
  color: rgba(250, 247, 242, 0.72);
}

.section-heading {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section-kicker {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.section-intro {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  color: var(--rl-ink-soft);
}

.section-copy-lg {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  color: var(--rl-ink-soft);
}

.section-closer {
  max-width: 48rem;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rl-line);
  text-align: center;
  font-size: 1.1rem;
  color: var(--rl-ink-soft);
}

.section-aside {
  margin-top: 1.35rem;
  font-size: 0.95rem;
  color: var(--rl-ink-muted);
}

.section-aside em {
  color: var(--rl-ink);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1.35rem;
}

.feature-card {
  padding: 1.75rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rl-shadow-lift);
}

.feature-card h3 {
  margin: 1.15rem 0 0.6rem;
}

.feature-card p {
  font-size: 0.98rem;
  color: var(--rl-ink-soft);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--rl-radius-sm);
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-amber-soft);
  color: var(--rl-amber-deep);
}

.icon-tile-dark {
  margin-bottom: 1.25rem;
  background: rgba(250, 247, 242, 0.08);
  border-color: rgba(250, 247, 242, 0.18);
  color: var(--rl-amber-soft);
}

/* ---------- 12. Boundaries ---------- */

/* Fixed 2x2 rather than auto-fit: there are exactly four of these, and at desktop
   widths auto-fit produced three across with a single orphan on the second row. */
.boundary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

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

.boundary-card {
  padding: 1.6rem 1.65rem;
  background: rgba(250, 247, 242, 0.05);
  border: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: var(--rl-radius);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.boundary-card:hover {
  border-color: rgba(250, 247, 242, 0.32);
  transform: translateY(-2px);
}

.boundary-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}

.boundary-card p {
  font-size: 0.96rem;
  color: rgba(250, 247, 242, 0.72);
}

/* ---------- 13. Connector details & tool list ---------- */

.connect-code {
  display: grid;
  gap: 0.55rem;
  max-width: 38rem;
  margin-top: 1.85rem;
  padding: 1.15rem 1.35rem;
  background: var(--rl-navy-deep);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.connect-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.connect-code-key {
  min-width: 5.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}

/* One click selects the whole value: these lines exist to be pasted somewhere else. */
.connect-code code {
  color: var(--rl-amber-soft);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.tool-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  overflow: hidden;
  background: var(--rl-white);
}

.tool-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid var(--rl-line);
}

.tool-list li:last-child {
  border-bottom: 0;
}

.tool-list code {
  color: var(--rl-amber-deep);
  font-size: 0.9rem;
}

.tool-list span {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--rl-ink-muted);
}

/* ---------- 14. Footer ---------- */

.site-footer {
  padding: clamp(3rem, 5vw, 4.5rem) 0 2rem;
  background: var(--rl-navy-black);
  color: rgba(250, 247, 242, 0.7);
  font-size: 0.94rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
@media (max-width: 60rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

.site-footer .brand-mark {
  color: var(--rl-paper);
}

.site-footer .footer-brand {
  color: var(--rl-paper);
}

.site-footer .brand-word-end {
  color: var(--rl-amber-soft);
}

.footer-mission {
  margin-top: 1rem;
  max-width: 24rem;
  color: rgba(250, 247, 242, 0.6);
}

/* The tagline, on its own line and brighter than the sentence under it. */
.footer-mission strong {
  display: block;
  margin-bottom: 0.3rem;
  color: rgba(250, 247, 242, 0.92);
  font-weight: 600;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col h2 {
  margin-bottom: 0.35rem;
  font-family: var(--rl-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
}

.footer-col a {
  text-decoration: none;
  font-size: 0.93rem;
  color: rgba(250, 247, 242, 0.72);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--rl-amber-soft);
}

.footer-note p {
  color: rgba(250, 247, 242, 0.6);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.5);
}

/* ---------- 15. Icons & utilities ---------- */

.icon-sprite {
  display: none;
}

.icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  pointer-events: none;
}

.icon-sm {
  width: 1.05rem;
  height: 1.05rem;
}

/* ---------- 16. Reveal motion ---------- */

/* Visible by default. The animation below is layered on only where the browser
   supports scroll-driven timelines, so this needs no JavaScript and degrades to a
   plain, fully-readable page everywhere else. */
.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 0;
      transform: translateY(30px) scale(0.98);
      animation: rl-reveal linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--rl-i, 0) * 4%) cover calc(22% + var(--rl-i, 0) * 4%);
    }

    @keyframes rl-reveal {
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* The same reveal where the browser has no scroll-driven animations (Safari, Firefox), driven
   by site.js. Keyed on a class the script puts on <html> only after establishing that it has
   to, so a page with the script blocked or absent is exactly the no-script page: nothing is
   hidden waiting for a script that never came. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.7s var(--rl-ease-out), transform 0.7s var(--rl-ease-out);
  transition-delay: calc(var(--rl-i, 0) * 70ms);
}

/* Children of a .stagger grid reveal one after another; the index is what the two reveal
   mechanisms above read. Eight is the widest grid on the page. */
.stagger > :nth-child(1) {
  --rl-i: 0;
}

.stagger > :nth-child(2) {
  --rl-i: 1;
}

.stagger > :nth-child(3) {
  --rl-i: 2;
}

.stagger > :nth-child(4) {
  --rl-i: 3;
}

.stagger > :nth-child(5) {
  --rl-i: 4;
}

.stagger > :nth-child(6) {
  --rl-i: 5;
}

.stagger > :nth-child(7) {
  --rl-i: 6;
}

.stagger > :nth-child(8) {
  --rl-i: 7;
}
html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Everything stops, except the landing page's sequenced arrivals, which section 24l reduces
     to fades rather than removing - a person who asked for less motion did not ask for less
     information about what is happening. */
  *:not(.rl-motion, .rl-motion *) {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 17. Responsive ---------- */

@media (max-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Copy first, then the example. The package card is the most explanatory element on
     the page, but only once you have read the sentence that frames it. */
  .hero-visual {
    max-width: 34rem;
    margin-inline: auto;
  }

  .hero-visual::before {
    display: none;
  }

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

@media (max-width: 66rem) {
  .site-nav-links {
    display: none;
  }

  .site-nav {
    min-height: 3.5rem;
  }

  /* Sign in stays in the bar on a phone. A returning person is the commonest visitor, and a
     door behind a menu is the one thing on this page a thumb should not have to hunt for. The
     founding-list CTA is the hero button one scroll down, so only it folds into the menu. */
  .site-nav-actions .nav-cta {
    display: none;
  }

  .nav-disclosure {
    display: block;
    margin-left: 0.15rem;
  }
  /* The sheet positions against the header (sticky, so a positioned ancestor); the details
     element and the action cluster must not be positioned or the sheet would hang off the
     button instead of spanning the viewport. */
  .nav-disclosure,
  .site-nav,
  .site-nav-end {
    position: static;
  }
  /* No page scroll behind an open sheet. Set by site.js on toggle, and scoped to the widths
     where the sheet exists: rotate a phone past the breakpoint with the menu open and the lock
     has to go with it, or the page is stuck behind a menu nobody can see. */
  html.menu-open {
    overflow: hidden;
  }

  .hero-lede {
    font-size: 1.08rem;
  }
}

@media (max-width: 34rem) {
  .rl-shell {
    padding: 0 1.15rem;
  }

  /* Two columns even here: six columns of short links stacked one above another made the footer a
     screen and a half on a phone, and the longest label still fits half a phone's width. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }

  .button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 18. Blog ---------- */

.blog-page {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.blog-header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.blog-header h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
}

.blog-lede {
  margin-top: 1rem;
  font-size: 1.12rem;
  color: var(--rl-ink-soft);
}

.blog-find {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 1.5rem;
}

.blog-find input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.65rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--rl-ink);
  background: var(--rl-white);
  border: 1px solid var(--rl-control-line);
  border-radius: var(--rl-radius-sm);
}

.blog-find input[type="search"]:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 2px;
}

.blog-find input[type="search"]::placeholder {
  color: var(--rl-ink-muted);
  opacity: 1;
}

.blog-start {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.blog-start h2 {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
}

.blog-group summary h2 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.blog-group-count {
  color: var(--rl-ink-muted);
  font-weight: 500;
}

.blog-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rl-line);
}

.blog-rows .blog-row:first-child {
  border-top: 0;
}

.blog-row a {
  font-weight: 600;
  color: var(--rl-ink);
  text-decoration: none;
}

.blog-row a:hover {
  color: var(--rl-amber-deep);
}

.blog-row-meta {
  font-size: 0.86rem;
  color: var(--rl-ink-muted);
  white-space: nowrap;
}

.blog-start .blog-rows {
  list-style: decimal;
  padding-left: 1.35rem;
}

.blog-start .blog-row {
  display: grid;
  gap: 0.3rem;
}

.blog-row-summary {
  margin: 0;
  max-width: 44rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--rl-ink-soft);
}

.blog-browse {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 52rem) {
  .blog-browse {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
    align-items: start;
  }
}

.blog-band h2,
.blog-result-group h2 {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
}

.blog-browse .blog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
}

.blog-browse .blog-row-summary {
  grid-column: 1 / -1;
}

.blog-back {
  margin: -0.5rem 0 1.5rem;
  font-size: 0.95rem;
}

.blog-back a {
  color: var(--rl-ink-soft);
}

.blog-back a:hover {
  color: var(--rl-amber-deep);
}

.blog-more {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  color: var(--rl-ink-soft);
}

.blog-more a {
  color: var(--rl-ink);
}

.blog-more a:hover {
  color: var(--rl-amber-deep);
}

.blog-results {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.blog-search-empty {
  padding: 1.4rem 0;
  color: var(--rl-ink-muted);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.blog-pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rl-line-strong);
  border-radius: 999px;
  background: var(--rl-white);
  font-size: 0.86rem;
  color: var(--rl-ink-soft);
  text-decoration: none;
}

.blog-pill:hover {
  border-color: var(--rl-amber);
  color: var(--rl-amber-deep);
}

.blog-pill-active {
  border-color: var(--rl-navy);
  background: var(--rl-navy);
  color: var(--rl-paper);
}

.blog-pill-clear {
  border-style: dashed;
}

.blog-featured {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.4rem;
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-amber-soft);
  border-radius: var(--rl-radius);
}

.blog-featured-flag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.blog-featured-title {
  margin-top: 0.4rem;
  font-size: 1.25rem;
}

.blog-featured-title a,
.blog-card-title a {
  text-decoration: none;
}

.blog-featured-title a:hover,
.blog-card-title a:hover {
  color: var(--rl-amber-deep);
}

.blog-featured-summary {
  margin-top: 0.75rem;
  max-width: 42rem;
  color: var(--rl-ink-soft);
}

.blog-list {
  display: grid;
  gap: 0;
}

.blog-card {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rl-line);
}

.blog-card:last-child {
  border-bottom: 1px solid var(--rl-line);
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--rl-ink-muted);
}

.blog-card-category {
  font-weight: 600;
  color: var(--rl-amber-deep);
  text-decoration: none;
}

.blog-card-title {
  margin-top: 0.45rem;
  font-size: 1.45rem;
}

.blog-card-summary {
  margin-top: 0.5rem;
  max-width: 44rem;
  color: var(--rl-ink-soft);
}

.blog-empty {
  padding: 3rem 0;
  color: var(--rl-ink-muted);
}

.blog-pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.blog-pagination-status {
  font-size: 0.88rem;
  color: var(--rl-ink-muted);
}

/* Article page */

.blog-article-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.blog-article-main {
  max-width: 46rem;
}

.blog-breadcrumb {
  display: flex;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--rl-ink-muted);
  margin-bottom: 1.25rem;
}

.blog-article-header h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
}

.blog-article-summary {
  margin-top: 0.85rem;
  font-size: 1.15rem;
  color: var(--rl-ink-soft);
}

.blog-article-header .blog-card-meta {
  margin-top: 1rem;
}

.blog-hero-img {
  margin-top: 1.75rem;
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

/* Rendered markdown body. Element selectors on purpose: the HTML comes out of the
   sanitizer with only id/class surviving, so styling must not depend on authors adding
   classes. */

.blog-article-content {
  margin-top: 1.9rem;
}

.blog-article-content h2 {
  margin: 2.2rem 0 0.8rem;
  font-size: 1.55rem;
}

.blog-article-content h3 {
  margin: 1.7rem 0 0.6rem;
}

.blog-article-content p {
  margin: 0 0 1rem;
}

.blog-article-content ul,
.blog-article-content ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.blog-article-content li {
  margin: 0.35rem 0;
}

.blog-article-content blockquote {
  margin: 1.25rem 0;
  padding: 0.35rem 0 0.35rem 1.1rem;
  border-left: 3px solid var(--rl-amber);
  color: var(--rl-ink-soft);
}

.blog-article-content pre {
  margin: 0 0 1.15rem;
  padding: 1rem 1.2rem;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  border-radius: var(--rl-radius-sm);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.55;
}

.blog-article-content pre code {
  font-size: inherit;
}

.blog-article-content img {
  border-radius: var(--rl-radius-sm);
}

.blog-article-content .table-responsive {
  margin: 0 0 1.15rem;
  overflow-x: auto;
}

.blog-article-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

.blog-article-content th,
.blog-article-content td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rl-line-strong);
  text-align: left;
  vertical-align: top;
}

.blog-article-content th {
  background: var(--rl-paper-warm);
}

.blog-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 2.25rem;
}

.blog-article-tags-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.blog-faq {
  margin-top: 2.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.blog-faq h2 {
  font-size: 1.35rem;
}

.blog-faq dl {
  margin: 1rem 0 0;
}

.blog-faq dt {
  margin-top: 1.1rem;
  font-weight: 600;
}

.blog-faq dd {
  margin: 0.35rem 0 0;
  color: var(--rl-ink-soft);
}

.blog-related {
  margin-top: 2.75rem;
}

.blog-related h2 {
  font-size: 1.35rem;
}

.blog-related ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.blog-related li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rl-line);
}

.blog-related li span {
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

.blog-sidebar {
  position: sticky;
  top: 6rem;
}

.blog-toc {
  padding-left: 1.1rem;
  border-left: 2px solid var(--rl-line-strong);
  font-size: 0.9rem;
}

.blog-toc-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.blog-toc ul {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.blog-toc li {
  margin: 0.45rem 0;
}

.blog-toc-l3 {
  padding-left: 0.9rem;
}

.blog-toc a {
  color: var(--rl-ink-soft);
  text-decoration: none;
}

.blog-toc a:hover {
  color: var(--rl-amber-deep);
}

@media (max-width: 62rem) {
  .blog-article-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The TOC reads as a footer index once it can't sit alongside the text. */
  .blog-sidebar {
    position: static;
    order: 2;
  }
}

/* ---------- 19. Error pages ---------- */

/* Whoever lands here was going somewhere else, so the page says what happened in one
   line and offers the two ways onward. No illustration and no apology paragraph: a
   wrong URL is a small disappointment, and dressing it up spends the reader's time
   twice. */
.error-page {
  padding: clamp(5rem, 14vw, 10rem) 0;
}

.error-code {
  font-variant-numeric: tabular-nums;
}

.error-lede {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--rl-ink-soft);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* ---------- 20. Docs ---------- */

/* A reference page a person can scan: connect first, then folded groups. The machine contract
   (verbatim instructions, every tool argument, the worked briefing) stays in the HTML so an
   assistant fetching the source still has it, and so the tests that pin it still pass — it
   just is not the page. */
.docs-page {
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(4rem, 10vw, 7rem);
}

.docs-shell {
  max-width: 52rem;
}

.docs-header {
  margin-bottom: 3rem;
}

.docs-lede {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: 1.1rem;
  color: var(--rl-ink-soft);
}

.docs-page h2 {
  margin-top: 3.25rem;
  margin-bottom: 0.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rl-line);
}

.docs-facts {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--rl-paper-warm);
  border-radius: var(--rl-radius);
}

/* Two columns, so a value that wraps stays in its column. As inline text the second line of
   "X-RelayLink-Key: your-key" started under the label on a phone. Below 40rem the label sits
   above the value: a 7rem first column on a 384px screen is what made the hero unreadable. */
.docs-facts p {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  margin: 0.45rem 0;
}

@media (max-width: 40rem) {
  .docs-facts p {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

.docs-val {
  min-width: 0;
  overflow-wrap: anywhere;
}

.docs-key {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.docs-note {
  color: var(--rl-ink-soft);
}

/* The address to paste, first and alone: a person arriving here wants one string, and the copy
   button exists only when the script does (html.js), so the no-script page is a selectable line. */
.docs-url {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--rl-paper-warm);
  border-left: 3px solid var(--rl-amber);
  border-radius: var(--rl-radius-sm);
}

.docs-url code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 1.05rem;
}

@media (max-width: 40rem) {
  .docs-url {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-url .copy-btn {
    align-self: flex-end;
  }
}

.copy-btn {
  display: none;
  flex: 0 0 auto;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-amber-deep);
  background: transparent;
  border: 1px solid var(--rl-amber-deep);
  border-radius: var(--rl-radius-sm);
  cursor: pointer;
}

html.js .copy-btn {
  display: inline-flex;
}

.copy-btn:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 2px;
}

.copy-btn[data-copied] {
  color: var(--rl-paper);
  background: var(--rl-amber-deep);
}

.docs-connect h3 {
  font-family: inherit;
}

/* A command and its Copy button. The command wraps rather than scrolls - a soft wrap does not
   reach the clipboard, so a wrapped command still pastes as one line, and nothing needs a tab
   stop to be reached. One click selects the whole of it where the script, and so the button,
   is absent. */
.docs-cmd-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.docs-cmd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--rl-paper-warm);
  border-radius: var(--rl-radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.docs-cmd code,
.docs-url code {
  -webkit-user-select: all;
  user-select: all;
}

.docs-cmd-row .copy-btn {
  margin-top: 0.45rem;
}

/* Wraps rather than scrolls: the instructions are prose, and a reader should not have to drag a
   paragraph sideways to finish a sentence. */
.docs-pre {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--rl-paper-warm);
  border-left: 3px solid var(--rl-amber);
  border-radius: var(--rl-radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--rl-ink-soft);
}

/* The instructions are numbered rules in English, not a command. Monospace made a 12,000-pixel
   block out of them; the page font lets a person actually read one. */
.docs-rules {
  font-family: inherit;
  color: var(--rl-ink);
}

.docs-disclosure .docs-pre {
  margin: 0.75rem 0 0;
}

.docs-tool {
  padding: 0;
  border-bottom: 1px solid var(--rl-line);
}

.docs-tool:last-child {
  border-bottom: 0;
}

/* display is left on the heading, not the summary: flex on <summary> hides the native
   disclosure triangle in Safari. */
.docs-tool summary {
  padding: 0.85rem 0;
  cursor: pointer;
}

.docs-tool summary h4 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0;
  font-size: 1.05rem;
  vertical-align: middle;
}

.docs-tool h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.docs-tool > :not(summary) {
  padding: 0 0 1.15rem;
}

/* The picker cards under #mentions stay articles, so they still need the old block padding
   the tool rows gave up when they became disclosures. */
article.docs-tool {
  padding: 1.4rem 0;
}

/* A pill rather than plain coloured text: a card can now carry up to three of these at once
   (read-only, destructive, reaches outside RelayLink, not idempotent), and text at the tool
   name's own weight reads as noise at that density. */
.docs-tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--rl-paper-deep);
  border: 1px solid var(--rl-line-strong);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rl-verify);
  white-space: nowrap;
}

.docs-tag-destructive {
  background: var(--rl-amber-wash);
  border-color: rgba(143, 96, 25, 0.35);
  color: var(--rl-amber-deep);
}

.docs-tag-open,
.docs-tag-note {
  background: var(--rl-white);
  border-color: var(--rl-line-strong);
  color: var(--rl-ink-muted);
}

.docs-optional {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-left: 0.5rem;
  color: var(--rl-ink-muted);
}

.docs-params,
.docs-provenance {
  margin: 0.9rem 0 0;
}

.docs-params dt,
.docs-provenance dt {
  margin-top: 0.7rem;
  font-weight: 500;
}

.docs-params dd,
.docs-provenance dd {
  margin: 0.2rem 0 0;
  color: var(--rl-ink-soft);
}

.docs-provenance dt code {
  white-space: normal;
}

.docs-links {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
}

.docs-links li {
  margin: 0.45rem 0;
  color: var(--rl-ink-soft);
}

/* The worked example is a rendered artefact, not prose: monospace, and it scrolls rather than
   wraps, because the renderer's rules and box drawing carry meaning that reflow destroys. */
.docs-example {
  white-space: pre;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.55;
  border-left-color: var(--rl-verify);
}

.docs-refusals dt {
  margin-top: 1.1rem;
}

.docs-refusals dt code {
  white-space: normal;
  color: var(--rl-amber-deep);
}

.docs-refusals dd {
  margin: 0.35rem 0 0;
  color: var(--rl-ink-soft);
}

/* The jump-to-a-section row reuses .blog-filters/.blog-pill (the same wrapping-pill-row
   component the guides' category filter already is) rather than a second copy of the same
   shape under a new name. */

/* The rules, at a glance: four short cards rather than making somebody read fourteen numbered
   rules to find the ones that matter to them. A paraphrase, clearly not the verbatim block below
   it — every word a test can check still comes from that block. */
.docs-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.docs-callout {
  padding: 1rem 1.15rem;
  background: var(--rl-paper-warm);
  border-radius: var(--rl-radius-sm);
}

.docs-callout strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}

.docs-callout span {
  font-size: 0.86rem;
  color: var(--rl-ink-soft);
}

.docs-category-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--rl-ink-muted);
}

/* Searching the tool list is layered on exactly like the copy buttons: with no script every
   card is simply visible, so the input is hidden rather than shown non-functional. */
.docs-search-wrap {
  display: none;
  margin: 1.5rem 0 0.5rem;
}

html.js .docs-search-wrap {
  display: block;
}

.docs-search {
  width: 100%;
  max-width: 26rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--rl-ink);
  background: var(--rl-white);
  border: 1px solid var(--rl-control-line);
  border-radius: var(--rl-radius-sm);
}

.docs-search:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 2px;
}

/* Hidden by the HTML attribute rather than by this rule, so it starts hidden with no script
   (nothing can filter, so it never needs to show) and JS toggles the same attribute rather than
   fighting a class-based display:none. */
.docs-search-empty {
  padding: 1.4rem 0;
  color: var(--rl-ink-muted);
}

/* A native disclosure, styled once and reused for the per-client instructions, the annotation
   legend and the FAQ. Three different pieces of collapsed-by-default content that would read as
   three different components if each grew its own accordion look. */
.docs-disclosure {
  margin: 0.9rem 0;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
  overflow: hidden;
}

.docs-disclosure + .docs-disclosure {
  margin-top: 0.6rem;
}

.docs-disclosure summary {
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-disclosure[open] summary {
  border-bottom: 1px solid var(--rl-line);
}

.docs-disclosure > :not(summary) {
  padding: 0 1.1rem 1.1rem;
}

.docs-disclosure > p:first-of-type {
  margin-top: 1rem;
}

.docs-disclosure summary h2,
.docs-disclosure summary h3 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* After the inherit rule above, or a category label would pick up the Connect card's size and
   weight. Groups stay the small amber uppercase they were as open headings. */
.docs-category summary h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

/* Visually hidden: a screen reader needs the search field's purpose announced once, and a
   sighted reader already has the placeholder. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 22. Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 56rem) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--rl-white);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  overflow: hidden;
}

.price-card-featured {
  border-color: var(--rl-navy-deep);
  box-shadow: var(--rl-shadow-lift);
}

.price-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-band-lot {
  color: var(--rl-amber-soft);
}

.price-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.6rem;
}

.price-name {
  font-size: 1.5rem;
}

.price-for {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--rl-ink-muted);
}

.price-figure {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 1.2rem 0 0.3rem;
}

.price-amount {
  font-family: var(--rl-font-display);
  font-size: 3.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--rl-ink);
}

.price-per {
  font-size: 0.92rem;
  color: var(--rl-ink-muted);
}

.price-alt {
  font-size: 0.9rem;
  color: var(--rl-ink-soft);
}

.price-alt s {
  color: var(--rl-ink-muted);
}

.price-list {
  display: grid;
  gap: 0.65rem;
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  list-style: none;
  border-top: 1px solid var(--rl-line);
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.price-list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.price-list .icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.22rem;
  color: var(--rl-verify);
}

.price-main .button {
  align-self: flex-start;
  margin-top: 1.6rem;
}

/* The free tier as a line, not a card - see the comment in Index.cshtml. */
.price-free {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.1rem 1.4rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  background: var(--rl-white);
}
@media (min-width: 56rem) {
  .price-free {
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }
}
.price-free-name {
  margin: 0;
  font-family: var(--rl-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rl-ink);
  white-space: nowrap;
}
.price-free-name span {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--rl-verify-wash);
  color: var(--rl-verify);
  font-family: var(--rl-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15rem;
}
.price-free-copy {
  margin: 0;
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

/* The reason to act now, as a banner. Contrast and one bold number, not fireworks. */
.founding-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.6rem;
  border: 1px solid var(--rl-amber-soft);
  border-radius: var(--rl-radius);
  background: linear-gradient(90deg, var(--rl-amber-wash), var(--rl-white) 70%);
  box-shadow: var(--rl-shadow);
}
.founding-banner .icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--rl-amber-deep);
}
.founding-banner p {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  color: var(--rl-ink-soft);
}
.founding-banner strong {
  color: var(--rl-ink);
}
.founding-banner-chip {
  flex: none;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--rl-navy-deep);
  color: var(--rl-amber-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .founding-banner {
    flex-wrap: wrap;
  }
  .founding-banner p {
    flex-basis: calc(100% - 2.5rem);
  }
  /* The sentence already says "the first 100 seats"; on a phone the chip only adds a third row. */
  .founding-banner-chip {
    display: none;
  }
}

/* Yearly / monthly without a script: two radios, visually hidden but focusable, and the
   :checked ~ sibling combinator doing the switching. The labels are the control. */
.pricing-body {
  position: relative;
}
.bill-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.bill-toggle {
  display: inline-flex;
  margin: 0 0 1.5rem;
  padding: 0.25rem;
  border: 1px solid var(--rl-line);
  border-radius: 999px;
  background: var(--rl-paper-warm);
}
.bill-toggle label {
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--rl-ink-soft);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bill-toggle label span {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}
#bill-yearly:checked ~ .bill-toggle label[for="bill-yearly"],
#bill-monthly:checked ~ .bill-toggle label[for="bill-monthly"] {
  background: var(--rl-white);
  color: var(--rl-ink);
  box-shadow: var(--rl-shadow);
}
.bill-radio:focus-visible ~ .bill-toggle {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}
#bill-yearly:checked ~ .pricing-grid .p-monthly,
#bill-monthly:checked ~ .pricing-grid .p-yearly {
  display: none;
}
@media (max-width: 40rem) {
  .bill-toggle {
    display: flex;
  }
  .bill-toggle label {
    flex: 1;
    text-align: center;
  }
}

/* On the card: who it is for, the human-sized anchor under the figure, the assurance under the
   button, and the standard price as the quietest line on the card. */
.price-chip {
  align-self: flex-start;
  margin: 0 0 0.8rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: var(--rl-amber-wash);
  color: var(--rl-amber-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.price-card-featured .price-chip {
  background: var(--rl-navy-deep);
  color: var(--rl-amber-soft);
}
.price-anchor {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rl-ink);
}
.price-assure {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--rl-ink);
}
.price-after {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  color: var(--rl-ink-muted);
}
.price-main .button {
  margin-top: 1.5rem;
  align-self: flex-start;
}

.pricing-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.pricing-note {
  padding: 1.3rem 1.45rem;
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
  font-size: 0.94rem;
  color: var(--rl-ink-soft);
}

.pricing-note h3 {
  margin-bottom: 0.5rem;
  font-family: var(--rl-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

/* ---------- 23. Founding list & forms ---------- */

/* The one form on the marketing surface. Field styles are defined once, light, and
   re-coloured inside the dark band, so the same partial renders correctly on the status
   page (paper) and at the foot of the landing page (navy). */
.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.field-optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rl-ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--rl-white);
  color: var(--rl-ink);
  border: 1px solid var(--rl-control-line);
  border-radius: var(--rl-radius-sm);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* opacity: 1, for the reason AppShell's placeholder rule carries: --rl-ink-muted passes AA on
   its own, and dimming it a further .8 composites to 3.51:1 on white — under AA, on the hint
   telling somebody what to type. The declaration stays rather than going, because Firefox applies
   an opacity of its own to placeholders. Both selectors: the textarea arrived with the support
   form and had the same .8 on it, so taking either side alone would have left one of them dim. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--rl-ink-muted);
  opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--rl-ink-muted);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 2px;
  border-color: var(--rl-amber-deep);
}

/* The honeypot: off-canvas rather than display:none, since some form-fillers skip hidden
   inputs and the point is that a script fills it. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The support form is the founding form with a message in it, so it borrows every field style
   rather than defining a second set. Only what a textarea needs is new: a starting height, and a
   resize handle that cannot break the column. */
.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.support-form .field + .field {
  margin-top: 1rem;
}

.support-form .button {
  margin-top: 1.25rem;
}

/* The reason a submission came back, above the form it came back to. */
.form-problem {
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem;
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius-sm);
  color: var(--rl-ink);
  font-size: 0.95rem;
}

.founding-form {
  position: relative;
  padding: 1.6rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.founding-row {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 40rem) {
  .founding-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .founding-row .button {
    width: auto;
  }
}

.founding-extra {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.founding-fine {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--rl-ink-muted);
}

/* The band itself: the page's darkest surface, so the form is the last thing the eye
   lands on before the technical footnote. */
.founding {
  background:
    radial-gradient(44rem 24rem at 90% 0%, rgba(201, 138, 46, 0.22) 0%, transparent 62%),
    var(--rl-navy-black);
  color: rgba(250, 247, 242, 0.82);
  border-top: 1px solid rgba(250, 247, 242, 0.08);
}

.founding h2 {
  color: var(--rl-paper);
}

.founding .section-kicker {
  color: var(--rl-amber-soft);
}

.founding .section-intro {
  color: rgba(250, 247, 242, 0.72);
}

.founding .section-intro strong {
  font-weight: 600;
  color: var(--rl-amber-soft);
}

.founding-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .founding-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.founding-facts {
  display: grid;
  gap: 0.85rem;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: 0.95rem;
  color: rgba(250, 247, 242, 0.72);
}

.founding-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}

.founding-facts .icon {
  margin-top: 0.2rem;
  color: var(--rl-amber-soft);
}

.founding .founding-form {
  background: rgba(250, 247, 242, 0.05);
  border-color: rgba(250, 247, 242, 0.14);
}

.founding .field label {
  color: rgba(250, 247, 242, 0.62);
}

.founding .field-optional {
  color: rgba(250, 247, 242, 0.5);
}

.founding .field input,
.founding .field select {
  background: var(--rl-paper);
  border-color: transparent;
}

.founding .founding-fine {
  color: rgba(250, 247, 242, 0.5);
}

/* Navy on navy-black would vanish; on this one surface the primary button is amber, the
   same accent the headline's italic already carries. */
.founding .button-primary {
  background: var(--rl-amber);
  color: var(--rl-navy-black);
  box-shadow: 0 10px 24px rgba(201, 138, 46, 0.28);
}

.founding .button-primary:hover {
  background: var(--rl-amber-soft);
  color: var(--rl-navy-black);
  box-shadow: 0 16px 32px rgba(201, 138, 46, 0.34);
}

/* Post-submit status page: the thank-you, or the form again with the problem named. */
.status-page {
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(4rem, 10vw, 7rem);
}

.status-inner {
  max-width: 46rem;
}

.status-lede {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: 1.15rem;
  color: var(--rl-ink-soft);
}

.status-card {
  margin-top: 2rem;
  padding: 1.3rem 1.45rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  font-size: 0.96rem;
  color: var(--rl-ink-soft);
}

.status-card-label {
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.status-page .founding-form {
  max-width: 34rem;
  margin-top: 2rem;
  box-shadow: var(--rl-shadow);
}

.status-page .error-actions {
  margin-top: 2rem;
}

/* ---------- 21. Legal ---------- */
/* The policy set shares the docs layout. Two things it adds: the index list on /legal, and a
   table for the pages that are lists of facts (cookies, subprocessors). The table scrolls inside
   its own wrapper on a phone rather than widening the page — a rule the whole site keeps. */
.legal-index {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-index li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rl-line);
}
.legal-index li:last-child {
  border-bottom: 1px solid var(--rl-line);
}
.legal-index a {
  font-family: var(--rl-font-display, inherit);
  font-size: 1.2rem;
  font-weight: 600;
}
.legal-index p {
  margin: 0.35rem 0 0;
  color: var(--rl-ink-soft);
}
.legal-table-wrap {
  margin: 1.25rem 0;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
  padding: 0.7rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rl-line);
}
.legal-table th,
.legal-table td::before {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}
.legal-table td::before {
  display: none;
}
/* On a phone the table becomes a list of cards: each row a block, each cell under its own
   column label (from data-label), so nothing is wider than the page. A four-column table at
   390px was either unreadable or a horizontal scroll, and the site allows neither. */
@media (max-width: 40rem) {
  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .legal-table tr {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rl-line);
  }
  .legal-table td {
    display: block;
    padding: 0.3rem 0;
    border: 0;
  }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
  }
}

/* ---------- 24. Landing: records, stories, benefits ---------- */

/* The record card. One shape for every "here is what RelayLink kept" illustration on the page —
   the hero, each story's saved state, and the cross-AI memory demo — because they are the same
   object seen at different moments, and drawing them three ways would suggest otherwise. */
.record-card {
  padding: 1.35rem 1.4rem 1.15rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.record-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rl-line);
  font-family: var(--rl-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rl-ink);
}

.record-badge {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line-strong);
  font-family: var(--rl-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.record-rows {
  display: grid;
  gap: 0.85rem;
  margin: 0.95rem 0 0;
  padding: 0;
  list-style: none;
}

.record-rows > li {
  display: grid;
  gap: 0.18rem;
}

.record-key {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.record-val {
  font-size: 0.98rem;
  color: var(--rl-ink);
}

/* An open question is the one row on these cards that is not settled, so it is marked rather than
   left to be inferred from its label — the same distinction the product draws between a decision
   and a question, drawn here in the illustration of it. */
.record-open .record-key {
  color: var(--rl-ink-muted);
}

.record-open .record-val {
  color: var(--rl-ink-soft);
  font-style: italic;
}

.record-card-foot {
  margin-top: 1.05rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rl-line);
  font-size: 0.83rem;
  color: var(--rl-ink-muted);
}

/* Inside the hero the rotated sheet is an absolutely positioned ::before, and a static sibling
   paints under it; positioning the card is what puts it on top. */
.hero-visual .record-card {
  position: relative;
}

.record-card-sm {
  padding: 1.1rem 1.15rem 0.95rem;
  box-shadow: none;
}

.record-card-sm .record-card-head {
  font-size: 0.95rem;
}

/* Where a value came from, and whether anybody has agreed to it. Two chips only: a source, and the
   fact that something is still a proposal. */
.src-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line-strong);
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--rl-ink-muted);
}

.src-chip-open {
  background: var(--rl-amber-wash);
  border-color: var(--rl-amber-soft);
  color: var(--rl-amber-deep);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin: 1.9rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--rl-line);
  list-style: none;
  font-size: 0.92rem;
  color: var(--rl-ink-muted);
}

.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-proof .icon {
  color: var(--rl-amber-deep);
}

/* ---------- 24b. The story demo ---------- */

.story {
  position: relative;
}

/* The choice is three radios: keyboard-operable natively, and the panel it selects is chosen by
   :checked, so the page shows a story with the script blocked. */
.story-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.story-picker {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 46rem) {
  .story-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.story-picker label {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.story-picker label:hover {
  border-color: var(--rl-amber);
}

.story-pick-name {
  font-weight: 600;
  color: var(--rl-ink);
}

.story-pick-note {
  font-size: 0.9rem;
  color: var(--rl-ink-muted);
}

/* The one-word name each story wears on a phone, where the pill has no room for the full one.
   aria-hidden, because the full name is the accessible one and reads on every width. */
.story-pick-short {
  display: none;
}

#story-idea:checked ~ .story-picker label[for="story-idea"],
#story-decision:checked ~ .story-picker label[for="story-decision"],
#story-project:checked ~ .story-picker label[for="story-project"] {
  background: var(--rl-white);
  border-color: var(--rl-navy-deep);
  box-shadow: inset 0 0 0 1px var(--rl-navy-deep), var(--rl-shadow);
}

.story-radio:focus-visible ~ .story-picker label[for="story-idea"],
.story-radio:focus-visible ~ .story-picker label[for="story-decision"],
.story-radio:focus-visible ~ .story-picker label[for="story-project"] {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

/* A story that is not chosen is still laid out - fading, not vanishing - so switching can
   crossfade with no script: the one leaving sits absolutely over the one arriving and fades out,
   the one arriving is in flow and fades in, and the stage clips the overlap. overflow: clip with a
   margin rather than hidden, so the scene cards keep their shadows. */
.story-stage {
  position: relative;
  overflow: clip;
  overflow-clip-margin: 3rem;
}

.story-panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

#story-idea:checked ~ .story-stage .story-panel-idea,
#story-decision:checked ~ .story-stage .story-panel-decision,
#story-project:checked ~ .story-stage .story-panel-project {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.story-title {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--rl-ink);
}

.story-scenes {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: scene;
}

.scene {
  counter-increment: scene;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.scene-name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

/* Numbered by position rather than by counter: a counter skips a scene the script has hidden,
   so with playback on every scene read as "1". */
.scene:nth-child(1) .scene-name::before {
  content: "1";
}

.scene:nth-child(2) .scene-name::before {
  content: "2";
}

.scene:nth-child(3) .scene-name::before {
  content: "3";
}

.scene:nth-child(4) .scene-name::before {
  content: "4";
}

.scene-name::before {
  content: counter(scene);
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-amber-soft);
  font-size: 0.75rem;
  letter-spacing: 0;
}

.scene-body {
  display: grid;
  gap: 1rem;
}

.scene-talk {
  display: grid;
  gap: 0.7rem;
}

/* Speaker labels are explicit rather than implied by alignment, because alignment says nothing to
   a screen reader and this demo turns on who is talking. */
.turn {
  padding: 0.8rem 1rem;
  border-radius: var(--rl-radius-sm);
  font-size: 0.97rem;
  line-height: 1.55;
}

.turn-who {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.turn-you {
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-amber-soft);
  color: var(--rl-ink);
}

.turn-you .turn-who {
  color: var(--rl-amber-deep);
}

.turn-ai {
  background: var(--rl-paper);
  border: 1px solid var(--rl-line);
  color: var(--rl-ink-soft);
}

.turn-other {
  background: var(--rl-verify-wash);
  border: 1px solid #c6dbcf;
  color: var(--rl-ink);
}

.turn-other .turn-who {
  color: var(--rl-verify);
}

.turn-email {
  border-style: dashed;
}

.scene-note {
  font-size: 0.9rem;
  color: var(--rl-ink-muted);
}

.scene-transition {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.scene-transition::before,
.scene-transition::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rl-line);
}

/* The review step. Deliberately a card that looks like something you read before pressing, because
   that is the one moment the product asks a person to stop. The button is a span: nothing on this
   page is a control that does something. */
.review-card {
  padding: 1.05rem 1.15rem;
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius-sm);
}

.review-head {
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.review-line {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--rl-ink);
}

.review-key {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.review-act {
  margin-top: 1rem;
}

.review-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.review-sent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-verify);
}

.review-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  font-size: 0.88rem;
  font-weight: 600;
}

.story-payoff {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-family: var(--rl-font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--rl-ink);
}

.story-caption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

/* ---------- 24c. Benefits ---------- */

/* Eight bordered white boxes in a grid is the shape this page kept being described as: boxy. The
   card is not the object here - the writing is - so at rest each one is a hairline, a label and
   type on the page's own ground, and the card materialises only under the pointer. Nothing about
   the reading order or the touch targets changes; what goes is four sides of chrome around every
   one of eight things. */
.benefit-grid {
  display: grid;
  gap: 0 1.75rem;
  grid-template-columns: minmax(0, 1fr);
}

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

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

.benefit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.15rem 1.5rem;
  border-radius: var(--rl-radius);
  background: transparent;
}

/* The rule is on a pseudo-element rather than the border, so the card can take a background on
   hover without the line surviving on top of it. */
.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 1.15rem;
  left: 1.15rem;
  height: 1px;
  background: var(--rl-line-strong);
}

.benefit-card:hover {
  background: var(--rl-white);
  box-shadow: var(--rl-shadow-lift);
  transform: translateY(-4px);
}

.benefit-card:hover::before {
  opacity: 0;
}

.benefit-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.benefit-card h3 {
  margin: 0.6rem 0 0.55rem;
  font-size: 1.18rem;
}

.benefit-card > p {
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

/* The example is somebody speaking, so it is set as speech - a hairline and an italic, not a
   filled panel inside a panel. */
.benefit-say {
  margin-top: 0.9rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rl-amber-soft);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--rl-ink-muted);
}

.benefit-more {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---------- 24d. Why not email ---------- */

.compare {
  overflow: hidden;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

/* The header row exists only where three columns do. Below that width every row carries its own
   labels, so the question and both approaches stay together instead of a column heading scrolling
   away from the answer under it. */
.compare-head {
  display: none;
}

.compare-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-rows > li {
  display: grid;
  gap: 0.7rem;
  padding: 1.15rem 1.35rem;
  border-top: 1px solid var(--rl-line);
}

.compare-rows > li:first-child {
  border-top: 0;
}

.compare-key {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.compare-want {
  font-weight: 600;
  color: var(--rl-ink);
}

.compare-old {
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.compare-new {
  font-size: 0.95rem;
  color: var(--rl-ink);
}

.compare-new .compare-key {
  color: var(--rl-amber-deep);
}

@media (min-width: 60rem) {
  .compare-head {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--rl-paper-warm);
    border-bottom: 1px solid var(--rl-line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rl-ink-muted);
  }

  .compare-head > span:last-child {
    color: var(--rl-amber-deep);
  }

  .compare-rows > li {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.35rem 1.5rem;
  }

  .compare-key {
    display: none;
  }
}

/* ---------- 24e. Cross-AI memory ---------- */

.section-memory {
  background: var(--rl-amber-wash);
  border-top: 1px solid var(--rl-amber-soft);
  border-bottom: 1px solid var(--rl-amber-soft);
}

.memory-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .memory-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.memory-caveat {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 0.85rem 1rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-amber-soft);
  border-radius: var(--rl-radius-sm);
  font-size: 0.92rem;
  color: var(--rl-ink-soft);
}

.memory-caveat .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--rl-amber-deep);
}

.memory-demo {
  position: relative;
}

.memory-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.memory-toggle {
  display: inline-flex;
  padding: 0.28rem;
  margin-bottom: 1.15rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-amber-soft);
  border-radius: 999px;
}

.memory-toggle label {
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--rl-ink-muted);
  cursor: pointer;
}

#memory-saved:checked ~ .memory-toggle label[for="memory-saved"],
#memory-retrieved:checked ~ .memory-toggle label[for="memory-retrieved"] {
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
}

.memory-radio:focus-visible ~ .memory-toggle {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.memory-said-stack {
  display: grid;
  margin-bottom: 1.1rem;
}

.memory-said {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  padding: 0.85rem 1rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-amber-soft);
  border-radius: var(--rl-radius-sm);
  font-size: 0.97rem;
  color: var(--rl-ink);
}

#memory-saved:checked ~ .memory-said-stack .m-saved,
#memory-retrieved:checked ~ .memory-said-stack .m-retrieved {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.memory-who {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.memory-note {
  margin-top: 0.95rem;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

/* ---------- 24f. Recall ---------- */

.recall {
  max-width: 52rem;
  margin: 0 auto;
}

.recall-q {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-control-line);
  border-radius: 999px;
  font-size: 1.02rem;
  color: var(--rl-ink);
}

.recall-q .icon {
  flex: none;
  color: var(--rl-amber-deep);
}

.recall-result {
  margin-top: 1.1rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.recall-line {
  display: grid;
  gap: 0.22rem;
  margin-top: 1.05rem;
  font-size: 0.98rem;
  color: var(--rl-ink);
}

.recall-line:first-child {
  margin-top: 0;
}

.recall-key {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.recall-line-lead {
  font-family: var(--rl-font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.recall-line-open .recall-key {
  color: var(--rl-ink-muted);
}

.recall-line-open {
  color: var(--rl-ink-soft);
  font-style: italic;
}

.recall-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.recall-chips .src-chip {
  margin-left: 0;
}

.recall-earlier {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rl-line);
  font-size: 0.92rem;
  color: var(--rl-ink-soft);
}

.recall-earlier summary {
  font-weight: 600;
  color: var(--rl-ink);
  cursor: pointer;
}

.recall-earlier p {
  margin-top: 0.65rem;
}

.recall-note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

/* ---------- 24g. Follow-through ---------- */

.follow-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .follow-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.say-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.say-list li {
  padding: 0.6rem 0.9rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
  font-size: 0.93rem;
  font-style: italic;
  color: var(--rl-ink-soft);
}

.return-card {
  padding: 1.4rem 1.45rem 1.2rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.return-head {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rl-line);
  font-family: var(--rl-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rl-ink);
}

.return-group {
  margin-top: 1.15rem;
}

.return-group-name {
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.return-item {
  font-size: 0.96rem;
  color: var(--rl-ink);
}

.return-item-empty {
  color: var(--rl-ink-muted);
  font-style: italic;
}

.return-foot {
  margin-top: 1.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rl-line);
  font-size: 0.83rem;
  color: var(--rl-ink-muted);
}

/* ---------- 24h. Working with people ---------- */

.entry-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.entry-card {
  padding: 1.6rem 1.45rem 1.4rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: none;
}

.entry-card:hover {
  border-color: var(--rl-line-strong);
  box-shadow: var(--rl-shadow-lift);
  transform: translateY(-4px);
}

.entry-card h3 {
  margin: 1.1rem 0 0.5rem;
  font-size: 1.15rem;
}

.entry-card p {
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.people-more {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .people-more {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.people-note {
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--rl-line-strong);
  border-radius: 0;
  background: transparent;
}

.people-note h3 {
  margin-bottom: 0.5rem;
  font-size: 1.02rem;
}

.people-note p {
  font-size: 0.93rem;
  color: var(--rl-ink-soft);
}

/* ---------- 24i. Connect and start ---------- */

.start-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .start-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.start-main {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  align-content: start;
}

.start-steps {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-peek-wrap {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rl-line);
}

.start-steps > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.start-num {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--rl-white);
  border: 1px solid var(--rl-amber-soft);
  font-family: var(--rl-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rl-amber-deep);
}

.start-steps h3 {
  margin-bottom: 0.35rem;
  font-size: 1.12rem;
}

.start-steps p {
  font-size: 0.96rem;
  color: var(--rl-ink-soft);
}

.section-aside-flag {
  margin-top: 1.5rem;
  padding: 0.9rem 1.05rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line-strong);
  border-left: 3px solid var(--rl-amber);
  border-radius: 0 var(--rl-radius-sm) var(--rl-radius-sm) 0;
  color: var(--rl-ink-soft);
}

.tool-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rl-line);
}

/* Fifty-six snake_case names is the honest answer to "what can it do" and the wrong thing to
   put in front of somebody reading a calm page, so the list sits behind one disclosure. The
   summary carries the count sentence DocsPageTests holds to the running server. */
.tool-more > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
  cursor: pointer;
  list-style: none;
}

.tool-more > summary:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.tool-more[open] > summary {
  margin-bottom: 1rem;
}

/* The list used to sit in a two-column hero-style split, which kept it to about half the page
   height. It is full width now, and fifty-six single-file rows is a scroll nobody reads — so it
   breaks into columns where there is room, with the border moved onto the cells because a
   multi-column box cannot carry one that closes. */
@media (min-width: 46rem) {
  .tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-list li:nth-last-child(2) {
    border-bottom: 0;
  }
}

@media (min-width: 72rem) {
  .tool-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-list li:nth-last-child(3) {
    border-bottom: 0;
  }
}

/* ---------- 24j. The boundary ---------- */

.boundary-limit {
  max-width: 52rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 1.6rem 1.75rem 1.4rem;
  background: rgba(250, 247, 242, 0.06);
  border: 1px solid rgba(250, 247, 242, 0.16);
  border-radius: var(--rl-radius);
}

.boundary-limit h3 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.boundary-limit p {
  margin-top: 0.85rem;
  font-size: 0.96rem;
  color: rgba(250, 247, 242, 0.78);
}

.boundary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(250, 247, 242, 0.16);
  font-weight: 600;
}

.boundary-links a {
  color: var(--rl-amber-soft);
}

.price-foot {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--rl-ink-muted);
}

/* ---------- 24k. Questions ---------- */

.faq-shell {
  max-width: 52rem;
}

.faq {
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  overflow: hidden;
}

/* Every question is a <details>, so the whole set works and is reachable with the script blocked.
   .faq-q rather than a bare `details` selector, because the shell has learned twice that a bare
   rule and a named one on the same element is how a disclosure ends up wearing a button. */
.faq-q {
  border-top: 1px solid var(--rl-line);
}

.faq > .faq-q:first-child {
  border-top: 0;
}

.faq-q > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.05rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--rl-ink);
  cursor: pointer;
  list-style: none;
}

.faq-q > summary:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: -2px;
}

.faq-q > p {
  padding: 0 1.35rem 1.2rem 3.2rem;
  font-size: 0.97rem;
  color: var(--rl-ink-soft);
}

.faq-more {
  border-top: 1px solid var(--rl-line);
  background: var(--rl-paper-warm);
}

.faq-more > summary {
  padding: 1.05rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rl-amber-deep);
  cursor: pointer;
}

.faq-more > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  list-style: none;
}

.faq-more > summary::-webkit-details-marker {
  display: none;
}

.faq-more > summary:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: -2px;
}

.faq-more > .faq-q {
  background: var(--rl-white);
}

.faq-group {
  padding: 1rem 1.35rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.founding-back {
  margin-top: 1.35rem;
  font-size: 0.95rem;
  color: rgba(250, 247, 242, 0.72);
}

.founding-back a {
  color: var(--rl-amber-soft);
  font-weight: 600;
}

/* ---------- 24l. Motion ---------- */

/* Everything that moves on the landing page is here, behind the preference. The rule it is
   written to: arrivals are sequenced, not simultaneous - a scene's turns land one after another,
   a record's rows one after another, the send button presses and only then is the reply on its
   way - on one fast-in, long-settle curve, with a spring reserved for the things that land.
   Under reduced motion every state still arrives, instantly, and the meter is not drawn because
   nothing auto-advances for it to measure. The global kill switch in section 16 is what makes
   that true for every rule below without each one having to say so. */

:root {
  --rl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rl-ease-pop: linear(0, 0.36 9%, 0.76 19%, 0.98 29%, 1.06 39%, 1.02 52%, 0.99 66%, 1);
}

@keyframes rl-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-rise-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-rise-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* An advance within a story. Deliberately not rl-pop: a scale is a flourish, and the statement
   here is sequence rather than arrival. Rise and fade only, so nothing about the card's size
   changes while the list beneath it is easing to the new scene's height. */
@keyframes rl-step {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A scene advance. Sideways, because sequence is what a story has: a card rising in reads as
   content loading, a card arriving from the right reads as the next one. */
@keyframes rl-slide-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-slide-out {
  to {
    opacity: 0;
    transform: translateX(-22px);
  }
}

@keyframes rl-settle {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.965);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-sheet {
  from {
    opacity: 0;
    transform: rotate(0deg) translateY(-8px);
  }

  to {
    opacity: 0.65;
    transform: rotate(1.6deg);
  }
}

@keyframes rl-press {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.93);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rl-rule {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes rl-pick {
  0% {
    transform: translateY(-2px) scale(1);
  }

  40% {
    transform: translateY(-4px) scale(1.025);
  }

  100% {
    transform: translateY(-2px) scale(1);
  }
}

@keyframes rl-arrive {
  0% {
    transform: scale(0.985);
  }

  45% {
    transform: scale(1.012);
    box-shadow: var(--rl-shadow-lift);
  }

  100% {
    transform: none;
    box-shadow: var(--rl-shadow);
  }
}

@keyframes rl-arrive-back {
  0% {
    transform: scale(0.985);
  }

  45% {
    transform: scale(1.012);
    box-shadow: var(--rl-shadow-lift);
  }

  100% {
    transform: none;
    box-shadow: var(--rl-shadow);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hero on load. The promise arrives a line at a time, the actions last, and the record
     settles in beside it with its rows landing in the order a person reads them. It resolves on
     its own inside a second and a half; nothing waits on a scroll. */
  .hero-content > * {
    animation: rl-rise 0.9s var(--rl-ease-out) both;
  }

  .hero-content > :nth-child(1) {
    animation-delay: 60ms;
  }

  .hero-content > :nth-child(3) {
    animation-delay: 320ms;
  }

  .hero-content > :nth-child(4) {
    animation-delay: 420ms;
  }

  .hero-content > :nth-child(5) {
    animation-delay: 520ms;
  }

  #hero-title {
    animation: none;
  }

  .hero-line,
  #hero-title em {
    display: inline-block;
    animation: rl-rise 0.9s var(--rl-ease-out) both;
  }

  .hero-line {
    animation-delay: 140ms;
  }

  #hero-title em {
    animation-delay: 260ms;
  }

  .hero-visual {
    animation: rl-settle 1.1s var(--rl-ease-out) 340ms both;
  }

  .hero-visual::before {
    animation: rl-sheet 1.1s var(--rl-ease-out) 540ms both;
  }

  .hero-visual .record-card-head {
    animation: rl-rise 0.7s var(--rl-ease-out) 640ms both;
  }

  .hero-visual .record-rows > li,
  .hero-visual .record-card-foot {
    animation: rl-rise 0.7s var(--rl-ease-out) both;
  }

  .hero-visual .record-rows > li:nth-child(1) {
    animation-delay: 780ms;
  }

  .hero-visual .record-rows > li:nth-child(2) {
    animation-delay: 880ms;
  }

  .hero-visual .record-rows > li:nth-child(3) {
    animation-delay: 980ms;
  }

  .hero-visual .record-card-foot {
    animation-delay: 1100ms;
  }

  /* The stories crossfade on :checked, with a hair of scale so the arriving one reads as coming
     forward rather than only appearing. */
  .story-panel {
    transform: translateY(14px) scale(0.99);
    transition: opacity 0.38s var(--rl-ease-out), transform 0.38s var(--rl-ease-out), visibility 0s linear 0.38s;
  }

  #story-idea:checked ~ .story-stage .story-panel-idea,
  #story-decision:checked ~ .story-stage .story-panel-decision,
  #story-project:checked ~ .story-stage .story-panel-project {
    transition: opacity 0.5s var(--rl-ease-out) 0.12s, transform 0.5s var(--rl-ease-out) 0.12s, visibility 0s;
  }

  /* The picker snaps: the chosen card lifts with a small spring the moment it is chosen. */
  .story-picker label {
    transition: border-color 0.2s var(--rl-ease-out), box-shadow 0.3s var(--rl-ease-out), background 0.2s var(--rl-ease-out), transform 0.3s var(--rl-ease-out);
  }

  #story-idea:checked ~ .story-picker label[for="story-idea"],
  #story-decision:checked ~ .story-picker label[for="story-decision"],
  #story-project:checked ~ .story-picker label[for="story-project"] {
    transform: translateY(-2px);
    animation: rl-pick 0.5s var(--rl-ease-pop) both;
  }

  /* A scene leaves to the left, quickly, and the next one arrives from the right. The script
     adds the two classes; with it absent every scene is simply on the page, and none of this
     applies. */
  .story-scenes {
    position: relative;
  }

  .scene.is-leaving {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    pointer-events: none;
    animation: rl-slide-out 0.2s var(--rl-ease-in-out) both;
  }

  .scene.is-entering {
    animation: rl-slide-in 0.46s var(--rl-ease-out) 0.1s both;
  }

  /* Inside an arriving scene, in order: the label, the conversation turn by turn - you from the
     right, the assistant and the other person from the left - then the record or the review card,
     its rows one after another, and the note. Everything is hidden until its turn by the fill
     mode, so the sequence reads as a sequence rather than as a burst. */
  .scene.is-entering .scene-name {
    animation: rl-rise-left 0.5s var(--rl-ease-out) 40ms both;
  }

  .scene.is-entering .turn {
    animation: rl-rise-right 0.6s var(--rl-ease-out) both;
  }

  .scene.is-entering .turn-ai,
  .scene.is-entering .turn-other {
    animation-name: rl-rise-left;
  }

  .scene.is-entering .scene-body > .scene-talk:first-child .turn:nth-child(1) {
    animation-delay: 80ms;
  }

  .scene.is-entering .scene-body > .scene-talk:first-child .turn:nth-child(2) {
    animation-delay: 230ms;
  }

  .scene.is-entering .record-card,
  .scene.is-entering .review-card {
    animation: rl-pop 0.6s var(--rl-ease-pop) 290ms both;
  }

  .scene.is-entering .record-card-head,
  .scene.is-entering .review-head {
    animation: rl-rise 0.5s var(--rl-ease-out) 340ms both;
  }

  .scene.is-entering .record-rows > li,
  .scene.is-entering .review-line {
    animation: rl-rise 0.55s var(--rl-ease-out) both;
  }

  /* The review head is the first paragraph in its card, so its lines are the second to fourth. */
  .scene.is-entering .record-rows > li:nth-child(1),
  .scene.is-entering .review-line:nth-of-type(2) {
    animation-delay: 390ms;
  }

  .scene.is-entering .record-rows > li:nth-child(2),
  .scene.is-entering .review-line:nth-of-type(3) {
    animation-delay: 430ms;
  }

  .scene.is-entering .record-rows > li:nth-child(3),
  .scene.is-entering .review-line:nth-of-type(4) {
    animation-delay: 480ms;
  }

  .scene.is-entering .record-rows > li:nth-child(4) {
    animation-delay: 520ms;
  }

  .scene.is-entering .record-rows > li:nth-child(5) {
    animation-delay: 570ms;
  }

  /* A source chip lands a beat after the row that carries it. */
  .scene.is-entering .src-chip {
    animation: rl-pop 0.45s var(--rl-ease-pop) both;
  }

  .scene.is-entering .record-rows > li:nth-child(1) .src-chip {
    animation-delay: 490ms;
  }

  .scene.is-entering .record-rows > li:nth-child(2) .src-chip {
    animation-delay: 530ms;
  }

  .scene.is-entering .record-rows > li:nth-child(3) .src-chip {
    animation-delay: 580ms;
  }

  .scene.is-entering .record-rows > li:nth-child(4) .src-chip {
    animation-delay: 620ms;
  }

  .scene.is-entering .record-card-foot {
    animation: rl-rise 0.55s var(--rl-ease-out) 600ms both;
  }

  /* The review step is the one moment the product asks a person to stop, so it is the one moment
     the demo slows down: the button appears, is pressed, and the sent mark draws itself. Then the
     rule draws out under "Later, with Richard" and the reply lands with a spring. */
  .scene.is-entering .review-act {
    animation: rl-rise 0.5s var(--rl-ease-out) 530ms both;
  }

  .scene.is-entering .review-btn {
    animation: rl-press 0.38s var(--rl-ease-in-out) 770ms both;
  }

  .scene.is-entering .review-sent {
    animation: rl-pop 0.5s var(--rl-ease-pop) 860ms both;
  }

  .scene.is-entering .review-sent path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: rl-draw 0.4s var(--rl-ease-out) 910ms both;
  }

  .scene.is-entering .scene-transition {
    animation: rl-rise 0.5s var(--rl-ease-out) 1040ms both;
  }

  .scene.is-entering .scene-transition::before,
  .scene.is-entering .scene-transition::after {
    animation: rl-rule 0.55s var(--rl-ease-out) 1080ms both;
  }

  .scene.is-entering .scene-transition::before {
    transform-origin: right center;
  }

  .scene.is-entering .scene-transition::after {
    transform-origin: left center;
  }

  .scene.is-entering .scene-transition ~ .scene-talk .turn {
    animation: rl-rise-left 0.55s var(--rl-ease-pop) 1220ms both;
  }

  .scene.is-entering .scene-note {
    animation: rl-rise 0.5s var(--rl-ease-out) 560ms both;
  }

  .scene.is-entering .scene-transition ~ .scene-note {
    animation-delay: 1420ms;
  }

  .story-toggle {
    transition: transform 0.25s var(--rl-ease-pop), background 0.16s ease;
  }

  .story-toggle:active {
    transform: scale(0.92);
  }

  /* The memory demo: the two lines crossfade, and the record itself settles again on every switch
     - the same card, seen to arrive in the other assistant. Two names for one keyframe set so the
     animation replays in both directions. */
  .memory-said {
    transition: opacity 0.3s var(--rl-ease-out), transform 0.3s var(--rl-ease-out), visibility 0s linear 0.3s;
  }

  #memory-saved:checked ~ .memory-said-stack .m-saved,
  #memory-retrieved:checked ~ .memory-said-stack .m-retrieved {
    transition: opacity 0.4s var(--rl-ease-out) 0.08s, transform 0.4s var(--rl-ease-out) 0.08s, visibility 0s;
  }

  #memory-retrieved:checked ~ .record-card {
    animation: rl-arrive 0.8s var(--rl-ease-pop) both;
  }

  #memory-saved:checked ~ .record-card {
    animation: rl-arrive-back 0.8s var(--rl-ease-pop) both;
  }

  .memory-toggle label {
    transition: background 0.25s var(--rl-ease-out), color 0.25s var(--rl-ease-out);
  }

  /* Small acknowledgements. The arrow on a button leans into the direction it is about to go;
     a card that lifts does it on the same curve as everything else. */
  .button .icon {
    transition: transform 0.35s var(--rl-ease-out);
  }

  .button:hover .icon {
    transform: translateX(3px);
  }

  .benefit-card,
  .entry-card {
    transition: transform 0.35s var(--rl-ease-out), box-shadow 0.35s var(--rl-ease-out);
  }

  @supports not selector(::details-content) {
    .faq-q[open] > p,
    .recall-earlier[open] > p {
      animation: rl-fade 0.32s var(--rl-ease-out) both;
    }
  }

  @keyframes rl-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* The pipes fill once the panel is in view (site.js adds is-live): the transcript first, on the
     long settle, then the briefing on the spring so its smallness lands as a beat of its own, and
     the chips saying what it still carries arrive after both. */
  .cost-panel.is-live .cost-fill-old {
    animation: rl-grow 1.4s var(--rl-ease-out) 0.2s both;
  }

  .cost-panel.is-live .cost-fill-new {
    animation: rl-grow 0.85s var(--rl-ease-pop) 1.45s both;
  }

  .cost-panel.is-live .cost-chips li {
    animation: rl-pop 0.5s var(--rl-ease-pop) both;
  }

  .cost-panel.is-live .cost-chips li:nth-child(1) {
    animation-delay: 970ms;
  }

  .cost-panel.is-live .cost-chips li:nth-child(2) {
    animation-delay: 1010ms;
  }

  .cost-panel.is-live .cost-chips li:nth-child(3) {
    animation-delay: 1060ms;
  }

  .cost-panel.is-live .cost-chips li:nth-child(4) {
    animation-delay: 1100ms;
  }

  .cost-panel.is-live .cost-chips li:nth-child(5) {
    animation-delay: 1150ms;
  }

  @keyframes rl-grow {
    from {
      transform: scaleX(0);
    }

    to {
      transform: none;
    }
  }

  /* The memory record settles on every switch, and its rows land again one by one - the same card,
     seen to arrive in the other assistant. Two names for one keyframe set so it replays in both
     directions. */
  #memory-retrieved:checked ~ .record-card .record-rows > li {
    animation: rl-rise 0.55s var(--rl-ease-out) both;
  }

  #memory-saved:checked ~ .record-card .record-rows > li {
    animation: rl-rise-alt 0.55s var(--rl-ease-out) both;
  }

  #memory-retrieved:checked ~ .record-card .record-rows > li:nth-child(1),
  #memory-saved:checked ~ .record-card .record-rows > li:nth-child(1) {
    animation-delay: 60ms;
  }

  #memory-retrieved:checked ~ .record-card .record-rows > li:nth-child(2),
  #memory-saved:checked ~ .record-card .record-rows > li:nth-child(2) {
    animation-delay: 100ms;
  }

  #memory-retrieved:checked ~ .record-card .record-rows > li:nth-child(3),
  #memory-saved:checked ~ .record-card .record-rows > li:nth-child(3) {
    animation-delay: 140ms;
  }

  #memory-retrieved:checked ~ .record-card .record-rows > li:nth-child(4),
  #memory-saved:checked ~ .record-card .record-rows > li:nth-child(4) {
    animation-delay: 170ms;
  }

  #memory-retrieved:checked ~ .record-card .record-rows > li:nth-child(5),
  #memory-saved:checked ~ .record-card .record-rows > li:nth-child(5) {
    animation-delay: 210ms;
  }

  @keyframes rl-rise-alt {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* The chevron turns, and a disclosure opens to its own height rather than appearing at it. */
  .rl-chev {
    transition: transform 0.32s var(--rl-ease-out);
  }

  details[open] > summary .rl-chev {
    transform: rotate(45deg);
  }

  @supports selector(::details-content) {
    .faq-q::details-content,
    .recall-earlier::details-content,
    .tool-more::details-content,
    .cost-how::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition:
        block-size 0.36s var(--rl-ease-out),
        opacity 0.3s var(--rl-ease-out),
        content-visibility 0.36s allow-discrete;
    }

    .faq-q[open]::details-content,
    .recall-earlier[open]::details-content,
    .tool-more[open]::details-content,
    .cost-how[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }

  /* A benefit card materialises under the pointer rather than sitting in a permanent box. */
  .benefit-card,
  .entry-card,
  .people-note {
    transition:
      background 0.35s var(--rl-ease-out),
      box-shadow 0.35s var(--rl-ease-out),
      transform 0.35s var(--rl-ease-out),
      border-color 0.35s var(--rl-ease-out);
  }
}

/* Reduced motion is reduced, not removed. The rule this block keeps is the one the preference is
   for: nothing travels, scales or springs. The sequencing stays as fades — the hero still arrives
   in reading order, a scene still lands turn by turn, the stories still crossfade — because a
   person who asked for less motion did not ask for less information about what is happening.
   The keyframes are redefined here by name (the later definition wins), so every delay in the
   block above holds without being written twice; the transitions that move are pinned flat; and
   the story still plays itself, because progression is not movement. The
   global stop in section 16 excludes .rl-motion subtrees for exactly this reason. */
@media (prefers-reduced-motion: reduce) {
  @keyframes rl-rise {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-rise-left {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-rise-right {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-pop {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-step {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-slide-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-slide-out {
    to {
      opacity: 0;
    }
  }

  @keyframes rl-settle {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-sheet {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.65;
    }
  }

  @keyframes rl-press {
    from {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-pick {
    from {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-arrive {
    from {
      opacity: 0.55;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-arrive-back {
    from {
      opacity: 0.55;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-grow {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rl-rise-alt {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .rl-motion .hero-content > *,
  .rl-motion .hero-line,
  .rl-motion #hero-title em,
  .rl-motion .hero-visual,
  .rl-motion .hero-visual .record-card-head,
  .rl-motion .hero-visual .record-rows > li,
  .rl-motion .hero-visual .record-card-foot {
    animation-name: rl-rise;
  }

  .rl-motion .hero-visual::before {
    animation-name: rl-sheet;
  }

  .story-panel {
    transform: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  #story-idea:checked ~ .story-stage .story-panel-idea,
  #story-decision:checked ~ .story-stage .story-panel-decision,
  #story-project:checked ~ .story-stage .story-panel-project {
    transition: opacity 0.4s ease 0.1s, visibility 0s;
  }

  .story-picker label {
    transition: none;
  }

  #story-idea:checked ~ .story-picker label[for="story-idea"],
  #story-decision:checked ~ .story-picker label[for="story-decision"],
  #story-project:checked ~ .story-picker label[for="story-project"] {
    transform: none;
    animation: none;
  }

  .scene.is-entering .scene-transition::before,
  .scene.is-entering .scene-transition::after {
    animation: none;
  }

  .memory-said {
    transform: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  #memory-saved:checked ~ .memory-said-stack .m-saved,
  #memory-retrieved:checked ~ .memory-said-stack .m-retrieved {
    transition: opacity 0.4s ease 0.08s, visibility 0s;
  }

}

/* ---------- 24m. The token bill ---------- */

/* One wide panel rather than a narrow one with boxes beside it: the two pipes need the width to
   be worth drawing, and the list of what a briefing still carries is the answer to the question
   the comparison raises. The stats below it are columns, not cards. */
.cost-panel {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background:
    radial-gradient(60rem 24rem at 88% -10%, rgba(201, 138, 46, 0.16) 0%, transparent 62%),
    var(--rl-navy-deep);
  border-radius: var(--rl-radius);
  color: var(--rl-paper);
  box-shadow: var(--rl-shadow-lift);
}

.cost-panel-head {
  margin-bottom: 1.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}

.cost-row + .cost-row {
  margin-top: 1.6rem;
}

.cost-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  margin-bottom: 0.7rem;
}

.cost-who {
  font-size: 1.02rem;
  font-weight: 600;
}

.cost-figure {
  font-size: 0.9rem;
  color: rgba(250, 247, 242, 0.62);
}

/* The number is the thing being compared, so it is set in the display face at a size that reads
   across the panel, and tabular so the digits do not shuffle while they count. */
.cost-count {
  font-family: var(--rl-font-display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--rl-paper);
}

.cost-row-new .cost-count {
  color: var(--rl-amber-soft);
}

.cost-track {
  height: 20px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(6, 11, 24, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(250, 247, 242, 0.05);
}

/* The widths are classes, not inline styles: the marketing surface is style-src 'self'. The
   growth is a transform from the left, drawn by section 24l once the panel is in view; at rest,
   and with the script absent, the pipes are simply their true length. */
.cost-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(250, 247, 242, 0.26), rgba(250, 247, 242, 0.58));
  transform-origin: left center;
}

.cost-fill-old {
  --w: 100%;
}

.cost-fill-new {
  --w: 5%;
  min-width: 14px;
  background: linear-gradient(90deg, var(--rl-amber-deep), var(--rl-amber));
  box-shadow: 0 0 18px rgba(201, 138, 46, 0.7);
}

.cost-sub {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: rgba(250, 247, 242, 0.55);
}

.cost-carries {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem 1.1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
}

.cost-carries-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}

.cost-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cost-chips li {
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 242, 0.2);
  background: rgba(250, 247, 242, 0.06);
  font-size: 0.85rem;
  color: var(--rl-paper);
}

.cost-note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.5);
}

/* Columns, not cards: a hairline between them and nothing else. */
.cost-stats {
  display: grid;
  gap: 1.75rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .cost-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .cost-stats > li + li {
    padding-left: 2.5rem;
    border-left: 1px solid var(--rl-line);
  }
}

.cost-stat {
  font-family: var(--rl-font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--rl-amber-deep);
}

.cost-stats .cost-count {
  font-size: inherit;
  color: inherit;
}

.cost-stats h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1.05rem;
}

.cost-stats p:last-child {
  font-size: 0.93rem;
  color: var(--rl-ink-soft);
}

/* ---------- 24n. The player ---------- */

/* The demo plays itself, so what it offers is not a Play button: four segments, one per scene, the
   current one filling over the dwell, each a 44px tap target that jumps to its scene, and a round
   pause beside them. The status line under it is the announcement. Built by site.js. */
.story-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem 0 1.15rem;
}

.story-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rl-navy-deep);
  border-radius: 50%;
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  cursor: pointer;
}

.story-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.story-toggle .ic-pause,
.story-controls.is-playing .ic-play {
  display: none;
}

.story-controls.is-playing .ic-pause {
  display: block;
}

.story-toggle:hover {
  background: var(--rl-ink);
}

.story-toggle:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.story-steps {
  flex: 1;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.story-step {
  position: relative;
  flex: 1;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.story-step::before,
.story-step-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
}

.story-step::before {
  content: "";
  right: 0;
  background: var(--rl-line-strong);
}

.story-step-fill {
  width: 0;
  background: var(--rl-amber);
}

.story-step[aria-current]::before {
  background: var(--rl-amber-soft);
}

.story-step:hover::before {
  background: var(--rl-control-line);
}

.story-step:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: -0.7rem;
  border-radius: 999px;
}

.story-another {
  flex: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rl-control-line);
  border-radius: 999px;
  background: transparent;
  color: var(--rl-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.story-another:hover {
  border-color: var(--rl-navy-deep);
}

.story-another:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

/* The position, read as well as announced: the count in ink, the name of the scene beside it. It
   shrinks before the segments do, and ends in an ellipsis rather than pushing them off. */
.story-progress {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-count {
  font-weight: 600;
  color: var(--rl-ink);
}

.story-count-name:not(:empty) {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--rl-line-strong);
}

/* The one control that belongs at the end of a story, shown only there. An author display beats
   the hidden attribute, so the hidden state is spelled out. */
.story-end {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}

.story-end[hidden] {
  display: none;
}

/* ---------- 24p. Disclosures ---------- */

/* The marker is drawn, never a glyph: a chevron from two borders, rotating on open. A character
   escape here cost a session - the tooling that wrote the stylesheet read the CSS escape as an
   octal one and shipped a control character, which renders as tofu and looks like a font bug. */
.rl-chev {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.faq-q > summary,
.faq-more > summary,
.recall-earlier > summary,
.tool-more > summary {
  list-style: none;
}

.faq-q > summary::-webkit-details-marker,
.faq-more > summary::-webkit-details-marker,
.recall-earlier > summary::-webkit-details-marker,
/* The height transition needs the auto keyword to be interpolable, and it is scoped to the
   disclosures rather than set on :root - it changes what every auto-height transition on the page
   would do, and nothing else here wants that. */
@supports (interpolate-size: allow-keywords) {
  .faq,
  .recall-earlier,
  .tool-more,
  .cost-how {
    interpolate-size: allow-keywords;
  }
}

/* ---------- 24o. Phones ---------- */

/* The picker is a segmented control on a phone: three names in one pill, not three stacked cards.
   The title under it already says what the story is, so the one-line notes go. The scene card
   and its turns tighten, because the desktop measure squeezed onto 390px reads as a form. */
@media (max-width: 46rem) {
  .hero-section {
    padding-top: clamp(2.25rem, 6vw, 3.5rem);
  }

  .hero-proof {
    gap: 0.5rem 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    font-size: 0.88rem;
  }

  .story-picker {
    display: flex;
    gap: 0.2rem;
    padding: 0.28rem;
    margin-bottom: 1.4rem;
    background: var(--rl-white);
    border: 1px solid var(--rl-line-strong);
    border-radius: 999px;
  }

  .story-picker label {
    flex: 1;
    display: block;
    padding: 0.62rem 0.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  .story-picker label:hover {
    border-color: transparent;
  }

  .story-pick-name,
  .story-pick-note {
    display: none;
  }

  .story-pick-short {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rl-ink);
  }

  #story-idea:checked ~ .story-picker label[for="story-idea"],
  #story-decision:checked ~ .story-picker label[for="story-decision"],
  #story-project:checked ~ .story-picker label[for="story-project"] {
    background: var(--rl-navy-deep);
    border-color: transparent;
    box-shadow: none;
    transform: none;
    animation: none;
  }

  #story-idea:checked ~ .story-picker label[for="story-idea"] .story-pick-short,
  #story-decision:checked ~ .story-picker label[for="story-decision"] .story-pick-short,
  #story-project:checked ~ .story-picker label[for="story-project"] .story-pick-short {
    color: var(--rl-paper);
  }

  .story-title {
    font-size: 1.28rem;
  }

  .story-scenes {
    margin-top: 0;
  }

  .scene {
    padding: 1.05rem 1rem 1.1rem;
  }

  .scene-name {
    margin-bottom: 0.85rem;
  }

  .turn {
    padding: 0.7rem 0.85rem;
    font-size: 0.93rem;
  }

  .record-card-sm,
  .review-card {
    padding: 0.95rem 1rem 0.85rem;
  }

  .scene-body {
    gap: 0.85rem;
  }

  .story-controls {
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    margin: 0.85rem 0 1rem;
  }

  .story-progress {
    flex-basis: 100%;
    max-width: none;
    padding-left: calc(2.75rem + 0.75rem);
    white-space: normal;
  }

  .story-payoff {
    margin-top: 1.25rem;
    font-size: 1.08rem;
  }

  .cost-row-head {
    display: grid;
    gap: 0.15rem;
    justify-content: start;
  }

  .cost-carries {
    display: grid;
    gap: 0.75rem;
  }

  .cost-count {
    font-size: 1.6rem;
  }

  .benefit-grid {
    margin-inline: -1rem;
    gap: 0.5rem 0;
  }

  .benefit-card {
    padding: 1.6rem 1rem 1.5rem;
  }

  .benefit-card::before {
    right: 1rem;
    left: 1rem;
  }

  .benefit-card:hover {
    transform: none;
  }
}

/* ---------- 24u. The money ---------- */

/* The cents on each pipe are the unit the argument is actually in, so they are set as a figure
   rather than as part of the sentence around them. */
.cost-cents {
  font-family: var(--rl-font-display);
  font-size: 1.35em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rl-paper);
}

.cost-row-new .cost-cents {
  color: var(--rl-amber);
}

/* The three-figure summary. It sits inside the panel because every input to it is in the panel:
   the two token counts, the price per million, and the two assumptions in the note beneath. */
.cost-money {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
}

.cost-money-head {
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}

.cost-money-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46rem) {
  .cost-money-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.cost-money-cell {
  padding: 1rem 1.1rem;
  border-radius: var(--rl-radius-sm);
  background: rgba(250, 247, 242, 0.05);
  border: 1px solid rgba(250, 247, 242, 0.12);
}

/* The one that is the point gets the amber edge and the wash; the other two are the workings. */
.cost-money-cell-save {
  background: rgba(201, 138, 46, 0.14);
  border-color: rgba(201, 138, 46, 0.42);
}

.cost-money-fig {
  font-family: var(--rl-font-display);
  font-size: clamp(2.1rem, 4.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(250, 247, 242, 0.72);
}

.cost-money-fig-good,
.cost-money-cell-save .cost-money-fig {
  color: var(--rl-amber);
}

.cost-money-cell-save .cost-money-fig {
  color: var(--rl-paper);
}

.cost-money-say {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(250, 247, 242, 0.7);
}

.cost-money-cell-save .cost-money-say {
  color: var(--rl-paper);
  font-weight: 600;
}

.cost-money-note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.5);
}

/* ---------- 24v. The enterprise band ---------- */

/* One row, not a third price card: there is no enterprise plan to buy, and a card would imply one. */
.ent {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius);
}

@media (min-width: 62rem) {
  .ent {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* The left column of the band, and of the connect grid: both hold a stack that should sit at the
   top of its row rather than stretch down it. Named in the markup either way; a class with no rule
   is the defect this page has already been caught by. */
.ent-say,
.start-side {
  align-content: start;
}

.ent-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.ent-title {
  margin: 0.6rem 0 0.6rem;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

.ent-copy {
  font-size: 0.96rem;
  color: var(--rl-ink-soft);
}

.ent-act {
  margin-top: 1.35rem;
}

/* Two questions, two columns: what the product does for a group, and what procurement asks for. */
.ent-cols {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 46rem) {
  .ent-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Caught by the sweep the moment it was written, which is the whole point of having one: a class
   in the markup with no rule anywhere is the shape of the honeypot bug. Each column is a stack
   that sits at the top of its row rather than stretching down it. */
.ent-col {
  align-content: start;
}

.ent-col-head {
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.ent-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.ent-list li {
  padding-top: 0.7rem;
  border-top: 1px solid var(--rl-line-strong);
  font-size: 0.95rem;
  color: var(--rl-ink);
}

.ent-list a {
  color: var(--rl-ink);
}

/* The facts a security reader checks first, on the dark band, stated rather than left to the
   prose below. Every one is also on /legal/security and in the DPA's Annex II; if one of the three
   ever stops being true, all three places have to change together. */
.trust-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.trust-facts li {
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 242, 0.24);
  background: rgba(250, 247, 242, 0.07);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-paper);
}

/* ---------- 24w. Ask us ---------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.contact-facts {
  display: grid;
  gap: 0.7rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.contact-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.contact-facts .icon {
  flex: none;
  margin-top: 0.2rem;
  color: var(--rl-amber-deep);
}

.contact-alt {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rl-line);
  font-size: 0.92rem;
  color: var(--rl-ink-muted);
}

/* The shared support form is written for the navy founding band and for the portal's sheet. Here
   it sits on the warm tint, so the field it inherits has to take an edge that reads as a control
   on that ground rather than a paper fill that vanishes into it. */
#contact .support-form .field input,
#contact .support-form .field select,
#contact .support-form .field textarea {
  background: var(--rl-white);
  border: 1px solid var(--rl-control-line);
  color: var(--rl-ink);
}

#contact .support-form .field label {
  color: var(--rl-ink-soft);
}

#contact .support-form .founding-fine {
  color: var(--rl-ink-muted);
}

/* ---------- 24q. Refinements ---------- */

/* A touch device has no pointer to leave, so :hover latches: tap a card and it keeps the lifted
   white treatment until something else is tapped, which reads as a stuck state rather than a
   response. Every hover effect this page adds is undone where hovering is not a thing the device
   does. Written as an undo in a (hover: none) block rather than by wrapping each rule, so a hover
   rule added later is covered by the one that matches it here. */
@media (hover: none) {
  /* A touch device has no pointer to leave, so a hover state latches: tap a card and it keeps
     the lifted treatment until something else is tapped, which reads as stuck rather than as a
     response. This undoes the movement and the lift. It does NOT undo the fill, because the fill
     now has room at every width - and because a rule that only fires on (hover: none) never
     reaches a desktop window dragged narrow, which is where the fill was seen to be wrong. */
  .benefit-card:hover,
  .entry-card:hover,
  .people-note:hover {
    box-shadow: none;
    transform: none;
  }

  .entry-card:hover {
    border-color: var(--rl-line);
  }

  .story-picker label:hover {
    border-color: var(--rl-line-strong);
  }

  .story-step:hover::before {
    background: var(--rl-line-strong);
  }

  .story-step[aria-current]:hover::before {
    background: var(--rl-amber-soft);
  }

  .button-primary:hover,
  .button-secondary:hover {
    transform: none;
  }

  .button:hover .icon {
    transform: none;
  }

  .site-nav-links a:hover {
    color: var(--rl-ink-soft);
    background: transparent;
  }

  .site-nav-links a[aria-current="page"]:hover {
    color: var(--rl-ink);
    background: var(--rl-paper-deep);
  }

  .nav-signin:hover {
    color: var(--rl-ink-soft);
    background: transparent;
  }

  .nav-cta:hover {
    background: var(--rl-navy-deep);
    box-shadow: none;
  }

  .site-brand:hover .brand-word-end {
    color: var(--rl-amber-deep);
  }
}

/* The round control is right on a phone, where it is the one thing a thumb reaches for, and heavy
   on a desktop where it sits beside a hairline of segments. Outlined at rest there, filling on
   hover, so it reads as a control rather than as a button competing with the page's own. */
@media (hover: hover) and (min-width: 46rem) {
  .story-toggle {
    width: 2.4rem;
    height: 2.4rem;
    border-color: var(--rl-control-line);
    background: transparent;
    color: var(--rl-ink);
  }

  .story-toggle svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .story-toggle:hover {
    border-color: var(--rl-navy-deep);
    background: var(--rl-navy-deep);
    color: var(--rl-paper);
  }
}

/* Switching stories and advancing a scene are different statements, so they move differently. An
   advance is the staggered sequence in 24l - this happened, then this. An arrival is one motion,
   because what changed is the whole story, and running a 1.3s stagger underneath a crossfade was
   the mush that made switching look wrong. */
.scene.is-arriving {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .scene.is-arriving {
    animation: rl-arrive-scene 0.45s var(--rl-ease-out) 0.12s both;
  }

  .scene.is-arriving * {
    animation: none;
  }

  @keyframes rl-arrive-scene {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ---------- 24r. The tool preview ---------- */

/* Six named tools rather than a collapsed row with nothing beside it: the label was carrying a
   whole band on its own, and what somebody wants to know there is what the tools are like, not
   how many there are. The count stays on the label, where DocsPageTests reads it. */
.tool-list-label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.tool-peek {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}

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

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

.tool-peek li {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius-sm);
}

.tool-peek code {
  font-size: 0.88rem;
  color: var(--rl-amber-deep);
}

.tool-peek span {
  font-size: 0.9rem;
  color: var(--rl-ink-soft);
}

.tool-more > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rl-control-line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--rl-ink);
  cursor: pointer;
}

.tool-more > summary:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.tool-more[open] > summary {
  margin-bottom: 1.25rem;
}

/* The same treatment for the questions that are not on the front of the list: a control that
   looks pressable, centred under the eight, rather than a nineteenth row that happens to open. */
.faq-more {
  border-top: 1px solid var(--rl-line);
  background: transparent;
}

.faq-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.15rem 1.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--rl-amber-deep);
  cursor: pointer;
}

.faq-more[open] > summary {
  border-bottom: 1px solid var(--rl-line);
}

/* ---------- 24s. The section rail ---------- */

/* A map of the page, built by site.js on wide screens only: one mark per section, the one in view
   named. It exists because this page is long and somebody arriving from a guide wants the part
   they came for. Script-built, so a page with the file blocked simply does not have it - the
   header nav and the footer already reach every section by name. */
.rl-rail {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.3rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.72);
  border: 1px solid var(--rl-line);
  box-shadow: 0 8px 26px rgba(20, 33, 61, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

@media (min-width: 78rem) {
  .rl-rail {
    display: flex;
  }
}

.rl-rail a {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  text-decoration: none;
}

/* The mark. A dot at rest, a short bar for the section being read. */
.rl-rail a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--rl-line-strong);
}

.rl-rail a:hover::after {
  background: var(--rl-amber-deep);
}

.rl-rail a[aria-current]::after {
  width: 5px;
  height: 0.95rem;
  background: var(--rl-amber);
}

.rl-rail a:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 1px;
}

/* The name, which appears beside the mark on hover or focus and is always there for a reader who
   cannot see the mark. */
.rl-rail span {
  position: absolute;
  right: calc(100% + 0.55rem);
  padding: 0.28rem 0.6rem;
  border-radius: var(--rl-radius-sm);
  background: var(--rl-navy-deep);
  color: var(--rl-paper);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.rl-rail a:hover span,
.rl-rail a:focus-visible span {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .rl-rail a::after {
    transition: height 0.28s var(--rl-ease-out), background 0.28s var(--rl-ease-out);
  }

  .rl-rail span {
    transition: opacity 0.22s var(--rl-ease-out);
  }
}

/* ---------- 24t. Phone rhythm ---------- */

/* Read on a phone the page ran together: every section arrived at the same distance as the
   paragraph before it, so nothing announced itself as a new subject. Sections get room, headings
   get room under them, and the stacked card lists stop touching. */
@media (max-width: 46rem) {
  .section {
    padding: 4.25rem 0;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .section-intro,
  .section-copy-lg {
    margin-top: 0.9rem;
  }

  .entry-grid,
  .people-more {
    gap: 1rem;
  }

  .people-more {
    margin-top: 1.75rem;
  }

  .cost-stats {
    gap: 2rem;
  }

  .story-payoff {
    margin-top: 1.6rem;
  }

  .section-closer {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
  }

  .start-grid {
    gap: 2.25rem;
  }

  .tool-block {
    margin-top: 2rem;
    padding-top: 1.75rem;
  }

  .tool-peek-wrap {
    padding-top: 1.75rem;
  }
}

/* Touch targets. The house bar is 44px, and it applies to anything a thumb presses on this page —
   the story picker, the playback controls, the toggles and every disclosure summary. A mouse keeps
   the compact spacing. */
@media (pointer: coarse) {
  .story-picker label,
  .story-toggle,
  .story-step,
  .story-another,
  .memory-toggle label,
  .faq-q > summary,
  .faq-more > summary,
  .recall-earlier summary,
  .docs-disclosure > summary,
  .docs-tool summary,
  .blog-row a,
  .blog-find .button,
  .blog-back a {
    min-height: 2.75rem;
  }

  .memory-toggle label,
  .faq-more > summary {
    display: flex;
    align-items: center;
  }

  /* Standalone text links take their target from padding and give it back through margin, so
     nothing around them moves. Links inside a running sentence are left alone on purpose. */
  .footer-col {
    gap: 0;
  }

  .footer-col a,
  .footer-brand {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .nav-signin {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.4rem;
    margin: 0 -0.4rem;
  }

  .benefit-more a,
  .boundary-links a,
  .founding-back a,
  .hero-save-go a,
  .ent-list a {
    display: inline-block;
    padding: 0.8rem 0;
    margin: -0.8rem 0;
  }

  /* The billing toggle and the tool disclosure were both a few pixels under the bar. */
  .bill-toggle label {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .tool-more > summary {
    min-height: 2.75rem;
    align-items: center;
  }
}


/* ---------- 24x. The cost line in the hero ---------- */

/* The cost argument is four sections down, which is the right place to MAKE it and the wrong place
   to make it first: a reader deciding whether to keep going never reaches it. One figure and one
   sentence of framing here, because the number means nothing without the reason it exists - their
   assistant re-reads what you send - and the link goes to the section that shows every input. */
.hero-save {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  margin-top: 1.6rem;
  padding: 1.05rem 1.2rem;
  background: var(--rl-paper-warm);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.hero-save-fig {
  flex: none;
  font-family: var(--rl-font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.05rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rl-amber-deep);
}

.hero-save-fig span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--rl-font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.hero-save-text p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rl-ink-muted);
}

.hero-save-text strong {
  font-weight: 600;
  color: var(--rl-ink);
}

.hero-save-go {
  margin-top: 0.45rem;
}

.hero-save-go a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.87rem;
  font-weight: 600;
}

@media (max-width: 46rem) {
  .hero-save {
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 1.35rem;
    padding: 0.95rem 1rem 1rem;
  }

  .hero-save-fig {
    font-size: 1.55rem;
  }

  .hero-save-text p {
    font-size: 0.87rem;
  }
}

/* ---------- 24y. The working behind the money ---------- */

/* Sits inside the panel it explains, closed, because a reader who accepts the figure should not
   have to scroll past the arithmetic - and a reader who does not accept it should never have to
   ask anybody for it. */
.cost-how {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
}

.cost-how > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-amber-soft);
  cursor: pointer;
  list-style: none;
}

.cost-how > summary::-webkit-details-marker {
  display: none;
}

.cost-how > summary:focus-visible {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.cost-how-list {
  display: grid;
  gap: 0.85rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.cost-how-list li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(250, 247, 242, 0.72);
}

.cost-how-k {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
}

.cost-how-list strong,
.cost-how-list a {
  color: var(--rl-paper);
}

.cost-how-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.5);
}


/* ---------- 24z. The section map on a phone ---------- */

/* The rail's job where the rail cannot go. A pill at the bottom edge naming the section being read
   and opening upward into the whole list, so a fourteen-section page can say where you are without
   taking a permanent strip of a small screen. Script-built like the rail, so a page with the file
   blocked simply does not have it - the header sheet and the footer still name every section.
   Hidden at and above the width the rail appears at, so exactly one of the two is ever present. */
.rl-jump {
  position: fixed;
  right: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 45;
  /* Reversed rather than ordered: where ::details-content is supported the panel is wrapped in an
     anonymous box, so the list is not a child box of this element and an `order` on it does
     nothing - which is exactly what happened, and put the menu below the pill and off the bottom
     of the screen. Reversing the container orders the boxes that actually exist, in both engines. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  padding-inline: 1.25rem;
  opacity: 0;
  transform: translateY(0.6rem);
  pointer-events: none;
  transition:
    opacity 0.28s var(--rl-ease-out),
    transform 0.28s var(--rl-ease-out);
}

.rl-jump.is-up {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 78rem) {
  .rl-jump {
    display: none;
  }
}

.rl-jump > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  max-width: min(20rem, calc(100vw - 2.5rem));
  padding: 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-ink);
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.92);
  border: 1px solid var(--rl-line-strong);
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.14);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}

.rl-jump > summary::-webkit-details-marker {
  display: none;
}

.rl-jump > summary:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 3px;
}

/* The chevron points up, because the list opens upward from here. */
.rl-jump .rl-chev {
  margin-top: -0.15rem;
  transform: rotate(-135deg);
}

.rl-jump[open] > summary .rl-chev {
  transform: rotate(45deg);
}

.rl-jump-now {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-jump-list {
  display: grid;
  width: min(20rem, calc(100vw - 2.5rem));
  max-height: min(60vh, 26rem);
  margin-bottom: 0.5rem;
  padding: 0.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--rl-radius);
  background: var(--rl-white);
  border: 1px solid var(--rl-line-strong);
  box-shadow: 0 18px 44px rgba(20, 33, 61, 0.18);
}

.rl-jump-list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--rl-ink-muted);
  border-radius: 10px;
  text-decoration: none;
}

.rl-jump-list a[aria-current] {
  font-weight: 600;
  color: var(--rl-ink);
  background: var(--rl-paper-warm);
}

@media (prefers-reduced-motion: no-preference) {
  .rl-jump[open] .rl-jump-list {
    animation: rl-step 0.28s var(--rl-ease-out) both;
  }
}


/* ---------- 24aa. The standing facts, in the memory section ---------- */

/* The section carries two halves that the product keeps deliberately apart - material BY you in
   the notebook, facts ABOUT you in memory - so the second one is set as its own block rather than
   as another paragraph. Quiet: a rule and a heading, no fill, because the section already has one
   filled callout and two would compete. */
.memory-facts {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rl-line);
}

.memory-facts > .memory-facts-head {
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.memory-facts > p {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--rl-ink-soft);
}

.memory-facts > .memory-facts-note {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--rl-ink-muted);
}


/* ---------- 24ab. The explainer ---------- */

/* Capped rather than full-bleed: at the shell's width a 16:9 frame is 620px tall and becomes the
   section instead of an exhibit inside it. The measure is the same one the prose above it keeps. */
.explainer {
  max-width: 46rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto clamp(2rem, 4vw, 2.75rem);
}

/* The aspect box holds the frame's shape before the poster has loaded, so the table below does not
   jump up and then back down as it arrives. */
.explainer-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rl-radius);
  border: 1px solid var(--rl-line);
  background: var(--rl-navy-deep);
  box-shadow: var(--rl-shadow-lift);
}

.explainer-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explainer-cap {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--rl-ink-muted);
  text-align: center;
}

@media (max-width: 46rem) {
  .explainer {
    margin-top: 1.35rem;
    margin-bottom: 1.6rem;
  }

  .explainer-cap {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    text-align: left;
  }
}

/* ---------- 24ac. Feature pages ---------- */

/* One page per thing RelayLink does, at /features/{slug}, and the hub at /features. They are the
   landing page's language at a smaller scale - the same hero wash, record cards and section rhythm -
   because a reader who arrives on one from a search should recognise the landing page when they
   click through to it. Everything here is prefixed lander- and was checked free before it was named:
   .feature-grid already exists and means something else. */

.lander-hero {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(2.75rem, 5.5vw, 4.75rem);
  background: linear-gradient(180deg, var(--rl-paper) 0%, var(--rl-paper-warm) 100%);
  border-bottom: 1px solid var(--rl-line);
  overflow: hidden;
}

.lander-hero::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background: radial-gradient(40rem 26rem at 78% 22%, var(--rl-amber-wash) 0%, transparent 60%);
  pointer-events: none;
}

.lander-hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .lander-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* A grid item's minimum is its content by default, so one long address in the hero could widen the
   single column a phone gets; the copy is allowed to be narrower than its longest word instead. */
.lander-hero-copy {
  min-width: 0;
}

.lander-hub-copy {
  position: relative;
  max-width: 46rem;
}

.lander-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
}

.lander-lede {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 1.15rem;
  color: var(--rl-ink-soft);
}

.lander-visual {
  position: relative;
}

.lander-visual-card {
  max-width: 32rem;
  margin-inline: auto;
}

/* Two lines of question on a phone would turn the search pill into a stadium. */
.lander-recall .recall-q {
  border-radius: 1.4rem;
}

/* The labels are sentences, and a sentence does not belong in a lozenge: at 390px the longest
   wraps, and a pill wrapped round two lines is the defect the reader wording was written to end. */
.lander-label {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rl-verify);
}

.lander-label-guess {
  font-style: italic;
  font-weight: 400;
  color: var(--rl-ink-muted);
}

/* Where the reader is, drawn with borders rather than a glyph: a chevron typed through the tooling
   is how a control character once shipped to this stylesheet. */
.crumbs {
  margin-bottom: 1.35rem;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.crumbs li + li::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.crumbs a {
  color: var(--rl-ink-soft);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--rl-ink);
  text-decoration: underline;
}

/* The answer to the search the page exists for. Not a card: it is the page's thesis, set large,
   and a box round it would make it read as an aside. */
.lander-answer-band {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}

.lander-answer {
  max-width: 46rem;
}

.lander-answer h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
}

.lander-answer > p:last-child {
  margin-top: 1rem;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--rl-ink-soft);
}

/* The steps are a sequence, so they are numbered; the <ol> carries the order for a screen reader and
   the numerals are decoration beside it. */
.lander-steps {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .lander-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.lander-step {
  padding: 1.35rem 1.4rem 1.4rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.lander-step-num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: var(--rl-amber-wash);
  border: 1px solid var(--rl-amber-soft);
  font-family: var(--rl-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rl-amber-deep);
}

.lander-step h3 {
  margin-bottom: 0.45rem;
}

.lander-step p {
  font-size: 0.98rem;
  color: var(--rl-ink-soft);
}

.lander-say {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.lander-say-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.lander-say .say-list {
  margin-top: 0.75rem;
}

@media (min-width: 52rem) {
  .lander-say .say-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* What it does beside what it does not. The second column is quieter on purpose - a warmer ground
   and a dash rather than a dot - so the two read as a pair and not as praise and a disclaimer. */
.lander-bounds {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 52rem) {
  .lander-bounds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.lander-bound {
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.lander-bound-not {
  background: var(--rl-paper-warm);
}

.lander-bound h3 {
  margin-bottom: 0.95rem;
}

.lander-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lander-list li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.98rem;
  color: var(--rl-ink);
}

.lander-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--rl-amber);
}

.lander-list-no li {
  color: var(--rl-ink-soft);
}

.lander-list-no li::before {
  top: 0.72em;
  width: 0.6rem;
  height: 2px;
  border-radius: 1px;
  background: var(--rl-ink-muted);
}

/* Open answers, two columns on a wide screen. A column break falls between questions, never inside
   one, and both columns start with a rule so neither looks like the continuation of the other. */
.lander-faq {
  max-width: 64rem;
}

@media (min-width: 62rem) {
  .lander-faq {
    columns: 2;
    column-gap: 3rem;
  }
}

.lander-qa {
  break-inside: avoid;
  margin-bottom: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rl-line-strong);
}

.lander-qa h3 {
  margin-bottom: 0.5rem;
  font-size: 1.12rem;
}

.lander-qa p {
  color: var(--rl-ink-soft);
}

/* A card whose heading is its link, stretched over the whole card, so the tap target is the card
   and the link's accessible name is still the heading. */
.lander-related {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 52rem) {
  .lander-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

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

.lander-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.35rem 1.4rem 1.45rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lander-card:hover {
  border-color: var(--rl-line-strong);
  box-shadow: var(--rl-shadow);
  transform: translateY(-2px);
}

.lander-card-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.lander-card h2,
.lander-card h3 {
  font-size: 1.25rem;
}

.lander-card h3 em {
  font-style: italic;
  color: var(--rl-amber-deep);
}

.lander-card h2 a,
.lander-card h3 a {
  color: var(--rl-ink);
  text-decoration: none;
}

.lander-card h2 a::after,
.lander-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lander-card:has(a:focus-visible) {
  outline: 2px solid var(--rl-amber);
  outline-offset: 3px;
}

.lander-card a:focus-visible {
  outline: none;
}

.lander-card > p:not(.lander-card-kicker) {
  font-size: 0.96rem;
  color: var(--rl-ink-soft);
}

.lander-card > .lander-card-q {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--rl-ink-muted);
}

/* The guides: a list of rows, each row the link. */
.lander-guides {
  max-width: 52rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.lander-guides h3 {
  margin-bottom: 0.85rem;
}

.lander-guides ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rl-line);
}

.lander-guides li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rl-line);
}

.lander-guides a {
  font-weight: 600;
  color: var(--rl-ink);
  text-decoration: none;
}

.lander-guides a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lander-guides li:hover a {
  text-decoration: underline;
}

.lander-guides span {
  font-size: 0.9rem;
  color: var(--rl-ink-muted);
}

.lander-cta-inner {
  max-width: 44rem;
  text-align: center;
}

.lander-cta-inner > p {
  margin-top: 0.9rem;
  font-size: 1.08rem;
  color: var(--rl-ink-soft);
}

.lander-cta-inner .hero-actions {
  justify-content: center;
  margin-top: 1.6rem;
}

/* The way on from a landing page section to the page that covers it in full. */
.section-onward {
  margin-top: 1.4rem;
  font-size: 0.95rem;
}

.section-onward a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--rl-ink);
  text-decoration: underline;
  text-decoration-color: var(--rl-amber-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.section-onward a:hover {
  text-decoration-color: var(--rl-amber);
}

.section-onward .icon {
  color: var(--rl-amber-deep);
}

/* A thumb's worth of target on the links that stand alone, given by padding and handed back through
   margin so nothing around them moves. */
@media (pointer: coarse) {
  .crumbs a,
  .section-onward a {
    padding: 0.8rem 0.2rem;
    margin: -0.8rem -0.2rem;
  }
}

@media (hover: none) {
  .lander-card:hover {
    border-color: var(--rl-line);
    box-shadow: none;
    transform: none;
  }
}

.lander-onward-center {
  text-align: center;
}

/* On the navy band the ink this link is set in disappears - 1.06:1, caught by the sweep on the
   security section's card, not by looking. Paper text and the soft amber underline, the same pair
   the band's own headings and kickers use. */
.section-deep .section-onward a {
  color: var(--rl-paper);
  text-decoration-color: rgba(238, 217, 171, 0.55);
}

.section-deep .section-onward a:hover {
  text-decoration-color: var(--rl-amber-soft);
}

.section-deep .section-onward .icon {
  color: var(--rl-amber-soft);
}

/* ---------- 24ad. Shared memory setup guide ---------- */

/* The honest line under the lede: what RelayLink keeps, and the one thing it cannot see. Quieter
   than the lede so the promise leads, and never hidden, because it is the claim a reader tests. */
.setup-honest {
  margin-top: 0.9rem;
  max-width: 36rem;
  font-size: 0.98rem;
  color: var(--rl-ink-muted);
}

.setup-glance {
  max-width: 26rem;
  margin-inline: auto;
  padding: 1.5rem 1.6rem 1.25rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

.setup-glance-head,
.setup-mode-tag,
.setup-picker-head,
.setup-snippet-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-amber-deep);
}

.setup-glance-list {
  counter-reset: glance;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.setup-glance-list li {
  counter-increment: glance;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.1rem 0.8rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rl-line);
}

.setup-glance-list li::before {
  content: counter(glance);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rl-amber-deep);
  background: var(--rl-amber-wash);
}

.setup-glance-list span {
  font-size: 0.92rem;
  color: var(--rl-ink-soft);
}

.setup-glance-foot {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--rl-ink-muted);
}

.setup-modes,
.setup-rules,
.setup-split,
.setup-other-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.setup-mode,
.setup-rule,
.setup-split > div {
  padding: 1.35rem 1.5rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.setup-mode h3 {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.3rem;
}

.setup-mode p {
  margin: 0;
  color: var(--rl-ink-soft);
}

.setup-mode > .setup-mode-say {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--rl-line-strong);
  font-size: 0.92rem;
}

.setup-note {
  margin-top: 1.5rem;
  max-width: 44rem;
  color: var(--rl-ink-soft);
}

.setup-loop {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rl-line);
}

.setup-loop-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr 1.2fr;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rl-line);
}

.setup-loop-moment {
  margin: 0;
  font-size: 1.05rem;
}

.setup-loop-should,
.setup-loop-how {
  margin: 0;
}

.setup-loop-how {
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.setup-rule-group {
  margin-top: 2.25rem;
}

.setup-rule-group > h3,
.setup-other-grid h3,
.setup-split h3 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.setup-rule {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.setup-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.setup-rule-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rl-ink);
}

/* One click selects the whole rule where the script, and so the Copy button, is absent - the same
   courtesy the /docs commands give. */
.setup-rule-text {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--rl-paper-warm);
  border-radius: var(--rl-radius-sm);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-user-select: all;
  user-select: all;
}

.setup-address {
  margin-top: 1.5rem;
  max-width: 44rem;
}

.setup-address-label {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.setup-legend {
  display: grid;
  gap: 0.9rem 1.75rem;
  margin: 1.75rem 0 0;
}

.setup-legend > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.setup-legend dt,
.setup-legend dd {
  margin: 0;
}

.setup-legend dd {
  font-size: 0.9rem;
  color: var(--rl-ink-soft);
}

/* The status chip. Colour and word together, never colour alone: the chip always says what it is. */
.setup-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.setup-status-tested {
  color: var(--rl-verify);
  background: var(--rl-verify-wash);
}

.setup-status-partial {
  color: var(--rl-amber-deep);
  background: var(--rl-amber-wash);
}

.setup-status-unverified {
  color: var(--rl-ink-soft);
  background: var(--rl-paper-deep);
}

.setup-picker {
  display: grid;
  gap: 1.25rem 2rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.setup-picker ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.setup-picker li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--rl-line);
}

.setup-picker li:first-child {
  border-top: 0;
}

.setup-picker a {
  font-weight: 600;
  color: var(--rl-ink);
  text-decoration: none;
}

.setup-picker a:hover {
  text-decoration: underline;
}

.setup-platform {
  margin-top: 0.7rem;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.setup-platform > summary {
  padding: 0.95rem 1.2rem;
  cursor: pointer;
}

.setup-platform[open] > summary {
  border-bottom: 1px solid var(--rl-line);
}

.setup-platform-body {
  padding: 0.15rem 1.25rem 1.5rem;
}

.setup-platform-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
}

.setup-platform-head h3 {
  margin: 0;
  font-size: 1.25rem;
}

.setup-checked {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--rl-ink-muted);
}

.setup-steps {
  counter-reset: setup-step;
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin: 1.35rem 0 0;
  padding: 0;
}

.setup-steps > li {
  counter-increment: setup-step;
  position: relative;
  min-width: 0;
  padding-left: 2.6rem;
}

.setup-steps > li::before {
  content: counter(setup-step);
  position: absolute;
  top: 0.05rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rl-amber-deep);
  background: var(--rl-amber-wash);
}

.setup-steps h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.setup-steps p {
  margin: 0;
  color: var(--rl-ink-soft);
}

.setup-steps > li > .setup-snippet-label {
  margin-top: 0.75rem;
  color: var(--rl-ink-muted);
}

.setup-limits {
  margin-top: 1.35rem;
  padding: 1rem 1.15rem;
  background: var(--rl-paper-warm);
  border-radius: var(--rl-radius-sm);
}

.setup-limits-head {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.setup-limits ul {
  margin: 0;
  padding-left: 1.1rem;
}

.setup-limits li {
  font-size: 0.93rem;
  color: var(--rl-ink-soft);
}

.setup-sources {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--rl-ink-muted);
}

.setup-sources a {
  color: inherit;
}

/* The capability table scrolls inside its own frame on a narrow screen rather than pushing the page
   sideways; the frame is a region with a tab stop so a keyboard can reach what is off the edge. */
.setup-caps {
  margin-top: 1.5rem;
  overflow-x: auto;
  background: var(--rl-white);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
}

.setup-caps:focus-visible {
  outline: 2px solid var(--rl-amber-deep);
  outline-offset: 2px;
}

.setup-caps table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
}

.setup-caps th,
.setup-caps td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--rl-line);
}

.setup-caps thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
  background: var(--rl-paper-warm);
}

.setup-caps tbody th {
  width: 22%;
  font-weight: 600;
}

.setup-caps tbody tr:last-child > * {
  border-bottom: 0;
}

/* On a phone the table becomes a list, each row a block and each cell under its own label - the
   legal tables' treatment, because a three-column table at 390px was a sideways scroll. */
@media (max-width: 40rem) {
  .setup-caps table {
    min-width: 0;
  }

  .setup-caps thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .setup-caps tr {
    display: block;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--rl-line);
  }

  .setup-caps tbody tr:last-child {
    border-bottom: 0;
  }

  .setup-caps th,
  .setup-caps td {
    display: block;
    width: auto;
    padding: 0.3rem 0;
    border: 0;
  }

  .setup-caps tbody th {
    width: auto;
  }

  .setup-caps td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rl-ink-muted);
  }
}

.setup-other-grid p {
  margin: 0;
  color: var(--rl-ink-soft);
}

.setup-other-grid .setup-rule {
  margin-top: 1rem;
}

.setup-privacy {
  max-width: 44rem;
  margin-top: 1.25rem;
}

.setup-privacy p {
  margin: 0;
  color: var(--rl-ink-soft);
}

.setup-privacy p + p {
  margin-top: 0.9rem;
}

@media (min-width: 46rem) {
  .setup-modes,
  .setup-rules,
  .setup-split,
  .setup-other-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 46rem) {
  .setup-loop-row {
    grid-template-columns: 1fr;
  }

  /* A config snippet beside its Copy button had a third of a phone's width, and JSON broke in the
     middle of its strings. Below the code, the button gives the snippet the whole line. */
  .setup-platform .docs-cmd-row {
    flex-direction: column;
    align-items: stretch;
  }

  .setup-platform .docs-cmd-row .copy-btn {
    align-self: flex-end;
    margin-top: 0;
  }

  .setup-platform .docs-cmd {
    font-size: 0.82rem;
  }
}

/* Thumbs: the picker's names and every Copy button reach the house 44px. The picker's links take
   their target from padding and give it back through margin, so the list does not grow. */
@media (pointer: coarse) {
  .setup-picker a {
    padding: 0.65rem 0;
    margin: -0.65rem 0;
  }

  .setup-platform > summary,
  .setup-elsewhere-app > summary {
    min-height: 2.75rem;
  }

  .setup-rule .copy-btn,
  .setup-address .copy-btn,
  .setup-platform .copy-btn {
    min-height: 2.75rem;
    align-items: center;
  }
}

/* The key note under the address: coding tools cannot use the browser sign-in yet, and this is the
   one place that says so before a reader reaches a tool's own steps. */
.setup-key {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

/* The apps that cannot connect yet read as a comparison, not as a second set of walkthroughs:
   hairline rows with the same three questions answered in the same place on each. */
.setup-elsewhere {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.setup-elsewhere .section-heading {
  margin-bottom: 1.5rem;
}

.setup-elsewhere .section-heading h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.setup-elsewhere-list {
  border-top: 1px solid var(--rl-line);
}

.setup-elsewhere-app {
  border-bottom: 1px solid var(--rl-line);
}

.setup-elsewhere-app > summary {
  padding: 1.1rem 0;
  cursor: pointer;
}

.setup-elsewhere-body {
  display: grid;
  gap: 0.75rem 1.75rem;
  padding: 0 0 1.25rem;
}

.setup-elsewhere-app .setup-platform-head {
  align-content: start;
}

.setup-elsewhere-app h4 {
  margin: 0;
  font-size: 1.15rem;
}

.setup-elsewhere-app dl {
  display: grid;
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.setup-elsewhere-app dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}

.setup-elsewhere-app dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--rl-ink-soft);
}

.setup-elsewhere-app .setup-sources {
  margin: 0;
}

@media (min-width: 60rem) {
  .setup-elsewhere-app dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Plan comparison ---------- */
/* Free beside Pro under the two price cards: three columns, which fit a phone as a table, so it
   stays one rather than turning into cards the way the legal tables do. Every figure is text in a
   cell; nothing here is drawn, and a number is never the only thing a colour says. */
.plan-compare {
  margin: 2rem 0 0;
}
.plan-compare-head {
  margin: 0 0 0.6rem;
  font-family: var(--rl-font-display, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rl-ink);
}
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.plan-table th,
.plan-table td {
  padding: 0.65rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rl-line);
}
.plan-table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-ink-muted);
}
.plan-table td + td,
.plan-table th + th {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan-table tbody th {
  font-weight: 500;
  color: var(--rl-ink);
}
.plan-compare-note {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rl-ink-muted);
}