/* Self-hosted webfont. font-display: swap avoids invisible text; the
   primary weight (700) is preloaded from the layout head. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2");
}

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

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

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  z-index: 100;
}

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

:focus-visible {
  outline: var(--focus-ring) solid var(--color-ink);
  outline-offset: 2px;
}

/* On ink surfaces the focus ring is paper (ink on ink would vanish). */
.band-ink :focus-visible {
  outline-color: var(--color-paper);
}

/* ---------- Layout primitives ---------- */

main {
  padding-block: 0;
  overflow-x: clip;
}

/* .container: 1280 content measure, centered; margins 20 / 40 / 80 by
   breakpoint, so wide screens add paper, never width. .wrap is the older
   name for the same thing and stays an alias for pages not yet rebuilt. */
.container,
.wrap {
  width: 100%;
  max-width: calc(var(--measure-page) + 2 * var(--margin-page));
  margin-inline: auto;
  padding-inline: var(--margin-page);
}

p,
li {
  max-width: var(--measure);
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-hero);
}

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: var(--space-48);
}

.section h2,
.h2 {
  font-size: var(--font-size-h2);
  margin-block: 0 var(--space-24);
}

:where(.section) h3,
.h3 {
  font-size: var(--font-size-h3);
}

.lede,
.lead {
  font-size: var(--font-size-lead);
  line-height: 1.4;
  color: var(--color-ink);
}

/* Small text never drops below 15px; notes (legal-style) are 13px, ink-70. */
.small {
  font-size: var(--font-size-small);
  color: var(--color-ink-70);
}

.note {
  font-size: var(--font-size-note);
  color: var(--color-ink-70);
}

.band-ink .small,
.band-ink .note {
  color: var(--color-paper);
}

/* ---------- The one red pen underline ----------
   BRAND_SYSTEM.md: one red underline per page. Wrap a single hero phrase in
   <span class="pen-underline">. Do not use it twice on a page. */
.pen-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-red-pen);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* ---------- Links ---------- */
.prose a,
.text-link {
  color: var(--color-ink);
  font-weight: 500; /* Figma Link: 16px Medium */
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--color-red-pen);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.prose a:hover,
.text-link:hover {
  text-decoration-thickness: 4px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
}

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-32);
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.cta--primary {
  background: var(--color-red-pen);
  border-color: var(--color-red-pen);
  color: var(--color-white);
}

.cta--primary:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.cta--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.cta--secondary:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.band-ink .cta--primary:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.band-ink .cta--secondary {
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.band-ink .cta--secondary:hover {
  background: var(--color-paper);
  color: var(--color-ink);
}

@media (max-width: 47.999em) {
  .actions .cta {
    width: 100%;
  }
}

/* Quiet route to a person: an ink text link, never a third button. */
.talk-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-size-button);
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-red-pen);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.talk-link:hover {
  text-decoration-thickness: 4px;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--color-rule);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  /* 81px while the 41px icon shows so it sits on a whole pixel (logo snapshot); 80px otherwise. */
  min-height: 5.0625rem;
}

@media (min-width: 30em) {
  .site-header__bar {
    min-height: 5rem;
  }
}

.brand-mark {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
}

/* CLAUDE.md 5.1: at least a 44px-high hit area for the wordmark link, without changing the
   wordmark's drawn size, the link's layout box or the logo lockup visual baselines. The
   transparent pseudo-element belongs to the link, so a tap on it follows the link. */
.brand-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* The full wordmark shows at every width so the company name is always visible
   (the icon alone, used below 30em before, carried no name). */
.brand-mark__horizontal {
  display: block;
  width: 166px;
  height: 32px;
}

@media (min-width: 30em) {
  .brand-mark__horizontal {
    width: 208px;
    height: 40px;
  }
}

.site-nav,
.site-actions {
  display: none;
}

@media (min-width: 80em) {
  .site-nav {
    display: block;
    /* Figma Header/Wide: the bar is space-between, so the nav sits centred between the wordmark and the actions. */
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-actions {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-shrink: 0;
  }

  .site-actions .talk-link {
    font-size: var(--font-size-small);
  }

  .site-actions .cta {
    padding-inline: var(--space-24);
  }
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--space-4) 28px;
}

