@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

/* ==================================================================
   JDMIS Registration Journey — "the gold thread"
   Ivory paper, sepia ink, antique gold. The journey is drawn as a
   gold thread being strung through faceted gem nodes — one setting
   per stage. Everything else stays quiet.
   ================================================================== */

.jny-scope {
  --jny-ink: #231815;
  --jny-ink-soft: #5c4a40;
  --jny-ivory: #fffaf2;
  --jny-paper: #f8eedd;
  --jny-paper-deep: #f1e2c8;
  --jny-gold: #bb8b2c;
  --jny-gold-bright: #e3b95c;
  --jny-gold-soft: #f6e0a9;
  --jny-rose: #b85a6a;
  --jny-emerald: #0f6b4f;
  --jny-line: rgba(187, 139, 44, .35);
  --jny-shadow: 0 18px 50px rgba(82, 46, 29, .14);
  --jny-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --jny-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--jny-serif);
  color: var(--jny-ink);
  line-height: 1.5;
}
.jny-scope, .jny-scope * { box-sizing: border-box; }
.jny-scope p, .jny-scope h1, .jny-scope h2, .jny-scope h3, .jny-scope h4, .jny-scope ul, .jny-scope li { margin: 0; padding: 0; }
.jny-scope button { font-family: var(--jny-sans); cursor: pointer; }
.jny-scope input, .jny-scope select, .jny-scope textarea {
  font-family: var(--jny-sans); font-size: 15px; color: var(--jny-ink);
  background: #fff; border: 1px solid var(--jny-line); border-radius: 10px;
  padding: 11px 13px; width: 100%; outline: none; box-shadow: none;
}
.jny-scope input:focus, .jny-scope select:focus, .jny-scope textarea:focus {
  border-color: var(--jny-gold); box-shadow: 0 0 0 3px rgba(187, 139, 44, .18);
}
.jny-scope label { color: var(--jny-ink-soft); }
.jny-scope a { color: var(--jny-gold); }

/* ------------------------------------------------------------------
   Inline section on the course page
   ------------------------------------------------------------------ */

.jny-section {
  max-width: 1180px; margin: 34px auto; padding: 0 18px;
}
.jny-plate {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 400px at 85% -80px, rgba(227, 185, 92, .18), transparent 60%),
    linear-gradient(160deg, var(--jny-ivory) 0%, var(--jny-paper) 55%, var(--jny-paper-deep) 100%);
  border: 1px solid var(--jny-line); border-radius: 26px;
  box-shadow: var(--jny-shadow);
  padding: 54px 54px 44px;
}
.jny-eyebrow {
  font-family: var(--jny-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--jny-gold);
  display: flex; align-items: center; gap: 12px;
}
.jny-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--jny-gold); }
.jny-headline {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; line-height: 1.12;
  margin: 10px 0 6px; letter-spacing: -.01em;
}
.jny-headline em { font-style: italic; color: var(--jny-gold); }
.jny-sub { font-size: 17px; color: var(--jny-ink-soft); max-width: 560px; }

/* ambient floating gold flecks in the plate */
.jny-fleck {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, var(--jny-gold-bright), var(--jny-gold) 70%);
  opacity: .35; animation: jnyFloat 9s ease-in-out infinite;
}
@keyframes jnyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(22deg); }
}

/* --- thread hero: horizontal spine with gem nodes ------------------- */

.jny-thread-wrap { margin: 40px 0 8px; position: relative; }
.jny-thread-svg { display: block; width: 100%; height: 96px; }
.jny-thread-path {
  fill: none; stroke: var(--jny-gold); stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: jnyDraw 2.2s cubic-bezier(.6, .05, .28, .99) .25s forwards;
}
.jny-thread-path.jny-still { animation: none; stroke-dashoffset: 0; }
@keyframes jnyDraw { to { stroke-dashoffset: 0; } }

