/* ==========================================================================
   JERS — DESIGN SYSTEM TOKENS & UTILITIES
   ---------------------------------------------------------------------------
     · Warm canvas neutrals                   (#fffefb / #f8f4f0)
     · Deep coffee ink tones                  (#201515 family)
     · JERS crimson chromatic accent
     · Standardized border radiuses, typography scales, and responsive layout
   ========================================================================== */

:root {
  /* ---- Ink ladder: coffee-warm darks, never pure black ---------------- */
  --bg-pitch:            #140d0c;
  --bg-surface-1:        #1b1312;
  --bg-surface:          #1b1312;
  --bg-surface-2:        #221817;
  --bg-surface-3:        #2c201e;
  --bg-surface-elevated: #362725;

  /* ---- Warm paper ------------------------------------------------------ */
  --cream-bg:           #fffefb;
  --cream-card:         #ffffff;
  --cream-surface:      #f8f4f0;
  --cream-border:       rgba(32, 21, 21, 0.12);
  --cream-border-hover: rgba(255, 23, 61, 0.42);
  --cream-text-dark:    #201515;
  --cream-text-muted:   #605d52;
  --cream-text-dim:     #939084;

  /* ---- The single accent (red stays the brand) ------------------------- */
  --red-primary: #ff173d;
  --red-hover:   #ff3355;
  --red-dark:    #c00024;
  --red-deep:    #7a0014;

  /* ---- Warm text on ink ------------------------------------------------ */
  --text-white:    #fffefb;
  --text-platinum: #f7f1ec;
  --text-muted:    #b9a9a3;
  --text-dim:      #8b7a74;

  /* ---- Hairlines carry the same warmth --------------------------------- */
  --border-glass:       rgba(255, 250, 246, 0.09);
  --border-glass-hover: rgba(255, 250, 246, 0.20);
  --hairline:           rgba(255, 250, 246, 0.11);
  --hairline-ink:       rgba(32, 21, 21, 0.12);

  /* ---- Type: display face for hero scale, Inter for everything else ----- */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ---- Geometry — Crisp, sharp institutional edges (Fintech/Terminal standard) ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 10px;
  --radius-pill: 4px;

  /* ---- 4px spacing ladder ---------------------------------------------- */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 24px; --sp-2xl: 32px; --sp-3xl: 48px; --sp-4xl: 64px;

  --max-width: 1280px;
}

/* ==========================================================================
   TYPE — sentence case, tight display, Inter body
   ========================================================================== */
body { font-family: var(--font-body); letter-spacing: -0.005em; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -0.022em; }
h4 { font-size: 1.25rem; letter-spacing: -0.018em; }

p { text-wrap: pretty; }

.eyebrow {
  display: none !important;
}

.section-header .badge-pill,
.section-header .eyebrow,
.hero-badge-wrap,
.section-resilience-paper .badge-pill {
  display: none !important;
}

/* ==========================================================================
   CHROME — buttons, badges, cards all land on crisp 6px-8px radius
   ========================================================================== */
.btn { border-radius: 6px; font-weight: 600; letter-spacing: -0.01em; }
.btn-sm { border-radius: 4px; }
.badge-pill, .nav-badge-new, .media-tag, .popular-badge,
.status-badge, .course-cover-tag {
  border-radius: 4px !important;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.card-glass, .cream-card, .feature-card, .pricing-card, .course-card,
.terminal-window, .media, .indicator-slide-card, .legal-card,
.contact-form-box, .contact-channel-card, .rr-calc-card, .note-box,
.accordion-item, .market-tile, .mosaic-item {
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.form-control, .rr-range-input { border-radius: var(--radius-sm) !important; }

/* ==========================================================================
   BANDS — the alternating canvas / canvas-soft / ink rhythm
   ========================================================================== */
.section { padding-block: clamp(56px, 8vw, 104px); }

.section-paper {
  background: var(--cream-bg);
  color: var(--cream-text-dark);
}
.section-paper-soft {
  background: var(--cream-surface);
  color: var(--cream-text-dark);
}
.section-paper h1, .section-paper h2, .section-paper h3, .section-paper h4,
.section-paper-soft h1, .section-paper-soft h2, .section-paper-soft h3, .section-paper-soft h4 {
  color: var(--cream-text-dark);
}
.section-paper p, .section-paper-soft p { color: var(--cream-text-muted); }

.section-paper .section-header p,
.section-paper-soft .section-header p { color: var(--cream-text-muted); }

.section-paper .badge-pill,
.section-paper-soft .badge-pill {
  background: rgba(32, 21, 21, 0.05);
  border-color: var(--cream-border);
  color: var(--cream-text-dark);
}

/* ==========================================================================
   1. WHO IS JERS — the opening statement band
   ========================================================================== */
.jers-band { position: relative; overflow: hidden; }

.jers-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.jers-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-primary);
  margin-bottom: var(--sp-xl);
}
.jers-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--red-primary), transparent);
  max-width: 180px;
}

.jers-statement {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.026em;
  color: var(--text-white);
  margin-bottom: var(--sp-xl);
}
.jers-statement em {
  font-style: normal;
  color: var(--red-primary);
}

.jers-copy {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 62ch;
}
.jers-copy + .jers-copy { margin-top: var(--sp-lg); }
.jers-copy strong { color: var(--text-platinum); font-weight: 600; }

/* The two lines Jers actually says. Big, quiet, ink-on-paper. */
.jers-quotes { display: grid; gap: var(--sp-lg); margin-top: var(--sp-2xl); }

.jers-quote {
  position: relative;
  padding: var(--sp-xl) var(--sp-xl) var(--sp-xl) 34px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--text-white);
}
.jers-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--red-primary);
}
.jers-quote span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Right column: the credential stack */
.jers-facts {
  display: grid;
  gap: 1px;
  background: var(--border-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
}
.jers-fact {
  background: var(--bg-surface-1);
  padding: var(--sp-xl);
  display: grid;
  gap: 6px;
}
.jers-fact-val {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}
.jers-fact-val .u {
  color: var(--red-primary);
}
.jers-fact-label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   2. SUPPLY & DEMAND EXPLAINER — sticky diagram, scrolling steps
   ========================================================================== */
.sd-explainer {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.sd-sticky {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.sd-figure {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 1px 2px rgba(32, 21, 21, 0.05), 0 18px 44px -28px rgba(32, 21, 21, 0.4);
}
.sd-figure img, .sd-figure svg { width: 100%; height: auto; display: block; border-radius: 6px; }

.sd-figure-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 4px;
  font-size: 0.8125rem;
  color: var(--cream-text-dim);
}
.sd-figure-cap b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-dark);
}

