/* Humenta AEO
   Extends the Kinetic design system in /styles.css. All components are scoped. */

.aeo-body {
  --aeo-copy: var(--measure-copy);
  --aeo-rule: var(--border-subtle);
}

.aeo-nav .nav__links {
  gap: clamp(var(--space-sm), 1.8vw, var(--space-lg));
}

.aeo-wordmark {
  align-items: baseline;
  gap: var(--space-xs);
}

.aeo-wordmark__suffix {
  color: var(--text-secondary);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aeo-hero {
  min-block-size: min(52rem, 92svh);
  padding-block: clamp(8rem, 18vh, 12rem) clamp(var(--space-2xl), 8vw, var(--space-3xl));
}

.aeo-hero .page-hero__inner {
  max-inline-size: none;
}

.aeo-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
}

.aeo-hero__copy {
  max-inline-size: 48rem;
}

.aeo-hero__title {
  font-size: clamp(2.75rem, 6.4vw, 6.1rem);
  line-height: 0.92;
  margin-block: var(--space-sm) var(--space-md);
  max-inline-size: 12ch;
  text-transform: uppercase;
}

.aeo-hero__actions,
.aeo-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.aeo-hero__note {
  color: var(--text-muted);
  font-size: var(--type-sm);
  margin-block-start: var(--space-sm);
}

.aeo-console {
  background: var(--bg-glass);
  border: 1px solid var(--border-accent);
  box-shadow: 0 0 5rem var(--kinetic-glow);
  min-inline-size: 0;
  padding: var(--space-md);
  position: relative;
}

.aeo-console::before {
  background: var(--accent-bridge);
  content: '';
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0.2rem;
  position: absolute;
}

