/* ReskueDesk v2 styles. Colours, type, spacing and radii come from /brand/tokens.css. */

/* Marigold is the one fill that needs dark text in both themes: ink in light, paper in dark. */
:root {
  --on-marigold: var(--ink);
  --header-h: 76px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --on-marigold: var(--paper);
  }
}
[data-theme='dark'] {
  --on-marigold: var(--paper);
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}
body.menu-open {
  overflow: hidden;
}
img,
svg {
  max-width: 100%;
}
p {
  margin: 0;
}
a {
  color: var(--pine);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}
main:focus {
  outline: none;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--pine);
  color: var(--on-pine);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font: var(--type-body-strong);
}
.skip:focus {
  top: var(--space-2);
}

/* 12-column grid, 1200px max, 24px gutters */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: content-box;
}
.narrow {
  max-width: 680px;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* Type */
h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
}
h1 {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
}
h2 {
  font: var(--type-h2);
  letter-spacing: var(--track-h2);
}
h3 {
  font: var(--type-h3);
}
.display {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
  max-width: 18em;
}
.page-title {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
}
.section-title {
  font: var(--type-h2);
  letter-spacing: var(--track-h2);
}
.panel-h,
.dialog-title {
  font: var(--type-h3);
  letter-spacing: 0;
}
.lede,
.hero-lede {
  max-width: 36em;
}
.hero-lede {
  margin-top: var(--space-4);
}
.small {
  font: var(--type-small);
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.text-link {
  font: var(--type-body-strong);
  color: var(--pine);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
}
.mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
}
.lockup {
  display: block;
  height: auto;
}
.mark .lockup {
  width: 168px;
}
.lk-tile {
  fill: var(--pine);
}
.lk-glyph {
  fill: var(--on-pine);
}
.lk-stroke {
  stroke: var(--on-pine);
}
.lk-word {
  fill: var(--ink);
}
.lk-paper {
  fill: var(--paper);
}
.lk-stroke-paper {
  stroke: var(--paper);
}
.top-label {
  font: var(--type-label);
  color: var(--muted);
}
.header-signout {
  margin: 0 0 0 auto;
}
.nav {
  margin-left: auto;
}
.nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--ink);
  text-decoration: none;
  font: var(--type-body);
  font-weight: 500;
}
.nav a:hover {
  color: var(--pine);
  text-decoration: underline;
}
.nav a[aria-current='page'] {
  color: var(--pine);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.btn-sm {
  min-height: 44px;
  padding: 10px 18px;
}
.menu-btn {
  display: none;
  margin-left: auto;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font: var(--type-body-strong);
  cursor: pointer;
}
.menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 19;
  background: var(--paper);
  padding: var(--space-6) var(--space-4) var(--space-12);
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.menu ul {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
}
.menu li {
  border-bottom: 1px solid var(--line);
}
.menu a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 64px;
  color: var(--ink);
  text-decoration: none;
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
}
.menu a:not(.btn):hover {
  color: var(--pine);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 14px 22px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font: var(--type-body-strong);
  background: var(--pine);
  color: var(--on-pine);
  border: 1.5px solid var(--pine);
  border-radius: var(--radius-md);
}
.btn:hover {
  background: color-mix(in srgb, var(--pine) 88%, var(--ink));
  border-color: color-mix(in srgb, var(--pine) 88%, var(--ink));
  text-decoration: none;
}
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn.secondary:hover {
  background: transparent;
  color: var(--pine);
  border-color: var(--pine);
}
.btn-on-pine {
  background: var(--on-pine);
  color: var(--pine);
  border-color: var(--on-pine);
}
.btn-on-pine:hover {
  background: color-mix(in srgb, var(--on-pine) 88%, var(--pine));
  border-color: color-mix(in srgb, var(--on-pine) 88%, var(--pine));
}
.btn-on-pine:focus-visible {
  outline-color: var(--on-pine);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: wait;
}
.btn.block {
  width: 100%;
}
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  margin-top: var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
  font: var(--type-body);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.back:hover {
  color: var(--ink);
}

/* Platform logos keep their proportions; mono marks take the ink colour. */
.pl {
  flex: none;
  display: block;
  color: var(--ink);
}

