/* ---------------------------------------------------------------------------
 * Frixxion website — design tokens and components.
 *
 * Ported from Design/frixxion-website-design/project/Frixxion Site.dc.html. The
 * prototype styles everything inline; the values here are copied from it, not
 * re-derived. When the design and this file disagree, the design wins.
 * ------------------------------------------------------------------------- */

:root {
  /* Core palette */
  --ink: #191a1d;
  --brand: #fa2527;
  --brand-hover: #d81a1c;
  --orange: #fb7d20;
  --orange-mid: #ec8a4f;
  --orange-deep: #c66e33;
  --orange-dark: #d5691a;
  --cream: #f6f2ee;
  --peach: #fbe8da;
  --on-ink: #fbe8da;
  --green: #1f9d55;

  /* Ink at opacity — the prototype uses these constantly for secondary text */
  --ink-90: rgba(25, 26, 29, 0.9);
  --ink-72: rgba(25, 26, 29, 0.72);
  --ink-68: rgba(25, 26, 29, 0.68);
  --ink-60: rgba(25, 26, 29, 0.6);
  --ink-55: rgba(25, 26, 29, 0.55);
  --ink-45: rgba(25, 26, 29, 0.45);
  --ink-14: rgba(25, 26, 29, 0.14);
  --ink-10: rgba(25, 26, 29, 0.1);
  --ink-09: rgba(25, 26, 29, 0.09);
  --ink-06: rgba(25, 26, 29, 0.06);
  --on-ink-65: rgba(255, 235, 230, 0.65);
  --on-ink-50: rgba(255, 235, 230, 0.5);
  --on-ink-12: rgba(255, 235, 230, 0.12);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1200px;
  --pad-x: 32px;
  --radius-card: 14px;
  --radius-lg: 18px;
  --radius-btn: 10px;
}

/* --------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-hover);
}

img {
  max-width: 100%;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible only when focused — the keyboard escape hatch past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 9px;
  font: 700 14px var(--font-body);
}

/* ------------------------------------------------------------------ layout */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.container--narrow {
  max-width: 900px;
}

.container--article {
  max-width: 760px;
}

.container--prose {
  max-width: 820px;
}

.section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.section--tight {
  padding-top: 56px;
  padding-bottom: 56px;
}

.band-tint {
  background: var(--cream);
  border-top: 1px solid var(--ink-06);
  border-bottom: 1px solid var(--ink-06);
}

/* Artwork filling one column of a two-column band. It is a graphic with type set into it, not a
   photograph, so it scales whole -- no fixed height and no object-fit crop, which would cut
   through the labels. Same reasoning as .featured-card__media further down. */
.band-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.band-ink {
  background: var(--ink);
  color: var(--on-ink);
}

.band-ink h1,
.band-ink h2,
.band-ink h3 {
  color: var(--on-ink);
}

