/* Shared V2 storefront system for all independently sold browser extensions. */
.ext-storefront {
  --ext-bg: var(--c-bg);
  --ext-surface: var(--c-surface);
  --ext-surface-subtle: var(--c-surface-2);
  --ext-border: var(--c-border);
  --ext-border-strong: var(--c-border-strong);
  --ext-text: var(--c-text);
  --ext-text-muted: var(--c-text-dim);
  --ext-brand: var(--c-accent);
  --ext-brand-soft: var(--c-accent-soft);
  --ext-brand-soft-strong: var(--c-accent-soft-strong);
  --ext-on-brand: var(--c-on-accent);
  --ext-success: var(--c-success-ink);
  --ext-success-soft: var(--c-success-soft);
  --ext-warning: var(--c-warning-ink);
  --ext-warning-soft: var(--c-warning-soft);
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--ext-text);
}

.ext-storefront *,
.ext-storefront *::before,
.ext-storefront *::after {
  box-sizing: border-box;
}

.ext-shell {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

.ext-hero,
.ext-detail-hero {
  position: relative;
  padding-block: clamp(88px, 9vw, 128px) var(--space-16);
  overflow: hidden;
  background: var(--soft-gradient);
  border-bottom: 1px solid var(--ext-border);
}

.ext-hero::after,
.ext-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-gradient-glow);
  opacity: 0.34;
}

.ext-hero-layout,
.ext-detail-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}

.ext-hero-copy {
  max-width: 760px;
}

.ext-eyebrow,
.ext-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ext-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ext-eyebrow {
  min-height: var(--control-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.ext-hero-copy h1 {
  max-width: 780px;
  margin: var(--space-5) 0 var(--space-5);
  color: var(--ext-text);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  text-wrap: balance;
}

.ext-hero-copy > p {
  max-width: 680px;
  color: var(--ext-text-muted);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
}

.ext-actions,
.ext-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ext-hero-copy .ext-actions {
  margin-top: var(--space-7);
}

.ext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-5);
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.ext-btn:hover {
  transform: translateY(-1px);
}

.ext-btn:focus-visible,
.ext-back-link:focus-visible,
.ext-detail-link:focus-visible,
.ext-hero-product-link:focus-visible,
.ext-choice-card a:focus-visible,
.ext-faq-list summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ext-btn-primary {
  background: var(--ext-brand);
  color: var(--ext-on-brand);
  box-shadow: var(--shadow-md);
}

.ext-btn-primary:hover {
  box-shadow: var(--shadow-lg);
}

.ext-btn-secondary {
  background: var(--ext-surface);
  color: var(--ext-text);
  border-color: var(--ext-border-strong);
  box-shadow: var(--shadow-sm);
}

.ext-btn-secondary:hover {
  border-color: var(--c-border-hover);
}

.ext-hero-note {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--c-surface-glass-strong);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
}

.ext-note-heading,
.ext-hero-product-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ext-note-heading {
  align-items: flex-start;
  margin-bottom: var(--space-1);
}

.ext-note-icon,
.ext-product-icon,
.ext-choice-icon,
.ext-feature-card > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--ext-brand-soft);
  color: var(--ext-brand);
}

.ext-note-icon {
  width: var(--control-lg);
  height: var(--control-lg);
  border-radius: var(--radius-control);
}

.ext-note-heading strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 17px;
}

.ext-note-heading p {
  color: var(--ext-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.ext-hero-product-link {
  min-height: var(--control-lg);
  padding: var(--space-3);
  background: var(--ext-surface-subtle);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-control);
}

.ext-hero-product-link:hover {
  border-color: var(--c-border-hover);
}

.ext-hero-product-link > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  background: var(--ext-brand-soft);
  color: var(--ext-brand);
  border-radius: var(--radius-sm);
}

.ext-hero-product-link > div {
  min-width: 0;
  flex: 1;
}

.ext-hero-product-link strong,
.ext-hero-product-link small {
  display: block;
}

.ext-hero-product-link strong {
  font-family: var(--font-display);
  font-size: 13px;
}

.ext-hero-product-link small {
  margin-top: var(--space-1);
  color: var(--ext-text-muted);
  font-size: 11px;
}

.ext-hero-product-link > i {
  color: var(--ext-brand);
  font-size: 11px;
}

.ext-section {
  padding-block: clamp(var(--space-12), 7vw, 88px);
}

.ext-products-section {
  background: var(--ext-bg);
}

.ext-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.ext-section-heading h2,
.ext-faq-layout h2,
.ext-continuity-grid h2,
.ext-final-card h2 {
  margin-top: var(--space-2);
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.12;
  text-wrap: balance;
}