/* Swapping figures: only one is shown, the rest are stacked underneath. */
.sd-figure-stack { position: relative; }
.sd-figure-stack > .sd-figure { transition: opacity .45s ease, transform .45s ease; }
.sd-figure-stack > .sd-figure:not(:first-child) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.sd-figure-stack > .sd-figure.is-active { opacity: 1; pointer-events: auto; }

/* The steps are a sticky stack: each card parks under the navbar, a few
   pixels lower than the one before it, and the next card slides up over it.
   That is the motion itself — no fade needed, and the reader always keeps the
   edge of the previous step in view for context. */
.sd-steps {
  display: grid;
  gap: 18px;
  --stack-top: calc(var(--nav-height) + 22px);
  --stack-step: 14px;
}

.sd-step {
  position: relative;
  padding: var(--sp-xl) var(--sp-xl) var(--sp-xl) 68px;
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(32, 21, 21, 0.04), 0 18px 40px -30px rgba(32, 21, 21, 0.45);
  transition: border-color .35s ease, box-shadow .35s ease;
}

@media (min-width: 1025px) {
  .sd-step {
    position: sticky;
    top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
    /* Later cards paint over earlier ones as they arrive. */
    z-index: calc(1 + var(--i, 0));
  }
}

.sd-step.is-active {
  border-color: rgba(32, 21, 21, 0.2);
  box-shadow: 0 1px 2px rgba(32, 21, 21, 0.05), 0 26px 54px -28px rgba(32, 21, 21, 0.5);
}

.sd-step-num {
  position: absolute;
  left: var(--sp-xl);
  top: var(--sp-xl);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(32, 21, 21, 0.08);
  color: var(--cream-text-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background .35s ease, color .35s ease;
}
.sd-step.is-active .sd-step-num { background: var(--red-primary); color: #fff; }

.sd-step h3 {
  font-size: 1.1875rem;
  line-height: 1.24;
  color: var(--cream-text-dark);
  margin-bottom: 8px;
}
.sd-step p {
  font-size: 0.9688rem;
  line-height: 1.65;
  color: var(--cream-text-muted);
  margin: 0;
}
.sd-step p + p { margin-top: 10px; }

/* ==========================================================================
   3. THE FOUR PATTERNS — a horizontal rail driven by vertical scroll
   ========================================================================== */
/* ---- The carousel head: counter on the left, arrows on the right ------ */
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

.rail-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--cream-text-dim);
}
.rail-count b { font-size: 1.125rem; font-weight: 700; color: var(--red-primary); }
.rail-count em { font-style: normal; }

.rail-nav { display: flex; gap: 10px; }

.rail-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--cream-text-dark);
  background: transparent;
  color: var(--cream-text-dark);
  cursor: pointer;
  transition: background .28s ease, color .28s ease, border-color .28s ease, opacity .28s ease;
}
.rail-btn:hover:not(:disabled) {
  background: var(--cream-text-dark);
  color: var(--cream-bg);
}
.rail-btn:active:not(:disabled) { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }
.rail-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.rail-btn svg { display: block; }

/* ---- The track -------------------------------------------------------- */
.rail-viewport { position: relative; overflow: hidden; }
.rail-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  outline: none;
}
.rail-card {
  flex: 0 0 min(560px, 82vw);
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rail-card img { width: 100%; height: auto; display: block; }
.rail-card-body { padding: var(--sp-xl); }
.rail-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.rail-card-tag.is-demand { background: rgba(15, 157, 99, 0.14); color: #0b7a4d; }
.rail-card-tag.is-supply { background: rgba(216, 31, 58, 0.12); color: #b0152c; }
.rail-card-tag.is-cta    { background: rgba(255, 23, 61, 0.12); color: var(--red-dark); }
.rail-card h3 { font-size: 1.3125rem; color: var(--cream-text-dark); margin-bottom: 10px; }
.rail-card p { font-size: 0.9688rem; line-height: 1.62; color: var(--cream-text-muted); margin: 0; }

/* The last card is the way in, so it is set apart and fills its own height. */
.rail-card.is-cta {
  background: var(--cream-text-dark);
  border-color: var(--cream-text-dark);
  justify-content: center;
}
.rail-card.is-cta .rail-card-body { padding: clamp(28px, 4vw, 44px); }
.rail-card.is-cta h3 { color: var(--text-white); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rail-card.is-cta p { color: var(--text-muted); }
.rail-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-xl);
}

.rail-progress {
  height: 3px;
  border-radius: 3px;
  background: rgba(32, 21, 21, 0.1);
  margin-top: var(--sp-2xl);
  overflow: hidden;
}
.rail-progress span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--red-primary);
  transition: width .6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   4. RULE GRID + MISTAKES
   ========================================================================== */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--cream-border);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rule-cell {
  background: var(--cream-card);
  padding: var(--sp-xl);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: background .3s ease;
}
.rule-cell:hover { background: var(--cream-surface); }
.rule-cell-idx {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red-primary);
}
.rule-cell h4 { color: var(--cream-text-dark); line-height: 1.22; }
.rule-cell p { font-size: 0.9375rem; line-height: 1.62; color: var(--cream-text-muted); margin: 0; }

.miss-list { display: grid; gap: 12px; }
.miss-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
}
.miss-item svg { margin-top: 2px; color: var(--red-primary); }
.miss-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-white);
  margin-bottom: 4px;
}
.miss-item span { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }

/* ==========================================================================
   5. PLANS — the two memberships, verbatim inclusions
   ========================================================================== */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.plan-card {
  position: relative;
  background: var(--cream-card);
  border: 1px solid var(--cream-text-dark);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}