.aeo-console__bar,
.aeo-console__heading,
.aeo-console__row,
.aeo-statline {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.aeo-console__bar {
  border-block-end: 1px solid var(--aeo-rule);
  color: var(--text-muted);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  padding-block-end: var(--space-sm);
  text-transform: uppercase;
}

.aeo-console__status {
  align-items: center;
  color: var(--accent-human-light);
  display: inline-flex;
  gap: var(--space-2xs);
}

.aeo-console__status::before {
  background: var(--accent-human);
  block-size: 0.45rem;
  content: '';
  inline-size: 0.45rem;
}

.aeo-console__score {
  padding-block: var(--space-lg);
}

.aeo-console__score strong {
  display: block;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9;
}

.aeo-console__score span,
.aeo-console__heading span,
.aeo-statline span {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.aeo-console__heading {
  border-block-end: 1px solid var(--aeo-rule);
  padding-block-end: var(--space-xs);
}

.aeo-console__rows {
  display: grid;
}

.aeo-console__row {
  border-block-end: 1px solid var(--aeo-rule);
  font-size: var(--type-sm);
  gap: var(--space-md);
  padding-block: var(--space-xs);
}

.aeo-meter {
  background: var(--bg-surface-hover);
  block-size: 0.35rem;
  flex: 1;
  max-inline-size: 8rem;
  overflow: hidden;
}

.aeo-meter > span {
  background: var(--accent-bridge);
  block-size: 100%;
  display: block;
  inline-size: var(--meter, 50%);
}

.aeo-meter--66 > span { --meter: 66%; }
.aeo-meter--72 > span { --meter: 72%; }
.aeo-meter--78 > span { --meter: 78%; }
.aeo-meter--84 > span { --meter: 84%; }

.aeo-console__foot {
  color: var(--text-muted);
  font-size: var(--type-xs);
  margin-block-start: var(--space-sm);
}

.aeo-subnav {
  background: var(--bg-glass);
  border-block-end: 1px solid var(--aeo-rule);
  border-block-start: 1px solid var(--aeo-rule);
  position: sticky;
  inset-block-start: 4.5rem;
  z-index: 30;
}

.aeo-subnav__inner {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  padding-block: var(--space-xs);
  scrollbar-width: thin;
}

.aeo-subnav a {
  color: var(--text-secondary);
  flex: none;
  font-size: var(--type-sm);
}

.aeo-subnav a:hover,
.aeo-subnav a[aria-current='page'] {
  color: var(--text-primary);
}

.aeo-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 48rem;
}

.aeo-answer {
  border-inline-start: 0.2rem solid var(--accent-human);
  color: var(--text-secondary);
  font-size: clamp(var(--type-lg), 2vw, var(--type-2xl));
  line-height: 1.6;
  margin-block-start: var(--space-md);
  max-inline-size: var(--aeo-copy);
  padding-inline-start: var(--space-md);
}

.aeo-intro {
  color: var(--text-secondary);
  font-size: var(--type-lg);
  line-height: 1.8;
  max-inline-size: var(--aeo-copy);
}

.aeo-proof-strip {
  border-block: 1px solid var(--aeo-rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.aeo-proof-strip__item {
  padding: var(--space-lg);
}

.aeo-proof-strip__item + .aeo-proof-strip__item {
  border-inline-start: 1px solid var(--aeo-rule);
}

.aeo-proof-strip strong {
  display: block;
  font-size: clamp(var(--type-xl), 3vw, 2.4rem);
  line-height: 1.1;
}

.aeo-proof-strip span {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.aeo-grid {
  container-type: inline-size;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block-start: var(--space-xl);
}

.aeo-card,
.aeo-callout,
.aeo-source-note,
.aeo-fit,
.aeo-plan,
.aeo-verdict {
  background: var(--bg-surface);
  border: 1px solid var(--aeo-rule);
}

.aeo-card {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: var(--space-lg);
  transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.aeo-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-0.25rem);
}

.aeo-card__index,
.aeo-kicker,
.aeo-pill,
.aeo-source-label {
  color: var(--accent-human-light);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.aeo-card h3 {
  font-size: var(--type-xl);
  margin-block: var(--space-sm) var(--space-xs);
}

.aeo-card p,
.aeo-card li,
.aeo-callout p,
.aeo-fit p,
.aeo-verdict p {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: 1.75;
}

.aeo-card__link {
  color: var(--accent-human-light);
  font-size: var(--type-sm);
  font-weight: 700;
  margin-block-start: auto;
  padding-block-start: var(--space-md);
}

.aeo-list,
.aeo-checks,
.aeo-source-list,
.aeo-compact-list {
  list-style: none;
}

.aeo-list,
.aeo-checks {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
}

.aeo-list li,
.aeo-checks li {
  color: var(--text-secondary);
  line-height: 1.7;
  padding-inline-start: var(--space-md);
  position: relative;
}

.aeo-list li::before,
.aeo-checks li::before {
  color: var(--accent-human);
  content: '→';
  inset-inline-start: 0;
  position: absolute;
}

.aeo-checks li::before {
  content: '✓';
}

.aeo-split {
  align-items: start;
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
}

.aeo-callout,
.aeo-source-note {
  padding: var(--space-lg);
}

.aeo-callout--accent {
  border-color: var(--border-accent);
  box-shadow: 0 0 4rem var(--kinetic-glow);
}

.aeo-callout h3,
.aeo-source-note h3 {
  font-size: var(--type-xl);
  margin-block-end: var(--space-sm);
}

.aeo-statlines {
  border-block-start: 1px solid var(--aeo-rule);
  display: grid;
  margin-block-start: var(--space-md);
}

.aeo-statline {
  border-block-end: 1px solid var(--aeo-rule);
  gap: var(--space-md);
  padding-block: var(--space-xs);
}

.aeo-statline strong {
  text-align: end;
}

.aeo-steps {
  counter-reset: aeo-step;
  display: grid;
  margin-block-start: var(--space-xl);
}

.aeo-step {
  border-block-start: 1px solid var(--aeo-rule);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 5rem minmax(0, 0.75fr) minmax(0, 1.25fr);
  padding-block: var(--space-lg);
}

.aeo-step::before {
  color: var(--text-muted);
  content: counter(aeo-step, decimal-leading-zero);
  counter-increment: aeo-step;
  font-size: var(--type-xl);
  font-weight: 800;
}

.aeo-step h3 {
  font-size: var(--type-xl);
}

.aeo-step p {
  color: var(--text-secondary);
  line-height: 1.75;
}

.aeo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-lg);
}

.aeo-pill {
  background: var(--bg-surface);
  border: 1px solid var(--aeo-rule);
  padding: var(--space-2xs) var(--space-xs);
}

.aeo-table-wrap {
  border: 1px solid var(--aeo-rule);
  margin-block-start: var(--space-xl);
  overflow-x: auto;
  scrollbar-color: var(--accent-human) var(--bg-surface);
}

.aeo-table {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 48rem;
  text-align: start;
}

.aeo-table th,
.aeo-table td {
  border-block-end: 1px solid var(--aeo-rule);
  padding: var(--space-sm);
  text-align: start;
  vertical-align: top;
}

.aeo-table th {
  color: var(--text-primary);
  font-size: var(--type-sm);
}

.aeo-table td {
  color: var(--text-secondary);
  font-size: var(--type-sm);
}

.aeo-table tbody tr:last-child td,
.aeo-table tbody tr:last-child th {
  border-block-end: 0;
}

.aeo-table a,
.aeo-prose a,
.aeo-source-list a,
.aeo-source-note a {
  color: var(--accent-human-light);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.aeo-plan-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-block-start: var(--space-xl);
}

.aeo-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  position: relative;
}

.aeo-plan--featured {
  border-color: var(--border-accent);
  box-shadow: 0 0 4rem var(--kinetic-glow);
}

.aeo-plan__flag {
  background: var(--accent-bridge-cta);
  color: var(--bg-deep);
  font-size: var(--type-xs);
  font-weight: 800;
  inset-block-start: 0;
  inset-inline-end: 0;
  letter-spacing: 0.08em;
  padding: var(--space-2xs) var(--space-xs);
  position: absolute;
  text-transform: uppercase;
}

.aeo-plan h3 {
  font-size: var(--type-2xl);
  margin-block: var(--space-sm) var(--space-xs);
}

.aeo-plan__price {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.aeo-plan__price small {
  color: var(--text-muted);
  font-size: var(--type-sm);
  font-weight: 500;
  letter-spacing: normal;
}

.aeo-plan__term,
.aeo-plan__desc,
.aeo-plan__foot {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.aeo-plan__term {
  margin-block: var(--space-xs) var(--space-md);
}

.aeo-plan__desc {
  min-block-size: 4.5rem;
}

.aeo-plan .aeo-checks {
  flex: 1;
  font-size: var(--type-sm);
  margin-block-end: var(--space-lg);
}

.aeo-plan__foot {
  border-block-start: 1px solid var(--aeo-rule);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
}

.aeo-faq {
  border-block-start: 1px solid var(--aeo-rule);
  margin-block-start: var(--space-xl);
  max-inline-size: var(--measure-wide);
}

.aeo-faq details {
  border-block-end: 1px solid var(--aeo-rule);
}

.aeo-faq summary {
  cursor: pointer;
  font-size: var(--type-lg);
  font-weight: 700;
  list-style: none;
  padding-block: var(--space-md);
  padding-inline-end: var(--space-xl);
  position: relative;
}

.aeo-faq summary::-webkit-details-marker {
  display: none;
}

.aeo-faq summary::after {
  color: var(--accent-human);
  content: '+';
  font-size: var(--type-2xl);
  inset-inline-end: 0;
  position: absolute;
}

.aeo-faq details[open] summary::after {
  content: '−';
}

.aeo-faq details p {
  color: var(--text-secondary);
  line-height: 1.8;
  max-inline-size: var(--aeo-copy);
  padding-block-end: var(--space-md);
}

.aeo-compare-hero {
  padding-block-end: var(--space-2xl);
}

.aeo-compare-hero .page-hero__inner {
  max-inline-size: 64rem;
}

.aeo-verdict {
  border-color: var(--border-accent);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr);
  margin-block-start: var(--space-xl);
  padding: var(--space-lg);
}

.aeo-verdict h2 {
  font-size: var(--type-xl);
}

.aeo-fit-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--space-xl);
}

