@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

h4,
h5,
h6 {
  line-height: 1.2;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.6vw, var(--text-display));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: var(--weight-display);
}

h2 {
  font-size: clamp(1.875rem, 3.6vw, var(--text-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  font-weight: var(--weight-display);
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-medium);
}

p {
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}

a {
  color: var(--primary);
  text-decoration: none;
}

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

li {
  list-style: none;
}

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

strong {
  font-weight: 500;
  color: var(--ink);
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--ink);
  word-break: break-word;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

::-moz-selection {
  background: var(--surface-blue);
  color: var(--ink);
}

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

:root {
  scrollbar-color: var(--outline) transparent;
  accent-color: var(--primary);
  caret-color: var(--primary);
}

::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--outline);
  border: 0.25rem solid var(--surface);
  border-radius: var(--radius-pill);
}

:focus-visible {
  outline: 0.1875rem solid var(--primary);
  outline-offset: 0.25rem;
  border-radius: var(--radius-small);
}

.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem var(--space-3);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 500;
  transition: top var(--duration) var(--ease-standard);
}
.skip-link:focus {
  top: var(--space-2);
}

.slab {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background: var(--surface);
}

.slab-grey {
  background: var(--surface-grey);
}

.slab-blue {
  background: var(--surface-blue);
}

.slab-dark {
  background: var(--surface-dark);
  color: var(--on-dark);
}
.slab-dark h1,
.slab-dark h2,
.slab-dark h3 {
  color: var(--on-dark);
}
.slab-dark p {
  color: var(--on-dark-secondary);
}
.slab-dark strong {
  color: var(--on-dark);
}
.slab-dark a:not(.btn) {
  color: var(--on-dark-accent);
}
.slab-dark p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.container {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding-left: clamp(1rem, 3.5vw, 1.5rem);
  padding-right: clamp(1rem, 3.5vw, 1.5rem);
}

.slab-head {
  max-width: 44rem;
  margin: 0 auto var(--space-6);
  text-align: center;
}
.slab-head h2 {
  margin-bottom: var(--space-2);
}
.slab-head p {
  max-width: none;
  margin: 0 auto;
  color: var(--ink-secondary);
  font-size: var(--text-lede);
}

.slab-head-left {
  margin-left: 0;
  text-align: left;
}
.slab-head-left p {
  margin-left: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem var(--space-3);
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}

.btnfill {
  background: var(--primary);
  color: var(--on-primary);
}
.btnfill:hover, .btnfill:focus-visible {
  background: var(--primary-hover);
  box-shadow: var(--shadow-panel);
  color: var(--on-primary);
}

.btnoutline {
  background: transparent;
  color: var(--primary);
  border-color: var(--outline);
}
.btnoutline:hover, .btnoutline:focus-visible {
  background: var(--surface-blue);
  border-color: transparent;
}

.btnplain {
  min-height: 3rem;
  padding: 0.75rem 0;
  background: transparent;
  color: var(--primary);
  border: 0;
}
.btnplain .icon {
  font-size: 0.75rem;
  transition: transform var(--duration) var(--ease-standard);
}
.btnplain:hover .icon, .btnplain:focus-visible .icon {
  transform: translateX(0.25rem);
}

.btn-lg {
  min-height: 3.5rem;
  padding: 0.875rem var(--space-4);
  font-size: 1.125rem;
}

.slab-dark .btnoutline {
  color: var(--on-dark);
  border-color: rgba(232, 234, 237, 0.3);
}
.slab-dark .btnoutline:hover, .slab-dark .btnoutline:focus-visible {
  background: rgba(232, 234, 237, 0.08);
  border-color: rgba(232, 234, 237, 0.5);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(0.75rem);
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--duration) var(--ease-standard);
}

.masthead.is-stuck {
  border-bottom-color: var(--outline-soft);
}