.site-nav__list li {
  max-width: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  font-weight: 500; /* Figma Header/Wide: 16px Medium */
  font-size: 1rem;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover {
  border-bottom-color: var(--color-red-pen);
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--color-ink);
}

/* Native <details> menu under 1280px: works without JavaScript. */
.site-menu {
  flex-shrink: 0;
}

@media (min-width: 80em) {
  .site-menu {
    display: none;
  }
}

.site-menu__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-24);
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  font-size: var(--font-size-button);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.site-menu__button::-webkit-details-marker {
  display: none;
}

.site-menu[open] .site-menu__button {
  background: var(--color-ink);
  color: var(--color-paper);
}

.site-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  background: var(--color-paper);
  border-bottom: 2px solid var(--color-ink);
  padding: var(--space-16) var(--margin-page) var(--space-32);
}

.site-menu__list {
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
}

.site-menu__list li {
  max-width: none;
  border-bottom: 1px solid var(--color-rule);
}

.site-menu__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.site-menu__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.site-menu__more {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);
}

.site-menu__more .cta {
  width: 100%;
}

.site-menu__more .talk-link {
  align-self: flex-start;
}

.site-menu__email {
  font-size: var(--font-size-button);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* ---------- Footer: an ink band, paper text (paper on ink is AA, tokens.test.js) ---------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-64) var(--space-32);
  font-size: var(--font-size-small);
}

.site-footer :focus-visible {
  outline-color: var(--color-paper);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-48) var(--gutter);
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .site-footer__identity {
    grid-column: 1 / span 5;
  }

  .site-footer__nav {
    /* Seven columns so the 16px email address fits on one line (Figma Footer/Wide). */
    grid-column: 6 / span 7;
  }
}

.site-footer__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.site-footer__mark {
  width: 208px;
  height: 40px;
}

.site-footer__line {
  margin: 0;
  max-width: 28rem;
  font-size: var(--font-size-body); /* Figma Footer: 18px Regular, rule colour */
  color: var(--color-rule);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-32) var(--gutter);
}

@media (min-width: 40em) {
  .site-footer__nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__heading {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-small);
  font-weight: 400; /* Figma Footer: 15px Regular, rule colour */
  letter-spacing: 0;
  color: var(--color-rule);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  max-width: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px; /* CLAUDE.md 5.1 touch target for short labels such as "Trust" */
  font-size: 1rem; /* Figma Footer links: 16px Medium, paper */
  font-weight: 500;
  color: var(--color-paper);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-red-pen-on-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  margin: var(--space-48) 0 0;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-ink-70);
  font-size: var(--font-size-small);
  color: var(--color-rule);
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--hero-space-top) var(--hero-space-bottom);
}

.hero__wrap {
  display: grid;
  gap: var(--space-32);
  align-items: end;
}

.hero__title,
.hero h1 {
  margin: 0;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-display);
  letter-spacing: var(--display-tracking);
}

/* The home headline only: 112px at desktop, two lines. */
.hero--display .hero__title,
.hero--display h1 {
  font-size: var(--font-size-display);
  margin-bottom: var(--space-32); /* with the 32px content gap: 64px headline to lead, as in Figma */
}

.hero--display .hero__content {
  gap: var(--space-32);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.hero__lead {
  margin: 0;
  max-width: 47.5rem; /* 760px, Figma lead column */
  font-size: var(--font-size-lead);
  line-height: 1.4;
}

/* Home hero text stack: tagline, technology statement, description (Figma Home, 24px rhythm). */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

.hero__tagline {
  margin: 0;
  font-size: 1.75rem; /* 28px mobile */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.hero__tech {
  margin: 0;
  font-size: 1.375rem; /* 22px mobile */
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.015em;
}

@media (min-width: 64em) {
  .hero__tagline {
    font-size: 2rem;
    line-height: 1.12;
  }
  .hero__tech {
    font-size: 1.625rem; /* 26px */
    line-height: 1.23;
  }
}

@media (min-width: 80em) {
  .hero__tagline {
    font-size: 2.25rem; /* 36px */
    line-height: 1.11;
  }
}

.hero--display .hero__text .hero__lead {
  color: var(--color-ink-70);
}

.hero__mark {
  width: min(40vw, 160px);
  height: auto;
}

@media (max-width: 63.999em) {
  .hero--mark .hero__mark {
    order: -1;
    width: 88px;
    justify-self: start;
  }
}

@media (min-width: 64em) {
  .hero--mark .hero__wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-64);
  }

  .hero__mark {
    width: min(20vw, 280px);
    justify-self: end;
  }
}

