/* Nihongo Academy v2 — LinkUp-style structure */

:root{
  --navy:#1F2B5C; --navy-ink:#162146;
  --coral:#F97B5F; --coral-deep:#EE6A4D; --coral-bright:#FF8E54;
  --teal:#3FB8B5; --teal-deep:#2F9E9B;
  --yolk:#FFC83D; --yolk-deep:#F2B62A; --yolk-soft:#FFE08A;
  --cream:#FDF6EC; --cream-2:#F7EEDE; --cream-3:#F1E8D4;
  --ink:#2B2A3E; --muted:#6B6A7B;
  --line:rgba(31,43,92,0.10);
  --pain-bg:#2B2F3E;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito', ui-sans-serif, system-ui, sans-serif;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:16px; line-height:1.55;
  overflow-x:hidden;
}

.stage{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 10%, #F5EADB 0, transparent 40%),
    radial-gradient(circle at 80% 80%, #F3E4CC 0, transparent 50%),
    #EFE5D0;
  display:flex; justify-content:center; align-items:flex-start;
  padding:28px 16px;
}
.phone{
  width:100%; max-width:420px;
  background:var(--cream);
  border-radius:36px; overflow:hidden;
  box-shadow: 0 30px 80px -20px rgba(31,43,92,.25), 0 10px 28px -12px rgba(31,43,92,.15);
  position:relative;
}
@media (max-width: 460px){
  .stage{padding:0}
  .phone{max-width:none;border-radius:0;box-shadow:none}
}

/* topbar */
.topbar{
  display:flex; align-items:center;
  padding:18px 20px 6px;
}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none}
.logo-text{font-family:'Fredoka'; font-weight:700; line-height:1}
.logo-text .a{color:var(--navy); font-size:17px; display:block; letter-spacing:-.01em}
.logo-text .b{color:var(--coral); font-size:13px; display:block; margin-top:2px}
.logo-text .b::before, .logo-text .b::after{content:"❥"; color:var(--teal); margin:0 4px; font-size:10px; vertical-align:middle; opacity:.7}

/* shared */
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#E0473A;
  box-shadow: 0 0 0 0 rgba(224,71,58,.6);
  animation: pulse 1.6s infinite;
  display:inline-block;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(224,71,58,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(224,71,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,71,58,0); }
}

