@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 100; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-100-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 100; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-100-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 200; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-200-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-900-italic.woff2") format("woff2"); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 100; font-display: swap; src: url("/assets/fonts/public-sans-latin-100-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100; font-display: swap; src: url("/assets/fonts/public-sans-latin-100-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 200; font-display: swap; src: url("/assets/fonts/public-sans-latin-200-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url("/assets/fonts/public-sans-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/public-sans-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/public-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/public-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/public-sans-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/public-sans-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/public-sans-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/public-sans-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/public-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/public-sans-latin-900-italic.woff2") format("woff2"); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/public-sans-latin-900-normal.woff2") format("woff2"); }
:root {
  --bg-light-base: #fbf7f8;
  --fg-light-base-body: #3d1d3b;
  --fg-light-base-heading: #2e0c2c;
  --fg-light-base-muted: #5e4a5c;
  --fg-light-base-link: #a12a5a;
  --fg-light-base-inverse: #2e0c2c;
  --bg-light-card: #f6e7ec;
  --fg-light-card-body: #3d1d3b;
  --fg-light-card-heading: #2e0c2c;
  --fg-light-card-muted: #5e4a5c;
  --fg-light-card-link: #a12a5a;
  --fg-light-card-inverse: #2e0c2c;
  --bg-light-elevated: #ffffff;
  --fg-light-elevated-body: #3d1d3b;
  --fg-light-elevated-heading: #2e0c2c;
  --fg-light-elevated-muted: #5e4a5c;
  --fg-light-elevated-link: #a12a5a;
  --fg-light-elevated-inverse: #2e0c2c;
  --brand-light-accent: #a12a5a;
  --brand-light-accent-hover: #5b1a52;
  --brand-light-on-accent: #ffffff;
  --focus-light-ring: #a12a5a;
  --border-light-default: #8a6a85;
  --border-light-subtle: #e6d3da;
}
.bg-surface-base { background: var(--bg-light-base); --fg-body: var(--fg-light-base-body); --fg-heading: var(--fg-light-base-heading); --fg-muted: var(--fg-light-base-muted); --fg-link: var(--fg-light-base-link); --fg-inverse: var(--fg-light-base-inverse); }
.bg-surface-card { background: var(--bg-light-card); --fg-body: var(--fg-light-card-body); --fg-heading: var(--fg-light-card-heading); --fg-muted: var(--fg-light-card-muted); --fg-link: var(--fg-light-card-link); --fg-inverse: var(--fg-light-card-inverse); }
.bg-surface-elevated { background: var(--bg-light-elevated); --fg-body: var(--fg-light-elevated-body); --fg-heading: var(--fg-light-elevated-heading); --fg-muted: var(--fg-light-elevated-muted); --fg-link: var(--fg-light-elevated-link); --fg-inverse: var(--fg-light-elevated-inverse); }
.text-role-body { color: var(--fg-body); overflow-wrap: anywhere; }
.text-role-heading { color: var(--fg-heading); overflow-wrap: anywhere; }
.text-role-muted { color: var(--fg-muted); }
.text-role-link { color: var(--fg-link); }
.text-role-inverse { color: var(--fg-inverse); }
.text-role-link { text-decoration: underline; }
.text-role-link:hover { color: var(--brand-light-accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-light-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.site-logo { max-width: 100%; height: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
:where(section[data-section][style]) { background-size: cover; background-position: center; padding: clamp(1.5rem, 4vw, 3rem); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; padding: 0.25rem 0.5rem; outline: 2px solid var(--focus-light-ring); }

/* Head-to-head matchup: plum against rose on off-white, every page split down a center seam. */

:root {
  --plum: #4a1546;
  --plum-deep: #2e0c2c;
  --rose: #e9a8bb;
  --rose-deep: #a12a5a;
  --rose-pale: var(--bg-light-card);
  --paper: var(--bg-light-base);
  --line: var(--border-light-default);
  --line-soft: var(--border-light-subtle);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Public Sans', Arial, sans-serif;
  --measure: 40rem;
  --wide: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --seam: 6px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, dl, dd { margin: 0; }

a.text-role-link { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a.text-role-link:hover { text-decoration-thickness: 2px; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus { position: absolute; left: 1rem; top: 1rem; z-index: 30; padding: 0.5rem 0.75rem; background: #ffffff; }

/* The two corners. Each resets the foreground roles it carries. */
.plum {
  background: var(--plum);
  --fg-body: #f4e6ee;
  --fg-heading: #ffffff;
  --fg-muted: #dcc4d4;
  --fg-link: #ffc9d9;
  --fg-inverse: #ffffff;
}
.plum .text-role-link:hover { color: #ffffff; }
.plum a:focus-visible, .plum button:focus-visible, .plum input:focus-visible, .plum textarea:focus-visible { outline-color: #ffc9d9; }

.rose {
  background: var(--rose);
  --fg-body: var(--plum-deep);
  --fg-heading: var(--plum-deep);
  --fg-muted: var(--plum);
  --fg-link: var(--plum);
  --fg-inverse: var(--plum-deep);
}
.rose .text-role-link:hover { color: var(--plum-deep); }

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

html { scroll-padding-top: 6rem; }

.vs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--seam) solid var(--plum);
}

.vs-bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
}

.vs-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
  text-decoration: none;
}

.vs-brand .site-logo { width: 2rem; height: 2rem; flex: none; }

.vs-brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.05;
  overflow-wrap: normal;
}

.vs-links { display: none; }

.vs-nav { display: flex; align-items: center; flex: none; }

.site-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 2px solid var(--plum);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--plum);
  white-space: nowrap;
  cursor: pointer;
}

.menu-icon {
  display: inline-block;
  width: 1.1rem;
  height: 0.8rem;
  background:
    linear-gradient(var(--plum) 0 0) left / 45% 100% no-repeat,
    linear-gradient(var(--rose-deep) 0 0) right / 45% 100% no-repeat;
}

.site-menu[open] > summary { background: var(--plum); color: #ffffff; }
.site-menu[open] .menu-icon {
  background:
    linear-gradient(#ffffff 0 0) left / 45% 100% no-repeat,
    linear-gradient(var(--rose) 0 0) right / 45% 100% no-repeat;
}

/* Phone menu: a full-width two-tone sheet under the header, links as big condensed tiles that pair off plum against rose. */
.site-menu > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--seam);
  background: var(--paper);
  border-bottom: var(--seam) solid var(--plum);
}

.site-menu > ul > li { display: flex; }
.site-menu > ul > li:nth-child(4n + 1), .site-menu > ul > li:nth-child(4n + 4) { background: var(--plum); --fg-link: #ffc9d9; }
.site-menu > ul > li:nth-child(4n + 2), .site-menu > ul > li:nth-child(4n + 3) { background: var(--rose); --fg-link: var(--plum-deep); }
.site-menu > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; background: var(--plum); --fg-link: #ffc9d9; }

.site-menu > ul a {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 5.5rem;
  padding: 0.9rem 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 6.5vw, 1.85rem);
  line-height: 1;
  overflow-wrap: normal;
  text-decoration: none;
}
.site-menu > ul a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.site-menu > ul > li:nth-child(4n + 1) a:focus-visible, .site-menu > ul > li:nth-child(4n + 4) a:focus-visible, .site-menu > ul > li:last-child:nth-child(odd) a:focus-visible { outline: 3px solid #ffc9d9; outline-offset: -6px; }
.site-menu > ul > li:nth-child(4n + 2) a:focus-visible, .site-menu > ul > li:nth-child(4n + 3) a:focus-visible { outline: 3px solid var(--plum-deep); outline-offset: -6px; }

/* Desktop: a split header. The brand stands at the center seam, the links divide into a left corner and a right corner. */
@media (min-width: 64rem) {
  html { scroll-padding-top: 7rem; }

  .vs-nav { display: none; }

  .vs-bar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }

  .vs-brand {
    grid-area: 1 / 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    max-width: 22rem;
    min-height: 4.75rem;
    padding: 0.6rem 1.4rem 0.6rem 0.75rem;
    gap: 0.75rem;
  }
  .vs-brand .site-logo { width: 2.5rem; height: 2.5rem; }
  .vs-brand-name { font-size: 1.35rem; }

  .vs-links { grid-area: 1 / 1; display: flex; align-items: center; }
  .vs-links .site-nav { width: 100%; }
  .vs-links .site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem 2rem;
  }

  /* The last link of the first half (rounded down) pushes the rest to the right corner. */
  .vs-links .site-nav li:nth-child(1):nth-last-child(2),
  .vs-links .site-nav li:nth-child(1):nth-last-child(3),
  .vs-links .site-nav li:nth-child(2):nth-last-child(3),
  .vs-links .site-nav li:nth-child(2):nth-last-child(4),
  .vs-links .site-nav li:nth-child(3):nth-last-child(4),
  .vs-links .site-nav li:nth-child(3):nth-last-child(5) { margin-right: auto; }

  .vs-links .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none;
    border-bottom: 3px solid var(--rose-deep);
  }
  .vs-links .site-nav li:nth-child(1):nth-last-child(n + 2) a,
  .vs-links .site-nav li:nth-child(2):nth-last-child(n + 3) a,
  .vs-links .site-nav li:nth-child(3):nth-last-child(n + 4) a { border-bottom-color: var(--plum); }
  .vs-links .site-nav a:hover { border-bottom-width: 5px; }
}

.vs-page { flex: 1 0 auto; padding-bottom: 4rem; }
.vs-page:has(> .vs-home), .vs-page:has(> .vs-thanks) { padding-bottom: 0; }

.breadcrumbs { max-width: var(--wide); margin: 0 auto; padding: 0.9rem var(--gutter); font-size: 0.9rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line); }

