/* 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(600px 380px at 18% 0%, rgba(11, 187, 239, 0.10), transparent 65%),
    radial-gradient(700px 420px at 82% 8%, rgba(77, 132, 226, 0.12), transparent 65%),
    var(--jt-bg);
  border-radius: var(--jt-radius-lg);
  padding: 56px 24px 72px;
  margin: 12px auto 40px;
  max-width: 1080px;
}

.jt-funnel .jt-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.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);
}
.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; }
.jt-funnel .jt-controls { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; }
.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, .jt-funnel .jt-controls { 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 16px;
    align-items: center;
    max-width: 780px;
    margin: 0 auto 26px;
    padding: 18px 22px;
    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: 18px;
    text-align: start;
}
.jt-current-expired {
    background: rgba(214, 69, 69, 0.06);
    border-color: rgba(214, 69, 69, 0.35);
}
.jt-current-icon { font-size: 1.7rem; line-height: 1; }
.jt-current-title { font-size: 1.02rem; 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; }
}

/* ---- 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;
}