/*
 * Pages for people switching from Pulley, Carta or Cake: /pulley/,
 * /paper-vs-carta/ and /paper-vs-cake/.
 * Builds on marketing.css and home.css (page shell, section headers, FAQ,
 * CTA band). Sections get more room than the home page so each idea stands
 * on its own.
 */

.switch-section {
  padding-top: calc(var(--space-8) * 1.5);
  scroll-margin-top: 72px;
}

.switch-section > .section-header {
  margin-bottom: var(--space-7);
}

.switch-section--narrow {
  max-width: var(--wide-width);
  margin: 0 auto;
}

/* ---------------------------------------------------------------- Hero */

.switch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding: clamp(var(--space-6), 8vh, var(--space-8)) 0 var(--space-6);
}

.switch-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.switch-hero__title {
  font-size: clamp(2.375rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.06;
}

.switch-hero__title > span {
  display: block;
}

.switch-hero__visual {
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------- Move visual */

/*
 * Four cards placed in a 520 × 380 space (percentages below), with the dotted
 * connectors in MoveVisual.js drawn in the same space. Type scales with the
 * picture's width, so the layout holds from desktop down to tablet; narrow
 * containers stack the cards instead.
 */
.move-frame {
  container: move / inline-size;
  width: 100%;
  max-width: 540px;
}

.move {
  position: relative;
  aspect-ratio: 520 / 380;
  font-size: clamp(9px, 2.5cqi, 13px);
}

.move__glow {
  position: absolute;
  inset: 4% 6% -6% 2%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--tint-yellow-strong) 0,
    color-mix(in srgb, var(--tint-yellow) 70%, transparent) 45%,
    transparent 70%
  );
  opacity: 0.8;
}

.move__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}

.move__card {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--color-rule);
  border-radius: 1.1em;
  background: var(--color-card);
  box-shadow: var(--shadow-lift);
}

.move__route {
  left: 8%;
  top: 0;
  width: 62%;
  height: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3em;
  padding: 0 2.4em;
}

.move__from {
  padding: 0.55em 1.2em;
  border-radius: 0.7em;
  background: var(--tint-mint-strong);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--color-pine);
}

.move__arrow {
  flex-shrink: 0;
  width: 1.9em;
  height: 1.9em;
  color: var(--color-primary);
}

.move__logo {
  width: 7.6em;
}

.move__table {
  left: 0;
  top: 29%;
  width: 57%;
  height: 57%;
  padding: 1.4em 1.5em;
}

.move__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.05em;
  font-weight: 700;
}

.move__label .icon {
  width: 1.2em;
  height: 1.2em;
}

.move__menu {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin-left: auto;
}

.move__menu span {
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background: var(--color-muted);
}

.move__company {
  margin: 0.9em 0 1em;
  font-family: var(--font-serif);
  font-size: 1.35em;
}

.move__split {
  display: flex;
  align-items: center;
  gap: 1.4em;
}

.move__donut {
  flex-shrink: 0;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: conic-gradient(
    var(--chart-2) 0 42.5%,
    var(--chart-1) 0 87.5%,
    var(--chart-3) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49%);
  mask: radial-gradient(circle, transparent 0 48%, #000 49%);
}

.move__legend {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.move__legend li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.move__legend li::before {
  content: '';
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--c);
}

.move__legend li span:first-child {
  white-space: nowrap;
}

.move__legend li span:last-child {
  margin-left: auto;
  color: var(--color-muted);
}

.move__gift {
  left: 64%;
  top: 22%;
  width: 36%;
  height: 29%;
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1em;
  border-color: var(--tint-yellow-strong);
  background: var(--tint-yellow);
}

.move__gift-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  border-radius: 50%;
  background: var(--tint-yellow-strong);
  color: var(--color-primary-deep);
}

.move__gift-icon .icon {
  width: 1.5em;
  height: 1.5em;
}

.move__gift-title {
  font-family: var(--font-serif);
  font-size: 1.55em;
  white-space: nowrap;
  line-height: var(--leading-tight);
}