.masthead-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.logo .logo-mark {
  /* em, not rem: the lockup shrinks at narrow widths and the
     mark has to shrink with the word, not next to it. */
  width: 3rem;
  height: 3rem;
  display: block;
  flex: none;
}
.logo strong {
  font-weight: 500;
}

.mast-nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}
.mast-nav a {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  color: var(--ink-secondary);
  font-size: var(--text-small);
  font-weight: 500;
  transition: background-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}
.mast-nav a:hover, .mast-nav a:focus-visible {
  background: var(--surface-grey-deep);
  color: var(--ink);
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-standard), transform 80ms var(--ease-standard);
}
.nav-toggle:hover, .nav-toggle:focus-visible {
  background: var(--surface-grey-deep);
}
.nav-toggle:active {
  transform: scale(0.94);
}
.nav-toggle .nav-icon-close {
  display: none;
}

.masthead.nav-open .nav-toggle .nav-icon-open {
  display: none;
}
.masthead.nav-open .nav-toggle .nav-icon-close {
  display: inline-block;
}

.header-cta {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-small);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 0.4375rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  color: var(--ink-secondary);
  border: 0;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  background: var(--surface-grey-deep);
  color: var(--ink);
}
.theme-toggle .theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.theme-toggle .theme-icon-light {
  display: none;
}
.theme-toggle .theme-icon-dark {
  display: inline-block;
}

:root[data-theme=dark] .theme-toggle .theme-icon-light {
  display: inline-block;
}
:root[data-theme=dark] .theme-toggle .theme-icon-dark {
  display: none;
}

.herosec {
  padding-top: var(--space-7);
  padding-bottom: 0;
  overflow: hidden;
}

.hero-copy {
  max-width: 52rem;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.hero-copy h1 {
  margin-bottom: var(--space-3);
}

.hero-lede {
  max-width: 40rem;
  margin: 0 auto var(--space-4);
  color: var(--ink-secondary);
  font-size: var(--text-lede);
  line-height: 1.5;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem var(--space-3);
  margin-top: var(--space-3);
}
.hero-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}
.hero-assurances .icon {
  font-size: 0.6875rem;
  color: var(--status-ok);
}

.hero-image {
  margin: 0 auto;
  max-width: 68rem;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--surface-grey-deep);
  box-shadow: var(--shadow-lift);
}
.hero-image img {
  width: 100%;
  height: clamp(12rem, 40vw, 32rem);
  object-fit: cover;
  object-position: top center;
}

.proofbar-slab {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.proofbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-top: 0.0625rem solid var(--outline-soft);
  border-bottom: 0.0625rem solid var(--outline-soft);
}

.proofbar-item {
  text-align: center;
}
.proofbar-item dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.proofbar-item dd {
  color: var(--ink-secondary);
  font-size: var(--text-small);
  line-height: 1.4;
}

.crop {
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--surface-grey-deep);
  box-shadow: var(--shadow-panel);
}
.crop img {
  width: 100%;
  height: var(--crop-h, clamp(11rem, 26vw, 22rem));
  object-fit: cover;
  object-position: var(--crop-x, center) var(--crop-y, top);
}

.crop-caption {
  margin: var(--space-2) 0 0;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}

.proof-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-6);
  /* start, not center. The argument column runs past 1300px on a wide
     screen while the four figures come to about 340px, so centring them
     left roughly 500px of empty slab above and below — the column read as
     a mistake rather than a composition. They now begin level with the
     headline, which is the only edge a reader can relate them to. */
  align-items: start;
}

.proof-argument h2 {
  margin-bottom: var(--space-3);
}
.proof-argument p {
  /* --text-body, matching the FAQ answers. The page runs two
     registers: --text-lede for a single-sentence slab intro, and
     --text-body for copy someone actually reads a paragraph at a
     time. This is the second kind. It was hardcoded to 2rem, within
     a quarter-rem of an h2, so the argument competed with its own
     headline.

     No max-width. It was 34rem, which inside a 580px column left a
     36px strip of nothing down the right of every paragraph while the
     video beneath ran the full column — so the text and the thing it
     refers to did not share an edge. The column itself is now the
     measure, which is what the grid ratio above is for. */
  font-size: var(--text-body);
  line-height: 1.65;
}

