/* ================= Mobile Proxy country page — "network control room" ==== */
    /* ------------------------------------------------------------------
       Ambient Glow Bubbles (Identical to Home Page)
       ------------------------------------------------------------------ */
    .page-ambient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%);
    }

    .hero-glow-blob {
        position: absolute !important;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0 !important;
        opacity: 0.26;
        will-change: transform;
        transform: translateZ(0);
    }

    .hero-blob-orange {
        width: 680px;
        height: 680px;
        background: radial-gradient(circle, var(--glow-color) 0%, rgba(249, 115, 22, 0.18) 32%, transparent 68%);
        top: -10%;
        left: 14%;
        animation: floatBlob1 22s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    }

    .hero-blob-gray {
        width: 720px;
        height: 720px;
        background: radial-gradient(circle, rgba(148, 163, 184, 0.35) 0%, rgba(148, 163, 184, 0.14) 32%, transparent 68%);
        top: 10%;
        right: -4%;
        opacity: 0.45;
        animation: floatBlob2 28s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    }

    .hero-blob-accent {
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, rgba(249, 115, 22, 0.12) 32%, transparent 68%);
        top: 36%;
        left: 36%;
        opacity: 0.4;
        animation: floatBlob3 34s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }

    @keyframes floatBlob1 {
        0%   { transform: translate(0, 0) scale(1); }
        22%  { transform: translate(130px, 70px) scale(1.14); }
        48%  { transform: translate(-70px, 150px) scale(0.9); }
        74%  { transform: translate(-140px, 55px) scale(1.08); }
        100% { transform: translate(0, 0) scale(1); }
    }

    @keyframes floatBlob2 {
        0%   { transform: translate(0, 0) scale(1); }
        26%  { transform: translate(-160px, -95px) scale(1.15); }
        54%  { transform: translate(110px, -130px) scale(0.88); }
        80%  { transform: translate(80px, 75px) scale(1.06); }
        100% { transform: translate(0, 0) scale(1); }
    }

    @keyframes floatBlob3 {
        0%   { transform: translate(0, 0) scale(1); }
        33%  { transform: translate(105px, -80px) scale(1.2); }
        66%  { transform: translate(-95px, 70px) scale(0.85); }
        100% { transform: translate(0, 0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-glow-blob { animation: none !important; }
    }

    .cd {
        --cd-green: #34d399;
        --cd-red: #ef4444;
        --cd-amber: #f59e0b;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding-bottom: 1rem;
        /* Narrower than the site-wide 1400px .container -- the full-bleed
           width made every card (esp. operator comparison) feel stretched
           and thin rather than contained. */
        max-width: 1180px;
        margin: 0 auto;
        width: 100%;
    }
    .cd h1, .cd h2, .cd h3 { font-family: var(--font-heading); }

    /* ---- Hero ---- */
    .cd-hero {
        display: grid;
        /* Explicit 55/45 fr split (hero text / configurator). Both tracks
           use a 0 min (not a pixel floor) -- a nonzero min like
           minmax(300px, Nfr) is added ON TOP of that track's fr share of
           the *remaining* space after other minimums are subtracted,
           which silently inflates it past its intended percentage. With 0
           mins on both sides, the free space splits as a clean,
           distortion-free 55:45 at every width down to the mobile stack
           breakpoint. */
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: start;
        position: relative;
        z-index: 1;
        background: transparent;
    }
    .cd-hero-head {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }
    .cd-hero-flag { border-radius: 3px; display: block; }
    .cd-kicker {
        font: 600 0.7rem/1 var(--font-mono);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .cd-live {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font: 600 0.68rem/1 var(--font-mono);
        color: var(--cd-green);
        background: rgba(52, 211, 153, 0.1);
        border: 1px solid rgba(52, 211, 153, 0.22);
        border-radius: 999px;
        padding: 0.34rem 0.65rem;
    }
    .cd-live.off {
        color: var(--cd-red);
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.22);
    }
    .cd-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: currentColor;
        animation: pulseDot 1.8s ease-in-out infinite;
    }
    @keyframes pulseDot { 0%,100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
    @media (prefers-reduced-motion: reduce) { .cd-dot { animation: none; opacity: 1; } }

    .cd-h1 {
        margin: 0 0 1rem;
        /* Single continuous formula (851px-1600px+) replacing three
           separate breakpoint-specific font-sizes that used to make the
           heading visibly "snap" smaller at 1280px and again at 1024px. */
        font: 700 clamp(2.1rem, 3.4vw + 0.54rem, 3.6rem)/1.02 var(--font-heading);
        letter-spacing: -0.035em;
        color: var(--text-primary);
        text-wrap: balance;
    }
    .cd-lede {
        margin: 0 0 1.6rem;
        font-size: clamp(0.88rem, 0.44vw + 0.67rem, 1.06rem);
        line-height: 1.6;
        color: var(--text-secondary);
        max-width: 56ch;
        text-wrap: pretty;
    }
    .cd-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
    .cd-chip {
        display: inline-flex; align-items: center; gap: 0.45rem;
        font: 600 0.78rem/1 var(--font-sans);
        color: var(--text-primary);
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.56rem 0.8rem;
    }
    .cd-chip svg { color: var(--cd-green); }

    /* Boxed one-row stat card -- 4 equal columns, centered, compact padding.
       Same layout on every breakpoint (mobile just shrinks the type/padding
       further -- see the responsive rules below). The separators are
       unused now (display:none removes them from the grid entirely rather
       than leaving empty cells) since the grid's own background+border
       already draws the dividers between cells. */
    /* No max-width cap -- it previously stopped at 560px while the hero
       column itself could render much wider, leaving a large dead gap of
       empty background between this row and the configurator card next to
       it. Filling the actual (now fluid) column width keeps the two cards
       sitting close together with only the hero's own gap between them. */
    .cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
    .cd-stat { background: var(--bg-secondary); padding: 0.7rem 0.4rem; text-align: center; }
    .cd-stat .num { font: 700 1.15rem/1 var(--font-mono); letter-spacing: -0.02em; color: var(--text-primary); }
    .cd-stat.accent .num { color: var(--primary); }
    .cd-stat .lbl { margin-top: 0.3rem; font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
    .cd-stat-sep { display: none; }

    /* network-live status card -- no max-width, same reasoning as
       .cd-stats above: fill the actual hero column width instead of
       capping narrower and leaving dead space before the configurator. */
    .cd-netcard {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-secondary);
        padding: 0.9rem 1rem;
        display: flex;
        align-items: center;
        gap: 1.4rem;
        flex-wrap: wrap;
    }
    .cd-netcard .nc-status { flex: none; }
    .cd-netcard .nc-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font: 700 0.8rem/1 var(--font-sans); color: var(--text-primary); }
    .cd-netcard .nc-sub { font: 500 0.62rem/1 var(--font-mono); color: var(--text-muted); }
    .cd-netcard .nc-graph { flex: 1; min-width: 150px; }
    .cd-spark { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-bottom: 0.45rem; }
    .cd-spark span { flex: 1; height: 100%; background: rgba(52, 211, 153, 0.42); border-radius: 1px; }
    .cd-spark span.warn { background: rgba(245, 158, 11, 0.55); }
    .cd-spark span.peak { background: rgba(52, 211, 153, 0.85); animation: cdSparkLive 2.6s ease-in-out infinite; }
    @keyframes cdSparkLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @media (prefers-reduced-motion: reduce) { .cd-spark span.peak { animation: none; } }
    .cd-netcard .nc-graph-foot, .cd-netcard .nc-meta { display: flex; align-items: center; justify-content: space-between; font: 500 0.62rem/1 var(--font-mono); color: var(--text-muted); }
    .cd-netcard .nc-meta { flex: none; text-align: right; display: grid; gap: 0.4rem; }
    .cd-netcard b { color: var(--text-primary); font-weight: 500; }

    /* ---- Configurator ---- */
    .cd-cfg {
        position: relative;
        background: var(--surface-raised);
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 16px;
        padding: 1.1rem;
        box-shadow: 0 20px 46px -20px rgba(0, 0, 0, 0.65);
    }
    .cd-cfg::before {
        content: ''; position: absolute; inset: 0; border-radius: 16px;
        background: linear-gradient(180deg, rgba(255, 154, 92, 0.09), transparent 26%);
        pointer-events: none;
    }
    .cd-cfg > * { position: relative; }
    .cd-cfg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
    .cd-cfg-title { font: 700 0.88rem/1 var(--font-heading); color: var(--text-primary); letter-spacing: -0.01em; }
    .cd-cfg-step { font: 600 0.58rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--text-muted); }
    .cd-cfg-note {
        display: flex; gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid rgba(52, 211, 153, 0.22);
        background: rgba(52, 211, 153, 0.06);
        border-radius: 10px;
        margin-bottom: 0.85rem;
    }
    .cd-cfg-note .nd { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-green); margin-top: 4px; flex: none; }
    .cd-cfg-note b { display: block; font: 700 0.74rem/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: 0.15rem; }
    .cd-cfg-note span { font: 400 0.68rem/1.45 var(--font-sans); color: var(--text-secondary); }
    .cd-cfg-label { font: 600 0.58rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }

    .cd-op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.85rem; }
    .cd-op {
        display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
        padding: 0.4rem 0.5rem; border-radius: 7px; cursor: pointer;
        background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary);
        transition: all 0.18s;
    }
    .cd-op .on { font: 700 0.74rem/1 var(--font-sans); }
    .cd-op .os { font: 500 0.55rem/1 var(--font-mono); letter-spacing: 0.06em; opacity: 0.65; }
    .cd-op.active { background: var(--primary); border-color: var(--primary); color: #1a1000; }
    .cd-op.disabled { opacity: 0.45; cursor: not-allowed; }
    /* Sold-out operator, but still has pricing data -- keep it clickable so
       shoppers can preview its price; just read visibly as unavailable. */
    .cd-op.muted { opacity: 0.6; }
    .cd-op.muted .os { color: var(--cd-red); opacity: 0.9; }
    .cd-op.muted.active { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--cd-red); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3); }

    .cd-dur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.85rem; }
    .cd-dur {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
        padding: 0.55rem 0.4rem; border-radius: 9px; cursor: pointer;
        background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary);
        transition: all 0.18s;
    }
    .cd-dur .dk { font: 500 0.5rem/1 var(--font-mono); letter-spacing: 0.08em; opacity: 0.65; }
    .cd-dur .dl { font: 700 0.74rem/1 var(--font-sans); }
    .cd-dur.active { background: var(--primary); border-color: var(--primary); color: #1a1000; }

    .cd-total {
        border: 1px solid var(--border); border-radius: 10px; background: var(--surface-inset);
        padding: 0.8rem 0.85rem; margin-bottom: 0.7rem;
    }
    .cd-total-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; }
    .cd-total .tl { font: 500 0.58rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
    .cd-total .amtwrap { display: flex; align-items: baseline; gap: 0.4rem; }
    .cd-total .amt { font: 700 1.35rem/1 var(--font-heading); letter-spacing: -0.025em; color: var(--primary); }
    .cd-total .amtsuf { font: 500 0.68rem/1 var(--font-sans); color: var(--text-muted); }
    .cd-was { font: 600 0.66rem/1 var(--font-mono); color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--cd-red); margin-bottom: 0.35rem; }
    .cd-save { display: inline-block; font: 700 0.58rem/1 var(--font-mono); color: var(--cd-green); background: rgba(52, 211, 153, 0.12); border-radius: 999px; padding: 0.28rem 0.5rem; }
    .cd-rate { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed rgba(255, 255, 255, 0.1); font: 500 0.64rem/1 var(--font-mono); color: var(--text-muted); }
    .cd-rate b { color: var(--primary); font-weight: 600; }

    .cd-cta {
        width: 100%; padding: 0.8rem; border: none; border-radius: 10px;
        background: var(--cta-gradient); color: #1a1000;
        font: 800 0.84rem/1 var(--font-sans); cursor: pointer;
        box-shadow: 0 6px 20px rgba(255, 132, 56, 0.28);
        transition: filter 0.18s, transform 0.18s;
    }
    .cd-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
    .cd-cta:disabled { filter: grayscale(0.6); opacity: 0.55; cursor: not-allowed; box-shadow: none; }
    .cd-fine { margin: 0.65rem 0 0; text-align: center; font: 500 0.62rem/1.5 var(--font-sans); color: var(--text-muted); }
    .cd-cfg-empty { text-align: center; padding: 1.25rem 0.5rem; }
    .cd-cfg-empty p { color: var(--text-secondary); margin: 0 0 0.85rem; font-size: 0.85rem; }

    /* Sold-out configurator: still show operators/durations/pricing, just
       muted, with the CTA swapped for a disabled "Out of stock" state. */
    .cd-cfg-step--soldout {
        color: var(--cd-red); background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.22); border-radius: 6px;
        padding: 0.2rem 0.4rem;
    }
    .cd-cfg-note--soldout {
        border-color: rgba(239, 68, 68, 0.22); background: rgba(239, 68, 68, 0.06);
    }
    .cd-cfg-note--soldout .nd { background: var(--cd-red); }
    .cd-cfg--soldout .cd-op-grid,
    .cd-cfg--soldout .cd-dur-grid,
    .cd-cfg--soldout .cd-total {
        opacity: 0.6;
    }
    .cd-cfg--soldout .cd-total .amt { color: var(--text-muted); }

    /* ---- Generic section ---- */
    .cd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
    .cd-h2 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 1.7rem)/1.15 var(--font-heading); letter-spacing: -0.025em; color: var(--text-primary); }
    .cd-sub { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
    .cd-link { font: 600 0.85rem/1 var(--font-sans); color: var(--primary); white-space: nowrap; }

    /* ---- Reviews ---- */
    .cd-rating-badge { display: flex; align-items: center; gap: 0.3rem; font: 600 0.9rem/1 var(--font-sans); color: var(--text-primary); }
    .cd-rating-badge-star { color: #f5b400; }
    .cd-rating-badge span { color: var(--text-muted); font-weight: 500; }
    .cd-review-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
    .cd-review-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); padding: 0.7rem 0.9rem; }
    .cd-review-stars { display: flex; gap: 1px; margin-bottom: 0.3rem; }
    .cd-star { color: var(--text-muted); display: inline-flex; }
    .cd-star.filled { color: #f5b400; }
    .cd-star.filled svg { fill: currentColor; }
    .cd-review-text { margin: 0 0 0.3rem; font-size: 0.88rem; line-height: 1.5; color: var(--text-primary); }
    .cd-review-meta { font: 500 0.75rem/1 var(--font-mono); color: var(--text-muted); }
    .cd-review-form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .cd-star-input { display: flex; flex-direction: row-reverse; gap: 1px; }
    .cd-star-input input { position: absolute; opacity: 0; pointer-events: none; }
    .cd-star-input label { cursor: pointer; color: var(--text-muted); display: inline-flex; }
    .cd-star-input input:checked ~ label,
    .cd-star-input input:checked ~ label ~ label,
    .cd-star-input:hover label:hover,
    .cd-star-input:hover label:hover ~ label {
        color: #f5b400;
    }
    .cd-star-input input:checked ~ label svg,
    .cd-star-input input:checked ~ label ~ label svg,
    .cd-star-input:hover label:hover svg,
    .cd-star-input:hover label:hover ~ label svg {
        fill: currentColor;
    }
    .cd-review-input { flex: 1 1 240px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); padding: 0.45rem 0.7rem; font: 500 0.85rem/1 var(--font-sans); color: var(--text-primary); }
    .cd-review-submit { border: none; border-radius: 8px; background: var(--primary); color: #fff; font: 700 0.82rem/1 var(--font-sans); padding: 0.5rem 1rem; cursor: pointer; white-space: nowrap; }
    .cd-review-hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

    /* operators comparison -- compact, squarish tiles that sit close
       together (auto-fit + a per-card max-width) instead of two long
       full-half-width bars. */
    /* Fixed-width tracks + justify-content:start -- auto-fit/1fr tracks
       stretch to fill the row, so even with gap:0 a max-width-capped card
       sat left-aligned inside a much wider cell, reading as a huge gap.
       Sizing the tracks themselves keeps the cards packed together. */
    .cd-op-cards { display: grid; grid-template-columns: repeat(auto-fill, 230px); justify-content: start; gap: 0.4rem; }
    .cd-op-card {
        border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary);
        padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem;
    }
    .cd-op-card.in { border-color: rgba(255, 154, 92, 0.3); background: linear-gradient(180deg, rgba(255, 154, 92, 0.08), var(--bg-secondary)); }
    .cd-op-card .ocname { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .cd-op-card .ocname a { font: 700 0.88rem/1 var(--font-heading); color: var(--text-primary); }
    .cd-op-card .ocname a:hover { color: var(--primary); }
    .cd-badge-ok { font: 600 0.56rem/1 var(--font-mono); color: var(--cd-green); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); border-radius: 6px; padding: 0.2rem 0.32rem; white-space: nowrap; flex: none; }
    /* meta (speed/network) and price now share one row instead of each
       getting their own -- a visibly shorter card, not just tighter padding */
    .cd-op-card .ocrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
    .cd-op-card .ocmeta { display: flex; gap: 0.6rem; font: 500 0.68rem/1 var(--font-mono); color: var(--text-secondary); flex-wrap: wrap; }
    .cd-op-card .ocprice { flex: none; }
    .cd-op-card .ocprice .pv { font: 700 0.95rem/1 var(--font-heading); letter-spacing: -0.02em; color: var(--primary); }
    .cd-op-card .ocprice .pv small { font: 500 0.62rem/1 var(--font-sans); color: var(--text-muted); }
    .cd-op-card.out .ocname a { color: var(--text-secondary); }
    .cd-op-card.out .ocmeta { color: var(--text-faint); }
    .cd-op-card .ocprice .pv.muted { color: var(--text-faint); }
    .cd-badge-out { font: 600 0.56rem/1 var(--font-mono); color: var(--cd-red); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.22); border-radius: 6px; padding: 0.2rem 0.32rem; white-space: nowrap; flex: none; }
    /* odd counts: stretch the last configurator button across the row so the
       2-col grid never leaves an empty cell (comparison cards stay contained
       at half width instead of stretching) */
    .cd-featured-grid > .cd-feat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cd-op-grid > .cd-op:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* tabs */
    .cd-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
    .cd-tab {
        padding: 0.7rem 1.1rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
        font: 600 0.82rem/1 var(--font-sans);
        background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-secondary);
        transition: all 0.18s;
    }
    .cd-tab:hover { color: var(--text-primary); }
    .cd-tab.active { background: var(--primary); border-color: var(--primary); color: #1a1000; }
    .cd-tabwrap { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-secondary); }
    .cd-tabpanel { display: none; }
    .cd-tabpanel.active { display: contents; }
    .cd-tab-body { padding: 1.6rem 1.75rem; }
    .cd-tab-kicker { font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.75rem; }
    .cd-tab-body h3 { margin: 0 0 0.75rem; font: 700 1.35rem/1.2 var(--font-heading); letter-spacing: -0.02em; color: var(--text-primary); }
    .cd-tab-body p { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
    .cd-tab-points { display: grid; gap: 0.55rem; }
    .cd-tab-points div { display: flex; gap: 0.6rem; align-items: flex-start; font: 500 0.84rem/1.5 var(--font-sans); color: var(--text-primary); }
    .cd-tab-points .pd { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin-top: 8px; flex: none; }
    .cd-tab-code { border-left: 1px solid var(--border); background: var(--surface-inset); padding: 1.6rem 1.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; }
    .cd-snippet { font: 500 0.72rem/1.9 var(--font-mono); color: var(--text-muted); white-space: pre-wrap; margin: 0; }
    .cd-snippet-foot { border-top: 1px dashed rgba(255, 255, 255, 0.1); padding-top: 0.85rem; font: 500 0.7rem/1.5 var(--font-mono); color: var(--text-faint); }

    /* explained + how it works */
    .cd-explain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; }
    .cd-explain-grid p { margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); text-wrap: pretty; }
    .cd-steps { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
    .cd-step { background: var(--bg-secondary); padding: 1rem 1.1rem; display: flex; gap: 0.9rem; }
    .cd-step .sn { font: 700 0.82rem/1 var(--font-mono); color: var(--primary); flex: none; margin-top: 2px; }
    .cd-step b { display: block; font: 700 0.9rem/1.3 var(--font-sans); color: var(--text-primary); margin-bottom: 0.25rem; }
    .cd-step span { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }

    /* featured */
    .cd-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    .cd-feat-card {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem;
        transition: border-color 0.18s, background-color 0.18s;
        text-decoration: none !important;
        color: inherit !important;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cd-feat-card:hover {
        border-color: rgba(255, 154, 92, 0.4);
        text-decoration: none !important;
        color: inherit !important;
    }
    .cd-feat-card:visited,
    .cd-feat-card:active,
    .cd-feat-card:focus {
        text-decoration: none !important;
        color: inherit !important;
        outline: none;
    }
    .cd-feat-card,
    .cd-feat-card * {
        text-decoration: none !important;
    }
    .cd-feat-card .fl { display: flex; align-items: center; gap: 0.7rem; min-width: 0; text-decoration: none !important; }
    .cd-feat-card .fname { display: block; font: 700 0.95rem/1.2 var(--font-heading); color: var(--text-primary); text-decoration: none !important; }
    .cd-feat-card .fmeta { display: block; margin-top: 0.2rem; font: 500 0.72rem/1 var(--font-mono); color: var(--text-muted); text-decoration: none !important; }
    .cd-feat-card .fprice { font: 700 0.82rem/1 var(--font-sans); color: var(--text-primary); white-space: nowrap; text-decoration: none !important; }
    .cd-feat-card:hover .fprice { color: #ff8438; }

    /* FAQ heading spacing (partial handles items) */
    .cd-faq .pxm2c-faq { margin-top: 1.25rem; }

    /* mobile sticky order bar */
    .cd-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        display: none; align-items: center; gap: 0.75rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: rgba(18, 18, 18, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateY(110%); opacity: 0;
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
    }
    .cd-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .cd-bar .bl { min-width: 0; flex: 1; }
    .cd-bar .bmeta { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; font: 500 0.62rem/1 var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cd-bar .bmeta b { color: var(--text-primary); font-weight: 500; }
    .cd-bar .bprice { display: flex; align-items: baseline; gap: 0.4rem; }
    .cd-bar .bprice .amt { font: 700 1.25rem/1 var(--font-heading); letter-spacing: -0.025em; color: var(--primary); }
    .cd-bar .bprice .rate { font: 500 0.62rem/1 var(--font-mono); color: var(--text-muted); }
    .cd-bar .cd-cta { width: auto; flex: none; padding: 0.85rem 1.25rem; border-radius: 12px; }

    /* ---- Responsive ---- */
    /* Tablet -- the configurator stays beside the hero content, with the
       right column narrowing and the left column's type/spacing tightening
       so it still has room to breathe. Bounded to 851-1024px: below that,
       the two-column squeeze itself started looking cramped/stretched, so
       the mobile tier below (max-width: 850px) takes over and stacks
       everything into one column instead. */
    @media (min-width: 851px) and (max-width: 1024px) {
        /* Hero column widths/gap and the h1/lede sizes are now handled by
           the fluid clamp()-based rules above -- no per-tier override
           needed, which is exactly what removes the visible "jump" here. */
        .cd-h1 { margin-bottom: 0.75rem; }
        .cd-chips { gap: 0.4rem; margin-bottom: 1.2rem; }
        .cd-chip { font-size: 0.66rem; padding: 0.45rem 0.6rem; gap: 0.35rem; }
        .cd-chip svg { width: 13px; height: 13px; }
        /* still one row of 4 (base grid-template-columns), just tightened
           further for the narrower left column at this tier */
        .cd-stats { margin-bottom: 1rem; }
        .cd-stat { padding: 0.55rem 0.3rem; }
        .cd-stat .num { font-size: 0.95rem; }
        .cd-stat .lbl { font-size: 0.5rem; }
        .cd-netcard { max-width: none; flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.8rem 0.9rem; }
        .cd-netcard .nc-status { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .cd-netcard .nc-status .nc-title { margin-bottom: 0; }
        .cd-netcard .nc-graph { min-width: 0; }
        .cd-netcard .nc-meta { text-align: left; display: flex; justify-content: space-between; gap: 0.75rem; }
        /* configurator itself: the 300px grid column already constrains its
           width, so just tighten its internal type a touch further */
        .cd-cfg { padding: 1rem; }
        .cd-cfg-title { font-size: 0.82rem; }
        .cd-op .on { font-size: 0.7rem; }
        .cd-dur .dl { font-size: 0.7rem; }
        .cd-total .amt { font-size: 1.2rem; }
        /* full-width sections below the hero */
        .cd-h2 { font-size: 1.4rem; }
        .cd-sub { font-size: 0.88rem; }
        .cd-explain-grid { grid-template-columns: 1fr; gap: 1.5rem; }
        .cd-tabwrap { grid-template-columns: 1fr; }
        .cd-tab-code { border-left: none; border-top: 1px solid var(--border); }
    }
    /* Mobile -- everything below 851px switches together into one cohesive
       "mobile view": the hero stacks to a single column, the configurator
       (the primary CTA) expands to full width, and the tablet tier's
       squeezed two-column layout above stops applying. Merging what used
       to be two separate breakpoints (680px for the hero stack, 768px for
       stats/cards/tabs) into one 850px query so nothing switches out of
       sync with the rest -- that mismatch was exactly what read as
       "stretched" / not-great between roughly 768-850px before. */
    @media (max-width: 850px) {
        .cd { gap: 2rem; }
        .cd-hero { grid-template-columns: 1fr; gap: 2rem; }
        .cd-h1 { font-size: 2.1rem; }
        .cd-lede { font-size: 0.88rem; margin-bottom: 1.1rem; }
        .cd-chips { gap: 0.4rem; margin-bottom: 1.2rem; }
        .cd-chip { font-size: 0.66rem; padding: 0.45rem 0.6rem; gap: 0.35rem; }
        .cd-chip svg { width: 13px; height: 13px; }
        /* still one row of 4 (base grid-template-columns) -- shrunk further
           so all four fit compactly on a phone-width screen */
        .cd-stats { max-width: none; margin-bottom: 1.1rem; }
        .cd-stat { padding: 0.5rem 0.25rem; }
        .cd-stat .num { font-size: 0.85rem; }
        .cd-stat .lbl { font-size: 0.46rem; letter-spacing: 0.03em; margin-top: 0.25rem; }
        .cd-netcard { max-width: none; flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.8rem 0.9rem; }
        .cd-netcard .nc-status { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .cd-netcard .nc-status .nc-title { margin-bottom: 0; }
        .cd-netcard .nc-graph { min-width: 0; }
        .cd-netcard .nc-meta { text-align: left; display: flex; justify-content: space-between; gap: 0.75rem; }
        .cd-cfg { max-width: none; margin: 0; padding: 1rem; }
        .cd-cfg-title { font-size: 0.82rem; }
        .cd-op .on { font-size: 0.7rem; }
        .cd-dur .dl { font-size: 0.7rem; }
        .cd-total .amt { font-size: 1.2rem; }
        .cd-h2 { font-size: 1.35rem; }
        .cd-sub { font-size: 0.85rem; }
        .cd-explain-grid { grid-template-columns: 1fr; gap: 1.5rem; }
        .cd-tabwrap { grid-template-columns: 1fr; }
        .cd-tab-code { border-left: none; border-top: 1px solid var(--border); }
        .cd-tab-body h3 { font-size: 1.1rem; }
        .cd-tab-body { padding: 1.15rem 1.2rem; }
        .cd-tab-code { padding: 1.15rem 1.2rem; }
        .cd-op-cards, .cd-featured-grid { grid-template-columns: 1fr; }
        .cd-op-card { max-width: none; }
        .cd-dur-grid { grid-template-columns: 1fr 1fr; }
        .cd-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; }
        .cd-tab { flex: none; }
        .cd-bar { display: flex; }
    }

    /* ===== Order modal (shared partial) styling — kept on-page so the
       modal-overlay hidden state + layout survive this page's restyle ===== */
    /* Unified Modern Modal Overlay */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Neutral dark dim that matches the page background (no blue cast);
           kept light so the blur doesn't wash out the backdrop. */
        background: rgba(10, 10, 10, 0.55);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 9998;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal {
        background-color: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: 20px;
        width: 100%;
        max-width: 540px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 2rem;
        box-shadow: var(--card-shadow), 0 0 0 1px rgba(249, 115, 22, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.55);
        position: relative;
        animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: block;
        margin: 0;
        background-image: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, transparent 12%);
    }

    .modal-overlay.active .modal {
        will-change: transform, opacity;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-14px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
    }

    .modal-header-left {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-width: 0;
    }

    .modal-back-btn {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        cursor: pointer;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-back-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
        transform: translateX(-2px);
    }

    .modal-title-section {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .modal-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgba(249, 115, 22, 0.08);
        color: var(--primary);
        font-size: 1.6rem;
    }

    .modal-title {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text-primary);
        margin: 0;
    }

    .modal-close, .close-btn {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        font-size: 0.8rem;
        color: var(--text-secondary);
        cursor: pointer;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-close:hover, .close-btn:hover {
        color: var(--primary);
        border-color: var(--primary);
        transform: scale(1.05) rotate(90deg);
    }

    .modal-body {
        padding: 0;
    }

    .modal-section {
        margin-bottom: 1.25rem;
    }

    .modal-section:last-child {
        margin-bottom: 0;
    }

    .modal-label {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
        display: block;
    }

    .crypto-minimal-panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0.8rem;
        background: var(--bg-secondary);
    }

    .crypto-minimal-qr {
        width: 186px;
        height: 186px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        padding: 0.3rem;
        object-fit: contain;
    }

    .option-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.5rem;
    }

    .option-btn {
        position: relative;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
        font-weight: 500;
        color: var(--text-primary);
        /* Matches the height of .submit-btn (Continue to Checkout) so
           every button in the modal -- operator, network, duration, and
           the final action -- reads as one consistent size. Fixed so a
           group with a "No Stock" line doesn't grow taller than its
           sibling groups. */
        min-height: 3.1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }

    .option-btn:hover {
        border-color: var(--primary);
        transform: translateY(-1px);
    }

    .option-btn.active {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--white);
        box-shadow: 0 4px 12px var(--glow-color);
    }

    [data-theme="dark"] .option-btn.active {
        color: #1a1a1a;
    }

    .option-btn-label {
        display: block;
        font-size: 0.64rem;
        margin-bottom: 0.15rem;
        opacity: 0.75;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .option-btn-value {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .option-stock-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        color: #dc3545;
        font-size: 0.58rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .option-stock-badge .pxm2-icon {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
    }

    .price-display {
        background: radial-gradient(circle at top, rgba(249, 115, 22, 0.08) 0%, var(--bg-secondary) 70%);
        padding: 0.85rem;
        border-radius: 12px;
        border: 1px solid var(--border);
        text-align: center;
    }

    .price-display-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

    .price-display-amount {
        font-family: var(--font-heading);
        font-size: 1.7rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--primary);
    }

    /* Feature highlights -- given the visual weight so buyers register
       what they're getting (bandwidth, activation, rotation, security)
       before their eye ever lands on the price. */
    .modal-highlights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .modal-highlight-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.4rem 0.5rem;
        border-radius: 8px;
        background: rgba(249, 115, 22, 0.06);
        border: 1px solid rgba(249, 115, 22, 0.15);
        color: var(--text-primary);
        font-size: 0.68rem;
        font-weight: 600;
        text-align: center;
    }

    .modal-highlight-item .pxm2-icon {
        color: var(--primary);
        flex-shrink: 0;
        width: 13px;
        height: 13px;
    }

    /* Price + CTA -- price is intentionally small and secondary so the
       button remains the focal point of the step. */
    .modal-cta-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .price-inline-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .price-inline-label {
        font-size: 0.72rem;
        color: var(--text-secondary);
    }

    /* Struck-through "was" price -- shows the real cost of paying at the
       previous duration's rate for this long (e.g. what a month would
       cost at the weekly rate), so the new price reads as a genuine
       tiered-pricing saving. */
    .price-inline-original {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: line-through;
        text-decoration-color: var(--danger);
        opacity: 0.8;
    }

    .price-inline-amount {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .price-inline-suffix {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-left: -0.2rem;
    }

    .price-inline-save {
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--success);
        background: rgba(16, 185, 129, 0.12);
        padding: 0.15rem 0.4rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    /* Reassurance line under the CTA -- reduces last-step hesitation. */
    .modal-reassurance {
        text-align: center;
        font-size: 0.72rem;
        color: var(--text-secondary);
        margin: 0;
    }

    .modal-reassurance .dot {
        color: var(--border);
        margin: 0 0.15rem;
    }

    .modal-reassurance a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }

    .modal-reassurance a:hover {
        text-decoration: underline;
    }

    .auth-section {
        background: var(--bg-secondary);
        padding: 1.25rem;
        border-radius: 14px;
        border: 1px solid var(--border);
    }

    .auth-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .auth-tab {
        flex: 1;
        padding: 0.75rem;
        border: none;
        background: transparent;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        cursor: pointer;
        font-weight: 600;
        color: var(--text-secondary);
        transition: all 0.25s;
    }

    .auth-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

    .auth-form {
        display: none;
    }

    .auth-form.active {
        display: block;
    }

    .form-input {
        width: 100%;
        padding: 0.875rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        transition: border-color 0.3s;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
    }

    .submit-btn {
        width: 100%;
        padding: 0.95rem;
        background: var(--primary);
        color: var(--white);
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        margin-top: 0.75rem;
        box-shadow: 0 4px 12px var(--glow-color);
    }

    [data-theme="dark"] .submit-btn {
        color: #1a1a1a;
    }

    /* Main checkout CTA -- a deeper amber/red gradient (still the site's
       warm hue family) so it reads as distinct from the lighter-orange
       option buttons surrounding it, without introducing an unrelated
       color like blue/green. */
    .submit-btn.cta-btn {
        background: linear-gradient(135deg, var(--warning) 0%, var(--primary-dark) 100%);
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
    }

    [data-theme="dark"] .submit-btn.cta-btn {
        color: #1a1400;
    }

    .submit-btn.cta-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--warning) 0%, var(--primary-dark) 100%);
        filter: brightness(1.08);
        box-shadow: 0 6px 22px rgba(245, 158, 11, 0.45);
    }

    .submit-btn:hover:not(:disabled) {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px var(--glow-color);
    }

    .submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .terms-notice {
        text-align: center;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .terms-notice a {
        color: var(--primary);
        text-decoration: none;
    }

    .terms-notice a:hover {
        text-decoration: underline;
    }

    .card-element {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-primary);
        margin-bottom: 1rem;
    }

    .saved-cards-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .saved-card-item {
        padding: 1rem;
        border: 2px solid var(--border);
        border-radius: 8px;
        background: var(--bg-primary);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .saved-card-item:hover {
        border-color: var(--primary);
    }

    .saved-card-item.selected {
        border-color: var(--primary);
        background: rgba(255, 140, 0, 0.1);
    }

    .saved-card-icon {
        display: inline-flex;
    }

    .saved-card-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .submit-btn svg,
    .toast svg {
        width: 1.1em;
        height: 1.1em;
        flex-shrink: 0;
        vertical-align: -0.15em;
    }

    .saved-card-info {
        flex: 1;
    }

    .saved-card-brand {
        font-weight: 600;
        color: var(--text-primary);
        text-transform: capitalize;
    }

    .saved-card-number {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .add-card-btn, .edit-billing-btn {
        width: 100%;
        padding: 0.875rem;
        border: 2px dashed var(--border);
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s;
        font-weight: 500;
    }

    .add-card-btn:hover, .edit-billing-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .billing-address-display {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        margin-bottom: 0.75rem;
        line-height: 1.6;
    }

    .error-message {
        color: var(--danger);
        font-size: 0.875rem;
        margin-top: 0.5rem;
        display: none;
    }

    .error-message.show {
        display: block;
    }

    /* Toast Notifications */
    .toast {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #10b981;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 10002;
        animation: slideIn 0.3s ease-out;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 400px;
    }

    .toast.error {
        background: #ef4444;
    }

    .toast.warning {
        background: #f59e0b;
    }

    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }

    @media (max-width: 980px) {
        .modal {
            max-height: 95vh;
        }

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