/* ============================================================================
   Register2026Styles.css  —  Budget Challenge /Register landing (2026 redesign)
   Deploys to /Portals/_default/Skins/Budget/ and loads via DnnCssInclude
   (SkinPath, Priority 50) after bc-common.css (Priority 48), mirroring the
   Account Setup / Effectiveness / Sponsors / State Standards 2026 skins.
   All rules scoped under .bc-register2026. Brand tokens come from bc-common;
   only page-specific neutrals / radii / shadows / derived shades are declared
   here (scoped, not redeclaring any bc-common brand token).
   ============================================================================ */
.bc-register2026 {
  --bc-green-dark:  #5DA033;
  --bc-purple-dark: #332B82;
  --bc-red:         #D14545;
  --bc-gray-50:  #FAFBFD;
  --bc-gray-100: #F5F7FA;
  --bc-gray-200: #E8ECF2;
  --bc-gray-300: #D6DCE5;
  --bc-gray-500: #8B95A8;
  --bc-gray-700: #4A5366;
  --bc-radius: 8px;
  --bc-radius-lg: 12px;
  --bc-shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --bc-shadow-card-lg: 0 8px 24px rgba(26,78,138,0.12);
}

/* ─────────────────────────────────────────────────────────────────
   Page-scoped styles — everything under .bc-register2026
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--bc-text);
  line-height: 1.5;
}

.bc-register2026 .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.bc-register2026 .bc-section {
  padding: 64px 0;
}

/* DNN emits a placeholder row for EVERY empty skin pane, and each renders a ~1px
   sliver. On this page 12 of them stack up between the fixed header and the module
   (TopPane, HeadPane, BannerPane, RowOne…RowNine), adding a visible band above the
   hero. Collapse them so the hero meets the header seamlessly. Only rows whose pane
   DNN itself marked empty (.DNNEmptyPane) are hidden, and never the one holding the
   ContentPane — so a pane that later gets real content still renders. Unscoped is
   fine: this stylesheet only loads on the Register page. */
.pane_layout > section.row:has(.DNNEmptyPane):not(:has(.ContentPane)) { display: none; }

/* The skin's breadcrumb/date bar is relocated to just below the hero by the module's
   script (see View.ascx). Give it a little air there so the date doesn't sit flush
   against the hero's bottom edge. Scoped to the bar as it sits AFTER the hero. */
.bc-register2026 .bc-ss-hero + .container { padding-top: 14px; padding-bottom: 2px; }

/* The role tiles call formPane.scrollIntoView({block:'start'}), which aligns the
   section to the very top of the viewport — underneath the site's position:fixed
   header (div.fixed, ~155px tall, z-index 999), so the top of the form was hidden
   behind it. scrollIntoView honours scroll-margin-top, so reserving the header's
   height here fixes the landing position without touching the JS. */
.bc-register2026 .bc-ss-form { scroll-margin-top: 170px; }