/* Display heroes with the mascot (Home, Partner With Us), desktop: the 112px headline takes the
   full 1280px column; below it a lead row (760px lead top, actions pinned to the bottom) sits beside
   the 280px mascot, as in Figma. On phones the row dissolves and the mascot stays above the headline. */
.hero--display.hero--mark .hero__row {
  display: contents;
}

@media (min-width: 64em) {
  .hero--display.hero--mark .hero__wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--display.hero--mark .hero__row {
    display: grid;
    grid-template-columns: minmax(0, 47.5rem) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--space-64);
    row-gap: var(--space-32);
    align-self: stretch;
  }

  .hero--display.hero--mark .hero__row .hero__mark {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    width: min(20vw, 280px);
  }

  .hero--display.hero--mark .hero__row .actions {
    align-self: end;
  }
}

.hero__qualifier {
  font-size: var(--font-size-subheading);
  font-weight: 700;
  color: var(--color-ink-70);
  max-width: 28ch;
}

/* ---------- Split: heading left, body right (12 columns) ---------- */
.split {
  display: grid;
  gap: var(--space-24) var(--gutter);
}

@media (min-width: 48em) {
  .split {
    grid-template-columns: repeat(12, 1fr);
  }

  .split__head {
    grid-column: 1 / span 5;
  }

  .split__body {
    grid-column: 6 / span 7;
  }
}

.split__head h2 {
  margin: 0;
}

/* Figma split with a hairline rule on top, a small label above the heading, a lead first
   paragraph and smaller muted follow-ups. */
.split--ruled {
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-rule);
}

.split__label {
  margin: 0 0 var(--space-12);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-70);
}

.split__body--lead > :first-child {
  font-size: var(--font-size-lead);
  line-height: 1.5;
}

.split__body--lead > :not(:first-child) {
  font-size: var(--font-size-small);
  color: var(--color-ink-70);
}

.split__body > :first-child {
  margin-top: 0;
}

/* ---------- Ledger: hairline rules, numerals, three columns ---------- */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-rule);
}

.ledger__row {
  display: grid;
  gap: var(--space-8) var(--gutter);
  max-width: none;
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-rule);
}

.ledger__index {
  font-size: var(--font-size-small); /* 14-15px stacked; heading size from 48em (below) */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-70);
}

.ledger__title {
  margin: 0;
  font-size: var(--font-size-h3);
}

.ledger__body {
  margin: 0;
  color: var(--color-ink-70);
}

@media (min-width: 48em) {
  .ledger__row {
    grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
    padding-block: var(--space-32);
  }

  .ledger__index {
    font-size: var(--font-size-h3);
  }
}

.band-ink .ledger,
.band-ink .ledger__row {
  border-color: var(--color-rule);
}

.band-ink .ledger__index,
.band-ink .ledger__body {
  color: var(--color-paper);
}

/* ---------- Steps: numbered cells ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-32) var(--gutter);
}

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

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .steps--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

.step {
  max-width: none;
  padding-top: var(--space-16);
  border-top: 2px solid var(--color-ink);
}

.step__number {
  display: block;
  margin-bottom: var(--space-12);
  font-size: 4.5rem; /* 72px, Figma Step cell */
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
}

.step__title {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-h3); /* 26px desktop, 22px mobile, Figma Step cell */
  line-height: 1.23;
}

.step__body {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-ink-70);
}

.band-ink .step {
  border-top-color: var(--color-paper);
}

.band-ink .step__number,
.band-ink .step__body {
  color: var(--color-paper);
}

/* Section head: heading left, short lede right (stacked on small screens). */
.section-head {
  display: grid;
  gap: var(--space-16) var(--gutter);
  margin-bottom: var(--space-48);
}

.section-head h2,
.section-head p {
  margin: 0;
}

