.features-page {
  background: var(--color-paper);
}

.features-page .section {
  position: relative;
}

.features-hero__grid,
.features-colour__grid,
.features-offline__grid,
.features-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
}

.features-hero__copy,
.features-colour__copy,
.features-offline__copy,
.features-final__content,
.features-hero__figure,
.features-colour__figure,
.features-offline__diagram {
  min-width: 0;
}

.features-hero__copy { grid-column: 1 / span 1; }
.features-hero__figure { grid-column: 3 / span 1; margin: 0; width: 100%; }
.features-hero__copy h1 { max-width: 10ch; font-size: clamp(3.5rem, 6vw, 4.5rem); }
.features-hero__lead { max-width: 64ch; }
.features-hero__orientation { max-width: 62ch; color: var(--color-graphite-soft); }
.features-hero__index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); max-width: 37rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.features-hero__index span { min-width: 0; border-top: var(--border-default); padding-top: var(--space-2); }
.features-hero__index span::first-letter { color: var(--color-safety-orange); }
.features-hero__cta { min-height: 3rem; }
.features-hero__image { width: 100%; aspect-ratio: 4 / 5; }
.features-hero__image img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-fast); }
.features-hero__image:hover img { filter: brightness(1.06); }
.features-hero__figure figcaption { max-width: 52ch; }

.features-data__intro,
.features-matrix__intro,
.features-preferences__intro,
.features-progress__head {
  max-width: 43rem;
}

.features-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.features-card {
  display: flex;
  min-width: 0;
  min-height: 18rem;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: var(--space-5);
  transition: border-color var(--transition-fast);
}

.features-card:hover { border-top-color: var(--color-safety-orange); }
.features-card--mist { background: var(--color-steel-mist); }
.features-card h3 { margin: 0; }
.features-card p { margin: 0; }
.features-card__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 2rem; gap: var(--space-2); align-items: center; }
.features-card__top > span:first-child { color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.features-card__top .technical-label { margin: 0; }
.features-icon { position: relative; display: block; width: 2rem; height: 2rem; border: 1px solid var(--color-steel-blue); }
.features-icon::before, .features-icon::after { position: absolute; content: ""; background: var(--color-steel-blue); }
.features-icon--grid::before { inset: .45rem; background: repeating-linear-gradient(90deg, var(--color-steel-blue) 0 1px, transparent 1px .45rem); }
.features-icon--flow::before { width: 1.25rem; height: 1px; top: .95rem; left: .35rem; }
.features-icon--flow::after { width: .45rem; height: .45rem; right: .35rem; top: .72rem; transform: rotate(45deg); border-top: 1px solid var(--color-steel-blue); border-right: 1px solid var(--color-steel-blue); background: transparent; }
.features-icon--clock::before { width: 1px; height: .7rem; top: .4rem; left: .95rem; }
.features-icon--clock::after { width: .55rem; height: 1px; top: 1.1rem; left: .95rem; }
.features-icon--signal::before { width: 1.3rem; height: 1px; top: .95rem; left: .35rem; transform: rotate(-35deg); }
.features-icon--step::before { width: 1.25rem; height: 1.2rem; left: .35rem; bottom: .35rem; background: linear-gradient(to top, var(--color-steel-blue) 0 .15rem, transparent .15rem .4rem, var(--color-steel-blue) .4rem .55rem, transparent .55rem .8rem, var(--color-steel-blue) .8rem .95rem, transparent .95rem); }
.features-icon--levels::before { width: 1.25rem; height: 1px; left: .35rem; top: .55rem; box-shadow: 0 .45rem 0 var(--color-steel-blue), 0 .9rem 0 var(--color-steel-blue); }

.features-colour__copy { grid-column: 1 / span 1; }
.features-colour__figure { grid-column: 3 / span 1; padding: var(--space-4); }
.features-colour__lead { max-width: 62ch; }
.features-colour__image { width: 100%; aspect-ratio: 4 / 3; }
.features-colour__image img { width: 100%; height: 100%; object-fit: cover; }
.features-step-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.features-step-list article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; border-left: 1px solid var(--color-line); padding-left: var(--space-3); }
.features-step-list article > span { color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.features-step-list h3 { margin-bottom: var(--space-2); }
.features-step-list p { margin-bottom: 0; max-width: 55ch; }

.features-physics { overflow: hidden; }
.features-physics::before { position: absolute; inset: 0; content: ""; opacity: .35; background-image: linear-gradient(118deg, transparent 18%, var(--color-steel-blue) 18.1% 18.25%, transparent 18.4% 48%, var(--color-steel-blue) 48.1% 48.25%, transparent 48.4%); pointer-events: none; }
.features-physics__inner { position: relative; }
.features-physics__head { max-width: 43rem; }
.features-physics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.features-physics__grid article { min-width: 0; border-top: 1px solid var(--color-line-dark); padding-top: var(--space-4); }
.features-physics__grid h3 { margin-top: var(--space-2); }
.features-physics__grid p { margin-bottom: 0; }
.features-analysis-number { color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; }
.features-physics__note { margin: var(--space-6) 0 0; border-top: 1px solid var(--color-line-dark); padding-top: var(--space-3); color: var(--color-paper-warm); font-size: var(--text-meta); }

.features-rhythm__lead { max-width: 43rem; border-left: 3px solid var(--color-safety-orange); padding-left: var(--space-4); }
.features-rhythm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 5fr)); gap: calc(var(--space-5) * 2); margin-top: var(--space-6); max-width: 62rem; }
.features-rhythm__grid > article { min-width: 0; }
.features-rhythm__grid h3 { margin-top: var(--space-2); }

