/* ==========================================================================
   Invenza

   Built to the Invenza product's own design system. Every colour, type step,
   radius, gutter, duration and the easing curve below is the value the product
   uses, and the interface panels on this page are rebuilt from the product's
   own components rather than pasted in as pictures.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* ---- Colour: neutral ramp (ink to surface) --------------------------- */
  --color-ink: #0b0c0e;
  --color-ink-700: #33373c;
  --color-ink-500: #565c64;
  --color-ink-400: #6e757e;
  --color-ink-300: #b2b8c0;
  --color-line-strong: #ced3d9;
  --color-line-muted: #d7dade;
  --color-line: #e3e6ea;
  --color-surface-200: #edeff2;
  --color-surface-100: #f6f7f9;
  --color-surface-50: #fbfcfc;
  --color-surface: #ffffff;

  /* ---- Colour: the hero scrim ------------------------------------------ */
  /* The product's measured value: ink at 0.6, which keeps white text above
     4.5:1 over any pixel of the photograph. One flat fill, never a gradient. */
  --color-hero-scrim: rgb(11 12 14 / 0.6);

  /* ---- Colour: on dark surfaces ---------------------------------------- */
  --color-on-ink: #ffffff;
  --color-on-ink-muted: #b9bec6;
  --color-on-ink-dim: #8d939b;
  --color-ink-line: #33373c;

  /* ---- Colour: semantic ------------------------------------------------ */
  /* The accent is for links and informational emphasis, never for the primary
     action, which is ink. Green means below market or verified, and appears on
     no button. */
  --color-accent: #14429e;
  --color-accent-hover: #0f3178;
  --color-accent-tint: #edf1fb;
  --color-accent-line: #dce4f6;

  --color-positive: #0c6b45;
  --color-positive-tint: #e6f1ec;

  --color-warning: #8a5600;
  --color-warning-tint: #faf0de;

  --color-risk: #a82018;
  --color-risk-tint: #faebe9;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  --text-display: 3.375rem; /* 54 */
  --text-h1: 2rem; /* 32 */
  --text-h2: 1.3125rem; /* 21 */
  --text-h3: 1.0625rem; /* 17 */
  --text-card: 0.9375rem; /* 15 */
  --text-body: 0.875rem; /* 14 */
  --text-data: 0.8125rem; /* 13 */
  --text-meta: 0.75rem; /* 12 */
  --text-label: 0.6875rem; /* 11 */
  --text-micro: 0.625rem; /* 10 */
  --text-wordmark: 1.1875rem; /* 19 */
  --text-price-page: 2.125rem; /* 34 */
  --text-price-card: 1.3125rem; /* 21 */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-xs: 3px; /* badges */
  --radius-sm: 4px; /* chips */
  --radius-md: 5px; /* buttons, inputs */
  --radius-lg: 6px; /* cards, panels */
  --radius-xl: 8px; /* media wells, progress bars */
  --radius-2xl: 10px; /* large surfaces */

  /* ---- Elevation -------------------------------------------------------- */
  /* Rare: a card at rest has a border, never a shadow. */
  --shadow-overlay: 0 2px 10px rgb(11 12 14 / 0.08);

  /* ---- Layout ----------------------------------------------------------- */
  --spacing-gutter: 56px;
  --spacing-gutter-tablet: 32px;
  --spacing-gutter-mobile: 16px;
  --container-page: 1440px;
  --container-prose: 68ch;

  --spacing-header-row: 68px;
  --spacing-header-mobile: 54px;
  --spacing-control: 36px;
  --spacing-card-pad: 18px;

  /* The hero band: top padding twice the gap, and the panel riding up into
     the band by the overlap. */
  --spacing-hero-top: 64px;
  --spacing-hero-gap: 32px;
  --spacing-hero-overlap: 32px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-invenza: cubic-bezier(0.2, 0, 0, 1);
  --duration-control: 120ms;
  --duration-state: 200ms;
  --duration-layer: 320ms;
  --duration-scene: 600ms;
  --duration-hero: 900ms;

  /* ---- Vertical rhythm --------------------------------------------------- */
  /* The homepage's five steps on an 8px base, and no others. */
  --step-2: 16px;
  --step-3: 24px;
  --step-4: 32px;
  --step-6: 48px;
  --step-8: 64px;

  /* How far a sticky stage sits below the header. */
  --stage-top: calc(var(--spacing-header-mobile) + var(--step-3));
}

@media (width >= 768px) {
  :root {
    --spacing-hero-overlap: 112px;
    --stage-top: calc(var(--spacing-header-row) + var(--step-3));
  }
}

@media (width >= 1024px) {
  :root {
    --spacing-hero-overlap: 192px;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--spacing-header-row) + var(--step-2));
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
figcaption,
table {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
  transition: color var(--duration-control) var(--ease-invenza);
}

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

button {
  font: inherit;
  color: inherit;
}

/* Visible focus everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

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

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   3. Type scale
   ========================================================================== */

.t-display {
  font-size: var(--text-h1);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}

@media (width >= 480px) {
  .t-display {
    font-size: 2.75rem;
    line-height: 1.06;
    letter-spacing: -0.03em;
  }
}

@media (width >= 1280px) {
  .t-display {
    font-size: var(--text-display);
    line-height: 1.05;
    letter-spacing: -0.032em;
  }
}