@media (min-width: 48em) {
  .section-head {
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
  }

  .section-head h2 {
    grid-column: 1 / span 7;
  }

  .section-head p {
    grid-column: 8 / span 5;
  }
}

/* ---------- Pillars: three columns, title and text, top rules (ink band) ---------- */
.pillars {
  list-style: none;
  margin: var(--space-48) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-32) var(--space-32);
}

@media (min-width: 48em) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pillar {
  max-width: none;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-ink-70);
}

.pillar__title {
  margin: 0 0 var(--space-8);
  font-size: 1.25rem;
  line-height: 1.2;
}

.pillar__body {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-paper);
}

/* ---------- Facts: fit lists, two columns ---------- */
.facts {
  display: grid;
  gap: var(--space-32) var(--gutter);
}

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

.facts__title {
  margin: 0 0 var(--space-16);
  padding-top: var(--space-16);
  border-top: 2px solid var(--color-ink);
  font-size: 1.25rem;
  line-height: 1.2;
}

.fit-note {
  margin: var(--space-32) 0 0;
}

.facts__item ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts__item li {
  position: relative;
  max-width: none;
  padding: var(--space-12) 0 var(--space-12) var(--space-24);
  border-top: 1px solid var(--color-rule);
}

.facts__item li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ---------- Bands ---------- */
.band-paper-deep {
  background: var(--color-paper-deep);
}

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

/* .lede sets its own ink colour, which is invisible on the ink band. */
.band-ink .lede,
.band-ink .lead {
  color: var(--color-paper);
}

.band-ink a:not(.cta) {
  color: var(--color-paper);
}

/* Closing band: paper-deep, statement left, actions right on the same baseline
   from 64em; stacked and left-aligned below. */
.closing-band {
  padding-block: min(var(--section-space), var(--space-96)); /* Figma closing band stays at 96 */
  background: var(--color-paper-deep);
}

.closing-band .container {
  display: grid;
  gap: 0;
}

.closing-band h2 {
  margin: 0 0 var(--space-16);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-display);
  letter-spacing: var(--display-tracking);
}

.closing-band p {
  margin: 0 0 var(--space-32);
  font-size: var(--font-size-lead);
}

@media (min-width: 64em) {
  .closing-band .container {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-64);
  }

  .closing-band h2,
  .closing-band p {
    grid-column: 1;
  }

  .closing-band p {
    margin-bottom: 0;
  }

  .closing-band .actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    flex-wrap: nowrap;
  }
}

/* ---------- Status panel: honest "not available" states ---------- */
.status-panel {
  max-width: 56.25rem; /* 900px, Figma */
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  background: var(--color-white);
  padding: var(--space-32) var(--margin-page);
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 48em) {
  .status-panel {
    padding: var(--space-48);
  }
}

.status-panel__label {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-ink-70);
}

.status-panel h2,
.status-panel h3 {
  margin: 0;
  font-size: var(--font-size-h2);
}

.status-panel p {
  margin: 0;
}

/* ---------- Path panels ---------- */
.path-panels {
  display: grid;
  gap: var(--gutter);
}

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

.path-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-32) var(--space-48);
  border-top: 2px solid var(--color-ink);
}

.path-panels {
  gap: var(--space-48) var(--space-32);
}

.path-panel__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-70);
}

.path-panel__title {
  margin: 0;
  font-size: clamp(2.375rem, 1.771rem + 2.476vw, 4rem); /* 38 mobile, 64 desktop, Figma Path panel */
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: var(--display-tracking);
}