/* ─── Eyebrow utility ────────────────────────────────────────────── */
.bc-register2026 .bc-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.bc-register2026 .bc-eyebrow.is-blue { background: rgba(31,68,128,0.10); color: var(--bc-blue); }
.bc-register2026 .bc-eyebrow.is-green { background: rgba(91,181,74,0.12); color: var(--bc-green-dark); }
.bc-register2026 .bc-eyebrow.is-gold { background: rgba(242,169,59,0.14); color: #B8741D; }
.bc-register2026 .bc-eyebrow.is-light { background: rgba(255,255,255,0.18); color: #FFFFFF; }

/* ─── Shimmer button (mirrors bc-common pattern) ─────────────────── */
.bc-register2026 .bc-shimmer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: var(--bc-radius);
  color: #FFFFFF;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}
.bc-register2026 .bc-shimmer-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); color: #FFFFFF; text-decoration: none; }
.bc-register2026 .bc-shimmer-btn:visited,
.bc-register2026 .bc-shimmer-btn:active,
.bc-register2026 .bc-shimmer-btn:focus { color: #FFFFFF; text-decoration: none; }
.bc-register2026 .bc-shimmer-btn.is-blue { background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%); }
.bc-register2026 .bc-shimmer-btn.is-green { background: linear-gradient(135deg, var(--bc-green) 0%, var(--bc-green-dark) 100%); }
.bc-register2026 .bc-shimmer-btn.is-gold { background: linear-gradient(135deg, var(--bc-orange) 0%, #D4810E 100%); }

/* ─── Live badge ────────────────────────────────────────────────── */
.bc-register2026 .bc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(209,69,69,0.95);
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.bc-register2026 .bc-pulse {
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 50%;
  animation: bc-pulse-anim 1.4s ease-in-out infinite;
}
@keyframes bc-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ─────────────────────────────────────────────────────────────────
   HERO — brand-purple gradient (--bc-purple is the canonical token
   for internal/auth/dashboard pages; Register fits that family).
   ───────────────────────────────────────────────────────────────── */
/* The full-bleed hero below breaks out to 100vw, which is WIDER than the document
   whenever a vertical scrollbar is present (~15px), so clip that gutter at the root.
   Safe to put on html/body here: this stylesheet only loads on the Register page.
   It must NOT go on .bc-register2026 — that wrapper is only as wide as the DNN
   ContentPane (1140px), so clipping there would cancel the break-out entirely. */
html, body { overflow-x: hidden; }

.bc-register2026 .bc-ss-hero {
  position: relative;
  /* Full-bleed: the DNN skin wraps this module in a max-width ContentPane, which
     clips the hero's purple background at the container edge. Pull the section out
     to the full viewport width; the inner .container keeps the heading centered.
     width:100vw is REQUIRED, not belt-and-braces: bc-common.css sets .bc-ss-hero
     { width:100% }, and with an explicit width the negative margins only SHIFT the
     box (left:-7px) instead of widening it — which rendered the hero as a narrow
     left-aligned panel. Setting the width back to the viewport restores the bleed.
     The scrollbar gutter this exposes is handled by the html/body rule above. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:
    linear-gradient(180deg, rgba(51,43,130,0.55) 0%, rgba(76,64,184,0.30) 60%, rgba(76,64,184,0.20) 100%),
    radial-gradient(ellipse at top right, rgba(211,175,55,0.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--bc-purple-dark) 0%, var(--bc-purple) 100%);
  color: #FFFFFF;
  padding: 88px 0 96px;
  text-align: center;
}
.bc-register2026 .bc-ss-hero .hero-content { max-width: 760px; margin: 0 auto; }
.bc-register2026 .bc-ss-hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 16px;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.bc-register2026 .bc-ss-hero .hero-sub {
  font-size: 22px;
  font-weight: 500;
  max-width: 620px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,0.92);
}
.bc-register2026 .bc-ss-hero .hero-badges {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   PROOF BAND — slim stat strip under hero, white card on light gray
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .bc-ss-proof {
  background: var(--bc-gray-100);
  padding: 32px 0;
  border-bottom: 1px solid var(--bc-gray-200);
}
.bc-register2026 .proof-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.bc-register2026 .proof-stats .stat { text-align: center; }
.bc-register2026 .proof-stats .stat-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--bc-blue);
  line-height: 1;
  margin-bottom: 4px;
}
.bc-register2026 .proof-stats .stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bc-register2026 .stat-divider {
  width: 1px;
  height: 40px;
  background: var(--bc-gray-300);
}

/* ─────────────────────────────────────────────────────────────────
   FORM SECTION — two cards side-by-side, teacher (blue) + student (green)
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .bc-ss-form {
  background: #FFFFFF;
  padding: 44px 0;
}
.bc-register2026 .bc-ss-form .form-section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
  color: var(--bc-text);
}
.bc-register2026 .bc-ss-form .form-intro {
  text-align: center;
  font-size: 17px;
  color: var(--bc-gray-700);
  max-width: 620px;
  margin: 0 auto 48px;
}
.bc-register2026 .form-card {
  background: #FFFFFF;
  border: 1px solid var(--bc-gray-200);
  border-radius: var(--bc-radius-lg);
  padding: 24px;
  box-shadow: var(--bc-shadow-card);
  position: relative; /* anchor for the top-right .verified-badge */
  /* NOTE: height:100% removed 2026-07-09 — it was a vestige of the original
     side-by-side two-column layout. Cards now stack vertically (one role at a
     time), so height:100% just stretched each card to full height, leaving a
     ~380px dead gap under the button. Height auto lets each card size to content. */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bc-register2026 .form-card:hover {
  box-shadow: var(--bc-shadow-card-lg);
  transform: translateY(-2px);
}
.bc-register2026 .form-card.teacher-card { border-top: 4px solid var(--bc-blue); }
.bc-register2026 .form-card.student-card { border-top: 4px solid var(--bc-green); }
.bc-register2026 .form-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--bc-text);
}
.bc-register2026 .form-card p {
  font-size: 15px;
  color: var(--bc-gray-700);
  margin: 0 0 20px;
}
.bc-register2026 .form-card label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bc-gray-700);
  margin-bottom: 6px;
}
.bc-register2026 .form-card .form-control {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border: 1.5px solid var(--bc-gray-300);
  border-radius: var(--bc-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #FFFFFF;
  color: var(--bc-text);
  margin-bottom: 16px;
}
.bc-register2026 .form-card .form-control:focus {
  outline: none;
  border-color: var(--bc-blue);
  box-shadow: 0 0 0 3px rgba(31,68,128,0.15);
}
.bc-register2026 .form-card .bc-shimmer-btn { width: 100%; margin-top: 4px; }
.bc-register2026 .form-card .micro-help {
  font-size: 13px;
  color: var(--bc-gray-500);
  margin-top: 14px;
  text-align: center;
}
/* "Choose this if…" decision line — parallel device on both teacher cards */
.bc-register2026 .form-card .who-for {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bc-gray-700);
  background: var(--bc-gray-100);
  border-radius: var(--bc-radius);
  padding: 10px 14px;
  margin: 0 0 16px;
}
.bc-register2026 .form-card .who-for strong { color: var(--bc-text); }
/* Fine print — FIT eligibility honesty line (cert = everyone, free year = new schools) */
.bc-register2026 .form-card .fine-print {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bc-gray-500);
  margin: 4px 0 16px;
}
/* ── "Verified Registration" green badge (top-right of both teacher cards) ── */
.bc-register2026 .verified-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(91,181,74,0.12);
  color: var(--bc-green-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px 5px 6px;
  border-radius: 100px;
  border: 1px solid rgba(91,181,74,0.35);
  cursor: help;
  z-index: 3;
}
.bc-register2026 .verified-badge .vb-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bc-green);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.bc-register2026 .verified-badge .vb-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  background: var(--bc-text);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}
.bc-register2026 .verified-badge:hover .vb-tip,
.bc-register2026 .verified-badge:focus .vb-tip,
.bc-register2026 .verified-badge:focus-within .vb-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 640px) {
  /* On narrow cards, let the badge flow inline above the eyebrow so it can't
     overlap the eyebrow text. */
  .bc-register2026 .verified-badge {
    position: static;
    margin-bottom: 12px;
  }
  .bc-register2026 .verified-badge .vb-tip { left: 0; right: auto; }
}