.proof-turn {
  margin-top: var(--space-4);
  color: var(--on-dark) !important;
  font-size: var(--text-lede) !important;
  font-family: var(--font-display);
  line-height: 1.4;
}

.incident-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  /* The argument beside this is four times taller, so without sticky the
     figures scroll away within the first paragraph and the reader meets
     the 139-days claim with nothing to check it against. Sticky keeps the
     evidence on screen for exactly as long as the argument that cites it.
     The offset clears the sticky masthead. */
  position: sticky;
  top: calc(4.5rem + var(--space-3));
}

.incident-figure {
  padding: var(--space-3);
  background: rgba(232, 234, 237, 0.06);
  border-radius: var(--radius-panel);
}
.incident-figure dt {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-dark-accent);
  margin-bottom: 0.5rem;
}
.incident-figure dd {
  color: var(--on-dark-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

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

.verify-panel {
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.verify-panel h3 {
  margin-bottom: var(--space-2);
}

.endpoint-list dt {
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--primary);
  word-break: break-all;
}
.endpoint-list dd {
  margin-bottom: var(--space-2);
  color: var(--ink-secondary);
  font-size: var(--text-small);
}
.endpoint-list dd:last-child {
  margin-bottom: 0;
}

.endpoint-note,
.verify-note {
  margin: var(--space-2) 0 0;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}

.refusal-list {
  display: grid;
  gap: 0.75rem;
}
.refusal-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  color: var(--ink-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}
.refusal-list .icon {
  margin-top: 0.3125rem;
  color: var(--ink-tertiary);
  font-size: 0.75rem;
}

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.bento-cell {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.bento-wide {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-4);
  align-items: center;
}

.bento-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-2);
  background: var(--surface-blue);
  color: var(--primary);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
}

.bento-body h3 {
  margin-bottom: 0.5rem;
}
.bento-body p {
  color: var(--ink-secondary);
  margin-bottom: 0;
}

.sequence-sample {
  margin-top: var(--space-3) !important;
  padding: 0.75rem var(--space-2);
  background: var(--surface-grey-deep);
  border-radius: var(--radius-small);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink) !important;
  max-width: none;
  overflow-x: auto;
  white-space: nowrap;
}

.sample-label {
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--ink-tertiary);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sequence-foot {
  margin: var(--space-4) auto 0;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
  text-align: center;
  max-width: 44rem;
}

.rule-list {
  display: grid;
  gap: var(--space-2);
  max-width: 56rem;
  margin: 0 auto;
}

.rule-row {
  display: grid;
  grid-template-columns: clamp(4rem, 8vw, 6rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-panel);
  transition: box-shadow var(--duration) var(--ease-standard);
}
.rule-row:hover {
  box-shadow: var(--shadow-panel);
}

.rule-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.rule-id {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--ink-tertiary);
}

.rule-body h3 {
  margin-bottom: 0.25rem;
}
.rule-body p {
  margin-bottom: 0;
  color: var(--ink-secondary);
}

.band {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
}
.band::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.band-ok {
  background: var(--status-ok-soft);
  color: var(--status-ok);
}

.band-watch {
  background: var(--status-watch-soft);
  color: var(--status-watch);
}

.band-risk {
  background: var(--status-risk-soft);
  color: var(--status-risk);
}

.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-6);
  align-items: center;
}

.score-copy > p {
  color: var(--ink-secondary);
  font-size: var(--text-lede);
  margin-bottom: var(--space-4);
}