.path-panel__body {
  margin: 0;
  flex-grow: 1;
  font-size: var(--font-size-lead); /* 19 mobile, 24 desktop, Figma */
  line-height: 1.5;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta,
  .prose a,
  .text-link,
  .talk-link,
  .site-nav__link {
    transition: background-color 0.12s ease, color 0.12s ease, text-decoration-thickness 0.12s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .prose a:hover,
  .text-link:hover,
  .talk-link:hover {
    text-decoration-thickness: 2px;
  }
}

/* Ink mark — a small reused device: a loose, hand-drawn red-pen loop or
   underline, echoing the brand's own "red pen" editorial mark (approved
   palette, BRAND_SYSTEM.md §5.1). Used twice on this page: once around the
   primary CTA, once under "The deal". It is a single decorative flourish,
   not a systematic annotation language (that remains reserved/undesigned,
   B-4) — the wrapped content's own text/markup is untouched so it never
   interferes with content assertions or the accessible name. */
.ink-mark {
  position: relative;
  display: inline-block;
}

.ink-mark--center {
  display: block;
  text-align: center;
}

.ink-mark__ink {
  position: absolute;
  color: var(--color-red-pen);
  pointer-events: none;
  overflow: visible;
}

.ink-mark__ink--loop {
  inset: -0.7em -0.9em;
  width: calc(100% + 1.8em);
  height: calc(100% + 1.4em);
}

.ink-mark__ink--underline {
  left: 50%;
  bottom: -0.35em;
  width: 6.5rem;
  height: 0.9rem;
  transform: translateX(-50%);
}

/* Two paths — Start a Project is the dominant control (filled red button,
   red accent border); Pitch Us is visibly secondary (outlined button, muted
   background, ink accent border), never a second primary (BRAND_SYSTEM.md
   §5.3; WEBSITE_BRIEF.md §5). */
.paths {
  display: grid;
  gap: 1.5rem;
  margin-block-start: 0.5rem;
}

@media (min-width: 48em) {
  .paths {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: stretch;
  }

  /* The home and Talk pages show exactly two paths (Start a Project,
     Pitch Us) and keep the original asymmetric, dominant-primary layout.
     Pricing reuses .paths for four reference-point plans and stays on the
     plain even grid above/below instead (R10 review: reusing the two-card
     tilt treatment on four cards made three plans sit flat and one tilt,
     which read as accidental rather than designed). */
  .paths--pair {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* Pricing's four reference-point plans are the only .paths use with more
   than two cards; everything else (home, Talk, Pitch Us' Build/Operate
   Mode) is exactly two and stays on the repeat(2, 1fr)/--pair rules above. */
@media (min-width: 64em) {
  .paths--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.path {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-top: 4px solid var(--color-ink);
  border-radius: 6px;
  padding: 2rem 1.75rem;
}

.path h3 {
  font-size: var(--font-size-subheading);
  font-weight: 700;
}

.path p {
  flex-grow: 1;
  color: var(--color-ink-70);
}

.path .cta {
  align-self: flex-start;
}

.path--primary {
  border-top-color: var(--color-red-pen);
}

.path--secondary {
  background: var(--color-paper-deep);
}

.path__mark {
  width: 2.75rem;
  height: auto;
}

@media (min-width: 48em) {
  .paths--pair .path--primary {
    transform: rotate(-0.5deg);
  }

  .paths--pair .path--secondary {
    transform: rotate(0.5deg);
  }
}

/* What we build — the loop, in plain customer language rather than a
   factory diagram (CLAUDE.md §3.1). */
.loop {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  font-weight: 700;
}

.loop li {
  max-width: none;
  padding: 0.5rem 0.9rem;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: var(--font-size-small);
}

.loop li:not(:last-child)::after {
  content: "\2192";
  display: inline-block;
  margin-inline: 0.6rem;
  color: var(--color-ink-70);
  font-weight: 400;
}

/* Numbered step sequences — How it works' journey and Pitch Us' selective
   process reused plain <ol><li><h3><p> markup with no styling of its own
   (default browser numerals, unstyled nested headings), the one clear
   "default component styling" gap the R10 review found across the interior
   pages. A plain numbered badge and hairline dividers match the site's
   existing rule/ink vocabulary without inventing the still-undesigned
   technical annotation system (BRAND_SYSTEM.md §6, B-4). */
.step-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 1.5rem;
  counter-reset: step;
}

.step-list li {
  counter-increment: step;
  max-width: none;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1rem;
  row-gap: 0.35rem;
  padding-block: 1.5rem;
}

.step-list li:first-child {
  padding-block-start: 0;
}

.step-list li:not(:first-child) {
  border-top: 1px solid var(--color-rule);
}

.step-list li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-small);
  color: var(--color-ink);
}

.step-list h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--font-size-subheading);
  font-weight: 700;
  margin: 0;
}

.step-list p {
  grid-column: 2;
  grid-row: 2;
  color: var(--color-ink-70);
  margin: 0;
}

