/* Subscription offers (2026-11-02): the post-checkout success screen
   (welcome.html), the cancel sheet and annual card (account.html), the
   win-back banner (subscribe.html) and the small annual card on the home
   page. Uses the tokens in css/style.css. */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.nx-progress { height: 6px; border-radius: 6px; background: var(--surface-hi); overflow: hidden; }
.nx-progress span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #e2c28f); }
.nx-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--text-3); margin-top: 6px; }
.nx-meta b { color: var(--text-2); font-weight: 600; }
.cx-strong.btn-ghost, .btn-ghost.cx-strong { color: var(--text); border-color: #5a4d40; }

/* ── /welcome: "You're in" ──────────────────────────────────────────────── */
.wel-page.page--standalone.wel-page--wide { max-width: 1000px; }
.wel-page .ok-wrap { width: 100%; max-width: 980px; margin: 0 auto; text-align: left; }
.ok-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; background: rgba(127,163,119,.12); color: var(--success); border: 1px solid rgba(127,163,119,.35); }
.ok-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; margin: 16px 0 10px; }
.ok-lede { color: var(--text-2); font-size: 1rem; line-height: 1.55; max-width: 620px; }
.ok-steps { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin: 28px 0 0; list-style: none; padding: 0; }
.ok-step { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ok-step--main { border-color: rgba(201,162,106,.5); background: radial-gradient(420px 200px at 0% 0%, rgba(201,162,106,.10), transparent 70%), var(--surface); }
.ok-n { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ok-n span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--accent); color: var(--accent); font-size: .72rem; letter-spacing: 0; }
.ok-step h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; margin: 12px 0 6px; line-height: 1.2; }
.ok-step p { font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.ok-book { display: flex; gap: 14px; align-items: center; margin: 14px 0 16px; min-width: 0; }
.ok-book img { width: 58px; height: 87px; flex: none; object-fit: cover; border-radius: 6px; background: var(--surface-hi); }
.ok-book .t { font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.ok-book .t em { font-family: var(--font-display); font-size: 1.04rem; }
.ok-book .a { font-size: .8rem; color: var(--text-3); margin: 2px 0 9px; }
.ok-step .btn { margin-top: auto; }
.ok-btn-wide { width: 100%; justify-content: center; text-align: center; padding: 12px 18px; border-radius: 999px; font-size: .92rem; }
.ok-stores { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ok-stores a { flex: 1 1 120px; text-align: center; padding: 10px 14px; border-radius: 999px; border: 1px solid #5a4d40; color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.ok-stores a:hover { border-color: var(--accent); }
.ok-foot { margin-top: 22px; font-size: .84rem; color: var(--text-3); }
.ok-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.ok-hand { margin-top: 20px; padding: 16px; border: 1px solid rgba(201,162,106,.5); border-radius: var(--r-lg); background: radial-gradient(300px 160px at 0% 0%, rgba(201,162,106,.10), transparent 70%), var(--surface); max-width: 520px; }
.ok-hand .ok-book { margin: 0 0 14px; }
.ok-hand-sub { text-align: center; font-size: .8rem; color: var(--text-3); margin-top: 8px; }
.ok-alt { margin-top: 16px; font-size: .88rem; color: var(--text-2); }
.ok-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ok-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ── Cancel sheet ───────────────────────────────────────────────────────── */
html.cx-open { overflow: hidden; }
.cx-overlay { z-index: 1000; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.cx-sheet { position: relative; width: 100%; max-width: 860px; margin: auto; padding: 32px 32px 26px; border: 1px solid var(--border); border-radius: var(--r-xl, 20px); background: var(--bg); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); text-align: left; }
.cx-sheet h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1.1; margin: 6px 0 10px; outline: none; }
.cx-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.cx-lede { color: var(--text-2); font-size: .98rem; line-height: 1.55; max-width: 640px; }
.cx-q { margin: 22px 0 0; font-size: .86rem; font-weight: 600; color: var(--text); }
.cx-q span { font-weight: 400; color: var(--text-3); }
.cx-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx-r { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font: inherit; font-size: .86rem; color: var(--text-2); cursor: pointer; }
.cx-r[aria-checked="true"] { border-color: var(--accent); background: var(--accent-glow); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.cx-offers { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 16px; margin-top: 24px; }
.cx-loading { grid-column: 1 / -1; padding: 24px 0; }
.cx-loading .spinner { margin: 0 auto; }
.cx-o { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cx-o h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; margin: 4px 0 6px; line-height: 1.2; }
.cx-o p { font-size: .87rem; line-height: 1.5; color: var(--text-2); margin-bottom: 16px; }
.cx-price { font-size: 1.5rem; font-weight: 650; color: var(--text); margin: 0 0 8px; }
.cx-price small { font-size: .8rem; font-weight: 500; color: var(--text-2); }
.cx-price s { font-size: .9rem; font-weight: 500; color: var(--text-3); margin-left: 6px; }
.cx-btn { margin-top: auto; width: 100%; justify-content: center; padding: 11px 16px; border-radius: 999px; font-size: .9rem; }
.cx-exit { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.cx-exit b { display: block; font-size: .98rem; color: var(--text); font-weight: 600; }
.cx-exit span { font-size: .87rem; color: var(--text-2); }
.cx-exit .btn { flex: none; padding: 12px 24px; border-radius: 999px; font-size: .92rem; }
@media (max-width: 760px) {
  .cx-overlay { align-items: flex-end; padding: 0; }
  .cx-sheet { max-width: none; border-radius: 22px 22px 0 0; padding: 26px 16px 22px; max-height: 92vh; overflow-y: auto; }
  .cx-offers { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cx-exit { flex-direction: column; align-items: stretch; }
  .cx-exit .btn { width: 100%; justify-content: center; }
}

/* ── Annual card (account) ──────────────────────────────────────────────── */
.offer-slot:empty { display: none; }
.nx-up { margin-top: 18px; padding: 18px 18px 16px; border: 1px solid rgba(201,162,106,.5); border-radius: var(--r-md); background: radial-gradient(380px 160px at 0% 0%, rgba(201,162,106,.12), transparent 70%), rgba(241,232,216,.02); text-align: left; }
.nx-up h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; margin: 0 0 6px; }
.nx-up p { font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.nx-cmp { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.nx-cmp div { padding: 11px 14px; min-width: 0; }
.nx-cmp div + div { border-left: 1px solid var(--border); background: var(--accent-glow); }
.nx-cmp dt { font-size: .74rem; color: var(--text-3); }
.nx-cmp dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 650; color: var(--text); }
.nx-cmp dd small { font-size: .78rem; font-weight: 500; color: var(--text-2); }
.nx-up-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nx-up-act .btn { padding: 11px 22px; border-radius: 999px; }
.nx-link { border: 0; background: none; padding: 4px 0; font: inherit; font-size: .86rem; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-fine { margin-top: 10px; font-size: .78rem !important; color: var(--text-3) !important; line-height: 1.45; }

/* ── Annual card (home) ─────────────────────────────────────────────────── */
.lib-up { position: relative; max-width: 1200px; margin: 0 auto 18px; padding: 16px 16px 14px; border: 1px solid rgba(201,162,106,.5); border-radius: var(--r-lg); background: radial-gradient(300px 140px at 0% 0%, rgba(201,162,106,.12), transparent 70%), var(--surface); }
.lib-up b { display: block; font-size: .98rem; font-weight: 650; padding-right: 26px; }
.lib-up p { font-size: .84rem; color: var(--text-2); margin: 4px 0 12px; line-height: 1.45; }
.lib-up-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--text-3); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lib-up-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-up-row .btn { flex: 1 1 140px; justify-content: center; text-align: center; padding: 10px 12px; border-radius: 999px; font-size: .86rem; max-width: 220px; }
@media (max-width: 760px) {
  .lib-up { margin: 0 16px 18px; }
  .lib-up-row .btn { max-width: none; }
}

/* ── Win-back banner (/subscribe) ───────────────────────────────────────── */
.nx-wb { display: flex; gap: 14px; align-items: center; padding: 14px 16px; margin: 0 0 22px; border-radius: var(--r-md); border: 1px solid rgba(201,162,106,.55); background: radial-gradient(420px 140px at 0% 0%, rgba(201,162,106,.16), transparent 70%), var(--surface); text-align: left; }
.nx-wb-ic { flex: none; height: 34px; padding: 0 11px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #171310; font-weight: 750; font-size: .9rem; }
.nx-wb b { display: block; font-size: 1rem; font-weight: 650; color: var(--text); }
.nx-wb span { font-size: .84rem; color: var(--text-2); line-height: 1.4; }