.band-ink p {
  color: var(--on-ink-65);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid--2 {
  grid-template-columns: 1fr 1fr;
}

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

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--split {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

/* -------------------------------------------------------------- typography */

.eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.eyebrow--chip {
  background: var(--peach);
  padding: 8px 13px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.eyebrow--orange {
  color: var(--orange);
}

.h-hero {
  font: 800 54px/1.03 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.h-page {
  font: 800 48px/1.05 var(--font-display);
  margin: 0 0 16px;
}

.h-section {
  font: 800 36px/1.1 var(--font-display);
  margin: 0 0 8px;
}

.h-block {
  font: 800 30px/1.12 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.h-card {
  font: 700 19px var(--font-display);
  letter-spacing: 0;
  margin: 0 0 8px;
}

.lead {
  font: 400 19px/1.55 var(--font-body);
  color: var(--ink-68);
  margin: 0 0 32px;
  max-width: 560px;
}

.body-text {
  font: 400 16px/1.6 var(--font-body);
  color: var(--ink-68);
}

.muted {
  color: var(--ink-55);
}

.small {
  font-size: 13px;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font: 700 15px/1 var(--font-body);
  padding: 16px 28px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: center;
  border: 0;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--brand {
  background: var(--brand);
  color: #fff;
}

.btn--brand:hover {
  background: var(--brand-hover);
  color: #fff;
}

.btn--ink {
  background: var(--ink);
  color: #fff;
}

.btn--ink:hover {
  color: #fff;
}

.btn--orange {
  background: var(--orange);
  color: var(--ink);
}

.btn--orange:hover {
  color: var(--ink);
}

.btn--peach {
  background: var(--peach);
  color: var(--ink);
}

.btn--peach:hover {
  color: var(--ink);
}

.btn--outline {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(25, 26, 29, 0.16);
}

.btn--outline:hover {
  color: var(--ink);
}

.btn--sm {
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 8px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.link-arrow {
  font: 700 15px var(--font-body);
  color: var(--brand);
}

.link-underline {
  font: 700 15px var(--font-body);
  color: var(--ink);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 3px;
}

.link-underline:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------------- cards */

.card {
  background: #fff;
  border: 1px solid var(--ink-09);
  border-radius: var(--radius-card);
  padding: 28px;
}

.card-lift {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(25, 26, 29, 0.1);
}

.card__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  margin-bottom: 18px;
  background: var(--brand);
}

.card__icon--orange {
  background: var(--orange);
}

.card__icon--ink {
  background: var(--ink);
}

.card__icon--orange-mid {
  background: var(--orange-mid);
}

.chip {
  display: inline-block;
  font: 600 12px var(--font-body);
  color: var(--ink);
  background: var(--cream);
  padding: 7px 12px;
  border-radius: 7px;
}

.tag {
  display: inline-block;
  font: 700 10px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Placeholder block, for imagery the design has not supplied yet. */
.ph {
  background-color: #fff2ee;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(25, 26, 29, 0.05) 0 12px,
    transparent 12px 24px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1.5 ui-monospace, monospace;
  color: var(--ink-45);
  text-align: center;
  letter-spacing: 0.03em;
  padding: 16px;
}

/* --------------------------------------------------------------------- nav */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-09);
}

.nav-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-bar__logo img {
  height: 36px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-a {
  position: relative;
  font: 600 15px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
  background: none;
  border: 0;
}

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

/* Products dropdown. Hover-opened on pointer devices, and focus-within keeps it
   reachable from the keyboard without any JavaScript. */
.nav-drop {
  position: relative;
}

.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  z-index: 60;
}

.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-menu__inner {
  width: 340px;
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(25, 26, 29, 0.14);
  padding: 8px;
}

.nav-item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.13s ease;
}

.nav-item:hover {
  background: var(--cream);
}

.nav-item h4 {
  font: 700 15px/1.2 var(--font-body);
  color: var(--ink);
  margin: 0 0 3px;
  letter-spacing: 0;
}

.nav-item p {
  font: 400 13px/1.4 var(--font-body);
  color: var(--ink-60);
  margin: 0;
}

.nav-caret {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--peach);
  border: 0;
  cursor: pointer;
  font: 800 18px var(--font-display);
  color: var(--ink);
}

/* Mobile menu, opened by a checkbox so it needs no JavaScript. */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0 18px;
  border-top: 1px solid rgba(25, 26, 29, 0.08);
}

#nav-toggle-state {
  display: none;
}

#nav-toggle-state:checked ~ .nav-mobile {
  display: flex;
}

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

.footer {
  background: var(--ink);
  color: var(--on-ink);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 30px;
  padding: 52px 0 34px;
  border-bottom: 1px solid var(--on-ink-12);
}

.footer__brand {
  font: 900 24px var(--font-display);
  color: var(--on-ink);
}

.footer__heading {
  font: 700 12px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-ink-50);
  margin-bottom: 14px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list a {
  color: var(--on-ink);
  font: 600 15px/1 var(--font-body);
}

.footer__list a:hover {
  color: var(--brand);
}

.footer__bottom {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font: 400 12px var(--font-body);
  color: rgba(255, 235, 230, 0.45);
}

.footer p {
  font: 400 13px/1.5 var(--font-body);
  color: rgba(255, 235, 230, 0.55);
}

/* ------------------------------------------------------------------- forms */

.form-field {
  display: block;
  margin-bottom: 16px;
}

.form-label {
  font: 600 13px var(--font-body);
  display: block;
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-14);
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
  color: var(--ink);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.form-textarea {
  resize: vertical;
}

.form-error {
  display: block;
  margin-top: 6px;
  font: 500 13px var(--font-body);
  color: var(--brand-hover);
}

.form-input[aria-invalid='true'],
.form-select[aria-invalid='true'],
.form-textarea[aria-invalid='true'] {
  border-color: var(--brand-hover);
}

.form-panel {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 34px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--ink-60);
  margin-bottom: 16px;
}

.form-consent input {
  margin-top: 3px;
  flex: none;
}

.dropzone {
  border: 1.5px dashed rgba(25, 26, 29, 0.22);
  border-radius: 11px;
  background: var(--cream);
  padding: 26px;
  text-align: center;
}

.alert {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font: 500 15px/1.5 var(--font-body);
}

.alert--success {
  background: #eafbf0;
  border: 1px solid #cdeeda;
  color: #12603a;
}

.alert--error {
  background: #fff2ee;
  border: 1px solid #f7cdc4;
  color: #9c1f1c;
}

/* Hidden from users and assistive tech; only bots fill it. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ long-form body */

.prose p {
  font: 400 16px/1.75 var(--font-body);
  color: var(--ink-72);
  margin: 0 0 22px;
}

.prose p.lead {
  font: 400 18px/1.7 var(--font-body);
  color: rgba(25, 26, 29, 0.82);
  margin: 0 0 24px;
  max-width: none;
}

.prose h2 {
  font: 800 24px var(--font-display);
  color: var(--ink);
  margin: 34px 0 12px;
  letter-spacing: -0.01em;
}