.vs-footer { display: grid; }

@media (min-width: 48rem) {
  .vs-footer { grid-template-columns: 1fr 1fr; }
}

.vs-footer-half { padding: 2.25rem var(--gutter) 2.5rem; display: grid; gap: 1rem; align-content: start; }

.vs-footer-line { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; max-width: 22rem; }
.vs-footer-name { font-size: 0.95rem; }

.vs-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.vs-footer-links a { display: inline-block; padding: 0.55rem 0; font-weight: 600; }

/* ---------- shared body typography ---------- */

.prose h2 { font-size: clamp(1.75rem, 3.4vw, 2.35rem); }
.prose h3 { font-size: 1.45rem; font-weight: 700; }
.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.35rem; }
.prose * + p, .prose * + ul, .prose * + ol, .prose * + .table-scroll { margin-top: 0.9rem; }
.prose * + h2 { margin-top: 2.5rem; }
.prose * + h3 { margin-top: 1.6rem; }
.prose h2 + * { margin-top: 0.75rem; }

.prose blockquote {
  margin: 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border-left: var(--seam) solid var(--rose-deep);
  background: var(--rose-pale);
}

.photo-hero, .photo-inline { margin: 0; }
.photo-hero img, .photo-inline img { display: block; width: 100%; }
.photo-hero { margin-bottom: 1.75rem; border-bottom: var(--seam) solid var(--rose-deep); }
.photo-inline { margin-top: 1.5rem; border-left: var(--seam) solid var(--plum); }

