:root, :root[data-theme="light"] {
      --bg-left: #faf8f5;
      --bg-right: #ffffff;
      --card-bg: #f4f0e8;
      --card-inner: #e9e3d8;
      --ink: #18181b;
      --ink-2: #52525b;
      --mut: #71717a;
      --line: #e4e4e7;
      --line-left: #eae5dd;
      --brand-red: #ff3500;
      --brand-red-hover: #e02e00;
      --input-bg: #ffffff;
      --input-border: #e4e4e7;
      --badge-green-bg: #dcfce7;
      --badge-green-fg: #15803d;
    }

    :root[data-theme="dark"] {
      --bg-left: #18181b;
      --bg-right: #1f1f23;
      --card-bg: #27272a;
      --card-inner: #3f3f46;
      --ink: #f4f4f5;
      --ink-2: #a1a1aa;
      --mut: #94a3b8;
      --line: #27272a;
      --line-left: #27272a;
      --brand-red: #ff3500;
      --brand-red-hover: #e02e00;
      --input-bg: #18181b;
      --input-border: #3f3f46;
      --badge-green-bg: rgba(22, 163, 74, 0.2);
      --badge-green-fg: #4ade80;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0; min-height: 100vh;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--bg-right);
    }

    /* Skeleton Loader Overlay */
    .skeleton-overlay {
      position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-columns: 1fr 1fr;
      background: var(--bg-right); opacity: 1; transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .skeleton-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .sk-left { background: var(--bg-left); padding: 60px 48px; display: flex; flex-direction: column; gap: 24px; }
    .sk-right { background: var(--bg-right); padding: 60px 48px; display: flex; flex-direction: column; gap: 24px; }
    .sk-box {
      background: var(--line); border-radius: 8px;
      animation: skPulse 1.2s ease-in-out infinite alternate;
    }
    @keyframes skPulse {
      0% { opacity: 0.45; }
      100% { opacity: 0.85; }
    }

    /* Desktop Main Grid Layout */
    .co-container {
      display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
    }

    /* LEFT COLUMN — Order Summary */
    .co-left {
      background: var(--bg-left); padding: 48px 56px 60px; border-right: 1px solid var(--line-left);
      display: flex; flex-direction: column; justify-content: flex-start;
    }

    /* Header & Logo Hover Effect */
    .co-brand-link {
      display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
      color: var(--ink); font-weight: 700; font-size: 1.15rem; margin-bottom: 32px;
      transition: color 0.15s ease; width: fit-content;
    }
    .co-brand-link .arrow { font-size: 1.1rem; color: var(--mut); transition: transform 0.15s ease; }
    .co-brand-link img { width: 26px; height: 26px; object-fit: contain; }
    .co-brand-link .brand-text { display: inline-block; transition: opacity 0.15s ease; }
    .co-brand-link .back-text { display: none; }

    .co-brand-link:hover .brand-text { display: none; }
    .co-brand-link:hover .back-text { display: inline-block; color: var(--ink); }
    .co-brand-link:hover .arrow { transform: translateX(-3px); color: var(--ink); }

    .co-plan-sub { font-size: 0.92rem; color: var(--mut); margin-bottom: 6px; }
    .co-main-price {
      display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px;
    }
    .co-main-price .amt { font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
    .co-main-price .unit { font-size: 0.85rem; color: var(--mut); }

    /* Currency Switcher */
    .curr-switcher {
      display: flex; gap: 8px; background: var(--card-inner); padding: 4px; border-radius: 10px;
      margin-bottom: 10px; width: fit-content;
    }
    .curr-btn {
      border: 0; background: none; font-family: inherit; font-size: 0.88rem; font-weight: 700;
      color: var(--mut); padding: 8px 24px; border-radius: 8px; cursor: pointer; transition: all 0.18s;
      display: flex; align-items: center; gap: 6px;
    }
    .curr-btn.active {
      background: var(--input-bg); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .curr-subtext { font-size: 0.74rem; color: var(--mut); margin-bottom: 28px; }

    /* Plan Details Card */
    .order-card {
      background: var(--card-bg); border-radius: 14px; padding: 20px; margin-bottom: 24px;
    }
    .oc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .oc-left { display: flex; align-items: center; gap: 12px; }
    .oc-logo { width: 32px; height: 32px; object-fit: contain; }
    .oc-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
    .oc-billing { font-size: 0.78rem; color: var(--mut); }
    .oc-price { font-size: 0.95rem; font-weight: 700; color: var(--ink); }

    .oc-annual-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--card-inner); padding: 10px 14px; border-radius: 10px; margin-top: 12px;
    }
    .oc-annual-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
    .oc-save-badge { background: var(--badge-green-bg); color: var(--badge-green-fg); font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
    .oc-annual-price { font-size: 0.82rem; color: var(--mut); font-weight: 600; }

    /* Switch Component */
    .switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--mut); transition: .2s; border-radius: 99px; }
    .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
    input:checked + .slider { background-color: var(--brand-red); }
    input:checked + .slider:before { transform: translateX(14px); }

    /* Summary Breakdown */
    .summary-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
    .sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--ink); }
    .sum-row.total { border-top: 1px solid var(--line-left); padding-top: 16px; margin-top: 8px; font-size: 1rem; font-weight: 800; }
    .sum-row.total .amt { font-size: 1.25rem; }

    .promo-btn {
      background: var(--card-inner); border: 0; border-radius: 99px; padding: 8px 18px;
      font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink);
      cursor: pointer; width: fit-content; transition: background 0.15s; margin: 4px 0 8px;
    }
    .promo-btn:hover { background: var(--line); }

    /* RIGHT COLUMN — Payment Form */
    .co-right {
      background: var(--bg-right); padding: 48px 56px 60px; display: flex; flex-direction: column; justify-content: flex-start;
    }
    .pay-wrap { max-width: 440px; width: 100%; margin: 0 auto; }

    /* Apple Pay Express Button — shown on every browser by choice.
       The glyph is inlined rather than loaded from /assets: the previous
       apple-pay-logo.svg had a malformed body path that drew an inflated
       blob with two notches instead of an apple, and it overflowed its own
       viewBox on three sides, so it could not be fixed by resizing. This
       path is the one already used by the boot screen in code.html.
       Note: Apple Pay itself only runs in Safari/WebKit, so on other
       browsers this button falls back to the normal payment flow (see the
       click handler). */
    .apple-pay-btn {
      width: 100%; height: 48px; background: #000000; color: #ffffff; border: 0;
      border-radius: 8px; font-size: 1.15rem; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      transition: background 0.15s ease; margin-bottom: 24px;
    }
    .apple-pay-btn:hover { background: #18181b; }
    /* Sized by the square 0 0 24 24 viewBox, so it cannot be stretched the
       way the old fixed 16x20 img was — that ratio matched neither the
       viewBox nor the artwork. */
    .apple-pay-btn svg { width: 20px; height: 20px; display: block; flex: none; }

    .divider {
      display: flex; align-items: center; text-align: center; color: var(--mut);
      font-size: 0.78rem; font-weight: 600; margin-bottom: 24px;
    }
    /* An explicit display value beats the UA's [hidden]{display:none}, so
       a `hidden` attribute alone would NOT hide this. Kept as a guard in
       case the divider is ever toggled from script again. */
    .divider[hidden] { display: none !important; }
    .divider::before, .divider::after {
      content: ''; flex: 1; border-bottom: 1px solid var(--line);
    }
    .divider span { padding: 0 12px; }

    /* Form Fields */
    .form-group { margin-bottom: 20px; }
    .form-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
    .form-input {
      width: 100%; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 8px;
      background: var(--input-bg); font-family: inherit; font-size: 0.9rem; color: var(--ink);
      outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(255, 53, 0, 0.14); }

    .card-box {
      border: 1px solid var(--input-border); border-radius: 10px; overflow: hidden; background: var(--input-bg);
    }
    .card-box-header {
      display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
      background: var(--bg-left); border-bottom: 1px solid var(--input-border); font-size: 0.86rem; font-weight: 600;
    }
    .card-brands { display: flex; gap: 4px; }
    .card-brand-badge {
      font-size: 0.65rem; font-weight: 800; padding: 2px 5px; border-radius: 3px; color: #fff;
    }
    .brand-visa { background: #1a1f71; }
    .brand-mc { background: #eb5b25; }
    .brand-amex { background: #006fcf; }
    .brand-jcb { background: #004098; }

    .card-inputs-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .card-inputs-grid > .form-input { border: 0; border-radius: 0; }
    .card-inputs-grid > .form-input:first-child { border-right: 1px solid var(--input-border); }

    /* The card fields are Stripe iframes now, not inputs. Two consequences
       the styling has to follow: :focus can never land on the container, so
       the focus ring keys off .StripeElement--focus which Stripe sets for
       exactly this; and the container has no text of its own to give it a
       height, so it needs one or the box collapses to its padding before
       the iframe finishes loading. */
    .form-input.StripeElement { min-height: 43px; }
    .form-input.StripeElement--focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(255, 53, 0, 0.14); }
    .card-inputs-grid > .StripeElement--focus { z-index: 2; position: relative; }
    .form-input.StripeElement--invalid { border-color: #dc2626; }

    /* Anything that stops the charge going through says so here, directly
       above the button that was pressed — a decline the shopper cannot see
       is indistinguishable from a page that silently does nothing. */
    .pay-error { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 0.84rem;
      background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.3); color: #dc2626; }
    .pay-notice { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.84rem;
      background: var(--card-bg); border: 1px solid var(--line); color: var(--ink-2); }
    .submit-pay-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

    .address-link { font-size: 0.78rem; color: var(--mut); text-decoration: underline; margin-top: 6px; cursor: pointer; display: inline-block; }
    .address-link:hover { color: var(--ink); }

    /* Checkbox Card Containers */
    .checkbox-row {
      display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; color: var(--ink);
      cursor: pointer; margin-bottom: 16px; user-select: none;
    }
    .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-red); cursor: pointer; margin-top: 2px; }

    .link-card-box {
      border: 1px solid var(--input-border); border-radius: 10px; padding: 14px; margin-bottom: 24px;
      background: var(--input-bg); display: flex; flex-direction: column; gap: 4px;
    }
    .link-card-head { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
    .link-card-sub { font-size: 0.78rem; color: var(--mut); padding-left: 26px; }

    /* Red Replit Subscribe Button */
    .submit-pay-btn {
      width: 100%; height: 50px; background: var(--brand-red); color: #ffffff; border: 0;
      border-radius: 8px; font-family: inherit; font-size: 1rem; font-weight: 700;
      cursor: pointer; transition: background 0.15s; margin-top: 4px; margin-bottom: 16px;
    }
    .submit-pay-btn:hover { background: var(--brand-red-hover); }

    /* Legal Disclaimers & Footer */
    .legal-text { font-size: 0.74rem; color: var(--mut); text-align: center; line-height: 1.5; margin-bottom: 24px; }
    .legal-text a { color: var(--mut); text-decoration: underline; }
    .legal-text a:hover { color: var(--ink); }

    .footer-links {
      display: flex; justify-content: center; align-items: center; gap: 14px;
      font-size: 0.74rem; color: var(--mut); border-top: 1px solid var(--line); padding-top: 16px;
    }
    .footer-links a { color: var(--mut); text-decoration: none; }
    .footer-links a:hover { color: var(--ink); }

    /* MOBILE SPECIFIC BAR & DRAWER */
    .mobile-header-bar {
      display: none;
    }
    .mobile-details-panel {
      display: none;
    }
    .co-hero-icon {
      display: none;
    }
    .add-code-btn {
      display: none;
    }

    /* MOBILE LAYOUT BREAKPOINT */
    @media (max-width: 768px) {
      .skeleton-overlay { grid-template-columns: 1fr; }
      .sk-right { display: none; }

      .co-container { grid-template-columns: 1fr; }

      /* Sticky Top Navigation Bar on Mobile */
      .mobile-header-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px; background: var(--bg-left); border-bottom: 1px solid var(--line-left);
        position: sticky; top: 0; z-index: 100;
      }
      .mobile-header-bar .co-brand-link { margin-bottom: 0; }

      .mobile-details-btn {
        background: none; border: 0; font-family: inherit; font-size: 0.88rem; font-weight: 600;
        color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 4px;
      }

      /* Slide-down Order Summary Panel on Mobile */
      .mobile-details-panel {
        display: none; background: var(--bg-left); border-bottom: 1px solid var(--line-left);
        padding: 20px 24px; animation: slideDown 0.22s ease-out;
      }
      .mobile-details-panel.open { display: block; }

      @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .co-left {
        padding: 28px 20px 20px; text-align: center; border-right: 0; border-bottom: 1px solid var(--line-left);
        align-items: center;
      }
      .co-left .co-brand-link { display: none; } /* Hidden on mobile because it is in mobile-header-bar */

      .co-hero-icon {
        width: 56px; height: 56px; object-fit: contain; margin: 0 auto 16px; display: block;
      }

      .co-main-price { justify-content: center; margin-bottom: 16px; }
      .curr-switcher { margin: 0 auto 12px; }
      .curr-subtext { text-align: center; margin-bottom: 20px; }

      .add-code-btn {
        background: var(--card-inner); border: 0; border-radius: 8px; padding: 8px 16px;
        font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--ink);
        cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 20px;
      }

      .order-card { width: 100%; text-align: left; }

      .co-right { padding: 24px 20px 40px; }
    }