.prose h3 {
  font: 700 20px var(--font-display);
  color: var(--ink);
  margin: 26px 0 10px;
}

.prose ul,
.prose ol {
  margin: 0 0 26px;
  padding-left: 22px;
}

.prose li {
  font: 400 16px/1.6 var(--font-body);
  color: var(--ink-72);
  margin: 0 0 10px;
}

.prose ul.hl {
  list-style: none;
  padding-left: 0;
}

.prose ul.hl li {
  position: relative;
  padding-left: 22px;
}

.prose ul.hl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand);
}

.prose blockquote {
  border-left: 3px solid var(--brand);
  padding: 6px 0 6px 20px;
  margin: 28px 0;
  font: 600 20px/1.5 var(--font-display);
  color: var(--ink);
}

.prose figure {
  margin: 26px 0;
}

.prose figure img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.prose figcaption {
  font: 400 13px var(--font-body);
  color: var(--ink-45);
  margin-top: 8px;
}

/* The CMS draft preview (DD-016). Deliberately loud: mistaking a preview for the live page is the
   one thing this feature can get wrong. */
.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  font: 500 14px var(--font-body);
}

.preview-bar__label {
  font: 800 11px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--ink);
  border-radius: 5px;
  padding: 4px 8px;
}

/* Tables in article bodies, authored in the CMS. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font: 400 15px var(--font-body);
}

.prose caption {
  font: 400 13px var(--font-body);
  color: var(--ink-45);
  text-align: left;
  padding-bottom: 8px;
}

.prose th,
.prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-09);
  vertical-align: top;
}

.prose th {
  font: 700 12px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-55);
  border-bottom: 1px solid var(--ink-14);
  white-space: nowrap;
}

.prose td {
  color: var(--ink-72);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

/* A rate card with five columns has nowhere to go on a phone. Scrolling the table on its own is
   the one option that neither squashes the columns into unreadable slivers nor pushes the whole
   page sideways. Placed here rather than at the end of the file on purpose — the responsive
   heading overrides at the bottom must stay last. */
@media (max-width: 560px) {
  .prose table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------- browser chrome */

/* The fake browser frame the design wraps product screenshots in. */
.chrome {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(25, 26, 29, 0.12);
  box-shadow: 0 26px 60px rgba(25, 26, 29, 0.16);
  background: #fff;
}

.chrome__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cream);
  border-bottom: 1px solid rgba(25, 26, 29, 0.08);
}

.chrome__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.chrome__url {
  margin-left: 12px;
  font: 500 12px ui-monospace, monospace;
  color: var(--ink-45);
  background: #fff;
  border: 1px solid rgba(25, 26, 29, 0.08);
  border-radius: 6px;
  padding: 5px 12px;
}

.chrome__img {
  width: 100%;
  display: block;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 920px) {
  :root {
    --pad-x: 22px;
  }

  .nav-links,
  .nav-bar__cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--split,
  .footer__top {
    grid-template-columns: 1fr;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr 1fr;
  }

  .h-hero {
    font-size: 38px;
  }

  .h-page {
    font-size: 36px;
  }

  .h-section {
    font-size: 28px;
  }

  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .h-hero {
    font-size: 32px;
  }

  .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------- home hero mock */

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.rounded-image {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  height: auto;
}

.hero-mock {
  position: relative;
}

.hero-mock__flags {
  position: absolute;
  top: -14px;
  left: -14px;
  display: flex;
  gap: 5px;
  z-index: 2;
}

.hero-mock__flag {
  width: 20px;
  height: 46px;
  transform: skewX(-22deg);
  display: block;
}

.hero-mock__flag--brand {
  background: var(--brand);
}

.hero-mock__flag--ink {
  background: var(--ink);
}

.hero-mock__flag--orange {
  background: var(--orange);
}

.hero-mock__frame {
  background: var(--cream);
  border-radius: 26px;
  padding: 26px 28px;
  border: 1px solid rgba(25, 26, 29, 0.07);
}

.hero-mock__caption {
  text-align: center;
  margin: 16px 0 0;
  font: 600 11px var(--font-body);
  color: var(--ink-45);
}

.phone {
  max-width: 300px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 34px;
  padding: 12px;
}

.phone__screen {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}

.phone__header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(25, 26, 29, 0.07);
}

.phone__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 15px var(--font-display);
  color: var(--brand);
  flex: none;
}

.phone__name {
  font: 700 14px var(--font-display);
  color: var(--ink);
}

.phone__status {
  font: 600 10px var(--font-body);
  color: var(--green);
}

.phone__thread {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #faf7f5;
}

.bubble {
  max-width: 88%;
}

.bubble--in {
  align-self: flex-start;
}

.bubble--out {
  align-self: flex-end;
}

.bubble__via {
  font: 700 9px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 4px 3px;
}

.bubble__via--green {
  color: var(--green);
}