section[data-section] {
  margin-top: 2rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  background-size: cover;
  background-position: center;
}

section[data-section] > .bg-surface-card { padding: clamp(1rem, 3vw, 1.75rem); border-top: var(--seam) solid var(--plum); }
section[data-section] > .bg-surface-card > :first-child { margin-top: 0; }

.table-scroll { overflow-x: auto; }
.table-scroll table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.table-scroll th, .table-scroll td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table-scroll thead th { border-bottom: 3px solid var(--plum); font-family: var(--display); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.table-scroll tbody tr:nth-child(even) { background: var(--rose-pale); }

/* ---------- split header band (inner pages) ---------- */

.split-head-band { display: grid; border-bottom: var(--seam) solid var(--paper); }

@media (min-width: 56rem) {
  .split-head-band { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .band-right { border-left: var(--seam) solid var(--paper); }
}

.band-left { padding: clamp(1.75rem, 5vw, 3.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem); }
.band-right { padding: clamp(1.25rem, 4vw, 3.5rem) var(--gutter); display: flex; align-items: flex-end; }

.band-title h1 { max-width: 18ch; font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 0.96; }
.band-note { max-width: 24rem; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }

.vs-grid {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .vs-grid { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
  .side-rail { position: sticky; top: 7rem; }
}

.side-rail { padding: 1.5rem 1.4rem 1.6rem; border-left: var(--seam) solid var(--rose); }
.side-head { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; }
.side-items ul { list-style: none; padding: 0; margin-top: 0.85rem; }
.side-items li { border-top: 1px solid rgba(255, 255, 255, 0.22); }
.side-items a { display: block; padding: 0.65rem 0; font-weight: 600; line-height: 1.35; }

/* ---------- home: split hero ---------- */

.split-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.split-headline {
  order: -1;
  padding: clamp(1.75rem, 6vw, 3rem) var(--gutter);
  border-bottom: var(--seam) solid var(--rose-deep);
}

.split-head {
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.split-panel { padding: clamp(1.5rem, 5vw, 2.75rem) var(--gutter); }
.split-line { max-width: 26rem; font-size: 1.2rem; line-height: 1.45; font-weight: 600; }
.split-divider { display: none; }

@media (min-width: 52rem) {
  .split-hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .split-panel { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; padding: 0; }
  .split-left { grid-column: 1; }
  .split-right { grid-column: 2; }
  .split-line { grid-row: 2; align-self: end; padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem) 3rem; }
  .split-right .split-line { justify-self: start; }
  .split-left .split-line { justify-self: end; text-align: right; }
  .split-headline {
    grid-row: 1;
    grid-column: 1 / 3;
    z-index: 2;
    margin: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem) 0;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
    text-align: center;
    border-bottom: 0;
    border-top: var(--seam) solid var(--rose-deep);
  }
  .split-head { margin: 0 auto; }
  .split-divider {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--seam) / 2);
    width: var(--seam);
    background: var(--paper);
    z-index: 1;
  }
}

