/* ==========================================================================
   Anti - Sections that only appear on the inner pages
   Loaded after sections.css. Uses the same tokens; introduces no new colours.
   ========================================================================== */

/* --- Link cards (the Home hub) --------------------------------------------
   Whole card is one link, so the target is large and the label still reads
   on its own out of context. */

.link-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.link-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.link-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}

.link-card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.link-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
}

.link-card__go svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-card:hover .link-card__go svg { transform: translateX(3px); }

/* --- Split layout (copy beside a panel) ----------------------------------- */

.split {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: start;
}

.split__copy { display: grid; justify-items: start; gap: var(--space-4); }

.split__text {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 54ch;
}

.split__note {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.split__note svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--ink-700); margin-top: 0.1em; }

@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .split--form { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* --- Figures panel --------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  margin: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-lg);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.figures__item { display: grid; gap: var(--space-1); }

.figures__label {
  order: 2;
  font-size: var(--text-xs);
  color: var(--color-inverse-muted);
}

.figures__value {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

/* --- Timeline -------------------------------------------------------------
   A rail on the left, one node per milestone. The rail is decorative; the
   ordered list carries the sequence for assistive tech. */

.timeline {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  position: relative;
  padding-left: var(--space-8);
  border-left: 2px solid var(--color-border);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-strong);
  border: 2px solid var(--color-bg);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-700);
  letter-spacing: var(--tracking-wide);
}

.timeline__title {
  margin-top: var(--space-1);
  font-size: var(--text-h4);
}

.timeline__text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 52ch;
}

@media (min-width: 760px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}

/* --- Team ------------------------------------------------------------------ */