.bubble__via--orange {
  color: var(--orange);
}

.bubble__body {
  background: #eceae8;
  border-radius: 14px 14px 14px 4px;
  padding: 10px 13px;
  font: 400 13px/1.4 var(--font-body);
  color: var(--ink);
}

.bubble--out .bubble__body {
  background: var(--ink);
  color: var(--peach);
  border-radius: 14px 14px 4px 14px;
}

.bubble__body--whatsapp {
  background: #eafbf0;
  border: 1px solid #cdeeda;
}

.rcs-card {
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 14px 14px 14px 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(25, 26, 29, 0.05);
}

.rcs-card__image {
  height: 74px;
  background-color: #f7ddc9;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(236, 138, 79, 0.22) 0 10px,
    transparent 10px 20px
  );
}

.rcs-card__body {
  padding: 10px 12px 12px;
}

.rcs-card__title {
  font: 700 12px var(--font-display);
  color: var(--ink);
  margin-bottom: 8px;
}

.rcs-card__cta {
  font: 700 11px var(--font-body);
  color: #fff;
  background: var(--brand);
  border-radius: 8px;
  padding: 8px 0;
  text-align: center;
}

/* ---------------------------------------------------------- channels strip */

.channels-strip {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.channels-strip__label {
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 235, 230, 0.55);
  white-space: nowrap;
}

.channels-strip__list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.channel-pill {
  font: 700 14px var(--font-display);
  color: var(--on-ink);
  background: rgba(255, 255, 255, 0.08);
  padding: 9px 15px;
  border-radius: 7px;
}

/* ----------------------------------------------------------- content lists */

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row-card {
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.empty-state {
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  font: 400 15px var(--font-body);
  color: var(--ink-55);
}

.news-card {
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: block;
  color: inherit;
}

.news-card:hover {
  color: inherit;
}

.news-card__media {
  height: 170px;
  background: var(--cream);
  overflow: hidden;
}

.news-card__media img,
.news-card__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  padding: 22px;
}

.news-card__title {
  font: 700 18px/1.25 var(--font-display);
  margin: 8px 0 6px;
  color: var(--ink);
}

.team-card__photo {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 12px;
  background: #efe9e3;
}

.team-card__photo img,
.team-card__photo .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverage-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--ink-09);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.coverage-table th {
  text-align: left;
  font: 700 11px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-09);
}

.coverage-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--ink-06);
  font: 400 15px var(--font-body);
  color: var(--ink-72);
}

.coverage-table tr:last-child td {
  border-bottom: 0;
}

.status-pill {
  display: inline-block;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 20px;
}

.status-pill--live {
  background: var(--ink);
  color: #fff;
}

.status-pill--pilot {
  background: var(--peach);
  color: #b8480a;
}

.status-pill--planned {
  background: #f0ece7;
  color: var(--ink-55);
}

/* ------------------------------------------------------------ page components */

.panel {
  border-radius: 16px;
  padding: 34px;
}

.panel--tint {
  background: var(--cream);
}

.panel--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.panel--ink h3 {
  color: var(--on-ink);
}

.bullet {
  display: flex;
  gap: 14px;
}

.bullet__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-top: 6px;
  flex: none;
  display: block;
}

.bullet__dot--brand {
  background: var(--brand);
}

.bullet__dot--orange {
  background: var(--orange);
}

.bullet__dot--ink {
  background: var(--ink);
}

.bullet__title {
  font: 700 16px var(--font-display);
}

.bullet p {
  margin: 2px 0 0;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.product-row {
  display: grid;
  grid-template-columns: 0.36fr 1fr;
  gap: 36px;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  border-color: var(--ink-10);
}

.tick::before {
  content: '✓ ';
  color: var(--ink);
}

.tick {
  font: 500 15px/1.4 var(--font-body);
  color: rgba(25, 26, 29, 0.78);
}

/* ------------------------------------------------------------------ news page */

/* The picture column is the wider one, which is the opposite of what it looks like it should be.
   The panel's height comes from the text beside it, so its *shape* is set by the split: at the
   original 1.1/0.9 a hero came out at 1.75:1 against a source of about 2.3:1, and the difference
   showed as bands above and below the picture. 0.8/1.2 puts the panel at 2.14:1 and closes them to
   a few pixels.

   Measured, not guessed, and there is a floor: past about 1.25fr the title takes a third line, the
   card grows taller, and the bands come back wider than they started. */
.featured-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  border-radius: 16px;
}

/* 32 rather than 40 for the same reason — it buys back more text width than the narrower column
   costs, which is what keeps the title on two lines. */
.featured-card__body {
  padding: 32px;
}

/* Two lines, always.
   A character limit cannot do this job: measured against real headlines, 44 characters wrapped to
   three lines while 49 stayed on two, because it depends on where the word boundaries fall, not on
   the count. Only clamping guarantees the card keeps its shape — and the shape is what keeps the
   picture beside it free of bands. The full headline is on the article page. */