/* ─────────────────────────────────────────────────────────────────
   STATE COVERAGE — gold/amber accent CTA card
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .bc-ss-state-coverage {
  background: linear-gradient(135deg, #FFF8EC 0%, #FDEED0 100%);
  border-top: 1px solid #F2DDA6;
  border-bottom: 1px solid #F2DDA6;
  padding: 56px 0;
}
.bc-register2026 .state-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.bc-register2026 .state-callout-left { flex: 1 1 480px; }
.bc-register2026 .state-callout-left h3 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--bc-text);
  line-height: 1.25;
}
.bc-register2026 .state-callout-left p {
  font-size: 16px;
  color: var(--bc-gray-700);
  margin: 0;
}
.bc-register2026 .state-callout-right { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────
   ROLE SELECTOR — two "I am a..." tiles drive progressive disclosure
   of the matching registration form below. State machine driven by
   the `data-state` attribute on #FormPane: choose | student | teacher
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .role-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 8px;
}
.bc-register2026 .role-tile {
  background: #FFFFFF;
  border: 2px solid var(--bc-gray-200);
  border-radius: var(--bc-radius-lg);
  padding: 32px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.bc-register2026 .role-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--bc-shadow-card-lg);
}
.bc-register2026 .role-tile.is-student:hover { border-color: var(--bc-green); }
.bc-register2026 .role-tile.is-teacher:hover { border-color: var(--bc-blue); }
.bc-register2026 .role-tile-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--bc-text);
  margin-bottom: 6px;
}
.bc-register2026 .role-tile-qualifier {
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-gray-500);
  margin-top: -2px;
  margin-bottom: 8px;
}
/* The role-defining word ("student" / "teacher") gets:
   - color matched to its expanded card (green / blue)
   - slightly larger weight + size
   - a diagonal white shimmer sweep, clipped to the text shape.
   Mirrors the bc-common.css `bcShimmerSweep` pattern: 5.5s cycle, short
   pause + sweep + short pause, both words synced (no stagger).
   The keyframe loop is "invisible" because both endpoints (100% and 0%)
   show the gradient's solid dark side — no visible jump on restart. */