.features-offline__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 4fr); align-items: start; }
.features-offline__copy { grid-column: 1 / span 1; }
.features-offline__copy > .lead { max-width: 62ch; }
.features-offline__context { display: grid; gap: var(--space-2); margin-top: var(--space-5); max-width: 42rem; border: var(--border-default); background: var(--color-paper); padding: var(--space-5); }
.features-offline__context h3, .features-offline__context p { margin: 0; }
.features-offline__diagram { grid-column: 3 / span 1; display: flex; min-height: 14rem; align-items: center; gap: var(--space-2); border-left: 1px solid var(--color-steel-blue); padding-left: var(--space-4); color: var(--color-steel-blue); font-family: var(--font-heading); font-weight: 600; letter-spacing: .08em; }
.features-offline__diagram i { display: block; width: 1.8rem; height: 1px; background: var(--color-steel-blue); }
.features-offline__diagram b { display: block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-safety-orange); }
.features-offline__note { grid-column: 1 / span 3; max-width: 62rem; margin: var(--space-5) 0 0; border-top: var(--border-default); padding-top: var(--space-3); font-size: var(--text-meta); }

.features-progress__line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; height: 5rem; margin: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--color-steel-blue); }
.features-progress__line span { position: relative; height: 1px; background: var(--color-steel-blue); }
.features-progress__line span:nth-child(1) { align-self: end; }
.features-progress__line span:nth-child(2) { align-self: center; }
.features-progress__line span:nth-child(3) { align-self: center; transform: translateY(-1rem); }
.features-progress__line span:nth-child(4) { align-self: start; transform: translateY(1rem); }
.features-progress__line span::after { position: absolute; right: 0; top: -.25rem; width: .55rem; height: .55rem; border-radius: 50%; content: ""; background: var(--color-safety-orange); }
.features-progress__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 5fr)); gap: calc(var(--space-5) * 2); max-width: 62rem; }
.features-progress__grid > article { min-width: 0; }
.features-progress__grid h3 { margin-top: var(--space-2); }
.features-progress__link { display: inline-flex; min-height: 3rem; align-items: center; margin-top: var(--space-5); font-weight: 600; }