.score-facts {
  display: grid;
  gap: var(--space-2);
}
.score-facts > div {
  padding: var(--space-2) 0;
  border-bottom: 0.0625rem solid var(--outline-soft);
}
.score-facts dt {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.125rem;
}
.score-facts dd {
  color: var(--ink-secondary);
  font-size: var(--text-small);
}

.score-visual {
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.score-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.125rem;
  margin-bottom: 0.25rem;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.score-value {
  font-size: clamp(4rem, 9vw, 6rem);
  letter-spacing: -0.03em;
}

.score-total {
  font-size: 1.25rem;
  color: var(--ink-tertiary);
}

.score-caption {
  max-width: none;
  margin-bottom: var(--space-3);
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}

.score-scale {
  display: grid;
  gap: 0.5rem;
  text-align: left;
}

.score-seg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.625rem var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--ink-secondary);
  font-size: var(--text-small);
}

.score-seg.is-active {
  background: var(--surface-grey-deep);
  color: var(--ink);
  font-weight: 500;
}

.score-seg-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.score-seg-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.seg-risk .score-seg-label {
  color: var(--status-risk);
}

.seg-watch .score-seg-label {
  color: var(--status-watch);
}

.seg-ok .score-seg-label {
  color: var(--status-ok);
}

.score-seg-range {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
}

.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.dashboard-callouts {
  display: grid;
  gap: var(--space-3);
}
.dashboard-callouts li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  font-size: var(--text-small);
  color: var(--ink-secondary);
  line-height: 1.5;
}
.dashboard-callouts .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--surface-blue);
  color: var(--primary);
  border-radius: 50%;
  font-size: 0.875rem;
}

.dashboard-image {
  min-width: 0;
}

.screens-swiper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: var(--space-5);
}
.screens-swiper .swiper-wrapper {
  align-items: stretch;
}
.screens-swiper .swiper-slide {
  width: 100%;
  min-width: 0;
  height: auto;
}
.screens-swiper .shot {
  margin: 0;
}
.screens-swiper {
  --shot-h: clamp(15rem, 34vw, 30rem);
  --nav-size: clamp(2.5rem, 3.4vw, 3rem);
}
.screens-swiper .shot img {
  width: 100%;
  height: var(--shot-h);
  object-fit: cover;
  object-position: top center;
  background: var(--surface-grey-deep);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-panel);
}
.screens-swiper .shot figcaption {
  margin-top: 0.875rem;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}
