/**
 * SAAS LAUNCH VAULT — RESPONSIVE CSS
 * Phase 01: Breakpoint Adaptations (1440px, 1280px, 1024px, 768px, 390px)
 * & Accessibility (Prefers-Reduced-Motion)
 */

/* ==========================================================================
   1. LAPTOP & SMALL DESKTOP (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --container-padding: var(--container-padding-tablet);
  }

  .nav-links {
    gap: 2px;
  }

  .nav-link {
    padding: 5px 9px;
    font-size: 0.72rem;
  }

  .btn--nav-explore {
    display: none;
  }

  .stack-card-body {
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .stack-card-header {
    padding: var(--space-4) var(--space-6);
  }

  /* Phase 07: 1024px Adaptations */
  .why-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bundles-grid {
    gap: var(--space-6);
  }

  .licensing-grid {
    gap: var(--space-6);
  }

  /* Phase 08: 1024px Adaptations */
  .category-nodes-cluster {
    grid-template-columns: repeat(3, 1fr);
  }

  .market-worlds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Phase 09: 1024px Technical Foundation Adaptations */
  .source-model-orbit {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-receive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-map-nodes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dev-stages-grid {
    grid-template-columns: 1fr;
  }

  .precision-notes-grid {
    grid-template-columns: 1fr;
  }

  /* Phase 10: 1024px Closing Experience Adaptations */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-8);
  }

  .final-bundle-pricing-grid {
    max-width: 100%;
  }
}