.plan-card.is-featured {
  background: var(--cream-text-dark);
  border-color: var(--cream-text-dark);
  color: var(--text-white);
}

.plan-flag {
  position: absolute;
  top: -13px; left: clamp(24px, 3vw, 36px);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--red-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.026em;
  color: var(--cream-text-dark);
}
.plan-card.is-featured .plan-name { color: var(--text-white); }

.plan-sub { font-size: 0.9375rem; line-height: 1.55; color: var(--cream-text-muted); margin-top: 6px; }
.plan-card.is-featured .plan-sub { color: var(--text-muted); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  color: var(--cream-text-dark);
}
.plan-card.is-featured .plan-price { color: var(--text-white); }
.plan-price .amt { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price .cur { font-size: 1.5rem; font-weight: 500; }
.plan-price .per {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cream-text-dim);
  margin-left: 4px;
}
.plan-card.is-featured .plan-price .per { color: var(--text-dim); }

.plan-includes { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.plan-includes li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--cream-border);
  font-size: 0.9688rem;
  line-height: 1.5;
  color: var(--cream-text-dark);
}
.plan-card.is-featured .plan-includes li {
  border-top-color: rgba(255, 254, 251, 0.14);
  color: var(--text-platinum);
}
.plan-includes li:first-child { border-top: 0; }
.plan-includes svg { margin-top: 2px; color: var(--red-primary); flex-shrink: 0; }

.plan-card .btn { margin-top: auto; }

/* ==========================================================================
   6. MARQUEE STRIP — the one-liner ticker
   ========================================================================== */
.strip {
  background: var(--red-primary);
  color: #fff;
  padding: 13px 0;
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, 0.14);
}
.strip-track {
  display: flex;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.strip-track span {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 48px;
}
.strip-track span::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   7. FOOTER LEGAL — the disclaimer, plainly set, at the very bottom
   ========================================================================== */
.footer-legal {
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: var(--sp-2xl);
  margin-bottom: var(--sp-2xl);
}
.footer-legal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-platinum);
  margin-bottom: var(--sp-lg);
}
.footer-legal-head svg { color: var(--red-primary); flex-shrink: 0; }

.footer-legal-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-xl);
}
.footer-legal-cols p {
  font-size: 0.8125rem;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0;
}
.footer-legal-cols p strong { color: var(--text-platinum); font-weight: 600; }

.footer-legal-fine {
  margin-top: var(--sp-xl);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.footer-legal-fine a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-fine a:hover { color: var(--red-primary); }

/* ==========================================================================
   8. ANIMATION BASE STATES
   ---------------------------------------------------------------------------
   Anything that animates in starts hidden ONLY when scripting is on and the
   motion layer has claimed the page (.js-motion on <html>). Without JS, or
   with reduced motion, every one of these renders at its final state.
   ========================================================================== */
.js-motion .anim-rise   { opacity: 0; transform: translateY(24px); }
.js-motion .anim-fade   { opacity: 0; }
.js-motion .anim-scale  { opacity: 0; transform: scale(0.96); }
.js-motion .anim-left   { opacity: 0; transform: translateX(-22px); }
.js-motion .anim-right  { opacity: 0; transform: translateX(22px); }

/* Motion safety: guarantees full visibility once triggered or timed out */
.motion-ready .anim-rise,
.motion-ready .anim-fade,
.motion-ready .anim-scale,
.motion-ready .anim-left,
.motion-ready .anim-right,
.motion-ready .reveal-on-scroll,
.motion-ready .reveal-up,
.anim-rise.revealed,
.anim-fade.revealed,
.anim-scale.revealed,
.anim-left.revealed,
.anim-right.revealed {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Split text: the per-character spans anime.js creates. */
.js-motion .anim-split .anim-char,
.js-motion .anim-split .anim-word,
.js-motion .anim-split .anim-char { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .anim-rise, .js-motion .anim-fade, .js-motion .anim-scale,
  .js-motion .anim-left, .js-motion .anim-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .strip-track, .rail-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Buttons that lean toward the cursor. */
/* Promoted only while the pointer is actually on it. */
.magnetic:hover, .magnetic:focus-visible { will-change: transform; }

/* Scroll progress rail across the very top of the page. */
.scroll-rail {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-rail span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red-primary));
  transform-origin: left center;
}

/* Cards that tilt very slightly toward the pointer. */
.tilt { transform-style: preserve-3d; }
.tilt:hover { will-change: transform; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .jers-grid { grid-template-columns: 1fr; }
  .sd-explainer { grid-template-columns: 1fr; }
  .sd-sticky { position: static; }
  .plan-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sd-step { padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) 58px; }
  .sd-step-num { left: var(--sp-lg); top: var(--sp-lg); }
  .rail-card { flex-basis: 84vw; }
  .jers-fact { padding: var(--sp-lg); }
}

/* ==========================================================================
   9. INLINE SVG DIAGRAMS — transform origins for the anime.js draw-in
   ---------------------------------------------------------------------------
   SVG children transform around the *viewport* origin by default, which sends
   a scaled candle flying off the chart. transform-box: fill-box re-roots each
   shape on its own bounding box, which is what makes a candle grow out of its
   own middle and a zone rectangle open from its left edge.
   ========================================================================== */