.screens-swiper {
  --swiper-navigation-size: 1rem;
}
.screens-swiper .swiper-button-prev,
.screens-swiper .swiper-button-next {
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  border: 0.0625rem solid var(--outline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-panel);
  top: calc(var(--shot-h) / 2);
  margin-top: calc(var(--nav-size) / -2);
  transition: background-color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard), transform 80ms var(--ease-standard);
}
.screens-swiper .swiper-button-prev::after,
.screens-swiper .swiper-button-next::after {
  font-size: var(--swiper-navigation-size);
  font-weight: 700;
}
.screens-swiper .swiper-button-prev:hover, .screens-swiper .swiper-button-prev:focus-visible,
.screens-swiper .swiper-button-next:hover,
.screens-swiper .swiper-button-next:focus-visible {
  background: var(--surface-blue);
  border-color: transparent;
  color: var(--primary);
  box-shadow: var(--shadow-lift);
}
.screens-swiper .swiper-button-prev:active,
.screens-swiper .swiper-button-next:active {
  transform: scale(0.94);
}
.screens-swiper .swiper-button-prev.swiper-button-disabled,
.screens-swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.screens-swiper .swiper-button-prev {
  left: 0.75rem;
}
.screens-swiper .swiper-button-next {
  right: 0.75rem;
}
.screens-swiper .swiper-pagination {
  bottom: 0;
}
.screens-swiper .swiper-pagination-bullet {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--outline);
  opacity: 1;
}
.screens-swiper .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}
.screens-swiper .swiper-pagination-bullet {
  transition: background-color var(--duration) var(--ease-standard);
}
.screens-swiper .swiper-pagination-bullet-active {
  width: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

.pricing-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.pricing-card.is-available {
  box-shadow: var(--shadow-lift);
  outline: 0.125rem solid var(--primary);
}

.pricing-card.is-upcoming {
  background: transparent;
  box-shadow: none;
  outline: 0.0625rem solid var(--outline);
}

.pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pricing-tier {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
}

.pricing-status {
  margin: 0;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--surface-grey-deep);
  color: var(--ink-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.is-available .pricing-status {
  background: var(--status-ok-soft);
  color: var(--status-ok);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: var(--space-3);
  max-width: none;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price-period {
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}

.pricing-features {
  display: grid;
  gap: 0.75rem;
  flex: 1;
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--outline-soft);
}
.pricing-features li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.625rem;
  color: var(--ink-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}
.pricing-features .icon {
  margin-top: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--primary);
}

.pricing-btn {
  width: 100%;
  margin-top: auto;
}

.pricing-note {
  max-width: 48rem;
  margin: var(--space-4) auto 0;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
  text-align: center;
}

.faq-shell {
  max-width: 48rem;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.faq-question .icon {
  flex: none;
  color: var(--ink-tertiary);
  font-size: 0.8125rem;
  transition: transform var(--duration) var(--ease-standard);
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
  padding-bottom: var(--space-3);
}

.faq-item.open .faq-question .icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease-standard);
  padding: 0 var(--space-3);
}
.faq-answer > * {
  overflow: hidden;
}
.faq-answer p {
  margin-bottom: 0;
  max-width: none;
  color: var(--ink-secondary);
}

.cta-content {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.cta-content h2 {
  margin-bottom: var(--space-2);
}
.cta-content > p {
  max-width: none;
  margin: 0 auto var(--space-4);
  font-size: var(--text-lede);
}

.cta-content .cta-note {
  margin: var(--space-4) auto 0;
  max-width: none;
  font-size: var(--text-small);
}

.waitlist {
  margin: 0 auto;
  text-align: left;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-2);
}

.waitlist-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 15.5rem;
  min-width: 0;
}
.waitlist-field.waitlist-email {
  flex-basis: 14rem;
}

.waitlist-label {
  font-size: var(--text-small);
  color: var(--on-dark-secondary);
}

.waitlist-field input,
.waitlist-field select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 1.25rem;
  border: 1px solid rgba(229, 232, 239, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(229, 232, 239, 0.06);
  color: var(--on-dark);
}
.waitlist-field input::placeholder,
.waitlist-field select::placeholder {
  color: var(--on-dark-secondary);
}
.waitlist-field input:focus-visible,
.waitlist-field select:focus-visible {
  outline: 2px solid var(--on-dark-accent);
  outline-offset: 2px;
}

.waitlist-field select option {
  color: var(--ink);
}

.waitlist-btn {
  flex: 0 0 auto;
}

.waitlist-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cta-content .waitlist-status {
  min-height: 1.5rem;
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-body);
  color: var(--on-dark);
}
.cta-content .waitlist-status.is-error {
  color: var(--status-watch-soft);
}

.cta-content .waitlist-promise {
  margin: var(--space-1) 0 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--on-dark-secondary);
}

/* The Turnstile widget. Empty until its script loads on first interaction, so
   it must take no space while it is empty -- otherwise every visitor who never
   touches the form sees a gap where nothing ever appears. :not(:empty) does
   that without needing JavaScript to add a class. */