.jny-stages {
  display: grid; gap: 10px; margin-top: -66px; position: relative;
}
.jny-stage-name {
  text-align: center; font-family: var(--jny-sans);
  font-size: 12.5px; font-weight: 600; color: var(--jny-ink-soft);
  letter-spacing: .02em; padding-top: 8px; line-height: 1.3;
  opacity: 0; animation: jnyRise .7s ease forwards;
}
.jny-stage-name b { display: block; font-family: var(--jny-serif); font-size: 17px; color: var(--jny-ink); font-weight: 600; }
@keyframes jnyRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* gem node */
.jny-gem { position: relative; width: 44px; height: 40px; margin: 0 auto; }
.jny-gem svg { width: 100%; height: 100%; overflow: visible; }
.jny-gem .facet { fill: url(#jnyGemGrad); stroke: var(--jny-gold); stroke-width: 1.4; }
.jny-final-gem .facet { fill: url(#jnyGemGrad); stroke: var(--jny-gold); stroke-width: 1.4; }
.jny-gem.jny-upcoming .facet { fill: var(--jny-ivory); stroke: var(--jny-line); }
.jny-gem.jny-done .facet { fill: var(--jny-gold); }
.jny-gem.jny-active .facet { fill: url(#jnyGemGrad); }
.jny-gem.jny-active::after {
  content: ""; position: absolute; inset: -9px; border-radius: 12px;
  border: 2px solid var(--jny-gold-bright); opacity: .8;
  animation: jnyPulse 2.2s ease-out infinite;
}
@keyframes jnyPulse {
  0% { transform: scale(.82); opacity: .9; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.jny-gem .jny-check {
  stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
}
.jny-gem.jny-done .jny-check { animation: jnyCheckDraw .5s ease .1s forwards; }
@keyframes jnyCheckDraw { to { stroke-dashoffset: 0; } }
.jny-gem { opacity: 0; animation: jnyPop .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes jnyPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* --- quotes --------------------------------------------------------- */

.jny-quotes { margin-top: 38px; }
.jny-quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.jny-quote {
  position: relative; background: rgba(255, 255, 255, .75);
  border: 1px solid var(--jny-line); border-radius: 16px;
  padding: 22px 20px 16px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 22px rgba(82, 46, 29, .07);
  transition: opacity .6s ease, transform .6s ease;
}
.jny-quote.jny-out { opacity: 0; transform: translateY(10px) rotate(.5deg); }
.jny-quote.jny-in { opacity: 0; transform: translateY(-8px); }
.jny-qmark {
  font-size: 46px; line-height: 1; color: var(--jny-gold-bright);
  font-family: var(--jny-serif); font-weight: 700; height: 26px;
}
.jny-qtext { font-size: 16.5px; font-style: italic; line-height: 1.45; color: var(--jny-ink); margin: 6px 0 14px; }
.jny-qname {
  font-family: var(--jny-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--jny-gold);
  display: flex; justify-content: space-between; align-items: baseline;
}
.jny-qname span { color: var(--jny-ink-soft); font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 11px; }

/* --- trust strip ----------------------------------------------------- */

.jny-trust {
  margin-top: 26px; border-top: 1px solid var(--jny-line);
  padding-top: 20px; display: flex; gap: 26px; flex-wrap: wrap;
}
.jny-trust-item { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 240px; }
.jny-trust-item svg { flex: none; margin-top: 2px; }
.jny-trust-item b { display: block; font-size: 15px; font-weight: 600; }
.jny-trust-item span { font-family: var(--jny-sans); font-size: 12.5px; color: var(--jny-ink-soft); line-height: 1.45; display: block; }

.jny-cta-row { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.jny-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--jny-ink); color: var(--jny-ivory);
  border: none; border-radius: 999px;
  padding: 15px 30px; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px rgba(35, 24, 21, .28);
}
.jny-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(35, 24, 21, .34); }
.jny-btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(246, 224, 169, .45), transparent);
  transform: skewX(-18deg); animation: jnySheen 3.6s ease-in-out infinite;
}
@keyframes jnySheen { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }
.jny-btn.jny-gold { background: linear-gradient(135deg, var(--jny-gold-bright), var(--jny-gold)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.jny-btn.jny-ghost { background: transparent; color: var(--jny-ink); border: 1.5px solid var(--jny-line); box-shadow: none; }
.jny-btn.jny-ghost::after { display: none; }
.jny-btn.jny-ghost:hover { border-color: var(--jny-gold); }
.jny-note { font-family: var(--jny-sans); font-size: 12.5px; color: var(--jny-ink-soft); }

/* ------------------------------------------------------------------
   Overlay
   ------------------------------------------------------------------ */

.jny-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(35, 24, 21, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; opacity: 0; transition: opacity .35s ease;
}
.jny-overlay.jny-open { display: block; opacity: 1; }
.jny-sheet {
  position: absolute; inset: 0; margin: auto;
  width: min(980px, calc(100% - 28px)); height: min(720px, calc(100% - 28px));
  background:
    radial-gradient(900px 300px at 90% -60px, rgba(227, 185, 92, .16), transparent 60%),
    linear-gradient(165deg, var(--jny-ivory), var(--jny-paper));
  border: 1px solid var(--jny-line); border-radius: 24px;
  box-shadow: 0 30px 90px rgba(20, 12, 9, .45);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(16px) scale(.985); transition: transform .35s cubic-bezier(.2, .9, .3, 1);
}
.jny-overlay.jny-open .jny-sheet { transform: none; }

.jny-sheet-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px; border-bottom: 1px solid var(--jny-line);
}
.jny-course-chip {
  display: inline-flex; flex-direction: column;
  padding: 6px 14px; border: 1px solid var(--jny-line); border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}
.jny-course-chip b { font-family: var(--jny-sans); font-size: 11px; letter-spacing: .16em; color: var(--jny-gold); }
.jny-course-chip span { font-size: 16px; font-weight: 600; line-height: 1.2; }
.jny-close {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--jny-line); background: rgba(255,255,255,.7);
  font-size: 17px; color: var(--jny-ink-soft); line-height: 1;
  transition: all .15s ease;
}
.jny-close:hover { border-color: var(--jny-rose); color: var(--jny-rose); transform: rotate(90deg); }

.jny-sheet-body { flex: 1; display: flex; min-height: 0; }

/* vertical thread rail */
.jny-rail {
  width: 96px; flex: none; padding: 26px 0; position: relative;
  border-right: 1px solid var(--jny-line);
}
.jny-rail-line {
  position: absolute; left: 50%; top: 46px; bottom: 30px; width: 2px;
  background: var(--jny-paper-deep); transform: translateX(-50%);
  border-radius: 2px; overflow: hidden;
}
.jny-rail-line i {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--jny-gold-bright), var(--jny-gold));
  transition: height .8s cubic-bezier(.6, .05, .28, .99);
  box-shadow: 0 0 8px rgba(187, 139, 44, .6);
}
.jny-rail-nodes { position: absolute; inset: 46px 0 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.jny-rail-nodes .jny-gem { width: 34px; height: 31px; opacity: 1; animation: none; }
.jny-rail-nodes .jny-gem.jny-upcoming { opacity: .55; }
.jny-rail-nodes .jny-gem.jny-active { opacity: 1; }
.jny-rail-nodes .jny-gem.jny-done { opacity: 1; }

.jny-stagewrap { flex: 1; padding: 30px 34px 22px; overflow-y: auto; min-width: 0; }
.jny-stagewrap::-webkit-scrollbar { width: 8px; }
.jny-stagewrap::-webkit-scrollbar-thumb { background: var(--jny-paper-deep); border-radius: 8px; }

.jny-step-eyebrow {
  font-family: var(--jny-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--jny-gold);
  display: flex; align-items: center; gap: 10px;
}
.jny-step-title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.15; margin: 8px 0 4px; }
.jny-step-sub { color: var(--jny-ink-soft); font-size: 15.5px; max-width: 560px; }
.jny-step { display: none; }
.jny-step.jny-current { display: block; animation: jnyCardIn .5s cubic-bezier(.25, .9, .3, 1) forwards; }
@keyframes jnyCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* cards inside a step */
.jny-card {
  background: rgba(255, 255, 255, .8); border: 1px solid var(--jny-line);
  border-radius: 16px; padding: 18px 20px; margin-top: 16px;
}
.jny-card.jny-choice { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; position: relative; }
.jny-card.jny-choice:hover { border-color: var(--jny-gold); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(82, 46, 29, .1); }
.jny-card.jny-choice.jny-picked { border-color: var(--jny-gold); box-shadow: 0 0 0 2px rgba(187, 139, 44, .35); }
.jny-card.jny-choice.jny-picked::after {
  content: "✓"; position: absolute; top: 12px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--jny-emerald); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; font-family: var(--jny-sans);
}
.jny-card b.jny-card-title { display: block; font-size: 17px; font-weight: 600; }
.jny-card .jny-card-sub { font-family: var(--jny-sans); font-size: 12.5px; color: var(--jny-ink-soft); margin-top: 3px; line-height: 1.45; }
.jny-price-tag { font-family: var(--jny-sans); font-weight: 700; font-size: 15px; color: var(--jny-gold); white-space: nowrap; }
.jny-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

.jny-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jny-field { margin-top: 14px; }
.jny-field label { display: block; font-family: var(--jny-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.jny-err { font-family: var(--jny-sans); font-size: 12.5px; color: var(--jny-rose); margin-top: 10px; display: none; }
.jny-err.jny-show { display: block; }

/* session picker */
.jny-session { display: flex; gap: 14px; align-items: center; }
.jny-session .jny-datechip {
  flex: none; width: 58px; text-align: center; border: 1px solid var(--jny-line);
  border-radius: 12px; padding: 7px 4px; background: #fff;
}
.jny-datechip b { display: block; font-size: 20px; font-weight: 700; line-height: 1; color: var(--jny-gold); }
.jny-datechip span { font-family: var(--jny-sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--jny-ink-soft); }

/* quote result panel */
.jny-quote-result {
  margin-top: 14px; border: 1px dashed var(--jny-gold); border-radius: 14px;
  background: rgba(246, 224, 169, .18); padding: 16px 18px; display: none;
}
.jny-quote-result.jny-show { display: block; animation: jnyCardIn .4s ease forwards; }
.jny-quote-result .jny-opt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--jny-line);
  font-family: var(--jny-sans); font-size: 13.5px;
}
.jny-quote-result .jny-opt:last-child { border-bottom: none; }
.jny-opt.jny-best .jny-opt-price { color: var(--jny-emerald); font-weight: 700; }
.jny-opt-price { font-weight: 700; font-size: 15px; color: var(--jny-ink); }
.jny-opt-meta { color: var(--jny-ink-soft); font-size: 11.5px; }
.jny-countup { font-size: 26px; font-weight: 700; font-family: var(--jny-sans); color: var(--jny-ink); }

/* completion */
.jny-final-gem { width: 92px; height: 84px; margin: 6px auto 4px; position: relative; }
.jny-final-gem svg { width: 100%; height: 100%; }
.jny-final-gem { animation: jnyPop .7s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.jny-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; }
.jny-fleckp {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(135deg, var(--jny-gold-bright), var(--jny-gold));
  opacity: 0; transform: translateY(-10px) rotate(0deg);
  animation: jnyConfetti 1.9s ease-in forwards;
}
@keyframes jnyConfetti {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(340px) rotate(540deg); }
}

/* footer nav */
.jny-sheet-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px; border-top: 1px solid var(--jny-line);
  background: rgba(255, 255, 255, .5);
}
.jny-foot-note { font-family: var(--jny-sans); font-size: 12px; color: var(--jny-ink-soft); }
.jny-foot-trust { margin-left: auto; display: flex; gap: 16px; }
.jny-foot-trust span {
  font-family: var(--jny-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--jny-gold);
  display: inline-flex; align-items: center; gap: 6px;
}

/* standalone page */
.jny-standalone { background: linear-gradient(145deg, #fff7eb, #f5dfc1); min-height: 100vh; margin: 0; }
.jny-standalone .jny-plate { margin-top: 40px; }

/* responsive */
@media (max-width: 860px) {
  .jny-plate { padding: 34px 22px 30px; }
  .jny-quotes-grid { grid-template-columns: 1fr; }
  .jny-quote { min-height: 0; }
  .jny-stages { gap: 2px; }
  .jny-stage-name { font-size: 10.5px; }
  .jny-stage-name b { font-size: 13px; }
  .jny-sheet { height: calc(100% - 20px); width: calc(100% - 20px); }
  .jny-rail { width: 64px; }
  .jny-stagewrap { padding: 22px 18px 16px; }
  .jny-grid2 { grid-template-columns: 1fr; }
  .jny-foot-trust { display: none; }
  .jny-trust { flex-direction: column; gap: 14px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jny-scope *, .jny-overlay *, .jny-sheet * {
    animation-duration: .01s !important; animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
  .jny-thread-path { stroke-dashoffset: 0 !important; }
}