.featured-card__body h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-card__media {
  min-height: 260px;
  background: var(--cream);
}

/* `contain`, not `cover`, and this is the one place on the site that differs.
   The slot is whatever shape the text column leaves behind — about 1.75:1 — while the same image
   in the article is shown at roughly 2.3:1. Filling the slot therefore cropped a quarter of the
   width, straight through the middle of any hero built as a banner with its title set into the
   artwork. Cropping is fine for a photograph and ruinous for a graphic, and the CMS cannot tell
   which it has been given.
   The panel keeps its size and bleeds to the card edge as before; the picture sits inside it on
   the cream surface, whole, exactly as the article shows it. */
.featured-card__media img,
.featured-card__media .ph {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.article-byline__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--peach);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 14px var(--font-display);
  color: var(--brand);
}

.article-byline__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(25, 26, 29, 0.3);
  display: inline-block;
}

.article-hero {
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
}

.article-hero img,
.article-hero .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-cta {
  background: var(--cream);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

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

.contact-label {
  font: 700 13px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-45);
  margin-bottom: 4px;
}

.contact-value {
  font: 600 17px var(--font-body);
}

/* --------------------------------------------------------------- platform page */

.feat-group__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.feat-group__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.feat-group__swatch--brand {
  background: var(--brand);
}

.feat-group__swatch--orange-deep {
  background: var(--orange-mid);
}

.feat-group__swatch--ink {
  background: var(--ink);
}

.feat-group__swatch--orange-dark {
  background: var(--orange);
}

.feat-group__range--brand {
  color: var(--brand);
}

.feat-group__range--orange-deep {
  color: var(--orange-deep);
}

.feat-group__range--ink {
  color: var(--ink);
}

.feat-group__range--orange-dark {
  color: var(--orange-dark);
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 820px;
  margin: 26px auto 0;
}

.channel-tile {
  padding: 20px 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font: 800 15px var(--font-display);
  color: var(--on-ink);
}

/* ------------------------------------------------------------- sdmp light page */

.compose-mock {
  justify-self: center;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(25, 26, 29, 0.12);
  box-shadow: 0 24px 54px rgba(25, 26, 29, 0.14);
  overflow: hidden;
}

.compose-mock__label {
  font: 700 12px var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 8px;
}

.compose-mock__field-label {
  font: 600 12px var(--font-body);
  color: var(--ink-55);
  margin-bottom: 5px;
}

.compose-mock__field {
  border: 1px solid var(--ink-14);
  border-radius: 9px;
  padding: 11px 13px;
  font: 500 14px/1.5 var(--font-body);
  color: var(--ink);
  margin-bottom: 14px;
}

.compose-mock__send {
  font: 700 14px var(--font-body);
  color: #fff;
  background: var(--brand);
  padding: 13px;
  border-radius: 9px;
  text-align: center;
}

.code-panel {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ink-14);
  box-shadow: 0 20px 44px rgba(25, 26, 29, 0.16);
  background: var(--ink);
}

.code-panel__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-panel__code {
  margin: 0;
  padding: 22px;
  overflow-x: auto;
  font: 500 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #f3ede8;
}

@media (max-width: 920px) {
  .product-row,
  .featured-card {
    grid-template-columns: 1fr;
  }

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

  .featured-card__body {
    padding: 28px;
  }

  /* Stacked, the panel has no text column to match, so its height is free to follow the picture.
     The 260px floor exists to give the panel presence beside the text on a wide screen; keeping it
     here just banded a 142px-tall picture with 59px of empty cream. */
  .featured-card__media {
    min-height: 0;
  }

  .featured-card__media img {
    height: auto;
  }

  .article-hero {
    height: 240px;
  }
}

/* ---------------------------------------------------------------------------
 * Utilities.
 *
 * These exist because the Content-Security-Policy has no style-src 'unsafe-inline'
 * (articles render stored HTML, so that is not a control to give away). Every
 * style="..." attribute in a page is silently dropped by the browser, so layout
 * tweaks have to live here. Keep the set small and named by intent.
 * ------------------------------------------------------------------------- */