.move__gift-body {
  margin-top: 0.4em;
  font-size: 0.9em;
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.move__records {
  left: 61%;
  top: 58%;
  width: 37%;
  /* Only its top and left edges meet connectors, so it can grow. */
  height: auto;
  padding: 1.1em 1.2em;
}

.move__docs {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin: 0.8em 0 0;
  padding: 0.8em 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  font-size: 0.95em;
  color: var(--color-ink-2);
}

.move__docs li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}

.move__docs .icon {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  color: var(--color-muted);
}

/* Narrow: stack the cards, drop the connectors. */
@container move (max-width: 420px) {
  .move {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    aspect-ratio: auto;
    font-size: 12px;
  }

  .move__card {
    position: static;
    width: auto;
    height: auto;
  }

  .move__route {
    padding: var(--space-3);
  }

  .move__lines,
  .move__glow {
    display: none;
  }
}

/* ---------------------------------------------------------------- Steps */

.switch-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.switch-steps__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.switch-steps__number {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint-yellow-strong);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}

.switch-steps__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-lg);
}

.switch-steps__title .icon {
  color: var(--color-primary-deep);
}

.switch-steps__body {
  max-width: 22em;
  color: var(--color-muted);
}

.switch-steps__arrow {
  position: absolute;
  top: 12px;
  right: calc(var(--space-6) / -2 - 10px);
  color: var(--color-primary-deep);
}

/* ---------------------------------------------------------------- Offer panel */

.offer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  margin-top: calc(var(--space-8) * 1.5);
  padding: var(--space-7);
  border: 1px solid var(--tint-yellow-strong);
  border-radius: var(--radius-lg);
  background: var(--tint-yellow);
}

.offer-panel__title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.offer-panel__body {
  margin-top: var(--space-2);
  max-width: 24em;
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.offer-panel__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-7);
  border-inline: 1px solid var(--tint-yellow-strong);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--color-ink-2);
}

.offer-panel__amount {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
}

.offer-panel__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------- Countdown */

.countdown {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow:
    0 0 0 12px rgb(255 191 0 / 0.08),
    var(--shadow-lift);
  overflow: hidden;
}

.countdown__head {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background:
    radial-gradient(circle at 100% 0, var(--tint-yellow-strong), transparent 60%),
    var(--tint-yellow);
}

.countdown__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--tint-blush-strong);
  border-radius: var(--radius-pill);
  background: var(--tint-blush);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-error);
}

.countdown__count {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.countdown__tiles {
  display: flex;
  gap: var(--space-2);
}

/* Flip-clock digits: a white tile with a hairline across the middle. */
.countdown__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: linear-gradient(var(--color-card) 50%, var(--color-bg-soft) 50%);
  box-shadow: var(--shadow-card);
  font-family: var(--font-serif);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-ink);
}

.countdown__tile::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--color-rule);
}

.countdown__closed {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  line-height: 1;
}

.countdown__unit {
  padding-bottom: var(--space-2);
  font-size: var(--text-md);
  color: var(--color-ink-2);
}

.countdown__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.countdown__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.countdown__weekday {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-muted-2);
}

.countdown__date-num {
  font-weight: 700;
  color: var(--color-ink-2);
}

.countdown__day--off {
  background: var(--color-error);
}

.countdown__day--off span {
  color: #fff;
}

.countdown__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.countdown__route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.countdown__from {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--tint-mint-strong);
  font-weight: 700;
  color: var(--color-pine);
}

.countdown__arrow {
  color: var(--color-primary);
}

.countdown__logo {
  width: 76px;
}

.countdown__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  list-style: none;
}

/* Dotted line joining the step icons. */
.countdown__steps::before {
  content: '';
  position: absolute;
  top: calc(var(--space-5) + 16px);
  bottom: calc(var(--space-6) + 16px);
  left: calc(var(--space-6) + 15px);
  border-left: 2px dotted var(--color-primary);
}

.countdown__steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
}

.countdown__step-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-muted);
}

.countdown__step--next {
  color: var(--color-ink);
  font-weight: 700;
}

