/* JoTrack funnel pages (Subscribe / Start) — mirrors the public marketing
   site's design system (new.jotrack.com) so the signup/checkout journey feels
   like one product. Scoped under .jt-funnel to avoid touching LeptonX. */

.jt-funnel {
  --jt-bg: #f6f8fc;
  --jt-card: #ffffff;
  --jt-border: rgba(15, 26, 44, 0.10);
  --jt-text: #101b30;
  --jt-dim: #5a6880;
  --jt-accent: #1d71b8;
  --jt-grad: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
  --jt-radius: 16px;
  --jt-radius-lg: 24px;

  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--jt-text);
  background:
    radial-gradient(640px 400px at 18% 0%, rgba(11, 187, 239, 0.10), transparent 65%),
    radial-gradient(760px 460px at 82% 8%, rgba(77, 132, 226, 0.12), transparent 65%),
    var(--jt-bg);
  border-radius: var(--jt-radius-lg);
  padding: 64px 32px 84px;
  margin: 12px auto 40px;
  /* Wide enough that five tier cards get ~225px each — at 1080 they crushed
     to ~185px and the feature lists wrapped every other word. */
  max-width: 1240px;
}

.jt-funnel .jt-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.jt-funnel .jt-eyebrow {
  display: inline-block; padding: 6px 16px; margin-bottom: 18px;
  border: 1px solid rgba(11, 187, 239, 0.35); border-radius: 999px;
  color: var(--jt-accent); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(11, 187, 239, 0.07);
}
.jt-funnel h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800;
  margin: 0 0 12px; color: var(--jt-text); line-height: 1.15;
}
.jt-funnel .jt-grad {
  background: var(--jt-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jt-funnel .jt-sub { color: var(--jt-dim); font-size: 1.06rem; margin: 0; }

/* buttons — the site's pill buttons */
.jt-funnel .jt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.jt-funnel .jt-btn:hover { transform: translateY(-2px); }
.jt-funnel .jt-btn-primary {
  background: var(--jt-grad); color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(11, 187, 239, 0.35);
  /* no border on gradient pills: the transparent 1px border anti-aliases
     against the gradient's bright left cap and reads as a dark rim */
  border: 0; padding: 14px 31px;
}
.jt-funnel .jt-btn-primary:hover { box-shadow: 0 12px 36px rgba(11, 187, 239, 0.5); }
.jt-funnel .jt-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* panels & forms — the site's card + input look */
.jt-funnel .jt-panel {
  max-width: 560px; margin: 0 auto; padding: 34px 32px;
  background: var(--jt-card); border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-lg);
  box-shadow: 0 0 60px rgba(11, 187, 239, 0.14), 0 10px 30px rgba(15, 26, 44, 0.06);
}
.jt-funnel label { font-size: 0.87rem; font-weight: 600; color: var(--jt-dim); margin-bottom: 7px; display: block; }
.jt-funnel .jt-input, .jt-funnel select.jt-input {
  width: 100%; padding: 12px 15px; font: inherit; color: var(--jt-text);
  background: #ffffff; border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.jt-funnel .jt-input:focus {
  border-color: #0bbbef; box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.18);
}
.jt-funnel .jt-hint { font-size: 0.82rem; color: var(--jt-dim); margin-top: 6px; }
.jt-funnel .jt-field { margin-bottom: 20px; }
.jt-funnel .jt-error {
  background: rgba(224, 85, 85, 0.08); border: 1px solid rgba(224, 85, 85, 0.35);
  color: #b23434; border-radius: var(--jt-radius); padding: 12px 16px; margin-bottom: 18px;
  font-size: 0.95rem;
}
.jt-funnel .jt-alt { text-align: center; color: var(--jt-dim); margin: 18px 0 0; font-size: 0.95rem; }
.jt-funnel .jt-alt a { color: var(--jt-accent); font-weight: 700; text-decoration: none; }

/* choice cards (new vs existing customer) */
.jt-funnel .jt-choice-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; max-width: 780px; margin: 0 auto;
}
.jt-funnel .jt-choice {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 28px; border-radius: 20px; text-decoration: none; overflow: hidden;
  border: 1px solid var(--jt-border); background: var(--jt-card);
  box-shadow: 0 10px 34px rgba(22, 65, 148, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.jt-funnel .jt-choice:hover { transform: translateY(-6px); box-shadow: 0 18px 46px rgba(22, 65, 148, 0.16); border-color: #0bbbef; text-decoration: none; }
.jt-funnel .jt-choice.jt-primary { background: var(--jt-grad); color: #fff; border: 0; }
.jt-funnel .jt-choice.jt-primary .jt-choice-sub { color: rgba(255, 255, 255, 0.88); }
.jt-funnel .jt-choice.jt-primary .jt-go { color: #fff; }
.jt-funnel .jt-choice.jt-primary h5 { color: #fff; }
.jt-funnel .jt-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 16px; }
.jt-funnel .jt-choice h5 { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; color: var(--jt-text); }
.jt-funnel .jt-choice-sub { color: var(--jt-dim); font-size: 0.96rem; line-height: 1.55; margin: 0 0 20px; flex: 1; }
.jt-funnel .jt-go { margin-top: auto; font-weight: 800; color: var(--jt-accent); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s ease; }
.jt-funnel .jt-choice:hover .jt-go { gap: 12px; }
.jt-funnel .jt-badge {
  position: absolute; top: 16px; inset-inline-end: 16px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: #fff;
}

/* plan picker (authenticated) — mirrors the site's pricing cards */
.jt-funnel .jt-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 780px; margin: 0 auto 26px; }
.jt-funnel .jt-plan {
  position: relative; display: block; cursor: pointer;
  padding: 26px 24px; border-radius: 20px;
  background: var(--jt-card); border: 2px solid var(--jt-border);
  box-shadow: 0 8px 26px rgba(22, 65, 148, 0.07);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.jt-funnel .jt-plan:hover { transform: translateY(-4px); }
.jt-funnel .jt-plan input { position: absolute; opacity: 0; pointer-events: none; }
.jt-funnel .jt-plan.selected { border-color: #0bbbef; box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.15), 0 14px 36px rgba(22, 65, 148, 0.14); }
.jt-funnel .jt-plan-name { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--jt-accent); margin-bottom: 8px; }
.jt-funnel .jt-price { font-size: 2.3rem; font-weight: 800; color: var(--jt-text); }
.jt-funnel .jt-price small { font-size: 0.95rem; font-weight: 500; color: var(--jt-dim); }
.jt-funnel .jt-check {
  position: absolute; top: 18px; inset-inline-end: 18px;
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--jt-border);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0.8rem; font-weight: 800;
  transition: all 0.2s ease;
}
.jt-funnel .jt-plan.selected .jt-check { background: var(--jt-grad); border-color: transparent; color: #fff; }
/* (toggle row styling lives with the billing/flavor pills further down) */
.jt-funnel .jt-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; background: var(--jt-card); border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
}
.jt-funnel .jt-total-label { color: var(--jt-dim); font-size: 0.95rem; }
.jt-funnel .jt-total-value { font-size: 1.6rem; font-weight: 800; }
.jt-funnel .jt-submit-row { max-width: 780px; margin: 26px auto 0; text-align: center; }

@media (max-width: 700px) {
  .jt-funnel { padding: 36px 14px 48px; }
  .jt-funnel .jt-choice-grid, .jt-funnel .jt-plans { grid-template-columns: minmax(0, 1fr); }
  .jt-funnel .jt-panel { padding: 26px 18px; }
}

/* ---- current-subscription banner (Subscribe page) ---- */
.jt-current {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 18px;
    align-items: center;
    max-width: 860px;
    margin: 0 auto 26px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(11, 187, 239, 0.08), rgba(22, 65, 148, 0.06));
    border: 1px solid rgba(11, 187, 239, 0.35);
    border-radius: var(--jt-radius-lg, 24px);
    box-shadow: 0 0 44px rgba(11, 187, 239, 0.10);
    text-align: start;
}
.jt-current-expired {
    background: rgba(214, 69, 69, 0.06);
    border-color: rgba(214, 69, 69, 0.35);
    box-shadow: none;
}
/* emoji sits in a soft tile instead of floating bare */
.jt-current-icon {
    font-size: 1.6rem; line-height: 1;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid rgba(11, 187, 239, 0.25);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(22, 65, 148, 0.10);
}
.jt-current-title { font-size: 1.05rem; color: #101b30; }
.jt-current-title strong { font-weight: 800; }
.jt-current-badge {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #0bbbef, #1d71b8);
    vertical-align: 2px;
}
.jt-current-sub { font-size: .9rem; color: #5a6880; margin-top: 2px; }
.jt-current-meter {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 26, 44, 0.08);
    overflow: hidden;
    margin-top: 6px;
}
.jt-current-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
}
@media (max-width: 640px) {
    .jt-current { grid-template-columns: 1fr; text-align: center; }
    .jt-current-icon { margin: 0 auto; }
}

/* ---- funnel pages are always light ----
   These marketing-style pages (Start / Subscribe / Welcome) are designed
   light; when the portal's LeptonX theme is set to dark it paints the page
   background dark around the light cards. This stylesheet only loads on
   funnel pages, so force the light canvas here. */
html:has(.jt-funnel),
body:has(.jt-funnel) {
    background: #f6f8fc !important;
    color-scheme: light;
    --lpx-content-bg: #f6f8fc;
    --lpx-card-bg: #ffffff;
}
body:has(.jt-funnel) .lpx-content,
body:has(.jt-funnel) .lpx-scroll-container,
body:has(.jt-funnel) .lpx-content-container {
    background: #f6f8fc !important;
}

/* ---- dynamic edition tier cards (Subscribe page) ---- */
.jt-tiers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0 auto 26px;
}
.jt-tier {
    position: relative;
    display: flex; flex-direction: column;
    padding: 26px 22px 22px;
    background: #fff;
    /* Marketing-site card language: hairline border + layered soft shadow,
       not a heavy 2px outline. A transparent 2px ring is reserved so the
       selected state can paint it without the card shifting a pixel. */
    border: 1.5px solid rgba(15, 26, 44, 0.10);
    border-radius: var(--jt-radius-lg, 24px);
    box-shadow: 0 1px 2px rgba(15, 26, 44, 0.04), 0 8px 24px rgba(15, 26, 44, 0.05);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-align: start;
}
.jt-tier:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 187, 239, 0.45);
    box-shadow: 0 18px 44px rgba(22, 65, 148, 0.14);
}
.jt-tier.selected {
    border-color: #0bbbef;
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px rgba(11, 187, 239, 0.16),
        0 18px 44px rgba(11, 187, 239, 0.22);
}
.jt-tier:focus-within {
    border-color: #0bbbef;
    box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.22);
}
.jt-tier-radio { position: absolute; opacity: 0; pointer-events: none; }
.jt-tier .jt-check {
    position: absolute; top: 16px; inset-inline-end: 16px;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 900; color: #fff;
    background: linear-gradient(100deg, #0bbbef, #1d71b8);
    box-shadow: 0 4px 12px rgba(11, 187, 239, 0.4);
    opacity: 0; transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.jt-tier.selected .jt-check { opacity: 1; transform: scale(1); }
/* Plan name as an eyebrow — same voice as the marketing pricing cards
   (.jt-plan-name), so the PRICE is the headline of the card, not the name. */
.jt-tier-name {
    font-weight: 800; font-size: .8rem; color: var(--jt-accent, #1d71b8);
    letter-spacing: .07em; text-transform: uppercase;
}
[dir="rtl"] .jt-tier-name { letter-spacing: 0; }
.jt-tier-price {
    margin-top: 10px; font-size: 2.05rem; font-weight: 800; color: #101b30;
    letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.jt-tier-price small { font-size: .8rem; font-weight: 600; color: #5a6880; letter-spacing: 0; }
/* Head zone: name + price + capacity, one min-height for the row so every
   card's feature divider starts on the same line. Cards in view are always
   one flavor at a time (the toggle filters), so the stack is homogeneous. */
.jt-tier-head {
    display: flex; flex-direction: column; align-items: flex-start;
    min-height: 158px;
}
/* Cap pinned to the zone's floor; the margins on the lines above keep a
   minimum gap when a wrapped name/price makes the head taller than the row. */
.jt-tier-head .jt-tier-cap { margin-top: auto; }
.jt-tier-head .jt-tier-price { margin-bottom: 10px; }
.jt-tier-cap {
    margin-top: 12px; align-self: flex-start;
    font-size: .78rem; font-weight: 700; color: #1d71b8;
    background: rgba(11, 187, 239, 0.08);
    border: 1px solid rgba(11, 187, 239, 0.28);
    padding: 4px 11px; border-radius: 999px;
}
.jt-tier-feats {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 9px;
    font-size: .84rem; color: #47536a;
}
.jt-tier-feats li { position: relative; padding-inline-start: 22px; line-height: 1.5; }
.jt-tier-feats li::before {
    content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
    color: #1f9d61; font-weight: 900;
}
/* AI feature lines pop — tinted full-width rows, not just bold text */
.jt-tier-feats li.jt-feat-ai {
    color: #164194; font-weight: 700;
    background: linear-gradient(90deg, rgba(11, 187, 239, 0.08), rgba(11, 187, 239, 0.02));
    border-radius: 8px;
    padding: 4px 8px 4px 24px; margin: 0 -8px 0 -2px;
}
[dir="rtl"] .jt-tier-feats li.jt-feat-ai { padding: 4px 24px 4px 8px; margin: 0 -2px 0 -8px; }
.jt-tier-feats li.jt-feat-ai::before { content: "✨"; color: inherit; inset-inline-start: 4px; top: 4px; }

/* the AI flavor is THE thing to notice */
.jt-tier-ai {
    border-color: rgba(11, 187, 239, 0.55);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #0bbbef, #1d71b8 55%, #164194) border-box;
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(11, 187, 239, 0.14);
}
.jt-tier-ai .jt-tier-name {
    background: var(--jt-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jt-ai-badge {
    align-self: flex-start;
    margin-bottom: 8px;
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; padding: 4px 11px; border-radius: 999px;
    background: linear-gradient(100deg, #0bbbef, #1d71b8 60%, #164194);
    box-shadow: 0 4px 14px rgba(11, 187, 239, 0.35);
}
@media (max-width: 1280px) { .jt-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .jt-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .jt-tiers { grid-template-columns: minmax(0, 1fr); } }

/* two-category feature lists on tier cards */
.jt-feats-head {
    margin-top: 16px;
    font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #8b96aa;
    border-bottom: 1px solid rgba(15, 26, 44, 0.08);
    padding-bottom: 5px;
}
[dir="rtl"] .jt-feats-head { letter-spacing: 0; }
.jt-tier .jt-tier-feats { margin-top: 10px; }

/* "Most popular" ribbon on the recommended tier card */
.jt-tier { overflow: visible; }

/* ---- subscription-aware grid: your plan / upgrades / downgrades ---- */
.jt-current { grid-template-columns: auto 1fr auto; }
.jt-current-upgrade { padding: 10px 22px; font-size: .92rem; }
/* The current plan is context, not merchandise — a quieter, green-keyed
   card that sits back while the upgrade options carry the visual weight. */
.jt-tier-yours {
    border-color: rgba(35, 165, 90, 0.45);
    background: linear-gradient(180deg, rgba(35, 165, 90, 0.045), rgba(255, 255, 255, 0) 55%), #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 44, 0.03);
    cursor: default;
}
.jt-tier-yours:hover {
    transform: none;
    border-color: rgba(35, 165, 90, 0.55);
    box-shadow: 0 8px 24px rgba(35, 165, 90, 0.10);
}
.jt-tier-yours .jt-tier-name { color: #1d7a45; }
.jt-your-ribbon {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; padding: 5px 14px; border-radius: 999px;
    background: linear-gradient(100deg, #2fbf71, #23a55a);
    box-shadow: 0 6px 16px rgba(35, 165, 90, 0.4);
}
.jt-extend-note { color: #5a6880; font-size: .92rem; margin: 14px 2px 0; line-height: 1.55; }
/* On the upgrade grid this is THE number that matters — today's prorated
   charge — so it reads as a chip, not a footnote under the list price. */
.jt-upgrade-price {
    margin: 0 0 12px; align-self: flex-start;
    font-size: .88rem; font-weight: 800; color: #14713d;
    background: rgba(35, 165, 90, 0.10);
    border: 1px solid rgba(35, 165, 90, 0.35);
    padding: 5px 12px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.jt-renew-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.jt-renew-btn {
    align-self: stretch; justify-content: center;
    border: 1.5px solid #23a55a; color: #1d8047; background: rgba(35, 165, 90, 0.07);
    font-weight: 700; font-size: .92rem;
}
.jt-renew-row .jt-renew-btn {
    /* Long bilingual price labels must fit a ~250px card: wrap, slim padding */
    margin-top: 0; width: 100%;
    white-space: normal; text-align: center; line-height: 1.35;
    padding: 10px 14px; font-size: .88rem;
}
.jt-renew-btn:hover { background: rgba(35, 165, 90, 0.14); }
.jt-renew-year {
    color: #fff; border-color: transparent;
    background: linear-gradient(100deg, #23a55a 0%, #1d8047 100%);
}
.jt-renew-year:hover { background: linear-gradient(100deg, #2ab364 0%, #23945a 100%); }
.jt-upgrade-note { margin-top: 6px; font-size: .88rem; color: #23a55a; font-weight: 600; }

/* Standard | AI-Powered tabs — mirror of the marketing pricing widget */
.jt-flavor-toggle {
    display: flex; justify-content: center; gap: 6px;
    background: #fff; border: 1px solid rgba(15, 26, 44, 0.12);
    border-radius: 999px; padding: 6px;
    width: fit-content; margin: 0 auto 22px;
    box-shadow: inset 0 1px 3px rgba(15, 26, 44, 0.05), 0 4px 14px rgba(15, 26, 44, 0.06);
}
.jt-flavor-tab {
    border: 0; background: transparent; cursor: pointer;
    padding: 10px 26px; border-radius: 999px;
    font-weight: 700; font-size: .95rem; color: #5a6880;
    transition: background .2s ease, color .2s ease;
}
.jt-flavor-tab:not(.active):hover { color: #101b30; background: rgba(15, 26, 44, 0.05); }
.jt-flavor-tab:focus-visible { outline: 2px solid #0bbbef; outline-offset: 2px; }
.jt-flavor-tab.active {
    color: #fff;
    background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
    box-shadow: 0 6px 18px rgba(11, 187, 239, 0.35);
}

/* ===== Purchase configurator (new buyers) ===== */
.jt-config {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px; align-items: start; max-width: 1150px; margin: 0 auto;
}
.jt-cfg-card {
    background: #fff; border: 1px solid rgba(15, 26, 44, 0.1); border-radius: 20px;
    padding: 24px 26px; margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(15, 26, 44, 0.05);
    transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.jt-cfg-card.active {
    border-color: rgba(11, 187, 239, 0.55);
    box-shadow: 0 16px 48px rgba(11, 187, 239, 0.16);
}
@keyframes jt-cfg-body-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.jt-cfg-card.active .jt-cfg-body { animation: jt-cfg-body-in .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes jt-check-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
@keyframes jt-sum-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); color: #0bbbef; }
    100% { transform: scale(1); }
}
.jt-sum-total strong.bump { display: inline-block; animation: jt-sum-bump .4s ease; }
.jt-cfg-step { font-size: 1.05rem; font-weight: 800; color: #101b30; margin: 0; }

/* Wizard states: one step open at a time; done steps collapse to a value
   line with Edit; future steps sit dimmed and locked. */
.jt-cfg-head { display: flex; align-items: center; gap: 12px; }
.jt-cfg-value {
    flex: 1; text-align: end; color: #1d71b8; font-weight: 700; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jt-cfg-edit {
    border: 1px solid rgba(29, 113, 184, 0.35); background: transparent; color: #1d71b8;
    font-size: .78rem; font-weight: 700; padding: 4px 13px; border-radius: 999px;
    cursor: pointer; display: none; flex-shrink: 0;
}
.jt-cfg-edit:hover { background: rgba(11, 187, 239, 0.08); }
.jt-cfg-card .jt-cfg-body { margin-top: 16px; }
.jt-cfg-card:not(.active) .jt-cfg-body { display: none; }
.jt-cfg-card.done .jt-cfg-edit { display: inline-block; }
.jt-cfg-card.done { border-color: rgba(35, 165, 90, 0.45); }
.jt-cfg-card.done .jt-cfg-step::after {
    content: " ✓"; color: #23a55a; display: inline-block;
    animation: jt-check-pop .45s cubic-bezier(.16, 1, .3, 1);
}
.jt-cfg-card.locked { opacity: .45; }
.jt-cfg-card.locked .jt-cfg-value { display: none; }
.jt-cfg-next { margin-top: 16px; padding: 11px 30px; font-size: .95rem; }
.jt-plan-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.jt-plan-mini {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    border: 1.5px solid rgba(15, 26, 44, 0.12); border-radius: 14px;
    padding: 16px 14px 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.jt-plan-mini input { position: absolute; opacity: 0; pointer-events: none; }
.jt-plan-mini.selected { border-color: #1d71b8; box-shadow: 0 8px 24px rgba(11, 187, 239, 0.18); }
.jt-mini-ribbon {
    position: absolute; top: -9px; inset-inline-end: 10px;
    background: linear-gradient(100deg, #0bbbef, #164194); color: #fff;
    font-size: .62rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.jt-mini-name { font-weight: 800; color: #101b30; font-size: .95rem; }
.jt-mini-price { font-weight: 800; color: #1d71b8; font-size: 1.15rem; }
.jt-mini-price small { font-weight: 600; color: #5a6880; font-size: .72rem; }
.jt-mini-cap { color: #5a6880; font-size: .78rem; }
.jt-paymodes { display: flex; flex-direction: column; gap: 9px; }
.jt-paymode {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px solid rgba(15, 26, 44, 0.12); border-radius: 14px;
    padding: 13px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.jt-paymode input { accent-color: #1d71b8; flex-shrink: 0; }
.jt-paymode.selected { border-color: #1d71b8; box-shadow: 0 8px 24px rgba(11, 187, 239, 0.14); }
.jt-paymode-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jt-paymode-main strong { color: #101b30; font-size: .95rem; }
.jt-paymode-main small { color: #5a6880; font-size: .82rem; line-height: 1.4; }
.jt-paymode-price { font-weight: 800; color: #1d71b8; white-space: nowrap; }
.jt-ai-card {
    display: flex; align-items: center; gap: 14px;
    border: 1.5px dashed rgba(29, 113, 184, 0.4); border-radius: 14px;
    padding: 15px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.jt-ai-card input[type="checkbox"] { width: 18px; height: 18px; accent-color: #1d71b8; flex-shrink: 0; }
.jt-ai-card.selected { border-style: solid; border-color: #1d71b8; background: rgba(11, 187, 239, 0.05); }
.jt-ai-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.jt-ai-main strong { color: #101b30; }
.jt-ai-main small { color: #5a6880; font-size: .84rem; line-height: 1.45; }
.jt-ai-price { font-weight: 800; color: #1d71b8; white-space: nowrap; }
.jt-visually-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.jt-ai-view { padding: 9px 20px; font-size: .85rem; flex-shrink: 0; }

/* AI upgrade modal — airline-style package comparison */
.jt-ai-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 18px;
    background: rgba(10, 18, 38, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.jt-ai-modal[hidden] { display: none; }
.jt-ai-modal-card {
    position: relative; width: min(680px, 96vw); max-height: 92vh; overflow-y: auto;
    background: #fff; border-radius: 20px; padding: 26px 28px;
    box-shadow: 0 40px 120px rgba(10, 18, 38, 0.45);
    animation: jt-cfg-body-in .35s cubic-bezier(.16, 1, .3, 1);
}
.jt-ai-modal-close {
    position: absolute; top: 16px; inset-inline-end: 18px;
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(15, 26, 44, 0.06); color: #101b30; font-size: 14px; cursor: pointer;
}
.jt-ai-modal-close:hover { background: rgba(15, 26, 44, 0.12); }
.jt-ai-modal-title { margin: 0 0 14px; font-size: 1.25rem; font-weight: 800; color: #101b30; }
.jt-ai-banner {
    background: linear-gradient(100deg, #164194 0%, #1d71b8 55%, #23a55a 100%);
    color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.5;
    border-radius: 12px; padding: 13px 18px; margin-bottom: 20px;
}
.jt-ai-compare { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.jt-ai-col-head { text-align: center; font-weight: 800; color: #101b30; margin-bottom: 10px; font-size: .95rem; }
.jt-ai-pack {
    border: 1.5px solid rgba(15, 26, 44, 0.14); border-radius: 14px;
    padding: 16px; min-height: 170px;
}
.jt-ai-pack-hi { border: 2px solid #23c063; box-shadow: 0 10px 30px rgba(35, 192, 99, 0.18); }
.jt-pack-badge {
    display: inline-block; padding: 5px 15px; border-radius: 999px;
    font-weight: 800; font-size: .85rem; margin-bottom: 12px;
}
.jt-pack-std { background: rgba(15, 26, 44, 0.08); color: #5a6880; }
.jt-pack-ai { background: linear-gradient(100deg, #0bbbef 0%, #164194 100%); color: #fff; }
.jt-pack-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jt-pack-feats li { position: relative; padding-inline-start: 18px; font-size: .88rem; color: #35455c; line-height: 1.45; }
.jt-pack-feats li::before { content: "•"; position: absolute; inset-inline-start: 4px; color: #1d71b8; }
.jt-pack-feats li.jt-feat-lead { font-weight: 700; color: #101b30; }
.jt-ai-offer { margin: 18px 2px 16px; color: #35455c; font-size: .95rem; }
.jt-ai-offer strong { color: #164194; }
.jt-ai-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.jt-ai-stay { border: 1.5px solid rgba(15, 26, 44, 0.18); background: #fff; color: #35455c; }
@media (max-width: 620px) { .jt-ai-compare { grid-template-columns: 1fr; } }

.jt-cfg-summary {
    position: sticky; top: 18px;
    background: #fff; border: 1px solid rgba(15, 26, 44, 0.1); border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 0 50px rgba(11, 187, 239, 0.08), 0 14px 40px rgba(15, 26, 44, 0.08);
}
.jt-cfg-summary h3 { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; color: #101b30; }
.jt-sum-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid rgba(15, 26, 44, 0.07);
    font-size: .92rem; color: #5a6880;
}
.jt-sum-row strong { color: #101b30; text-align: end; }
.jt-sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0 4px; font-weight: 800; color: #101b30;
}
.jt-sum-total strong { font-size: 1.55rem; color: #1d71b8; }
.jt-sum-note { color: #5a6880; font-size: .82rem; line-height: 1.5; margin: 6px 0 14px; }
.jt-sum-cta { width: 100%; justify-content: center; }
@media (max-width: 900px) {
    .jt-config { grid-template-columns: 1fr; }
    .jt-cfg-summary { position: static; }
}

/* Monthly | Yearly billing toggle — same pill styling as the flavor toggle,
   plus the green savings badge on the yearly tab */
/* .jt-funnel prefix matters: without it a stray lower-specificity rule loses
   to theme resets, and historically an old 2-col grid version of this rule
   outranked it and shoved a lone toggle into the left column. */
.jt-funnel .jt-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 14px; flex-wrap: wrap; margin: 0 auto 36px;
}
.jt-controls .jt-billing-toggle, .jt-controls .jt-flavor-toggle { margin: 0; }
.jt-billing-toggle {
    display: flex; justify-content: center; gap: 6px;
    background: #fff; border: 1px solid rgba(15, 26, 44, 0.12);
    border-radius: 999px; padding: 6px;
    width: fit-content;
    box-shadow: inset 0 1px 3px rgba(15, 26, 44, 0.05), 0 4px 14px rgba(15, 26, 44, 0.06);
}
.jt-billing-tab {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: transparent; cursor: pointer;
    padding: 10px 22px; border-radius: 999px;
    font-weight: 700; font-size: .95rem; color: #5a6880;
    transition: background .2s ease, color .2s ease;
}
.jt-billing-tab:not(.active):hover { color: #101b30; background: rgba(15, 26, 44, 0.05); }
.jt-billing-tab:focus-visible { outline: 2px solid #0bbbef; outline-offset: 2px; }
.jt-billing-tab.active {
    color: #fff;
    background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
    box-shadow: 0 6px 18px rgba(11, 187, 239, 0.35);
}
.jt-save-badge {
    background: #e7f8ef; color: #1d8a4e;
    font-size: .72rem; font-weight: 800;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.jt-billing-tab.active .jt-save-badge { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Yearly price block on cards: struck-through full price + discounted total */
.jt-price-was {
    display: block; color: #93a1b5; font-size: .92rem; font-weight: 600;
    text-decoration: line-through; line-height: 1.1; margin-bottom: 2px;
}
.jt-year-note {
    color: #1d8a4e; font-size: .85rem; font-weight: 700; margin: 2px 0 6px;
}

/* "All plans include …" — said once, not on every card */
.jt-core-strip {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 8px 18px; max-width: 900px; margin: 0 auto 24px;
    font-size: .9rem; color: #5a6880;
}
.jt-core-strip .jt-core-label { font-weight: 800; color: #101b30; }
.jt-core-strip span:not(.jt-core-label)::before { content: "✓ "; color: #23a55a; font-weight: 800; }

/* Sticky buy bar — selection + price + pay always in reach.
   A rounded CARD, not a pill: the renewal footnote legitimately runs two
   lines, and a 999px radius clipped it out the bottom of the capsule. */
.jt-buybar {
    position: sticky; bottom: 16px; z-index: 6;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    max-width: 860px; margin: 30px auto 0; padding: 16px 18px 16px 26px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(15, 26, 44, 0.12); border-radius: 20px;
    box-shadow: 0 18px 50px rgba(22, 65, 148, 0.24), 0 0 40px rgba(11, 187, 239, 0.10);
}
/* brand thread along the top edge — ties the bar to the page's gradient */
.jt-buybar::before {
    content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
    opacity: .8;
}
/* Plan name stacks ABOVE the price as an eyebrow — side by side it ellipsed
   ("Business ...") the moment the renewal footnote got long. */
.jt-buybar-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
.jt-buybar .jt-btn { flex-shrink: 0; }
.jt-buybar-plan {
    font-weight: 800; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
    color: #5a6880; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
[dir="rtl"] .jt-buybar-plan { letter-spacing: 0; }
.jt-buybar-price { font-weight: 800; font-size: 1.5rem; color: #1d71b8; white-space: normal; min-width: 0; font-variant-numeric: tabular-nums; line-height: 1.2; }
/* The renewal detail is a CAPTION under the price, not a run-on suffix —
   its own line, dimmer and smaller, wrapping freely inside the card. */
.jt-buybar-price small {
    display: block; margin-top: 3px;
    font-weight: 600; font-size: .8rem; color: #5a6880; line-height: 1.45;
}
@media (max-width: 700px) {
    .jt-buybar { flex-direction: column; align-items: stretch; gap: 10px; border-radius: 20px; padding: 16px 18px; }
    .jt-buybar .jt-btn { width: 100%; }
}
@media (max-width: 700px) {
    .jt-current { grid-template-columns: 1fr; }
    .jt-current-upgrade { justify-self: center; }
}

/* Brand gradient, not the old amber — one accent family across the page. */
.jt-popular-ribbon {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; padding: 5px 14px; border-radius: 999px;
    background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%);
    box-shadow: 0 6px 16px rgba(11, 187, 239, 0.45);
}
[dir="rtl"] .jt-popular-ribbon { letter-spacing: 0; }
.jt-tier:has(.jt-popular-ribbon) { border-color: rgba(11, 187, 239, 0.5); }

/* ---- auto-renew toggle (configurator step 2) ---- */
.jt-funnel .jt-autorenew {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid rgba(15, 26, 44, 0.12); border-radius: 14px;
  padding: 14px 18px; margin: 14px 0 18px; cursor: pointer;
  background: #fff; transition: border-color .15s ease, background .15s ease;
}
.jt-funnel .jt-autorenew input {
  margin-top: 3px; width: 18px; height: 18px; accent-color: var(--jt-accent);
  flex: 0 0 auto; cursor: pointer;
}
.jt-funnel .jt-autorenew-main { display: flex; flex-direction: column; gap: 3px; }
.jt-funnel .jt-autorenew-main strong { font-size: .98rem; color: var(--jt-text); }
.jt-funnel .jt-autorenew-main small { color: var(--jt-dim); font-size: .85rem; }
.jt-funnel .jt-autorenew.selected {
  border-color: rgba(29, 113, 184, 0.55);
  background: rgba(11, 187, 239, 0.06);
}

/* ---- auto-renew status banner (manage + cancel) ---- */
.jt-autorenew-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; max-width: 860px; margin: 0 auto 20px;
  background: #e8f6ee; border: 1px solid rgba(29, 138, 95, 0.30);
  color: #14532d; border-radius: var(--jt-radius, 16px); padding: 16px 24px;
  box-shadow: 0 6px 20px rgba(15, 26, 44, 0.05);
}
.jt-autorenew-banner-body { display: flex; flex-direction: column; gap: 2px; }
.jt-autorenew-banner-body strong { font-size: 1rem; }
.jt-autorenew-banner-body span { font-size: .9rem; opacity: .85; }
.jt-autorenew-banner.jt-autorenew-suspended {
  background: #fdf3e0; border-color: rgba(224, 178, 95, 0.6); color: #7a5b00;
}
.jt-autorenew-cancel {
  background: #fff; border: 1px solid rgba(15, 26, 44, 0.15); color: #b2453b;
  padding: 9px 18px; font-size: .9rem;
}

/* family headers inside the plan step (Personal vs Business) */
.jt-funnel .jt-plan-family {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--jt-dim); margin: 14px 2px 8px;
}
.jt-funnel .jt-plan-family:first-child { margin-top: 0; }

/* ============================================================
   Dark theme — follows the LeptonX toggle (body.lpx-theme-dark).
   The funnel ships light-first; these overrides re-ground every
   hardcoded light surface on the portal's dark palette.
   ============================================================ */

/* page canvas: out-darks the light-forcing rules above (higher specificity) */
html:has(body.lpx-theme-dark .jt-funnel),
body.lpx-theme-dark:has(.jt-funnel) {
    background: #0a101d !important;
    color-scheme: dark;
    --lpx-content-bg: #0a101d;
    --lpx-card-bg: #121b2e;
}
body.lpx-theme-dark:has(.jt-funnel) .lpx-content,
body.lpx-theme-dark:has(.jt-funnel) .lpx-scroll-container,
body.lpx-theme-dark:has(.jt-funnel) .lpx-content-container {
    background: #0a101d !important;
}

/* variable re-ground — everything built on var(--jt-*) adapts automatically
   (panel, choice cards, plan cards, labels, hints, prices, totals, …) */
body.lpx-theme-dark .jt-funnel {
    --jt-bg: #0a101d;
    --jt-card: #121b2e;
    --jt-border: rgba(255, 255, 255, 0.10);
    --jt-text: #e6ecf7;
    --jt-dim: #93a0b8;
    --jt-accent: #38d4ff;
    background:
        radial-gradient(600px 380px at 18% 0%, rgba(11, 187, 239, 0.07), transparent 65%),
        radial-gradient(700px 420px at 82% 8%, rgba(77, 132, 226, 0.09), transparent 65%),
        var(--jt-bg);
}

/* form inputs (Start page) */
body.lpx-theme-dark .jt-funnel .jt-input,
body.lpx-theme-dark .jt-funnel select.jt-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--jt-text);
}
body.lpx-theme-dark .jt-funnel .jt-input:focus { background: rgba(255, 255, 255, 0.08); }

/* edition tier cards (Subscribe upgrade grid) */
body.lpx-theme-dark .jt-tier { background: var(--lpx-card-bg, #121b2e); border-color: rgba(255, 255, 255, 0.12); }
body.lpx-theme-dark .jt-tier-ai {
    background:
        linear-gradient(#121b2e, #121b2e) padding-box,
        linear-gradient(135deg, #0bbbef, #1d71b8 55%, #164194) border-box;
}
body.lpx-theme-dark .jt-tier-price,
body.lpx-theme-dark .jt-current-title { color: #e6ecf7; }
/* eyebrow-styled plan name: brand accent in dark too */
body.lpx-theme-dark .jt-tier-name { color: #38d4ff; }
body.lpx-theme-dark .jt-tier-ai .jt-tier-name {
    background: linear-gradient(100deg, #38d4ff, #6fa9ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.lpx-theme-dark .jt-tier-price small { color: #93a0b8; }
body.lpx-theme-dark .jt-tier-cap { color: #38d4ff; }
body.lpx-theme-dark .jt-tier-feats li { color: #b7c2d6; }
body.lpx-theme-dark .jt-tier-feats li.jt-feat-ai { color: #6fc2ff; }
body.lpx-theme-dark .jt-feats-head { color: #7f8aa0; border-bottom-color: rgba(255, 255, 255, 0.10); }

/* pill toggles (billing / flavor) */
body.lpx-theme-dark .jt-flavor-toggle,
body.lpx-theme-dark .jt-billing-toggle {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
body.lpx-theme-dark .jt-flavor-tab,
body.lpx-theme-dark .jt-billing-tab { color: #93a0b8; }
body.lpx-theme-dark .jt-flavor-tab.active,
body.lpx-theme-dark .jt-billing-tab.active { color: #fff; }

/* configurator step cards + order summary */
body.lpx-theme-dark .jt-cfg-card,
body.lpx-theme-dark .jt-cfg-summary {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.lpx-theme-dark .jt-cfg-summary h3,
body.lpx-theme-dark .jt-funnel .jt-cfg-step,
body.lpx-theme-dark .jt-funnel .jt-mini-name,
body.lpx-theme-dark .jt-funnel .jt-paymode-main strong,
body.lpx-theme-dark .jt-funnel .jt-ai-main strong,
body.lpx-theme-dark .jt-funnel .jt-autorenew-main strong,
body.lpx-theme-dark .jt-funnel .jt-sum-row strong,
body.lpx-theme-dark .jt-funnel .jt-sum-total { color: #e6ecf7; }
body.lpx-theme-dark .jt-funnel .jt-sum-row { color: #93a0b8; border-bottom-color: rgba(255, 255, 255, 0.08); }
body.lpx-theme-dark .jt-funnel .jt-sum-total strong,
body.lpx-theme-dark .jt-funnel .jt-mini-price,
body.lpx-theme-dark .jt-funnel .jt-paymode-price,
body.lpx-theme-dark .jt-funnel .jt-ai-price,
body.lpx-theme-dark .jt-funnel .jt-cfg-value,
body.lpx-theme-dark .jt-funnel .jt-cfg-edit { color: #38d4ff; }
body.lpx-theme-dark .jt-funnel .jt-cfg-edit { border-color: rgba(56, 212, 255, 0.4); }
body.lpx-theme-dark .jt-funnel .jt-plan-mini,
body.lpx-theme-dark .jt-funnel .jt-paymode { border-color: rgba(255, 255, 255, 0.14); }
body.lpx-theme-dark .jt-funnel .jt-plan-mini.selected,
body.lpx-theme-dark .jt-funnel .jt-paymode.selected {
    border-color: #38d4ff;
    box-shadow: 0 8px 24px rgba(11, 187, 239, 0.22);
}
body.lpx-theme-dark .jt-ai-card.selected { background: rgba(11, 187, 239, 0.10); }

/* auto-renew opt-in + status banner */
body.lpx-theme-dark .jt-funnel .jt-autorenew { background: #121b2e; border-color: rgba(255, 255, 255, 0.14); }
body.lpx-theme-dark .jt-funnel .jt-autorenew.selected {
    border-color: rgba(56, 212, 255, 0.55);
    background: rgba(11, 187, 239, 0.08);
}
body.lpx-theme-dark .jt-autorenew-banner {
    background: rgba(35, 165, 90, 0.12); border-color: rgba(35, 165, 90, 0.4); color: #7ad9a3;
}
body.lpx-theme-dark .jt-autorenew-banner.jt-autorenew-suspended {
    background: rgba(224, 178, 95, 0.10); border-color: rgba(224, 178, 95, 0.4); color: #e6c47a;
}
body.lpx-theme-dark .jt-autorenew-cancel {
    background: transparent; border-color: rgba(255, 255, 255, 0.2); color: #ff8f85;
}

/* sticky buy bar */
body.lpx-theme-dark .jt-buybar {
    background: rgba(18, 27, 46, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
body.lpx-theme-dark .jt-buybar-plan { color: #93a0b8; }
body.lpx-theme-dark .jt-buybar-price { color: #e6ecf7; }

/* upgrade-today chip + current-plan card accents */
body.lpx-theme-dark .jt-upgrade-price {
    background: rgba(35, 165, 90, 0.15);
    border-color: rgba(35, 165, 90, 0.45);
    color: #7ad9a3;
}
body.lpx-theme-dark .jt-tier-yours { border-color: rgba(35, 165, 90, 0.5); }
body.lpx-theme-dark .jt-tier-yours .jt-tier-name { color: #7ad9a3; }

/* current-plan banner */
body.lpx-theme-dark .jt-current-icon {
    background: #121b2e; border-color: rgba(56, 212, 255, 0.3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
body.lpx-theme-dark .jt-current-sub { color: #93a0b8; }

/* pill-tab idle hover (light rule uses a dark ink wash) */
body.lpx-theme-dark .jt-flavor-tab:not(.active):hover,
body.lpx-theme-dark .jt-billing-tab:not(.active):hover {
    color: #e6ecf7; background: rgba(255, 255, 255, 0.08);
}

/* manage-subscription + renew cards (hardcoded light surfaces) */
body.lpx-theme-dark .jt-renewcard {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
body.lpx-theme-dark .jt-renewcard-title { color: #e6ecf7; }
body.lpx-theme-dark .jt-mysub-ghost {
    background: transparent; color: #e6ecf7; border-color: rgba(255, 255, 255, 0.18);
}
body.lpx-theme-dark .jt-mysub-ghost:hover { border-color: #38d4ff; color: #38d4ff; }

/* AI upgrade modal */
body.lpx-theme-dark .jt-ai-modal-card { background: #121b2e; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
body.lpx-theme-dark .jt-ai-modal-title,
body.lpx-theme-dark .jt-ai-col-head,
body.lpx-theme-dark .jt-pack-feats li.jt-feat-lead { color: #e6ecf7; }
body.lpx-theme-dark .jt-ai-modal-close { background: rgba(255, 255, 255, 0.08); color: #e6ecf7; }
body.lpx-theme-dark .jt-ai-modal-close:hover { background: rgba(255, 255, 255, 0.16); }
body.lpx-theme-dark .jt-ai-pack { border-color: rgba(255, 255, 255, 0.14); }
body.lpx-theme-dark .jt-pack-std { background: rgba(255, 255, 255, 0.10); color: #93a0b8; }
body.lpx-theme-dark .jt-pack-feats li { color: #b7c2d6; }
body.lpx-theme-dark .jt-pack-feats li::before { color: #38d4ff; }
body.lpx-theme-dark .jt-ai-offer { color: #b7c2d6; }
body.lpx-theme-dark .jt-ai-offer strong { color: #38d4ff; }
body.lpx-theme-dark .jt-ai-stay { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #b7c2d6; }

/* payment pages (PrePayment + SubscriptionCheckout inline styles) */
body.lpx-theme-dark .jt-pay-card {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
body.lpx-theme-dark .jt-pay-rows li { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.lpx-theme-dark .jt-pay-rows .n,
body.lpx-theme-dark .jt-pay-rows .p { color: #e6ecf7; }
body.lpx-theme-dark .jt-pay-rows .q,
body.lpx-theme-dark .jt-pay-note { color: #93a0b8; }
body.lpx-theme-dark .jt-pay-total { color: #38d4ff; }
body.lpx-theme-dark .jt-renew-chip { background: rgba(35, 165, 90, 0.15); color: #7ad9a3; }
body.lpx-theme-dark .jt-pay-error { background: rgba(214, 69, 69, 0.15); color: #ff9d94; }
body.lpx-theme-dark .jt-pay-back,
body.lpx-theme-dark .jt-pay-fallback a,
body.lpx-theme-dark .jt-pay-fallback button { color: #38d4ff; }

/* enable-auto-renew offer banner (one-time subscribers) */
.jt-autorenew-offer {
  background: rgba(11, 187, 239, 0.07); border-color: rgba(29, 113, 184, 0.35);
  color: #164194;
}
body.lpx-theme-dark .jt-autorenew-offer {
  background: rgba(11, 187, 239, 0.10); border-color: rgba(56, 212, 255, 0.4); color: #7fd8ff;
}

/* [hidden] must beat the flex display on pay modes (Personal-only rows leaked
   into the Business view because .jt-paymode{display:flex} outranked [hidden]) */
.jt-paymode[hidden] { display: none !important; }

/* ── AI pack chooser inside the upgrade modal ─────────────────────────────
   The upsell is not yes/no: the visitor picks WHICH pack, so the chips have
   to read as real, comparable products. Each carries its tier name, its
   premium, and the allowance that premium buys. `--pk-i` is the pack's rank
   (0 = entry), which drives a cool→warm accent so the ladder is legible at a
   glance instead of four identical boxes. */
.jt-aim-packs-label {
  margin: 20px 0 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5a6880;
  text-align: center;
}
.jt-aim-packs {
  display: grid;
  /* One row whatever the tier count. auto-fit with a 124px floor wrapped a
     fifth chip onto a second line; column flow with zero-min tracks lets them
     share the width instead. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 6px;
}

.jt-aim-pack {
  /* Accent hue climbs from the brand blue toward indigo as the tier rises,
     so "more expensive" reads as deeper rather than drifting into green. */
  --pk-h: calc(199 + var(--pk-i, 0) * 16);
  --pk-accent: hsl(var(--pk-h) 85% 47%);
  --pk-accent-soft: hsl(var(--pk-h) 90% 96%);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px 12px;
  border: 1.5px solid rgba(15, 26, 44, .11);
  border-radius: 16px;
  background: #fff;
  color: #101b30;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1),
              box-shadow .2s ease, background .2s ease;
}

/* Tier bar across the top — the only thing that differs when unselected, so
   the ladder reads without shouting. */
.jt-aim-pack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--pk-accent), hsl(calc(var(--pk-h) - 26) 90% 62%));
  opacity: .55;
  transition: opacity .2s ease, height .2s ease;
}

/* Diagonal sheen, parked off-canvas until hover/selection. */
.jt-aim-pack-sheen {
  position: absolute;
  inset: -60% -120% auto auto;
  width: 90%;
  height: 240%;
  transform: rotate(18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.jt-aim-pack:hover {
  border-color: hsl(var(--pk-h) 85% 62%);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px hsl(var(--pk-h) 85% 40% / .85);
}
.jt-aim-pack:hover::before { opacity: 1; height: 4px; }
.jt-aim-pack:hover .jt-aim-pack-sheen { animation: jt-pack-sheen .7s ease forwards; }

.jt-aim-pack:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: 3px;
}

.jt-aim-pack.selected {
  border-color: var(--pk-accent);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--pk-accent-soft), #fff 70%);
  box-shadow:
    0 0 0 3px hsl(var(--pk-h) 90% 60% / .18),
    0 18px 34px -20px hsl(var(--pk-h) 85% 40% / .9);
  transform: translateY(-2px);
}
.jt-aim-pack.selected::before { opacity: 1; height: 4px; }

/* Tick badge — appears only on the chosen pack. */
.jt-aim-pack.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pk-accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  animation: jt-pack-pop .28s cubic-bezier(.2, 1.2, .4, 1);
}

.jt-aim-pack-n {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pk-accent);
}
.jt-aim-pack-p {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.jt-aim-pack-p small {
  font-size: .6rem;
  font-weight: 600;
  color: #5a6880;
  letter-spacing: 0;
}
/* What the premium actually buys. */
.jt-aim-pack-q {
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 26, 44, .05);
  font-size: .6rem;
  font-weight: 700;
  color: #5a6880;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.25;
}
.jt-aim-pack.selected .jt-aim-pack-q {
  background: hsl(var(--pk-h) 85% 47% / .12);
  color: hsl(var(--pk-h) 70% 30%);
}
.jt-aim-pack-d {
  font-size: .68rem;
  color: #5a6880;
  font-variant-numeric: tabular-nums;
}
.jt-aim-pack.selected .jt-aim-pack-d { color: #101b30; }

@keyframes jt-pack-sheen {
  from { opacity: 0; transform: rotate(18deg) translateX(0); }
  35%  { opacity: 1; }
  to   { opacity: 0; transform: rotate(18deg) translateX(-260%); }
}
@keyframes jt-pack-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (max-width: 560px) {
  .jt-aim-packs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Motion is decoration here — the tier accent and tick carry the meaning. */
@media (prefers-reduced-motion: reduce) {
  .jt-aim-pack,
  .jt-aim-pack:hover { transition: none; transform: none; }
  .jt-aim-pack-sheen { display: none; }
  .jt-aim-pack.selected::after { animation: none; }
}


/* The pack's real charge on the selected term, under the list-rate offer.
   Quiet by design — the offer line above stays the headline. */
.jt-aim-term {
  margin: 4px 0 0;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: #1d71b8;
  font-variant-numeric: tabular-nums;
}
.jt-aim-term:empty { display: none; }

/* Add-on chip rows reuse .jt-aim-pack wholesale — same tier accent, same
   selected state. Only the surrounding copy is new. */
.jt-addon-row { margin-bottom: 14px; }

.jt-addon-note {
  margin: 6px 0 0;
  text-align: center;
  font-size: .72rem;
  color: #5a6880;
}

/* ── Add-on comparison modal ───────────────────────────────────────────────
   Reuses .jt-ai-modal's shell and the .jt-aim-pack chips. The table is the
   point: a price ladder without visible differences reads as arbitrary. */
.jt-addon-card + .jt-addon-card { margin-top: 10px; }

.jt-addon-compare-wrap {
  margin: 14px 0 4px;
  overflow-x: auto;              /* narrow screens scroll the table, not the page */
}

.jt-addon-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  /* Fixed layout so every value column is the same width and sits directly
     under its tier heading. Auto layout sized columns to their content, which
     left the numbers drifting away from the headers above them. */
  table-layout: fixed;
}

/* The row-label column: wide enough to read, narrow enough to leave the
   tiers evenly spaced. */
.jt-addon-compare th:first-child,
.jt-addon-compare td:first-child {
  width: 38%;
}

.jt-addon-compare th,
.jt-addon-compare td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(15, 26, 44, .08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jt-addon-compare thead th {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a6880;
  border-bottom-width: 2px;
}

/* Row labels sit left; the numbers they compare stay centred. */
.jt-addon-compare tbody th {
  text-align: start;
  font-weight: 600;
  color: #5a6880;
  white-space: normal;
}

.jt-addon-compare-price td { font-weight: 800; color: #101b30; }

/* The column you are buying — tinted top to bottom so it reads as one
   column rather than three separately shaded cells. */
.jt-addon-compare [data-addon-col].chosen {
  background: rgba(29, 113, 184, .1);
  color: #0f2947;
  font-weight: 700;
}
.jt-addon-compare thead th[data-addon-col].chosen {
  color: #1d71b8;
  border-top: 2px solid #1d71b8;
  border-radius: 8px 8px 0 0;
}
.jt-addon-compare tbody tr:last-child [data-addon-col].chosen {
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 -2px 0 #1d71b8;
}

@media (prefers-reduced-motion: reduce) {
  .jt-addon-card { transition: none; }
}

/* Wizard footer inside the add-on modal. */
.jt-addon-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 26, 44, .1);
}

.jt-addon-progress {
  font-size: .74rem;
  font-weight: 700;
  color: #5a6880;
  font-variant-numeric: tabular-nums;
}

.jt-addon-nav-btns { display: flex; gap: 8px; }

.jt-addon-nav-btns .jt-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ============================================================================
   Checkout on small screens
   ----------------------------------------------------------------------------
   Three separate causes of the same symptom — a row that cannot fit and will
   not wrap, so something gets crushed or pushed off-screen:

   1. .jt-ai-card is a flex ROW whose price is `white-space: nowrap` and whose
      button is `flex-shrink: 0`. The description has `min-width: 0`, so it is
      the only thing that can give — it collapsed to a ~50px column rendering
      one word per line.
   2. .jt-cfg-head never wraps, so the step title + value + Edit button pushed
      past the viewport. That is what clipped "Edit" and made the whole PAGE
      scroll sideways.
   3. .jt-addon-nav uses space-between across four children with no wrap, which
      squeezed the "1 / 2" progress text vertically and cut off the primary
      button.

   Fixed by letting each row wrap and giving the pieces sane basis widths,
   rather than by shrinking fonts.
   ========================================================================== */
@media (max-width: 640px) {
  /* Nothing in the funnel may cause a horizontal scrollbar. */
  .jt-funnel { overflow-x: hidden; }

  /* --- step header: title on one line, value + Edit on the next --- */
  .jt-cfg-head { flex-wrap: wrap; row-gap: 8px; }
  .jt-cfg-step { flex: 1 1 100%; min-width: 0; }
  .jt-cfg-value {
    flex: 1 1 auto;
    text-align: start;      /* wrapped onto its own line, start-aligned reads better */
    white-space: normal;    /* let the plan name breathe instead of ellipsing */
    overflow: visible;
  }
  .jt-cfg-edit { flex: 0 0 auto; }

  /* --- AI upsell card: stack, full-width button --- */
  .jt-ai-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: start;
  }
  .jt-ai-main { flex: 1 1 auto; min-width: 0; }
  .jt-ai-main small { font-size: .82rem; }
  .jt-ai-price { white-space: nowrap; font-size: 1.05rem; }
  .jt-ai-view {
    width: 100%;
    text-align: center;
    padding: 12px 18px;     /* a comfortable tap target once it spans the card */
  }

  /* --- wizard footer inside the add-on modal --- */
  .jt-addon-nav {
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
  }
  .jt-addon-progress {
    flex: 1 1 100%;
    text-align: center;
    white-space: nowrap;    /* stops "1 / 2" stacking one character per line */
  }
  .jt-addon-nav-btns {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .jt-addon-nav-btns .jt-btn { flex: 1 1 auto; white-space: nowrap; }
  /* The confirm action is the one people reach for — give it the full row. */
  .jt-addon-nav-btns .jt-btn-primary { flex: 1 1 100%; order: -1; }
}

@media (max-width: 400px) {
  /* Very narrow: let the three footer buttons each own a row rather than
     shrinking their labels into ellipses. */
  .jt-addon-nav-btns .jt-btn { flex: 1 1 100%; }
}

/* The `hidden` ATTRIBUTE only works if no author rule sets display. These all
   do (.jt-btn is inline-flex, .jt-ai-card and .jt-addon-pane are flex/block),
   so `el.hidden = true` in JS was silently ignored — the wizard's Back button
   stayed on screen and the step-4 agent card showed even with AI switched off.
   Same failure the .jt-paymode rule above was added for; keep them together. */
.jt-funnel .jt-btn[hidden],
.jt-ai-card[hidden],
.jt-addon-pane[hidden],
.jt-agent-needs-ai[hidden] { display: none !important; }

/* ── Renewal mode ──────────────────────────────────────────────────────────
   A renewing customer sees one card; the configurator stays on the page but
   collapsed until they ask to change something. */
.jt-config-collapsed { display: none; }
.jt-renewcard {
  max-width: 560px; margin: 0 auto 28px; padding: 30px 32px;
  background: #fff; border: 1px solid #e3e8f0; border-radius: var(--jt-radius-lg, 24px);
  box-shadow: 0 0 60px rgba(11, 187, 239, 0.10), 0 18px 40px rgba(16, 27, 48, .08);
  text-align: center;
}
.jt-renewcard-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #1d71b8; margin-bottom: 8px;
}
.jt-renewcard-title { font-size: 1.6rem; font-weight: 800; color: #101b30; margin: 0 0 6px; }
.jt-renewcard-sub { color: #5a6880; font-size: .9rem; margin: 0 0 18px; }
.jt-renewcard-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jt-renewcard-note { color: #7a8aa0; font-size: .78rem; margin: 14px 0 0; }
.jt-btn-link {
  background: none; border: 0; color: #1d71b8; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* ═══ "My subscription" — the renew-flow landing panel ═══════════════════
   Reached from the renewal email and the portal's My Subscription tile.
   A renewing customer wants three answers: what am I on, when does it end,
   and does it renew itself. Those get the whole panel; the catalogue stays
   collapsed behind the upgrade button until it is actually asked for. */
.jt-head-tight { margin-bottom: 18px; }
.jt-head-tight h1 { margin: 0; }

.jt-mysub {
  max-width: 660px; margin: 0 auto 26px; background: var(--jt-card);
  border: 1px solid var(--jt-border); border-radius: var(--jt-radius-lg);
  padding: 30px 32px;
  box-shadow: 0 0 60px rgba(11, 187, 239, 0.10), 0 18px 44px rgba(15, 26, 44, 0.07);
}
.jt-mysub.is-expired { border-color: rgba(226, 102, 79, 0.45); }

.jt-mysub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.jt-mysub-eyebrow {
  display: block; font-size: .70rem; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--jt-dim); margin-bottom: 6px;
}
.jt-mysub-plan { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.jt-mysub-meta { margin: 8px 0 0; color: var(--jt-dim); font-size: .92rem; }
.jt-mysub-price { color: var(--jt-text); font-weight: 800; font-size: 1.05rem; }
.jt-mysub-per { font-size: .82rem; }
.jt-mysub-dot { margin: 0 6px; opacity: .6; }

.jt-mysub-pill {
  flex: none; padding: 5px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.jt-mysub-pill.active  { background: #e3f5ea; color: #1d7a45; }
.jt-mysub-pill.trial   { background: #eef7fd; color: #1d71b8; }
.jt-mysub-pill.expired { background: #fdecea; color: #a03c28; }

/* Time remaining, against a 365-day full bar — the widest cycle sold. */
.jt-mysub-bar {
  height: 8px; border-radius: 999px; background: rgba(15, 26, 44, 0.08);
  margin: 18px 0 7px; overflow: hidden;
}
.jt-mysub-bar > span {
  display: block; height: 100%; border-radius: 999px; background: var(--jt-grad);
  box-shadow: 0 0 12px rgba(11, 187, 239, 0.5);
}
.jt-mysub-days { margin: 0; color: var(--jt-dim); font-size: .82rem; }

.jt-mysub-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--jt-border); }
.jt-mysub-block-head { display: flex; align-items: center; gap: 10px; }
.jt-mysub-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jt-dim);
}
.jt-mysub-state { font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.jt-mysub-state.on     { background: #e3f5ea; color: #1d7a45; }
.jt-mysub-state.off    { background: rgba(15, 26, 44, 0.06); color: var(--jt-dim); }
.jt-mysub-state.paused { background: #fdf3e0; color: #9a6a12; }
/* Signup lock: shown while the tenant is being created, so the page cannot be
   submitted twice. Covers the viewport rather than only disabling the button —
   a disabled button still reads as "nothing happened". */
.jt-lock {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 26, 44, 0.55); backdrop-filter: blur(2px);
}
.jt-lock[hidden] { display: none; }
.jt-lock-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border-radius: 16px; padding: 26px 30px; max-width: 320px;
  text-align: center; box-shadow: 0 18px 50px rgba(15, 26, 44, 0.28);
}
.jt-lock-card strong { font-size: .98rem; }
.jt-lock-card span:last-child { font-size: .82rem; color: var(--jt-dim); line-height: 1.5; }
.jt-spinner {
  display: inline-block; width: 15px; height: 15px; margin-inline-end: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  border-radius: 50%; animation: jt-spin 0.7s linear infinite; vertical-align: -2px;
}
.jt-spinner-lg {
  width: 30px; height: 30px; margin: 0 0 4px; border-width: 3px;
  border-color: rgba(15, 26, 44, 0.14); border-top-color: #1d7ee0;
}
@keyframes jt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jt-spinner { animation-duration: 2.4s; } }
.jt-btn-busy { display: inline-flex; align-items: center; justify-content: center; }
#jt-start-submit[disabled] { opacity: .82; cursor: progress; }

/* Payment history: a quiet ledger, not a feature. Rows stay legible when the
   description is long (it carries the whole basket) by truncating that column
   only — the date and the amount are the parts people scan for. */
.jt-paylist { list-style: none; margin: 8px 0 0; padding: 0; }
.jt-payrow { display: flex; gap: 12px; align-items: center; justify-content: space-between;
             padding: 9px 0; border-bottom: 1px solid rgba(15, 26, 44, 0.07); }
.jt-payrow:last-child { border-bottom: 0; }
.jt-payrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jt-payrow-date { font-size: .8rem; font-weight: 700; }
.jt-payrow-desc { font-size: .76rem; color: var(--jt-dim); overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.jt-payrow-side { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.jt-payrow-status { font-size: .68rem; font-weight: 800; text-transform: uppercase;
                    letter-spacing: .03em; background: #fdf3e0; color: #9a6a12;
                    padding: 2px 7px; border-radius: 999px; }
.jt-payrow-status.bad { background: #fdecec; color: #a5342c; }
.jt-payrow-amount { font-size: .84rem; font-weight: 800; white-space: nowrap; }
.jt-payrow-invoice { font-size: .76rem; white-space: nowrap; }
.jt-paynav { display: flex; gap: 16px; justify-content: space-between; margin-top: 10px; font-size: .78rem; }
@media (max-width: 560px) {
  .jt-payrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .jt-payrow-desc { max-width: 100%; white-space: normal; }
}
/* Recurring-charge disclosure at the point of sale. Deliberately readable
   rather than fine print — a charge that repeats must not be a surprise. */
.jt-pay-recurring { margin: 10px 0 0; font-size: .84rem; line-height: 1.5; color: var(--jt-ink, #0f1a2c); background: #eef4ff; border: 1px solid #c9dbff; border-radius: 10px; padding: 10px 12px; }
/* Provider unreachable — deliberately not styled like "off", which would read
   as a settled answer when we simply do not know. */
.jt-mysub-state.unknown { background: rgba(15, 26, 44, 0.06); color: var(--jt-dim); font-style: italic; }
.jt-mysub-note { margin: 9px 0 13px; color: var(--jt-dim); font-size: .88rem; line-height: 1.55; }

/* Pills, like every other funnel button — the 12px rounded-rect versions of
   these were the only non-pill buttons in the whole journey. */
.jt-mysub-btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.jt-mysub-primary {
  background: var(--jt-grad); color: #fff; border: 0; font-weight: 700;
  padding: 12px 24px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 187, 239, 0.3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.jt-mysub-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(11, 187, 239, 0.42); }
.jt-mysub-ghost {
  background: #fff; color: var(--jt-text); border: 1px solid var(--jt-border);
  font-weight: 600; padding: 11px 20px; border-radius: 999px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.jt-mysub-ghost:hover { border-color: var(--jt-accent); color: var(--jt-accent); }
.jt-mysub-best { border-color: rgba(29, 122, 69, .45); color: #1d7a45; }
.jt-mysub-best:hover { border-color: #1d7a45; color: #1d7a45; }

.jt-mysub-more {
  width: 100%; margin-top: 22px; padding: 16px 18px; cursor: pointer;
  background: rgba(29, 113, 184, 0.06); border: 1px dashed rgba(29, 113, 184, 0.35);
  border-radius: var(--jt-radius, 16px); color: var(--jt-accent); text-align: center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.jt-mysub-more:hover {
  background: rgba(29, 113, 184, 0.10); border-style: solid;
  border-color: rgba(11, 187, 239, 0.55);
  box-shadow: 0 8px 24px rgba(11, 187, 239, 0.14);
}
.jt-mysub-more span { display: block; font-weight: 800; font-size: .98rem; }
.jt-mysub-more small { display: block; margin-top: 3px; color: var(--jt-dim); font-size: .8rem; }

/* Collapsed, not removed: the form still posts, and the sticky buy bar inside
   it must not float over a page whose plan grid is hidden. */
.jt-plans-collapsed { display: none; }

@media (max-width: 560px) {
  .jt-mysub { padding: 22px 18px; border-radius: 18px; }
  .jt-mysub-top { flex-direction: column; }
  .jt-mysub-plan { font-size: 1.3rem; }
  .jt-mysub-btnrow > .jt-btn { flex: 1 1 100%; }
}

/* ═══ Plan studio (Subscribe upgrade view) ════════════════════════════════
   Master–detail replacement for the tier-card wall: family rail on the
   start side, AI-level chips + one live edition panel on the other. */
.jt-studio {
    display: grid; grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px; max-width: 1020px; margin: 0 auto 26px; align-items: start;
    text-align: start;
}
.jt-studio-step {
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #8b96aa; margin-bottom: 12px;
}
[dir="rtl"] .jt-studio-step { letter-spacing: 0; }

/* — family rail — */
.jt-studio-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 18px; }
.jt-fam {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; text-align: start; cursor: pointer;
    background: #fff; border: 1.5px solid rgba(15, 26, 44, 0.10); border-radius: 16px;
    font: inherit; color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jt-fam:hover { border-color: rgba(11, 187, 239, 0.45); transform: translateX(2px); }
[dir="rtl"] .jt-fam:hover { transform: translateX(-2px); }
.jt-fam.active {
    border-color: #0bbbef;
    box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.14), 0 10px 26px rgba(11, 187, 239, 0.16);
}
.jt-fam:focus-visible { outline: 2px solid #0bbbef; outline-offset: 2px; }
.jt-fam-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jt-fam-name { font-weight: 800; font-size: .98rem; color: #101b30; }
.jt-fam.active .jt-fam-name { color: #1d71b8; }
.jt-fam-cap { font-size: .76rem; color: #5a6880; }
.jt-fam-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.jt-fam-from { font-size: .8rem; font-weight: 800; color: #1d71b8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jt-fam-from small { font-weight: 600; color: #5a6880; }
.jt-fam-badge {
    font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #fff; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
[dir="rtl"] .jt-fam-badge { letter-spacing: 0; }
.jt-fam-badge.pop { background: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #164194 100%); }
.jt-fam-badge.yours { background: linear-gradient(100deg, #2fbf71, #23a55a); }

/* — detail panel — */
.jt-studio-detail {
    background: #fff; border: 1px solid rgba(15, 26, 44, 0.10);
    border-radius: var(--jt-radius-lg, 24px); padding: 26px 28px;
    box-shadow: 0 0 50px rgba(11, 187, 239, 0.08), 0 14px 40px rgba(15, 26, 44, 0.07);
}
.jt-pack-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.jt-pack-chip {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 16px; cursor: pointer; font: inherit; text-align: start;
    background: #fff; border: 1.5px solid rgba(15, 26, 44, 0.12); border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jt-pack-chip:hover { border-color: rgba(11, 187, 239, 0.5); transform: translateY(-2px); }
.jt-pack-chip:focus-visible { outline: 2px solid #0bbbef; outline-offset: 2px; }
.jt-pack-chip.active {
    border-color: #0bbbef;
    box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.15), 0 10px 24px rgba(11, 187, 239, 0.18);
}
.jt-pack-chip-n { font-size: .82rem; font-weight: 800; color: #101b30; }
.jt-pack-chip.ai .jt-pack-chip-n { color: #164194; }
.jt-pack-chip.active .jt-pack-chip-n { color: #1d71b8; }
.jt-pack-chip-p { font-size: .92rem; font-weight: 800; color: #1d71b8; font-variant-numeric: tabular-nums; }
.jt-pack-chip-p small { font-size: .68rem; font-weight: 600; color: #5a6880; }
.jt-pack-chip.current { border-color: rgba(35, 165, 90, 0.5); }
.jt-pack-chip.current.active {
    border-color: #23a55a;
    box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.15), 0 10px 24px rgba(35, 165, 90, 0.16);
}
.jt-pack-chip-tag {
    position: absolute; top: -9px; inset-inline-end: 10px;
    font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; padding: 2px 8px; border-radius: 999px;
    background: linear-gradient(100deg, #2fbf71, #23a55a); white-space: nowrap;
}
[dir="rtl"] .jt-pack-chip-tag { letter-spacing: 0; }

/* — edition hero + features — */
.jt-ed { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(15, 26, 44, 0.08); }
.jt-ed-hero {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.jt-ed-name {
    font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--jt-accent, #1d71b8);
}
[dir="rtl"] .jt-ed-name { letter-spacing: 0; }
.jt-ed-price {
    margin-top: 6px; font-size: 2.3rem; font-weight: 800; color: #101b30;
    letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.jt-ed-price small { font-size: .85rem; font-weight: 600; color: #5a6880; letter-spacing: 0; }
.jt-ed-hero .jt-upgrade-price { margin: 0; font-size: .95rem; padding: 8px 16px; }
/* long feature lists read as two magazine columns instead of one deep well */
.jt-ed-feats { columns: 2; column-gap: 28px; display: block; margin-top: 12px; }
.jt-ed-feats li { break-inside: avoid; margin-bottom: 9px; }
.jt-ed .jt-renew-row { max-width: 420px; }

/* buy bar can be hidden while the current plan is in the detail panel;
   [hidden] must beat its author display (same trap as .jt-paymode). */
.jt-buybar[hidden] { display: none !important; }

@media (max-width: 980px) {
    .jt-studio { grid-template-columns: minmax(0, 1fr); }
    /* rail becomes a horizontal shelf above the detail panel */
    .jt-studio-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .jt-studio-rail .jt-studio-step { display: none; }
    .jt-fam { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px; }
    .jt-fam-side { align-items: flex-start; }
    .jt-ed-feats { columns: 1; }
}

/* — dark theme — */
body.lpx-theme-dark .jt-studio-step { color: #7f8aa0; }
body.lpx-theme-dark .jt-fam,
body.lpx-theme-dark .jt-pack-chip {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.12);
}
body.lpx-theme-dark .jt-fam-name,
body.lpx-theme-dark .jt-pack-chip-n { color: #e6ecf7; }
body.lpx-theme-dark .jt-fam.active .jt-fam-name,
body.lpx-theme-dark .jt-pack-chip.active .jt-pack-chip-n,
body.lpx-theme-dark .jt-pack-chip.ai .jt-pack-chip-n { color: #38d4ff; }
body.lpx-theme-dark .jt-fam-cap { color: #93a0b8; }
body.lpx-theme-dark .jt-fam-from,
body.lpx-theme-dark .jt-pack-chip-p { color: #38d4ff; }
body.lpx-theme-dark .jt-fam-from small,
body.lpx-theme-dark .jt-pack-chip-p small { color: #93a0b8; }
body.lpx-theme-dark .jt-studio-detail {
    background: #121b2e; border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
body.lpx-theme-dark .jt-ed { border-top-color: rgba(255, 255, 255, 0.08); }
body.lpx-theme-dark .jt-ed-name { color: #38d4ff; }
body.lpx-theme-dark .jt-ed-price { color: #e6ecf7; }
body.lpx-theme-dark .jt-ed-price small { color: #93a0b8; }

/* ── studio step 3: fleet agent add-on ── */
.jt-studio-agent { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(15, 26, 44, 0.08); }
.jt-agent-now { margin: -4px 0 12px; font-size: .85rem; color: #5a6880; }
.jt-agent-chip[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.jt-agent-chip[disabled]:hover { border-color: rgba(15, 26, 44, 0.12); transform: none; }
.jt-agent-chip.current[disabled] { opacity: 1; } /* owned tier stays legible */
.jt-agent-delta {
    font-size: .68rem; font-weight: 800; color: #14713d;
    background: rgba(35, 165, 90, 0.10); border: 1px solid rgba(35, 165, 90, 0.3);
    padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
body.lpx-theme-dark .jt-studio-agent { border-top-color: rgba(255, 255, 255, 0.08); }
body.lpx-theme-dark .jt-agent-now { color: #93a0b8; }
body.lpx-theme-dark .jt-agent-delta {
    background: rgba(35, 165, 90, 0.15); border-color: rgba(35, 165, 90, 0.45); color: #7ad9a3;
}

/* agent step: explainer + per-chip quota rows */
.jt-agent-help {
    margin: -4px 0 6px; font-size: .88rem; color: #35455c; line-height: 1.55;
    max-width: 60ch;
}
.jt-agent-q {
    font-size: .68rem; font-weight: 600; color: #5a6880;
    font-variant-numeric: tabular-nums; line-height: 1.35;
}
.jt-agent-chip { max-width: 200px; }
.jt-agent-chip .jt-agent-delta { margin-top: 4px; }
body.lpx-theme-dark .jt-agent-help { color: #b7c2d6; }
body.lpx-theme-dark .jt-agent-q { color: #93a0b8; }