.sd-candle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.sd-zone > rect {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
.sd-label, .sd-leg, .sd-level {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ==========================================================================
   10. SPLIT TEXT — the per-word spans anime.text.split() creates
   ========================================================================== */
/* Deliberately NO will-change. A split headline makes one span per word and
   a split eyebrow one per character; promoting every one of them to its own
   compositor layer — permanently, for a tween that runs once — was the single
   biggest source of scroll jank on this page. */
.anim-word { display: inline-block; }

/* With no JS the headline is never split, so nothing here can hide it. */

/* The split headline wraps each word in its own inline-block span, which
   breaks a background-clip:text gradient set on an ancestor — the gradient
   box collapses and the word paints transparent. Re-apply it per word. */
.text-gradient-red .anim-word {
  background: linear-gradient(118deg, #ffffff 4%, #ff7289 46%, #ff173d 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-paper .text-gradient-red .anim-word,
.section-paper-soft .text-gradient-red .anim-word,
.section-cream .text-gradient-red .anim-word {
  background: linear-gradient(118deg, var(--red-dark) 6%, var(--red-primary) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Bold text inherits the platinum-on-ink colour from style.css, which is
   invisible on the paper bands. Re-ink it everywhere the ground is light. */
.section-paper strong, .section-paper b,
.section-paper-soft strong, .section-paper-soft b,
.legal-band strong, .legal-band b,
.sd-step strong, .rail-card strong, .rule-cell strong,
.plan-card:not(.is-featured) strong {
  color: var(--cream-text-dark);
  font-weight: 600;
}
.plan-card.is-featured strong { color: var(--text-white); }

/* Emphasis inside the hero-scale statement stays crimson. */
.section-paper em, .section-paper-soft em { color: var(--red-dark); font-style: normal; font-weight: 600; }

/* ==========================================================================
   11. FAQ — the accordion re-skinned for the paper bands
   ========================================================================== */
.section-paper .accordion-item,
.section-paper-soft .accordion-item {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
}
.section-paper .accordion-title,
.section-paper-soft .accordion-title {
  color: var(--cream-text-dark);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
}
.section-paper .module-number,
.section-paper-soft .module-number {
  background: rgba(32, 21, 21, 0.06);
  color: var(--red-dark);
  border-color: transparent;
}
.section-paper .accordion-icon,
.section-paper-soft .accordion-icon { color: var(--cream-text-dim); }

.section-paper .accordion-content,
.section-paper-soft .accordion-content { background: transparent; }

.faq-answer {
  padding: 2px 22px 22px 70px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cream-text-muted);
  margin: 0;
  max-width: 68ch;
}

@media (max-width: 640px) {
  .faq-answer { padding-left: 22px; }
}

/* ==========================================================================
   12. HERO TAPE — the live chart running behind the headline
   ---------------------------------------------------------------------------
   Masked hard toward the left, where the copy sits: the motion should be felt
   at the edge of vision and never compete with the headline for attention.
   ========================================================================== */
.hero-section { position: relative; isolation: isolate; }

.hero-tape {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0,0,0,0.3) 52%, #000 74%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0,0,0,0.3) 52%, #000 74%, #000 100%);
}
.hero-tape-canvas { display: block; width: 100%; height: 100%; }

/* The hero content sits above the tape. */
.hero-section .container { position: relative; z-index: 1; }

/* Compact inner-page heroes centre their copy, so the tape fades from both
   sides instead and sits fainter still. */
.hero-section-compact .hero-tape {
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.12) 34%, rgba(0,0,0,0.12) 66%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.12) 34%, rgba(0,0,0,0.12) 66%, #000 100%);
}

@media (max-width: 900px) {
  /* On a phone the copy spans the full width, so the tape drops back to a
     faint texture rather than something you read through. */
  .hero-tape {
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
  }
}

/* ==========================================================================
   13. WHAT GOES WRONG — a numbered wall rather than a long list
   ---------------------------------------------------------------------------
   The old version was a single tall column of seven rows, which read as an
   afterthought next to a heading. As a grid each failure gets equal weight,
   the numerals give the eye something to scan by, and the eighth cell turns
   the section into a route out instead of a list of ways to lose.
   ========================================================================== */
.wrong-band { position: relative; }

.section-header-wide { max-width: 720px; }

.wrong-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  margin-top: clamp(32px, 4vw, 52px);
  background: var(--border-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  overflow: hidden;
}

.wrong-card {
  position: relative;
  background: var(--bg-surface-1);
  padding: var(--sp-xl) var(--sp-xl) calc(var(--sp-xl) + 4px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  min-height: 196px;
  transition: background .35s ease;
  overflow: hidden;
}
.wrong-card:hover { background: var(--bg-surface-2); }

/* The numeral is set large and dim — a scanning aid, not a label. */
.wrong-card-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 250, 246, 0.26);
  transition: -webkit-text-stroke-color .35s ease, color .35s ease;
}
.wrong-card:hover .wrong-card-num {
  -webkit-text-stroke-color: var(--red-primary);
  color: rgba(255, 23, 61, 0.14);
}

.wrong-card-body { display: grid; gap: 8px; }

.wrong-card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--text-white);
}
.wrong-card-copy {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* A crimson rule sweeps in from the left on hover — the strike-through the
   section is about, without literally striking the text through. */
.wrong-card-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--red-primary), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.wrong-card:hover .wrong-card-rule { transform: scaleX(1); }

/* The way out. */
.wrong-card.is-cta {
  background: var(--red-deep);
  justify-content: space-between;
  gap: var(--sp-lg);
}
.wrong-card.is-cta:hover { background: #8d0018; }
.wrong-card.is-cta .wrong-card-title { color: #fff; }
.wrong-card.is-cta .wrong-card-copy { color: rgba(255, 254, 251, 0.82); }
.wrong-card.is-cta .btn { align-self: flex-start; }

@media (max-width: 640px) {
  .wrong-card { min-height: 0; padding: var(--sp-lg); }
  .wrong-card-num { font-size: 1.75rem; }
}

/* ==========================================================================
   14. STEP METER — the sticky column's second half
   ========================================================================== */
.sd-meter { margin-top: var(--sp-xl); }

.sd-meter-rail {
  height: 2px;
  border-radius: 2px;
  background: rgba(32, 21, 21, 0.10);
  overflow: hidden;
  margin-bottom: var(--sp-lg);
}
.sd-meter-rail span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 2px;
  background: var(--red-primary);
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-meter-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-meter-list li {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cream-border);
  transition: border-color .35s ease;
}
.sd-meter-list li b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cream-text-dim);
  transition: color .35s ease;
}
.sd-meter-list li span {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--cream-text-dim);
  transition: color .35s ease;
}
.sd-meter-list li.is-on { border-top-color: var(--red-primary); }
.sd-meter-list li.is-on b { color: var(--red-primary); }
.sd-meter-list li.is-on span { color: var(--cream-text-dark); font-weight: 600; }