/* Home: hero */
.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}
.hero-copy {
  grid-column: 1 / span 7;
}
.hero-card {
  grid-column: 8 / span 5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-from {
  font: var(--type-small);
  color: var(--muted);
}
.case-card {
  margin: 0;
}
.case-card figcaption {
  margin-top: var(--space-3);
}
.case-card-panel {
  display: grid;
  gap: var(--space-4);
}
.case-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.case-card-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.case-card-platform .case-ref {
  margin: 0;
}
.case-card-title {
  font: var(--type-body-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .case-card-timeline li {
    animation: step-in 200ms ease-out both;
  }
  .case-card-timeline li:nth-child(2) {
    animation-delay: 200ms;
  }
  .case-card-timeline li:nth-child(3) {
    animation-delay: 400ms;
  }
}
@keyframes step-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Home: platform strip */
.strip {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip-label {
  font: var(--type-small);
  color: var(--muted);
  flex: none;
}
.strip-logos {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Home: services */
.services-home {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  display: grid;
  gap: var(--space-6);
}
.pine-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  background: var(--pine);
  color: var(--on-pine);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.pine-block-main {
  grid-column: 1 / span 8;
}
.pine-block-side {
  grid-column: 9 / span 4;
  display: grid;
  gap: var(--space-4);
  align-content: end;
}
.pine-block-title {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
  color: var(--on-pine);
}
.pine-block-line {
  margin-top: var(--space-3);
  max-width: 36em;
}
.pine-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.pine-list li {
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--on-pine) 30%, transparent);
  font: var(--type-body-strong);
}
.pine-price {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
}
.pine-price-label {
  font: var(--type-body);
}
.pine-note {
  font: var(--type-small);
}
.uneven {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--space-6);
  align-items: start;
}
.service-tile {
  display: grid;
  gap: var(--space-3);
}
.tile-0 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.tile-1 {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-6);
}
.tile-2 {
  background: var(--mint);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.tile-title {
  font: var(--type-h2);
  letter-spacing: var(--track-h2);
}
.tile-title a {
  color: var(--ink);
  text-decoration: none;
}
.tile-title a:hover {
  color: var(--pine);
  text-decoration: underline;
}
.tile-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-1) 0;
  padding: 0;
}
.tile-price {
  font: var(--type-body-strong);
}

/* Home: how it works, a full-bleed band in dark-theme tokens */
.dark-band {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-16) 0;
}
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.stage {
  position: relative;
  padding-top: var(--space-8);
  border-top: 2px solid var(--line);
}
.stage::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pine);
}
.stage-n {
  display: block;
  font: var(--type-h1);
  color: var(--pine);
  margin-bottom: var(--space-2);
}
.stage-title {
  margin-bottom: var(--space-2);
}
.stage p {
  max-width: 30ch;
}
.stage-gets {
  margin-top: var(--space-3);
  font: var(--type-small);
  color: var(--muted);
}

/* Home: numbers */
.numbers {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}
.numbers-grid dt {
  font: var(--type-small);
  color: var(--muted);
}
.numbers-grid dd {
  margin: var(--space-2) 0 0;
  font: var(--type-display);
  letter-spacing: var(--track-display);
}