.countdown__step--next .countdown__step-icon {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-ink);
  box-shadow: 0 0 0 4px rgb(255 191 0 / 0.25);
}

.countdown__badge {
  margin-left: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--tint-yellow);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-deep);
}

/* ---------------------------------------------------------------- Status mark */

.status-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.status-mark__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.status-mark__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.status-mark--available .status-mark__icon {
  background: var(--color-success-wash);
  color: var(--color-success);
}

.status-mark--limited .status-mark__icon {
  color: var(--color-primary-deep);
}

.status-mark--notListed .status-mark__icon {
  color: var(--color-muted-2);
}

.status-mark--notListed .status-mark__label {
  color: var(--color-muted);
}

.status-mark__text {
  max-width: 14em;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Smaller, to sit beside a section header (the /pulley/ shutdown section). */
.countdown--compact {
  max-width: 340px;
  font-size: var(--text-sm);
}

.countdown--compact .countdown__head {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.countdown--compact .countdown__tile {
  width: 46px;
  height: 58px;
  font-size: 2.25rem;
}

.countdown--compact .countdown__closed {
  font-size: 2.25rem;
}

.countdown--compact .countdown__week {
  margin-top: var(--space-4);
}

.countdown--compact .countdown__route {
  padding: var(--space-3) var(--space-5);
}

.countdown--compact .countdown__steps {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.countdown--compact .countdown__steps::before {
  top: calc(var(--space-4) + 16px);
  bottom: calc(var(--space-5) + 16px);
  left: calc(var(--space-5) + 15px);
}

/* ---------------------------------------------------------------- Drill-down comparison */

.drill__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.drill__expand {
  border: 0;
  background: none;
  cursor: pointer;
}

.drill__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.drill__table {
  width: 100%;
  /* Room for each company column (--cols is set by DrillDownTable). */
  min-width: calc(200px + var(--cols, 4) * 140px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.drill__table th,
.drill__table td {
  border-bottom: 1px solid var(--color-rule);
  text-align: center;
  vertical-align: middle;
}

.drill__table th[scope='row'],
.drill__table .drill__corner {
  width: 28%;
  text-align: left;
}

.drill__table thead th {
  padding: var(--space-5) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  vertical-align: bottom;
}

.drill__table .drill__corner {
  font-weight: 400;
}

.drill__corner > span,
.drill__table thead th > span {
  display: block;
}

.drill__reviewed,
.drill__tagline {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
}

/* Taglines on other columns are warnings (e.g. Pulley's end date). */
.drill__table thead th:not(.drill__ours) .drill__tagline {
  color: var(--color-primary-deep);
}

.drill__logo {
  display: block;
  width: 96px;
  margin: 0 auto;
}

/* Paper's column: a raised white card with a yellow top edge. */
.drill__table .drill__ours {
  background: var(--color-card);
  border-inline: 1px solid var(--tint-yellow-strong);
}

.drill__table thead .drill__ours {
  border-top: 1px solid var(--tint-yellow-strong);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: inset 0 4px 0 var(--color-primary);
}

.drill__category th,
.drill__category td {
  padding: var(--space-5) var(--space-3);
}

.drill__category td {
  cursor: pointer;
}

.drill__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.drill__plus {
  flex-shrink: 0;
  color: var(--color-primary-deep);
  transition: transform var(--dur-base) var(--ease-out);
}

.drill__toggle[aria-expanded='true'] .drill__plus {
  transform: rotate(45deg);
}

.drill__scope th,
.drill__scope td {
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-alt);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  white-space: pre-line;
  color: var(--color-ink-2);
}

.drill__scope th {
  padding-left: var(--space-6);
  font-weight: 700;
  color: var(--color-muted);
}

.drill__table .drill__scope .drill__ours {
  background: var(--tint-yellow);
}

.drill__feature th,
.drill__feature td {
  padding: var(--space-4) var(--space-3);
}

.drill__feature th {
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-2);
}

.drill__source {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) auto 0;
  padding: var(--space-1);
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--color-muted);
  cursor: pointer;
}

.drill__source:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.drill__more {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.drill__more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-weight: 700;
  font-size: var(--text-sm);
  list-style: none;
  cursor: pointer;
}

.drill__more > summary::-webkit-details-marker {
  display: none;
}

.drill__more-icon {
  color: var(--color-primary-deep);
  transition: transform var(--dur-base) var(--ease-out);
}

.drill__more[open] .drill__more-icon {
  transform: rotate(90deg);
}

.drill__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------- Source dialog */

.source-dialog {
  width: min(560px, calc(100% - var(--gutter) * 2));
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-lift);
  color: var(--color-ink);
}

