:root {
      --bg-dark: #0e0d0f;
      --card-bg: rgba(24, 24, 27, 0.78);
      --card-border: rgba(255, 255, 255, 0.09);
      --text-primary: #F2F2F7;
      --text-secondary: #8E8E93;
      --text-muted: #636368;
      --orange-glow: #FF6200;
      --orange-text: #FF7A01;
      --heavy-blue-glow: #A2C1F0;
      --spring-easing: cubic-bezier(0.22, 1, 0.36, 1);
      --morph-easing: cubic-bezier(0.25, 1, 0.5, 1);
    }

    .phone-viewport * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }



    /* 1:1 Mobile Screen Container (GPU layer promoted) */
    .phone-viewport {
      position: relative;
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      background-color: var(--bg-dark);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      transform: translateZ(0);

    }


    /* ==========================================================================
       1. FULL-SCREEN COSMIC BACKGROUND (100% GPU Composited Opacity + Transform)
       ========================================================================== */
    .hero-bg-stack {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      contain: strict;
    }

    .hero-bg-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      object-position: center top;
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(1.03);
      transition: opacity 0.42s var(--morph-easing), transform 0.52s var(--spring-easing);
      will-change: opacity, transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .hero-bg-layer.active {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* Lightweight top-hero starfield canvas (restricted to 240px height, no expensive blend mode) */
    #cosmic-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 240px;
      pointer-events: none;
      z-index: 1;
      opacity: 0.75;
      transform: translateZ(0);
    }

    .hero-vignette {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 130px;
      background: linear-gradient(180deg, rgba(14, 13, 15, 0) 0%, rgba(14, 13, 15, 0.88) 70%, #0e0d0f 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* Static GPU-composited diagonal cosmic light ray */
    .ambient-diagonal-ray {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background: linear-gradient(
        130deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(200, 218, 255, 0.024) 45%,
        rgba(255, 255, 255, 0.052) 51%,
        rgba(200, 218, 255, 0.024) 57%,
        rgba(255, 255, 255, 0) 70%
      );
      transform: translateZ(0);
    }

    /* ==========================================================================
       2. TOP AREA
       ========================================================================== */
    .top-section {
      position: relative;
      z-index: 10;
      padding-top: 80px;
      flex-shrink: 0;
    }

    /* ==========================================================================
       3. HEADER TITLE LOCKUP & SUBTITLE (Zero-Reflow Pure translate3d Animation)
       ========================================================================== */
    .header-section {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 12px;
    }

    .brand-lockup-stage {
      position: relative;
      height: 52px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /*
     * Zero-reflow lockup: "SuperGrok" translates horizontally via GPU translate3d
     * while suffixes are absolutely positioned on its right edge.
     */
    .brand-lockup {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transform: translate3d(-40px, 0, 0);
      transition: transform 0.38s var(--spring-easing);
      will-change: transform;
      backface-visibility: hidden;
    }

    .brand-lockup[data-lockup="lite"] {
      transform: translate3d(-37px, 0, 0);
    }

    .brand-lockup[data-lockup="supergrok"] {
      transform: translate3d(0px, 0, 0);
    }

    .brand-lockup[data-lockup="heavy"] {
      transform: translate3d(-40px, 0, 0);
    }

    .brand-title {
      font-size: 42px;
      font-weight: 600;
      letter-spacing: -0.032em;
      line-height: 1.05;
      color: #E6E6EB;
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    }

    .suffix-slot {
      position: absolute;
      left: 100%;
      margin-left: 9px;
      display: inline-flex;
      align-items: center;
      opacity: 0;
      transform: translate3d(8px, 0, 0) scale(0.96);
      transition: opacity 0.28s var(--morph-easing), transform 0.36s var(--spring-easing);
      will-change: opacity, transform;
      pointer-events: none;
      white-space: nowrap;
    }

    .suffix-slot.active-lite,
    .suffix-slot.active-heavy {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .lite-word {
      font-size: 38px;
      font-weight: 300;
      letter-spacing: -0.02em;
      color: #9A9AA2;
      line-height: 1;
      transform: translateY(2px);
    }

    .heavy-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 29px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 14.5px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: #ECEEF2;
      background: linear-gradient(180deg, rgba(108, 118, 142, 0.85) 0%, rgba(80, 88, 108, 0.85) 100%);
      border: 1px solid rgba(185, 208, 248, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35);
      transform: translateY(2px);
    }

    /* Subtitle directional transition (pure translate3d + opacity, no expensive blur filter) */
    .subtitle-stage {
      position: relative;
      height: 24px;
      width: 100%;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .subtitle-item {
      position: absolute;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #E5E5EA;
      white-space: nowrap;
      opacity: 0;
      transform: translate3d(16px, 0, 0);
      transition: opacity 0.3s var(--morph-easing), transform 0.36s var(--spring-easing);
      will-change: opacity, transform;
      pointer-events: none;
    }

    .subtitle-item.active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .subtitle-item.exit-left {
      opacity: 0;
      transform: translate3d(-16px, 0, 0);
    }

    .subtitle-item.exit-right {
      opacity: 0;
      transform: translate3d(16px, 0, 0);
    }

    /* ==========================================================================
       4. SEGMENTED TAB BAR & SUBTLE ICY-BLUE GRADIENT BORDER
       ========================================================================== */
    .tab-bar-wrapper {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 12;
    }

    .segmented-tabs {
      position: relative;
      display: inline-flex;
      align-items: center;
      background: rgba(29, 29, 33, 0.9);
      border-radius: 999px;
      padding: 3px;
      height: 32px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
      transform: translateZ(0);
    }

    .segmented-tabs[data-active-tab="lite"],
    .segmented-tabs[data-active-tab="supergrok"] {
      box-shadow:
        5px 0 10px -4px rgba(162, 193, 240, 0.16),
        0 4px 16px rgba(0, 0, 0, 0.42);
    }

    /* Crisp 1.2px Icy-Blue Gradient Border (pure opacity pulse on GPU compositor) */
    .segmented-tabs::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      padding: 1.2px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.08) 44%,
        rgba(110, 122, 160, 0.55) 68%,
        rgba(168, 195, 244, 0.92) 88%,
        rgba(195, 218, 255, 0.98) 96%,
        rgba(165, 193, 242, 0.9) 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      transition: opacity 0.36s ease;
      opacity: 1;
    }

    .segmented-tabs::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      padding: 1px;
      background: rgba(255, 255, 255, 0.11);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.36s ease;
    }

    .segmented-tabs[data-active-tab="heavy"]::before {
      opacity: 0.12;
    }

    .segmented-tabs[data-active-tab="heavy"]::after {
      opacity: 1;
    }

    /* Sliding active pill indicator (pure translate3d, zero width reflow lag) */
    .tab-pill-indicator {
      position: absolute;
      top: 2.5px;
      bottom: 2.5px;
      left: 3px;
      width: 54px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(66, 67, 73, 0.96) 0%, rgba(50, 51, 56, 0.96) 100%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.35);
      transition: transform 0.36s var(--spring-easing), width 0.36s var(--spring-easing), border-color 0.3s ease;
      will-change: transform, width;
      z-index: 0;
      pointer-events: none;
    }

    .segmented-tabs[data-active-tab="heavy"] .tab-pill-indicator {
      border-color: rgba(255, 255, 255, 0.26);
    }

    .tab-btn {
      position: relative;
      z-index: 1;
      border: none;
      background: transparent;
      color: #9898A0;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: -0.01em;
      height: 26px;
      padding: 0 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: color 0.22s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .tab-btn.active {
      color: #FFFFFF;
      font-weight: 600;
    }

    /* ==========================================================================
       5. MIDDLE CARDS AREA (Zero-Reflow GPU translate3d Choreography!)
       ========================================================================== */
    .cards-scroll-area {
      position: relative;
      z-index: 10;
      flex: 1;
      padding: 18px 10px 0 10px;
      display: block;
      overflow-y: auto;
      min-height: 0;
      scrollbar-width: none;
    }

    /*
     * Zero-Reflow Promo Card:
     * Positioned absolutely at top of cards-scroll-area and animated purely via
     * GPU-composited transform: translate3d() & opacity (no max-height reflow!).
     */
    .promo-collapse-wrapper {
      position: absolute;
      top: 18px;
      left: 10px;
      right: 10px;
      height: 112px;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(0, -10px, 0) scale(0.98);
      transition:
        opacity 0.28s var(--morph-easing),
        transform 0.38s var(--spring-easing);
      will-change: opacity, transform;
      backface-visibility: hidden;
      z-index: 2;
    }

    .promo-collapse-wrapper.expanded {
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .promo-card {
      position: relative;
      height: 100%;
      border-radius: 24px;
      background: linear-gradient(155deg, rgba(31, 29, 34, 0.9) 0%, rgba(19, 18, 22, 0.94) 100%);
      border: 1px solid rgba(255, 255, 255, 0.085);
      padding: 14px 18px 15px 18px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    }

    /* Crisp 1.5px Orange Top Border Line + Faint 5px Whisper Halo on Promo Card */
    .promo-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1.5px;
      background: radial-gradient(
        46% 100% at 50% 0%,
        #FF8524 0%,
        #EE5D0B 38%,
        rgba(227, 82, 0, 0.35) 68%,
        rgba(255, 98, 0, 0) 100%
      );
      box-shadow: 0 1px 6px rgba(238, 93, 11, 0.28);
      pointer-events: none;
      animation: subtleBorderBreathe 3s ease-in-out infinite alternate;
      will-change: opacity, transform;
    }

    .promo-card::after {
      content: "";
      position: absolute;
      top: -4px;
      left: 26%;
      width: 48%;
      height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(238, 93, 11, 0.16) 0%, rgba(238, 93, 11, 0) 75%);
      pointer-events: none;
    }

    .promo-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(88, 35, 13, 0.72);
      border: 1px solid rgba(228, 98, 22, 0.72);
      color: var(--orange-text);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      margin-bottom: 8px;
    }

    .promo-badge svg {
      width: 13px;
      height: 13px;
      stroke: var(--orange-text);
      flex-shrink: 0;
    }

    .promo-headline {
      font-size: 16px;
      font-weight: 600;
      color: #F2F2F7;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }

    .promo-subline {
      font-size: 12.5px;
      font-weight: 400;
      color: #8E8E93;
      letter-spacing: -0.01em;
    }

    /* ==========================================================================
       6. MORPHING FEATURE CARD (Zero-Reflow translate3d Position + Pre-rendered Panels)
       ========================================================================== */
    .feature-card {
      position: relative;
      border-radius: 24px;
      background: linear-gradient(
        135deg,
        rgba(31, 31, 36, 0.84) 0%,
        rgba(23, 23, 27, 0.88) 48%,
        rgba(17, 17, 20, 0.92) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.095);
      overflow: hidden;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
      transform: translate3d(0, 0, 0);
      transition: transform 0.38s var(--spring-easing), height 0.38s var(--spring-easing);
      will-change: transform;
      backface-visibility: hidden;
    }

    .feature-card[data-theme="heavy"] {
      height: 244px;
      transform: translate3d(0, 0, 0);
    }

    .feature-card[data-theme="lite"] {
      height: 304px;
      transform: translate3d(0, 0, 0);
    }

    /* Slides down smoothly via GPU translate3d when SuperGrok promo card appears */
    .feature-card[data-theme="supergrok"] {
      height: 288px;
      transform: translate3d(0, 124px, 0);
    }

    /* Diagonal Glass Light Beam + GPU-Composited Sweep on Tab Switch */
    .feature-card-sheen {
      position: absolute;
      inset: -30%;
      pointer-events: none;
      background: linear-gradient(
        126deg,
        rgba(255, 255, 255, 0) 28%,
        rgba(215, 226, 250, 0.036) 44%,
        rgba(255, 255, 255, 0.082) 51%,
        rgba(215, 226, 250, 0.04) 58%,
        rgba(255, 255, 255, 0) 72%
      );
      z-index: 0;
      transform: translate3d(0, 0, 0);
      will-change: transform, opacity;
    }

    .feature-card.sweep-trigger .feature-card-sheen {
      animation: cardSweepBurst 0.55s var(--spring-easing) forwards;
    }

    @keyframes cardSweepBurst {
      0% {
        opacity: 0.45;
        transform: translate3d(-22%, -14%, 0);
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.88;
        transform: translate3d(0%, 0%, 0);
      }
    }

    /* Crisp 1.5px Top Border Line + Faint 5px Whisper Halo (Pure opacity/scaleX on GPU) */
    .feature-card-top-glow {
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1.5px;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      transform: scaleX(0.5) translateZ(0);
      transition: opacity 0.32s ease, transform 0.42s var(--spring-easing);
      will-change: opacity, transform;
    }

    .feature-card[data-theme="supergrok"] .feature-card-top-glow {
      opacity: 1;
      transform: scaleX(1) translateZ(0);
      background: radial-gradient(
        46% 100% at 50% 0%,
        #FF8524 0%,
        #EE5D0B 38%,
        rgba(227, 82, 0, 0.35) 68%,
        rgba(255, 98, 0, 0) 100%
      );
      box-shadow: 0 1px 6px rgba(238, 93, 11, 0.28);
      animation: subtleBorderBreathe 3s ease-in-out infinite alternate;
    }

    .feature-card[data-theme="heavy"] .feature-card-top-glow {
      opacity: 1;
      transform: scaleX(1) translateZ(0);
      background: radial-gradient(
        46% 100% at 50% 0%,
        #DCEBFF 0%,
        #A2C1F0 38%,
        rgba(147, 178, 225, 0.35) 68%,
        rgba(162, 193, 240, 0) 100%
      );
      box-shadow: 0 1px 6px rgba(162, 193, 240, 0.28);
      animation: subtleBorderBreathe 3s ease-in-out infinite alternate;
    }

    /* Pure GPU opacity + scaleX animation (no expensive filter: brightness) */
    @keyframes subtleBorderBreathe {
      0% {
        opacity: 0.82;
        transform: scaleX(0.96) translateZ(0);
      }
      100% {
        opacity: 1;
        transform: scaleX(1.02) translateZ(0);
      }
    }

    /* Ultra-delicate, faint 5px whisper halo hugging the top border */
    .feature-card-ambient-top {
      position: absolute;
      top: -4px;
      left: 26%;
      width: 48%;
      height: 9px;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.36s ease;
      z-index: 1;
    }

    .feature-card[data-theme="supergrok"] .feature-card-ambient-top {
      opacity: 0.16;
      background: radial-gradient(circle, #EE5D0B 0%, rgba(238, 93, 11, 0) 75%);
    }

    .feature-card[data-theme="heavy"] .feature-card-ambient-top {
      opacity: 0.16;
      background: radial-gradient(circle, #A2C1F0 0%, rgba(162, 193, 240, 0) 75%);
    }

    /* Pre-rendered Feature Panels (Zero DOM creation / innerHTML parsing during tab click) */
    .feature-list-stage {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
    }

    .feature-panel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      opacity: 0;
      transform: translate3d(0, 8px, 0);
      pointer-events: none;
      transition: opacity 0.26s var(--morph-easing), transform 0.34s var(--spring-easing);
      will-change: opacity, transform;
      backface-visibility: hidden;
    }

    .feature-panel.active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .feature-row {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 36px;
    }

    .feature-icon-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #0B0B0D;
      border: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    .feature-icon-circle svg {
      width: 19px;
      height: 19px;
      color: #E5E5EA;
    }

    .feature-text-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
    }

    .feature-title {
      font-size: 14.5px;
      font-weight: 600;
      color: #ECECF1;
      letter-spacing: -0.01em;
      line-height: 1.25;
    }

    .feature-subtitle {
      font-size: 12.5px;
      font-weight: 400;
      color: #84848B;
      line-height: 1.25;
    }

    /* ==========================================================================
       7. BOTTOM PRICING SELECTOR & PRIMARY CTA BAR (Zero-Reflow GPU Transitions)
       ========================================================================== */
    .bottom-dock {
      position: relative;
      z-index: 12;
      padding: 0 9px 10px 9px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0;
    }

    .pricing-stage {
      position: absolute;
      bottom: 88px;
      left: 9px;
      right: 9px;
      height: 92px;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: opacity 0.26s var(--morph-easing), transform 0.32s var(--spring-easing);
      will-change: opacity, transform;
    }

    .pricing-stage[data-plan="heavy"] {
      height: 78px;
    }

    .pricing-stage.hidden-pricing {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
      pointer-events: none;
    }

    .pricing-tray {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background: rgba(23, 23, 27, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.07);
      padding: 4px;
      display: flex;
      align-items: stretch;
      transform: translateZ(0);
    }

    .pricing-active-highlight {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc(50% - 4px);
      border-radius: 16px;
      background: rgba(38, 38, 43, 0.82);
      border: 1.5px solid rgba(255, 255, 255, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
      transform: translate3d(0, 0, 0);
      transition: transform 0.34s var(--spring-easing), width 0.34s var(--spring-easing);
      will-change: transform, width;
      pointer-events: none;
      z-index: 0;
    }

    .pricing-tray[data-mode="lite-yearly"] .pricing-active-highlight {
      transform: translate3d(100%, 0, 0);
      width: calc(50% - 4px);
    }

    .pricing-tray[data-mode="heavy-single"] .pricing-active-highlight {
      transform: translate3d(0, 0, 0);
      width: calc(100% - 8px);
    }

    .pricing-grid-lite {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      height: 100%;
    }

    .pricing-option-btn {
      background: transparent;
      border: none;
      text-align: left;
      padding: 9px 14px;
      border-radius: 16px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 3px;
      color: var(--text-primary);
      transition: opacity 0.22s ease;
    }

    .pricing-option-top {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #D1D1D6;
      transition: color 0.22s ease;
    }

    .pricing-option-btn.selected .pricing-option-top {
      color: #FFFFFF;
    }

    .save-pill {
      display: inline-flex;
      align-items: center;
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      color: #D1D1D6;
      font-size: 10.5px;
      font-weight: 600;
    }

    .pricing-option-btn.selected .save-pill {
      background: rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
    }

    .pricing-amount-row {
      display: flex;
      align-items: baseline;
      gap: 1px;
      margin-top: 1px;
    }

    .price-main {
      font-size: 18.5px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: rgba(255, 255, 255, 0.65);
      transition: color 0.22s ease;
    }

    .pricing-option-btn.selected .price-main {
      color: #FFFFFF;
    }

    .price-unit {
      font-size: 12.5px;
      font-weight: 500;
      color: #7C7C82;
    }

    .price-sub {
      font-size: 11.5px;
      font-weight: 500;
      color: #68686E;
      margin-top: -1px;
    }

    .pricing-single-heavy {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      padding: 11px 15px;
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }

    .pricing-single-heavy .pricing-option-top {
      color: #FFFFFF;
    }

    .pricing-single-heavy .price-main {
      color: #FFFFFF;
    }

    .cta-btn {
      width: 100%;
      height: 50px;
      border-radius: 999px;
      border: none;
      background: #F2F2F7;
      color: #0B0B0D;
      font-size: 15.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 24px rgba(255, 255, 255, 0.12);
      transition: transform 0.15s ease, background-color 0.2s ease;
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
    }

    .cta-btn:hover {
      background: #FFFFFF;
    }

    .cta-btn:active {
      transform: scale(0.985) translateZ(0);
    }

    .cta-label {
      transition: opacity 0.2s ease, transform 0.22s var(--spring-easing);
    }

    .footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 11.5px;
      color: #636368;
    }

    .footer-links button {
      background: none;
      border: none;
      color: #636368;
      font-size: 11.5px;
      cursor: pointer;
      padding: 1px 3px;
      transition: color 0.2s ease;
    }

    .footer-links button:hover {
      color: #9898A0;
    }

    /* ==========================================================================
       8. INTERACTIVE TOAST / MODAL & CODE INSPECTOR DRAWER
       ========================================================================== */
    .app-toast {
      position: absolute;
      bottom: 84px;
      left: 50%;
      transform: translate3d(-50%, 16px, 0);
      background: rgba(36, 36, 40, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #FFFFFF;
      padding: 9px 16px;
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.28s var(--spring-easing);
      z-index: 50;
    }

    .app-toast.visible {
      opacity: 1;
      transform: translate3d(-50%, 0, 0);
    }


/* Repository-owned sidebar; device geometry belongs to shared/device-shell.css. */
html{box-sizing:border-box;font:16px -apple-system,BlinkMacSystemFont,'PingFang SC','Segoe UI',sans-serif;background:#10151c;color:#edf0f2}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100dvh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 65% 10%,#27303b,#10151c 70%)}
.subscription-layout{padding:0 20px;align-items:start;height:844px}
.subscription-layout .demo-preview{align-items:center}
.phone-viewport{background:#0e0d0f}
.cards-scroll-area::-webkit-scrollbar,.subscription-sidebar::-webkit-scrollbar{display:none}
.subscription-sidebar{padding:25px 29px;background:#182029;border:1px solid #ffffff1a;color:#e8eef0;user-select:text;overscroll-behavior:contain}
.subscription-sidebar *{user-select:text}
.subscription-sidebar button,.subscription-sidebar a{user-select:none;font:inherit;cursor:pointer}
.subscription-sidebar .detail-panel-nav{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px;color:#9eafb5}
.subscription-sidebar .back-link{color:#88e4d7;text-decoration:none;font-weight:600}
.subscription-sidebar .case-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;margin-bottom:30px}
.subscription-sidebar .case-tabs a{padding:10px 13px;border-radius:14px;background:#252f38;border:1px solid #ffffff1b;color:#c4d0d3;text-decoration:none;font-size:12px}
.subscription-sidebar .case-tabs a.active{border-color:#91e3d3;color:#d6fff5;background:#31544e}
.subscription-sidebar .eyebrow{color:#89ccc5;letter-spacing:1.4px;font-size:10px;font-weight:700}
.subscription-sidebar h1{font-size:30px;line-height:1.2;margin:12px 0 13px;letter-spacing:-.6px}
.subscription-sidebar .lede{font-size:14px;color:#b2c0c5;line-height:1.8;margin-bottom:20px}
.subscription-sidebar .note-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.subscription-sidebar .note-grid>div{border:1px solid #ffffff17;border-radius:13px;padding:13px;background:#ffffff06;display:flex;flex-direction:column;gap:8px}
.subscription-sidebar .note-grid span{font-size:11px;color:#93a7ad}
.subscription-sidebar .note-grid strong{font-size:12px;font-weight:600}
.subscription-sidebar .detail-card{background:#ffffff07;border:1px solid #ffffff12;border-radius:17px;padding:16px 18px;margin-top:15px}
.subscription-sidebar .detail-card h2{font-size:14px;margin:0 0 8px}
.subscription-sidebar .detail-card p{font-size:12px;line-height:1.8;color:#b7c4c7;margin:0;white-space:pre-wrap}
.subscription-sidebar .copy-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.subscription-sidebar .copy-row button{padding:12px 9px;font-size:12px;border:1px solid #8fe2d0;border-radius:11px;background:#2b4745;color:#e0fff7}
.subscription-sidebar .skill-box{margin-top:18px}
.subscription-sidebar .skill-box label{display:block;font-size:12px;margin-bottom:8px;color:#b8c8cd}
.subscription-sidebar .demo-skill-source{display:block;width:100%;border-radius:13px;background:#10171d;border:1px solid #ffffff24;color:#b8cbc9;padding:14px;font:12px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.subscription-sidebar .footer-note{margin:20px 0 0;font-size:11px;line-height:1.7;color:#91a0a6}
.subscription-sidebar :focus-visible,.phone-viewport :focus-visible{outline:2px solid #a1fff0;outline-offset:3px}
@media(max-width:960px){body{display:block;overflow-y:auto}.subscription-layout{height:auto;padding:20px 12px 28px;gap:30px}.subscription-sidebar{height:auto;min-height:500px;padding:24px}}
@media(max-width:390px){.subscription-sidebar{padding:20px 14px}.subscription-sidebar .case-tabs{gap:6px}.subscription-sidebar .case-tabs a{padding:9px 7px}}
@media(prefers-reduced-motion:reduce){.phone-viewport *,.phone-viewport *::before,.phone-viewport *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}