.ask-band { border-bottom: 1px solid var(--line-soft); }
.ask-line {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem) var(--gutter);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
}

.matchups-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter);
  display: grid;
  gap: 1.5rem;
}

.matchups-head { font-size: clamp(2rem, 4.5vw, 3rem); }

.bout { display: grid; grid-template-columns: minmax(0, 1fr); }

.bout-side { padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: 0.35rem; }
.bout-name { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; }
.bout-note { font-weight: 600; }
.bout-note a { display: inline-block; padding: 0.35rem 0; }

.bout-vs {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  padding: 0.4rem 1rem;
}
.bout-vs a { display: inline-block; padding: 0.4rem 0; }

@media (min-width: 52rem) {
  .bout { grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); align-items: stretch; }
  .bout-side.plum { text-align: right; }
  .bout-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    border-block: var(--seam) solid var(--rose-deep);
  }
}

.home-body { border-top: var(--seam) solid var(--plum); }
.home-prose { max-width: var(--wide); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 4.5rem); }

@media (min-width: 60rem) {
  .home-prose { column-count: 2; column-gap: 4rem; column-rule: var(--seam) solid var(--paper); }
  .home-prose h2 { break-after: avoid; }
  .home-prose p { break-inside: avoid; }
  .home-prose > .photo-hero { column-span: all; margin-bottom: 2.5rem; }
}

/* ---------- ranked list: entries pair off like a bracket ---------- */

.list-body { min-width: 0; }

.list-body #ranked-list + ol {
  list-style: none;
  padding: 0;
  counter-reset: rank;
  display: grid;
  max-width: 46rem;
}

.list-body #ranked-list + ol > li {
  counter-increment: rank;
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: 0.65rem 2.5rem 0.65rem 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.list-body #ranked-list + ol > li::before {
  content: counter(rank);
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list-body #ranked-list + ol > li:nth-child(odd) {
  background: var(--plum);
  --fg-body: #f4e6ee;
  --fg-link: #ffc9d9;
}
.list-body #ranked-list + ol > li:nth-child(odd)::before { color: var(--rose); }
.list-body #ranked-list + ol > li:nth-child(odd) .text-role-link:hover { color: #ffffff; }
.list-body #ranked-list + ol > li:nth-child(odd) a:focus-visible { outline-color: #ffc9d9; }

.list-body #ranked-list + ol > li:nth-child(even) {
  background: var(--rose);
  --fg-body: var(--plum-deep);
  --fg-link: var(--plum);
  margin-bottom: 0.9rem;
}
.list-body #ranked-list + ol > li:nth-child(even)::before { color: var(--plum); }