/* Home: trust */
.trust {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.trust-rules {
  grid-column: 1 / span 6;
}
.trust-messages {
  grid-column: 8 / span 5;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.rules {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  counter-reset: r;
}
.rules li {
  counter-increment: r;
  display: grid;
  grid-template-columns: var(--space-12) 1fr;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.rules li::before {
  content: counter(r);
  font: var(--type-h2);
  color: var(--pine);
  grid-row: span 2;
}
.rule-title {
  font: var(--type-h3);
}
.trust-sub {
  font: var(--type-h3);
}
.msg {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.msg-real {
  background: var(--mint);
}
.msg-fake {
  border: 1.5px solid var(--brick);
}
.msg-tag {
  font: var(--type-label);
  font-weight: 600;
}
.msg-fake .msg-tag {
  color: var(--brick);
}
.msg-body {
  font: var(--type-body-strong);
}
.msg-why {
  font: var(--type-small);
}

/* Home: reviews */
.reviews {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.review-list {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-8) var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.review blockquote {
  margin: 0;
  font: var(--type-h3);
}
.review-by {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font: var(--type-small);
  color: var(--muted);
}

/* FAQ */
.faq-preview {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  border-top: 1px solid var(--line);
}
.faq {
  margin-top: var(--space-6);
  max-width: 760px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-child {
  border-top: 1px solid var(--line);
}
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-4) var(--space-8) var(--space-4) 0;
  font: var(--type-body-strong);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: var(--space-1);
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--pine);
  border-radius: var(--radius-pill);
}
.faq summary::after {
  transform: rotate(90deg);
}
.faq details[open] summary::after {
  display: none;
}
.faq p {
  padding-bottom: var(--space-4);
  max-width: 62ch;
}
.more-link {
  margin-top: var(--space-6);
}
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  text-decoration: none;
  font: var(--type-small);
  font-weight: 600;
}
.faq-jump a:hover {
  border-color: var(--pine);
  color: var(--pine);
}
.faq-group {
  padding-top: var(--space-12);
  padding-bottom: var(--space-4);
}

/* Final call to action */
.cta-band {
  background: var(--pine);
  color: var(--on-pine);
  padding: var(--space-16) 0;
}
.cta-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: end;
}
.cta-title {
  grid-column: 1 / span 8;
  font: var(--type-display);
  letter-spacing: var(--track-display);
  color: var(--on-pine);
}
.cta-inner .btn {
  grid-column: 10 / span 3;
  justify-self: end;
}

/* Footer */
.site-footer {
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--line);
  font: var(--type-small);
  color: var(--muted);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.footer-mark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.footer-mark .lockup {
  width: 140px;
}
.footer-trust {
  font: var(--type-body-strong);
  color: var(--ink);
  max-width: 40em;
}
.footer-cols {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr 4fr;
  gap: var(--space-6);
  padding-top: var(--space-8);
}
.footer-h {
  font: var(--type-label);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-cols li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}
.footer-cols li a:hover {
  color: var(--ink);
}
.footer-tm {
  max-width: 46ch;
}

/* Service pages */
.svc-hero,
.page-hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.svc-title {
  max-width: 16em;
}
.required-copy,
.rule-box {
  margin-top: var(--space-6);
  max-width: 44em;
  background: var(--mint);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  font: var(--type-body-strong);
}
.svc-platforms {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
  border-top: 1px solid var(--line);
}
.platform-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.platform-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.pl-name {
  font: var(--type-body-strong);
}
.do-dont-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-16) 0;
}
.do-dont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}
.do-list,
.dont-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}
.do-list li,
.dont-list li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.decides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.decides-label {
  font: var(--type-body-strong);
}
.svc-plans,
.pricing-svc {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}
.svc-faq {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}
.table-wrap {
  margin-top: var(--space-8);
  overflow-x: auto;
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font: var(--type-small);
  color: var(--ink);
}
.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  vertical-align: bottom;
  color: var(--ink);
}
.compare tbody th {
  color: var(--muted);
  font-weight: 500;
  width: 18%;
}
.compare .featured {
  background: var(--mint);
}
.compare thead .featured {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.compare-name {
  display: block;
  font: var(--type-h3);
}
.compare-price {
  font: var(--type-h2);
}
.compare ul {
  margin: 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-1);
}
.compare .flag {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--pine);
  color: var(--on-pine);
}
.table-note {
  margin-top: var(--space-3);
  max-width: 62ch;
}
.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.pricing-notes {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
}

/* Start: service picker rows */
.picker {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.picker li {
  border-bottom: 1px solid var(--line);
}
.picker-row {
  display: grid;
  grid-template-columns: 6fr 4fr 2fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0;
  color: var(--ink);
  text-decoration: none;
}
.picker-row:hover .picker-name {
  color: var(--pine);
  text-decoration: underline;
}
.picker-main {
  display: grid;
  gap: var(--space-1);
}
.picker-name {
  font: var(--type-h2);
  letter-spacing: var(--track-h2);
}
.picker-line {
  color: var(--muted);
}
.picker-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.picker-price {
  font: var(--type-body-strong);
  text-align: right;
}
.picker-note {
  margin: var(--space-6) 0 var(--space-16);
}

/* Intake */
.desk {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: start;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.desk-intro {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  display: grid;
  gap: var(--space-4);
}
.desk-intro .hero-lede,
.desk-intro .required-copy,
.desk-intro .rule-box {
  margin-top: 0;
}
.assurances {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}
.assurances li {
  position: relative;
  padding-left: var(--space-6);
}
.assurances li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-3);
  width: var(--space-3);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--pine);
}

/* Panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
#desk {
  min-height: 420px;
}
.panel-title {
  margin-bottom: var(--space-4);
}
.stack {
  display: grid;
  gap: var(--space-4);
}

/* Progress */
.progress {
  height: 4px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pine);
  border-radius: var(--radius-pill);
}