/* Plain content bullet lists (e.g. Start a Project's "start from what you
   have") — the same dash marker already used by .not-list, kept in muted
   ink rather than red pen because this version sits on paper, not ink, and
   a decorative dash this size is adjacent to small body text (CLAUDE.md
   §5.2: verify red pen on paper before small text; prefer ink). */
.content-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.content-list li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.content-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-ink-70);
  font-weight: 700;
}

/* Trust strip — principle-level statements only, no contract language
   (CLAUDE.md §3; WEBSITE_BRIEF.md Tier 6). A row of short, equal-weight
   statements rather than a card, so it reads as a strip of fact, not a
   sales pitch. */
.trust-strip {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  text-align: center;
}

.trust-strip li {
  max-width: none;
  font-weight: 700;
}

@media (min-width: 48em) {
  .trust-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .trust-strip li {
    padding-inline: 1.5rem;
    border-inline-start: 1px solid var(--color-rule);
  }

  .trust-strip li:first-child {
    border-inline-start: none;
  }
}

/* What Ugly Baby Labs isn't — the dark beat. Refined, not heavy: one ink
   band, restrained red-pen accents, no extra ornament. List items read as
   struck through, like items crossed off a checklist. */
.section--not__wrap {
  position: relative;
}

.section--not__mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5rem;
  height: auto;
  opacity: 0.9;
}

.band-ink .not-list {
  display: grid;
  gap: 0.75rem 2rem;
  padding-inline-start: 0;
  list-style: none;
  margin-block-end: 0;
  max-width: none;
}

@media (min-width: 40em) {
  .band-ink .not-list {
    grid-template-columns: 1fr 1fr;
  }
}

.not-list li {
  position: relative;
  padding-inline-start: 1.5rem;
  max-width: none;
  text-decoration: line-through;
  text-decoration-color: var(--color-red-pen-on-ink);
  text-decoration-thickness: 0.1em;
  text-decoration-skip-ink: none;
}

.not-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-red-pen-on-ink);
  font-weight: 700;
  text-decoration: none;
}

/* Closing CTA — a deliberate card rather than a trailing paragraph,
   echoing the hero's own primary control. */
.section--cta {
  text-align: center;
}

.cta-card {
  max-width: 32rem;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  transform: rotate(0.4deg);
}

.cta-card__mark {
  margin-inline: auto;
  margin-block-end: 1rem;
}

.section--cta p {
  color: var(--color-ink-70);
  margin-inline: auto;
}

/* ---------- Contact block: visible address, copy action, mailto fallback ---------- */
.contact-actions {
  display: grid;
  gap: var(--space-16);
  justify-items: start;
}

.contact-actions__address {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-12);
}

.contact-actions__email {
  font-size: var(--font-size-h3);
  overflow-wrap: anywhere;
  user-select: all;
}

.contact-actions__status {
  margin: 0;
  min-height: 1.6em;
  font-size: var(--font-size-small);
  font-weight: 700;
}

.contact-actions__hint {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--font-size-small);
  color: inherit;
  opacity: 0.85;
}

.contact-actions button.cta {
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: 700; /* Figma Contact block: Bold button labels */
  cursor: pointer;
}

/* .cta sets its own display, which would override the hidden attribute and show a dead button without JavaScript. */
.contact-actions [hidden] {
  display: none;
}

/* ---------- Ownership illustration (partner page) ---------- */
.ownership {
  margin: 0;
}

.ownership__bar {
  display: flex;
  min-height: 7rem;
  border: 2px solid var(--color-ink);
}

.ownership__part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-16) var(--space-24);
}

.ownership__part--partner {
  flex: 70 1 0;
  background: var(--color-ink);
  color: var(--color-paper);
}

.ownership__part--ubl {
  flex: 30 1 0;
  background: var(--color-paper-deep);
  color: var(--color-ink);
  border-left: 2px solid var(--color-ink);
}

.ownership__value {
  font-size: var(--font-size-h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

.ownership__name {
  font-size: var(--font-size-small);
}

.ownership__note {
  max-width: var(--measure);
  margin-top: var(--space-16);
  font-size: var(--font-size-small);
  color: var(--color-ink-70);
}

@media (max-width: 30em) {
  .ownership__part {
    padding: var(--space-16);
  }
}