.waitlist-turnstile:not(:empty) {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

@media (max-width: 40rem) {
  .waitlist-btn {
    width: 100%;
  }
}
.sitefooter {
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  background: var(--surface-grey);
}

.footer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

.footer-brand .logo {
  margin-bottom: var(--space-2);
}
.footer-brand p {
  max-width: 26rem;
  margin-bottom: 0;
  color: var(--ink-secondary);
  font-size: var(--text-small);
}

.footer-links h3 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.footer-links ul {
  display: grid;
  gap: 0.625rem;
}
.footer-links a {
  color: var(--ink-secondary);
  font-size: var(--text-small);
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--primary);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--outline);
}
.footer-bottom p {
  margin: 0;
  max-width: none;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), box-shadow var(--duration) var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .hero-image {
  transform: translateY(1.25rem) scale(0.99);
  transform-origin: 50% 0;
}

.js-reveal .hero-image.is-visible {
  transform: none;
}

.bento-cell,
.verify-panel,
.pricing-card,
.incident-figure {
  transition: transform var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard);
}

@media (hover: hover) {
  .bento-cell:hover,
  .verify-panel:hover,
  .pricing-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-lift);
  }
  .incident-figure:hover {
    transform: translateY(-0.125rem);
  }
  .crop img,
  .hero-image img {
    transition: transform var(--duration-slow) var(--ease-standard);
  }
  .crop:hover img {
    transform: scale(1.02);
  }
}
.btn:active,
.theme-toggle:active,
.faq-question:active {
  transform: scale(0.985);
}

.btn,
.theme-toggle,
.faq-question {
  transition: transform 80ms var(--ease-standard), background-color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}

.theme-toggle .icon {
  transition: transform var(--duration-slow) var(--ease-standard);
}

.theme-toggle:hover .icon {
  transform: rotate(15deg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 62rem) {
  .slab {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .masthead-actions {
    margin-left: auto;
  }
  .mast-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-1) clamp(1rem, 3.5vw, 1.5rem) var(--space-2);
    background: var(--surface);
    border-bottom: 0.0625rem solid var(--outline);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--duration) var(--ease-standard), transform var(--duration) var(--ease-standard), visibility var(--duration);
  }
  .mast-nav a {
    padding: 0.875rem 0.75rem;
    border-radius: var(--radius-small);
    font-size: var(--text-body);
  }
  .masthead.nav-open .mast-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .proof-row,
  .score-row,
  .dashboard-row,
  .bento,
  .bento-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  /* Once the row stacks, the figures sit below the argument rather than
     beside it, so there is nothing left for them to stay level with.
     Sticky would just pin them over the slab below. */
  .incident-figures {
    position: static;
  }
  /* Side by side, the grid column is the measure and the paragraphs need
     no max-width of their own. Stacked, there is no column — the argument
     would run the full container, about 115 characters a line. Capping the
     block rather than the paragraphs keeps the video on the same edge as
     the text it refers to, which was the point of removing the cap above. */
  .proof-argument {
    max-width: 42rem;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 48rem) {
  .masthead-row {
    gap: var(--space-2);
    min-height: 3.75rem;
  }
  .masthead-actions {
    gap: 0.125rem;
  }
  .header-cta {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .logo {
    font-size: 1rem;
  }
  .rule-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: var(--space-3);
  }
  .rule-meta {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .screens-swiper .swiper-button-prev,
  .screens-swiper .swiper-button-next {
    display: none;
  }
}
/* Brand mark: fills come from tokens so the tile inverts with the theme.
   Set here rather than as presentation attributes, which cannot take var(). */
.logo .logo-mark .ls-tile {
  fill: var(--logo-tile);
}
.logo .logo-mark .ls-current {
  fill: var(--logo-current);
}
.logo .logo-mark .ls-past {
  fill: var(--logo-past);
}

/* A CTA with nowhere to go yet. Rendered as a span, not an anchor, so it
   cannot be clicked or focused into - a button that looks live and does
   nothing costs more trust than saying "not yet" plainly. */
.btn.is-pending {
  background: var(--primary);
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}
.btn.is-pending:hover {
  background: var(--primary);
  transform: none;
  box-shadow: none;
}

/* Umbrella-company byline. Deliberately quieter than the product
   description above it: it is attribution, not a second pitch. */
.footer-byline {
  margin-top: 0.75rem;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}
.footer-byline a {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.footer-byline a:hover {
  color: var(--primary);
}

/* The concession block. Set apart from the refusal list above it because
   it is a different kind of admission: that list is what the plugin
   chooses not to do, this is what it cannot do. */
.missed-case {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-grey);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius-panel);
}
.missed-case h4 {
  margin: 0 0 0.5rem;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
}
.missed-case p {
  margin: 0 0 0.75rem;
  color: var(--ink-secondary);
  font-size: var(--text-small);
  line-height: 1.6;
}
.missed-case p:last-child {
  margin-bottom: 0;
}

