/* =====================================================================
   WRLD — Design System
   The curriculum for adulthood. Premium, warm, product-grade.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand */
  --blue:#2EA8C7;
  --blue-dark:#1F3D4D;
  --blue-deep:#163040;
  --yellow:#F5CF57;
  --yellow-deep:#E0B92E;
  --white:#FFFFFF;
  --cream:#FFF9EF;
  --sky:#EAF8FC;
  --charcoal:#2B2B2B;
  --gray:#F5F7F8;
  --navy:#1F3D4D;

  /* Tints */
  --blue-05: rgba(46,168,199,.06);
  --blue-10: rgba(46,168,199,.1);
  --blue-15: rgba(46,168,199,.15);
  --blue-25: rgba(46,168,199,.25);
  --yellow-15: rgba(245,207,87,.22);
  --yellow-30: rgba(245,207,87,.4);
  --navy-06: rgba(31,61,77,.06);
  --navy-10: rgba(31,61,77,.1);

  /* Semantic */
  --success:#1F9D5A;
  --success-bg:#E4F7EA;
  --warn:#C77B12;
  --warn-bg:#FDF1DD;
  --danger:#C0432F;
  --danger-bg:#FBE8E4;
  --ink-soft:#526672;
  --ink-faint:#7D8E96;

  /* Elevation */
  --shadow-xs: 0 2px 6px rgba(31,61,77,.05);
  --shadow-sm: 0 6px 16px rgba(31,61,77,.07);
  --shadow-md: 0 14px 30px rgba(31,61,77,.10);
  --shadow-lg: 0 24px 48px rgba(31,61,77,.14);
  --shadow-blue: 0 14px 28px rgba(46,168,199,.28);
  --shadow-yellow: 0 14px 28px rgba(245,207,87,.35);

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Type scale */
  --fs-2xs: .75rem;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.75rem;

  --container: 1240px;
  --container-narrow: 760px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  font-size:16px;
  color:var(--charcoal);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.font-display{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  color:var(--navy);
  line-height:1.12;
  letter-spacing:-0.022em;
}
h1{font-size:var(--fs-3xl);}
h2{font-size:var(--fs-2xl);}
h3{font-size:var(--fs-xl);}
h4{font-size:var(--fs-md); font-weight:600;}
p{color:var(--ink-soft);}
a{text-decoration:none; color:inherit;}
ul,ol{list-style:none;}
img,svg{display:block; max-width:100%;}
button,input,textarea,select{font-family:inherit;}
button{cursor:pointer; border:none; background:none;}
::selection{background:var(--yellow-30);}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px;}

.container{max-width:var(--container); margin:0 auto; padding:0 28px;}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding:0 28px;}
.section{padding:112px 0;}
.section-sm{padding:72px 0;}
.section-xs{padding:48px 0;}
.text-center{text-align:center;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;} .mb-48{margin-bottom:48px;}
.flex{display:flex;} .items-center{align-items:center;} .items-start{align-items:flex-start;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;} .gap-32{gap:32px;} .gap-48{gap:48px;}
.grow{flex:1;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip-link{position:absolute; left:12px; top:-60px; background:var(--navy); color:white; padding:12px 18px; border-radius:var(--r-sm); z-index:1000; transition:top .2s;}
.skip-link:focus{top:12px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Plus Jakarta Sans'; font-weight:700; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue-dark); background:var(--yellow);
  padding:9px 18px; border-radius:var(--r-full); margin-bottom:20px;
}
.eyebrow.on-dark{background:rgba(255,255,255,.14); color:white;}
.eyebrow.blue{background:var(--blue-15); color:var(--blue-dark);}

.section-head{max-width:660px; margin:0 auto 60px;}
.section-head.center{text-align:center;}
.section-head h2{margin-bottom:18px;}
.section-head p{font-size:var(--fs-md); color:var(--ink-soft);}
.eyebrow-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Plus Jakarta Sans'; font-weight:700; font-size:var(--fs-sm);
  padding:15px 28px; border-radius:var(--r-full);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s;
  white-space:nowrap; position:relative;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--blue); color:white; box-shadow:var(--shadow-blue);}