/* The bracket arm joining each pair at the right edge. */
.list-body #ranked-list + ol > li:nth-child(odd)::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  height: 100%;
  width: 0.8rem;
  border: 3px solid var(--paper);
  border-left: 0;
}
.list-body #ranked-list + ol > li:nth-child(odd):last-child::after { display: none; }

.list-body #entry-blurbs ~ h3 {
  padding-left: 0.8rem;
  border-left: var(--seam) solid var(--plum);
}
.list-body #entry-blurbs ~ h3:nth-of-type(even) { border-left-color: var(--rose-deep); }

.list-body #verdict { padding-top: 1rem; border-top: var(--seam) solid var(--plum); }

/* ---------- provider review: profile card ---------- */

/* A tall rose profile card stands to the left with the name set light and condensed; the review reads beside it on off-white, and plum appears only in the cons column. */
.profile {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) var(--gutter) 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.profile-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2rem);
}

.profile-kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.profile-name h1 {
  font-weight: 300;
  font-size: clamp(2.75rem, 11vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.profile-seam {
  display: block;
  width: 5rem;
  height: var(--seam);
  background: linear-gradient(90deg, var(--plum) 0 50%, var(--rose-deep) 50% 100%);
}

.profile-note { align-self: end; max-width: 22rem; font-size: 0.95rem; font-weight: 600; line-height: 1.45; }

@media (min-width: 60rem) {
  .profile { grid-template-columns: 21rem minmax(0, 1fr); align-items: start; }
  .profile-card {
    position: sticky;
    top: 7rem;
    min-height: min(34rem, calc(100vh - 9rem));
  }
  .profile-name h1 { font-size: clamp(3rem, 4.4vw, 4.25rem); }
}

.review-body { min-width: 0; padding-top: 0.25rem; }
.review-body > * { max-width: 44rem; }

/* Section heads read as small tracked labels instead of display headings. */
.review-body > h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.review-body > * + h2 { margin-top: 2.75rem; }

.review-body > #verdict + p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.22;
}

/* Pros and cons: two columns side by side, a white column for what the count supports and a plum column for what it leaves out. */
.review-body > #pros-and-cons + p,
.review-body > #pros-and-cons + p + ul + p {
  margin-top: 0.9rem;
  padding: 1.1rem 1.25rem 0;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
}

.review-body > #pros-and-cons + p + ul,
.review-body > #pros-and-cons + p + ul + p + ul {
  margin-top: 0;
  padding: 0.6rem 1.25rem 1.3rem 2.5rem;
}

.review-body > #pros-and-cons + p,
.review-body > #pros-and-cons + p + ul {
  background: #ffffff;
  --fg-body: var(--plum-deep);
  --fg-heading: var(--plum-deep);
  --fg-link: var(--rose-deep);
}
.review-body > #pros-and-cons + p { border-top: var(--seam) solid var(--rose-deep); }

.review-body > #pros-and-cons + p + ul + p,
.review-body > #pros-and-cons + p + ul + p + ul {
  background: var(--plum);
  --fg-body: #f4e6ee;
  --fg-heading: #ffffff;
  --fg-link: #ffc9d9;
}
.review-body > #pros-and-cons + p + ul + p { margin-top: var(--seam); }
.review-body > #pros-and-cons + p + ul + p + ul a:focus-visible { outline-color: #ffc9d9; }

@media (min-width: 72rem) {
  .review-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--seam); grid-auto-flow: row dense; }
  .review-body > * { grid-column: 1 / -1; }
  .review-body > #pros-and-cons + p,
  .review-body > #pros-and-cons + p + ul { grid-column: 1; max-width: none; }
  .review-body > #pros-and-cons + p + ul + p,
  .review-body > #pros-and-cons + p + ul + p + ul { grid-column: 2; max-width: none; }
  .review-body > #pros-and-cons + p + ul + p { margin-top: 0.9rem; border-top: var(--seam) solid var(--plum); }
}

.review-body > #next-step + p {
  padding: 1.1rem 1.25rem;
  background: var(--rose-pale);
}

/* ---------- comparison: mirrored columns around a center label ---------- */

.compare-body {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
}

