.oa-comparison {
  position: relative;
  background: #f6f7f8;
  overflow: hidden;
  box-sizing: border-box;
}
.oa-comparison *, .oa-comparison *::before, .oa-comparison *::after { box-sizing: border-box; }
.oa-comparison img { display: block; max-width: 100%; }
.oa-comparison p { margin: 0; }

.oa-comparison-content-wrap { position: relative; padding: 96px var(--oa-content-padding) 0; }

.oa-comparison-bg-top {
  position: absolute;
  left: var(--oa-content-padding);
  right: var(--oa-content-padding);
  top: 0;
  height: 310px;
  background-image: url('../images/s2-bg-top.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.oa-comparison-bg-table {
  position: absolute;
  left: var(--oa-content-padding);
  right: var(--oa-content-padding);
  top: 334px;
  height: 700px;
  background-image: url('../images/s2-bg-table.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 900px) {
  .oa-comparison-bg-top, .oa-comparison-bg-table { display: none; }
}

.oa-comparison-heading {
  position: relative;
  max-width: 758px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.oa-comparison-eyebrow {
  font-family: var(--oa-font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oa-text-regular);
}
.oa-comparison-headline {
  font-family: var(--oa-font-heading);
  font-size: 48px;
  line-height: 1.2;
  color: var(--oa-text-dark);
}
.oa-comparison-headline-main { display: block; }
.oa-comparison-headline-accent {
  display: block;
  margin-top: -3px;
  font-family: var(--oa-font-accent);
  font-size: 56px;
  font-style: italic;
  font-weight: 500;
  line-height: .95;
  letter-spacing: 0;
  color: var(--oa-green-600);
}

.oa-comparison-row {
  position: relative;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-top: 91px;
  padding-bottom: 96px;
}

.oa-comparison-stakes {
  flex: 0 1 318px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 51px;
  padding: 40px 0 47px 28px;
}
.oa-comparison-stakes-title {
  font-family: var(--oa-font-body);
  font-weight: 700;
  font-size: 22px;
  color: #212b35;
}
.oa-comparison-stakes-list { display: flex; flex-direction: column; gap: 32px; }
.oa-comparison-stakes-item {
  font-family: var(--oa-font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .36px;
  color: var(--oa-text-regular);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--oa-border-light);
}
.oa-comparison-stakes-item:last-child { border-bottom: none; padding-bottom: 0; }

.oa-comparison-card {
  flex: 1 1 540px;
  min-width: 280px;
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 28px 17px rgba(183, 205, 195, .05),
    0 13px 13px rgba(183, 205, 195, .09),
    0 3px 7px rgba(183, 205, 195, .1),
    0 172px 103px rgba(138, 158, 153, .05);
  overflow: hidden;
}
.oa-comparison-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 44px; }
.oa-comparison-with-wrap { flex: 1 1 0; min-width: 0; padding: 12px 12px 12px 0; display: flex; }
.oa-comparison-col.oa-comparison-with { flex: 1; background: #FFEDD6; border-radius: 4px; padding: 32px; gap: 48px; }

.oa-comparison-col-title {
  font-family: var(--oa-font-body);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  color: #212b35;
}
.oa-comparison-with .oa-comparison-col-title { color: var(--oa-orange-text); }

.oa-comparison-col-list { display: flex; flex-direction: column; gap: 32px; }
.oa-comparison-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--oa-border-light);
}
.oa-comparison-col-item:last-child { border-bottom: none; padding-bottom: 0; }
.oa-comparison-col-item img { width: 24px; height: 24px; flex-shrink: 0; }
.oa-comparison-item-copy { min-width: 0; }
.oa-comparison-row-label { display: none; }
.oa-comparison-item-value {
  font-family: var(--oa-font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .36px;
  color: var(--oa-text-regular);
  white-space: nowrap;
}

/* Keep table rows on a single line without changing any styles outside this
   widget. A smaller type size at notebook widths prevents one column from
   growing independently and losing alignment with the other two. */
@media (max-width: 1366px) {
  .oa-comparison .oa-comparison-stakes-item,
  .oa-comparison .oa-comparison-item-value {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .15px;
    white-space: nowrap;
  }
  .oa-comparison .oa-comparison-stakes,
  .oa-comparison .oa-comparison-col {
    gap: 48px;
  }
  .oa-comparison .oa-comparison-stakes {
    padding-top: 40px;
  }
  .oa-comparison .oa-comparison-col.oa-comparison-without {
    padding-top: 40px;
  }
  .oa-comparison .oa-comparison-col.oa-comparison-with {
    padding: 28px 24px 32px;
  }
  .oa-comparison .oa-comparison-stakes-list,
  .oa-comparison .oa-comparison-col-list {
    display: grid;
    grid-auto-rows: 88px;
    gap: 0;
  }
  .oa-comparison .oa-comparison-stakes-item,
  .oa-comparison .oa-comparison-col-item {
    height: 88px;
    min-height: 88px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .oa-comparison .oa-comparison-stakes-item {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 1100px) {
  .oa-comparison-row { flex-direction: column; }
  .oa-comparison-stakes { flex: 1 1 auto; width: 100%; }
  /* .oa-comparison-row keeps align-items: flex-start for the desktop side-by-side
     layout (stops the two columns stretching to match height); once flex-direction
     flips to column here, that same align-items shrink-wraps items on the cross
     axis (now horizontal) instead of stretching them to the row's width. .oa-comparison-stakes
     is fixed above — .oa-comparison-card needs the same, otherwise its own internal
     flex columns (white + orange) size to their content and the card overflows past
     the section edges on notebook-width screens. */
  .oa-comparison-card { width: 100%; }
}
@media (max-width: 767px) {
  .oa-comparison {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: clip;
  }
  .oa-comparison-content-wrap {
    width: 100%;
    max-width: 100%;
    padding: 64px 20px 0;
  }
  .oa-comparison-heading { gap: 18px; }
  .oa-comparison-eyebrow { font-size: 12px; line-height: 1.4; }
  .oa-comparison-headline {
    font-size: clamp(30px, 8.5vw, 36px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .oa-comparison-headline-accent {
    margin-top: 4px;
    font-size: clamp(38px, 10vw, 46px);
  }
  .oa-comparison-row {
    display: block;
    width: 100%;
    margin-top: 48px;
    padding-bottom: 72px;
  }
  .oa-comparison-stakes { display: none; }
  .oa-comparison-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .oa-comparison-col {
    width: 100%;
    min-width: 0;
    flex: none;
    padding: 24px 20px;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--oa-border-light);
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(138, 158, 153, .1);
  }
  .oa-comparison-with-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    flex: none;
    padding: 0;
  }
  .oa-comparison-col.oa-comparison-with {
    width: 100%;
    min-width: 0;
    padding: 24px 20px;
    gap: 24px;
    border-color: rgba(0, 169, 131, .22);
    border-radius: 8px;
  }
  .oa-comparison-col-title { font-size: 20px; text-align: left; }
  .oa-comparison-col-list { gap: 0; }
  .oa-comparison-col-item {
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
    padding: 18px 0;
  }
  .oa-comparison-col-item:first-child { padding-top: 0; }
  .oa-comparison-col-item:last-child { padding-bottom: 0; }
  .oa-comparison-col-item img { width: 22px; height: 22px; }
  .oa-comparison-item-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-wrap: anywhere;
  }
  .oa-comparison-row-label {
    display: block;
    font-family: var(--oa-font-mono);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #7a838c;
  }
  .oa-comparison-item-value { font-size: 16px; line-height: 1.35; }
}

@media (max-width: 380px) {
  .oa-comparison-content-wrap { padding-left: 16px; padding-right: 16px; }
  .oa-comparison-col,
  .oa-comparison-col.oa-comparison-with { padding: 22px 16px; }
}

/* Keep the original three-column comparison table at every breakpoint. On
   narrow viewports the row owns the horizontal scroll, so the table remains
   inside the section and its rules, backgrounds and row rhythm stay aligned. */
@media (max-width: 1100px) {
  .oa-comparison-content-wrap { overflow: hidden; }
  .oa-comparison-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--oa-green-500) var(--oa-border-light);
  }
  .oa-comparison-row::-webkit-scrollbar { height: 6px; }
  .oa-comparison-row::-webkit-scrollbar-track { background: var(--oa-border-light); border-radius: 999px; }
  .oa-comparison-row::-webkit-scrollbar-thumb { background: var(--oa-green-500); border-radius: 999px; }
  .oa-comparison-stakes {
    display: flex;
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    padding: 40px 0 47px 16px;
  }
  .oa-comparison-card {
    display: flex;
    flex: 0 0 720px;
    flex-direction: row;
    width: 720px;
    min-width: 720px;
    gap: 0;
    padding: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow:
      0 28px 17px rgba(183, 205, 195, .05),
      0 13px 13px rgba(183, 205, 195, .09),
      0 3px 7px rgba(183, 205, 195, .1),
      0 172px 103px rgba(138, 158, 153, .05);
    overflow: hidden;
  }
  .oa-comparison-col {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    padding: 36px 32px;
    gap: 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .oa-comparison-with-wrap {
    display: flex;
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    padding: 12px 12px 12px 0;
  }
  .oa-comparison-col.oa-comparison-with {
    width: auto;
    min-width: 0;
    flex: 1;
    padding: 28px 24px;
    gap: 48px;
    background: #FFEDD6;
    border: 0;
    border-radius: 4px;
  }
  .oa-comparison-col-title { font-size: 22px; text-align: center; }
  .oa-comparison-col-list { gap: 32px; }
  .oa-comparison-col-item {
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 0 0 32px;
  }
  .oa-comparison-col-item:last-child { padding-bottom: 0; }
  .oa-comparison-col-item img { width: 24px; height: 24px; }
  .oa-comparison-item-copy { display: block; overflow-wrap: normal; }
  .oa-comparison-row-label { display: none; }
  .oa-comparison-item-value { font-size: 18px; line-height: normal; }
}

@media (max-width: 767px) {
  .oa-comparison-row { margin-top: 48px; padding-bottom: 72px; }
  .oa-comparison-stakes {
    flex-basis: 240px;
    width: 240px;
    min-width: 240px;
  }
  .oa-comparison-card {
    flex-basis: 680px;
    width: 680px;
    min-width: 680px;
  }
}

/* Final table alignment: every column uses the same header and row tracks.
   These selectors are intentionally scoped to the comparison widget. */
.oa-comparison .oa-comparison-stakes,
.oa-comparison .oa-comparison-col {
  gap: 48px;
}
.oa-comparison .oa-comparison-stakes { padding-top: 44px; }
.oa-comparison .oa-comparison-stakes-title,
.oa-comparison .oa-comparison-col-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  line-height: 1.2;
  white-space: nowrap;
}
.oa-comparison .oa-comparison-stakes-title { justify-content: flex-start; }
.oa-comparison .oa-comparison-stakes-list,
.oa-comparison .oa-comparison-col-list {
  display: grid;
  grid-auto-rows: 88px;
  gap: 0;
}
.oa-comparison .oa-comparison-stakes-item,
.oa-comparison .oa-comparison-col-item {
  height: 88px;
  min-height: 88px;
  padding-top: 0;
  padding-bottom: 0;
}
.oa-comparison .oa-comparison-stakes-item {
  display: flex;
  align-items: center;
}
.oa-comparison .oa-comparison-item-value { white-space: nowrap; }

@media (max-width: 1100px) {
  .oa-comparison .oa-comparison-stakes,
  .oa-comparison .oa-comparison-col.oa-comparison-without {
    padding-top: 40px;
  }
  .oa-comparison .oa-comparison-col-title,
  .oa-comparison .oa-comparison-stakes-title {
    font-size: clamp(16px, 2.7vw, 22px);
  }
}