.btn-primary:hover{box-shadow:0 18px 34px rgba(46,168,199,.4); background:#289cba;}
.btn-yellow{background:var(--yellow); color:var(--navy); box-shadow:var(--shadow-yellow);}
.btn-yellow:hover{background:var(--yellow-deep);}
.btn-outline{background:white; color:var(--navy); border:1.5px solid var(--navy-10); box-shadow:var(--shadow-xs);}
.btn-outline:hover{border-color:var(--blue); background:var(--blue-05);}
.btn-ghost{color:var(--blue-dark); padding:12px 18px;}
.btn-ghost:hover{background:var(--navy-06); border-radius:var(--r-full);}
.btn-dark{background:var(--navy); color:white; box-shadow:0 14px 28px rgba(31,61,77,.3);}
.btn-sm{padding:10px 18px; font-size:var(--fs-xs);}
.btn-lg{padding:19px 36px; font-size:var(--fs-base);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; pointer-events:none;}
.btn-icon{width:44px; height:44px; padding:0; border-radius:50%; background:var(--gray); flex-shrink:0;}
.btn-icon:hover{background:var(--blue-15);}

/* ===== Nav ===== */
header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--navy-06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; gap:20px;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.5rem; color:var(--blue-dark);}
.logo .dot{color:var(--blue);}
.nav-links{display:flex; gap:2px; align-items:center;}
.nav-links a{font-family:'Plus Jakarta Sans'; font-weight:600; font-size:var(--fs-xs); color:var(--ink-soft); padding:10px 15px; border-radius:var(--r-full); transition:background .18s, color .18s;}
.nav-links a:hover{background:var(--navy-06); color:var(--navy);}
.nav-links a.active{background:var(--blue-15); color:var(--blue-dark);}
.nav-cta{display:flex; gap:10px; align-items:center;}
.burger{display:none; font-size:22px; background:none; width:40px; height:40px; border-radius:var(--r-sm);}
.burger:hover{background:var(--navy-06);}
.mobile-menu{display:none; position:fixed; inset:0; z-index:300; background:white; padding:20px 24px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:16px 4px; font-family:'Plus Jakarta Sans'; font-weight:600; font-size:1.1rem; border-bottom:1px solid var(--navy-06);}