.aeo-fit {
  padding: var(--space-lg);
}

.aeo-fit h3 {
  font-size: var(--type-xl);
  margin-block-end: var(--space-sm);
}

.aeo-prose {
  color: var(--text-secondary);
  line-height: 1.85;
  max-inline-size: var(--aeo-copy);
}

.aeo-prose > * + * {
  margin-block-start: var(--space-md);
}

.aeo-prose h2,
.aeo-prose h3 {
  color: var(--text-primary);
  margin-block-start: var(--space-xl);
}

.aeo-prose h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.aeo-prose h3 {
  font-size: var(--type-xl);
}

.aeo-prose ul,
.aeo-prose ol {
  padding-inline-start: var(--space-lg);
}

.aeo-prose li + li {
  margin-block-start: var(--space-xs);
}

.aeo-source-list {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
}

.aeo-source-list li {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: 1.6;
}

.aeo-disclosure {
  border-block: 1px solid var(--aeo-rule);
  color: var(--text-muted);
  font-size: var(--type-sm);
  margin-block: var(--space-xl);
  padding-block: var(--space-md);
}

.aeo-category {
  margin-block-start: var(--space-2xl);
}

.aeo-category__head {
  align-items: end;
  display: flex;
  gap: var(--space-lg);
  justify-content: space-between;
}