@media (max-width: 1024px) {
  /* The sticky column stops being sticky below this width, so the meter has
     no state left to report — the steps themselves are the navigation. */
  .sd-meter { display: none; }
}

/* ==========================================================================
   15. HOVER & PRESS — the interactive layer
   ---------------------------------------------------------------------------
   Note on transforms: .magnetic buttons are driven by anime.js through inline
   transforms, so nothing here may animate `transform` on .btn itself or the
   two would fight and the magnet would win silently. The button's own motion
   is therefore carried by a sweep, a shadow and the icon — never a translate
   on the button box.
   ========================================================================== */

/* A light sweeps across the button on hover. .btn already sets
   position:relative, overflow:hidden and isolation:isolate, so a z-index:-1
   layer lands above the background and below the label. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.24) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

.btn .btn-icon-right {
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:not(.magnetic):hover .btn-icon-right { transform: translateX(5px); }

.btn:active { box-shadow: none; }

/* Secondary on a paper band needs ink chrome, not the dark-surface one. */
.section-paper .btn-secondary,
.section-paper-soft .btn-secondary,
.plan-card:not(.is-featured) .btn-secondary {
  background: var(--cream-text-dark);
  color: var(--text-white) !important;
  border-color: var(--cream-text-dark);
  backdrop-filter: none;
}
.section-paper .btn-secondary:hover,
.section-paper-soft .btn-secondary:hover,
.plan-card:not(.is-featured) .btn-secondary:hover {
  background: #3a2724;
  border-color: #3a2724;
  color: #fff !important;
}

/* ---- Cards ----------------------------------------------------------- */
.rule-cell, .rail-card, .plan-card, .jers-quote, .market-tile,
.feature-card, .cream-card, .contact-channel-card, .course-card {
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .4s ease,
              border-color .35s ease,
              background .35s ease;
}
.rail-card:hover, .plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(32, 21, 21, 0.05), 0 22px 48px -26px rgba(32, 21, 21, 0.45);
}
.jers-quote:hover { border-color: var(--red-border); }

.sd-step { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.sd-step:not(.is-active):hover { background: #f1ebe3; }

/* ---- Navigation ------------------------------------------------------ */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--red-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .34s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); transform-origin: left center; }