.t-h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.t-card {
  font-size: var(--text-card);
  line-height: 1.33;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.t-data {
  font-size: var(--text-data);
  line-height: 1.5;
}

.t-meta {
  font-size: var(--text-meta);
  line-height: 1.45;
}

.t-label {
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.ink-700 {
  color: var(--color-ink-700);
}

.ink-500 {
  color: var(--color-ink-500);
}

.ink-400 {
  color: var(--color-ink-400);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.page {
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter-mobile);
}

@media (width >= 768px) {
  .page {
    padding-inline: var(--spacing-gutter-tablet);
  }
}

@media (width >= 1280px) {
  .page {
    padding-inline: var(--spacing-gutter);
  }
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--spacing-gutter-mobile);
  top: 0;
  z-index: 60;
  translate: 0 -130%;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--step-2);
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-data);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus {
  translate: 0 0;
  color: var(--color-on-ink);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.site-header > .page {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  height: var(--spacing-header-mobile);
  transition: height var(--duration-state) var(--ease-invenza);
}

@media (width >= 768px) {
  .site-header > .page {
    height: var(--spacing-header-row);
    gap: 20px;
  }

  /* The header tightens once the page has left the top. */
  .site-header.is-stuck > .page {
    height: 56px;
  }
}

@media (width >= 1280px) {
  .site-header > .page {
    gap: 28px;
  }
}

.wordmark {
  position: relative;
  font-size: var(--text-wordmark);
  line-height: 1;
  /* The product sets its lockup in caps at 0.16em. Written in mixed case the
     same tracking reads as a spaced-out word, so the brand keeps the size and
     the weight and takes a tracking that suits the capitalisation. */
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  flex-shrink: 0;
}

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

.wordmark:focus-visible {
  border-radius: var(--radius-xs);
  outline-offset: 4px;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 2px;
}

@media (width >= 1024px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--spacing-control);
  padding-inline: 10px;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duration-control) var(--ease-invenza);
}

.site-nav a:hover {
  background-color: var(--color-surface-100);
  color: var(--color-ink);
}

/* The canvas's own answer to a control drawn under 44px: keep the size, grow
   an invisible hit area around it. */
a.wordmark::after,
.site-nav a::after,
.site-header .btn--sm::after,
.footer__contact a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 100%;
  min-height: 44px;
  translate: 0 -50%;
}

.header-spacer {
  flex: 1;
}

.header-note {
  display: none;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
  white-space: nowrap;
}

@media (width >= 768px) {
  .header-note {
    display: block;
  }
}

/* ==========================================================================
   6. Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-control) var(--ease-invenza),
    border-color var(--duration-control) var(--ease-invenza),
    color var(--duration-control) var(--ease-invenza);
}

.btn--sm {
  position: relative;
  height: var(--spacing-control);
  padding-inline: 14px;
  font-size: var(--text-data);
}

.btn--lg {
  height: 48px;
  padding-inline: 22px;
  font-size: var(--text-body);
}

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

.btn--primary:hover {
  background-color: var(--color-ink-700);
  color: var(--color-on-ink);
}

/* On an ink band the primary action inverts: ink on ink is nothing. It is
   still the neutral ramp, and still not the accent. */
.btn--on-ink {
  background-color: var(--color-on-ink);
  color: var(--color-ink);
}

.btn--on-ink:hover {
  background-color: var(--color-on-ink-muted);
  color: var(--color-ink);
}

.btn--on-ink:focus-visible {
  outline-color: var(--color-on-ink);
}

.link-on-ink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-data);
  font-weight: 500;
  color: var(--color-on-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.5);
  transition: box-shadow var(--duration-control) var(--ease-invenza);
}

.link-on-ink:hover {
  color: var(--color-on-ink);
  box-shadow: inset 0 -1px 0 var(--color-on-ink);
}

.link-on-ink:focus-visible {
  outline-color: var(--color-on-ink);
}