.ext-section-heading > p {
  max-width: 480px;
  color: var(--ext-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

.ext-section-heading-compact {
  margin-bottom: var(--space-6);
}

.ext-product-grid,
.ext-choice-grid,
.ext-ownership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.ext-product-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);
}

.ext-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-hover);
  box-shadow: var(--shadow-md);
}

.ext-product-card.is-featured {
  border-color: var(--c-border-hover);
  box-shadow: inset 0 3px 0 var(--ext-brand), var(--shadow-md);
}

.ext-product-card.is-owned {
  box-shadow: inset 0 3px 0 var(--ext-success), var(--shadow-sm);
}

.ext-product-topline,
.ext-product-title,
.ext-product-footer,
.ext-product-meta,
.ext-ownership-card > div,
.ext-preview-header,
.ext-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ext-product-index {
  color: var(--ext-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ext-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--ext-surface-subtle);
  color: var(--ext-text-muted);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.ext-status.is-active {
  background: var(--ext-success-soft);
  color: var(--ext-success);
}

.ext-product-title {
  justify-content: flex-start;
  margin-top: var(--space-6);
}

.ext-product-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  font-size: 21px;
}

.ext-product-title h3 {
  font-size: clamp(21px, 2vw, 27px);
}

.ext-product-title p {
  margin-top: var(--space-1);
  color: var(--ext-text-muted);
  font-size: 13px;
}

.ext-product-summary {
  margin-top: var(--space-5);
  color: var(--ext-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.ext-check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  list-style: none;
}

.ext-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ext-text);
  font-size: 14px;
  line-height: 1.5;
}

.ext-check-list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--ext-success-soft);
  color: var(--ext-success);
  border-radius: var(--radius-pill);
  font-size: 10px;
}

.ext-product-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: initial;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  background: var(--ext-surface-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.ext-product-meta span {
  color: var(--ext-text-muted);
  font-weight: 700;
}

.ext-product-meta strong,
.ext-product-meta code {
  min-width: 0;
  color: var(--ext-text);
  overflow-wrap: anywhere;
}

.ext-product-footer {
  align-items: flex-end;
  margin-top: auto;
  padding-top: var(--space-6);
}

.ext-price span {
  display: block;
  color: var(--ext-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ext-price strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.ext-card-actions {
  justify-content: flex-end;
}

.ext-card-actions .ext-btn {
  min-height: var(--control-md);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
}

.ext-detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-end;
  margin-top: var(--space-4);
  color: var(--ext-brand);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 800;
}

.ext-workflow-section,
.ext-continuity-section,
.ext-faq-section {
  background: var(--ext-surface-subtle);
  border-block: 1px solid var(--ext-border);
}

.ext-choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ext-choice-icon {
  width: var(--control-lg);
  height: var(--control-lg);
  border-radius: var(--radius-control);
}

.ext-choice-card div > span {
  color: var(--ext-brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ext-choice-card h3 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 20px;
}

.ext-choice-card p {
  color: var(--ext-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.ext-choice-card a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--ext-brand);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 800;
}

.ext-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.ext-step-grid li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-md);
}

.ext-step-grid li > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  background: var(--ext-brand-soft);
  color: var(--ext-brand);
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 800;
}

.ext-step-grid h3 {
  margin-bottom: var(--space-2);
  font-size: 16px;
}

.ext-step-grid p {
  color: var(--ext-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ext-faq-layout {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.ext-faq-layout > div:first-child > p {
  margin-top: var(--space-4);
  color: var(--ext-text-muted);
}

.ext-faq-list {
  display: grid;
  gap: var(--space-3);
}

.ext-faq-list details {
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-md);
}

.ext-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}

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

.ext-faq-list details[open] summary i {
  transform: rotate(45deg);
}

.ext-faq-list summary i {
  color: var(--ext-brand);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.ext-faq-list details p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ext-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.ext-final-section {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--ext-bg);
}

.ext-final-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-8);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.ext-final-card > div:first-child {
  max-width: 720px;
}

.ext-final-card p {
  margin-top: var(--space-3);
  color: var(--ext-text-muted);
}

/* Product detail page */
.ext-detail-hero {
  padding-top: clamp(84px, 8vw, 112px);
}

.ext-back-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  margin-bottom: var(--space-5);
  color: var(--ext-text-muted);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 700;
}

.ext-detail-hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
}

.ext-detail-page .ext-hero-copy h1 {
  font-size: clamp(36px, 4.4vw, 58px);
}

.ext-inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  color: var(--ext-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.ext-inline-facts span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ext-inline-facts i {
  color: var(--ext-brand);
}

.ext-preview {
  min-width: 0;
  padding: var(--space-5);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.ext-preview-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ext-border);
}