/* ===== Cards & surfaces ===== */
.card{background:white; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--navy-06); transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;}
.card.hoverable:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.card-flat{background:white; border-radius:var(--r-lg); border:1px solid var(--navy-06);}
.surface-sky{background:var(--sky);}
.surface-cream{background:var(--cream);}
.surface-navy{background:var(--navy); color:white;}
.surface-navy h2, .surface-navy h3, .surface-navy h4{color:white;}
.surface-navy p{color:#C9DCE3;}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:700; padding:5px 12px; border-radius:var(--r-full); font-family:'Plus Jakarta Sans';}
.pill-blue{background:var(--blue-15); color:var(--blue-dark);}
.pill-yellow{background:var(--yellow-15); color:#8a6d16;}
.pill-navy{background:var(--navy-10); color:var(--navy);}
.pill-success{background:var(--success-bg); color:var(--success);}
.pill-sample{background:var(--warn-bg); color:var(--warn); border:1px dashed #E0B26A;}
.pill-live{background:var(--danger-bg); color:var(--danger);}

.badge-zoom{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:700; padding:5px 12px 5px 8px; border-radius:var(--r-full); background:#EDF3FF; color:#2D5BFF;}

/* ===== Callouts ===== */
.callout{border-radius:var(--r-md); padding:22px 24px; display:flex; gap:14px; align-items:flex-start; margin:28px 0;}
.callout .ic{font-size:22px; flex-shrink:0; line-height:1;}
.callout p, .callout li{color:var(--navy); font-size:var(--fs-sm);}
.callout-tip{background:var(--blue-05); border:1px solid var(--blue-15);}
.callout-example{background:var(--yellow-15); border:1px solid var(--yellow-30);}
.callout-warn{background:var(--warn-bg); border:1px solid #EFCB92;}
.callout-note{background:var(--gray); border:1px solid var(--navy-06);}
.callout-mistake{background:var(--danger-bg); border:1px solid #E8B4A8;}
.callout-protip{background:var(--blue-15); border:1px solid var(--blue-25);}
.callout-fact{background:var(--sky); border:1px solid var(--blue-15);}
.callout h5{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:var(--fs-sm); margin-bottom:4px; color:var(--navy);}

/* ===== Data tables / timelines within lessons ===== */
.lesson-table-wrap{overflow-x:auto; margin:24px 0;}
.lesson-table{width:100%; border-collapse:collapse; font-size:14px;}
.lesson-table th{text-align:left; background:var(--navy); color:white; padding:12px 16px; font-family:'Plus Jakarta Sans'; font-weight:600; font-size:12.5px;}
.lesson-table th:first-child{border-radius:12px 0 0 0;} .lesson-table th:last-child{border-radius:0 12px 0 0;}
.lesson-table td{padding:12px 16px; border-bottom:1px solid var(--navy-06); color:var(--ink-soft);}
.lesson-table tr:nth-child(even) td{background:var(--gray);}

.lesson-timeline{display:flex; flex-direction:column; gap:0; margin:24px 0; border-left:3px solid var(--blue-15); padding-left:20px;}
.lesson-timeline-step{position:relative; padding-bottom:20px;}
.lesson-timeline-step:last-child{padding-bottom:0;}
.lesson-timeline-step::before{content:''; position:absolute; left:-26px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:2px solid white; box-shadow:0 0 0 2px var(--blue-15);}
.lesson-timeline-step .lt-label{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; color:var(--blue-dark);}
.lesson-timeline-step p{margin:2px 0 0; font-size:14px;}

/* ===== Mini knowledge check (inline, lighter than end-of-lesson quiz) ===== */
.mini-check{background:white; border:1.5px dashed var(--blue-25); border-radius:var(--r-md); padding:20px 22px; margin:28px 0;}
.mini-check .mc-label{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); margin-bottom:10px;}
.mini-check .mc-q{font-weight:600; color:var(--navy); margin-bottom:12px; font-size:15px;}
.mini-check .mc-opt{display:block; width:100%; text-align:left; padding:10px 14px; border-radius:10px; border:1.5px solid var(--navy-06); margin-bottom:8px; font-size:13.5px; background:white;}
.mini-check .mc-opt:hover{border-color:var(--blue);}
.mini-check .mc-opt.correct{border-color:var(--success); background:var(--success-bg);}
.mini-check .mc-opt.incorrect{border-color:var(--danger); background:var(--danger-bg);}
.mini-check .mc-feedback{font-size:13px; color:var(--ink-soft); margin-top:8px; display:none;}
.mini-check .mc-feedback.show{display:block;}

/* ===== Playbook hero illustration ===== */
.pb-hero-illustration{width:100%; max-width:440px; margin:0 auto;}
.pb-hero-illustration svg{width:100%; height:auto;}

/* ===== Radar chart / progress rings (Assessment) ===== */
.progress-ring-wrap{display:flex; flex-direction:column; align-items:center; gap:8px;}
.progress-ring-wrap .rlabel{font-size:12px; font-weight:700; color:var(--navy); text-align:center;}
.progress-ring-wrap .rval{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.1rem;}

/* ===== Assessment ===== */
.assess-shell{max-width:760px; margin:0 auto;}
.assess-progress-track{height:12px; border-radius:var(--r-full); background:var(--navy-06); overflow:hidden; margin-bottom:8px;}
.assess-progress-fill{height:100%; background:linear-gradient(90deg, var(--blue), var(--yellow)); border-radius:var(--r-full); transition:width .5s var(--ease);}
.assess-orbit-line{display:flex; gap:12px; align-items:flex-start; background:var(--sky); border-radius:var(--r-md); padding:16px 20px; margin-bottom:28px;}
.assess-card{background:white; border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:40px; border:1px solid var(--navy-06);}
.scale-row{display:flex; gap:8px; justify-content:space-between; margin-top:20px;}
.scale-opt{flex:1; text-align:center; padding:16px 6px; border-radius:14px; border:1.5px solid var(--navy-06); font-size:13px; font-weight:600; cursor:pointer; transition:all .18s;}
.scale-opt:hover{border-color:var(--blue);}
.scale-opt.selected{border-color:var(--blue); background:var(--blue-15); color:var(--blue-dark);}
.mc-choice{display:block; width:100%; text-align:left; padding:16px 20px; border-radius:14px; border:1.5px solid var(--navy-06); margin-bottom:10px; font-size:14.5px; transition:all .18s;}
.mc-choice:hover{border-color:var(--blue);}
.mc-choice.selected{border-color:var(--blue); background:var(--blue-05);}
.passport-card{background:linear-gradient(135deg, var(--blue-dark), var(--navy)); color:white; border-radius:var(--r-xl); padding:44px; position:relative; overflow:hidden;}
.passport-stage-badge{display:inline-flex; align-items:center; gap:10px; background:rgba(245,207,87,.16); border:1px solid rgba(245,207,87,.4); padding:10px 20px; border-radius:var(--r-full); font-family:'Plus Jakarta Sans'; font-weight:700;}
.radar-svg{width:100%; max-width:380px; margin:0 auto; display:block;}

/* ===== Tools ===== */
.tool-tab{padding:14px 22px; border-radius:var(--r-full); font-weight:700; font-size:14px; color:var(--ink-soft); background:var(--gray);}
.tool-tab.active{background:var(--navy); color:white;}
.calc-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--navy-06);}
.calc-input{width:140px; text-align:right; padding:10px 14px; border-radius:10px; border:1.5px solid var(--navy-10); font-size:15px; font-family:inherit;}
.budget-bar{height:34px; border-radius:var(--r-full); background:var(--navy-06); overflow:hidden; display:flex;}
.budget-bar > div{height:100%; transition:width .4s var(--ease);}
.flip-card-scene{perspective:1200px;}
.flip-card{position:relative; width:100%; min-height:220px; transition:transform .6s; transform-style:preserve-3d;}
.flip-card.flipped{transform:rotateY(180deg);}
.flip-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; justify-content:center;}
.flip-front{background:white; border:1.5px solid var(--navy-06); box-shadow:var(--shadow-sm);}
.flip-back{background:var(--sky); transform:rotateY(180deg); border:1.5px solid var(--blue-15);}

/* ===== Sample/coming soon markers ===== */
.sample-banner{display:flex; gap:12px; align-items:center; background:var(--warn-bg); border:1px dashed #E0B26A; border-radius:var(--r-md); padding:16px 20px; font-size:var(--fs-xs); color:#8a5c10; margin-bottom:28px;}
.sample-banner strong{color:#6b470c;}
.coming-soon-card{border:1.5px dashed var(--navy-10); border-radius:var(--r-lg); padding:40px 28px; text-align:center; background:var(--gray);}

/* ===== Accordion ===== */
.accordion-item{border-bottom:1px solid var(--navy-06);}
.accordion-item:first-child{border-top:1px solid var(--navy-06);}
.accordion-trigger{width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 4px; text-align:left; font-family:'Plus Jakarta Sans'; font-weight:600; font-size:var(--fs-base); color:var(--navy);}
.accordion-trigger .chev{transition:transform .25s var(--ease); color:var(--blue); font-size:18px;}
.accordion-item.open .chev{transform:rotate(180deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .32s var(--ease);}
.accordion-panel-inner{padding:0 4px 22px; color:var(--ink-soft); font-size:var(--fs-sm);}

/* ===== Checklist ===== */
.checklist-item{display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md); transition:background .2s; cursor:pointer;}
.checklist-item:hover{background:var(--gray);}
.checklist-box{width:24px; height:24px; border-radius:8px; border:2px solid var(--navy-10); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; transition:all .18s;}
.checklist-item.checked .checklist-box{background:var(--blue); border-color:var(--blue);}
.checklist-item.checked span.txt{text-decoration:line-through; color:var(--ink-faint);}
.checklist-progress-bar{height:10px; border-radius:var(--r-full); background:var(--navy-06); overflow:hidden; margin:18px 0;}
.checklist-progress-fill{height:100%; background:linear-gradient(90deg, var(--blue), var(--yellow)); border-radius:var(--r-full); transition:width .4s var(--ease); width:0%;}

/* ===== Progress ring / bars ===== */
.progress-bar{height:8px; border-radius:var(--r-full); background:var(--navy-06); overflow:hidden;}
.progress-bar > div{height:100%; background:var(--blue); border-radius:var(--r-full);}

/* ===== Quiz ===== */
.quiz-q{margin-bottom:26px;}
.quiz-q h5{font-family:'Plus Jakarta Sans'; font-weight:700; margin-bottom:14px; font-size:var(--fs-base);}
.quiz-opt{display:block; width:100%; text-align:left; padding:14px 18px; border-radius:var(--r-md); border:1.5px solid var(--navy-06); margin-bottom:10px; font-size:var(--fs-sm); transition:all .18s;}
.quiz-opt:hover{border-color:var(--blue);}
.quiz-opt.selected{border-color:var(--blue); background:var(--blue-05);}
.quiz-opt.correct{border-color:var(--success); background:var(--success-bg);}
.quiz-opt.incorrect{border-color:var(--danger); background:var(--danger-bg);}
.quiz-result{padding:24px; border-radius:var(--r-md); background:var(--sky); text-align:center; display:none;}
.quiz-result.show{display:block;}

/* ===== Reveal / motion ===== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.06s;} .reveal-d2{transition-delay:.12s;} .reveal-d3{transition-delay:.18s;} .reveal-d4{transition-delay:.24s;} .reveal-d5{transition-delay:.3s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-16px) rotate(3deg);}}
@keyframes floatRev{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(12px) rotate(-3deg);}}
@keyframes pulseGlow{0%,100%{opacity:.5;} 50%{opacity:1;}}
@keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
.float{animation:float 6.5s ease-in-out infinite;}
.float-rev{animation:floatRev 7.5s ease-in-out infinite;}

/* Respect prefers-reduced-motion: disable decorative motion/animation,
   but keep reveal content instantly visible (never permanently hidden). */
@media(prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
  .float, .float-rev{animation:none;}
}

/* ===== Skeleton loading ===== */
.skeleton{background:linear-gradient(90deg, var(--gray) 25%, #ECEFF1 37%, var(--gray) 63%); background-size:400% 100%; animation:shimmer 1.6s ease-in-out infinite; border-radius:var(--r-md);}

/* ===== Toast / confetti ===== */
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:white; padding:16px 26px; border-radius:var(--r-full); font-weight:600; font-size:var(--fs-sm); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:500; display:flex; align-items:center; gap:10px;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#confetti-canvas{position:fixed; inset:0; pointer-events:none; z-index:600;}

/* ===== Empty states ===== */
.empty-state{text-align:center; padding:70px 24px; color:var(--ink-faint);}
.empty-state .ic{font-size:44px; margin-bottom:14px;}

/* ===== Hero shared ===== */
.hero{position:relative; background:linear-gradient(180deg, var(--sky) 0%, #FCFEFF 75%); padding:56px 0 0; overflow:hidden;}
.hero-inner{position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center; padding:40px 28px 0;}
.hero h1{font-size:clamp(2.3rem, 5.6vw, 4rem);}
.hero .sub{font-size:var(--fs-md); color:var(--ink-soft); max-width:640px; margin:22px auto 40px;}
.divider-curve{display:block; width:100%; margin-top:-2px;}

/* ===== Story sequence (home) ===== */
.story-icons{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:920px; margin:0 auto;}
.story-icon{width:112px; height:112px; border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:30px; box-shadow:var(--shadow-sm);}
.story-icon span.label{font-family:'Plus Jakarta Sans'; font-size:11px; font-weight:700; color:var(--navy);}

/* ===== Journey / Learning path visual ===== */
.path-track{position:relative; max-width:820px; margin:0 auto;}
.path-track::before{content:''; position:absolute; left:29px; top:6px; bottom:6px; width:3px; background:var(--navy-10); border-radius:4px;}
.path-node{position:relative; display:flex; gap:24px; padding:0 0 34px; align-items:flex-start;}
.path-node:last-child{padding-bottom:0;}
.path-dot{flex-shrink:0; width:60px; height:60px; border-radius:50%; background:white; border:3px solid var(--blue); display:flex; align-items:center; justify-content:center; font-size:22px; z-index:1; box-shadow:var(--shadow-sm);}
.path-node.done .path-dot{background:var(--blue); color:white;}
.path-card{flex:1; background:white; border-radius:var(--r-md); padding:20px 24px; box-shadow:var(--shadow-sm); border:1px solid var(--navy-06); transition:box-shadow .2s, transform .2s;}
.path-card:hover{box-shadow:var(--shadow-md); transform:translateX(4px);}

/* ===== Pillars ===== */
.pillars-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.pillar{padding:34px 28px;}
.pillar-icon{width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:20px;}
.pillar ul{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.pillar ul li{font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--r-full); background:var(--gray); color:var(--navy);}

/* ===== Founder section ===== */
.founder-portrait-wrap{position:relative; width:100%; max-width:320px; margin:0 auto;}
.founder-portrait-blob{position:absolute; inset:-18px; z-index:0; opacity:.5;}
.founder-portrait-frame{position:relative; z-index:1; width:100%; aspect-ratio:1/1.08; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); border:4px solid white; background:var(--sky);}
.founder-portrait-frame img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;}
.founder-portrait-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; background:linear-gradient(135deg, var(--sky), var(--yellow-15));}
.founder-name-tag{text-align:center; margin-top:18px;}
.founder-name-tag .name{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.15rem; color:var(--navy);}
.founder-name-tag .role{font-size:13px; color:var(--ink-soft); margin-top:2px;}

/* ===== Values / Difference grids ===== */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{padding:28px 26px;}
.value-card .ic{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; background:var(--blue-15);}
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.diff-card{padding:30px 28px;}
.diff-card h4{margin-bottom:14px;}
.diff-card ul{display:flex; flex-direction:column; gap:12px;}
.diff-card ul li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-soft); line-height:1.5;}

/* ===== Library / filters ===== */
.search-wrap{max-width:620px; margin:0 auto 36px; position:relative;}
.search-input{width:100%; padding:20px 26px 20px 54px; border-radius:var(--r-full); border:1.5px solid var(--navy-10); font-size:var(--fs-sm); box-shadow:var(--shadow-sm); background:white;}
.search-input:focus{outline:none; border-color:var(--blue);}
.search-icon{position:absolute; left:22px; top:50%; transform:translateY(-50%); font-size:18px;}
.filter-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px;}
.filter-chip{padding:9px 18px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:600; border:1.5px solid var(--navy-10); background:white; transition:all .18s;}
.filter-chip.active, .filter-chip:hover{border-color:var(--blue); background:var(--blue-05); color:var(--blue-dark);}

.pb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pb-card{overflow:hidden; display:flex; flex-direction:column;}
.pb-thumb{height:132px; display:flex; align-items:center; justify-content:center; font-size:42px; position:relative;}
.pb-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.pb-meta{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.pb-body h4{font-size:var(--fs-base); margin-bottom:8px;}
.pb-body p{font-size:var(--fs-xs); margin-bottom:16px; flex:1;}
.pb-footer{display:flex; justify-content:space-between; align-items:center; margin-top:auto;}
.hidden{display:none !important;}

/* ===== Article / Playbook page ===== */
.article-hero{background:var(--sky); padding:52px 0 40px;}
.article-meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.article-layout{display:grid; grid-template-columns:1fr 280px; gap:56px; align-items:start;}
.article-body h2{font-size:1.6rem; margin:44px 0 16px;}
.article-body h3{font-size:1.25rem; margin:32px 0 12px;}
.article-body p{font-size:var(--fs-base); margin-bottom:16px; max-width:66ch;}
.article-body ul, .article-body ol{margin:0 0 20px 0; padding-left:0;}
.article-body ul li, .article-body ol li{font-size:var(--fs-base); color:var(--ink-soft); margin-bottom:10px; padding-left:28px; position:relative; max-width:64ch;}
.article-body ul li::before{content:'—'; position:absolute; left:0; color:var(--blue);}
.article-body ol{counter-reset:step;}
.article-body ol li{counter-increment:step;}
.article-body ol li::before{content:counter(step); position:absolute; left:0; top:-1px; width:20px; height:20px; background:var(--blue-15); color:var(--blue-dark); border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.toc{position:sticky; top:100px; background:white; border:1px solid var(--navy-06); border-radius:var(--r-md); padding:22px;}
.toc h5{font-family:'Plus Jakarta Sans'; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px;}
.toc a{display:block; font-size:var(--fs-xs); padding:8px 0; color:var(--ink-soft); border-left:2px solid transparent; padding-left:12px; margin-left:-2px;}
.toc a:hover, .toc a.active{color:var(--blue-dark); border-left-color:var(--blue); font-weight:600;}
.toc-actions{display:flex; flex-direction:column; gap:8px; margin-top:20px; padding-top:20px; border-top:1px solid var(--navy-06);}

/* ===== Timezone / event cards ===== */
.event-card{display:flex; gap:20px; padding:22px; align-items:flex-start;}
.event-date-block{flex-shrink:0; width:64px; text-align:center; background:var(--sky); border-radius:var(--r-md); padding:12px 6px;}
.event-date-block .d{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.4rem; color:var(--blue-dark); line-height:1;}
.event-date-block .m{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--blue-dark);}
.event-tz{font-size:var(--fs-2xs); color:var(--ink-faint);}

.cal-frame{background:white; border-radius:var(--r-lg); border:1px solid var(--navy-06); box-shadow:var(--shadow-sm); overflow:hidden;}
.cal-topbar{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--navy-06);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-dow{text-align:center; font-size:11px; font-weight:700; color:var(--ink-faint); padding:12px 0; border-bottom:1px solid var(--navy-06);}
.cal-day{min-height:84px; border-right:1px solid var(--navy-06); border-bottom:1px solid var(--navy-06); padding:8px; position:relative;}
.cal-day:nth-child(7n){border-right:none;}
.cal-day .num{font-size:12px; font-weight:600; color:var(--ink-soft);}
.cal-day.today .num{background:var(--blue); color:white; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.cal-day.other-month{background:var(--gray); opacity:.5;}
.cal-event-dot{margin-top:5px; font-size:9.5px; font-weight:700; background:var(--blue-15); color:var(--blue-dark); border-radius:5px; padding:2px 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* ===== Dashboard ===== */
.dash-grid{display:grid; grid-template-columns:2fr 1fr; gap:28px;}
.dash-stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px;}
.dash-stat{padding:22px; text-align:center;}
.dash-stat .num{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.8rem; color:var(--blue);}
.dash-stat .lbl{font-size:12px; color:var(--ink-soft); font-weight:600;}
.streak-flame{font-size:26px;}
.dash-side-card{padding:22px; margin-bottom:20px;}

/* ===== Program page ===== */
.module-item{border:1px solid var(--navy-06); border-radius:var(--r-md); padding:20px 22px; margin-bottom:12px;}
.module-num{width:32px; height:32px; border-radius:50%; background:var(--blue-15); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}

/* ===== Instructor / mentor sample card ===== */
.person-card{display:flex; gap:16px; align-items:center; padding:20px; border:1px dashed var(--navy-10); border-radius:var(--r-md);}
.person-avatar{width:56px; height:56px; border-radius:50%; flex-shrink:0;}

/* ===== Worksheet print page ===== */
.worksheet-page{max-width:820px; margin:40px auto; background:white; box-shadow:var(--shadow-lg); border-radius:var(--r-md); padding:56px;}
.worksheet-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--navy); padding-bottom:20px; margin-bottom:30px;}
.ws-field{border-bottom:1.5px solid var(--navy-10); padding:10px 4px; margin-bottom:18px; min-height:20px;}
.ws-row{display:grid; gap:18px;}
@media print{
  header, footer, .no-print, .toc-actions, .guide{display:none !important;}
  body{background:white;}
  .worksheet-page{box-shadow:none; margin:0; padding:0;}
}

/* ===== Footer ===== */
footer{background:var(--navy); color:white; padding:70px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.3fr; gap:40px; margin-bottom:50px;}
footer h5{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; color:var(--yellow);}
footer .flogo{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.5rem; margin-bottom:14px;}
footer a{font-size:var(--fs-xs); color:#C9DCE3; display:block; margin-bottom:11px; transition:color .18s;}
footer a:hover{color:var(--yellow);}
footer p.tag{font-size:var(--fs-xs); color:#9DBAC3; max-width:280px;}
.newsletter-input{width:100%; padding:13px 16px; border-radius:var(--r-sm); border:none; margin-bottom:10px; font-family:'Inter';}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; font-size:12.5px; color:#7E9CA6; flex-wrap:wrap; gap:10px;}
.social-row{display:flex; gap:10px; margin-top:14px;}
.social-row a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin:0;}

/* ===== Floating guide ===== */
.guide{position:fixed; bottom:24px; right:24px; z-index:250; display:flex; align-items:flex-end; gap:12px;}
.guide-bubble{background:white; border-radius:16px 16px 4px 16px; padding:13px 17px; box-shadow:var(--shadow-lg); font-size:13px; max-width:210px; color:var(--navy); font-weight:500;}
.guide-avatar{width:54px; height:54px; cursor:pointer;}

/* ===== Responsive ===== */
@media(max-width:1080px){
  .article-layout{grid-template-columns:1fr;}
  .toc{position:static;}
  .dash-grid{grid-template-columns:1fr;}
}
@media(max-width:980px){
  .nav-links, .nav-cta{display:none;}
  .burger{display:block;}
  .pillars-grid, .pb-grid, .programs-grid, .dash-stat-row, .values-grid, .diff-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .events-wrap{grid-template-columns:1fr !important;}
}
@media(max-width:560px){
  .section{padding:72px 0;}
  .pillars-grid, .pb-grid, .programs-grid, .dash-stat-row, .values-grid, .diff-grid{grid-template-columns:1fr;}
  .cal-day{min-height:56px;}
}