/* ==========================================================================
   7. Badges and chips
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-200);
  color: var(--color-ink-700);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--positive {
  background-color: var(--color-positive-tint);
  color: var(--color-positive);
}

.badge--warning {
  background-color: var(--color-warning-tint);
  color: var(--color-warning);
}

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

.badge--accent {
  background-color: var(--color-accent-tint);
  color: var(--color-accent);
}

.badge--outline {
  background-color: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-700);
}

.badge--on-ink {
  background-color: transparent;
  border: 1px solid var(--color-on-ink-dim);
  color: var(--color-on-ink);
}

.badge--sm {
  height: 20px;
  padding-inline: 6px;
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
}

/* The criterion chip. A solid ink border means the reader set it on a
   control; a dashed border with the note z opisu means it was read out of the
   sentence they wrote. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 10px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-meta);
  font-weight: 500;
  white-space: nowrap;
}

.chip--inferred {
  border: 1.5px dashed var(--color-ink-400);
  background-color: var(--color-surface-100);
  color: var(--color-ink-700);
  font-weight: 400;
}

.chip__field {
  /* The inferred chip stands on surface-100, where ink-400 is 4.35:1. */
  color: var(--color-ink-500);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.chip__note {
  color: var(--color-ink-500);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   8. Scenes and their headings
   ========================================================================== */

.scene {
  padding-block: var(--step-8);
  border-top: 1px solid var(--color-line);
}

@media (width >= 768px) {
  .scene {
    padding-block: 80px;
  }
}

.scene--quiet {
  background-color: var(--color-surface-100);
}

.scene--flush {
  border-top: 0;
}

.sh {
  margin-bottom: var(--step-4);
  max-width: 760px;
}

.sh__eyebrow {
  margin-bottom: var(--step-2);
  color: var(--color-ink-500);
}

.sh h2 {
  font-size: var(--text-h1);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.sh p {
  margin-top: var(--step-2);
  color: var(--color-ink-700);
  line-height: 1.6;
  max-width: var(--container-prose);
}

@media (width >= 480px) {
  .sh p {
    font-size: 15px;
  }
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.hero {
  position: relative;
  border-bottom: 1px solid var(--color-line);
}

.hero__band {
  position: relative;
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background-color: var(--color-ink);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One flat scrim at one opacity. Never a gradient. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-hero-scrim);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
  padding-top: var(--spacing-hero-top);
  padding-bottom: calc(var(--spacing-hero-overlap) + var(--spacing-hero-gap));
}

@media (width >= 1024px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}

.hero__text {
  min-width: 0;
}

@media (width >= 1024px) {
  .hero__text {
    flex: 1;
  }
}

.hero h1 {
  color: var(--color-on-ink);
  max-width: 16ch;
}

.hero__lede {
  margin-top: var(--step-2);
  max-width: 540px;
  color: var(--color-on-ink);
  line-height: 1.6;
}

@media (width >= 480px) {
  .hero__lede {
    font-size: 15px;
  }
}

.hero__status {
  margin-bottom: var(--step-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2) var(--step-3);
  margin-top: var(--step-3);
}

.hero__card {
  min-width: 0;
  display: flex;
  justify-content: center;
}

@media (width >= 1024px) {
  .hero__card {
    flex: 1;
    justify-content: flex-end;
  }
}

/* The offer card in the product's own slide treatment: a 2px on-ink frame. */
.offer {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-on-ink);
}

.offer img {
  width: 100%;
}

/* The horizon: the hairline at the bottom edge of the band's content, pulled
   back up through the padding that makes room for the panel's overlap. */
.hero__rule {
  position: relative;
  top: calc(-1 * (var(--spacing-hero-overlap) + var(--spacing-hero-gap)));
  height: 1px;
  background-color: rgb(255 255 255 / 0.24);
  transform-origin: left center;
}

/* ---- The search panel riding up into the band ------------------------- */

.hero__panel {
  position: relative;
  margin-top: calc(-1 * var(--spacing-hero-overlap));
}

.panel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.panel__tabs {
  position: relative;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-line);
  scrollbar-width: none;
}

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

.panel__tab {
  flex-shrink: 0;
  height: 50px;
  padding-inline: 16px;
  border: 0;
  background: none;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-ink-500);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-control) var(--ease-invenza);
}

@media (width >= 640px) {
  .panel__tab {
    padding-inline: 24px;
  }
}

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

.panel__tab[aria-selected="true"] {
  color: var(--color-ink);
  font-weight: 600;
}

.panel__tab:focus-visible {
  outline-offset: -2px;
}

/* The full Polish labels need the desktop width; below it the tab keeps the
   one word the product's mobile home draws. */
.tab-full {
  display: none;
}

@media (width >= 1024px) {
  .tab-short {
    display: none;
  }

  .tab-full {
    display: inline;
  }
}

.panel__marker {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-ink);
  transition:
    translate var(--duration-state) var(--ease-invenza),
    width var(--duration-state) var(--ease-invenza);
}

.panel__body {
  padding: 16px;
}

@media (width >= 640px) {
  .panel__body {
    padding: 18px 20px 20px;
  }
}

.search-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (width >= 640px) {
  .search-row {
    flex-direction: row;
  }
}

.search-field {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding-inline: 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  transition: border-color var(--duration-control) var(--ease-invenza);
}

.search-field.is-typing {
  border-color: var(--color-ink);
}

.search-field svg {
  flex-shrink: 0;
  color: var(--color-ink);
}

.search-field__text {
  min-width: 0;
  flex: 1;
  color: var(--color-ink);
  font-size: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A drawn caret, so the demonstration reads as typing without being a field
   the reader can put a cursor into and find nothing behind. */
.caret {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  translate: 0 2px;
  background-color: var(--color-ink);
}

.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  padding-inline: 28px;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: default;
}

.criteria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 28px;
}

.criteria__lead {
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

/* is-demo is set by the script at the moment it starts typing, so a chip is
   never left invisible by an observer that did not fire. */
.criteria.is-demo .chip {
  opacity: 0;
  translate: 0 4px;
}

.criteria.is-demo .chip.is-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-state) var(--ease-invenza),
    translate var(--duration-state) var(--ease-invenza);
}

/* ==========================================================================
   10. The journey strip
   ========================================================================== */

.journey {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journey__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    border-color var(--duration-control) var(--ease-invenza),
    background-color var(--duration-control) var(--ease-invenza);
}

a.journey__step:hover {
  border-color: var(--color-ink);
  background-color: var(--color-surface-100);
  color: var(--color-ink);
}