.features-matrix__table { display: grid; margin-top: var(--space-6); border-top: var(--border-default); }
.features-matrix__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); min-width: 0; border-bottom: var(--border-default); }
.features-matrix__row > * { display: flex; min-width: 0; min-height: 3.5rem; align-items: center; padding: var(--space-3); }
.features-matrix__row > span { overflow-wrap: anywhere; }
.features-matrix__row > a { font-weight: 600; }
.features-matrix__row:not(.features-matrix__row--head):hover { background: var(--color-paper-warm); }
.features-matrix__row--head { background: var(--color-graphite); color: var(--color-white); font-size: var(--text-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.features-matrix__row b { margin-right: var(--space-2); color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 1.35rem; }

.features-preferences__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.features-preference-card { display: flex; min-width: 0; min-height: 18rem; flex-direction: column; gap: var(--space-3); border: var(--border-default); background: var(--color-paper); padding: var(--space-5); }
.features-preference-card--mist { background: var(--color-steel-mist); }
.features-preference-card h3, .features-preference-card p { margin: 0; }
.features-preference-card__link { display: flex; min-height: 3rem; align-items: center; margin-top: auto; border-top: var(--border-default); padding-top: var(--space-3); font-weight: 600; }

.features-final { padding-block: var(--space-8); border-top: 2px solid var(--color-safety-orange); }
.features-final__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.features-final__content { grid-column: 1 / span 1; max-width: 43rem; }
.features-final__content p { max-width: 58ch; }
.features-final__actions { display: flex; flex-direction: column; gap: var(--space-4); }
.features-final__actions > div { display: flex; flex-wrap: wrap; gap: var(--space-5); }

@media (max-width: 68rem) {
  .features-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .features-hero__figure { grid-column: 2 / span 1; }
  .features-hero__copy h1 { font-size: 3.5rem; }
  .features-colour__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .features-colour__figure { grid-column: 2 / span 1; }
  .features-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-physics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-physics__grid article:last-child { grid-column: 1 / span 2; }
  .features-preferences__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-preferences__grid article:last-child { grid-column: 1 / span 1; }
}

@media (max-width: 61.25rem) {
  .features-hero__grid, .features-colour__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .features-hero__copy, .features-hero__figure, .features-colour__copy, .features-colour__figure { grid-column: 1 / span 1; }
  .features-hero__copy h1 { max-width: 12ch; font-size: clamp(2.625rem, 7vw, 3.5rem); }
  .features-hero__figure { max-width: 34rem; }
  .features-colour__figure { max-width: 42rem; }
  .features-offline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-offline__copy { grid-column: 1 / span 1; }
  .features-offline__diagram { grid-column: 2 / span 1; }
  .features-offline__note { grid-column: 1 / span 2; }
}

@media (max-width: 51.25rem) {
  .features-card-grid, .features-preferences__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .features-card, .features-preference-card { min-height: 0; }
  .features-physics__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .features-physics__grid article:last-child { grid-column: 1 / span 1; }
  .features-rhythm__grid, .features-progress__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .features-offline__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .features-offline__copy, .features-offline__diagram, .features-offline__note { grid-column: 1 / span 1; }
  .features-offline__diagram { min-height: 5rem; width: 100%; border-left: 0; border-top: 1px solid var(--color-steel-blue); padding: var(--space-3) 0 0; }
  .features-matrix__row { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
  .features-final__grid { grid-template-columns: minmax(0, 1fr); }
  .features-final__content { grid-column: 1 / span 1; }
}

@media (max-width: 40rem) {
  .features-page .section { padding-block: var(--space-8); }
  .features-hero__copy h1 { font-size: 2.625rem; line-height: 1; }
  .features-hero__lead, .features-colour__lead { font-size: var(--text-lead); }
  .features-hero__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-hero__cta { width: 100%; max-width: 22.5rem; }
  .features-card { padding: var(--space-5); }
  .features-card__top { grid-template-columns: 2.1rem minmax(0, 1fr) 2rem; }
  .features-colour__figure { padding: var(--space-3); }
  .features-step-list article { grid-template-columns: 2rem minmax(0, 1fr); }
  .features-rhythm__lead { padding-left: var(--space-3); }
  .features-matrix__table { gap: var(--space-4); border-top: 0; }
  .features-matrix__row { grid-template-columns: minmax(0, 1fr); border: var(--border-default); background: var(--color-paper-warm); }
  .features-matrix__row--head { display: none; }
  .features-matrix__row > * { min-height: auto; padding: var(--space-3) var(--space-4); }
  .features-matrix__row > span:first-child { border-bottom: var(--border-default); font-weight: 600; }
  .features-matrix__row > a { min-height: 3rem; border-top: var(--border-default); background: var(--color-paper); }
  .features-progress__line { height: 3rem; }
  .features-final { padding-block: var(--space-6) !important; }
  .features-final__actions .button { width: 100%; max-width: 22.5rem; }
  .features-final__actions > div { flex-direction: column; gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .features-hero__image img, .features-card { transition: none; }
}