/* 375px. In px rather than the rem used elsewhere because this
   breakpoint names a specific device width, and 23.4375rem reads as
   nothing. The footer's bottom row carries two sentences now - the licence
   and brand split, and the analytics disclosure - and at this width
   space-between drives them into each other. Stack and centre instead. */
@media (max-width: 375px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
  }
  .footer-bottom p {
    font-size: 12px;
  }
  .logo {
    font-size: 0.7rem;
    gap: 0rem;
  }
  .logo .logo-mark {
    width: 1.2rem;
    height: 1.2rem;
  }
  .missed-case {
    padding: var(--space-2);
  }
  .missed-case h4 {
    font-size: 0.9375rem;
  }
  .missed-case p {
    font-size: 0.8125rem;
    line-height: 1.65;
  }
}
/* Contact sits under the byline, quieter again: it is the answer to a
   question rather than something to read on the way past. */
.footer-contact {
  margin-top: 0.5rem;
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}
.footer-contact a {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.footer-contact a:hover {
  color: var(--primary);
}

/* Contact sits as its own column beside Background rather than spanning
   the row. The footer grid is auto-fit, so it takes the next track without
   any column count needing to change. */
.footer-row > .footer-contact {
  margin-top: 0;
  align-self: start;
}

.article {
  padding-top: var(--space-5);
}

.article-body {
  max-width: 53.5rem;
  margin: 0 auto;
}

.index-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.index-hero-panel {
  aspect-ratio: 1/1;
  border-radius: 1.5rem;
  overflow: hidden;
}

.index-hero-say {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) clamp(1.5rem, 5%, 3.5rem);
  background: var(--surface-grey);
}
.index-hero-say h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: var(--track-h2);
  font-weight: var(--weight-display);
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
}
.index-hero-say p {
  margin: 0 0 var(--space-3);
  color: var(--ink-secondary);
  font-size: var(--text-body);
  line-height: 1.6;
  text-wrap: pretty;
}
.index-hero-say .btn {
  align-self: center;
}

.index-hero-show {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4%, 2.5rem);
  background: var(--surface-dark);
}
.index-hero-show img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.42, 1.67, 0.21, 0.9);
}
.index-hero-show:hover img {
  transform: scale(1.02);
}

@media (max-width: 44rem) {
  .index-hero {
    grid-template-columns: 1fr;
  }
  .index-hero-panel {
    aspect-ratio: auto;
  }
  .index-hero-say {
    padding: var(--space-4) var(--space-3);
  }
}
.crumbs {
  margin-bottom: var(--space-3);
  color: var(--ink-tertiary);
  font-size: var(--text-small);
}
.crumbs a {
  color: var(--ink-secondary);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.crumbs span {
  margin: 0 0.35rem;
}

.article-head {
  margin-bottom: var(--space-5);
}
.article-head h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  font-weight: var(--weight-display);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.article-standfirst {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--ink-secondary);
  margin-bottom: var(--space-2);
  text-wrap: pretty;
}

.article-meta {
  color: var(--ink-tertiary);
  font-size: var(--text-small);
  margin: 0;
}