.journey__pl {
  font-size: var(--text-card);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.journey__en {
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

/* ==========================================================================
   11. The interface kit

   These are the product's own panels rebuilt in markup, so the type is real
   type at the product's own sizes rather than an image of it.
   ========================================================================== */

.ui {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: var(--spacing-card-pad);
}

.ui__label {
  color: var(--color-ink-400);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.ui__foot {
  margin-top: var(--step-2);
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-400);
  font-size: var(--text-meta);
  line-height: 1.5;
}

.ui__rule {
  height: 1px;
  margin-block: 14px;
  background-color: var(--color-line);
}

/* A stage holds one or more panels and gives the focus ring something to be
   positioned inside. */
.stage {
  position: relative;
}

.stage__grid {
  display: grid;
  gap: var(--step-2);
}

@media (width >= 1024px) {
  .stage__grid--check {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .stage__grid--check > [data-panel="score"] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

.stage__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
  color: var(--color-ink-500);
  font-size: var(--text-meta);
}

.stage__foot b {
  color: var(--color-ink-700);
  font-weight: 600;
}

/* ---- Score ------------------------------------------------------------- */

.score__head {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  margin-top: 12px;
}

.score__ring {
  flex-shrink: 0;
}

.score__ring circle {
  fill: none;
  stroke-width: 7;
}

.score__ring .score__track {
  stroke: var(--color-surface-200);
}

.score__ring .score__fill {
  stroke: var(--color-ink);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-len, 195) 195;
  stroke-dashoffset: 0;
}

.js .score__ring .score__fill {
  --ring-len: 0;
}

.js .is-in .score__ring .score__fill {
  --ring-len: 169.5; /* 87 of 100 at r=31 */
  transition: stroke-dasharray var(--duration-scene) var(--ease-invenza);
}

.score__ring text {
  fill: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  text-anchor: middle;
}

.score__lede {
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.55;
}

.score__lede strong {
  color: var(--color-ink);
  font-weight: 600;
}

.conf {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
  line-height: 1.5;
}

.conf__dots {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
  translate: 0 -1px;
}

.conf__dots i {
  width: 3px;
  height: 9px;
  border-radius: 1px;
  background-color: var(--color-ink-300);
}

.conf__dots i.is-on {
  background-color: var(--color-ink-500);
}

.score__list {
  display: grid;
  gap: 10px;
  margin-top: var(--step-2);
}

.score__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.score__line {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 30px 34px;
  gap: 10px;
  align-items: center;
}

.score__name {
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.25;
}

.score__val {
  text-align: right;
  font-size: var(--text-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score__weight {
  text-align: right;
  color: var(--color-ink-400);
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score__note {
  grid-column: 1 / -1;
  padding-left: 122px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
  line-height: 1.5;
}

@media (width < 640px) {
  .score__line {
    grid-template-columns: 96px minmax(0, 1fr) 26px 30px;
    gap: 8px;
  }

  .score__note {
    padding-left: 0;
  }
}

/* The product's own bar: a 6px track with an ink fill. */
.bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-200);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--radius-xl);
  background-color: var(--color-ink);
}

.js .bar > i {
  width: 0;
}

.js .is-in .bar > i {
  width: var(--w, 0%);
  transition: width var(--duration-scene) var(--ease-invenza);
  transition-delay: var(--bar-delay, 0ms);
}

/* ---- Price position ---------------------------------------------------- */

.price__verdict {
  margin-top: 6px;
  color: var(--color-positive);
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.price__lede {
  margin-top: 4px;
  color: var(--color-ink-700);
  font-size: var(--text-data);
}

.price__lede strong {
  color: var(--color-ink);
  font-weight: 600;
}

.factors {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.factor {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  font-size: var(--text-data);
}

.factor__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  translate: 0 -2px;
}

.factor__dot--up {
  background-color: var(--color-positive);
}

.factor__dot--down {
  background-color: var(--color-risk);
}

.factor__sub {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-500);
  font-size: var(--text-meta);
  font-weight: 600;
}

.factor__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.factor__amount--up {
  color: var(--color-positive);
}

.factor__amount--down {
  color: var(--color-risk);
}

/* The price history: a drawn step, and the figures beside it. */
.history__chart {
  height: 54px;
  margin-top: 10px;
  border-top: 2px solid var(--color-positive);
  border-right: 2px solid var(--color-positive);
}

.history__rows {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.history__row {
  display: grid;
  grid-template-columns: 96px auto auto;
  gap: 10px;
  font-size: var(--text-data);
}

.history__row b,
.history__delta {
  font-variant-numeric: tabular-nums;
}

.history__row span:first-child {
  color: var(--color-ink-400);
}

.history__row b {
  font-weight: 600;
}

.history__delta {
  color: var(--color-positive);
  font-weight: 600;
}

/* ---- Red flags --------------------------------------------------------- */

.ui--flags {
  background-color: var(--color-warning-tint);
}

.ui--flags .ui__label {
  color: var(--color-warning);
}

.flags {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.flag {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
}

.flag__icon {
  margin-top: 3px;
  color: var(--color-warning);
}

.flag__title {
  font-size: var(--text-data);
  font-weight: 600;
}

.flag__severity {
  margin-left: 8px;
  color: var(--color-warning);
  font-size: var(--text-label);
  font-weight: 500;
}

.flag__body {
  margin-top: 4px;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  line-height: 1.55;
}

.flag__action {
  margin-top: 4px;
  color: var(--color-ink);
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: 1.55;
}

/* ---- Landed cost ------------------------------------------------------- */

.ui--landed {
  padding: 0;
  overflow: hidden;
}

.landed__head {
  padding: var(--spacing-card-pad);
  background-color: var(--color-ink);
  color: var(--color-on-ink);
}

.landed__head .ui__label {
  color: var(--color-on-ink-dim);
}

.landed__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--text-price-page);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.landed__note {
  margin-top: 8px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-data);
}

.landed__range {
  position: relative;
  height: 6px;
  margin-top: 14px;
  border-radius: var(--radius-xl);
  background-color: var(--color-ink-line);
  overflow: hidden;
}

.landed__range i {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--w, 0%);
  background-color: var(--color-on-ink);
}

.js .landed__range i {
  width: 0;
}

.js .is-in .landed__range i {
  width: var(--w, 0%);
  transition: width var(--duration-scene) var(--ease-invenza);
}

.landed__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at, 50%);
  width: 2px;
  background-color: var(--color-positive);
}