.footer-link { transition: color .25s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.footer-link:hover { transform: translateX(3px); }

.social-btn { transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease, border-color .3s ease, color .3s ease; }
.social-btn:hover { transform: translateY(-3px) rotate(-4deg); }

/* ---- Forms ----------------------------------------------------------- */
.form-control {
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-control:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px rgba(255, 23, 61, 0.16);
}

/* ---- Media ----------------------------------------------------------- */
.media img, .market-tile img { transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.market-tile:hover img, .mosaic-item:hover img { transform: scale(1.045); }

/* Nothing above may run for a reader who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn, .btn *, .rule-cell, .rail-card, .plan-card, .market-tile,
  .social-btn, .footer-link, .media img, .nav-link::after {
    transition: none !important;
    transform: none !important;
  }
}

/* Per-character spans from anime.text.split on the eyebrows. */
.anim-char { display: inline-block; }

/* ==========================================================================
   16. RESPONSIVE — touch targets and the narrow-screen layout
   ========================================================================== */

/* Anything a finger has to hit gets at least ~44px of height. Coarse
   pointers only, so the desktop layout keeps its tighter rhythm. */
@media (pointer: coarse) {
  .footer-link {
    padding-block: 9px;
    min-height: 40px;
    align-items: center;
  }
  .terminal-tab-btn {
    min-height: 36px;
    padding-inline: 14px;
  }
  .nav-link { padding-block: 10px; }
  .social-btn { min-width: 44px; min-height: 44px; }
  .footer-legal-fine a { display: inline-block; padding-block: 4px; }
}

@media (max-width: 1024px) {
  /* The two hero columns stack, so the tape sits behind both. */
  .hero-grid { gap: 36px; }
  .jers-facts { margin-top: 8px; }
  .sd-figure-stack { max-width: 720px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .wrong-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

@media (max-width: 760px) {
  .rail-track { gap: 16px; }
  .rail-card { flex-basis: min(420px, 86vw); }
  .rail-progress { margin-top: 18px; }
  .rail-btn { width: 44px; height: 44px; }
  .rail-cta-actions { display: grid; }
  .rail-cta-actions .btn { width: 100%; }

  .strip-track { gap: 32px; }
  .strip-track span { font-size: 0.8125rem; gap: 32px; }

  .plan-card { padding: 22px; }
  .plan-flag { left: 22px; }

  .sd-figure { padding: 6px; }
  .sd-figure-cap { padding: 10px 4px 2px; font-size: 0.75rem; }

  .jers-quote { font-size: 1.0625rem; padding: 18px 18px 18px 26px; }
  .jers-fact-val { font-size: 2rem; }

  .legal-cols, .footer-legal-cols { gap: 18px; }
}

@media (max-width: 480px) {
  .wrong-grid { grid-template-columns: 1fr; }
  .rule-grid { grid-template-columns: 1fr; }
  .hero-cta-group { display: grid; gap: 10px; }
  .hero-cta-group > .btn { width: 100%; }
  .wrong-card.is-cta .btn { width: 100%; }
}

/* The simulator's header groups are flex rows that refuse to shrink, so on a
   narrow phone they push a few pixels past the frame. Let each group scroll
   inside the terminal rather than widening it. */
.terminal-group {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.terminal-group::-webkit-scrollbar { display: none; }
.terminal-group > * { flex-shrink: 0; }

@media (max-width: 560px) {
  .terminal-header { flex-wrap: wrap; row-gap: 8px; padding-inline: 12px; }
  .terminal-header-wrap .terminal-group { width: 100%; }
  .terminal-footer { flex-wrap: wrap; row-gap: 6px; }
}

/* A sticky item in a grid is released once the bottom of its grid area comes
   within its own height — which, with a 500px-tall figure column, meant the
   chart started drifting up while the reader was still on the last step.
   Padding the text column extends the grid area past the final card, so the
   figure holds its position for the whole section and only leaves once the
   text has genuinely ended. */
@media (min-width: 1025px) {
    /* Trailing room so the finished stack holds while the last card is read,
     and so the figure column releases at the same moment the stack does. */
  .sd-steps { padding-bottom: clamp(140px, 20vh, 240px); }

  /* The band keeps a bottom padding of its own. Zeroing it made the grid row
     end exactly on the section boundary, so the sticky figure and its meter
     came to rest flush against the next band with no gap at all — which read
     as the two sections colliding. */
  #supply-demand { padding-bottom: clamp(48px, 6vw, 88px); }
}

/* ==========================================================================
   17. PERFORMANCE
   ---------------------------------------------------------------------------
   A profile at 4x CPU throttle put 41% of scroll frames over 32ms. Three
   causes, all of them self-inflicted:

     1. 243 elements carrying a permanent `will-change` — mostly the per-word
        and per-character spans the text splitter creates. Fixed at source,
        above: they animate once and never again, so promoting each to its own
        compositor layer for the life of the page bought nothing.

     2. backdrop-filter on surfaces that are always on screen. A fixed,
        full-width blurred bar re-reads and re-blurs its backdrop on every
        single scroll frame — by some distance the most expensive thing on
        this page. Narrowed below to the surfaces that actually need it.

     3. Cards stacked behind other cards still being painted. Handled with
        containment and visibility.
   ========================================================================== */

/* The navbar is fixed and permanently visible, so its blur is paid for on
   every frame. Half the radius, and no saturate() pass, is visually almost
   identical and roughly a third of the cost. */
.site-navbar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* These sit on opaque or near-opaque grounds, where the blur was doing no
   visible work at all. A slightly more solid fill replaces it. */
.btn-secondary {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(30, 22, 21, 0.86);
}
.media-tag, .course-cover-tag {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 6, 6, 0.78);
}
.card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-surface-2);
}

/* Only one supply/demand figure is on screen at a time, but all five are in
   the DOM — nearly 900 SVG nodes between them. The inactive ones skip paint.

   Deliberately `visibility`, not `content-visibility: hidden`: the latter
   skips layout as well, so every swap paid for a full re-layout of ~180 SVG
   nodes inside one frame. It improved the average frame and tripled the worst
   one. `visibility` keeps the layout and skips only the painting.

   The zero-duration visibility transition is the standard trick for fading
   something out and only then removing it from the paint tree. */
.sd-figure-stack > .sd-figure:not(.is-active) {
  visibility: hidden;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.sd-figure-stack > .sd-figure.is-active {
  visibility: visible;
  transition: opacity .45s ease, transform .45s ease, visibility 0s;
}

/* Containment stops a change inside one figure invalidating the others. */
.sd-figure { contain: layout paint; }

/* Cards buried under the stack are not worth painting either. */
@media (min-width: 1025px) {
  .sd-step { contain: layout paint style; }
}

/* The ticker and the indicator marquee run forever. Keeping them on the
   compositor is the whole point of promoting them, so those keep their
   will-change — but only while they are actually on screen. */
@media (prefers-reduced-motion: reduce) {
  .strip-track, .indicator-marquee-track, .rail-track { will-change: auto; }
}

/* ---- The ticker and the live dots, moved off the JS timeline ---------- */

/* The track holds two identical copies of the line-up, so translating it by
   exactly half resets invisibly and the loop is seamless. */
.strip-track {
  animation: jers-ticker 26s linear infinite;
}
@keyframes jers-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.pulse-dot, .status-dot {
  animation: jers-breathe 1.8s ease-in-out infinite;
}
/* Stagger them a little so they do not all beat in unison. */
.status-badge .pulse-dot { animation-delay: .22s; }
.footer-status .status-dot { animation-delay: .44s; }

@keyframes jers-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.45); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .strip-track, .pulse-dot, .status-dot { animation: none; }
}

/* ==========================================================================
   HERO DESCRIPTION & INLINE LINKS
   ========================================================================== */
.hero-description p {
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 1.04rem;
  line-height: 1.68;
}
.hero-description p:last-child {
  margin-bottom: 0;
}
.hero-desc-note {
  padding-top: 4px;
}
.hero-link-highlight {
  color: #ff3355;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.hero-link-highlight:hover {
  color: #ffffff;
}

/* ==========================================================================
   RESILIENCE & JOURNEY SECTION (EXACT PAPER SHADE #fffefb)
   ========================================================================== */
.text-red-solid {
  color: #ff173d !important;
  -webkit-text-fill-color: #ff173d !important;
  background: none !important;
  display: inline;
  font-weight: 800;
}

.section-resilience-paper {
  background: var(--cream-bg);
  color: var(--cream-text-dark);
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  padding-block: clamp(52px, 7vw, 92px);
  position: relative;
}

.section-resilience-paper h2 {
  color: var(--cream-text-dark);
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  margin-top: 12px;
  margin-bottom: 14px;
}

.resilience-lead-text {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--cream-text-muted);
  max-width: 780px;
  margin: 0 auto 36px auto;
}

.resilience-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}

@media (max-width: 991px) {
  .resilience-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column: Narrative Box */
.resilience-story-box {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  padding: clamp(22px, 3.5vw, 32px);
  box-shadow: 0 10px 30px rgba(32, 21, 21, 0.04);
}

.resilience-story-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream-text-dark);
  margin-bottom: 14px;
}

.resilience-kicker-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ff173d;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}

.resilience-story-chapter {
  margin-bottom: 16px;
}

.resilience-story-summary-pill {
  background: rgba(255, 23, 61, 0.05);
  border-left: 3px solid #ff173d;
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cream-text-dark);
  margin-top: 8px;
  margin-bottom: 18px;
}

.resilience-story-para {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--cream-text-muted);
  margin-bottom: 10px;
}

.resilience-story-para strong {
  color: var(--cream-text-dark);
}

.resilience-metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  margin: 18px 0;
}