/* ==========================================================================
   2. TABLET PORTRAIT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --nav-height: 70px;
    --nav-height-scrolled: 60px;
  }

  .site-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-nav {
    border-radius: 16px;
    padding: 6px 12px;
  }

  /* Navigation Mobile State */
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .nav-actions .btn {
    display: none; /* Moved to mobile drawer */
  }

  .nav-actions .nav-cart-btn {
    display: inline-flex;
    padding: 0 10px;
    height: 36px;
    align-items: center;
    border-radius: 9999px;
  }

  /* Hero Section Adaptations: Centered Editorial Hierarchy */
  .hero-section {
    padding-top: calc(var(--nav-height) + var(--space-6));
    padding-bottom: var(--space-8);
    min-height: auto;
  }

  .hero-editorial-wrap {
    max-width: 100%;
    padding-block: var(--space-2);
  }

  .hero-headline {
    font-size: clamp(2.25rem, 7vw, 3.5rem);
  }

  .hero-supporting {
    font-size: 1.0625rem;
    margin-bottom: var(--space-6);
  }

  .hero-cta-group {
    margin-bottom: var(--space-6);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 420px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-pricing-teaser {
    font-size: 0.75rem;
    text-align: center;
  }

  .hero-proof-block {
    margin-bottom: var(--space-6);
  }

  .hero-media-block {
    margin-top: var(--space-2);
  }

  .video-abstract-canvas {
    padding: var(--space-5);
  }

  .video-category-strip {
    gap: var(--space-1);
  }

  .video-category-pill {
    font-size: 0.625rem;
    padding: 0.25rem 0.55rem;
  }

  .video-play-cta {
    font-size: var(--font-size-meta);
  }

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

  .video-modal-dialog {
    border-radius: var(--radius-md);
  }

  .video-modal-close {
    top: var(--space-3);
    right: var(--space-3);
    width: 38px;
    height: 38px;
  }

  .hero-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-5);
  }

  /* ==========================================================================
     Phase 03 Product Stack Adaptations (Tablet)
     ========================================================================== */
  .product-navigator {
    display: none !important; /* Hide fixed dock on tablet and mobile */
  }

  .product-progress-mobile {
    display: flex; /* Display compact horizontal progress indicator */
  }

  /* Phase 14: Mobile Product Cards & Native Sticky Stacking Architecture */
  :root {
    --mobile-header-height: 64px;
    --mobile-stack-top: calc(var(--mobile-header-height) + 12px);
  }

  .products-stack {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 35vh; /* Provides runway for Card 05 to pin before natural release into #why-vault */
  }

  .product-card {
    position: sticky;
    top: var(--mobile-stack-top);
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 44px -8px rgba(10, 12, 16, 0.28), 0 2px 8px rgba(10, 12, 16, 0.08);
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5);
    margin-bottom: 40vh; /* Sufficient scroll distance for next card to physically rise and overlay */
    overflow: hidden;
    scroll-margin-top: calc(var(--mobile-stack-top) + 8px);
    will-change: transform, filter, opacity;
    transform-origin: center top;
    transition: box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out),
                filter var(--duration-normal) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out);
  }

  /* Progressive Stepped Ledges & Deterministic Z-Index */
  .product-card--01 {
    z-index: 1;
    top: calc(var(--mobile-stack-top) + 0px);
  }

  .product-card--02 {
    z-index: 2;
    top: calc(var(--mobile-stack-top) + 4px);
  }

  .product-card--03 {
    z-index: 3;
    top: calc(var(--mobile-stack-top) + 8px);
  }

  .product-card--04 {
    z-index: 4;
    top: calc(var(--mobile-stack-top) + 12px);
  }

  .product-card--05,
  .product-card:last-child {
    z-index: 5;
    top: calc(var(--mobile-stack-top) + 16px);
    margin-bottom: 0; /* Clean natural release into #why-vault */
  }

  .product-card.is-active {
    box-shadow: 0 0 0 1px var(--product-border, rgba(37, 99, 235, 0.4)),
                0 24px 64px -12px rgba(10, 12, 16, 0.42),
                0 0 36px -8px var(--product-glow, rgba(37, 99, 235, 0.25));
    border-color: var(--product-accent, var(--border-medium));
    opacity: 1;
  }

  /* Prevent inner columns from blowing out or collapsing the card */
  .product-card-left,
  .product-card-visual {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .product-card-left {
    padding-right: 0;
    overflow: visible;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Header badges — wrap naturally without overflowing */
  .product-card-header {
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-bottom: 6px;
  }

  .product-card-title {
    font-size: clamp(1.25rem, 4.2vw, 1.5rem);
    word-break: break-word;
    margin-bottom: 2px;
    line-height: 1.15;
  }

  .product-card-tagline {
    display: none;
  }

  .product-card-positioning {
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-bottom: 4px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Capabilities Grid — Compact 2-Row Showcase */
  .product-card-capabilities {
    margin-bottom: 6px;
  }

  .capabilities-title {
    font-size: 0.6rem;
    margin-bottom: 4px;
    letter-spacing: 0.06em;
  }

  .capabilities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    max-height: 52px;
    overflow: hidden;
  }

  .capability-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: 0.6875rem;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
    line-height: 1.25;
    box-sizing: border-box;
  }

  /* Direct Pricing Rows — Compact Side-by-Side */
  .pricing-tier-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 6px;
    margin-bottom: 6px;
  }

  @media (max-width: 360px) {
    .pricing-tier-row {
      grid-template-columns: 1fr;
    }
  }

  .pricing-tier-box {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-md);
  }

  .pricing-tier-box .pricing-label {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
  }

  .pricing-tier-box .pricing-value {
    font-size: 1.05rem;
    margin-block: 2px;
  }

  .pricing-tier-box .btn--tier {
    min-height: 32px;
    font-size: clamp(0.62rem, 2.7vw, 0.7rem);
    padding: 0.25rem 0.35rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Footer & Action Buttons — Controlled 2-Row Layout */
  .product-card-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding-top: 0;
  }

  .product-card-footer .btn--text {
    display: none; /* Hide redundant compare link on mobile card to keep clean focus */
  }

  .product-card-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 6px;
  }

  .product-card-footer-actions .btn--cart-add {
    grid-column: 1 / -1;
  }

  .product-card-footer-actions .btn,
  .product-card-footer .btn {
    width: 100%;
    justify-content: center;
    min-height: 38px;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 0.35rem 0.5rem;
  }

  .product-card-visual {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
    margin-top: 8px;
  }

  .product-media-container {
    width: 100%;
    gap: 8px;
  }

  .product-image-wrapper {
    aspect-ratio: 600 / 406;
    max-height: 200px;
    width: 100%;
    border-radius: var(--radius-md);
  }

  .product-card-media-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
  }

  .btn--media-action {
    font-size: 0.68rem;
    padding: 0.48rem 0.35rem;
    min-height: 38px;
    gap: 4px;
    letter-spacing: 0.02em;
  }

  .btn--media-action svg {
    width: 12px;
    height: 12px;
  }

  .product-video-wrapper {
    aspect-ratio: 16 / 9;
    min-height: auto;
    max-height: 165px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* Footer Adaptation */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .footer-links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* Phase 07: 768px Tablet Adaptations */
  .why-section {
    padding-block: var(--space-12) var(--space-16);
  }

  .why-pillars-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .decision-widget {
    padding: var(--space-5);
  }

  .decision-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .bundles-section {
    padding-block: var(--space-16) var(--space-20);
  }

  .bundles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    width: 100%;
    box-sizing: border-box;
  }

  .bundle-card {
    padding: var(--space-5);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .bundle-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
  }

  .bundle-price-block {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .bundle-price-main {
    font-size: clamp(2rem, 7.5vw, 2.75rem);
  }

  .bundle-savings-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
  }

  .bundle-products-roster {
    width: 100%;
    box-sizing: border-box;
  }

  .bundle-product-row {
    grid-template-columns: 24px 1fr auto;
    gap: var(--space-2);
    width: 100%;
    font-size: 0.8125rem;
  }

  .bundle-card-footer .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  .comparison-table-shell {
    display: none; /* Hide wide table on tablet and mobile */
  }

  .comparison-mobile-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .mobile-comp-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .mobile-comp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
  }

  .mobile-comp-row .label {
    color: var(--text-muted);
  }

  .mobile-comp-row .val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
  }

  .mobile-comp-row.header-row {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
  }

  .mobile-comp-row.header-row .prod-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .mobile-comp-card--totals {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(245, 158, 11, 0.35);
  }

  .mobile-comp-row.highlight-row {
    padding-block: 2px;
  }

  .bundle-text {
    color: var(--accent-emerald, #10b981) !important;
  }

  .bundle-text--gold {
    color: #fbbf24 !important;
    font-weight: 700;
  }

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

  /* Phase 08: 768px Adaptations */
  .audience-tabs-bar {
    justify-content: flex-start;
    padding: 4px;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .audience-tab-btn {
    flex: none;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .audience-matrix-wrap {
    padding: var(--space-4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .matrix-table-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .audience-profile-card {
    padding: var(--space-6);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .category-nodes-cluster {
    grid-template-columns: repeat(2, 1fr);
  }

  .market-worlds-grid {
    grid-template-columns: 1fr;
  }

  .strategy-progression-bar {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
  }

  .strat-node {
    gap: 4px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  /* Phase 09: 768px Technical Foundation Adaptations */
  .tech-compare-container {
    grid-template-columns: 1fr;
  }

  .license-path-grid {
    grid-template-columns: 1fr;
  }

  .tech-map-nodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .concept-layer-card {
    grid-template-columns: 75px 1fr;
    gap: var(--space-2);
  }

  .concept-layer-card .layer-details {
    grid-column: 1 / -1;
    padding-top: var(--space-1);
  }

  .tech-twin-pillars {
    grid-template-columns: 1fr;
  }

  /* Phase 10: 768px Closing Experience Adaptations */
  .final-product-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .final-decision-grid {
    grid-template-columns: 1fr;
  }

  .final-bundle-pricing-grid {
    grid-template-columns: 1fr;
  }

  .final-cta-buttons-group {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta-buttons-group .btn {
    width: 100%;
  }

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

  .footer-col--brand {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   3. MOBILE PHONES (max-width: 480px / 390px)
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --container-padding: var(--container-padding-mobile);
  }

  .site-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-nav {
    padding: 6px 10px;
    gap: 8px;
  }

  .nav-brand {
    font-size: 0.72rem;
    gap: 6px;
  }

  .nav-brand-symbol {
    width: 26px;
    height: 26px;
  }

  .brand-cube-icon {
    width: 14px;
    height: 14px;
  }

  .nav-brand-badge {
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .nav-actions .nav-cart-btn {
    height: 34px;
    padding: 0 8px;
    gap: 5px;
  }

  .hero-headline {
    font-size: clamp(2.5rem, 11vw, 3.25rem);
  }

  .hero-features-line {
    font-size: 0.6875rem;
    gap: var(--space-1);
  }

  .offer-marker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .offer-marker-price {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
    width: 100%;
  }

  .video-abstract-canvas {
    padding: var(--space-3);
  }

  .video-play-badge {
    width: 36px;
    height: 36px;
  }

  .video-play-cta {
    gap: var(--space-2);
    font-size: var(--font-size-eyebrow);
  }

  /* Phase 14 Mobile Phone (max-width: 480px) Adaptations */
  .product-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .product-card-title {
    font-size: 1.375rem;
  }

  /* Full-width pills on tiny screens */
  .capability-pill {
    max-width: 100%;
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
  }

  .product-card-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    padding-top: var(--space-2);
  }

  .product-card-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: var(--space-2);
  }

  .product-card-footer-actions .btn--cart-add {
    grid-column: 1 / -1;
  }

  @media (max-width: 340px) {
    .product-card-footer-actions {
      grid-template-columns: 1fr;
    }
  }

  .product-card-footer-actions .btn,
  .product-card-footer .btn,
  .leadflow-footer-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    box-sizing: border-box;
    font-size: 0.75rem;
  }

  .product-image-wrapper {
    max-height: 165px;
  }

  .product-card-media-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .btn--media-action {
    font-size: 0.64rem;
    padding: 0.42rem 0.25rem;
    min-height: 36px;
    gap: 4px;
  }

  .btn--media-action svg {
    width: 11px;
    height: 11px;
  }

  .licensing-preview-tiers {
    flex-direction: column;
    gap: var(--space-2);
  }

  .leadflow-topbar-search {
    display: none;
  }

  .leadflow-floating-card--workflow {
    display: none;
  }

  .leadflow-command-center,
  .leadpilot-workspace,
  .reviewpilot-workspace,
  .timebook-workspace,
  .bioscript-workspace {
    min-height: 330px;
    max-height: 420px;
  }

  .surface--server,
  .surface--timebook-license,
  .surface--php-arch {
    display: none;
  }

  .surface--assistant,
  .surface--ai-responder,
  .surface--booking-detail {
    max-width: 190px;
    padding: 0.5rem;
    transform: scale(0.82);
    transform-origin: top right;
  }

  .leadpilot-topbar-pills,
  .timebook-date-range {
    display: none;
  }

  .bioscript-mobile-device {
    width: 210px;
    height: 380px;
  }

  .surface--template-engine,
  .surface--payments-engine,
  .surface--qr-designer {
    display: none; /* Keep mobile phone screen unobstructed */
  }

  .leadflow-table td,
  .leadflow-table th {
    padding: 6px 8px;
  }

  /* Phase 07: Mobile Phone (480px) Adaptations */
  .portfolio-flow-strip {
    font-size: 0.5625rem;
    gap: var(--space-2);
    padding: 0.35rem 0.75rem;
  }

  .why-core-node {
    padding: var(--space-4);
  }

  .core-node-title {
    font-size: 1.25rem;
  }

  .bundle-price-main {
    font-size: 2.5rem;
  }

  .bundle-card {
    padding: var(--space-5);
  }

  .bundle-product-row {
    grid-template-columns: 20px 1fr auto;
    font-size: 0.75rem;
  }

  .bundle-product-row .product-cat {
    display: none; /* Conserve horizontal width on narrow phone screens */
  }

  .decision-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .decision-tab-btn {
    width: 100%;
    text-align: center;
  }

  .decision-flow-visual {
    gap: 4px;
  }

  .flow-pill {
    font-size: 0.5625rem;
    padding: 0.25rem 0.5rem;
  }

  /* Phase 08: 480px Adaptations */
  .category-nodes-cluster {
    grid-template-columns: 1fr;
  }

  .strategy-progression-bar {
    flex-direction: column;
    border-radius: var(--radius-lg);
    align-items: flex-start;
    width: 100%;
  }

  .strat-arrow {
    transform: rotate(90deg);
    margin-left: var(--space-4);
  }

  .profile-workflow-strip {
    font-size: 0.625rem;
    padding: 0.45rem 0.85rem;
    flex-wrap: wrap;
  }

  .th-audience,
  .td-audience {
    font-size: 0.75rem;
  }

  .td-status {
    font-size: 0.875rem;
  }

  /* Phase 09: 480px Mobile Adaptations */
  .source-model-orbit {
    grid-template-columns: 1fr;
  }

  .tech-receive-grid {
    grid-template-columns: 1fr;
  }

  .source-flow-ribbon {
    flex-direction: column;
    gap: var(--space-1);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }

  .source-flow-ribbon .flow-arrow {
    transform: rotate(90deg);
  }

  .tech-map-nodes-grid {
    grid-template-columns: 1fr;
  }

  .tech-snapshots-grid {
    grid-template-columns: 1fr;
  }

  .deploy-checklist-grid {
    grid-template-columns: 1fr;
  }

  .concept-layer-card {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .pillar-flow-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .pillar-arrow {
    transform: rotate(90deg);
    margin-left: var(--space-4);
  }

  /* Phase 10: 480px Closing Experience Adaptations */
  .final-video-progression {
    display: none;
  }

  .final-play-btn {
    width: 60px;
    height: 60px;
  }

  .final-play-icon {
    width: 20px;
    height: 20px;
  }

  .final-play-label {
    font-size: 0.5625rem;
  }

  .final-product-strip {
    grid-template-columns: 1fr;
  }

  .final-cta-card {
    padding: var(--space-8) var(--space-4);
  }

  .final-cta-title {
    font-size: 2rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   4. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Suppress cinematic blur overlay for users who prefer no motion */
  #stack-blur-overlay {
    display: none !important;
  }

  .site-header {
    transition: none !important;
  }

  .hero-headline-text {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .hero-stagger-1,
  .hero-stagger-2,
  .hero-stagger-3,
  .hero-stagger-4,
  .hero-stagger-5 {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .video-artifact {
    transform: none !important;
    transition: none !important;
  }

  .video-modal,
  .video-modal-dialog {
    transform: none !important;
    transition: none !important;
  }

  .hero-scroll-cue svg {
    animation: none !important;
  }

  .product-card,
  .product-panel {
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  .product-navigator {
    transition: none !important;
  }

  .btn {
    transition: none !important;
    transform: none !important;
  }

  .btn:hover {
    transform: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .final-video-frame,
  .final-poster-img,
  .final-play-btn,
  .final-strip-item,
  .final-path-card {
    transition: none !important;
    transform: none !important;
  }

  /* Phase 11: Comprehensive Reduced Motion Mode */
  html {
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sticky-conversion-bar,
  .mobile-sticky-cta,
  .section-progress-rail,
  .section-progress-dot,
  .product-navigator,
  .product-nav-item,
  .bundle-card,
  .licensing-panel {
    transition: none !important;
  }
}

/* ==========================================================================
   PHASE 11 — CONVERSION & PROGRESS COMPONENT RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (min-width: 769px) {
  .mobile-sticky-cta {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .sticky-conversion-bar {
    display: none !important;
  }

  .section-progress-rail {
    display: none !important;
  }

  .product-navigator {
    display: none !important;
  }

  /* Ensure touch targets meet minimum 44px hit area */
  .btn--sm,
  .mobile-sticky-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-sticky-cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 1024px) {
  .section-progress-rail {
    display: none !important;
  }
}

/* ==========================================================================
   SPEED OPTIMIZATIONS & MOBILE ERGONOMICS (60FPS SCROLLING)
   ========================================================================== */

/* Accelerate deep rendering on mobile/desktop by containing off-screen layout work */
@media (prefers-reduced-motion: no-preference) {
  #technical-foundation,
  #markets,
  #faq {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

/* Touch targets: ensure min 44px for buttons, pills, tabs on mobile devices */
@media (max-width: 768px) {
  .btn,
  .quick-jump-pill,
  .category-filter-btn,
  .decision-tab-btn,
  .audience-tab-btn,
  .nav-cart-btn,
  .nav-toggle {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Prevent text zoom on form inputs on iOS Safari */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Smooth momentum scrolling for responsive tables and card carousels */
  .control-matrix-wrapper,
  .pricing-matrix-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}