.landed__scale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 8px;
  color: var(--color-on-ink-dim);
  font-size: var(--text-meta);
}

.landed__scale b {
  color: var(--color-on-ink);
  font-weight: 600;
}

.landed__scale span:last-child {
  text-align: right;
}

.landed__body {
  padding: var(--spacing-card-pad);
}

.cost__group {
  margin-top: 14px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-100);
  color: var(--color-ink-500);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.cost__group:first-of-type {
  margin-top: 12px;
}

.cost__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-line);
}

.cost__row:last-child {
  border-bottom: 0;
}

.cost__name {
  font-size: var(--text-data);
}

.cost__sub {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.cost__value {
  font-size: var(--text-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cost__row--muted .cost__name,
.cost__row--muted .cost__value {
  color: var(--color-ink-400);
  font-weight: 400;
}

.cost__row--sum .cost__name {
  color: var(--color-ink-400);
}

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

.importers {
  display: grid;
  gap: var(--step-2);
}

@media (width >= 768px) {
  .importers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.imp--picked {
  border-color: var(--color-ink);
}

.imp__head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.imp__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-100);
  color: var(--color-ink-500);
  font-size: var(--text-meta);
  font-weight: 600;
}

.imp__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-card);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.imp__terms {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.imp__figures {
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.imp__conf {
  margin-top: 8px;
}

.imp__total {
  font-size: var(--text-price-card);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.imp__range {
  margin-top: 2px;
  color: var(--color-ink-500);
  font-size: var(--text-meta);
}

.imp__ticks {
  display: grid;
  gap: 6px;
}

.imp__tick {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: var(--text-data);
}

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

.imp__tick--on svg {
  color: var(--color-positive);
}

.imp__tick--off {
  color: var(--color-ink-400);
}

.imp__note {
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  line-height: 1.55;
}

/* ---- Import stages ----------------------------------------------------- */

.stages {
  display: grid;
}

.stage-row {
  display: grid;
  grid-template-columns: 92px 18px minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--color-line);
}

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

@media (width < 640px) {
  .stage-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .stage-row__when {
    grid-column: 1 / -1;
  }
}

.stage-row__when {
  color: var(--color-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.stage-row__when span {
  display: block;
  margin-top: 1px;
  color: var(--color-ink-400);
  font-weight: 400;
}

.stage-row__dot {
  position: relative;
  display: grid;
  place-items: start center;
}

.stage-row__dot i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-on-ink);
}

.stage-row__dot i.is-current {
  background-color: var(--color-surface);
  border: 2px solid var(--color-ink);
}

.stage-row__dot i.is-current::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-ink);
}

.stage-row__dot::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: -14px;
  width: 1.5px;
  background-color: var(--color-ink);
}

.stage-row:last-child .stage-row__dot::after {
  display: none;
}

.stage-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-data);
  font-weight: 600;
}

.stage-row__body {
  margin-top: 5px;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  line-height: 1.55;
}

.stage-row__late {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgb(138 86 0 / 0.25);
  border-radius: var(--radius-sm);
  background-color: var(--color-warning-tint);
}

.stage-row__late b {
  display: block;
  color: var(--color-warning);
  font-size: var(--text-meta);
  font-weight: 600;
}

.stage-row__late span {
  display: block;
  margin-top: 3px;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  line-height: 1.55;
}

.stage-row__doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  font-weight: 500;
}

/* ---- Compare ----------------------------------------------------------- */

.cmp {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
}

.cmp__cars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-line);
}

@media (width < 768px) {
  .cmp__cars {
    grid-template-columns: 1fr;
  }
}

.cmp__car {
  padding: 14px var(--spacing-card-pad);
  border-left: 1px solid var(--color-line);
}

.cmp__car:first-child {
  border-left: 0;
}

@media (width < 768px) {
  .cmp__car {
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }

  .cmp__car:first-child {
    border-top: 0;
  }
}