.ext-preview-header div span,
.ext-preview-toolbar div span,
.ext-preview-metrics span {
  display: block;
  color: var(--ext-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ext-preview-header div strong,
.ext-preview-toolbar div strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
}

.ext-preview-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ext-success-soft);
  color: var(--ext-success);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ext-preview-state i {
  font-size: 7px;
}

.ext-preview-toolbar {
  margin-block: var(--space-4);
  padding: var(--space-4);
  background: var(--ext-surface-subtle);
  border-radius: var(--radius-sm);
}

.ext-preview-toolbar button {
  min-height: var(--control-sm);
  padding: var(--space-2) var(--space-4);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border-strong);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 800;
}

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

.ext-preview-metrics > div {
  padding: var(--space-4);
  background: var(--ext-brand-soft);
  border-radius: var(--radius-sm);
}

.ext-preview-metrics strong {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 22px;
}

.ext-preview-list {
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-sm);
}

.ext-preview-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(110px, 1.3fr) 0.45fr 0.9fr 0.7fr;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ext-border);
  font-size: 11px;
}

.ext-preview-row:first-child {
  border-top: 0;
}

.ext-preview-row-head {
  background: var(--ext-surface-subtle);
  color: var(--ext-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ext-preview-row mark {
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  background: var(--ext-success-soft);
  color: var(--ext-success);
  border-radius: var(--radius-pill);
  font-weight: 800;
}

.ext-preview-row mark.is-pending {
  background: var(--ext-warning-soft);
  color: var(--ext-warning);
}

.ext-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.ext-feature-card {
  padding: var(--space-5);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ext-feature-card > span {
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-control);
}

.ext-feature-card h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 16px;
}

.ext-feature-card p {
  color: var(--ext-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.ext-continuity-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.ext-continuity-grid > div > p {
  margin-top: var(--space-4);
  color: var(--ext-text-muted);
  line-height: 1.7;
}

.ext-continuity-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.ext-continuity-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-md);
}

.ext-continuity-list li > span {
  color: var(--ext-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.ext-continuity-list h3 {
  margin-bottom: var(--space-1);
  font-size: 15px;
}

.ext-continuity-list p {
  color: var(--ext-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ext-ownership-card {
  padding: var(--space-6);
  background: var(--ext-surface);
  border: 1px solid var(--ext-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ext-ownership-card.is-current {
  border-color: var(--c-border-hover);
  box-shadow: inset 0 3px 0 var(--ext-brand), var(--shadow-md);
}

.ext-ownership-card.is-owned {
  box-shadow: inset 0 3px 0 var(--ext-success), var(--shadow-sm);
}

.ext-ownership-card > div span,
.ext-ownership-card > div strong {
  color: var(--ext-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ext-ownership-card h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 22px;
}

.ext-ownership-card code {
  color: var(--ext-text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.ext-ownership-card p {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--ext-text-muted);
  font-size: 14px;
}

@media (max-width: 1024px) {
  .ext-hero-layout,
  .ext-detail-hero-grid,
  .ext-faq-layout,
  .ext-continuity-grid {
    grid-template-columns: 1fr;
  }

  .ext-hero-note {
    max-width: 680px;
  }

  .ext-detail-hero-grid {
    gap: var(--space-10);
  }

  .ext-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ext-hero,
  .ext-detail-hero {
    padding-block: 80px var(--space-10);
  }

  .ext-hero-copy h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .ext-section {
    padding-block: var(--space-12);
  }

  .ext-hero-note {
    padding: var(--space-4);
  }

  .ext-section-heading,
  .ext-final-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .ext-section-heading {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .ext-product-grid,
  .ext-choice-grid,
  .ext-ownership-grid,
  .ext-step-grid {
    grid-template-columns: 1fr;
  }

  .ext-product-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ext-card-actions {
    justify-content: flex-start;
  }

  .ext-card-actions .ext-btn {
    flex: 1 1 180px;
  }

  .ext-feature-grid {
    grid-template-columns: 1fr;
  }

  .ext-final-card {
    margin-inline: var(--content-gutter);
    padding-inline: var(--space-6);
  }

  .ext-final-card.ext-shell {
    width: auto;
  }
}

@media (max-width: 520px) {
  .ext-actions,
  .ext-card-actions {
    width: 100%;
  }

  .ext-actions .ext-btn,
  .ext-card-actions .ext-btn,
  .ext-final-card > .ext-btn {
    width: 100%;
  }

  .ext-product-card,
  .ext-choice-card,
  .ext-ownership-card {
    padding: var(--space-5);
  }

  .ext-product-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .ext-choice-card {
    flex-direction: column;
  }

  .ext-preview {
    padding: var(--space-4);
  }

  .ext-preview-metrics {
    grid-template-columns: 1fr;
  }

  .ext-preview-row {
    grid-template-columns: minmax(100px, 1.3fr) 0.4fr 0.8fr;
  }

  .ext-preview-row > :nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ext-storefront *,
  .ext-storefront *::before,
  .ext-storefront *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

/* Conversion release: light V2 offer hierarchy */
.ext-conversion-hero { padding-bottom: 54px; }
.ext-conversion-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:42px; align-items:center; }
.ext-conversion-hero .ext-hero-copy { max-width:760px; }
.ext-conversion-hero .ext-hero-copy h1 { max-width:740px; }
.ext-trust-line { display:flex; flex-wrap:wrap; gap:10px 18px; margin:24px 0 4px; color:var(--c-text-dim); font-size:13px; font-weight:700; }
.ext-trust-line span { display:inline-flex; align-items:center; gap:8px; }
.ext-trust-line i { color:var(--c-accent); }
.ext-offer-summary { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-lg); }
.ext-offer-badge,.ext-free-pill { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:var(--radius-pill); background:var(--c-success-soft); border:1px solid var(--c-success); color:var(--c-success-ink); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.ext-offer-summary h2 { margin:14px 0 20px; font-size:25px; color:var(--c-text); }
.ext-offer-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--c-border); }
.ext-offer-row > span { display:flex; align-items:center; gap:9px; color:var(--c-text); font-weight:750; }
.ext-offer-row > span i { color:var(--c-accent); }
.ext-offer-row strong { color:var(--c-text); font-size:19px; white-space:nowrap; }
.ext-offer-row strong span { color:var(--c-text-dim); font-size:11px; font-weight:700; }
.ext-offer-summary > p { margin:16px 0 0; color:var(--c-text-dim); font-size:12px; line-height:1.6; }
.ext-conversion-heading { align-items:end; }
.ext-conversion-grid { align-items:stretch; }
.ext-conversion-card { display:flex; flex-direction:column; gap:20px; padding:30px; }
.ext-conversion-card .ext-check-list { margin:0; }
.ext-conversion-card .ext-card-actions { margin-top:auto; }
.ext-conversion-price { padding:18px 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.ext-conversion-price > span { display:block; color:var(--c-text-faint); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ext-conversion-price strong { display:block; margin-top:4px; color:var(--c-text); font-family:var(--font-display); font-size:31px; letter-spacing:-.04em; }
.ext-conversion-price strong small { color:var(--c-text-dim); font-size:13px; letter-spacing:0; }
.ext-conversion-price p { margin:5px 0 0; color:var(--c-text-dim); font-size:12px; }
.ext-status.is-trial { background:var(--c-accent-soft); color:var(--c-accent); border-color:var(--c-border-hover); }
.ext-status.is-ready { background:var(--c-surface-2); color:var(--c-text-dim); border-color:var(--c-border); }
.ext-action-feedback { min-height:20px; margin:0; color:var(--c-danger-ink); font-size:12px; font-weight:700; }
.ext-action-feedback.is-success { color:var(--c-success-ink); }
.ext-btn[aria-disabled="true"] { opacity:.72; pointer-events:none; }
.ext-detail-offer { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin:22px 0 10px; }
.ext-detail-offer > span { padding:7px 11px; border-radius:var(--radius-pill); background:var(--c-success-soft); color:var(--c-success-ink); font-size:11px; font-weight:800; text-transform:uppercase; }
.ext-detail-offer strong { color:var(--c-text); font-family:var(--font-display); font-size:32px; }
.ext-detail-offer strong small { color:var(--c-text-dim); font-size:13px; }
.ext-detail-offer p { flex-basis:100%; margin:0; color:var(--c-text-dim); font-size:12px; font-weight:650; }
.ext-active-trial { display:inline-flex; align-items:center; gap:8px; margin:5px 0 4px; padding:10px 13px; border-radius:var(--radius-sm); background:var(--c-accent-soft); color:var(--c-accent); font-size:13px; font-weight:800; }
.ext-simple-flow { background:var(--soft-gradient); }

@media(max-width:960px){.ext-conversion-hero-grid{grid-template-columns:1fr;gap:26px}.ext-offer-summary{max-width:none}.ext-conversion-heading{align-items:start}}
@media(max-width:640px){.ext-conversion-hero{padding-bottom:36px}.ext-conversion-card{padding:22px}.ext-offer-summary{padding:21px}.ext-offer-row{align-items:flex-start}.ext-offer-row strong{font-size:16px}.ext-trust-line{display:grid;gap:9px}.ext-card-actions .ext-btn{width:100%}.ext-detail-offer strong{font-size:28px}}