.aeo-category__head h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.aeo-category__head p {
  color: var(--text-secondary);
  max-inline-size: 34rem;
}

.aeo-directory {
  border-block-start: 1px solid var(--aeo-rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--space-lg);
}

.aeo-directory__item {
  border-block-end: 1px solid var(--aeo-rule);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.aeo-directory__item:nth-child(odd) {
  border-inline-end: 1px solid var(--aeo-rule);
}

.aeo-directory__item strong {
  font-size: var(--type-lg);
}

.aeo-directory__item span {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.aeo-directory__item:hover strong {
  color: var(--accent-human-light);
}

.aeo-form-intro {
  max-inline-size: var(--aeo-copy);
}

.aeo-form .form {
  margin-block-start: 0;
}

.aeo-form .field input[type='checkbox'] {
  inline-size: auto;
}

.aeo-consent {
  align-items: start;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: auto 1fr;
}

.aeo-small {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.aeo-visually-hidden {
  block-size: 0.1rem;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 0.1rem;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.aeo-body h1,
.aeo-body h2,
.aeo-body h3,
.aeo-body h4 {
  text-wrap: balance;
}

.aeo-body p {
  text-wrap: pretty;
}

.aeo-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}

.aeo-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.aeo-checkout-hero {
  padding-block-end: var(--space-3xl);
}

.aeo-checkout-layout,
.aeo-calculator-layout {
  align-items: start;
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.46fr);
}

.aeo-checkout-main {
  display: grid;
  gap: var(--space-2xl);
}

.aeo-checkout-block {
  border-block-start: 1px solid var(--aeo-rule);
  padding-block-start: var(--space-lg);
}

.aeo-checkout-block h2,
.aeo-order h2,
.aeo-calculator h2,
.aeo-calculator-result h2 {
  font-size: var(--type-2xl);
  margin-block: var(--space-xs) var(--space-sm);
}

.aeo-checkout-plans {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--space-lg);
}

.aeo-checkout-plan {
  background: var(--bg-surface);
  border: 1px solid var(--aeo-rule);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  text-align: start;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.aeo-checkout-plan strong {
  font-size: var(--type-2xl);
}

.aeo-checkout-plan > span:last-child,
.aeo-order__tax,
.aeo-order__links,
.aeo-order__trust,
.aeo-checkout-addon small {
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: 1.6;
}

.aeo-checkout-plan:hover,
.aeo-checkout-plan--selected {
  background: var(--bg-surface-hover);
  border-color: var(--border-accent);
}

.aeo-checkout-plan:focus-visible,
.aeo-checkout-addon:focus-within,
.aeo-calculator__field:focus-within {
  outline: 0.15rem solid var(--accent-human-light);
  outline-offset: var(--space-2xs);
}

.aeo-checkout-addon {
  align-items: start;
  background: var(--bg-surface);
  border: 1px solid var(--aeo-rule);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
}

.aeo-checkout-addon span {
  display: grid;
  gap: var(--space-2xs);
}

.aeo-order,
.aeo-calculator,
.aeo-calculator-result {
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  padding: var(--space-lg);
}

.aeo-order {
  inset-block-start: 7rem;
  position: sticky;
}

.aeo-order__row {
  align-items: baseline;
  border-block-start: 1px solid var(--aeo-rule);
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
  padding-block: var(--space-sm);
}

.aeo-order__row[hidden] {
  display: none;
}

.aeo-order__row span {
  color: var(--text-secondary);
}

.aeo-order__tax {
  margin-block: var(--space-sm) var(--space-md);
}

.aeo-order__trust {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  margin-block-start: var(--space-md);
}

.aeo-order__trust li {
  padding-inline-start: var(--space-md);
  position: relative;
}

.aeo-order__trust li::before {
  color: var(--accent-human-light);
  content: '✓';
  inset-inline-start: 0;
  position: absolute;
}

.aeo-order__links {
  margin-block-start: var(--space-md);
}

.aeo-order__links a,
.aeo-checkout-block a,
.aeo-disclosure a {
  color: var(--accent-human-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.aeo-status {
  border: 1px solid var(--aeo-rule);
  display: grid;
  font-size: var(--type-sm);
  gap: var(--space-xs);
  margin-block: var(--space-md);
  padding: var(--space-sm);
}

.aeo-status--pending {
  background: var(--bg-surface-hover);
  border-color: var(--border-accent);
}

.aeo-steps > li {
  border-block-start: 1px solid var(--aeo-rule);
  counter-increment: aeo-step;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(3rem, 0.16fr) minmax(11rem, 0.6fr) minmax(0, 1fr);
  padding-block: var(--space-lg);
}

.aeo-steps > li::before {
  color: var(--text-muted);
  content: counter(aeo-step, decimal-leading-zero);
  font-size: var(--type-xl);
  font-weight: 800;
}

.aeo-steps > li span {
  color: var(--text-secondary);
}

.aeo-calculator {
  display: grid;
  gap: var(--space-md);
}

.aeo-calculator__field {
  display: grid;
  gap: var(--space-xs);
}

.aeo-calculator__field > span:first-child {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  font-weight: 600;
}

.aeo-input-wrap {
  align-items: center;
  background: var(--bg-deep);
  border: 1px solid var(--aeo-rule);
  display: flex;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
}

.aeo-input-wrap input {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  inline-size: 100%;
  padding-block: var(--space-sm);
}

.aeo-input-wrap input:focus {
  outline: 0;
}

.aeo-input-wrap b {
  color: var(--text-muted);
}

.aeo-calculator-result__number {
  display: block;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.9;
  margin-block: var(--space-lg);
}

.aeo-form-error {
  color: var(--accent-human-light);
  font-size: var(--type-sm);
  min-block-size: var(--space-md);
}

@container (min-width: 44rem) {
  .aeo-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .aeo-hero__grid,
  .aeo-split,
  .aeo-checkout-layout,
  .aeo-calculator-layout {
    grid-template-columns: 1fr;
  }

  .aeo-hero {
    min-block-size: auto;
  }

  .aeo-console {
    max-inline-size: 42rem;
  }

  .aeo-order {
    inset-block-start: auto;
    position: static;
  }

  .aeo-proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .aeo-proof-strip__item:nth-child(3) {
    border-block-start: 1px solid var(--aeo-rule);
    border-inline-start: 0;
  }

  .aeo-proof-strip__item:nth-child(4) {
    border-block-start: 1px solid var(--aeo-rule);
  }
}

@media (max-width: 55rem) {
  .aeo-subnav {
    inset-block-start: 3.75rem;
  }

  .aeo-step {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .aeo-step p {
    grid-column: 2;
  }

  .aeo-verdict,
  .aeo-fit-grid {
    grid-template-columns: 1fr;
  }

  .aeo-directory {
    grid-template-columns: 1fr;
  }

  .aeo-directory__item:nth-child(odd) {
    border-inline-end: 0;
  }

  .aeo-steps > li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .aeo-steps > li span {
    grid-column: 2;
  }
}

@media (max-width: 38rem) {
  .aeo-hero__grid {
    gap: var(--space-xl);
  }

  .aeo-hero__title {
    font-size: clamp(2.5rem, 14vw, 4.4rem);
  }

  .aeo-proof-strip {
    grid-template-columns: 1fr;
  }

  .aeo-proof-strip__item + .aeo-proof-strip__item {
    border-block-start: 1px solid var(--aeo-rule);
    border-inline-start: 0;
  }

  .aeo-step {
    grid-template-columns: 1fr;
  }

  .aeo-step p {
    grid-column: auto;
  }

  .aeo-checkout-plans,
  .aeo-checkout-addon,
  .aeo-steps > li {
    grid-template-columns: 1fr;
  }

  .aeo-steps > li span {
    grid-column: auto;
  }

  .aeo-table {
    min-inline-size: 40rem;
  }

  .aeo-table-wrap::before {
    background: var(--bg-surface);
    color: var(--text-secondary);
    content: "Swipe to compare \2192";
    display: block;
    font-size: var(--type-xs);
    inline-size: max-content;
    inset-inline-start: 0;
    letter-spacing: 0.04em;
    padding: var(--space-2xs) var(--space-sm);
    position: sticky;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aeo-card {
    transition: none;
  }
}