.cmp__name {
  font-size: var(--text-card);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cmp__spec {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.cmp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.cmp__price b {
  font-size: var(--text-price-card);
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cmp__price b.is-below {
  color: var(--color-positive);
}

.cmp__price span {
  color: var(--color-ink-500);
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.cmp__for {
  margin-top: 10px;
}

.cmp__wins {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--color-ink-500);
  font-size: var(--text-meta);
}

.cmp__wins b {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cmp__table {
  width: 100%;
  border-collapse: collapse;
}

.cmp__table caption {
  padding: 12px var(--spacing-card-pad);
  color: var(--color-ink-500);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
}

.cmp__table th,
.cmp__table td {
  padding: 12px var(--spacing-card-pad);
  border-top: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.cmp__table th {
  width: 190px;
  color: var(--color-ink-700);
  font-size: var(--text-data);
  font-weight: 400;
}

.cmp__table td {
  border-left: 1px solid var(--color-line);
}

.cmp__table td.is-best {
  background-color: var(--color-surface-100);
}

.cmp__figure {
  display: block;
  font-size: var(--text-data);
  font-weight: 600;
}

.cmp__sub {
  display: block;
  margin-top: 3px;
  /* A winning cell is tinted surface-100, where ink-400 is 4.35:1. */
  color: var(--color-ink-500);
  font-size: var(--text-meta);
}

.cmp__badge {
  margin-top: 5px;
}

@media (width < 768px) {
  .cmp__table,
  .cmp__table tbody,
  .cmp__table tr {
    display: block;
  }

  .cmp__table th,
  .cmp__table td {
    display: block;
    width: auto;
    border-left: 0;
  }

  .cmp__table td {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 8px;
  }
}

/* ---- Describe: criteria and a reasoned result -------------------------- */

.crit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.crit__head p:first-child {
  font-size: var(--text-data);
  font-weight: 600;
}

.crit__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.crit__legend i {
  width: 22px;
  height: 14px;
  border: 1.5px dashed var(--color-ink-400);
  border-radius: var(--radius-sm);
}

.crit__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.crit__missed {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.55;
}

.crit__missed b {
  font-weight: 600;
}

.crit__count {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-700);
  font-size: var(--text-data);
}

.crit__count b {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result {
  display: grid;
  gap: var(--step-2);
  padding: 0;
  overflow: hidden;
}

@media (width >= 1024px) {
  .result {
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 0;
  }
}

.result__main {
  padding: var(--spacing-card-pad);
}

.result__rank {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  border-radius: var(--radius-xs);
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.result__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: var(--text-h3);
  letter-spacing: -0.015em;
  font-weight: 600;
}

.result__title span {
  color: var(--color-ink-400);
  font-size: var(--text-data);
  font-weight: 400;
}

.result__specs {
  margin-top: 4px;
  color: var(--color-ink-700);
  font-size: var(--text-data);
}

.result__seller {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.result__why {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}

.reasons {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.reasons li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.5;
}

.reasons svg {
  color: var(--color-ink-500);
}

.result__side {
  padding: var(--spacing-card-pad);
  border-top: 1px solid var(--color-line);
  background-color: var(--color-surface-50);
}

@media (width >= 1024px) {
  .result__side {
    border-top: 0;
    border-left: 1px solid var(--color-line);
  }
}

.result__price {
  font-size: var(--text-price-card);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result__finance {
  margin-top: 10px;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  line-height: 1.6;
}

.result__match {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.result__match b {
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.match__rows {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.match__row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 26px;
  gap: 8px;
  align-items: center;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
}

.match__row b {
  text-align: right;
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Account: attention, running costs, selling ------------------------ */

.attn {
  display: grid;
  gap: 10px;
}

.attn__card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: var(--spacing-card-pad);
}

.attn__card--lead {
  border-top: 2px solid var(--color-ink);
}

.attn__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.attn__when {
  margin-left: auto;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.attn__title {
  margin-top: 10px;
  font-size: var(--text-h3);
  letter-spacing: -0.015em;
  font-weight: 600;
}

.attn__body {
  margin-top: 4px;
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.55;
}

.attn__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.attn__link {
  color: var(--color-ink-700);
  font-size: var(--text-data);
  text-decoration: underline;
}

.attn__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 12px var(--spacing-card-pad);
}

.attn__row p:first-child {
  font-size: var(--text-data);
  font-weight: 600;
}

.attn__row p:nth-child(2) {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.costs {
  width: 100%;
  border-collapse: collapse;
}

.costs th,
.costs td {
  padding: 11px var(--spacing-card-pad);
  border-top: 1px solid var(--color-line);
  text-align: right;
  vertical-align: top;
  font-size: var(--text-data);
}

.costs tbody td,
.costs tfoot td {
  font-variant-numeric: tabular-nums;
}

.costs thead th {
  border-top: 0;
  color: var(--color-ink-400);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.costs th:first-child,
.costs td:first-child {
  text-align: left;
}

.costs tbody th {
  font-weight: 600;
}

.costs tbody th span {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
  font-weight: 400;
}

.costs .delta--over {
  color: var(--color-warning);
  font-weight: 600;
}

.costs .delta--under {
  color: var(--color-positive);
  font-weight: 600;
}

.costs .is-missing {
  color: var(--color-ink-400);
}

.costs tfoot th,
.costs tfoot td {
  border-top: 1px solid var(--color-ink);
  font-weight: 600;
}

.costs tfoot th span {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-700);
  font-size: var(--text-meta);
  font-weight: 600;
}

@media (width < 768px) {
  .costs,
  .costs thead,
  .costs tbody,
  .costs tfoot,
  .costs tr,
  .costs th,
  .costs td {
    display: block;
  }

  .costs thead {
    display: none;
  }

  .costs tbody tr,
  .costs tfoot tr {
    padding: 12px var(--spacing-card-pad);
    border-top: 1px solid var(--color-line);
  }

  .costs tfoot tr {
    border-top: 1px solid var(--color-ink);
  }

  .costs th,
  .costs td {
    padding: 0;
    border-top: 0;
  }

  .costs td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    font-size: var(--text-meta);
  }

  /* The column heading travels with the figure once the columns are gone. */
  .costs td::before {
    content: attr(data-label);
    color: var(--color-ink-400);
    font-variant-numeric: normal;
  }
}

.steps {
  display: grid;
  gap: 10px;
}

@media (width >= 768px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.step-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-right: var(--step-2);
}

.step-item__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-meta);
  font-weight: 600;
}

.step-item__mark--now {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}

.step-item__mark--todo {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-line-strong);
  color: var(--color-ink-400);
}

.step-item__name {
  font-size: var(--text-data);
  font-weight: 600;
}

.step-item--todo .step-item__name {
  color: var(--color-ink-400);
}

.step-item__note {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.answers {
  display: grid;
}

.answer {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-top: 1px solid var(--color-line);
}

.answer:first-child {
  border-top: 0;
}

.answer__q {
  font-size: var(--text-data);
  font-weight: 600;
}

.answer__hint {
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.answer__pair {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

@media (width >= 768px) {
  .answer__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-3);
  }
}

.answer__mine {
  font-size: var(--text-data);
}

.answer__mine span {
  color: var(--color-ink-400);
  font-size: var(--text-meta);
}

.answer__register {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: var(--color-positive);
  font-size: var(--text-data);
}

.answer__register--none {
  color: var(--color-ink-400);
}

/* ==========================================================================
   12. Sticky scenes

   Without the script this is a plain stack: the stage sits under its text and
   the stops read as a list.
   ========================================================================== */

.sticky__stage {
  display: grid;
  gap: var(--step-4);
}

.stop {
  padding-block: var(--step-3);
  border-top: 1px solid var(--color-line);
}

.stop:first-child {
  border-top: 1px solid var(--color-ink);
}

.stop h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.stop p {
  margin-top: 6px;
  max-width: var(--container-prose);
  color: var(--color-ink-700);
  font-size: var(--text-data);
  line-height: 1.6;
}

.stop__pl {
  color: var(--color-ink-500);
  font-size: var(--text-meta);
  font-weight: 500;
}

@media (width >= 1024px) {
  .js .sticky {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--step-8);
    align-items: start;
  }

  .js .sticky__rail {
    display: grid;
    /* The rail is what the stage is sticky inside, so it has to outlast the
       last stop: without this the stage unsticks while the reader is still
       reading, because the container ends before the pinned panel does. */
    padding-bottom: 18vh;
  }

  /* Each stop is a screenful of travel, which is what drives the stage. */
  .js .sticky__rail .stop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
    padding-block: 0;
    border-top: 0;
    opacity: 0.4;
    transition: opacity var(--duration-scene) var(--ease-invenza);
  }

  .js .sticky__rail .stop.is-on {
    opacity: 1;
  }

  .js .sticky__stage {
    position: sticky;
    top: var(--stage-top);
    display: block;
    /* Scaled by the script to whatever is left under the header, so a short
       window never unsticks the panel. Transform keeps the type crisp. */
    transform: scale(var(--fit, 1));
    transform-origin: top center;
  }

  /* The cross-fading stage stacks its panels into one cell. */
  .js .sticky__stage--swap .stage__grid {
    display: grid;
  }

  .js .sticky__stage--swap .stage__grid {
    position: relative;
  }

  .js .sticky__stage--swap .shot {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    translate: 0 10px;
    pointer-events: none;
    transition:
      opacity var(--duration-scene) var(--ease-invenza),
      translate var(--duration-scene) var(--ease-invenza);
  }

  .js .sticky__stage--swap .shot.is-on {
    position: relative;
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
}

/* A progress rail above the stops, so the reader can see where in the scene
   they are. It is an affordance, not a figure. */
.rail-progress {
  display: none;
}

@media (width >= 1024px) {
  .js .rail-progress {
    position: sticky;
    top: var(--stage-top);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 0;
  }
}

.rail-progress__track {
  position: relative;
  width: 72px;
  height: 2px;
  background-color: var(--color-line-strong);
  overflow: hidden;
}

.rail-progress__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--progress, 33%);
  background-color: var(--color-ink);
  transition: width var(--duration-scene) var(--ease-invenza);
}

.rail-progress__label {
  color: var(--color-ink-500);
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

/* The focus ring that travels to the panel being described. An outline over
   the stage, never a tint on the panel. */
.ring {
  display: none;
}

@media (width >= 1024px) {
  .js .ring {
    display: block;
    position: absolute;
    left: var(--ring-l, 0);
    top: var(--ring-t, 0);
    width: var(--ring-w, 0);
    height: var(--ring-h, 0);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 9999px rgb(246 247 249 / 0.66);
    pointer-events: none;
    opacity: 0;
    transition:
      left var(--duration-scene) var(--ease-invenza),
      top var(--duration-scene) var(--ease-invenza),
      width var(--duration-scene) var(--ease-invenza),
      height var(--duration-scene) var(--ease-invenza),
      opacity var(--duration-state) var(--ease-invenza);
  }

  .js .ring.is-on {
    opacity: 1;
  }
}

/* ==========================================================================
   13. Principles
   ========================================================================== */

.rows {
  border-top: 1px solid var(--color-ink);
}

.row {
  display: grid;
  gap: 6px;
  padding-block: var(--step-3);
  border-bottom: 1px solid var(--color-line);
}

@media (width >= 768px) {
  .row {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--step-4);
    align-items: baseline;
  }
}

@media (width >= 1280px) {
  .row {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

.row h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.row p {
  color: var(--color-ink-700);
  line-height: 1.6;
  max-width: var(--container-prose);
}

/* ==========================================================================
   14. The closing band
   ========================================================================== */

.closing {
  position: relative;
  isolation: isolate;
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  overflow: hidden;
}

.closing__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.closing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-hero-scrim);
}

.closing > .page {
  padding-block: 80px;
}

@media (width >= 768px) {
  .closing > .page {
    padding-block: 104px;
  }
}

.closing h2 {
  max-width: 18ch;
  color: var(--color-on-ink);
}

.closing p {
  margin-top: var(--step-2);
  max-width: 54ch;
  color: var(--color-on-ink);
  line-height: 1.6;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2) var(--step-3);
  margin-top: var(--step-4);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-ink);
  color: var(--color-on-ink-muted);
  border-top: 1px solid var(--color-ink-line);
}

.site-footer > .page {
  padding-block: var(--step-6) var(--step-4);
}

@media (width >= 768px) {
  .site-footer > .page {
    padding-top: 56px;
  }
}

.footer__top {
  display: grid;
  gap: var(--step-4);
}

@media (width >= 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--step-8);
    align-items: start;
  }
}