@media (min-width: 60rem) {
  .compare-body { display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr); grid-auto-flow: row dense; }
  .compare-body > * { grid-column: 1 / -1; }
  .compare-body > #what-this-page-compares,
  .compare-body > #what-this-page-compares + p { grid-column: 1; justify-self: end; }
  .compare-body > #what-this-page-compares { text-align: right; }
  .compare-body > #how-the-providers-are-ranked,
  .compare-body > #how-the-providers-are-ranked + p { grid-column: 3; justify-self: start; }
  .compare-body > #how-the-providers-are-ranked { position: relative; margin-top: 0; }
  .compare-body > #how-the-providers-are-ranked::before {
    content: "vs";
    position: absolute;
    left: -4.25rem;
    top: -0.2rem;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rose-deep);
    color: #ffffff;
    font-size: 1.6rem;
  }
}

.compare-body > #what-this-page-compares,
.compare-body > #how-the-providers-are-ranked {
  padding-bottom: 0.5rem;
  border-bottom: var(--seam) solid var(--plum);
}
.compare-body > #how-the-providers-are-ranked { border-bottom-color: var(--rose-deep); }

.compare-body > #comparison-table + .table-scroll thead th { background: var(--plum); --fg-heading: #ffffff; border-bottom-color: var(--rose); }
.compare-body > #comparison-table + .table-scroll tbody tr:first-child td { background: var(--rose); --fg-body: var(--plum-deep); font-weight: 700; }

.compare-body > #row-by-row ~ p strong { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }

.compare-body > #verdict { padding-top: 1rem; border-top: var(--seam) solid var(--plum); }

/* ---------- about: short manifesto ---------- */

.manifesto-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: var(--seam) solid var(--plum);
  display: grid;
  gap: 1.25rem;
}

.manifesto-title h1 { font-size: clamp(3rem, 9vw, 6rem); line-height: 0.92; }
.manifesto-lede { max-width: 36rem; font-size: 1.2rem; font-weight: 600; line-height: 1.45; }

.manifesto-body {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
}

@media (min-width: 56rem) {
  .manifesto-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 3rem; grid-auto-flow: row dense; }
  .manifesto-body > * { grid-column: 2; }
  .manifesto-body > h2 { grid-column: 1; text-align: right; padding-top: 2.25rem; margin-top: 0; }
  .manifesto-body > h2 + * { padding-top: 2.4rem; margin-top: 0; border-top: 1px solid var(--line-soft); }
  .manifesto-body > .photo-hero { grid-column: 1 / -1; }
}

.manifesto-body > h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.manifesto-body > h2:nth-of-type(even) { color: var(--rose-deep); }

/* ---------- contact: plum panel form ---------- */

.contact-grid {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

.plum-form { display: grid; }
.form-head { padding: 1.5rem 1.5rem 0; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }

.field-row { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 1rem; }

@media (min-width: 36rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.35rem; }
.field-label { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }

.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--plum-deep);
  background: #ffffff;
  border: 2px solid var(--rose);
  border-radius: 0;
}

.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid #ffc9d9; outline-offset: 2px; }

.submit-bar {
  --fg-heading: var(--plum-deep);
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  background: var(--rose);
  border: 0;
  cursor: pointer;
}
.submit-bar:hover { background: #f3c4d1; }
.plum-form .submit-bar:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }

/* ---------- thank you: split two-tone confirmation ---------- */

.split-confirm { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 3rem auto 3rem; }
.split-confirm .split-panel { padding: 0; grid-row: 1 / 4; }
.split-confirm .split-left { grid-column: 1; }
.split-confirm .split-right { grid-column: 2; }

.confirm-line {
  grid-row: 2;
  grid-column: 1 / 3;
  z-index: 1;
  margin-inline: clamp(1rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter);
  text-align: center;
  border-top: var(--seam) solid var(--rose-deep);
}

.confirm-title h1 { font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.95; }

.error-body > p:last-child { margin-top: 1.75rem; font-weight: 700; }
.error-body > p:last-child a { display: inline-block; padding: 0.6rem 0; }

.thanks-body, .error-body {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 7vw, 4.5rem);
}

.back-link { margin-top: 1.75rem; font-weight: 700; }
.back-link a { display: inline-block; padding: 0.6rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