.bc-register2026 .role-tile-title .shimmer-word {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bcTextShimmer 5.5s linear infinite;
  will-change: background-position;
}
.bc-register2026 .role-tile.is-student .shimmer-word {
  background-image: linear-gradient(105deg,
    var(--bc-green-dark) 35%,
    rgba(255,255,255,0.95) 50%,
    var(--bc-green-dark) 65%);
}
.bc-register2026 .role-tile.is-teacher .shimmer-word {
  background-image: linear-gradient(105deg,
    var(--bc-blue) 35%,
    rgba(255,255,255,0.90) 50%,
    var(--bc-blue) 65%);
}
@keyframes bcTextShimmer {
  0%   { background-position: 100% 0; }   /* park at right (solid dark) */
  15%  { background-position: 100% 0; }   /*  ↳ short pre-sweep pause */
  55%  { background-position: 0%   0; }   /* sweep happens 15%→55% (40% of cycle) */
  100% { background-position: 0%   0; }   /* park at left (also solid dark — invisible jump on loop) */
}
.bc-register2026 .role-tile-sub {
  font-size: 14px;
  color: var(--bc-gray-700);
  line-height: 1.4;
}

.bc-register2026 .role-content { max-width: 720px; margin: 0 auto; }

.bc-register2026 .role-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-gray-700);
  text-decoration: none;
  margin-bottom: 18px;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.bc-register2026 .role-back:hover { color: var(--bc-blue); text-decoration: underline; }

/* "Did you know" callout — appears inside the expanded card */
.bc-register2026 .did-you-know {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--bc-radius);
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
}
.bc-register2026 .did-you-know-icon {
  flex: 0 0 24px;
  font-size: 22px;
  line-height: 1;
}
.bc-register2026 .did-you-know-body { flex: 1; color: var(--bc-gray-700); }
.bc-register2026 .did-you-know-body strong { color: var(--bc-text); }
.bc-register2026 .did-you-know-body a {
  color: var(--bc-blue);
  font-weight: 600;
  text-decoration: underline;
}
.bc-register2026 .did-you-know.is-teacher {
  background: rgba(31,68,128,0.06);
  border: 1px solid rgba(31,68,128,0.18);
}
.bc-register2026 .did-you-know.is-student {
  background: rgba(91,181,74,0.06);
  border: 1px solid rgba(91,181,74,0.22);
}

/* State machine — hide/show the right things */
.bc-register2026 #FormPane[data-state="choose"] .role-content { display: none; }
.bc-register2026 #FormPane[data-state="student"] .role-selector,
.bc-register2026 #FormPane[data-state="student"] [data-show-for="teacher"] { display: none; }
.bc-register2026 #FormPane[data-state="teacher"] .role-selector,
.bc-register2026 #FormPane[data-state="teacher"] [data-show-for="student"] { display: none; }

@media (max-width: 640px) {
  .bc-register2026 .role-selector { grid-template-columns: 1fr; }
  .bc-register2026 .role-tile { padding: 24px 20px; }
  .bc-register2026 .role-tile-title { font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────────
   FIT CAPABILITY CERTIFICATION CARD — second optional section that
   appears below the teacher form card. Same form-card pattern with
   an amber/orange accent to differentiate from the primary teacher
   registration above. Sources content from /FEE.aspx (the existing
   BCFeeCertificationRegistration module is server-side-broken, so we
   reconstruct plausible fields here for Robbie to wire on install).
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .fit-card {
  border-top: 4px solid var(--bc-orange);
  margin-top: 12px;
}
.bc-register2026 .fit-logo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 6px 0 18px;
}
.bc-register2026 .fit-logo-row .fit-tagline {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-text);
  line-height: 1.4;
}
.bc-register2026 .fit-logo {
  display: block;
  width: 190px;
  max-width: 45%;
  height: auto;
  margin: 0;
  flex: 0 0 auto; /* right side of the tagline row */
}
/* Top headline sits top-left; reserve room so it clears the top-right verified badge */
.bc-register2026 .teacher-card > h3,
.bc-register2026 .fit-card > h3 {
  padding-right: 175px;
}
@media (max-width: 640px) {
  .bc-register2026 .teacher-card > h3,
  .bc-register2026 .fit-card > h3 { padding-right: 0; }
}
.bc-register2026 .fit-card .benefits {
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
}
.bc-register2026 .fit-card .benefits li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 14px;
  color: var(--bc-text);
  line-height: 1.5;
}
.bc-register2026 .fit-card .benefits li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--bc-orange);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-register2026 .fit-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bc-register2026 .fit-card .form-row label { grid-column: span 1; }
@media (max-width: 520px) {
  .bc-register2026 .fit-card .form-row { grid-template-columns: 1fr; }
}
.bc-register2026 .fit-card .module-error-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(236,151,31,0.08);
  border-left: 3px solid var(--bc-orange);
  font-size: 12px;
  color: var(--bc-gray-700);
  border-radius: 4px;
}
.bc-register2026 .fit-card .module-error-note strong { color: var(--bc-orange); }