/* Questions */
.question h2 {
  max-width: 30em;
}
.step-count {
  font: var(--type-small);
  color: var(--muted);
  margin-top: var(--space-1);
}
.question .step-count {
  margin-bottom: var(--space-6);
}
.options {
  display: grid;
  gap: var(--space-2);
}
.options.two {
  grid-template-columns: 1fr 1fr;
}
.options.logo-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.opt {
  width: 100%;
  min-height: 52px;
  text-align: left;
  cursor: pointer;
  font: var(--type-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.opt:hover {
  border-color: var(--muted);
}
.opt[aria-pressed='true'] {
  background: var(--mint);
  border-color: var(--pine);
}
.opt-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  min-height: 104px;
}
.opt-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

/* Assessment */
.verdict {
  display: grid;
  gap: var(--space-6);
}
.difficulty-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}
.difficulty-bar span {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.difficulty-bar span.on {
  background: var(--pine);
}
.difficulty-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font: var(--type-small);
  color: var(--muted);
}
.difficulty-labels span:nth-child(2) {
  text-align: center;
}
.difficulty-labels span:last-child {
  text-align: right;
}
.difficulty-labels .active {
  color: var(--ink);
  font-weight: 600;
}
.level {
  font: var(--type-h3);
}
.findings {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}
.findings li {
  font: var(--type-body);
  color: var(--ink);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.findings li:first-child {
  border-top: 0;
}
.notice-act {
  display: grid;
  gap: var(--space-3);
  background: var(--marigold);
  color: var(--on-marigold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.notice-act .btn {
  justify-self: start;
}

/* Plans */
.plans {
  display: grid;
  gap: var(--space-4);
}
.plan {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: var(--type-body);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.plan[aria-pressed='true'] {
  border: 2px solid var(--pine);
}
.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.plan-name {
  font: var(--type-h3);
}
.price {
  font: var(--type-h2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.plan-short {
  color: var(--muted);
}
.plan ul {
  margin: 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-1);
  font: var(--type-small);
  color: var(--ink);
}
.burden {
  font: var(--type-small);
  color: var(--muted);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.plan.recommended {
  background: var(--pine);
  border-color: var(--pine);
}
.plan.recommended,
.plan.recommended .plan-name,
.plan.recommended .price,
.plan.recommended .plan-short,
.plan.recommended ul {
  color: var(--on-pine);
}
.plan.recommended .plan-short,
.plan.recommended ul {
  opacity: 0.85;
}
.plan.recommended[aria-pressed='true'] {
  border: 1.5px solid var(--pine);
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}
.plan.recommended[aria-pressed='true']:focus-visible {
  outline: 2px solid var(--pine);
}
.flag {
  justify-self: start;
  font: var(--type-label);
  background: var(--mint);
  color: var(--ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

/* Forms */
form.details {
  display: grid;
  gap: var(--space-6);
}
label.field {
  display: grid;
  gap: var(--space-2);
  font: var(--type-label);
  color: var(--ink);
}
label.field span.hint {
  font: var(--type-small);
  color: var(--muted);
  margin-top: calc(-1 * var(--space-1));
}
.field-inline {
  grid-template-columns: auto 1fr;
  align-items: center;
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea,
select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: var(--type-body);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='password']:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--mint);
}
textarea {
  min-height: 96px;
  resize: vertical;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}
legend {
  font: var(--type-label);
  color: var(--ink);
  margin-bottom: var(--space-2);
  padding: 0;
}
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-2) 0;
  font: var(--type-body);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--pine);
}
.note {
  background: var(--mint);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.error {
  font: var(--type-small);
  font-weight: 600;
  color: var(--brick);
  min-height: 20px;
}
.error:empty {
  min-height: 0;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* Dialog */
dialog {
  max-width: 460px;
  width: calc(100% - 2 * var(--space-4));
  padding: var(--space-8);
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
dialog[open] {
  animation: dialog-in 0.16s ease-out;
}
dialog::backdrop {
  background: rgba(17, 25, 23, 0.55);
}
dialog p {
  margin-top: var(--space-3);
}
.dialog-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@keyframes dialog-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Case page */
.case-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
}
.case-keep {
  margin-top: var(--space-8);
}
.loading {
  padding: var(--space-12) 0;
}
.case-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}
.case-ref {
  font: var(--type-label);
  color: var(--muted);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.status-pill {
  display: inline-block;
  font: var(--type-label);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--pine);
  color: var(--on-pine);
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill.ok {
  background: var(--mint);
  color: var(--ink);
}
.status-pill.act {
  background: var(--marigold);
  color: var(--on-marigold);
}
.status-pill.err {
  background: transparent;
  color: var(--brick);
  border-color: var(--brick);
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline li {
  position: relative;
  margin-left: 5px;
  padding: 0 0 var(--space-6) var(--space-6);
  border-left: 2px solid var(--line);
}
.timeline li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--muted);
}
.timeline li:last-child::before {
  background: var(--pine);
  border-color: var(--pine);
}
.timeline time {
  display: block;
  font: var(--type-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
}
.confirm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.confirm-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.confirm-list strong {
  font: var(--type-label);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.confirm-list .done strong {
  background: var(--mint);
  color: var(--ink);
}
.confirm-list .waiting strong {
  background: var(--marigold);
  color: var(--on-marigold);
}

/* Admin */
.admin-page {
  padding-bottom: var(--space-16);
}
.admin-tools {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
}
.signin {
  margin: var(--space-12) auto;
}
.signin form {
  margin-top: var(--space-4);
}
.answers {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.answers dt {
  font: var(--type-small);
  color: var(--muted);
}
.answers dd {
  margin: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-small);
  font-variant-numeric: tabular-nums;
}
th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 500;
}
tr.row {
  cursor: pointer;
}
tr.row:hover td {
  background: var(--paper);
}
tr.row:focus-visible {
  outline-offset: -2px;
}
.table-scroll {
  overflow-x: auto;
}

/* Legal and error pages */
.legal {
  max-width: 70ch;
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}
.legal h2 {
  font: var(--type-h3);
  margin: var(--space-8) 0 var(--space-2);
}
.legal ul {
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.legal p + p {
  margin-top: var(--space-3);
}
.legal .small {
  margin-top: var(--space-2);
}
.draft-banner {
  display: inline-block;
  font: var(--type-label);
  font-weight: 600;
  background: var(--marigold);
  color: var(--on-marigold);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.error-page {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  min-height: 50vh;
}

/* Wide screens: display type for heroes */
@media (min-width: 860px) {
  .display {
    font: var(--type-display);
    letter-spacing: var(--track-display);
  }
}

/* Below desktop: the nav moves into the menu */
@media (max-width: 1023.98px) {
  .nav,
  .header-cta {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
    align-items: center;
  }
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
  }
  .hero-copy,
  .hero-card {
    grid-column: 1 / -1;
  }
  .strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .strip-logos {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-6) var(--space-8);
  }
  .pine-block-main,
  .pine-block-side {
    grid-column: 1 / -1;
  }
  .uneven {
    grid-template-columns: 1fr 1fr;
  }
  .tile-0 {
    grid-column: 1 / -1;
  }
  .stages {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
  .trust-rules,
  .trust-messages {
    grid-column: 1 / -1;
  }
  .cta-title {
    grid-column: 1 / -1;
    font: var(--type-h1);
    letter-spacing: var(--track-h1);
  }
  .cta-inner .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .picker-row {
    grid-template-columns: 1fr auto;
  }
  .picker-logos {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 859.98px) {
  .wrap {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .desk {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-2);
    padding-bottom: var(--space-12);
  }
  .desk-intro {
    position: static;
  }
  .desk-intro .assurances,
  .desk-intro .rule-box ~ .small {
    display: none;
  }
  .services-home,
  .numbers,
  .trust,
  .reviews,
  .faq-preview,
  .svc-platforms,
  .svc-faq {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .dark-band,
  .do-dont-band,
  .cta-band {
    padding: var(--space-12) 0;
  }
  .svc-hero,
  .page-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .pine-block {
    padding: var(--space-6);
  }
  .pine-list {
    grid-template-columns: 1fr;
  }
  .uneven {
    grid-template-columns: 1fr;
  }
  .tile-0 {
    padding: var(--space-6);
  }
  .stages {
    grid-template-columns: 1fr;
    gap: 0;
    margin-left: 5px;
  }
  .stage {
    padding: 0 0 var(--space-8) var(--space-6);
    border-top: 0;
    border-left: 2px solid var(--line);
  }
  .stage:last-child {
    padding-bottom: 0;
  }
  .stage::before {
    top: 4px;
    left: -7px;
  }
  .numbers-grid {
    grid-template-columns: 1fr;
  }
  .numbers-grid dd {
    font: var(--type-h1);
  }
  .review-list {
    grid-template-columns: 1fr;
  }
  .platform-list,
  .do-dont,
  .decides {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .platform-list {
    gap: 0;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .options.two {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: var(--space-6);
  }
  .picker-row {
    padding: var(--space-6) 0;
  }
  .picker-name {
    font: var(--type-h3);
  }
  table {
    min-width: 720px;
  }
  .compare {
    min-width: 600px;
  }
  .admin-tools {
    justify-items: start;
  }
}
@media (max-width: 599.98px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
  .options.logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .opt-logo {
    padding: var(--space-3) var(--space-2);
    min-height: 96px;
  }
}
@media (max-width: 379.98px) {
  .mark .lockup {
    width: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Preserve the proportions of the full-colour platform artwork. */
img.pl {
  object-fit: contain;
}