/* ============ HERO ============ */
.hero2{
  position:relative;
  background: var(--cream-2);
  padding-bottom: 0;
}
.hero2-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.kanji-fall{ position:absolute; inset:0 }
.kanji-fall-c{
  position:absolute;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  display:block;
  white-space: nowrap;
  animation: kanji-drift 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes kanji-drift{
  0%,   100% { transform: translateY(0)   rotate(var(--r, 0deg)); }
  50%        { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
.hero2-photo{
  position:relative; aspect-ratio: 4 / 5;
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero2-photo img{
  /* Was 138% × 108% (figures filled the frame but male's face
     collided with the headline pills). Settled on ~125% × 100%
     so the students stay big and immersive but their faces
     drop just below the bottom of the headline stack. The
     negative margins are asymmetric (more on the left than on
     the right) so the pair sits slightly left-of-center inside
     the photo frame — counteracts the original render reading
     visually right-heavy. */
  width:125%; height:100%; object-fit:contain; object-position:center bottom;
  filter: drop-shadow(0 8px 14px rgba(31,43,92,.18));
  margin: 0 -4% 0 -21%;
  position:relative; z-index:1;
}
.hero2-overlay{
  position:absolute; left:0; right:0; top:14px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 0 18px; text-align:center;
}
.hero2-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff;
  padding:6px 14px; border-radius:999px;
  font-family:'Fredoka'; font-weight:700; font-size:11px; letter-spacing:.12em;
  box-shadow: 0 4px 0 rgba(31,43,92,.15);
}
.hero2-headline{
  margin:0;
  font-family:'Fredoka'; font-weight:700;
  font-size: clamp(26px, 7.6vw, 32px);
  line-height:1.18; letter-spacing:-.01em;
  color:var(--navy);
  display:flex; flex-direction:column; gap:6px;
  align-items:center;
}
.hero2-headline .row{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center}
.hero2-headline .row.plain{
  font-size: 16px; font-weight:600; color:var(--navy-ink);
  background: rgba(255,255,255,.85);
  padding:4px 12px; border-radius:8px;
  margin-top:4px;
}
.hero2-headline em{
  font-style:normal; padding:2px 10px; border-radius:6px;
  display:inline-block;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero2-headline .hl-coral{ background:var(--coral); color:#fff }
.hero2-headline .hl-yolk{  background:var(--yolk); color:var(--navy) }

/* bonus strip — sits in cream area below photo */
.bonus-strip{
  position:relative;
  margin: -28px 16px 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 16px 18px;
  text-align:center;
  box-shadow: 0 12px 28px -14px rgba(31,43,92,.22);
  z-index:4;
}
.bonus-strip-tag{
  display:inline-block;
  background:var(--coral); color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:11px; letter-spacing:.08em;
  padding:5px 14px; border-radius:999px;
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  box-shadow: 0 3px 0 var(--coral-deep);
}
.bonus-strip-title{
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap;
  margin: 4px 0 16px;
}
.bs-script{font-family:'Caveat'; font-weight:700; color:var(--coral-deep); font-size:22px; line-height:1}
.bs-big{
  font-family:'Fredoka'; font-weight:700; color:var(--navy); font-size:22px; line-height:1;
  background: linear-gradient(180deg, transparent 60%, var(--yolk-soft) 60%, var(--yolk) 100%);
  padding: 0 6px;
}
.bonus-medals{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}

/* new badge style — flat sticker with number/glyph + label tab */
.medal{
  position:relative;
  border-radius: 14px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  padding: 14px 8px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap: 6px;
  text-align:center;
  font-family:'Fredoka'; font-weight:700;
  color: var(--navy);
  box-shadow: 0 4px 0 var(--cream-3);
  overflow: hidden;
}
.medal::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background: var(--yolk);
}
.medal::after{
  content:"01"; position:absolute; top:8px; right:10px;
  font-family:'Caveat'; font-weight:700; font-size:14px;
  color: var(--yolk-deep);
  line-height:1;
}
.medal-num{
  font-family:'Fredoka'; font-weight:700;
  font-size: 30px; line-height:1;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-top: 2px;
}
.medal-num.small{ font-size: 20px; letter-spacing: 0 }
.medal-l{
  font-size: 10px; line-height:1.2;
  font-weight: 700; color: var(--navy);
  padding: 4px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  margin-top: auto;
}
.medal-l b{ font-size: 11px; color: var(--coral-deep); display:block }

/* color variants */
.medal.m1::before{ background: var(--yolk) }
.medal.m1::after{ content:"01"; color: var(--yolk-deep) }

.medal.m2{ background: #FDEBE3 }
.medal.m2::before{ background: var(--coral) }
.medal.m2::after{ content:"02"; color: var(--coral-deep) }

.medal.m3{ background: #DEEFEE }
.medal.m3::before{ background: var(--teal) }
.medal.m3::after{ content:"03"; color: var(--teal-deep) }

/* ============ SPEAKER INTRO ============ */
.sp-intro{
  margin-top:18px;
  padding: 0;
}
.sp-intro-tag{
  background: var(--navy);
  color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:12px; letter-spacing:.12em;
  padding: 7px 14px;
  text-align:center;
  margin: 0 16px;
  border-radius:10px 10px 0 0;
}
.sp-intro-head{
  background: var(--cream-2);
  color: var(--navy);
  text-align:center;
  padding: 10px 14px;
  margin: 0 16px;
  border-left: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
}
.sp-yt{ font-weight:700; font-size:12px; color: var(--coral-deep); letter-spacing:.04em }
.sp-name{
  display:block;
  font-family:'Fredoka'; font-weight:700; font-size:16px; margin-top:2px;
  color: var(--navy);
}
.sp-intro-card{
  background:#fff;
  border: 1.5px solid var(--line);
  border-top: 0;
  margin: 0 16px 0;
  padding: 14px;
  display:flex; gap:12px; align-items:flex-start;
  border-radius: 0 0 12px 12px;
}
.sp-avatar{
  width:74px; height:90px;
  background: linear-gradient(135deg, var(--coral), var(--yolk));
  border-radius: 8px; flex:none;
  display:grid; place-items:center; color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:30px;
  box-shadow: 2px 2px 0 var(--navy);
}
.sp-bio{
  margin:0; font-size:13px; line-height:1.55; color:var(--ink);
}
.sp-bio b{color:var(--coral-deep)}

/* ============ CTA BANNER ============ */
.cta-banner{
  margin-top: 22px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,200,61,.35) 0, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(63,184,181,.18) 0, transparent 55%),
    var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 20px 24px;
  text-align:center;
  color: var(--navy);
  position:relative;
}
.cta-pre{
  font-family:'Caveat'; font-weight:700;
  font-size:22px; color:var(--coral-deep);
  margin-bottom:2px; line-height:1;
}
.cta-big{
  font-family:'Fredoka'; font-weight:700;
  font-size: clamp(32px, 9vw, 38px);
  letter-spacing:.01em;
  margin: 0 0 8px;
  color:var(--navy);
}

/* Next-session date below the "Free live training —" pre-line.
   JS populates [data-event-date] from /api/lp/upcoming-events on
   load, formatting the start time in the visitor's resolved
   timezone. Falls back to JST if the browser doesn't expose a
   usable timezone, so JP visitors and any uncommon locale both
   land on something readable. */
.cta-event-date{
  font-family:'Fredoka'; font-weight:600;
  font-size: clamp(16px, 4.5vw, 19px);
  color: var(--navy);
  letter-spacing: .005em;
  margin: 4px auto 6px;
  line-height: 1.25;
  max-width: 560px;
}
.cta-divider{
  height:1px; background: var(--line);
  margin: 14px auto;
  max-width: 260px;
}
.cta-price-row{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin: 4px 0 16px;
}
.cta-price-label{
  font-family:'Fredoka'; font-weight:600; color:var(--navy); font-size:13px; line-height:1.1;
  text-align:left;
}
.cta-price{
  font-family:'Fredoka'; font-weight:700; color:var(--coral);
  font-size:44px; line-height:.9;
}
.cta-price em{
  font-style:normal; font-size:64px;
}
.cta-form{
  display:grid; gap:8px; max-width:300px; margin:0 auto 10px;
}
.cta-field{
  background:#fff; border-radius:10px; height:44px;
  display:flex; align-items:center; gap:8px; padding: 0 14px;
  color:var(--muted);
  border: 1.5px solid var(--line);
  /* As a grid item, min-width defaults to `auto` (min-content),
     which lets the field expand past the form's max-width:300px
     when the inner control's intrinsic minimum is wider —
     `<select>`'s longest option text was pushing every row to
     334px. Pin to the grid track and clip overflow. */
  width: 100%; min-width: 0; box-sizing: border-box;
}
.cta-field:focus-within{ border-color: var(--coral); box-shadow: 0 0 0 4px rgba(249,123,95,.14) }
.cta-field.err{ border-color: #E0473A; background:#FEF4F4 }
.cta-field input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:14px 'Nunito',sans-serif; color:var(--ink);
}
/* Native <select> styled to match the other fields. -webkit
   appearance reset removes the OS chrome; the chevron is
   added via a CSS background image so it sits flush with the
   pill shape. */
.cta-field select{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:14px 'Nunito',sans-serif; color:var(--ink);
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  /* Truncate long option labels rather than letting them push the
     row wider than the form's 300px cap. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) center,
    calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.cta-field select:invalid{ color: var(--muted); }
/* Multi-line variant for the "why I want to study" textarea —
   same border/background as the input row but auto-expanding to
   fit the content. We drop the fixed height. */
.cta-field-textarea{
  background:#fff; border-radius:10px;
  display:flex; align-items:flex-start; gap:8px;
  padding: 12px 14px;
  color:var(--muted);
  border: 1.5px solid var(--line);
  /* Same min-width:0 fix as .cta-field — keep the row pinned to
     the grid track regardless of the textarea's content. */
  width: 100%; min-width: 0; box-sizing: border-box;
}
.cta-field-textarea:focus-within{
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(249,123,95,.14);
}
.cta-field-textarea svg{ flex:none; margin-top:2px; }
.cta-field-textarea textarea{
  flex:1; min-width:0; border:0; outline:0; background:transparent; resize:vertical;
  min-height: 60px;
  font:14px/1.5 'Nunito',sans-serif; color:var(--ink);
}
/* Required "this is a premium program" checkbox. Friction by
   design — the prospect can't submit until they've actively
   ticked it. Sits between the textarea and the submit button so
   it's the last thing they see before clicking. */
.cta-ack{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  font: 12px/1.5 'Nunito', sans-serif;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 2px;
}
.cta-ack input[type="checkbox"]{
  width: 18px; height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--coral);
  cursor: pointer;
}
.cta-ack span{
  font-weight: 600;
}

/* Above-form qualifier. Signals the form is longer because
   we're a serious program — not a generic newsletter signup.
   Reads as a friendly note, not a barrier. */
.cta-qualifier{
  max-width: 300px; margin: 0 auto 12px;
  background: rgba(255,255,255,.55);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font: 12px/1.55 'Nunito', sans-serif;
  color: var(--ink);
  text-align: left;
}
.cta-qualifier strong{ color: var(--coral-deep); font-weight: 800; }
.cta-pill{
  background: var(--coral);
  color: #fff;
  font-family:'Fredoka'; font-weight:700; font-size:16px;
  letter-spacing: .04em;
  border:0; border-radius:999px;
  height:56px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: 0 6px 0 -2px var(--coral-deep), 0 14px 24px -8px rgba(249,123,95,.4);
  margin-top: 6px;
  transition: transform .15s, box-shadow .15s;
}
.cta-pill:hover{ transform: translateY(-1px); background: var(--coral-deep); }
.cta-pill:active{ transform: translateY(2px); box-shadow: 0 3px 0 -2px var(--coral-deep); }
/* Soft-disabled while the "I understand" checkbox is unticked.
   We don't use the actual `disabled` attribute or
   pointer-events:none — keeping the button clickable means a
   tap surfaces the browser's HTML5 "please tick this box"
   validation tooltip, which is much more helpful than a
   silently-grayed button. */
.cta-form:has(input[name="ack_premium"]:not(:checked)) .cta-pill{
  opacity: 0.45;
  filter: grayscale(0.4);
  box-shadow: 0 3px 0 -2px var(--coral-deep);
}
.cta-form:has(input[name="ack_premium"]:not(:checked)) .cta-pill:hover{
  transform: none;
  background: var(--coral);
}
.cta-pill-ic{
  background: #fff;
  color: var(--coral);
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-size:10px;
}
.cta-success{
  background:#fff; color: var(--teal-deep);
  border-radius: 12px; padding: 16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14px;
  max-width:300px; margin:0 auto;
  border: 1px dashed rgba(63,184,181,.5);
}
.cta-finefoot{
  font-size:11px; color: var(--muted); margin-top:8px;
}

/* ============ PAIN POINTS ============ */
.pain{
  background-color: var(--pain-bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.04) 0, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(255,255,255,.05) 0, transparent 50%),
    repeating-linear-gradient(115deg, transparent 0 8px, rgba(255,255,255,.015) 8px 9px);
  background-size: cover;
  color:#fff;
  padding: 28px 20px 24px;
  position:relative;
}
.pain::before, .pain::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background: linear-gradient(180deg, var(--yolk) 0%, var(--coral) 100%);
}
.pain::before{ top:-1px; }
.pain::after{ bottom:-1px; transform: rotate(180deg); }
.pain-head{ text-align:center; margin-bottom:24px }
.pain-head h2{
  display:inline-block;
  background: var(--navy);
  color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:18px;
  padding: 10px 18px;
  border-radius: 12px;
  line-height:1.3;
  margin:0;
}
.pain-head h2 span{
  display:block;
  font-size:12px; opacity:.85; font-weight:600; margin-top:4px;
}
.pain-row{
  margin: 0 0 26px;
  position:relative;
}
.pain-bubble{
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 14px;
  font-family:'Fredoka'; font-weight:700;
  color:#fff;
  font-size: 18px; line-height:1.3;
  text-align:center;
  display:flex; flex-direction:column; gap:2px;
  margin-bottom: 12px;
}
.pb-line{display:block}
.pb-hl{
  font-style:normal;
  background: var(--coral);
  color:#fff;
  padding: 1px 8px;
  border-radius: 4px;
}
.pain-figure{
  position:absolute;
  width: 70px; height: 70px;
  top: 4px;
}
.r0 .pain-figure{ left: -6px; }
.r1 .pain-figure{ right: -6px; }
.r2 .pain-figure{ left: -6px; }
.pf-emoji{
  display:grid; place-items:center;
  width:100%; height:100%;
  font-size: 38px;
  background: rgba(255,255,255,.92);
  border-radius:50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.pain-body{
  margin: 0;
  font-size: 13.5px; line-height:1.6;
  color: rgba(255,255,255,.85);
}
.pain-body em{
  font-style:normal;
  background: linear-gradient(180deg, transparent 65%, var(--coral) 65%);
  padding: 0 2px;
  color:#fff;
}

.pain-mourning{
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 18px; margin-top: 6px;
  text-align:center;
}
.pain-mourning p{ margin: 6px 0; color: rgba(255,255,255,.92); font-size:14px; }
.pm-1{
  font-family:'Fredoka'; font-weight:700; font-size:17px !important;
  color:#fff !important;
}
.pm-1 em{
  font-style:normal;
  background: var(--coral); color:#fff;
  padding: 0 6px; border-radius:4px;
}

/* ============ TRANSITION ============ */
.transition{
  background: var(--cream);
  padding: 28px 20px 36px;
  text-align:center;
  color:var(--navy);
  position:relative;
}
.tr-chev{
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 26px solid var(--coral);
  margin: 0 auto 18px;
  opacity:.9;
}
.tr-pre{
  font-family:'Caveat'; font-weight:700; font-size:22px; margin: 0 0 14px;
  color: var(--coral-deep);
}
.tr-brand{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.tr-logo{
  font-family:'Fredoka'; font-weight:700;
  background:#fff; padding: 10px 22px; border-radius:14px;
  display:inline-flex; flex-direction:column; align-items:center;
  box-shadow: 0 6px 0 rgba(31,43,92,.08);
  border: 1px solid var(--line);
}
.tr-logo-a{ color:var(--navy); font-size:18px; line-height:1 }
.tr-logo-b{ color:var(--coral); font-size:13px; margin-top:2px }
.tr-line{
  font-family:'Fredoka'; font-weight:700; font-size:22px; line-height:1.3;
  margin: 12px 0 0; color: var(--navy);
}
.tr-line em{
  font-style:normal;
  background: var(--yolk-soft); color: var(--navy);
  padding: 2px 10px; border-radius:6px;
  display:inline-block;
}
.tr-rule{
  height: 4px;
  margin: 22px auto 0;
  max-width: 220px;
  background: repeating-linear-gradient(90deg, var(--coral) 0 8px, transparent 8px 16px);
  opacity:.5;
}

/* ============ LEARN ============ */
.learn{
  background-color: #F1E8D4;
  background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0 1px, transparent 1px),
                    radial-gradient(circle at 70% 60%, rgba(0,0,0,.025) 0 1px, transparent 1px);
  background-size: 14px 14px, 18px 18px;
  padding: 36px 22px 30px;
  text-align:center;
  position:relative;
}
.learn-h{
  font-family:'Fredoka'; font-weight:700; color: var(--navy);
  font-size: 24px; line-height:1.3;
  margin: 0 0 22px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.learn-hl{
  font-style:normal;
  background: var(--yolk); color:var(--navy);
  padding: 2px 14px; border-radius: 6px;
  display:inline-block;
}
.learn-list{
  list-style:none; padding: 14px;
  background: #FFEFCE;
  border: 2px solid var(--yolk);
  border-radius: 14px;
  display:grid; gap:10px; margin: 0;
  text-align:left;
}
.learn-list li{
  display:flex; gap:10px; align-items:center;
  font-size: 14px; font-weight:700; color:var(--navy);
  line-height: 1.4;
}
.lc{
  width:24px; height:24px; border-radius:6px;
  background: var(--coral); color:#fff;
  display:grid; place-items:center; flex:none;
}

/* ============ BONUSES ============ */
.bonuses{
  background: #F1E8D4;
  padding: 0 22px 36px;
  text-align:center;
  position: relative;
}
.bonuses::before{
  content:""; display:block; width:0; height:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 18px solid var(--yolk);
  margin: 0 auto 18px;
}
.bonuses-head{ margin-bottom: 22px }
.bh-script{
  font-family:'Caveat'; font-weight:700; color:var(--coral-deep); font-size:20px;
  display:block; margin-bottom: 4px;
}
.bonuses-head h2{
  font-family:'Fredoka'; font-weight:700; color:var(--navy);
  font-size: 16px; margin: 0; line-height:1.3;
}
.bh-big{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:6px }
.bh-emph{
  font-family:'Fredoka'; font-weight:700; color:var(--coral);
  font-size: 30px; line-height:1.1;
  position:relative;
}
.bh-emph::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:-6px; height:8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M2 7 C 30 2, 60 11, 100 6 S 180 4, 198 8' stroke='%23F97B5F' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.bh-script.under{ font-size: 18px; color: var(--navy); }
.bh-sub{
  font-size: 13px; color: var(--muted); line-height:1.5;
  max-width: 320px; margin: 12px auto 0;
}
.bh-sub em{ font-style:italic; color: var(--coral-deep); font-weight:700 }

.bonus-list{
  display:grid; gap: 14px;
  counter-reset: bn;
}
.bonus-card{
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 8px 18px -10px rgba(31,43,92,.22);
  text-align:left;
  border: 1px solid var(--line);
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
}
.bonus-card .bc-num{
  position:absolute;
  top: 6px; left: 6px;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  font-family:'Fredoka'; font-weight:700; font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(31,43,92,.35);
}
.bonus-card .bc-img{
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.bonus-card .bc-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bonus-card .bonus-card-body{
  padding: 12px 14px;
  display:flex; flex-direction:column; gap: 4px;
  justify-content:center;
}
.bonus-card .bonus-card-body h4{
  font-family:'Fredoka'; font-weight:700;
  color:var(--navy); font-size:15px; margin:0; line-height:1.2;
}
.bonus-card .bc-jp{
  font-family: 'Noto Serif JP', 'Fredoka', serif;
  font-weight: 700;
  color: var(--coral-deep);
  font-size: 16px; line-height: 1.2;
  letter-spacing: .01em;
}
.bonus-card .bonus-card-body p{
  margin:0; color:var(--muted);
  font-size: 12px; line-height: 1.4;
}

/* color-cycle: yolk / coral / teal accent strip on each card top */
.bonus-card::before{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--yolk);
}
.bonus-card:nth-child(3n+2)::before{ background: var(--coral); }
.bonus-card:nth-child(3n+3)::before{ background: var(--teal); }

/* total value flourish */
.bonus-total{
  margin-top: 22px;
  background: #fff;
  border: 2px dashed var(--coral);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
  position: relative;
}
.bonus-total .bt-label{
  font-family:'Fredoka'; font-weight:700;
  color: var(--navy); font-size: 14px;
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.bonus-total .bt-old{
  font-family:'Fredoka'; font-weight:700;
  color: var(--muted);
  font-size: 22px;
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}
.bonus-total .bt-new{
  font-family:'Fredoka'; font-weight:700;
  color: var(--coral);
  font-size: 32px;
  letter-spacing: .02em;
}
.bonus-total .bt-fine{
  font-size: 11px; color: var(--muted);
  grid-column: 1 / -1;
}

/* bonus strip extra tagline */
.bs-tag-line{
  font-size: 12px; color: var(--muted);
  line-height: 1.5;
  margin: -6px 4px 14px;
  text-align: center;
}

/* ============ TESTIMONIALS ============ */
.testimonials{
  background: var(--yolk);
  padding: 28px 18px 32px;
  position:relative;
}
.t-head{ text-align:center; margin-bottom: 18px; position:relative; }
.t-bubble{
  display:inline-block;
  background: var(--navy); color:#fff;
  font-family:'Fredoka'; font-weight:700;
  padding: 10px 26px; border-radius: 12px;
  font-size: 15px; letter-spacing: .04em;
  position:relative;
}
.t-bubble::after{
  content:""; position:absolute; left:50%; bottom:-8px;
  transform: translateX(-50%) rotate(45deg);
  width:14px; height:14px; background: var(--navy);
}
.t-list{ display:grid; gap:18px }
.t-card{
  background: transparent;
}
.t-row{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom: 8px;
}
.t-avatar{
  width: 56px; height:56px; border-radius:50%;
  flex:none;
  display:grid; place-items:center;
  color:#fff; font-family:'Fredoka'; font-weight:700; font-size:20px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.t-name{
  font-family:'Fredoka'; font-weight:600; color:var(--navy-ink); font-size:13px;
}
.t-headline{
  font-family:'Fredoka'; font-weight:700; color:var(--navy); font-size:18px;
  line-height: 1.2; margin-top: 2px;
  background: linear-gradient(180deg, transparent 65%, #fff 65%);
  display:inline;
  padding: 0 4px;
}
.t-body{
  background:#fff; border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px; line-height: 1.6;
  color: var(--ink);
  box-shadow: 0 4px 10px -6px rgba(0,0,0,.15);
}
.t-body em{
  font-style:normal; color: var(--coral-deep); font-weight: 700;
}

/* ============ HOST DETAILED ============ */
.host-d{
  background: linear-gradient(180deg, #FCEFCC 0%, var(--cream) 100%);
  padding: 28px 22px 34px;
}
.hd-tag{
  display:inline-block;
  background: var(--navy); color:#fff;
  font-family:'Fredoka'; font-weight:700; font-size:11px; letter-spacing:.1em;
  padding: 4px 12px; border-radius:4px; margin-bottom: 8px;
}
.hd-name{
  font-family:'Fredoka'; font-weight:700; color:var(--navy);
  font-size: 22px; margin: 0 0 14px;
  display:flex; align-items:center; gap:10px;
}
.hd-mark{
  font-size: 13px;
  background: var(--coral); color:#fff;
  padding: 2px 10px; border-radius:4px;
  letter-spacing: .04em;
}
.hd-card{
  background:#fff; border-radius:14px;
  padding: 16px;
  box-shadow: 0 8px 18px -10px rgba(31,43,92,.18);
}
.hd-photo{
  display:grid; grid-template-columns: 1fr 130px; gap:12px;
  align-items:stretch; margin-bottom: 14px;
}
.hd-photo-inner{
  background: linear-gradient(135deg, #6B6A7B 0%, #2B2A3E 100%);
  border-radius: 10px;
  display:grid; place-items:center;
  min-height: 130px;
}
.hd-emoji{ font-size: 60px }
.hd-stats{
  display:flex; flex-direction:column; gap:8px;
}
.hd-stat{
  background: var(--cream-2);
  border-radius: 10px;
  padding: 8px 10px;
  text-align:center;
  border: 1px solid var(--line);
}
.hd-stat-l{ font-size:10px; color:var(--muted); font-weight:700; letter-spacing:.04em }
.hd-stat-v{ font-family:'Fredoka'; font-weight:700; color:var(--coral); font-size:20px; line-height:1; margin: 2px 0 }
.hd-stat-d{ font-size:9px; color:var(--muted) }
.hd-medals{
  display:grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.hd-medal{
  background: linear-gradient(135deg, #FFF6E0, var(--yolk));
  border: 2px solid var(--yolk-deep);
  border-radius: 10px;
  text-align:center;
  padding: 6px 4px;
  color: var(--navy);
}
.hd-medal-2{
  background: linear-gradient(135deg, #FFE3DC, #F97B5F);
  border-color: var(--coral-deep);
  color:#fff;
}
.hd-medal-l{ font-size:9px; font-weight:700; letter-spacing:.04em }
.hd-medal-v{ font-family:'Fredoka'; font-weight:700; font-size:18px; line-height:1; margin-top:2px }
.hd-bio{
  margin: 0;
  font-size: 13px; line-height: 1.6;
  color: var(--ink);
}
.hd-bio em{ font-style:normal; color: var(--coral-deep); font-weight:700 }

/* ============ BOTTOM FOOTER ============ */
.bottom-foot{
  background: var(--navy);
  color:#fff;
  text-align:center;
  padding: 24px 20px;
}
.bf-logo{
  font-family:'Fredoka'; font-weight:700;
  display:flex; flex-direction:column; align-items:center; line-height:1;
  margin-bottom: 12px;
}
.bf-logo .a{ font-size:16px }
.bf-logo .b{ font-size:11px; color:var(--coral); margin-top:3px }
.bf-links{
  font-size:12px; color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}
.bf-links a{ color:#fff; text-decoration:none; margin: 0 4px }
.bf-links span{ opacity:.4 }
.bf-c{ font-size:11px; color: rgba(255,255,255,.55) }

/* ========= FUTURE ========= */
.future{
  background: var(--cream);
  padding: 44px 22px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.future::before{
  /* faint sakura-petal halftone in navy */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 8% 12%, rgba(31,43,92,.05) 0 1.5px, transparent 2px) 0 0/22px 22px,
    radial-gradient(circle at 92% 88%, rgba(249,123,95,.07) 0 1.5px, transparent 2px) 0 0/26px 26px;
  pointer-events:none;
}
.future-eyebrow{
  position: relative; z-index: 1;
  margin-bottom: 4px;
}
.future-eyebrow .fe-script{
  font-family: 'Caveat'; font-weight: 700;
  color: var(--coral-deep); font-size: 22px;
  display: inline-block;
  position: relative;
}
.future-eyebrow .fe-script::before,
.future-eyebrow .fe-script::after{
  content:""; position:absolute; top: 50%;
  width: 22px; height: 2px; background: var(--coral);
  border-radius: 2px;
}
.future-eyebrow .fe-script::before{ left: -32px; transform: rotate(20deg); }
.future-eyebrow .fe-script::after{ right: -32px; transform: rotate(-20deg); }

.future-head{
  position: relative; z-index: 1;
  font-family: 'Fredoka'; font-weight: 700;
  color: var(--navy);
  font-size: 28px; line-height: 1.2;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.future-head em{
  font-style: normal;
  color: var(--coral);
  position: relative;
}
.future-head em::after{
  content:""; position:absolute;
  left: -2px; right: -2px; bottom: -4px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M2 7 C 30 2, 60 11, 100 6 S 180 4, 198 8' stroke='%23F2B62A' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

.future-wrap{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 230px) 1fr;
  gap: 18px;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
}
.future-photo{
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 14px 28px -14px rgba(31,43,92,.35),
    0 0 0 4px #fff,
    0 0 0 5px rgba(31,43,92,.08);
  background: #fff;
}
.future-photo img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.future-labels{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.future-label{
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 14px 12px;
  box-shadow: 0 6px 14px -10px rgba(31,43,92,.22);
  border: 1px solid var(--line);
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.future-label::before{
  content:""; position:absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 2px;
  background: var(--coral);
}
.future-labels li:nth-child(2)::before{ background: var(--yolk); }
.future-labels li:nth-child(3)::before{ background: var(--teal); }

.fl-num{
  font-family: 'Fredoka'; font-weight: 700;
  color: var(--coral);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  align-self: start;
  padding-top: 2px;
}
.future-labels li:nth-child(2) .fl-num{ color: var(--yolk-deep, #D69A0A); }
.future-labels li:nth-child(3) .fl-num{ color: var(--teal); }

.fl-text{ display: block; }
.fl-text b{
  color: var(--navy);
  font-weight: 700;
  font-family: 'Fredoka';
  font-size: 14px;
  display: block;
  margin-top: 2px;
}