.footer__blurb {
  margin-top: var(--step-2);
  max-width: 46ch;
  font-size: var(--text-data);
  line-height: 1.55;
  color: var(--color-on-ink-muted);
}

.footer__contact dt {
  color: var(--color-on-ink-dim);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}

.footer__contact dd {
  margin-top: 6px;
  font-size: var(--text-data);
}

.footer__contact dd + dt {
  margin-top: var(--step-2);
}

.footer__contact a {
  position: relative;
  display: inline-block;
  color: var(--color-on-ink-muted);
}

.site-footer a:hover {
  color: var(--color-on-ink);
}

.site-footer a:focus-visible {
  outline-color: var(--color-on-ink);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--step-3);
  margin-top: var(--step-6);
  padding-top: var(--step-3);
  border-top: 1px solid var(--color-ink-line);
  color: var(--color-on-ink-dim);
  font-size: var(--text-meta);
}

/* ==========================================================================
   16. Motion

   One curve. Nothing loops, nothing pulses, no figure is animated, and every
   sequence below is off under prefers-reduced-motion with its final state on
   the first frame.
   ========================================================================== */

/* The hero reveal. The opening frames are held by `is-armed`, which the
   script sets before paint, so nothing flashes at its final position first. */
.is-armed .hero__photo {
  scale: 1.04;
  opacity: 0.55;
}

