/* ═══════════════════════════════════════════════
         SECTION: PRICING — Featured Plan as Landmark / Plan Ladder
         Art Deco chamfered card edges, diagonal-line atmosphere,
         ascending ladder composition with centered landmark
         ═══════════════════════════════════════════════ */

      .pricing {
        position: relative;
        padding: clamp(5rem, 10vw, 8rem) 0;
        background: var(--bg-primary);
        overflow: hidden;
      }

      /* Art Deco diagonal-line atmosphere — distinct from all previous section backgrounds */
      .pricing::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 48px,
            rgba(142,153,164,0.018) 48px,
            rgba(142,153,164,0.018) 49px
          );
        pointer-events: none;
      }

      /* Warm centered glow behind featured card area */
      .pricing::after {
        content: '';
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 55%;
        height: 65%;
        background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(142,153,164,0.045) 0%, transparent 70%);
        pointer-events: none;
      }

      /* ─── Large watermark tier labels ─── */
      .pricing__bg-label {
        position: absolute;
        font-family: var(--font-display);
        font-size: clamp(8rem, 18vw, 16rem);
        font-weight: 900;
        color: var(--accent);
        opacity: 0.02;
        line-height: 0.85;
        pointer-events: none;
        z-index: 0;
        user-select: none;
      }

      .pricing__bg-label--left {
        top: 10%;
        left: 2%;
      }

      .pricing__bg-label--right {
        bottom: 5%;
        right: 2%;
      }

      /* ─── Section Header ─── */
      .pricing__header {
        text-align: center;
        margin-bottom: clamp(3rem, 6vw, 5rem);
        position: relative;
        z-index: 2;
        max-width: var(--container-max);
        margin-left: auto;
        margin-right: auto;
        padding: 0 var(--container-padding);
      }

      .pricing__eyebrow {
        font-family: var(--font-body);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 1.5rem;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
      }

      .pricing__eyebrow::before,
      .pricing__eyebrow::after {
        content: '';
        display: block;
        width: 30px;
        height: 1px;
        background: var(--accent-dim);
      }

      .pricing__title {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 5vw, 3.8rem);
        font-weight: 900;
        color: var(--fg-primary);
        line-height: 1.15;
      }

      .pricing__title em {
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }

      .pricing__subtitle {
        font-family: var(--font-accent);
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
        font-weight: 300;
        font-style: italic;
        color: var(--fg-muted);
        max-width: 460px;
        margin: 1.2rem auto 0;
        line-height: 1.7;
      }

      /* ─── Plan Ladder Container ─── */
      .pricing__ladder {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1rem, 2vw, 2rem);
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--container-padding);
      }

      /* Vertical Art Deco accent lines flanking the ladder */
      .pricing__ladder::before,
      .pricing__ladder::after {
        content: '';
        position: absolute;
        top: -8%;
        bottom: -8%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--accent-dim) 25%, var(--accent-dim) 75%, transparent);
        opacity: 0.15;
        pointer-events: none;
      }

      .pricing__ladder::before { left: clamp(-10px, 3vw, 40px); }
      .pricing__ladder::after { right: clamp(-10px, 3vw, 40px); }

      /* ─── Card Base ─── */
      .pricing__card {
        position: relative;
        flex: 1;
        max-width: 380px;
        padding: clamp(2rem, 3vw, 3rem);
        background: var(--bg-secondary);
        transition:
          transform 0.6s var(--ease-out-expo),
          filter 0.6s var(--ease-out-expo);
        /* Art Deco inspired — softer chamfered corners */
        clip-path: polygon(
          0 0,
          calc(100% - 12px) 0,
          100% 12px,
          100% 100%,
          12px 100%,
          0 calc(100% - 12px)
        );
        filter: drop-shadow(0 6px 20px rgba(10,10,10,0.35));
      }

      /* Premium: Inner top light gradient */
      .pricing__card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
        pointer-events: none;
        clip-path: polygon(
          0 0,
          calc(100% - 16px) 0,
          100% 16px,
          100% 100%,
          16px 100%,
          0 calc(100% - 16px)
        );
      }

      /* Top accent line — inset to avoid clip-path chamfer */
      .pricing__card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 22px;
        right: 22px;
        height: 2px;
        background: var(--border-light);
      }

      /* (Hover elevation now handled by pricing-revealed classes in immersive upgrades) */

      /* ─── Side Cards — pushed down for ladder step (initial position set by JS) ─── */

      /* ─── FEATURED CARD — The Landmark ─── */
      .pricing__card--featured {
        flex: 1.3;
        max-width: 420px;
        padding: clamp(2.5rem, 3.5vw, 4rem);
        background: var(--bg-tertiary);
        /* Larger chamfers for visual dominance */
        clip-path: polygon(
          0 0,
          calc(100% - 16px) 0,
          100% 16px,
          100% 100%,
          16px 100%,
          0 calc(100% - 16px)
        );
        filter:
          drop-shadow(0 0 45px rgba(142,153,164,0.1))
          drop-shadow(0 10px 36px rgba(10,10,10,0.45));
        transform: translateY(-10px);
        z-index: 3;
      }

      .pricing__card--featured::before {
        left: 28px;
        right: 28px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--accent-dim), var(--accent), var(--accent-dim), transparent);
      }

      /* (Featured hover handled by .pricing-revealed in immersive upgrades) */

      /* Corner frame marks on featured card — Art Deco architectural detail */
      .pricing__corner {
        position: absolute;
        width: 24px;
        height: 24px;
        pointer-events: none;
        transition: opacity 0.5s ease;
      }

      .pricing__corner--tl {
        top: 18px; left: 18px;
        border-top: 1px solid rgba(142,153,164,0.2);
        border-left: 1px solid rgba(142,153,164,0.2);
      }

      .pricing__corner--br {
        bottom: 18px; right: 18px;
        border-bottom: 1px solid rgba(142,153,164,0.2);
        border-right: 1px solid rgba(142,153,164,0.2);
      }

      .pricing__card--featured:hover .pricing__corner {
        opacity: 1;
      }

      /* ─── Badge: "Recommended" tab on featured card ─── */
      .pricing__badge {
        display: inline-block;
        font-family: var(--font-body);
        font-size: 0.5rem;
        font-weight: 500;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: #FFFFFF;
        background: var(--accent);
        padding: 0.4rem 1.2rem;
        margin-bottom: 1.5rem;
        /* Mini chamfered edges — consistent edge language at badge scale */
        clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
      }

      /* ─── Tier Number ─── */
      .pricing__tier-num {
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        color: var(--fg-dim);
        margin-bottom: 0.6rem;
      }

      .pricing__card--featured .pricing__tier-num {
        color: var(--accent-dim);
      }

      /* ─── Tier Name ─── */
      .pricing__tier-name {
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0.5rem;
      }

      .pricing__card:not(.pricing__card--featured) .pricing__tier-name {
        font-size: clamp(1.2rem, 1.6vw, 1.5rem);
      }

      .pricing__card--featured .pricing__tier-name {
        font-size: clamp(1.5rem, 2vw, 2rem);
      }

      /* ─── Decorative rule below tier name ─── */
      .pricing__tier-rule {
        width: 40px;
        height: 1px;
        background: var(--accent-dim);
        margin-bottom: 1rem;
      }

      .pricing__card--featured .pricing__tier-rule {
        width: 56px;
        height: 1px;
        background: var(--accent);
      }

      /* ─── Tier Description ─── */
      .pricing__tier-desc {
        font-family: var(--font-accent);
        font-size: clamp(0.8rem, 1vw, 0.95rem);
        font-weight: 300;
        line-height: 1.7;
        color: var(--fg-muted);
        margin-bottom: 1.5rem;
      }

      /* ─── Price Display ─── */
      .pricing__price {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
      }

      .pricing__price-currency {
        font-family: var(--font-body);
        font-size: 0.7em;
        font-weight: 300;
        color: var(--fg-muted);
        vertical-align: super;
        margin-right: 2px;
      }

      .pricing__price-value {
        font-family: var(--font-display);
        font-weight: 900;
        color: var(--fg-primary);
        line-height: 1;
      }

      .pricing__card:not(.pricing__card--featured) .pricing__price-value {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
      }

      .pricing__card--featured .pricing__price-value {
        font-size: clamp(3rem, 4.5vw, 4.5rem);
        /* Premium: Metallic text gradient */
        background: var(--accent-text-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .pricing__price-period {
        font-family: var(--font-body);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--fg-dim);
        margin-top: 0.35rem;
      }

      /* ─── Inclusions Checklist ─── */
      .pricing__inclusions {
        margin-bottom: 2rem;
      }

      .pricing__inclusions li {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
        font-family: var(--font-accent);
        font-size: clamp(0.8rem, 0.95vw, 0.9rem);
        font-weight: 300;
        color: var(--fg-secondary);
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(180, 172, 162, 0.3);
      }

      .pricing__inclusions li:last-child {
        border-bottom: none;
      }

      /* Art Deco dash marker for each checklist item */
      .pricing__check {
        display: inline-block;
        width: 10px;
        height: 1px;
        background: var(--accent-dim);
        flex-shrink: 0;
        position: relative;
        top: -0.1em;
      }

      .pricing__card--featured .pricing__check {
        background: var(--accent);
        width: 13px;
      }

      /* ─── CTA Buttons ─── */
      .pricing__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        font-family: var(--font-body);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 1rem 2rem;
        transition: all 0.5s var(--ease-out-expo);
        /* Chamfered edges on buttons — matching card edge language */
        clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
      }

      .pricing__cta svg {
        width: 12px;
        height: 12px;
        transition: transform 0.3s var(--ease-out-expo);
      }

      .pricing__cta:hover svg {
        transform: translateX(3px);
      }

      /* Standard CTA — outlined / ghost style */
      .pricing__cta--outline {
        color: var(--fg-secondary);
        background: transparent;
        border: 1px solid var(--border-light);
      }

      .pricing__cta--outline:hover {
        color: var(--fg-primary);
        border-color: var(--accent-dim);
        background: rgba(142,153,164,0.05);
        transform: translateY(-1px);
      }

      /* Featured CTA — solid copper with shimmer */
      .pricing__cta--primary {
        color: #FFFFFF;
        background: var(--accent);
        border: none;
        position: relative;
        overflow: hidden;
      }

      .pricing__cta--primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--accent-sweep);
        transform: translateX(-150%);
        transition: transform 0.8s var(--ease-out-expo);
      }

      .pricing__cta--primary:hover::before {
        transform: translateX(150%);
      }

      .pricing__cta--primary:hover {
        background: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(142,153,164,0.25);
      }

      /* ─── Bottom Note ─── */
      .pricing__note {
        text-align: center;
        margin-top: clamp(2.5rem, 5vw, 3.5rem);
        position: relative;
        z-index: 2;
        max-width: var(--container-max);
        margin-left: auto;
        margin-right: auto;
        padding: 0 var(--container-padding);
      }

      .pricing__note-text {
        font-family: var(--font-accent);
        font-size: 0.85rem;
        font-weight: 300;
        font-style: italic;
        color: var(--fg-dim);
      }

      .pricing__note-text::before,
      .pricing__note-text::after {
        content: ' — ';
        color: var(--accent-dim);
      }

      /* ═══════════════════════════════════════════════
         PRICING IMMERSIVE UPGRADES
         ═══════════════════════════════════════════════ */

      /* ─── 1. Price Counter Animation State ─── */
      .pricing__price-value[data-counting] {
        display: inline-block;
        min-width: 2ch;
      }

      /* ─── 2. Checklist Cascade ─── */
      .pricing__inclusions li {
        opacity: 0;
        transform: translateX(-16px);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .pricing__inclusions li.check-visible {
        opacity: 1;
        transform: translateX(0);
      }

      /* Animated checkmark — morphing dash → completed stroke */
      .pricing__check {
        position: relative;
        overflow: visible;
        height: 10px;
        width: 14px;
      }

      /* The animated checkmark SVG path overlay */
      .pricing__check-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%);
      }

      .pricing__check-icon path {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
        transition: stroke-dashoffset 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.3s ease;
        opacity: 0;
      }

      .pricing__inclusions li.check-visible .pricing__check-icon path {
        stroke-dashoffset: 0;
        opacity: 1;
      }

      /* Featured card check: copper color */
      .pricing__card--featured .pricing__check-icon path {
        stroke: var(--accent);
      }

      .pricing__card--side .pricing__check-icon path {
        stroke: var(--accent-dim);
      }

      /* Original dash line fades away when check appears */
      .pricing__check-line {
        display: inline-block;
        width: 10px;
        height: 1px;
        flex-shrink: 0;
        position: relative;
        top: -0.1em;
        background: var(--accent-dim);
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      .pricing__card--featured .pricing__check-line {
        background: var(--accent);
        width: 13px;
      }

      .pricing__inclusions li.check-visible .pricing__check-line {
        opacity: 0;
        transform: scale(0.5);
      }

      /* ─── 3. Featured Card Glow Pulse ─── */
      @keyframes pricingGlowPulse {
        0%, 100% {
          filter:
            drop-shadow(0 0 45px rgba(142,153,164,0.10))
            drop-shadow(0 10px 36px rgba(10,10,10,0.45));
        }
        50% {
          filter:
            drop-shadow(0 0 65px rgba(142,153,164,0.20))
            drop-shadow(0 10px 36px rgba(10,10,10,0.45));
        }
      }

      .pricing__card--featured.pricing-revealed {
        animation: pricingGlowPulse 4s ease-in-out infinite;
      }

      .pricing__card--featured.pricing-revealed:hover {
        animation: none;
        filter:
          drop-shadow(0 0 70px rgba(142,153,164,0.24))
          drop-shadow(0 16px 44px rgba(10,10,10,0.5));
      }

      /* ─── 4. Card Scale Stagger Entrance ─── */
      .pricing__card {
        opacity: 0;
        will-change: transform, opacity, filter;
      }

      .pricing__card.pricing-revealed {
        opacity: 1;
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Remove the global reveal system from pricing cards — we handle it */
      .pricing .reveal,
      .pricing .reveal.visible,
      .pricing .reveal.reveal-delay-1,
      .pricing .reveal.reveal-delay-2,
      .pricing .reveal.reveal-delay-3,
      .pricing .reveal.reveal-delay-4 {
        opacity: 1;
        transform: none;
        transition: none;
      }

      /* ─── 5. Magnetic CTA Button ─── */
      .pricing__cta[data-magnetic] {
        will-change: transform;
        position: relative;
      }

      .pricing__cta[data-magnetic]::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0;
        background: radial-gradient(circle at var(--mag-x, 50%) var(--mag-y, 50%), rgba(142,153,164,0.15), transparent 70%);
        transition: opacity 0.4s ease;
        pointer-events: none;
        clip-path: inherit;
      }

      .pricing__cta[data-magnetic]:hover::after {
        opacity: 1;
      }

      /* ─── 6. Art Deco Line Animation ─── */
      .pricing__deco-line {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent-dim) 20%, var(--accent) 50%, var(--accent-dim) 80%, transparent);
        opacity: 0;
        transform-origin: left center;
        transform: scaleX(0);
        pointer-events: none;
        z-index: 1;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.8s ease;
      }

      .pricing__deco-line.deco-drawn {
        opacity: 1;
        transform: scaleX(1);
      }

      .pricing__deco-line--1 {
        top: 14%; left: 4%; width: 35%;
      }

      .pricing__deco-line--2 {
        top: 14%; right: 4%; width: 35%;
        transform-origin: right center;
      }

      .pricing__deco-line--3 {
        bottom: 12%; left: 4%; width: 28%;
      }

      .pricing__deco-line--4 {
        bottom: 12%; right: 4%; width: 28%;
        transform-origin: right center;
      }

      .pricing__deco-line--5 {
        top: 50%; left: 1%; width: 18%;
        opacity: 0;
      }

      .pricing__deco-line--6 {
        top: 50%; right: 1%; width: 18%;
        transform-origin: right center;
        opacity: 0;
      }

      /* ─── 7. Hover Card Elevation ─── */
      .pricing__card.pricing-revealed:hover {
        transform: scale(1.02);
        filter: drop-shadow(0 14px 32px rgba(10,10,10,0.5));
      }

      .pricing__card--side.pricing-revealed {
        transform: translateY(40px) scale(1);
      }

      .pricing__card--side.pricing-revealed:hover {
        transform: translateY(36px) scale(1.02);
        filter: drop-shadow(0 14px 32px rgba(10,10,10,0.5));
      }

      .pricing__card--featured.pricing-revealed {
        transform: translateY(-10px) scale(1);
      }

      .pricing__card--featured.pricing-revealed:hover {
        transform: translateY(-16px) scale(1.03);
        filter:
          drop-shadow(0 0 70px rgba(142,153,164,0.24))
          drop-shadow(0 18px 48px rgba(10,10,10,0.5));
      }

      /* ─── PRICING Responsive ─── */
      @media (max-width: 1024px) {
        .pricing__ladder {
          flex-direction: column;
          align-items: center;
          gap: 2rem;
        }

        .pricing__ladder::before,
        .pricing__ladder::after {
          display: none;
        }

        .pricing__card,
        .pricing__card--featured,
        .pricing__card--side {
          max-width: 480px;
          width: 100%;
        }

        .pricing__card--side.pricing-revealed,
        .pricing__card--featured.pricing-revealed,
        .pricing__card.pricing-revealed {
          transform: none !important;
        }

        .pricing__card--side.pricing-revealed:hover,
        .pricing__card--featured.pricing-revealed:hover,
        .pricing__card.pricing-revealed:hover {
          transform: translateY(-6px) scale(1.02) !important;
        }

        /* On tablet, ensure featured card is visually first */
        .pricing__card--featured {
          order: -1;
        }

        .pricing__bg-label {
          display: none;
        }

        .pricing__deco-line {
          display: none;
        }
      }

      @media (max-width: 600px) {
        .pricing {
          padding: clamp(3rem, 8vw, 4rem) 0;
        }

        .pricing__card,
        .pricing__card--featured {
          padding: clamp(1.5rem, 4vw, 2.5rem);
        }

        .pricing__card--featured .pricing__price-value {
          font-size: clamp(2.5rem, 8vw, 3.5rem);
        }
      }

      /* ─── Pricing Reduced Motion ─── */
      @media (prefers-reduced-motion: reduce) {
        .pricing__card {
          opacity: 1 !important;
        }
        .pricing__card--featured.pricing-revealed {
          animation: none !important;
        }
        .pricing__inclusions li {
          opacity: 1 !important;
          transform: none !important;
        }
        .pricing__deco-line {
          transform: scaleX(1) !important;
          opacity: 1 !important;
        }
      }