.source-dialog::backdrop {
  background: rgb(16 17 20 / 0.35);
}

.source-dialog__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
}

.source-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  cursor: pointer;
}

.source-dialog__title {
  padding-right: var(--space-7);
  font-size: var(--text-xl);
}

.source-dialog__status .status-mark {
  align-items: flex-start;
  text-align: left;
}

.source-dialog__note {
  color: var(--color-ink-2);
}

.source-dialog__sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-2) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  font-size: var(--text-xs);
}

.source-dialog__sources a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Feature map */

.feature-map__head,
.feature-map__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.3fr);
  align-items: center;
  gap: var(--space-4);
}

.feature-map__head {
  padding: 0 var(--space-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.feature-map__head span:last-child {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feature-map__logo {
  width: 52px;
}

.feature-map__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-map__row {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

.feature-map__theirs {
  color: var(--color-muted);
}

.feature-map__arrow {
  color: var(--color-primary-deep);
}

.feature-map__ours {
  font-weight: 700;
}

/* Only shown once the rows stack (phones), where the column heads are hidden. */
.feature-map__label {
  display: none;
}

/* ---------------------------------------------------------------- Export checklist */

.exports {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.exports__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.export-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.export-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
}

.export-list__item:last-child {
  border-bottom: 0;
}

.export-list__icon {
  flex-shrink: 0;
  color: var(--color-primary-deep);
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 960px) {
  .switch-hero,
  .exports {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .switch-steps {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .switch-steps__arrow {
    display: none;
  }

  .offer-panel {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    justify-items: start;
  }

  .offer-panel__price {
    align-items: flex-start;
    padding: var(--space-5) 0;
    border-inline: 0;
    border-block: 1px solid var(--tint-yellow-strong);
    width: 100%;
  }
}

@media (max-width: 720px) {
  .switch-section {
    padding-top: var(--space-8);
  }

  /* "Get 2 Years Free" is long: let the pair stack rather than wrap the label. */
  .switch-hero .hero-actions .btn {
    flex: 1 0 auto;
  }

  .offer-panel {
    padding: var(--space-6) var(--space-5);
  }

  .offer-panel__action,
  .offer-panel__action .btn {
    width: 100%;
  }

  /* The drill-down scrolls sideways; capability names stay pinned. */
  .drill__table th[scope='row'],
  .drill__table .drill__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 128px;
    background: var(--color-bg);
    box-shadow: 1px 0 0 var(--color-rule);
  }

  .drill__table .drill__scope th {
    background: var(--color-bg-alt);
  }

  .drill__table .drill__feature th {
    background: var(--color-bg);
  }

  .drill__table {
    min-width: calc(128px + var(--cols, 4) * 106px);
  }

  .drill__table th[scope='row'],
  .drill__table .drill__corner {
    padding-inline: var(--space-2);
    overflow-wrap: anywhere;
  }

  .drill__corner .eyebrow {
    letter-spacing: 0.02em;
  }

  .drill__toggle {
    gap: var(--space-1);
    font-size: var(--text-xs);
  }

  .drill__scope th,
  .drill__feature th {
    padding-left: var(--space-3);
    font-size: var(--text-xs);
  }

  .drill__table thead th {
    font-size: var(--text-md);
  }

  .feature-map__head {
    display: none;
  }

  .feature-map__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .feature-map__arrow {
    display: none;
  }

  .feature-map__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
}