.is-armed .hero__card {
  opacity: 0;
  translate: 0 12px;
}

.is-armed .hero__rule {
  scale: 0 1;
}

.hero.is-revealing .hero__photo {
  scale: 1;
  opacity: 1;
  transition:
    scale var(--duration-hero) var(--ease-invenza),
    opacity var(--duration-hero) var(--ease-invenza);
}

.hero.is-revealing .hero__card {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-hero) var(--ease-invenza),
    translate var(--duration-hero) var(--ease-invenza);
}

.hero.is-revealing .hero__rule {
  scale: 1 1;
  transition: scale var(--duration-hero) var(--ease-invenza);
}

/* Text rises 12px into place, once, when first seen. */
.js .reveal {
  opacity: 0;
  translate: 0 12px;
}

.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-layer) var(--ease-invenza),
    translate var(--duration-layer) var(--ease-invenza);
  transition-delay: var(--reveal-delay, 0ms);
}

/* A panel arrives with a clip that opens and a scale that settles. 24px of
   travel, the brief's upper bound. */
.js .reveal-shot {
  opacity: 0;
  translate: 0 24px;
  scale: 1.012;
  clip-path: inset(5% 0 0 0 round 6px);
}

.js .reveal-shot.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0 0 0 0 round 6px);
  transition:
    opacity var(--duration-scene) var(--ease-invenza),
    translate var(--duration-scene) var(--ease-invenza),
    scale var(--duration-scene) var(--ease-invenza),
    clip-path var(--duration-scene) var(--ease-invenza);
  transition-delay: var(--reveal-delay, 0ms);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .is-armed .hero__photo,
  .is-armed .hero__card,
  .is-armed .hero__rule {
    scale: 1;
    opacity: 1;
    translate: 0 0;
  }

  .js .reveal,
  .js .reveal-shot {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    clip-path: none;
  }

  .criteria.is-demo .chip {
    opacity: 1;
    translate: 0 0;
  }

  /* The drawn figures are shown at their value rather than drawn to it. */
  .js .bar > i {
    width: var(--w, 0%);
  }

  .js .score__ring .score__fill {
    --ring-len: 169.5;
  }

  .js .landed__range i {
    width: var(--w, 0%);
  }

  .js .sticky__rail .stop {
    opacity: 1;
  }
}

/* ==========================================================================
   17. Utilities
   ========================================================================== */

.stack-3 {
  display: grid;
  gap: var(--step-3);
}

.stack-4 {
  display: grid;
  gap: var(--step-4);
}

/* A grid item is min-width:auto by default, so one wide table inside the
   stack widens every sibling with it. */
.stack-3 > *,
.stack-4 > *,
.importers > * {
  min-width: 0;
}

.mt-3 {
  margin-top: var(--step-3);
}

.mt-4 {
  margin-top: var(--step-4);
}

/* Meta text sitting directly on a quiet section is on surface-100, where
   ink-400 falls to 4.35:1. Inside a panel the surface is white and ink-400
   is correct, so the rule stops at the panel's edge. */
.scene--quiet > .page .ink-400:not(.ui *):not(.cmp *) {
  color: var(--color-ink-500);
}