.prose {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-secondary);
}
.prose p {
  margin: 0 0 1.25rem;
}
.prose strong {
  color: var(--ink);
  font-weight: 500;
}
.prose h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: var(--weight-display);
  color: var(--ink);
}
.prose h3 {
  margin: var(--space-3) 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
}
.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.prose a:hover {
  color: var(--primary-hover);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-grey-deep);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  color: var(--ink);
}
.prose pre {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border-radius: 0.75rem;
  background: var(--surface-grey-deep);
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: var(--text-mono);
  white-space: pre;
}
.prose ul:not([class]),
.prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}
.prose ul:not([class]) {
  list-style: disc;
}
.prose ul:not([class]) li,
.prose ol li {
  margin-bottom: 0.5rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.film {
  margin: var(--space-3) 0;
}
.film video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  background: var(--surface-dark);
}
.film figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--ink-tertiary);
}

.slab-dark .film figcaption {
  color: var(--on-dark-secondary);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
.article-table th, .article-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 0.0625rem solid var(--outline-soft);
}
.article-table th {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.source-list {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
}
.source-list li {
  margin-bottom: 0.5rem;
}

.article-note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-blue);
  border-radius: 1rem;
}
.article-note p {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.6;
}

.prose .article-related,
.article-related {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--outline-soft);
  font-size: var(--text-body);
  color: var(--ink-tertiary);
}
.prose .article-related a,
.article-related a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.0625rem solid var(--outline);
  padding-bottom: 0.05em;
}
.prose .article-related a:hover,
.article-related a:hover {
  color: var(--primary);
  border-bottom-color: currentColor;
}

.index-body {
  display: grid;
  grid-template-columns: 26rem 1fr;
  gap: var(--space-4);
  align-items: start;
}

.index-rail {
  position: sticky;
  top: 6rem;
}
.index-rail h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: var(--weight-display);
  margin: 0 0 var(--space-2);
}

.index-rail-note {
  color: var(--ink-secondary);
  margin: 0 0 var(--space-3);
  max-width: 24rem;
  text-wrap: pretty;
}

.index-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.index-filter {
  padding: 0.5rem 1.25rem;
  border: 0.0625rem solid var(--outline);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.index-filter:hover {
  background: var(--surface-grey);
}
.index-filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

@media (max-width: 52rem) {
  .index-body {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .index-rail {
    position: static;
  }
  .index-rail-note {
    max-width: 40rem;
  }
}
.article-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-figure {
  margin: 0 0 var(--space-5);
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.article-card {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 0.0625rem solid var(--outline-soft);
}
.article-card:first-child {
  padding-top: 0;
}
.article-card:last-child {
  border-bottom: 0;
}
.article-card .article-card-media {
  display: block;
  overflow: hidden;
}
.article-card .article-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.42, 1.67, 0.21, 0.9);
}
.article-card:hover .article-card-media img {
  transform: scale(1.03);
}
.article-card h2 a {
  transition: color 0.15s cubic-bezier(0.31, 0.94, 0.34, 1);
}
@media (max-width: 40rem) {
  .article-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-card .article-card-media img {
    transition: none;
  }
  .article-card:hover .article-card-media img {
    transform: none;
  }
}
.article-card[hidden] {
  display: none;
}
.article-card .article-topic {
  margin: 0 0 0.4rem;
  font-size: var(--text-small);
  color: var(--ink-tertiary);
}
.article-card h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: var(--track-h2);
  margin: 0 0 0.5rem;
  font-weight: var(--weight-display);
  text-wrap: balance;
}
.article-card h2 a {
  color: var(--ink);
  text-decoration: none;
}
.article-card h2 a:hover {
  color: var(--primary);
}
.article-card p {
  color: var(--ink-secondary);
  margin: 0 0 0.35rem;
  max-width: 40rem;
  text-wrap: pretty;
}
.article-card:hover h2 a {
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .article-card-media img,
  .index-hero-show img {
    transition: none;
  }
  .article-card:hover .article-card-media img,
  .index-hero-show:hover img {
    transform: none;
  }
}