.u-center { text-align: center; }
.u-flush { margin: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-sm { margin-bottom: 6px; }
.u-mb-md { margin-bottom: 18px; }
.u-mb-lg { margin-bottom: 26px; }
.u-mb-xl { margin-bottom: 40px; }
.u-mt-sm { margin-top: 12px; }
.u-mt-md { margin-top: 20px; }
.u-mt-lg { margin-top: 28px; }
.u-w-full { width: 100%; }
.u-nowrap { white-space: nowrap; }

/* Line-length caps. The design constrains most body copy well short of the grid. */
.measure-xs { max-width: 420px; }
.measure-sm { max-width: 480px; }
.measure-md { max-width: 560px; }
.measure-lg { max-width: 620px; }
.measure-xl { max-width: 720px; }

.container--wide { max-width: 1160px; }
.container--cta { max-width: 1000px; }

.section--top-0 { padding-top: 0; }
.section--bottom-0 { padding-bottom: 0; }
.section--pull-up { margin-top: -84px; }
.section--deep-bottom { padding-bottom: 120px; }

.grid--gap-md { gap: 20px; }
.grid--gap-lg { gap: 36px; }
.grid--gap-xl { gap: 44px; }
.grid--gap-sm { gap: 14px; }
.grid--middle { align-items: center; }

/* Traffic-light dots on the browser-chrome mocks. */
.chrome__dot { display: inline-block; }
.dot--red { background: #e6746a; }
.dot--amber { background: #e8b84a; }
.dot--green { background: #79c07a; }

/* Heading size variants the design uses in specific places. */
.h-section--lg { font-size: 40px; }
.h-section--sm { font-size: 32px; }
.h-block--sm { font-size: 26px; }
.h-block--xs { font-size: 24px; }
.h-card--lg { font: 800 22px var(--font-display); }
.h-card--sm { font-size: 16px; }
.h-card--md { font-size: 18px; }
.h-hero--lg { font-size: 50px; }
.h-page--sm { font-size: 42px; }
.h-page--xs { font-size: 40px; }

.link-ink { color: var(--ink); }
.link-ink:hover { color: var(--brand); }

.text-orange { color: var(--orange); }
.legal-note { font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.tiny { font-size: 12px; }

.link-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.field-readonly {
  background: var(--cream);
  color: var(--ink-72);
}

.card--flat { padding: 22px; }
.card--roomy { padding: 30px; border-radius: 16px; }
.card--form { padding: 36px; }
.card--selected { border: 2px solid var(--brand); }

.table-scroll { overflow-x: auto; }

.article-title {
  font: 800 42px/1.08 var(--font-display);
  margin: 12px 0 16px;
}

.article-address {
  font: 500 17px/1.5 var(--font-body);
  color: var(--ink-90);
  margin: 0;
}

.back-link {
  font: 600 14px var(--font-body);
  color: var(--ink-55);
}

.back-link:hover { color: var(--brand); }

.policy-heading {
  font: 700 20px var(--font-display);
  margin: 0 0 8px;
}

.policy-body {
  font: 400 15px/1.7 var(--font-body);
  color: var(--ink-72);
  margin: 0;
}

.privacy-updated {
  font-size: 14px;
  margin: 0 0 36px;
}

.news-card__title--sm {
  font-size: 17px;
  margin-bottom: 0;
}

.news-card__media--sm { height: 150px; }
.news-card__body--sm { padding: 20px; }

/* ------------------------------------------------- section + stack variants */

.section--hero { padding-top: 64px; padding-bottom: 120px; }
.section--bottom-tight { padding-bottom: 36px; }
.section--top-md { padding-top: 40px; }

.stack--roomy { gap: 20px; }
.stack--tight { gap: 11px; }
.stack--policy { gap: 28px; }

.centered-block { margin-left: auto; margin-right: auto; }
.u-mt-xs { margin-top: 4px; }

.panel__text { margin: 0; color: var(--on-ink-65); }
.panel__title { font: 700 18px var(--font-display); margin-bottom: 6px; }

.team-card__name { font: 700 16px var(--font-display); }
.row-card__title { font: 700 18px var(--font-display); }

/* The one-line summary under a vacancy. Measured, or it stretches to the full row on a wide screen
   and pushes the button onto its own line. */
.row-card__excerpt { max-width: 520px; margin: 8px 0 0; }
.coverage-table__region { font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------- compose mock */

.compose-mock__inner { padding: 22px; }
.compose-mock__field--body { min-height: 62px; }
.compose-mock__count { font-size: 11px; margin-bottom: 14px; }

/* --------------------------------------------------------------- code panel */

.code-panel__name {
  margin-left: 8px;
  font: 500 11px ui-monospace, monospace;
  color: var(--on-ink-50);
}

/* Syntax colours for the static curl sample. Classes rather than inline spans,
   because the CSP blocks style attributes. */
.tok-cmd { color: #fb9a5a; }
.tok-str { color: #8fd08f; }
.tok-comment { color: rgba(255, 235, 230, 0.45); }

/* ------------------------------------------------------------- article page */

.article-header { padding-top: 22px; padding-bottom: 28px; }
.article-body { padding-bottom: 30px; }
.article-cta-wrap { padding: 14px 32px 20px; }
.article-cta__title { font: 800 18px var(--font-display); margin-bottom: 4px; }
.article-byline__name { font: 600 14px var(--font-body); }
.article-byline__meta { font-size: 14px; }

.article-more {
  padding-top: 40px;
  padding-bottom: 60px;
  border-top: 1px solid rgba(25, 26, 29, 0.08);
}

/* ---------------------------------------------------------------- apply page */

.apply-header { padding-top: 22px; padding-bottom: 44px; }
.dropzone__title { font: 700 15px var(--font-body); margin-bottom: 4px; }
.dropzone__input { margin-top: 12px; font-size: 13px; }

.contact-grid { gap: 52px; }

/* ---------------------------------------------------------------------------
 * Wholesale page — proof band, audience tracks, quote checklist, FAQ (DD-019).
 * Placed before the responsive heading block below, which must stay last.
 * ------------------------------------------------------------------------- */

.proof-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Fewer than four proof points still fill the row rather than leaving a gap on
   the right, because the count is whatever an editor has entered. */
.proof-band--3 { grid-template-columns: repeat(3, 1fr); }
.proof-band--2 { grid-template-columns: repeat(2, 1fr); }
.proof-band--1 { grid-template-columns: 1fr; }

.proof-stat__value {
  font: 800 40px/1.05 var(--font-display);
  color: var(--brand);
  display: block;
}

.proof-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-60);
}

.track-card { height: 100%; }

.track-card__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
}

.track-card__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.55;
}

.track-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.quote-item__step {
  font: 800 14px var(--font-display);
  color: var(--orange);
  display: block;
  margin-bottom: 6px;
}

.quote-item__title { font: 700 16px var(--font-body); margin-bottom: 4px; }

/* <details>/<summary>, so the FAQ opens with no JavaScript — the CSP drops
   inline script and this page has none of its own. */
.faq { border-top: 1px solid var(--ink-14); }

.faq__item {
  border-bottom: 1px solid var(--ink-14);
}

.faq__q {
  cursor: pointer;
  padding: 18px 0;
  font: 700 17px var(--font-body);
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  float: right;
  font-weight: 700;
  color: var(--brand);
}

.faq__item[open] .faq__q::after { content: "–"; }

.faq__a {
  padding: 0 0 18px;
  max-width: 68ch;
  color: var(--ink-60);
  line-height: 1.65;
}

@media (max-width: 920px) {
  .proof-band,
  .proof-band--3 { grid-template-columns: repeat(2, 1fr); }

  .proof-stat__value { font-size: 32px; }
}

@media (max-width: 560px) {
  .proof-band,
  .proof-band--3,
  .proof-band--2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Membership badge (home page).
 *
 * Quiet on purpose: a hairline rule, a small label and the mark at 118px, above
 * the closing call to action rather than competing with it. The logo is drawn
 * at full opacity and unaltered — it is somebody else's trademark, used by
 * permission, and dimming it to taste is the kind of edit brand guidelines
 * exist to forbid. Restraint comes from the size and the placement instead.
 *
 * Placed before the responsive heading block below, which must stay last.
 * ------------------------------------------------------------------------- */

.member-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 30px 0 36px;
  border-top: 1px solid var(--ink-09);
}

.member-strip__label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.member-strip__logo {
  display: block;
  width: 118px;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * SDMP page — capability index and the per-area feature layouts.
 *
 * The page carries 36 capabilities and no product screenshots, so the variety
 * has to come from the layouts: an index strip, two tile grids, a rail, a pair
 * of panels, a ledger and a spanning grid. One primitive per area, so a reader
 * can tell where they are without reading the heading.
 *
 * Placed before the responsive heading block below, which must stay last.
 * ------------------------------------------------------------------------- */

/* The nav is sticky, so an anchor target lands behind it without this. */
.anchor {
  scroll-margin-top: 96px;
}

/* Occupies the slot the dashboard screenshot used to hold — pulled up over the
   hero band the same way, so the page keeps its shape. */
.cap-index {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-09);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 54px rgba(25, 26, 29, 0.1);
  padding: 32px;
}

.cap-index__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-09);
}

.cap-index__note {
  margin: 0;
}

.cap-index__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cap-item {
  display: block;
  padding: 16px 16px 18px;
  border: 1px solid var(--ink-09);
  border-radius: 10px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.cap-item:hover {
  background: var(--cream);
  border-color: var(--ink-14);
  transform: translateY(-2px);
}

.cap-item__name {
  display: block;
  margin-top: 8px;
  font: 700 17px var(--font-display);
  color: var(--ink);
}

.cap-item__count {
  display: block;
  margin-top: 3px;
  font: 400 13px var(--font-body);
  color: var(--ink-45);
}

/* A lead column against a grid of capabilities. */
.feat-split {
  display: grid;
  grid-template-columns: 0.75fr 2fr;
  gap: 48px;
}

.feat-lead {
  max-width: 320px;
}

.feat-group__label--centred {
  justify-content: center;
}

.feat-tiles {
  display: grid;
  gap: 30px 34px;
}

.feat-tiles--2 {
  grid-template-columns: repeat(2, 1fr);
}

.feat-tiles--3 {
  grid-template-columns: repeat(3, 1fr);
}

.feat-tile {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}

.feat-tile__num {
  display: block;
  font: 800 15px var(--font-display);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.feat-tile h3 {
  font: 700 18px var(--font-display);
  letter-spacing: 0;
  margin: 0 0 6px;
}

.feat-tile p {
  font: 400 14px/1.6 var(--font-body);
  color: var(--ink-60);
  margin: 0;
}

/* Conversations. A thread down the left edge, because the section is about one. */
.rail {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  border-left: 2px solid var(--on-ink-12);
}

.rail__item {
  position: relative;
  padding: 0 0 34px 34px;
}

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

.rail__item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--ink);
}

.rail__num {
  font: 800 13px var(--font-display);
  letter-spacing: 0.06em;
  color: var(--orange);
}

.rail__title {
  font: 700 20px var(--font-display);
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
}

.rail__text {
  font: 400 15px/1.65 var(--font-body);
  margin: 0;
}

/* Two short areas sharing one row. */
/* No align-items here on purpose: the two panels carry a different number of
   capabilities, and stretching is what keeps their bottom edges level. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.duo-panel {
  height: 100%;
  padding: 34px;
  border: 1px solid var(--ink-09);
  border-radius: var(--radius-lg);
  background: #fff;
}

.mini-list {
  margin-top: 22px;
}

.mini-list--flush {
  margin-top: 0;
}

.mini-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--ink-10);
}

.mini-row__num {
  font: 800 14px var(--font-display);
  padding-top: 2px;
}

.mini-row__title {
  font: 700 16px var(--font-display);
  letter-spacing: 0;
  margin: 0 0 4px;
}

.mini-row__text {
  font: 400 14px/1.6 var(--font-body);
  color: var(--ink-60);
  margin: 0;
}

/* Billing. Ruled rows, because the section is about the bill. */
.ledger {
  border-top: 2px solid var(--ink);
}

.ledger__row {
  display: grid;
  grid-template-columns: 64px 0.9fr 1.5fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-10);
}

.ledger__num {
  font: 800 16px var(--font-display);
}

.ledger__title {
  font: 700 20px var(--font-display);
  letter-spacing: -0.01em;
  margin: 0;
}

.ledger__text {
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink-60);
  margin: 0;
}