/* ─────────────────────────────────────────────────────────────────
   TEACHER PATH MODAL — nudges toward the invite path before
   committing to the manual-verification new-school registration.
   ───────────────────────────────────────────────────────────────── */
.bc-register2026 .bc-teacher-modal .modal-content {
  border-radius: var(--bc-radius-lg);
  border: 0;
  box-shadow: 0 24px 60px rgba(20,48,90,0.30);
  overflow: hidden;
}
.bc-register2026 .bc-teacher-modal .modal-header {
  background: linear-gradient(135deg, var(--bc-blue-dark) 0%, var(--bc-blue) 100%);
  color: #FFFFFF;
  border-bottom: 0;
  padding: 24px 28px 20px;
}
.bc-register2026 .bc-teacher-modal .modal-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.bc-register2026 .bc-teacher-modal .modal-header .close {
  color: #FFFFFF;
  opacity: 0.85;
  font-size: 28px;
  font-weight: 300;
  margin-top: -4px;
  text-shadow: none;
}
.bc-register2026 .bc-teacher-modal .modal-header .close:hover { opacity: 1; }
.bc-register2026 .bc-teacher-modal .modal-body {
  padding: 28px;
  font-size: 16px;
  color: var(--bc-text);
}
.bc-register2026 .bc-teacher-modal .path-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  border-radius: var(--bc-radius);
  margin-bottom: 12px;
  background: var(--bc-gray-50);
  border: 1px solid var(--bc-gray-200);
}
.bc-register2026 .bc-teacher-modal .path-card.is-recommended {
  background: rgba(91,181,74,0.06);
  border-color: rgba(91,181,74,0.30);
}
.bc-register2026 .bc-teacher-modal .path-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.bc-register2026 .bc-teacher-modal .path-card.is-recommended .path-icon {
  background: var(--bc-green);
  color: #FFFFFF;
}
.bc-register2026 .bc-teacher-modal .path-card.is-slow .path-icon {
  background: var(--bc-gray-200);
  color: var(--bc-gray-700);
}
.bc-register2026 .bc-teacher-modal .path-body { flex: 1; }
.bc-register2026 .bc-teacher-modal .path-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--bc-text);
}
.bc-register2026 .bc-teacher-modal .path-time {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.bc-register2026 .bc-teacher-modal .path-card.is-recommended .path-time {
  background: rgba(91,181,74,0.15);
  color: var(--bc-green-dark);
}
.bc-register2026 .bc-teacher-modal .path-card.is-slow .path-time {
  background: var(--bc-gray-200);
  color: var(--bc-gray-700);
}
.bc-register2026 .bc-teacher-modal .path-desc {
  font-size: 14px;
  color: var(--bc-gray-700);
  margin: 0;
  line-height: 1.45;
}
.bc-register2026 .bc-teacher-modal .modal-footer {
  background: var(--bc-gray-50);
  border-top: 1px solid var(--bc-gray-200);
  padding: 18px 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bc-register2026 .bc-teacher-modal .modal-footer .bc-shimmer-btn { margin: 0; }
.bc-register2026 .bc-teacher-modal .bc-link-btn {
  background: transparent;
  border: 0;
  color: var(--bc-gray-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 12px;
  text-decoration: underline;
}
.bc-register2026 .bc-teacher-modal .bc-link-btn:hover { color: var(--bc-text); }
.modal-backdrop.in { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header collapses on mobile, so reserve less space above the scroll target. */
  .bc-register2026 .bc-ss-form { scroll-margin-top: 100px; }
  .bc-register2026 .bc-ss-hero { padding: 60px 0 64px; }
  .bc-register2026 .bc-ss-hero h1 { font-size: 40px; }
  .bc-register2026 .bc-ss-hero .hero-sub { font-size: 18px; }
  .bc-register2026 .bc-section { padding: 48px 0; }
  .bc-register2026 .proof-stats { gap: 24px; }
  .bc-register2026 .proof-stats .stat-num { font-size: 28px; }
  .bc-register2026 .stat-divider { display: none; }
  .bc-register2026 .form-card { margin-bottom: 16px; }
  .bc-register2026 .state-callout { flex-direction: column; text-align: center; }
  .bc-register2026 .state-callout-left h3 { font-size: 22px; }
}