*, *::before, *::after { box-sizing: border-box; }
    :root {

      --paper: #f6f5f4; --paper-2: #ebeced; --card: #fcfcfc;
      --ink: #1b252b; --ink-2: #5c6062; --mut: #8a8f91;
      --accent: #0070f3; --accent-2: #0051a8; --line: #cfc9c3; --stone: #dcd8d4;
      --disp: 'Jost', system-ui, sans-serif;
      --body: 'Inter', system-ui, -apple-system, sans-serif;
    }
    :root[data-theme="dark"] {
      --paper: #18191b; --paper-2: #212225; --card: #26282b;
      --ink: #f5f9fc; --ink-2: #9ea3a6; --mut: #7a7f82;
      --accent: #0070f3; --accent-2: #0051a8; --line: #33363a; --stone: #2a2c2f;
    }


    html, body {
      margin: 0; padding: 0; background: var(--paper); color: var(--ink);
      font-family: var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh;
    }

    /* Top Nav */
    .top-nav {
      height: 60px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line);
      background: var(--paper); position: sticky; top: 0; z-index: 50;
    }
    .brand-link {
      display: flex; align-items: center; gap: 10px; text-decoration: none;
      font-family: var(--disp); font-weight: 700; font-size: 1.1rem; color: var(--ink);
    }
    .brand-link img { width: 26px; height: 26px; object-fit: contain; }
    .close-btn {
      color: var(--mut); text-decoration: none; font-size: 1.4rem; font-weight: 400;
      padding: 4px 10px; border-radius: 8px; transition: background 0.15s;
    }
    .close-btn:hover { background: var(--paper-2); color: var(--ink); }

    /* Container */
    .upgrade-wrap {
      max-width: 1060px; margin: 0 auto; padding: 40px 20px 60px;
    }

    /* Header */
    .up-header { text-align: center; margin-bottom: 32px; }
    .up-header h1 {
      font-family: var(--body) !important; font-size: 2.1rem; font-weight: 700;
      color: var(--ink); margin: 0 0 6px 0; letter-spacing: -0.02em;
    }
    .up-header p {
      font-family: var(--body) !important; font-size: 0.98rem; color: var(--mut); margin: 0 0 24px 0;
    }

    /* Billing Toggle Rectangle */
    /* The selected half used to be a background on the button itself, so
       switching was a cut: one white box vanished and another appeared.
       The thumb moves now — a single thumb behind both labels that slides to
       whichever is active, which is the whole of why theirs feels smooth.

       It has to be measured rather than assumed at 50%: "Yearly" carries a
       discount pill and is visibly wider than "Monthly", so a half-width
       thumb would sit wrong on one side and overhang on the other. JS
       writes --thumb-x/--thumb-w; CSS animates them. */
    .billing-toggle {
      position: relative;
      display: inline-flex; align-items: center; gap: 4px; background: var(--paper-2);
      border: 1px solid var(--line); padding: 4px; border-radius: 10px !important;
    }
    .billing-toggle::before {
      content: ""; position: absolute; top: 4px; left: 0; z-index: 0;
      height: calc(100% - 8px); width: var(--thumb-w, 0px);
      transform: translateX(var(--thumb-x, 4px));
      background: var(--card); border-radius: 8px; box-shadow: var(--sh-subtle);
      pointer-events: none;
    }
    /* Only once a real measurement exists. Animating from the 0px default
       would slide the thumb in from the left edge on first paint. */
    .billing-toggle.ready::before {
      transition: transform var(--dur-chill) var(--ease-snappy),
                  width var(--dur-chill) var(--ease-snappy);
    }
    .billing-toggle button {
      position: relative; z-index: 1;
      border: 0; background: none; font-family: var(--body) !important; font-size: 0.88rem;
      font-weight: 600; color: var(--mut); padding: 8px 18px; border-radius: 8px !important;
      cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
      transition: color var(--dur-chill) var(--ease-snappy);
    }
    .billing-toggle button.active { background: none; box-shadow: none; color: var(--ink); }
    @media (prefers-reduced-motion: reduce) {
      .billing-toggle.ready::before { transition-duration: 1ms; }
    }
    .billing-toggle .discount-pill {
      background: rgba(0, 112, 243, 0.15); color: var(--accent);
      font-size: 0.76rem; font-weight: 700; padding: 3px 8px; border-radius: 6px !important;
    }

    /* Cards Grid */
    .up-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      align-items: stretch; margin-bottom: 36px;
    }
    .up-card {
      background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px;
      padding: 28px 24px; display: flex; flex-direction: column; position: relative;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .up-card:hover {
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
    }
    .up-card.featured {
      border: 2px solid var(--accent); background: var(--card);
      box-shadow: 0 0 24px rgba(0, 112, 243, 0.16);
    }

    .up-card-top {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
    }
    .up-card-title {
      font-family: var(--body) !important; font-size: 1.3rem; font-weight: 700; color: var(--ink);
    }
    .up-badge-current {
      background: var(--stone); color: var(--mut); font-size: 0.76rem;
      font-weight: 600; padding: 4px 10px; border-radius: 99px;
    }

    .up-price-row {
      margin: 14px 0 4px; display: flex; align-items: baseline; gap: 6px;
    }
    .up-price-row .amt {
      font-family: var(--body) !important; font-size: 2.5rem; font-weight: 800;
      color: var(--ink); line-height: 1; letter-spacing: -0.03em;
    }
    .up-price-row .unit {
      font-size: 0.85rem; color: var(--mut);
    }

    .up-subtitle {
      font-size: 0.88rem; color: var(--mut); margin-bottom: 22px; min-height: 38px; line-height: 1.4;
    }

    /* List of Features */
    .up-feats {
      list-style: none; padding: 0; margin: 0 0 28px 0; flex: 1;
      display: flex; flex-direction: column; gap: 11px;
    }
    .up-feat-item {
      display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem;
      color: var(--ink); line-height: 1.4;
    }
    .up-feat-item .mark {
      font-weight: 700; flex: none; width: 16px; text-align: center;
    }
    .up-feat-item.check .mark { color: var(--ink); }
    .up-feat-item.plus .mark { color: var(--mut); }

    /* Select Dropdown in Pro */
    .up-select {
      width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--card); color: var(--ink); font-size: 0.86rem; margin-bottom: 16px;
      outline: none; cursor: pointer; font-family: var(--body);
    }

    /* Action Buttons */
    .up-btn {
      width: 100%; padding: 12px 18px; border-radius: 10px; font-family: var(--body);
      font-size: 0.92rem; font-weight: 600; cursor: pointer; border: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.18s, transform 0.18s; text-decoration: none;
    }
    .up-btn-primary {
      background: var(--accent); color: #ffffff !important;
    }
    .up-btn-primary:hover {
      background: var(--accent-2); transform: translateY(-1px);
    }
    .up-btn-disabled {
      background: var(--stone); color: var(--mut); cursor: default;
    }

    /* Footnote Disclaimer */
    .up-disclaimer {
      text-align: center; font-size: 0.78rem; color: var(--mut);
      max-width: 780px; margin: 0 auto; line-height: 1.55;
    }

    @media (max-width: 860px) {
      .up-grid { grid-template-columns: 1fr; gap: 16px; }
      .up-subtitle { min-height: auto; margin-bottom: 16px; }
    }