@media (max-width: 580px) {
  .resilience-metric-row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.resilience-metric-item {
  display: flex;
  flex-direction: column;
}

.resilience-metric-item .res-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cream-text-dark);
  line-height: 1.1;
}

.resilience-metric-item .res-val.text-red {
  color: #ff173d !important;
}

.resilience-metric-item .res-val.text-green {
  color: #00875a !important;
}

.resilience-metric-item .res-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cream-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 5px;
}

.resilience-story-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.resilience-story-actions .btn-secondary,
.resilience-story-actions .btn-instagram {
  background: #1b1312 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(27, 19, 18, 0.18);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.resilience-story-actions .btn-secondary span,
.resilience-story-actions .btn-instagram span {
  color: #ffffff !important;
}

.resilience-story-actions .btn-secondary svg,
.resilience-story-actions .btn-instagram svg {
  color: #ff3366 !important;
  stroke: #ff3366 !important;
  display: inline-block;
  flex-shrink: 0;
}

.resilience-story-actions .btn-secondary:hover,
.resilience-story-actions .btn-instagram:hover {
  background: #2d1e1d !important;
  border-color: #ff173d !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 23, 61, 0.25);
}

.resilience-story-actions .btn-secondary:hover svg,
.resilience-story-actions .btn-instagram:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


/* Right Column: Dual Proof Showcase Card */
.resilience-proof-showcase {
  background: var(--cream-card);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(32, 21, 21, 0.07);
  display: flex;
  flex-direction: column;
}

.proof-showcase-header {
  padding: 12px 18px;
  background: #fbf9f6;
  border-bottom: 1px solid var(--cream-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.proof-tab-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.proof-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cream-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.proof-tab-btn .tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a09795;
}

.proof-tab-btn.active {
  background: #ffffff;
  border-color: rgba(255, 23, 61, 0.3);
  color: #ff173d;
  box-shadow: 0 2px 8px rgba(32, 21, 21, 0.06);
}

.proof-tab-btn.active .tab-dot {
  background: #ff173d;
}

.proof-display-stage {
  position: relative;
  background: #0d0a09;
  cursor: pointer;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.proof-image-view {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.proof-image-view.is-active {
  display: block;
}

.proof-display-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.proof-display-stage:hover .proof-display-img {
  transform: scale(1.02);
}

.proof-zoom-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(14, 10, 10, 0.85);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.proof-showcase-footer {
  padding: 14px 18px;
  background: #fbf9f6;
  border-top: 1px solid var(--cream-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proof-switch-thumbs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.thumb-btn {
  background: #ffffff;
  border: 1px solid var(--cream-border);
  border-radius: 8px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.thumb-btn.active {
  border-color: #ff173d;
  background: rgba(255, 23, 61, 0.05);
}

.thumb-btn img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
}

.thumb-btn span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cream-text-dark);
}

.proof-quote {
  font-style: italic;
  font-size: 0.86rem;
  color: var(--cream-text-muted);
  line-height: 1.45;
}

.proof-x-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #140d0c;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.proof-x-pill:hover {
  background: #ff173d;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Modal for archive viewer */
.proof-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 8, 0.88);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.proof-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.proof-modal-dialog {
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  background: #140e0d;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

.proof-modal-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e1514;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92rem;
}

.proof-modal-close {
  background: transparent;
  border: 0;
  color: #a09795;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.proof-modal-close:hover {
  color: #ffffff;
}

.proof-modal-body {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.proof-modal-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ==========================================================================
   HERO SUPPORTING TRUST ELEMENT BELOW BUTTONS
   ========================================================================== */
.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.hero-trust-item svg {
  color: #00e599;
  flex-shrink: 0;
}

.hero-trust-item strong {
  color: #ffffff;
  font-weight: 700;
}

.hero-trust-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .hero-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero-trust-sep {
    display: none;
  }
}

/* ==========================================================================
   INFINITE CONTINUOUS TICKER MARQUEE
   ========================================================================== */
.strip {
  background: var(--red-primary);
  color: #fff;
  padding: 13px 0;
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, 0.14);
  position: relative;
  width: 100%;
  user-select: none;
}

.strip-track {
  display: flex;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: jers-ticker-infinite 22s linear infinite !important;
}

.strip:hover .strip-track,
.strip-track:hover {
  animation-play-state: running !important;
}

@keyframes jers-ticker-infinite {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   SUPPLY & DEMAND / INDICATOR MARQUEE WITH PREV / NEXT BUTTONS
   ========================================================================== */
.indicator-slider-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.indicator-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--cream-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: var(--cream-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Hit target expansion so finger taps never miss on mobile */
.indicator-arrow-btn::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
}

.indicator-arrow-btn svg {
  stroke: currentColor;
  pointer-events: none;
  transition: stroke 0.18s ease;
}

/* Hover only on true desktop pointer devices */
@media (hover: hover) and (pointer: fine) {
  .indicator-arrow-btn:hover {
    background: #ff173d !important;
    color: #ffffff !important;
    border-color: #ff173d !important;
    box-shadow: 0 6px 20px rgba(255, 23, 61, 0.35);
    transform: translateY(-50%) scale(1.08);
  }
  .indicator-arrow-btn:hover svg {
    stroke: #ffffff !important;
  }
}

/* Instant active feedback on tap or click */
.indicator-arrow-btn:active {
  background: #ff173d !important;
  color: #ffffff !important;
  border-color: #ff173d !important;
  transform: translateY(-50%) scale(0.92);
  box-shadow: 0 2px 8px rgba(255, 23, 61, 0.3);
}

.indicator-arrow-btn:active svg {
  stroke: #ffffff !important;
}

.indicator-arrow-btn.indicator-prev {
  left: 6px;
}

.indicator-arrow-btn.indicator-next {
  right: 6px;
}

@media (max-width: 768px) {
  .indicator-arrow-btn {
    width: 32px;
    height: 32px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }
  .indicator-arrow-btn svg {
    width: 14px;
    height: 14px;
  }
  .indicator-arrow-btn.indicator-prev {
    left: 2px;
  }
  .indicator-arrow-btn.indicator-next {
    right: 2px;
  }
}

/* Tool Section Compact Padding & Tighter Spacing */
#tool.section {
  padding-block: clamp(32px, 5vw, 60px);
}

#tool .section-header {
  margin-bottom: clamp(18px, 3vw, 32px);
}

@media (max-width: 768px) {
  #tool.section {
    padding-top: 24px;
    padding-bottom: 32px;
  }
  #tool .section-header {
    margin-bottom: 16px;
  }
  #tool .section-header h2 {
    font-size: 1.65rem;
    line-height: 1.15;
  }
  #tool .section-header p {
    font-size: 0.88rem;
    margin-top: 8px;
    line-height: 1.5;
  }
}

