:root{
    --bg: #050B18;
    --bg-2: #0B1328;
    --panel: #ffffff;
    --rule: rgba(75, 122, 255, 0.25);
    --rule-soft: rgba(255,255,255,0.08);
    --gold:#ffc400;
    --gold-dim: #cca440;
    --violet: #1e76c6;
    --pink: #2451a3;
    --teal: #0aa0d1;
    --lime: #1fa568;
    --orange: #d9631a;
    --purple: #7c5cff;
    --paper: #0E1B35;
    --text: #E5EEF9;
    --muted: #9FB3C8;
    --navy: #08101F;
    --navy-2: #101D38;
    --on-dark: #ffffff;
    --on-dark-dim: rgba(255,255,255,.75);
    --on-dark-rule:  rgba(255,255,255,.12);
    --gradient-hot: linear-gradient(120deg, var(--gold-dim), var(--gold) 55%, #f0f900);
    --gradient-cool: linear-gradient(120deg, var(--violet), var(--teal));
    --serif: 'Baloo 2', 'Hind', sans-serif;
    --sans: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    --poppins: 'Poppins', 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 900px 560px at 12% -10%, rgba(30,118,198,0.12), transparent 60%),
      radial-gradient(ellipse 760px 560px at 100% 6%, rgba(46,139,255,0.10), transparent 60%),
      radial-gradient(ellipse 620px 500px at 55% 115%, rgba(255,139,61,0.10), transparent 60%),
      radial-gradient(ellipse 520px 420px at 85% 85%, rgba(10,160,209,0.08), transparent 60%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    padding-top: 60px; /* space for the fixed sticky topbar */
    padding-bottom: 64px; /* space for fixed registration footer */
    overflow-x: hidden;
  }

  /* Ambient drifting glow blobs (pure CSS, GPU-friendly) */
  .glow-blob{
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
    animation: drift 22s ease-in-out infinite alternate;
  }
  .glow-blob.b1{ width: 420px; height: 420px; top: -120px; left: -100px; background: var(--gold); }
  .glow-blob.b2{ width: 460px; height: 460px; top: 30vh; right: -140px; background: var(--violet); animation-duration: 26s; animation-delay: -6s; }
  .glow-blob.b3{ width: 380px; height: 380px; bottom: -140px; left: 30vw; background: var(--teal); animation-duration: 30s; animation-delay: -12s; }
  @keyframes drift{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px,-30px) scale(1.12); }
    100%{ transform: translate(-30px,20px) scale(0.95); }
  }
  @media (prefers-reduced-motion: reduce){
    .glow-blob{ animation: none; }
  }
  @media (max-width: 760px){
    .glow-blob{ display: none; }
  }

  a { color: inherit; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  section{ padding: 84px 0; }

  /* Reveal-on-load elements (copy, seal, stat strip, masterclass admit card) — toggled by script.js */
  .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.d1{ transition-delay: 0.08s; }
  .reveal.d2{ transition-delay: 0.16s; }
  .reveal.d3{ transition-delay: 0.24s; }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* Reveal-on-scroll elements (section headers, card grids) — toggled by script.js.
     Ledger rows are NOT included here: they stay visible immediately, only their
     dotted leader line animates in (see .ledger-row.is-visible below). */
  .on-scroll{
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.6s cubic-bezier(0.2,0.7,0.3,1), transform 0.6s cubic-bezier(0.2,0.7,0.3,1);
  }
  .on-scroll.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Lively hover treatment shared across card-style content blocks */
  .why-card, .reality-card, .cost-card, .opp-card, .bp-card, .outcome-card,
  .clarity-card, .quote-card, .pay-card{
    box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .why-card:hover, .reality-card:hover, .cost-card:hover, .opp-card:hover,
  .bp-card:hover, .outcome-card:hover, .clarity-card:hover, .quote-card:hover,
  .pay-card:hover{
    transform: translateY(-5px);
    border-color: var(--violet);
    box-shadow: 0 16px 32px rgba(30,118,198,0.16), 0 6px 14px rgba(46,139,255,0.1);
  }

  /* ---------- STICKY TOPBAR (persists across the whole page) ---------- */
  .topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.88);
   /* background: linear-gradient(180deg, #0A1C3E 0%, #081A3A 100%);*/
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--on-dark-rule);
    box-shadow: 0 8px 24px rgba(3,10,25,0.28);
  }
  .topbar::after{
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--gradient-hot);
    background-size: 200% 100%;
    animation: shimmer 5s linear infinite;
  }
  @keyframes shimmer{
    to{ background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .topbar::after{ animation: none; }
    .seat-status, .offer-timer{ animation: none; }
    .seal.is-stamped{ animation: none; opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  .topbar-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 28px;
    flex-wrap: wrap;
  }
  .topbar-brand{ display: flex; align-items: center; gap: 10px; }
  /**.topbar-logo{ width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--on-dark-rule); }
  .topbar-name{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--on-dark); }*/
  .topbar-brand-text{ display: flex; flex-direction: column; gap: 3px; }
  .topbar-kicker{
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.9;
  }
  .topbar-tag{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 35px;
    /*font-size: clamp(20px, 3vw, 21px);*/
    letter-spacing: 0.005em;
    text-transform: none;
    color: #FFFF00;
    line-height: 1.3;
  }
  .topbar-cta{ display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  .btn-topbar{ padding: 9px 16px; border-radius: 4px; }
  .btn-txt{ display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
  .btn-txt strong{ font-family: var(--poppins); font-size: 14.5px; font-weight: 600; }
  .btn-txt small{ font-family: var(--poppins); font-size: 10px; font-weight: 600; opacity: 0.85; }
  .offer-timer{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: var(--gold);
    background: rgba(255,196,0,0.08);
    border: 1px solid rgba(255,196,0,0.28);
    padding: 4px 10px;
    border-radius: 20px;
  }
  .offer-timer #offerClock{
    font-family: var(--mono);
    font-weight: 500;
    animation: pulse-soft 1.6s ease-in-out infinite;
  }
  @keyframes pulse-soft{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce){
    .offer-timer #offerClock{ animation: none; }
  }

  /* ---------- HERO (homepage) ---------- */
  .hero{
    padding: 96px 0 72px;
    position: relative;
  }
  .hero-grid{
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 48px;
    align-items: start;
  }
  .eyebrow{
    font-family: var(--poppins);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    /*text-transform: uppercase;*/
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
  }
  .eyebrow::before{
    content: '';
    width: 24px;
    height: 1px;
    background: var(--gold-dim);
  }
  .eyebrow-inline::before{ content: ''; }
  h1{
    font-family: var(--poppins);
    font-weight: 450;
    font-size: clamp(35px, 6vw, 55px);
    line-height: 1.12;
    color: white;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
  }
  h1 em{
    font-style: poppins;
    background: var(--gradient-hot);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #05ffc1;
    animation: gradient-flow 6s ease-in-out infinite;
  }
  @keyframes gradient-flow{
    0%, 100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    h1 em{ animation: none; }
  }
  .lede{
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text);
    max-width: 50ch;
    margin: 0 0 34px;
  }
  .cta-row{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .mid-cta{ margin-top: 32px; }

  .btn{
    position: relative;
    overflow: hidden;
    font-family: var(--poppins);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn .ripple{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(151, 237, 13, 0.45);
    transform: scale(0);
    animation: ripple-out 0.55s ease-out forwards;
  }
  .btn-ghost .ripple{ background: rgba(36, 40, 2, 0.35); }
  @keyframes ripple-out{
    to{ transform: scale(1); opacity: 0; }
  }
  .btn-gold{
    background: var(--gradient-hot);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #1a0f08;
    border: 1px solid transparent;
    box-shadow: 0 0 0 rgba(46,139,255,0);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background-position 0.5s ease;
  }
  .btn-gold:hover{
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(46,139,255,0.35), 0 4px 14px rgba(255,139,61,0.25);
  }
  .btn-ghost{
    background: transparent;
    color: var(--navy-2);
    border: 1px solid var(--rule);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, color 0.2s ease;
  }
  .btn-ghost:hover{
    border-color: var(--teal);
    color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(79,195,247,0.2);
  }
  .btn-lg{ padding: 16px 30px; font-size: 15px; }
  .rocket{ display: inline-block; animation: rocket-wiggle 2.2s ease-in-out infinite; }
  @keyframes rocket-wiggle{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-2px) rotate(-8deg); }
    75%{ transform: translateY(1px) rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .rocket{ animation: none; }
  }

  /* signature element: wax/certificate seal, now stamped onto the admit card */
  .seal{
    width: 210px;
    height: 210px;
    filter: drop-shadow(0 8px 28px rgba(46,139,255,0.28)) drop-shadow(0 0 22px rgba(30,118,198,0.18));
    opacity: 0;
    transform: rotate(22deg) scale(1.8);
  }
  .seal.is-stamped{
    animation: stamp-press 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards, seal-glow 3.2s ease-in-out 1s infinite;
    animation-delay: 0.35s;
  }
  @keyframes seal-glow{
    0%, 100%{ filter: drop-shadow(0 8px 28px rgba(46,139,255,0.28)) drop-shadow(0 0 22px rgba(30,118,198,0.18)); }
    50%{ filter: drop-shadow(0 8px 28px rgba(255,139,61,0.35)) drop-shadow(0 0 30px rgba(79,195,247,0.28)); }
  }
  @keyframes stamp-press{
    0%{ opacity: 0; transform: rotate(22deg) scale(1.8); }
    55%{ opacity: 1; transform: rotate(-11deg) scale(0.94); }
    75%{ transform: rotate(-7deg) scale(1.02); }
    100%{ opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .seal{ opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  .seal-badge{
    position: absolute;
    top: -44px;
    left: 50%;
    margin-left: -50px; /* half of width — centers without touching the `transform` property, which stamp-press animates */
    width: 100px;
    height: 100px;
    z-index: 2;
  }
  @media (max-width: 520px){
    .seal-badge{ width: 74px; height: 74px; top: -32px; margin-left: -37px; }
  }
  .seal-ring-text{
    font-family: var(--mono);
    font-size: 10.4px;
    letter-spacing: 0.24em;
    fill: var(--gold-dim);
  }
  .seal-core-label{
    font-family: var(--serif);
    fill: var(--paper);
  }

  /* ---------- STAT STRIP ---------- */
  .stat-strip{
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    padding: 26px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .stat{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stat .k{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
  }
  .stat .v{
    font-family: var(--serif);
    font-size: 19px;
    color: #ffae00;
  }

  /* ---------- SECTION HEADERS ---------- */
  .sec-head{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .sec-head::after{
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px;
    height: 2px;
    background: var(--gradient-hot);
    border-radius: 2px;
  }
  .sec-head h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    color: var(--gold);
    margin: 0;
  }
  .sec-tag{
    font-family: var(--mono);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f0f900;
  }

  .section-subtitle {
    margin-top: 12px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    color: #ffffff;
}

.section-subtitle span:nth-child(1) {
    color: #ffffff; /* Category */
    font-weight: 800;
}

.section-subtitle span:nth-child(2) {
    color: #ff8c00; /* Masterclass */
}

.section-subtitle span:nth-child(3) {
    color: #ffd700; /* Career */
}

.section-subtitle span:nth-child(4) {
    color: #7CFC00; /* नई दिशा */
}

  /* ---------- COURSE LEDGER ---------- */
  .ledger-row{
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, padding-left 0.15s ease;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ledger-row:hover{
    background: linear-gradient(90deg, rgba(46,139,255,0.08), rgba(30,118,198,0.06));
    padding-left: 8px;
  }
  .ledger-num{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--gold-dim);
    width: 26px;
    flex-shrink: 0;
  }
  .ledger-name{
    font-family: var(--serif);
    font-size: 16.5px;
    color: var(--paper);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ledger-dots{
    flex: 1;
    min-width: 20px;
    position: relative;
    transform: translateY(-4px);
  }
  .ledger-dots::after{
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-bottom: 1px dotted var(--rule);
    transition: width 0.9s ease 0.15s;
  }
  .ledger-row.is-visible .ledger-dots::after{
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce){
    .ledger-dots::after{ width: 100%; transition: none; }
  }
  .ledger-fee{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--gold);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ledger-arrow{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .ledger-row:hover .ledger-arrow{ color: var(--gold); transform: translateX(3px); }

  .ledger-note{
    font-family: var(--mono);
    font-size: 13.5px;
    color: #dfd926;
    margin-top: 16px;
  }

  /* ---------- WHY GRID (shared by homepage "Why train here" and masterclass trust section) ---------- */
  .why-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .why-card{
    background: var(--bg-2);
    padding: 32px 28px;
  }
  .why-card .idx{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gold-dim);
    letter-spacing: 0.1em;
  }
  .why-card h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    color: var(--paper);
    margin: 10px 0 10px;
  }
  .why-card p{
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
  }

  /* ---------- CONTACT ---------- */
  .contact-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 40px 44px;
    box-shadow: 0 4px 22px rgba(11,42,77,0.06);
  }
  .contact-rows .row{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 10px;
    transition: background 0.25s ease, padding-left 0.25s ease, transform 0.25s ease;
  }
  .contact-rows .row:hover{
    background: var(--rule-soft);
    padding-left: 16px;
    transform: translateX(2px);
  }
  .contact-icon{
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--gradient-hot);
    box-shadow: 0 8px 18px rgba(217,99,26,0.28);
    transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
  }
  .contact-rows .row:nth-child(even) .contact-icon{
    background: var(--gradient-cool);
    box-shadow: 0 8px 18px rgba(30,118,198,0.28);
  }
  .contact-rows .row:hover .contact-icon{ transform: scale(1.1) rotate(-4deg); }
  .row-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
  }
  .contact-rows .row .k{
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-2);
    flex-shrink: 0;
    font-weight: 600;
  }
  .contact-rows .row .v{
    font-family: var(--sans);
    font-size: 15px;
    color: var(--paper);
    text-align: right;
  }
  .contact-rows .row a.v:hover{ color: var(--gold); }

  .contact-cta{
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-self: end;
    width: 100%;
    max-width: 280px;
  }
  .contact-cta .btn{ justify-content: center; width: 100%; }
  .contact-cta p{
    font-size: 14px;
    color: var(--gold-dim);
    line-height: 1.6;
    margin: 6px 0 0;
  }

  /* Staggered slide-in for contact rows, same cascade trick used on the
     benefit/course card grids elsewhere on the page. */
  .contact-rows .row{
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s ease, padding-left 0.25s ease;
  }
  .contact-rows.is-visible .row{ opacity: 1; transform: translateX(0); }
  .contact-rows.is-visible .row:nth-child(1){ transition-delay: 0.05s; }
  .contact-rows.is-visible .row:nth-child(2){ transition-delay: 0.12s; }
  .contact-rows.is-visible .row:nth-child(3){ transition-delay: 0.19s; }
  .contact-rows.is-visible .row:nth-child(4){ transition-delay: 0.26s; }
  @media (prefers-reduced-motion: reduce){
    .contact-rows .row{ opacity: 1; transform: none; transition: background 0.25s ease; }
  }

  @media (max-width: 760px){
    .contact-wrap{ padding: 28px 24px; }
  }

  /* ============================================================
     CONTACT CARD — RESPONSIVE-ONLY FIXES (tablet + mobile)
     Desktop rules above (.contact-wrap, .contact-rows, .contact-cta,
     etc.) are untouched. Everything below only adjusts layout,
     spacing and sizing at narrower widths — no new colors, fonts,
     icons, or shadows are introduced.
     ============================================================ */

  /* Tablet (≤1024px): the two-column grid used on desktop is what
     was breaking here — info and buttons stayed side by side and got
     squeezed. Collapse to one column, same as the existing ≤760px
     rule, so info stacks above the buttons at every width below desktop. */
  @media (max-width: 1024px){
    .contact-wrap{ grid-template-columns: 1fr; gap: 32px; }
    .contact-cta{ justify-self: stretch; max-width: 100%; }
  }

  @media (max-width: 768px){
    /* Let the card read as "full width" by tightening the section's
       outer gutter, instead of double-padding (outer wrap + card). */
    #contact .wrap{ padding: 0 20px; }
    .contact-wrap{ padding: 26px 20px; border-radius: 16px; gap: 26px; }

    /* Heading + subtitle centered on narrow screens (scoped to this
       section only — .sec-head is shared site-wide). */
    #contact .sec-head{ flex-direction: column; text-align: center; align-items: center; }
    #contact .sec-head::after{ left: 50%; transform: translateX(-50%); }
  }

  @media (max-width: 576px){
    #contact .wrap{ padding: 0 18px; }
    .contact-wrap{ padding: 22px 16px; gap: 20px; }
    .contact-rows .row{ padding: 12px 4px; gap: 12px; }

    /* Label above value instead of space-between: prevents the value
       (email/address) from being squeezed against a right-aligned
       edge, and lets long text wrap naturally without overflowing. */
    .row-content{ flex-direction: column; align-items: flex-start; gap: 3px; }
    .contact-rows .row .v{
      text-align: left;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .contact-icon{ width: 38px; height: 38px; font-size: 16px; }
  }

  @media (max-width: 480px){
    #contact .wrap{ padding: 0 16px; }
    .contact-wrap{ padding: 20px 16px; gap: 18px; border-radius: 14px; }
    #contact .sec-head h2{ font-size: 22px; }
    #contact .sec-tag{ font-size: 12px; }
    .contact-rows .row .k{ font-size: 12.5px; }
    .contact-rows .row .v{ font-size: 14px; }
    .contact-cta{ gap: 12px; }
    .contact-cta p{ font-size: 13px; }
    .pay-note{ font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word; margin-top: 18px; }
  }

  @media (max-width: 390px){
    .contact-wrap{ padding: 18px 14px; gap: 16px; }
    .contact-rows .row{ padding: 10px 2px; gap: 10px; }
    .contact-icon{ width: 34px; height: 34px; font-size: 15px; }
  }

  @media (max-width: 360px){
    #contact .wrap{ padding: 0 14px; }
    .contact-wrap{ padding: 16px 12px; border-radius: 12px; }
    #contact .sec-head h2{ font-size: 20px; }
    .contact-rows .row .v{ font-size: 13.5px; }
    .pay-note{ font-size: 11px; }
  }

  @media (max-width: 320px){
    .contact-wrap{ padding: 14px 10px; }
    .contact-icon{ width: 30px; height: 30px; font-size: 14px; }
    #contact .sec-head h2{ font-size: 18px; }
    #contact .sec-tag{ font-size: 10.5px; }
    .contact-rows .row .k{ font-size: 11.5px; }
    .contact-rows .row .v{ font-size: 13px; }
  }

  /* ============================================================
     WEBINAR SECTION (namespaced with .wb- where it would otherwise
     collide with homepage rules of the same name, e.g. .hero)
     ============================================================ */

  /* Admit card — the page's signature element, now doubling as the hero visual */
  .admit-wrap{ display: flex; flex-direction: column; gap: 20px; }
  .admit-card{
    position: relative;
    background: var(--lime);
    border: 1.5px solid var(--gold-dim);
    border-radius: 10px;
    padding: 26px 26px 20px;
    box-shadow: 0 24px 50px rgba(11,42,77,0.16), 0 8px 20px rgba(11,42,77,0.1);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease;
  }
  .admit-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(11,42,77,0.2), 0 10px 24px rgba(255,139,61,0.16);
  }
  @media (prefers-reduced-motion: reduce){
    .admit-card{ transition: none; }
    .admit-card:hover{ transform: none; }
  }
  .admit-notch{
    position: absolute;
    top: 50%;
    width: 22px; height: 22px;
    background: var(--bg);
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .admit-notch-l{ left: -12px; }
  .admit-notch-r{ right: -12px; }
  .admit-top{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; margin-top: 132px; margin-bottom: 18px; flex-wrap: wrap; gap: 6px; }
  .admit-label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .admit-label-gold{ color: var(--lime); }
  .admit-mid{ display: flex; flex-direction: column; gap: 12px; }
  .admit-row{ display: flex; justify-content: space-between; gap: 12px; }
  .admit-row .k{  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
  .admit-row .v{ font-family: var(--sans); font-size: 13.5px; color: var(--paper); text-align: right; }
  .seat-status{ color: var(--gold-dim); animation: pulse-soft 1.6s ease-in-out infinite; }
  .admit-perforation{
    height: 0;
    border-top: 1px dashed var(--rule);
    margin: 20px 0 16px;
  }
  .admit-bottom{ display: flex; justify-content: space-between; align-items: center; }
  .admit-mono{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--gold-dim); }
  .admit-barcode{
    width: 90px; height: 20px;
    background: repeating-linear-gradient(90deg, var(--gold-dim) 0 2px, transparent 2px 5px);
    opacity: 0.7;
  }

  /* "Limited Seats" CTA — replaces the old Seat Status row + barcode strip.
     Reuses the site's established gold-gradient button language (same
     gradient token, same hover lift used by .btn-gold elsewhere) so it
     matches "the rest of the design", but full-width, fully rounded,
     and with a dark border/shadow so it still reads clearly against the
     card's new golden background. */
  .admit-cta-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
    background: var(--gradient-hot);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #ed0505;
    border: 1.5px solid #1a0f08;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--poppins);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background-position 0.5s ease;
  }
  .admit-cta-btn:hover{
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  }
  @media (prefers-reduced-motion: reduce){
    .admit-cta-btn{ transition: none; }
    .admit-cta-btn:hover{ transform: none; }
  }

  /* ---------- REALITY CHECK ---------- */
  .reality-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .reality-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .reality-icon{ font-size: 22px; display: block; margin-bottom: 12px; }
  .reality-card p{ font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0; }

  /* ---------- COST OF INACTION ---------- */
  .cost-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 30px 30px 26px; }
  .cost-card ul{ margin: 0 0 18px; padding-left: 20px; }
  .cost-card li{ font-size: 14.5px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
  .cost-note{ font-size: 13px; color: var(--muted); margin: 0; font-family: var(--mono); }

  /* ---------- WEBINAR AGENDA — numbered vertical timeline ---------- */
  .agenda-timeline{
    position: relative;
    padding-left: 8px;
  }
  .agenda-timeline.on-scroll{ opacity: 1; transform: none; transition: none; }
  .agenda-line{
    position: absolute;
    top: 20px; bottom: 20px; left: 27px;
    width: 2px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
  }
  .agenda-line-fill{
    display: block;
    width: 100%;
    height: 0%;
    background: var(--gradient-hot);
    transition: height 1.6s cubic-bezier(0.2,0.7,0.3,1);
    
  }
  .agenda-timeline.is-visible .agenda-line-fill{ height: 100%; }
  .agenda-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 0;
  }
  .agenda-num{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--gold-dim);
    color: var(--gold-dim);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(11,42,77,0.08);
  }
 .agenda-item p{
  background: var(--panel);
  border: 3px solid var(--lime);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper);
  margin: 0;
  flex: 0 1 auto;       /* was: flex: 1 */
  width: fit-content;   /* new */
  max-width: 100%;      /* new */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

  .agenda-item:hover p{
    transform: translateX(6px);
    border-color: var(--violet);
    box-shadow: 0 6px 16px rgba(30,118,198,0.12);
  }
  /* Staggered cascade — each item settles in slightly after the previous one */
  .agenda-item.on-scroll:nth-child(3){ transition-delay: 0.05s; }
  .agenda-item.on-scroll:nth-child(4){ transition-delay: 0.1s; }
  .agenda-item.on-scroll:nth-child(5){ transition-delay: 0.15s; }
  .agenda-item.on-scroll:nth-child(6){ transition-delay: 0.2s; }
  .agenda-item.on-scroll:nth-child(7){ transition-delay: 0.25s; }
  .agenda-item.on-scroll:nth-child(8){ transition-delay: 0.3s; }
  .agenda-item.on-scroll:nth-child(9){ transition-delay: 0.35s; }
  .agenda-item.on-scroll:nth-child(10){ transition-delay: 0.4s; }
  .agenda-item.on-scroll:nth-child(11){ transition-delay: 0.45s; }
  @media (max-width: 560px){
    .agenda-line{ left: 23px; }
    .agenda-num{ width: 32px; height: 32px; font-size: 11px; }
    .agenda-item p{ font-size: 13.5px; padding: 10px 16px; }
  }

  /* ---------- PROBLEM SECTION — "Is this your story?" card grid ---------- */
  .problem-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .problem-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .problem-card:hover{
    transform: translateY(-4px);
    border-color: #e0625a;
    box-shadow: 0 14px 28px rgba(224,98,90,0.14), 0 6px 14px rgba(224,98,90,0.08);
  }
  .problem-icon{
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgb(172, 16, 16);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255,139,61,0.35);
  }
  .problem-card p{
    font-size: 16.5px;
    line-height: 1.55;
    color: #0d0d0d;
    margin: 4px 0 0;
    font-weight: 600;
  }
  .problem-callout{
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(100deg, rgba(255,139,61,0.1), rgba(30,118,198,0.07));
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 18px 24px;
    margin-bottom: 30px;
  }
  .problem-callout-icon{ font-size: 22px; flex-shrink: 0; }
  .problem-callout p{
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
  }
  .problem-callout p strong{ color: var(--gold-dim); }
  @media (max-width: 720px){
    .problem-grid{ grid-template-columns: 1fr; }
    .problem-callout{ flex-direction: column; align-items: flex-start; text-align: left; }
  }

  /* ---------- PAYMENT TERMS ---------- */
  .pay-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pay-grid-3{ grid-template-columns: repeat(3, 1fr); }
  .pay-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .pay-icon{ font-size: 22px; display: block; margin-bottom: 12px; }
  .pay-card h3{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--paper); margin: 0 0 10px; }
  .pay-card p{ font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; }
  .pay-note{ font-size: 12.5px; color: var(--muted); font-family: var(--mono); margin: 22px 0 0; }

  /* Accepted-payment-methods block shown inside the Thank You popup */
  .thankyou-pay{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 16px 18px;
    margin: 0 0 22px;
  }
  .thankyou-pay-label{
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .thankyou-pay p{
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
  }

  /* ---------- OPPORTUNITY ---------- */
  .opportunity-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .opportunity-grid h2{ font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--paper); margin: 0 0 26px; line-height: 1.3; }
  .opp-visual{ display: flex; justify-content: center; }
  .opp-visual svg{ width: 100%; max-width: 300px; }
  .opp-svg-label{ font-family: var(--mono); fill: var(--paper); }
  .opp-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 28px; }
  .opp-card p{ font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
  .opp-cta{ margin-top: 6px; width: 100%; justify-content: center; }

  /* ---------- BLUEPRINT ---------- */
  .blueprint-intro{ font-size: 14.5px; color: var(--text); max-width: 70ch; margin: 0 0 30px; }
  .blueprint-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bp-card{ background: #ffffff; border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; }
  .bp-num{ font-weight: bold; font-family: var(--mono); font-size: 14px; color: #3a2d02; letter-spacing: 0.1em; }
  .bp-card h3{ font-family: var(--serif); font-weight: bold; font-size: 18.5px; color: var(--paper); margin: 8px 0 8px; }
  .bp-card p{ font-size: 17.5px; line-height: 1.55; color: #012e09; margin: 0; }

  /* ---------- OUTCOMES ---------- */
  .outcomes-intro{ font-size: 14.5px; color: var(--text); max-width: 70ch; margin: 0 0 30px; }
  .outcomes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  /* ---------- BENEFITS — premium horizontal cards ----------
     Scoped to #benefits .benefit-card so the shared .outcome-card
     tiles used in the Trust section are completely untouched.
     Section title, tag, background, and spacing are unchanged. */
  #benefits .benefit-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    align-items: stretch;
  }
  #benefits .benefit-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(11,42,77,0.08);
    border-left: 5px solid var(--accent, var(--lime));
    border-radius: 18px;
    padding: 20px 20px 20px 18px;
    box-shadow: 0 8px 22px rgba(6,14,28,0.18);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease;
  }
  #benefits .benefit-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(6,14,28,0.28);
  }
  #benefits .benefit-icon{
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
   
    background: var(--accent-soft, rgba(31,165,104,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
  #benefits .benefit-text{ min-width: 0; }
  #benefits .benefit-title{
    font-family: var(--poppins);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 17.5px;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: darkgreen;
    margin: 0 0 4px;
  }
  #benefits .benefit-sub{
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--lime);
    margin: 0;
  }

  /* Per-card accent colors, matching each card's requested border color */
  #benefits .benefit-card--c1{ --accent: var(--lime);   --accent-soft: rgba(31,165,104,0.12); }   /* Career Direction — green */
  #benefits .benefit-card--c2{ --accent: var(--lime); --accent-soft: rgba(30,118,198,0.12); }   /* Confidence Boost — blue */
  #benefits .benefit-card--c3{ --accent: var(--lime); --accent-soft: rgba(217,99,26,0.12); }    /* Industry Knowledge — orange */
  #benefits .benefit-card--c4{ --accent: var(--lime); --accent-soft: rgba(124,92,255,0.12); }   /* Skill Roadmap — purple */
  #benefits .benefit-card--c5{ --accent: var(--lime);   --accent-soft: rgba(31,165,104,0.12); }   /* Resume Template — green */
  #benefits .benefit-card--c6{ --accent: var(--lime);        --accent-soft: rgba(224,52,47,0.1); }     /* Interview Questions PDF — red */
  #benefits .benefit-card--c7{ --accent: var(--lime);    --accent-soft: rgba(255,196,0,0.14); }    /* WhatsApp Support — yellow */
  #benefits .benefit-card--c8{ --accent: var(--lime);        --accent-soft: rgba(236,72,153,0.12); }   /* Course Discount — pink */
  #benefits .benefit-card--c9{ --accent: var(--lime);    --accent-soft: rgba(10,160,209,0.12); }   /* Bonus Resources — cyan */

  @media (max-width: 900px){
    #benefits .benefit-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    #benefits .benefit-grid{ grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    #benefits .benefit-card{ transition: none; }
  }
  .outcome-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
  .check{ font-size: 16px; }
  .outcome-card p{ font-size: 14px; line-height: 1.6; color: var(--text); margin: 10px 0 0; }

  /* ---------- WHO SHOULD JOIN — audience-fit card grid ---------- */
  .who-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .who-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 36px 22px 26px;
    box-shadow: 0 4px 18px rgba(11,42,77,0.07), 0 1px 4px rgba(11,42,77,0.05);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .who-card:hover{
    transform: translateY(-6px);
    border-color: var(--violet);
    box-shadow: 0 22px 40px rgba(30,118,198,0.16), 0 8px 18px rgba(46,139,255,0.1);
  }
  .who-num{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:  #7CFC00;
    color: #000;
    font-family: var(--poppins);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .who-icon{
    flex-shrink: 0;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,139,61,0.14), rgba(30,118,198,0.14));
    border: 2px solid #7CFC00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin-bottom: 8px;
  }
  .who-title{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 20px;
    line-height: 1.35;
    color: var(--paper);
    margin: 0;
  }
  .who-sub{
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.55;
    color: rgb(57, 90, 19);
    margin: 0;
  }
  @media (max-width: 900px){
    .who-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .who-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- DECISION CLARITY ---------- */
  .clarity-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .clarity-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .clarity-card-gold{
    border-color: var(--gold);
    background: linear-gradient(160deg, rgba(255,139,61,0.08), var(--panel) 55%);
    box-shadow: 0 0 0 1px rgba(255,139,61,0.08);
  }
  .clarity-card h3{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--paper); margin: 0 0 12px; }
  .clarity-card p{ font-size: 14px; line-height: 1.65; color: var(--text); margin: 0; }

  /* ---------- SOCIAL PROOF ---------- */
  .quote-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .quote-card{ background: #c9e293 ; border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .quote-avatar{
     width: 70%; height: 50px; 
    background: var(--rule-soft); border: 1px solid var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 16px; color: var(--gold);
    margin-bottom: 14px;
  }
  .quote-card p{ font-size: 18px; line-height: 1.6; color: var(--navy); margin: 0 0 14px; font-style: italic; }
  .quote-name{ font-family: var(--mono); font-size: 13px; color: var(--navy-2); }

  /* ---------- FAQ ---------- */
  .faq-list{ display: flex; flex-direction: column; gap: 10px; }
  .faq-item{
    background: #fbfbfb; border: 3px solid var(--lime); border-radius: 7px;
    padding: 18px 22px; text-align: left; cursor: pointer; width: 100%;
    display: flex; flex-direction: column; gap: 0;
    font: inherit; color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  }
  .faq-item:hover{ border-color: var(#636805); transform: translateY(-2px); border: 3px solid var(--navy); }
  .faq-item[aria-expanded="true"]{
    border-color: var(--text);
    box-shadow: 0 10px 26px rgba(46,139,255,0.16);
  }
  .faq-q{ display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: bold; color: var(--paper); border: 1px solid var(--navy); border-radius: 6px; padding: 10px 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; }
  .faq-arrow{ font-size: 10px; color: var(--gold); transition: transform 0.2s ease; flex-shrink: 0; }
  .faq-item[aria-expanded="true"] .faq-arrow{ transform: rotate(90deg); }
  .faq-a{
    font-weight: 500; font-size: 16px; line-height: 1.6; color:#03390c ; 
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-top: 0;
    border-top: 1px solid var(--navy);
    border-radius: 1px solid var(--navy); border-radius: 6px; padding: 10px 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; 
  
  }
  .faq-item[aria-expanded="true"] .faq-a{ max-height: 200px; opacity: 1; margin-top: 12px; }

  /* ---------- FINAL CTA (masterclass registration) ---------- */
  .final-wrap{ text-align: left; }
  .final-wrap h2{ font-family: var(--inner); font-weight: 500; font-size: 30px; color: var(--paper); margin: 0 0 18px; max-width: 22ch; }
  .final-lede{ font-size: 15px; line-height: 1.65; color: rgb(245, 248, 219); max-width: 62ch; margin: 0 0 28px; }
  .final-cta-row{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .final-note{ font-family: var(--mono); font-size: 15px; color: var(--muted); }

  /* ---------- FIXED REGISTRATION FOOTER ---------- */
  .reg-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: rgba(7,26,51,0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--on-dark-rule);
    padding: 14px 0;
  }
  .reg-footer-inner{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .reg-footer-info{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .reg-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse-soft 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .reg-footer-text{
    font-size: 14px;
    font-weight: bold;
    color: var(--on-dark-dim);
    white-space: nowrap;
  }
  .reg-footer-text strong{ color: var(--on-dark); }
  .reg-footer-actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .btn-whatsapp{
    background: #25D366;
    color: #06210f;
    border: 1px solid #25D366;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .btn-whatsapp:hover{
    background: #2fe375;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37,211,102,0.3);
  }

  /* ---------- STICKY FOOTER — live countdown timer (replaces WhatsApp button) ---------- */
  .footer-countdown{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .footer-cd-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 5px 8px;
    background: rgba(255,196,0,0.1);
    border: 1px solid rgba(255,196,0,0.32);
    border-radius: 6px;
  }
  .footer-cd-num{
    font-family: var(--mono);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.1;
    color: var(--gold);
  }
  .footer-cd-k{
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    margin-top: 1px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 760px){
    :root{
      --mobile-topbar-h: 150px;  /* fixed header: brand heading + Register button, stacked */
      --mobile-footer-h: 128px;  /* sticky footer: info line + Register/WhatsApp buttons */
    }

    body{ padding-top: var(--mobile-topbar-h); padding-bottom: var(--mobile-footer-h); }

    /* ---- Hero section header: heading + Register button synced and centered ---- */
    .topbar-inner{
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
    }
    .topbar-brand{ width: 100%; justify-content: center; }
    .topbar-brand-text{ align-items: center; text-align: center; width: 100%; }
    .topbar-tag{
      font-size: clamp(15px, 5vw, 19px);
      line-height: 1.3;
      text-align: center;
    }
    .topbar-cta{ width: 100%; align-items: center; gap: 6px; }
    .btn-topbar{ width: 100%; max-width: 320px; justify-content: center; }

    .hero{ padding-top: 36px; }
    .hero-grid{ grid-template-columns: 1fr; }
    .stat-strip{ grid-template-columns: repeat(2, 1fr); }
    .why-grid{ grid-template-columns: 1fr; }
    .contact-wrap{ grid-template-columns: 1fr; }
    .contact-cta{ justify-self: start; max-width: 100%; }
    .ledger-name{ white-space: normal; font-size: 15px; }
    .ledger-row{ flex-wrap: wrap; }
    .ledger-dots{ display: none; }

    .reality-grid, .opportunity-grid, .blueprint-grid, .outcomes-grid, .clarity-grid, .quote-grid, .pay-grid{
      grid-template-columns: 1fr;
    }
    .final-wrap h2{ max-width: 100%; }

    /* ---- Sticky footer: Register button + live countdown, aligned and balanced ---- */
    .reg-footer-inner{ flex-direction: column; align-items: stretch; gap: 8px; }
    .reg-footer-info{ justify-content: center; text-align: center; }
    .reg-footer-text{ white-space: normal; }
    .reg-footer-actions{ justify-content: center; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
    .reg-footer-actions .btn{
      flex: 1 1 55%;
      height: 46px;
      min-height: 46px;
      padding: 0 10px;
      box-sizing: border-box;
      justify-content: center;
    }
    .footer-countdown{
      flex: 1 1 45%;
      height: 46px;
      justify-content: center;
      gap: 4px;
    }
    .footer-cd-box{
      flex: 1;
      min-width: 0;
      height: 100%;
      padding: 3px 2px;
      box-sizing: border-box;
    }
    .footer-cd-num{ font-size: 13px; }
    .footer-cd-k{ font-size: 7px; }

    /* ---- Popup modal: fits between the fixed header and sticky footer ---- */
    .modal-overlay{
      align-items: flex-start;
      padding: calc(var(--mobile-topbar-h) + 14px) 16px calc(var(--mobile-footer-h) + 14px);
    }
    .modal-panel{
      display: flex;
      flex-direction: column;
      width: 100%;
      max-height: calc(100vh - var(--mobile-topbar-h) - var(--mobile-footer-h) - 28px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .modal-close{
      position: sticky;
      top: 0;
      align-self: flex-end;
      margin-bottom: -30px;
      background: rgba(255,255,255,0.92);
      z-index: 5;
    }
  }
  @media (max-width: 400px){
    .reg-footer-actions .btn{ font-size: 12.5px; padding: 0 8px; }
    .footer-countdown{ gap: 3px; }
    .footer-cd-box{ padding: 2px 1px; }
    .footer-cd-num{ font-size: 11.5px; }
    .footer-cd-k{ font-size: 6.5px; }
  }

  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ---------- COURSE DETAILS MODAL ---------- */
  .modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6,8,11,0.7);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .modal-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .modal-panel{
    position: relative;
    width: 100%;
    max-width: 460px;
    background: linear-gradient(165deg, var(--panel), var(--bg-2));
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 36px 32px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(255,196,0,0.18);
    transform: scale(0.82) translateY(28px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .modal-overlay.is-open .modal-panel{
    animation: modal-pop-in 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
  }
  @keyframes modal-pop-in{
    0%{ transform: scale(0.82) translateY(28px); opacity: 0; }
    60%{ transform: scale(1.02) translateY(-3px); opacity: 1; }
    100%{ transform: scale(1) translateY(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce){
    .modal-panel{ transform: none; opacity: 1; }
    .modal-overlay.is-open .modal-panel{ animation: none; }
  }
  /* Staggered reveal for content inside any popup, driven by nth-child
     so the eyebrow, title, copy, and fields cascade in one after another
     instead of appearing all at once. */
  .modal-panel > *{
    opacity: 0;
    transform: translateY(10px);
    animation: modal-child-in 0.4s ease forwards;
    animation-delay: calc(var(--child-i, 0) * 0.06s + 0.15s);
  }
  .modal-panel > *:nth-child(1){ --child-i: 0; }
  .modal-panel > *:nth-child(2){ --child-i: 1; }
  .modal-panel > *:nth-child(3){ --child-i: 2; }
  .modal-panel > *:nth-child(4){ --child-i: 3; }
  .modal-panel > *:nth-child(5){ --child-i: 4; }
  .modal-panel > *:nth-child(6){ --child-i: 5; }
  .modal-panel > *:nth-child(7){ --child-i: 6; }
  .modal-panel > *:nth-child(8){ --child-i: 7; }
  .modal-panel > *:nth-child(9){ --child-i: 8; }
  @keyframes modal-child-in{
    to{ opacity: 1; transform: translateY(0); }
  }
  .modal-overlay:not(.is-open) .modal-panel > *{
    animation: none;
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce){
    .modal-panel > *{ animation: none; opacity: 1; transform: none; }
  }
  .modal-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: #08101F;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .modal-close:hover{
    border-color: var(--gold-dim);
    color: var(--gold);
  }
  .modal-eyebrow{
    font-family: var(--poppins);
    font-size: 11px;
    letter-spacing: 0.15em;
   /* text-transform: uppercase;*/
    color: #452c05;
    font-weight: 600;
  }
  .modal-title{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 24px;
    color: var(--paper);
    margin: 10px 0 14px;
    line-height: 1.25;
  }
  .modal-blurb{
    font-size: 14.5px;
    line-height: 1.65;
    color: black;
    margin: 0 0 22px;
  
    font-weight: 700;
  }
  .modal-fee-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 22px;
  }
  .modal-fee-row .k{
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .modal-fee-row .v{
    font-family: var(--mono);
    font-size: 18px;
    color: var(--gold);
  }
  .modal-fee-values{
    display: flex;
    align-items: baseline;
  }
  .modal-fee-row .modal-fee-original{
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: line-through;
    margin-left: 8px;
  }
  .modal-page-link{
    display: inline-block;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--gold-dim);
    text-decoration: none;
    margin: -8px 0 22px;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .modal-page-link:hover{
    color: var(--gold);
    transform: translateX(2px);
  }
  .modal-page-link[hidden]{ display: none; }
  .modal-cta{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .modal-cta .btn{ flex: 1; justify-content: center; }

  body.modal-open{ overflow: hidden; }

  /* ---------- PROMO POPUP (welcome + exit-intent) — dark brand theme,
     matching the rest of the site's palette ---------- */
  .promo-panel-light{
    
    --p-bg: linear-gradient(160deg, var(--lime), var(--bg-2));
    --p-ink: var(--muted);
    --p-orange: var(--gold);
    --p-orange-2: var(--gold-dim);
    --p-orange-soft: rgba(207, 236, 41, 0.14);
    --p-muted: var(--text);
    --p-rule: var(--rule);

    background: linear-gradient(180deg, #fff, #fff);
    border-color: var(--p-orange-2);
    box-shadow: 0 24px 60px rgba(242, 238, 238, 0.5), 0 0 46px rgba(177, 137, 8, 0.22);
    text-align: center;
    max-width: 400px;
    padding: 30px 26px 22px;
    overflow: hidden;
  }
  .promo-close-light{
    background: var(--bg-2);
    border-color: var(--rule);
    color: var(--muted);
  }
  .promo-close-light:hover{
    border-color: var(--gold);
    color: var(--gold);
  }

  .promo-badge-top{
    display: inline-block;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #14110a;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
    animation: badge-glow 2.4s ease-in-out infinite;
  }
  @keyframes badge-glow{
    0%, 100%{ box-shadow: 0 0 0 rgba(255,139,61,0); }
    50%{ box-shadow: 0 0 18px rgba(255,139,61,0.55); }
  }
  .promo-brand{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 30px;
    color: #1a4606;
    margin: 0 0 6px;
    position: relative;
    z-index: 2;
  }
  .promo-sunburst{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    animation: sunburst-spin 26s linear infinite;
  }
  .promo-sunburst svg{ width: 100%; height: 100%; }
  @keyframes sunburst-spin{
    to{ transform: translateX(-50%) rotate(360deg); }
  }

  .promo-headline{
    position: relative;
    z-index: 2;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.4;
    color: #eb1022;
    max-width: 32ch;
    margin: 4px auto 12px;
    font-weight: bold;
  }
  .promo-highlight{
    display: inline-block;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #140c0a;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14.5px;
    padding: 2px 9px;
    border-radius: 6px;
    margin: 0 2px;
    transform: translateY(-1px);
  }
  .promo-icon{ font-style: normal; }

  .promo-sub{
    position: relative;
    z-index: 1;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: black;
    max-width: 42ch;
    margin: 0 auto 18px;
  }

  .promo-stats-row{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }
  .promo-stat-badge{
    background: var(--bg-2);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    animation: badge-float 3.2s ease-in-out infinite;
  }
  .promo-stat-badge:nth-child(2){ animation-delay: 0.3s; }
  .promo-stat-badge:nth-child(3){ animation-delay: 0.6s; }
  @keyframes badge-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }

  .promo-offer-bar{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    text-align: left;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    margin-bottom: 14px;
  }
  .promo-offer-left{ display: flex; flex-direction: column; gap: 4px; }
  .promo-offer-almost{
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 900;
    color: black;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .promo-offer-almost::before{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse-soft 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .promo-offer-price{ display: flex; align-items: baseline; gap: 8px; }
  .promo-price-free{
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 900;
    color: var(--paper);
  }
  .promo-price-strike{
    font-family: var(--sans);
    font-size: 14px;
    color: #1fa568;
    text-decoration: line-through;
     font-weight: 500;
  }
  .promo-offer-timer{
    font-family: var(--mono);
    font-size: 13px;
    color: #3c2603;
    font-weight: 600;
  }
  .promo-offer-cta{
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #14110a;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 8px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: cta-breathe 2.2s ease-in-out infinite;
  }
  .promo-offer-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(46,139,255,0.35);
    animation-play-state: paused;
  }
  @keyframes cta-breathe{
    0%, 100%{ box-shadow: 0 0 0 rgba(46,139,255,0); }
    50%{ box-shadow: 0 8px 26px rgba(46,139,255,0.4); }
  }

  .promo-dismiss-link{
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
  }
  .promo-dismiss-link:hover{ color: var(--gold); }

  @media (prefers-reduced-motion: reduce){
    .promo-sunburst,
    .promo-badge-top,
    .promo-offer-almost::before,
    .promo-offer-cta,
    .promo-stat-badge{
      animation: none;
    }
  }

  @media (max-width: 760px){
    /* .promo-panel-light sets `overflow: hidden` (below, to crop the
       decorative sunburst neatly on desktop). That rule has the same
       specificity as, and comes after, .modal-panel's mobile
       `overflow-y: auto` + `max-height` rule — so on phones/tablets it
       was winning the cascade and silently clipping the bottom of the
       popup (CTA button, dismiss link) with no way to scroll to it.
       Restore vertical scrolling here, keep horizontal clipping so the
       sunburst still doesn't bleed past the rounded corners. */
    .promo-panel-light{
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (max-width: 520px){
    .promo-panel-light{ padding: 26px 18px 20px; }
    .promo-offer-bar{ flex-direction: column; align-items: stretch; text-align: center; }
    .promo-offer-left{ align-items: center; }
    .promo-offer-cta{ width: 100%; }
  }

  @media (max-width: 520px){
    .modal-panel{ padding: 30px 22px 26px; }
    .modal-cta{ flex-direction: column; }
  }

  /* ---------- THANK YOU POPUP (after registration) ---------- */
  .thankyou-panel{
    background: #ffffff;
    border: 2px solid var(--lime);
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 0 46px rgba(31,165,104,0.22);
  }
  /* .thankyou-panel's `overflow: hidden` above (needed to clip the
     decorative .ty-glow circle to the card's rounded corners) has the
     same specificity as, and comes after, .modal-panel's mobile
     `overflow-y: auto` + `max-height` rule — so on phones/tablets it
     was winning the cascade and silently blocking scroll, trapping the
     bottom of the popup (WhatsApp/Home buttons) off-screen with no way
     to reach them. Same fix as .promo-panel-light: restore vertical
     scrolling here, keep horizontal clipping so the glow still doesn't
     bleed past the rounded corners. */
  @media (max-width: 760px){
    .thankyou-panel{
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
  }
  .ty-glow{
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31,165,104,0.22), transparent 70%);
    pointer-events: none;
  }
  .ty-check{
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe066, var(--gold) 55%, var(--gold-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(255,196,0,0.35);
  }
  .ty-check-icon{ width: 40px; height: 40px; display: block; }
  .thankyou-panel .modal-eyebrow{
    position: relative;
    display: inline-block;
    color: #1c5e06;
    background: rgba(31,165,104,0.12);
    border: 1px solid rgba(31,165,104,0.35);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .thankyou-panel .modal-title{ position: relative; }
  .thankyou-panel .modal-blurb{
    position: relative;
    color: #334155;
    font-weight: 500;
  }
  .thankyou-panel .modal-blurb strong{ color: var(--paper); font-weight: 700; }
  .thankyou-panel .modal-cta{
    position: relative;
    flex-direction: column;
  }
  .thankyou-panel .btn-whatsapp{
    order: -1;
    border-radius: 999px;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37,211,102,0.3);
  }
  .thankyou-panel .btn-whatsapp:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37,211,102,0.4);
  }
  .thankyou-panel .btn-ghost{ border-radius: 999px; }
  .wa-icon{ width: 18px; height: 18px; flex-shrink: 0; }

  /* ---------- REGISTRATION FORM POPUP ---------- */
  .reg-panel{
    background: linear-gradient(180deg, #ffffff, #fdf5e2);
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(255,196,0,0.2);
  }

  /* ---------- PAYMENT POPUP (after registration, before Thank You) ---------- */
  .payment-panel{
    background: #ffffff;
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(255,196,0,0.22);
  }
  .payment-panel .modal-blurb strong{ color: var(--paper); }
  .payment-panel .modal-fee-row{ border-top-color: rgba(11,42,77,0.14); border-bottom-color: rgba(11,42,77,0.14); }
  .payment-panel .modal-fee-row .k{ color: #6b5a30; }
  .payment-panel .modal-fee-row .v{ color: #8e3e0c; }
  .payment-panel .modal-fee-row .modal-fee-original{ color: #8a8a8a; }
  .payment-panel .payment-error{ color: #b3261e; }
  .payment-error{
    background: rgba(255,61,90,0.12);
    border: 1px solid #ff6b6b;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #ffb3ac;
    margin: 4px 0 0;
  }
  .payment-onrequest{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 18px;
    margin: 4px 0 0;
  }
  .payment-onrequest p{
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 16px;
  }
  .payment-onrequest .modal-cta{ margin: 0; }
  .reg-modal-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
  }
  .reg-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .reg-field-label{
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #125004;
    font-weight: bold;
  }
  .reg-input{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 12px 14px;
    color: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .reg-input::placeholder{ color: var(--muted); }
  .reg-input:focus{ outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,196,0,0.15); }
  .reg-select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237c8794'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
  }
  .reg-select option{
    background: var(--bg-2);
    color: var(--paper);
  }
  .reg-select:invalid{ color: var(--muted); }
  .reg-select option:not(:first-child){ color: var(--paper); }
  .reg-modal-submit{ justify-content: center; margin-top: 4px; }
/* ---------- Additions for the ZERO TO HERO CAREER WEBINAR content refresh ---------- */

/* Floating WhatsApp button — persistent quick-contact affordance requested
   alongside the sticky register bar. */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 40;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
@media (max-width: 640px){
  .whatsapp-float{ right: 14px; bottom: 84px; width: 50px; height: 50px; font-size: 22px; }
}

/* Strikethrough original price inside headings, e.g. "₹499 → ₹199" */
.offer-strike{
  color: #ffffff;
  font-weight: bold;
  font-size: 17px;
  text-decoration: line-through;
  text-decoration-color:rgb(195, 39, 39);
  text-decoration-thickness:2px;
  margin-right: 4px;
}

/* Trainer mission line inside the "Meet Your Trainer" contact-style card */
/* ---------- MEET YOUR TRAINER — profile card ---------- */
.trainer-wrap{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  
}
.trainer-main{
  background: var(--panel);
  border: 2px solid var(--lime);
  border-radius: 10px;
  padding: 28px 30px;
  box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
}
.trainer-profile{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.trainer-avatar{
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--gradient-hot);
  color: #1a0f08;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(217,99,26,0.3);
  object-fit: cover;
  object-position: center top;
}
.trainer-name{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--paper);
  margin: 0 0 4px;
}
.trainer-role{
  font-size: 14.5px;
  font-weight: bold;
  color: #dfd926;
  margin: 0 0 2px;
}
.trainer-subrole{
  font-size: 15px;
  color: var(--gold-dim);
  font-weight: 500;
  margin: 0;
}
.trainer-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trainer-tag{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet);
  background: rgba(30,118,198,0.08);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 7px 14px;
}
.trainer-side{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trainer-mission-box{
  background: linear-gradient(100deg, rgba(255,139,61,0.1), rgba(30,118,198,0.07));
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  padding: 20px 22px;
}
.trainer-mission-icon{ font-size: 20px; display: block; margin-bottom: 8px; }
.trainer-mission-box p{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.trainer-mission-box p strong{ color: var(--gold-dim); }
.trainer-side .btn{ justify-content: center; width: 100%; }
@media (max-width: 800px){
  .trainer-wrap{ grid-template-columns: 1fr; }
  .trainer-profile{ flex-wrap: wrap; }
}

/* Footer legal placeholder links (Privacy / Terms / Refund) */
.footer-legal-link{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal-link:hover{ color: var(--gold); }

/* "Free Bonus Worth ₹999" line under the hero CTA row */
.hero-bonus-line{
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  margin: 14px 0 0;
}
.hero-bonus-line strong{ color: var(--gold); }

/* ---------- REDESIGN PASS: warmer palette + motion ---------- */

/* Punchier hero headline weight now that Baloo 2 700/800 + Hind 700 are loaded */
h1{ font-weight: 600; }
.eyebrow{ font-weight: 600; }

/* Give the primary CTA a soft breathing halo so the eye lands on it first —
   the same trick already used on the promo popup CTA, now on the hero/section buttons too. */
.btn-gold{
  animation: cta-breathe 2.6s ease-in-out infinite;
}
.btn-gold:hover{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .btn-gold{ animation: none; }
}

/* Playful hover tilt on content cards, layered on top of the existing lift/shadow transition */
.bp-card:hover, .outcome-card:hover, .quote-card:hover{
  transform: translateY(-5px) rotate(-0.4deg);
}
.bp-card:nth-child(even):hover, .outcome-card:nth-child(even):hover{
  transform: translateY(-5px) rotate(0.4deg);
}

/* Icon pop on card hover — bp-num / check marks nudge up slightly */
.bp-card, .outcome-card{ overflow: hidden; }
.bp-num, .check{ display: inline-block; transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1); }
.bp-card:hover .bp-num, .outcome-card:hover .check{ transform: translateY(-2px) scale(1.12); }

/* Combined badge on the admit card — animated progress bar + offer countdown in one box */
.admit-badge{
  position: absolute;
  top: -26px;
  right: -19px;
  width: 280px;
  max-width: calc(100% - 20px);
  background: linear-gradient(180deg, #fff, #fdf5e2);
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 18px 20px 19px;
  box-shadow: 0 14px 30px rgba(189,216,246,0.35), 0 8px 18px rgba(11,42,77,0.14);
  z-index: 3;
  animation: admit-badge-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.3) 0.5s backwards;
}
@keyframes admit-badge-pop{
  0%{ transform: scale(0.4); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}
.admit-badge-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.admit-badge-label{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.admit-badge-pct{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: #322505;
}
.admit-progress-track{
  position: relative;
  width: 100%;
  height: 9px;
  background: rgba(11,42,77,0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.admit-progress-fill{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--gradient-hot);
  animation: admit-progress-grow 1.3s cubic-bezier(0.2,0.8,0.3,1) 0.9s forwards;
}
.admit-progress-fill::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: admit-progress-shimmer 2.2s ease-in-out 2.3s infinite;
}
@keyframes admit-progress-grow{
  from{ width: 0%; }
  to{ width: 90%; }
}
@keyframes admit-progress-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(220%); }
}
.admit-enrolled{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(204,164,64,0.14);
  border: 1px solid rgba(212,163,42,0.35);
  animation: admit-badge-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.3) 0.75s backwards;
}
.admit-enrolled-icon{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #8e3e0c;
}
.admit-enrolled-text{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: #322505;
  white-space: nowrap;
}
.admit-badge .offer-timer.admit-badge-timer{
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 13.5px;
  padding: 6px 14px;
  color: #1c5e06;
  background: rgba(65, 107, 48, 0.14);
  border: 1px solid rgba(212,163,42,0.35);
}
.admit-badge .offer-timer.admit-badge-timer #offerClockAdmit{
  font-family: var(--mono);
  font-weight: 600;
  animation: pulse-soft 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .admit-badge{ animation: none; }
  .admit-progress-fill{ animation: none; width: 90%; }
  .admit-progress-fill::after{ animation: none; display: none; }
  .admit-badge .offer-timer.admit-badge-timer #offerClockAdmit{ animation: none; }
}
@media (max-width: 520px){
  .admit-badge{ width: 240px; padding: 14px 17px 15px; top: -17px; right: -12px; }
  .admit-badge-label{ font-size: 12px; }
  .admit-badge-pct{ font-size: 14px; }
  .admit-progress-track{ margin-bottom: 10px; }
  .admit-enrolled{ padding: 5px 11px; margin-bottom: 10px; gap: 6px; }
  .admit-enrolled-icon{ width: 12px; height: 12px; }
  .admit-enrolled-text{ font-size: 11px; white-space: normal; text-align: center; line-height: 1.3; }
  .admit-badge .offer-timer.admit-badge-timer{ font-size: 11px; padding: 5px 11px; }
  .admit-top{ margin-top: 118px; }
}

/* ---------- TRUST SECTION — real office photo backdrop ---------- */
.trust-bg{
  position: relative;
  background-image: url('office-team.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  isolation: isolate;
}
.trust-bg-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(7,26,51,0.88) 12%, rgba(7,26,51,0.86) 88%, var(--bg) 100%),
    linear-gradient(100deg, rgba(7,26,51,0.75), rgba(217,99,26,0.28));
}
.trust-content{ position: relative; z-index: 1; }
.trust-bg .sec-head{ border-bottom-color: var(--on-dark-rule); }
.trust-bg .sec-head h2{ color: var(--on-dark); }
.trust-bg .sec-tag{ color: var(--on-dark-dim); }
@media (max-width: 760px){
  .trust-bg{ background-attachment: scroll; }
}

/* ---------- PROFESSIONAL POLISH PASS ---------- */
/* The plain white "outcome" tiles (benefits / bonus / trust sections)
   were the flattest thing on the page — flat box, tiny emoji, no depth.
   Turned into proper icon-badge tiles with alternating brand-gradient
   circles instead, plus a real elevation shadow that grows on hover. */
.outcome-card{
  border-radius: 14px;
  text-align: center;
  padding: 30px 22px 26px;
  box-shadow: 0 4px 18px rgba(11,42,77,0.06);
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.outcome-card:hover{
  box-shadow: 0 18px 36px rgba(11,42,77,0.16);
  border-color: var(--gold-dim);
}
.outcome-card:nth-child(even):hover{ border-color: var(--violet); }

.check{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 21px;
  background: var(--gradient-hot);
  box-shadow: 0 10px 22px rgba(217,99,26,0.32);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.25s ease;
}
.outcome-card:nth-child(even) .check{
  background: var(--gradient-cool);
  box-shadow: 0 10px 22px rgba(30,118,198,0.32);
}
.outcome-card p{ font-size: 25px; font-weight: bold; color: var(--paper); }

/* Testimonial initials get the same gradient-circle treatment instead of
   a plain gray outline, so the whole page reads as one coherent system. */
.quote-avatar{
  background: var(--gradient-hot);
  border: none;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(217,99,26,0.3);
}
.quote-card:nth-child(even) .quote-avatar{
  background: var(--gradient-cool);
  box-shadow: 0 8px 18px rgba(30,118,198,0.3);
}

/* Staggered entrance: the reveal-on-scroll JS still just toggles
   .is-visible on each element independently, but cards sitting side by
   side in the same grid row cross the viewport threshold at essentially
   the same instant — so without a delay they'd all pop in together. A
   per-card transition-delay turns that into a proper left-to-right (or
   grid-order) cascade. */
.outcome-card, .bp-card, .who-card, .problem-card, .quote-card, .faq-item{
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
.outcome-card:nth-child(1), .bp-card:nth-child(1), .who-card:nth-child(1), .problem-card:nth-child(1), .quote-card:nth-child(1), .faq-item:nth-child(1){ --stagger-i: 0; }
.outcome-card:nth-child(2), .bp-card:nth-child(2), .who-card:nth-child(2), .problem-card:nth-child(2), .quote-card:nth-child(2), .faq-item:nth-child(2){ --stagger-i: 1; }
.outcome-card:nth-child(3), .bp-card:nth-child(3), .who-card:nth-child(3), .problem-card:nth-child(3), .faq-item:nth-child(3){ --stagger-i: 2; }
.outcome-card:nth-child(4), .bp-card:nth-child(4), .who-card:nth-child(4), .problem-card:nth-child(4), .faq-item:nth-child(4){ --stagger-i: 3; }
.outcome-card:nth-child(5), .bp-card:nth-child(5), .problem-card:nth-child(5), .faq-item:nth-child(5), .who-card:nth-child(5){ --stagger-i: 4; }
.outcome-card:nth-child(6), .bp-card:nth-child(6), .problem-card:nth-child(6), .who-card:nth-child(6){ --stagger-i: 5; }
.outcome-card:nth-child(7), .bp-card:nth-child(7), .who-card:nth-child(7){ --stagger-i: 6; }
.outcome-card:nth-child(8), .bp-card:nth-child(8), .who-card:nth-child(8){ --stagger-i: 7; }
.bp-card:nth-child(9), .who-card:nth-child(9){ --stagger-i: 8; }
.bp-card:nth-child(10), .who-card:nth-child(10){ --stagger-i: 9; }
.who-card:nth-child(11){ --stagger-i: 10; }
.who-card:nth-child(12){ --stagger-i: 11; }
@media (prefers-reduced-motion: reduce){
  .outcome-card, .bp-card, .who-card, .problem-card, .quote-card, .faq-item{ transition-delay: 0s !important; }
}

/* Section-heading underline draws in left-to-right the moment the heading
   scrolls into view, instead of just sitting there fully drawn already. */
.sec-head::after{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.3,1);
}
.sec-head.is-visible::after{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .sec-head::after{ transform: scaleX(1); transition: none; }
}
/* ---------- PREMIUM RESOURCE CARDS — "Limited Time Offer" bonus grid ----------
   Scoped entirely to #offer .resource-card so the pre-existing .outcome-card
   tiles used in the Trust and Course sections are completely untouched.
   Section background, heading, copy, and #offer spacing are unchanged. */

#offer .resource-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 28px 0 26px;
  align-items: stretch;
}

#offer .resource-card{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(30, 118, 198, 0.28);
  border-radius: 18px;
  padding: 0 0 60px;
  box-shadow: 0 10px 26px rgba(6, 14, 28, 0.28);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
#offer .resource-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(6, 14, 28, 0.4);
  border-color: rgba(30, 118, 198, 0.55);
}

/* Colored title header — full-bleed bar across the top of the card,
   with the number badge sitting inline at its top-left. */
#offer .rc-header{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rc-color, var(--violet));
  padding: 18px 20px 16px;
}
#offer .rc-num{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #ffffff;
  color: var(--rc-color, var(--violet));
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(6,14,28,0.25);
}

#offer .rc-top{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 0;
  flex: 1;
}
#offer .rc-bullets{ flex: 1; min-width: 0; }

#offer .rc-title{
  font-family: var(--serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14.5px;
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--rc-text, #ffffff);
  margin: 0;
}

#offer .rc-bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#offer .rc-bullets li{
  position: relative;
  padding-left: 24px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #45536b;
}
#offer .rc-bullets li::before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rc-color, var(--violet));
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Large mockup image on the right side of each card */
#offer .rc-mockup{
  flex-shrink: 0;
  width: 96px;
  height: 116px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--rc-color, var(--violet)) 12%, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}
#offer .rc-mockup img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#offer .rc-ribbon{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 13px 10px;
  text-align: center;
  background: var(--rc-color, var(--violet));
  color: var(--rc-text, #ffffff);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

#offer .resource-card--bonus{
  width: 100%;
  padding: 0 0 30px;
}
#offer .resource-card--bonus .rc-top{ align-items: center; padding: 20px 26px 0; }
#offer .resource-card--bonus .rc-ribbon{
  position: static;
  display: inline-block;
  margin: 20px 0 0 26px;
  border-radius: 10px;
  padding: 10px 22px;
}
#offer .rc-mockup-lg{ width: 150px; height: 150px; border-radius: 18px; }
#offer .rc-new-badge{
  position: absolute;
  top: 14px;
  right: 20px;
  background: yellow;
  color: #e81212;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(217,99,26,0.35);
  z-index: 2;
}

@media (max-width: 900px){
  #offer .resource-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #offer .resource-grid{ grid-template-columns: 1fr; }
  #offer .rc-top{ flex-direction: column; }
  #offer .rc-mockup{ width: 100%; height: 140px; align-self: stretch; }
  #offer .resource-card--bonus .rc-top{ flex-direction: column; align-items: flex-start; }
  #offer .rc-mockup-lg{ width: 100%; height: 180px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce){
  #offer .resource-card{ transition: none; }
}
/* ============================================================
   CARD BORDER UPDATE — adds a consistent lime border to every
   card component site-wide. Only the `border` property is set;
   size, padding, spacing, radius, shadow, and hover states are
   untouched. Selectors match (and where needed, exceed) the
   specificity of each card's original definition, and this block
   is appended last so it wins the cascade without using !important.
   ============================================================ */
.admit-card,
.reality-card,
.cost-card,
.problem-card,
.pay-card,
.opp-card,
.bp-card,
.outcome-card,
#benefits .benefit-card,
.who-card,
.clarity-card,
.clarity-card-gold,
.quote-card,
#offer .resource-card,
#offer .resource-card--bonus{
  border: 3px solid var(--lime);
}

/* ============================================================
   MOBILE POPUP SCROLL — FINAL SAFETY NET
   Every popup (registration, payment, thank you, promo, or any
   future one) must stay scrollable on phones, inside the space
   between the fixed top bar and the sticky register footer. Some
   panels (e.g. .thankyou-panel, .promo-panel-light) set their own
   `overflow: hidden` to clip a decorative shape to the rounded
   corners; at equal specificity, whichever of those rules sits
   later in the file wins over .modal-panel's mobile
   `overflow-y: auto`, which can silently trap the bottom of a
   popup off-screen with no way to scroll to it. This block is the
   last rule in the file and uses !important on overflow-y only
   (never overflow-x, so decorative horizontal clipping is kept),
   so it always wins regardless of any panel-specific override,
   including ones added later. touch-action/overscroll-behavior
   are added so touch/swipe scrolling is not blocked or "leaks"
   into the page behind the popup. ============================ */
@media (max-width: 760px){
  .modal-panel{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
  }
}