/* Seven tiles in a three-column grid. The first and last span two columns, so
   the rows come out square instead of leaving a hole in the bottom right. */
.control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.control-tile {
  background: #fff;
  border: 1px solid var(--ink-09);
  border-radius: var(--radius-card);
  padding: 24px;
}

.control-tile--wide {
  grid-column: span 2;
}

.control-tile__num {
  font: 800 13px var(--font-display);
  letter-spacing: 0.06em;
}

.control-tile__title {
  font: 700 17px var(--font-display);
  letter-spacing: 0;
  margin: 8px 0 6px;
}

.control-tile__text {
  font: 400 14px/1.6 var(--font-body);
  color: var(--ink-60);
  margin: 0;
}

@media (max-width: 920px) {
  .cap-index {
    padding: 24px;
  }

  .cap-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feat-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .feat-lead {
    max-width: none;
  }

  .feat-tiles--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .duo {
    grid-template-columns: 1fr;
  }

  .duo-panel {
    padding: 26px;
  }

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

  /* The number keeps its own column; the description drops under the title. */
  .ledger__row {
    grid-template-columns: 48px 1fr;
    gap: 6px 16px;
  }

  .ledger__text {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .cap-index__grid,
  .feat-tiles--2,
  .feat-tiles--3,
  .control-grid {
    grid-template-columns: 1fr;
  }

  .control-tile--wide {
    grid-column: span 1;
  }

  .rail__item {
    padding-left: 24px;
  }
}

/* ---------------------------------------------------------------------------
 * Responsive heading sizes — MUST stay last in this file.
 *
 * The size modifiers above (.h-hero--lg, .h-page--sm, …) have the same
 * specificity as the base heading classes, so a modifier declared after the
 * earlier breakpoint block would win at every width and leave a 50px hero on a
 * 375px screen. Overriding here, at the end, is what keeps them responsive.
 * ------------------------------------------------------------------------- */

@media (max-width: 920px) {
  .h-hero,
  .h-hero--lg { font-size: 38px; }

  .h-page,
  .h-page--sm,
  .h-page--xs { font-size: 36px; }

  .h-section,
  .h-section--lg { font-size: 28px; }

  .h-section--sm,
  .h-block { font-size: 26px; }

  .article-title { font-size: 32px; }

  .section--hero { padding-bottom: 72px; }
  .section--pull-up { margin-top: -48px; }
  .section--deep-bottom { padding-bottom: 72px; }
}

@media (max-width: 560px) {
  .h-hero,
  .h-hero--lg { font-size: 32px; }

  .h-page,
  .h-page--sm,
  .h-page--xs { font-size: 30px; }

  .h-section,
  .h-section--lg,
  .h-section--sm { font-size: 26px; }

  .h-block,
  .h-block--sm { font-size: 24px; }

  .article-title { font-size: 28px; }

  .card--form,
  .form-panel { padding: 22px; }
}