.team {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.person__avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.person__name { font-size: var(--text-h4); }
.person__role { font-size: var(--text-xs); color: var(--ink-700); font-weight: var(--weight-semibold); }
.person__bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

/* --- Steps ------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.step__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-extra);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-text);
  margin-bottom: var(--space-1);
}

.step__title { font-size: var(--text-h4); }
.step__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

/* --- Integrations ----------------------------------------------------------- */

.integrations {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.integration {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.integration__name { display: block; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.integration__meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.icon-tile--soft {
  background-color: var(--color-accent-soft);
  color: var(--ink-800);
}

/* --- Comparison table -------------------------------------------------------
   The wrapper scrolls, not the page. It is focusable and labelled so keyboard
   users can reach and pan it. */

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

.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.compare thead th {
  position: sticky;
  top: 0;
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 0;
}

.compare tbody th {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.compare tbody td { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) { background-color: var(--color-surface-sunk); }

/* Availability is spelled out, never left to a bare tick or a colour. */
.cell-yes { color: var(--ink-700); font-weight: var(--weight-semibold); }
.cell-no  { color: var(--color-text-subtle); }

/* --- FAQ -------------------------------------------------------------------
   Native <details>, so it works before JavaScript and is keyboard operable
   for free. */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  list-style: none;
}

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

.faq__mark {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-700);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

.faq__a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.faq__a a { color: var(--ink-700); text-decoration: underline; }

/* --- Articles ---------------------------------------------------------------- */

.articles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.article {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.article:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.tag {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--ink-800);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.article__title { font-size: var(--text-h4); line-height: var(--leading-snug); }
.article__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

/* --- Learning paths ---------------------------------------------------------- */

.paths {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.path {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.path__badge {
  padding: 2px var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.path__title { font-size: var(--text-h3); }
.path__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.path__meta { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-accent); font-weight: var(--weight-semibold); }

/* --- Contact form ------------------------------------------------------------ */

.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-out);
}

.input:hover { border-color: var(--ink-600); }
.input:focus-visible { border-color: var(--ink-700); outline: 2px solid var(--color-focus); outline-offset: 2px; }
textarea.input { resize: vertical; min-height: 7rem; line-height: var(--leading-normal); }
select.input { appearance: none; background-image: none; }

.input[aria-invalid="true"] { border-color: var(--signal-down); background-color: #fdf5f3; }

/* Errors are text, never a red border alone. */
.field__error {
  min-height: 1.1rem;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--signal-down);
  font-weight: var(--weight-medium);
}

.form-status {
  min-height: 1.25rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.form-status[data-state="error"]   { color: var(--signal-down); }
.form-status[data-state="success"] { color: var(--ink-700); }

/* --- Channels ----------------------------------------------------------------- */

.channels {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}
.channel .icon-tile { margin-bottom: var(--space-2); }
.channel__title { font-size: var(--text-h4); }
.channel__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.channel__meta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-700);
  font-weight: var(--weight-semibold);
}

/* --- Offices -------------------------------------------------------------------- */

.offices {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.office {
  padding: var(--space-6);
  border-top: 2px solid var(--color-inverse-bg);
}

.office__city { font-size: var(--text-h3); }
.office__role { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-700); font-weight: var(--weight-semibold); }
.office__address {
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* --- Pager --------------------------------------------------------------------
   Two cross-page links closing every inner page. */

.pager {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.pager__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.pager__link:hover { border-color: var(--ink-900); background-color: var(--color-bg-alt); }

.pager__label {
  grid-column: 1;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.pager__title {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}

.pager__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  min-width: 1.25rem;
  color: var(--ink-700);
  transition: transform var(--duration-base) var(--ease-out);
}
.pager__link:hover .pager__icon { transform: translateX(3px); }

/* --- Heading level vs. heading size ----------------------------------------
   The page is one document, so headings nest: h1 hero, h2 chapter, h3 section,
   h4 card. Visual weight is set here by role rather than by tag, so demoting a
   tag for the outline never shrinks the design. */


.section__head h1,
.section__head h3,
.split__copy h1,
.split__copy h3 {
  font-size: var(--text-h2);
  font-weight: var(--weight-extra);
  line-height: 1.14;
  letter-spacing: var(--tracking-display);
}


/* --- Billing switch --------------------------------------------------------
   Two real radios in a track. The visible pill is the checked radio's sibling,
   so keyboard, screen reader and pointer all drive the same control. */

.billing {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-8);
  padding: 0;
  border: 0;
}

.billing__track {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
}

.billing__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.billing__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

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

.billing__option:has(input:checked) {
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

/* The ring goes on the label, because the radio itself is off-screen. */
.billing__option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.billing__save {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--ink-800);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}
.billing__option:has(input:checked) .billing__save {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.billing__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* The figure swaps rather than counts, so it must not reflow the card as it
   changes width. */
.plan__amount {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.plan__price[data-swapping] .plan__amount { opacity: 0; }

.billing__option > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .billing__track { width: 100%; }
  .billing__option { flex: 1 1 0; justify-content: center; padding-inline: var(--space-3); }

  /* The saving badge does not fit beside the label on a phone, and wrapping it
     leaves the two halves of the switch different heights. It stays in the
     accessibility tree - the note under the plans repeats it in words, and
     that note is a live region, so switching announces the saving either way. */
  .billing__save {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Filter bar ------------------------------------------------------------
   Buttons with aria-pressed rather than a tablist: these narrow a list that
   stays where it is, they do not swap panels. */

.filter {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  justify-items: center;
}

.filter__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.chip {
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.chip:hover { color: var(--color-text); border-color: var(--ink-600); }
.chip:active { transform: translateY(1px); }

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

.filter__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.filter__empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* A button that reads as a link: used inside a sentence, where a full button
   would break the line. */
.link-button {
  color: var(--ink-700);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--color-text); }

/* Cards leave the flow entirely when filtered out, so the grid closes up
   instead of leaving holes. */
.articles > li[hidden] { display: none; }

/* --- Comparison table: wide ------------------------------------------------
   A row highlight makes it possible to track one feature across three columns
   without losing the line. */

@media (min-width: 721px) {
  .compare tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .compare tbody tr:hover,
  .compare tbody tr:focus-within {
    background-color: var(--color-accent-soft);
  }
}

/* --- Comparison table: narrow ----------------------------------------------
   Below the point where three columns stop fitting, the table stops being a
   table and becomes one block per feature. Horizontal scrolling works, but it
   hides two thirds of the comparison behind a gesture; stacking keeps all
   three plans in view for whichever feature you are reading.

   The header row is removed from view, so each value carries its own column
   name from data-col. */

@media (max-width: 720px) {
  .table-scroll { overflow-x: visible; border: 0; background: none; }

  .compare { min-width: 0; }

  .compare thead { display: none; }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; }

  .compare tbody tr {
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: hidden;
  }
  .compare tbody tr:nth-child(even) { background-color: var(--color-surface); }

  .compare tbody th {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-sunk);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: var(--text-base);
  }

  .compare tbody td {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: right;
  }
  .compare tbody td::before {
    content: attr(data-col);
    text-align: left;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }
  .compare tbody tr td:last-child { border-bottom: 0; }
}

/* --- Facts (inside a photographic band) ------------------------------------ */

.facts {
  display: grid;
  gap: var(--space-6) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.fact { border-top: 2px solid var(--color-accent); padding-top: var(--space-4); }
.fact__title { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.fact__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

/* --- Gallery ---------------------------------------------------------------- */

.gallery,
.personas,
.sessions {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.shot__title { margin-top: var(--space-4); font-size: var(--text-h4); }
.shot__text { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

/* --- Personas ---------------------------------------------------------------
   The portrait carries no information the text does not, so its alt is empty
   and it is skipped rather than described. */

.persona {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.persona:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.persona:hover .media img { scale: 1.05; }

.persona .media { border-radius: 0; }
.persona__body { display: grid; gap: var(--space-2); padding: var(--space-6); }
.persona__kind {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-700);
}
.persona__title { font-size: var(--text-h3); }
.persona__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.persona__uses {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* --- Sessions ---------------------------------------------------------------- */

.session {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.session:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.session:hover .media img { scale: 1.05; }
.session:active { translate: 0 1px; box-shadow: var(--shadow-xs); }

.session .media { border-radius: 0; }
.session__body { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.session__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); }
.session__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
.session__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.session__when {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

/* --- Split balance ----------------------------------------------------------
   Both split layouts had one column finish well short of the other. Stretching
   the shorter side and letting its contents centre closes the gap without
   padding the copy out with filler. */

@media (min-width: 880px) {
  .split { align-items: stretch; }
  .split__copy { align-content: center; }
  .figures { align-content: center; }
}

/* --- What happens next ------------------------------------------------------- */

.next-steps {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.next-step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
}

.next-step__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.next-step__title { display: block; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.next-step__text {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.next-step__text strong { color: var(--color-text); font-weight: var(--weight-bold); }

/* --- Markets table ---------------------------------------------------------
   The one section every platform in this category has, and the one Anti was
   missing. Sortable columns, a filter on direction, and a seven-day trace per
   row. */

.market { display: grid; gap: var(--space-5); }

.market__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.market__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.market__table th,
.market__table td {
  padding: var(--space-4) var(--space-5);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.market__table thead th { text-align: right; }
.market__table thead th:first-child,
.market__table tbody th { text-align: left; }

.market__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-surface-sunk);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The header is a button, so sorting is reachable by keyboard and announced
   through aria-sort on the cell around it. */
.market__table thead button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.market__table thead button:hover { color: var(--color-text); }
.market__table thead button svg { width: 0.875rem; height: 0.875rem; opacity: 0.45; }
.market__table th[aria-sort="ascending"] button svg,
.market__table th[aria-sort="descending"] button svg { opacity: 1; color: var(--ink-700); }
.market__table th[aria-sort="ascending"] button,
.market__table th[aria-sort="descending"] button { color: var(--color-text); }

.market__table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
.market__table tbody tr:hover { background-color: var(--color-surface-sunk); }
.market__table tbody tr[hidden] { display: none; }

.market__asset { display: flex; align-items: center; gap: var(--space-3); font-weight: inherit; }
.market__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex: none;
}
.market__name { display: block; font-weight: var(--weight-semibold); }
.market__ticker { display: block; font-size: var(--text-2xs); color: var(--color-text-subtle); }
.market__price { font-weight: var(--weight-semibold); }

.market__spark svg { width: 7.5rem; height: 2rem; }
.market__table tr[data-move="up"] .chart__line   { stroke: var(--signal-up); }
.market__table tr[data-move="down"] .chart__line { stroke: var(--signal-down); }

.market__note { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Below the point where five columns stop fitting, each row becomes a card.
   The sparkline goes: at 120px wide it is a smear, and the 24h figure already
   says which way the asset moved. */
@media (max-width: 760px) {
  .market .table-scroll { overflow-x: visible; border: 0; background: none; }
  .market__table { min-width: 0; }
  .market__table thead { display: none; }
  .market__table, .market__table tbody, .market__table tr,
  .market__table th, .market__table td { display: block; }

  .market__table tbody tr {
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: hidden;
  }
  .market__table tbody th {
    padding: var(--space-4);
    background-color: var(--color-surface-sunk);
    border-bottom: 1px solid var(--color-border);
  }
  .market__table tbody td {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    text-align: right;
  }
  .market__table tbody td::before {
    content: attr(data-col);
    text-align: left;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }
  .market__table tbody td:last-child { border-bottom: 0; }
  .market__spark { display: none !important; }
}

/* --- Platforms ------------------------------------------------------------- */

.platforms {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}
.platform .icon-tile { margin-bottom: var(--space-2); }
.platform__name { font-size: var(--text-h4); }
.platform__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }

.platform__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.platform__meta .rating { gap: 1px; }
.platform__meta .tnum { font-weight: var(--weight-bold); color: var(--color-text); }

.platforms__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Not found --------------------------------------------------------------- */

.not-found { display: grid; justify-items: start; gap: var(--space-4); }
.not-found__text { font-size: var(--text-md); color: var(--color-text-muted); max-width: 46ch; }
.not-found__actions { margin-top: var(--space-2); gap: var(--space-4); }

.not-found__links {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  width: 100%;
}
.not-found__links-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}
.not-found__links ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.not-found__links li { font-size: var(--text-sm); color: var(--color-text-muted); }
.not-found__links a {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.not-found__links a:hover { text-decoration-color: currentColor; color: var(--ink-700); }