/* Touch & Drag support for carousels */
.rail-viewport,
.rail-track,
.rail-card,
.indicator-marquee,
.indicator-marquee-track {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.rail-track {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.rail-track:active {
  cursor: grabbing;
}

/* ==========================================================================
   COURSES PAGE STATUS BADGES (NO DISTORTED TRAILING LINES)
   ========================================================================== */
.course-waitlist-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.course-waitlist-status::before,
.course-waitlist-status::after {
  display: none !important;
  content: none !important;
}

.course-waitlist-status.status-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.course-waitlist-status.status-red {
  background: rgba(255, 23, 61, 0.1);
  color: #c90026;
  border: 1px solid rgba(255, 23, 61, 0.28);
}

.course-waitlist-status .status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Curriculum Notice Box — High-contrast dark theme */
.curriculum-coming-notice {
  margin-top: 18px;
  margin-bottom: 28px;
}

.curriculum-notice-box {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.curriculum-notice-box .notice-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.curriculum-notice-box .notice-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}

.curriculum-notice-box .notice-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(247, 241, 236, 0.85) !important;
  flex: 1;
  min-width: 260px;
}

.curriculum-notice-box .notice-text strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* Syllabus Preview Badge matching user reference image */
.badge-pill-syllabus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(38, 16, 6, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  padding: 6px 16px 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.08);
}

.badge-pill-syllabus .badge-sq-dot {
  width: 7px;
  height: 7px;
  background: #d97706;
  border-radius: 1px;
  flex-shrink: 0;
  box-shadow: 0 0 6px #d97706;
}

.badge-pill-syllabus .badge-trail-line {
  display: inline-block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, #ff173d 0%, rgba(255, 23, 61, 0) 100%);
  border-radius: 2px;
  flex-shrink: 0;
  margin-left: 2px;
}

/* ==========================================================================
   PAGE BREADCRUMB NAVIGATION
   ========================================================================== */
.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.page-breadcrumb a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--tr-fast);
}

.page-breadcrumb a:hover {
  color: var(--red-primary);
}

.page-breadcrumb .breadcrumb-sep {
  color: var(--red-primary);
  opacity: 0.7;
  font-size: 0.65rem;
}

.page-breadcrumb span:last-child {
  color: var(--text-muted);
}

/* ==========================================================================
   MOBILE DRAWER TELEGRAM CTA BUTTON (CRISP HIGH-CONTRAST FINISH)
   ========================================================================== */
.mobile-drawer-cta .btn-telegram-cta,
.mobile-drawer-cta .btn-telegram-light,
.btn-telegram-cta,
.btn-telegram-light {
  width: 100% !important;
  background: #ffffff !important;
  color: #0b121e !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 20px !important;
  border-radius: var(--radius-sm, 6px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  transition: all 0.2s ease !important;
}

.mobile-drawer-cta .btn-telegram-cta span,
.mobile-drawer-cta .btn-telegram-light span,
.btn-telegram-cta span,
.btn-telegram-light span {
  color: #0b121e !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.mobile-drawer-cta .btn-telegram-cta svg,
.mobile-drawer-cta .btn-telegram-light svg,
.btn-telegram-cta svg,
.btn-telegram-light svg {
  stroke: #229ED9 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  transition: stroke 0.2s ease !important;
}

.mobile-drawer-cta .btn-telegram-cta:hover,
.mobile-drawer-cta .btn-telegram-cta:active,
.mobile-drawer-cta .btn-telegram-light:hover,
.mobile-drawer-cta .btn-telegram-light:active,
.btn-telegram-cta:hover,
.btn-telegram-cta:active,
.btn-telegram-light:hover,
.btn-telegram-light:active {
  background: #229ED9 !important;
  color: #ffffff !important;
  border-color: #229ED9 !important;
  box-shadow: 0 6px 24px rgba(34, 158, 217, 0.45) !important;
}

.mobile-drawer-cta .btn-telegram-cta:hover span,
.mobile-drawer-cta .btn-telegram-cta:active span,
.mobile-drawer-cta .btn-telegram-light:hover span,
.mobile-drawer-cta .btn-telegram-light:active span,
.btn-telegram-cta:hover span,
.btn-telegram-cta:active span,
.btn-telegram-light:hover span,
.btn-telegram-light:active span {
  color: #ffffff !important;
}

.mobile-drawer-cta .btn-telegram-cta:hover svg,
.mobile-drawer-cta .btn-telegram-cta:active svg,
.mobile-drawer-cta .btn-telegram-light:hover svg,
.mobile-drawer-cta .btn-telegram-light:active svg,
.btn-telegram-cta:hover svg,
.btn-telegram-cta:active svg,
.btn-telegram-light:hover svg,
.btn-telegram-light:active svg {
  stroke: #ffffff !important;
}

/* ==========================================================================
   CONTENT & SECURITY PROTECTION STYLES
   ========================================================================== */
/* Protect intellectual property from text scraping, while keeping form inputs functional */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Prevent image dragging and saving */
img, svg, canvas {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* Security Alert Floating Toast Notification */
.jers-security-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.jers-security-toast.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.jers-security-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(13, 18, 32, 0.94);
  border: 1px solid rgba(255, 42, 75, 0.4);
  border-radius: 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 42, 75, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 576px) {
  .jers-security-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .jers-security-toast-content {
    font-size: 0.78rem;
    padding: 10px 16px;
    border-radius: 12px;
    justify-content: center;
    text-align: center;
  }
}