/* =====================================================
   home.css — Homepage Section Styles
   ===================================================== */

/* =====================
   1. HERO — Full-bleed editorial layout
   ===================== */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #FAF7F3;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Full-bleed background illustration */
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* New hero.webp: subject's face sits at ~60% x, ~38% y of the original
     2160x1440 frame. Anchor object-position so the head stays visible
     and the bright background dominates the left for text legibility. */
  object-position: 50% 30%;
  display: block;
}

/* Cream wash on the left for headline legibility — fades to clear before
   the subject's head/face so the illustration's focal point reads cleanly */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(250, 247, 243, 1)    0%,
      rgba(250, 247, 243, 1)    20%,
      rgba(250, 247, 243, 0.90) 32%,
      rgba(250, 247, 243, 0.45) 44%,
      rgba(250, 247, 243, 0.10) 55%,
      rgba(250, 247, 243, 0)    66%
    ),
    linear-gradient(
      180deg,
      rgba(250, 247, 243, 0.32) 0%,
      rgba(250, 247, 243, 0)    18%,
      rgba(250, 247, 243, 0)    82%,
      rgba(250, 247, 243, 0.20) 100%
    );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: 5rem;
  padding-inline: var(--content-pad-x);
  box-sizing: border-box;
}

/* ---- Left column ---- */
.hero-text {
  width: min(55vw, 700px);  /* fluid, never squeezes headline below wrap point */
  position: relative;
}

.hero-tag {
  font-family: var(--font-ja);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #333333;
  opacity: 0.92;
  margin: 0 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(255, 255, 255, 0.8);
}
.hero-tag::before {
  content: none;
}
.hero-tag sup {
  font-size: 0.6em;
  top: -0.4em;
  position: relative;
}

.hero-headline {
  position: relative;
  font-family: var(--font-ja);
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  font-weight: 800;
  color: #333333;
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: 0 0 1.5rem;
  text-shadow:
    0 0 28px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.85),
    0 0 8px rgba(255, 255, 255, 0.8),
    0 1px 3px rgba(255, 255, 255, 0.75);
}

.hero-headline-accent {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--accent);
}
.hero-underline {
  position: absolute;
  left: -0.05em;
  right: 0.4em;
  bottom: -0.18em;
  width: calc(100% - 0.35em);
  height: 0.35em;
  color: var(--accent);
  pointer-events: none;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: hero-underline-draw 1.2s ease-out 0.5s forwards;
  transform: rotate(-1deg);
  transform-origin: left center;
}
@keyframes hero-underline-draw {
  to { stroke-dashoffset: 0; }
}

.hero-sparkles {
  position: absolute;
  top: -0.2em;
  right: -0.5em;
  width: 0.9em;
  height: 0.9em;
  color: #FFEFA8;
  pointer-events: none;
}
.hero-sparkle {
  position: absolute;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 248, 200, 0.95))
    drop-shadow(0 0 5px rgba(255, 200, 80, 0.85))
    drop-shadow(0 0 10px rgba(245, 158, 11, 0.55));
  transform-origin: center;
}
.hero-sparkle--lg {
  top: 0;
  right: 0;
  width: 48%;
  height: 48%;
  animation: hero-sparkle-twinkle 7s ease-in-out infinite;
}
.hero-sparkle--sm {
  bottom: 0;
  left: 0;
  width: 26%;
  height: 26%;
  animation: hero-sparkle-twinkle 7s ease-in-out -3s infinite;
}
@keyframes hero-sparkle-twinkle {
  0%   { transform: scale(0.96) rotate(-12deg); opacity: 0.82; }
  50%  { transform: scale(1.04) rotate(12deg);  opacity: 1; }
  100% { transform: scale(0.96) rotate(-12deg); opacity: 0.82; }
}

.hero-sub {
  font-family: var(--font-ja);
  font-size: 1.0625rem;
  color: #5A6573;
  letter-spacing: 0.03em;
  line-height: 1.9;
  margin: 0 0 2rem;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 4px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(255, 255, 255, 0.9);
}
.hero-sub sup {
  font-size: 0.65em;
  top: -0.4em;
  position: relative;
}

/* Hero sub line breaks — two sets for different widths:
   - hero-sub-break-lg: active at ≥1080px (full desktop, container at max width)
   - hero-sub-break-md: active at 768–1079px (intermediate, narrower text column) */
.hero-sub-break-lg { display: inline; }
.hero-sub-break-md { display: none; }

/* CTAs */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.hero-cta-primary:hover {
  transform: none;
}
.hero-cta-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition);
}
.hero-cta-primary:hover .hero-cta-arrow {
  transform: translateX(4px);
}

/* Stats — the load-bearing visual proof */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 520px;
}
.hero-stat {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.hero-stat-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.8vw, 3.6rem);
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-stat-pct {
  font-size: 0.52em;
  font-weight: 700;
  margin-left: 0.1em;
  color: var(--primary);
  opacity: 0.9;
}
.hero-stat-rule {
  width: 40px;
  height: 3px;
  background: var(--accent);
  opacity: 0.9;
  border-radius: 2px;
}
.hero-stat-label {
  font-family: var(--font-ja);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}
.hero-stat-label sup {
  font-size: 0.7em;
  top: -0.3em;
  position: relative;
}

/* Soft transition into the next section */
.hero-bottom-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-warm) 18%, var(--border-warm) 82%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* =====================================================
   Responsive hero — many breakpoints so the subject's face
   stays visible at every viewport width and height.
   The original hero.webp is 2160x1440 (3:2). Face sits at
   ~60% x, ~38% y. object-position shifts as the container's
   aspect ratio crosses 1.5 (image ratio), at which point
   horizontal cropping starts and the head needs to be biased
   right of the text column.
   ===================================================== */

/* ---- Ultra-wide desktop (≥1920px) ---- */
@media (min-width: 1920px) {
  .hero-img { object-position: 50% 28%; }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 1)    0%,
        rgba(250, 247, 243, 0.96) 22%,
        rgba(250, 247, 243, 0.65) 36%,
        rgba(250, 247, 243, 0.18) 50%,
        rgba(250, 247, 243, 0)    62%
      ),
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.28) 0%,
        rgba(250, 247, 243, 0)    18%,
        rgba(250, 247, 243, 0)    82%,
        rgba(250, 247, 243, 0.18) 100%
      );
  }
}

/* ---- Wide desktop (1600–1919px) ---- */
@media (min-width: 1600px) and (max-width: 1919px) {
  .hero-img { object-position: 48% 28%; }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 1)    0%,
        rgba(250, 247, 243, 1)    20%,
        rgba(250, 247, 243, 0.85) 34%,
        rgba(250, 247, 243, 0.38) 48%,
        rgba(250, 247, 243, 0.08) 60%,
        rgba(250, 247, 243, 0)    70%
      ),
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.30) 0%,
        rgba(250, 247, 243, 0)    18%,
        rgba(250, 247, 243, 0)    82%,
        rgba(250, 247, 243, 0.18) 100%
      );
  }
}

/* ---- Small desktop / large laptop (1280–1599px) ---- */
/* Uses the default styles defined above on .hero-img / .hero-overlay */

/* ---- Laptop (1080–1279px) ----
   At these widths the container is already narrower than the image
   aspect, so heavy horizontal cropping kicks in. Keep the text column
   wide enough to fit the headline's heroic font-size on one line
   ("お子さまの英語力、" at ~60–64px ≈ 575px) and shift object-position
   past 50% so more of the girl (body, hand, notebook) is preserved
   alongside the face. */
@media (max-width: 1279px) and (min-width: 1080px) {
  .hero-img { object-position: 52% 30%; }
  .hero-text { width: min(54vw, 620px); }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 1)    0%,
        rgba(250, 247, 243, 1)    22%,
        rgba(250, 247, 243, 0.90) 36%,
        rgba(250, 247, 243, 0.48) 48%,
        rgba(250, 247, 243, 0.12) 60%,
        rgba(250, 247, 243, 0)    70%
      ),
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.32) 0%,
        rgba(250, 247, 243, 0)    18%,
        rgba(250, 247, 243, 0)    82%,
        rgba(250, 247, 243, 0.20) 100%
      );
  }
}

/* ---- Intermediate (≤1079px): swap hero-sub line breaks ---- */
@media (max-width: 1079px) {
  .hero-sub-break-lg { display: none; }
  .hero-sub-break-md { display: inline; }
}

/* ---- Small laptop / large tablet (1024–1079px) ----
   Keep the text column wide enough to fit the headline's first line
   ("お子さまの英語力、" measures ~505px at 56px) on a single line. */
@media (max-width: 1079px) and (min-width: 1024px) {
  .hero-img { object-position: 55% 28%; }
  .hero-text { width: min(50vw, 520px); }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 1)    0%,
        rgba(250, 247, 243, 1)    22%,
        rgba(250, 247, 243, 0.90) 36%,
        rgba(250, 247, 243, 0.46) 46%,
        rgba(250, 247, 243, 0.12) 58%,
        rgba(250, 247, 243, 0)    68%
      ),
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.32) 0%,
        rgba(250, 247, 243, 0)    18%,
        rgba(250, 247, 243, 0)    82%,
        rgba(250, 247, 243, 0.20) 100%
      );
  }
}

/* ---- Tablet (900–1023px) ---- */
@media (max-width: 1023px) and (min-width: 900px) {
  .hero-inner { padding-left: clamp(1.25rem, 4vw, 2.5rem); }
  .hero-text { width: min(46vw, 480px); }
  .hero-headline { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
  .hero-stats { max-width: 100%; }
  .hero-img { object-position: 58% 26%; }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 0.98) 0%,
        rgba(250, 247, 243, 0.96) 22%,
        rgba(250, 247, 243, 0.80) 34%,
        rgba(250, 247, 243, 0.35) 46%,
        rgba(250, 247, 243, 0.08) 58%,
        rgba(250, 247, 243, 0)    68%
      );
  }
}

/* ---- Small tablet (768–899px) ----
   Container is much narrower than image; lots of horizontal crop.
   Push object-position past 50% so the face moves toward center
   of viewport and more of the body/notebook stays visible. */
@media (max-width: 899px) and (min-width: 768px) {
  .hero-inner { padding-left: clamp(1.25rem, 4vw, 2.5rem); }
  .hero-text { width: min(48vw, 450px); }
  .hero-headline { font-size: clamp(1.85rem, 4.2vw, 2.6rem); }
  .hero-stats { max-width: 100%; }
  .hero-img { object-position: 62% 24%; }
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 0.98) 0%,
        rgba(250, 247, 243, 0.96) 24%,
        rgba(250, 247, 243, 0.78) 36%,
        rgba(250, 247, 243, 0.32) 48%,
        rgba(250, 247, 243, 0.06) 60%,
        rgba(250, 247, 243, 0)    70%
      );
  }
}

/* ---- Mobile / banner layout (≤767px) ----
   Image leaves the background and becomes a top banner so the text
   can breathe and the face is always shown above the headline.
   padding-top reserves space for the fixed header so the image
   never sits underneath the blurred header bar. */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: var(--header-h);
  }
  .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 42vh;
    min-height: 280px;
    max-height: 440px;
    flex-shrink: 0;
  }
  .hero-img {
    object-position: 60% 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  }
  .hero-overlay {
    background: none;
  }
  .hero-inner {
    position: relative;
    min-height: auto;
    padding: 1.5rem 1.5rem 2.5rem;
  }
  .hero-text {
    width: 100%;
    padding: 0;
  }
  .hero-tag {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
  }
  .hero-headline {
    font-size: clamp(1.85rem, 7.5vw, 2.5rem);
    line-height: 1.4;
    margin-bottom: 1.25rem;
  }
  .hero-sparkles { right: -0.45em; top: -0.2em; width: 0.85em; height: 0.85em; }
  .hero-sub {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
  }
  .hero-sub-break-lg,
  .hero-sub-break-md { display: none; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
  }
  .hero-cta-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .hero-stat {
    padding: 1rem 1rem 1.1rem;
    align-items: center;
    text-align: center;
  }
  .hero-stat-num { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero-stat-rule { align-self: center; }
  .hero-stat-label { text-align: center; font-size: 0.75rem; }
}

/* ---- Phablet / large mobile (≤639px) ---- */
@media (max-width: 639px) {
  .hero-visual {
    height: 40vh;
    min-height: 270px;
    max-height: 400px;
  }
  .hero-img { object-position: 58% 30%; }
}

/* ---- Hide hero CTA when the bottom sticky CTA takes over (≤520px) ---- */
@media (max-width: 520px) {
  .hero-actions { display: none; }
}

/* ---- Standard mobile (≤480px) ---- */
@media (max-width: 480px) {
  .hero-visual {
    height: 38vh;
    min-height: 250px;
    max-height: 360px;
  }
  .hero-img { object-position: 56% 30%; }
}

/* ---- Small mobile (≤400px) ---- */
@media (max-width: 400px) {
  .hero-visual {
    height: 36vh;
    min-height: 235px;
    max-height: 320px;
  }
  .hero-img { object-position: 54% 30%; }
}

/* ---- Very small mobile (≤360px) ---- */
@media (max-width: 360px) {
  .hero-visual {
    height: 34vh;
    min-height: 220px;
    max-height: 300px;
  }
  .hero-img { object-position: 52% 30%; }
}

/* ---- Tiny screens (≤320px) ---- */
@media (max-width: 320px) {
  .hero-visual {
    height: 32vh;
    min-height: 210px;
    max-height: 280px;
  }
  .hero-img { object-position: 50% 30%; }
}

/* ---- Landscape phones / short viewports (≤900w, ≤520h) ----
   Override the desktop background layout so a face-cropped image
   doesn't dominate the tiny vertical space; switch to a banner.
   Header still reserves its space at the top. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: var(--header-h);
  }
  .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56vh;
    min-height: 180px;
    max-height: 280px;
  }
  .hero-img {
    object-position: 55% 28%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
  }
  .hero-overlay { background: none; }
  .hero-inner {
    position: relative;
    min-height: auto;
    padding: 1.25rem 1.25rem 2rem;
  }
  .hero-text { width: 100%; }
}

/* ---- Tall portrait phones (≤480w, ≥800h) ----
   Give the banner a bit more height on long phones so the
   subject reads larger. */
@media (max-width: 480px) and (min-height: 800px) {
  .hero-visual {
    height: 40vh;
    max-height: 420px;
  }
}

/* ---- Extra tall portrait (≤414w, ≥1000h) ---- */
@media (max-width: 414px) and (min-height: 1000px) {
  .hero-visual {
    height: 42vh;
    max-height: 480px;
  }
}

/* ---- Short desktops / laptops (≥1024w, ≤720h) ----
   Vertical cropping is heavy here — bias the image upward so
   the head doesn't get clipped at the top. */
@media (min-width: 1024px) and (max-height: 720px) {
  .hero-img { object-position: 50% 22%; }
}

/* ---- Very short desktops (≥1024w, ≤600h) ---- */
@media (min-width: 1024px) and (max-height: 600px) {
  .hero-img { object-position: 50% 18%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-underline {
    stroke-dashoffset: 0;
    animation: none;
  }
  .hero-sparkle { animation: none; }
}

/* =====================
   2. WORRIES — Polaroid photo + numbered list + brand resolution
   ===================== */
.section-worries {
  background: var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* ---- Header ---- */
.worries-header {
  max-width: 720px;
  margin: 0 auto 4.5rem;
}
.worries-title { margin-bottom: 1rem; }
.worries-title-br { display: none; }
.worries-title-mark {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.worries-title-mark::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.worries-lede {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.85;
}

/* ---- Body: photo (left) + numbered list (right) ---- */
.worries-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6.5rem;
  align-items: center;
  margin-bottom: 5rem;
}

/* Polaroid-style photo frame */
.worries-figure {
  position: relative;
  margin: 0;
  padding: 0.85rem 0.85rem 3.4rem;
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 18px 38px rgba(35, 25, 15, 0.16);
  transform: rotate(-1.8deg);
  max-width: 380px;
  margin-left: 0;
  margin-right: 0;
}
/* Washi-tape decorations on top-left & bottom-right corners */
.worries-figure::before,
.worries-figure::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 26px;
  background: linear-gradient(
    180deg,
    rgba(255, 238, 180, 0)    0%,
    rgba(255, 238, 180, 0.5) 14%,
    rgba(253, 230, 160, 0.55) 50%,
    rgba(255, 238, 180, 0.5) 86%,
    rgba(255, 238, 180, 0)  100%
  );
  box-shadow: 0 2px 5px rgba(35, 25, 15, 0.07);
  z-index: 3;
  pointer-events: none;
}
.worries-figure::before {
  top: -2px;
  left: -42px;
  transform: rotate(-42deg);
}
.worries-figure::after {
  bottom: -2px;
  right: -42px;
  transform: rotate(-42deg);
}

.worries-figure-frame {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f3efe9;
}
.worries-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  filter: saturate(0.92) contrast(0.96);
}
/* Subtle vignette to focus the subject */
.worries-figure-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(20, 28, 50, 0.12) 100%);
  pointer-events: none;
}

.worries-figure-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.01em;
  transform: rotate(-1deg);
}

/* Hand-drawn "?" mark popping out of the polaroid corner */
.worries-figure-mark {
  display: none;
}

/* ---- Worries list container (single card) ---- */
.worries-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: 1.25rem;
  box-shadow: 0 10px 28px rgba(35, 25, 15, 0.07);
}

/* Tail pointing to the photo on the left */
.worries-list::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 3rem;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid var(--border-warm);
  border-bottom: 1px solid var(--border-warm);
  transform: rotate(45deg);
  border-bottom-left-radius: 3px;
}

.worry-item {
  position: relative;
  padding: 1.15rem 0.5rem 1.15rem 1.75rem;
  border-bottom: 1px dashed var(--border-warm);
}

.worry-item:last-child { border-bottom: none; }

/* Accent dot at the start of each row */
.worry-item::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1.65rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

.worry-text {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
}
.worry-text sup {
  font-size: 0.65em;
  top: -0.4em;
  position: relative;
}

/* ---- Resolution callout ---- */
.worries-answer {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 320px;
}

.worries-answer-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2.75rem;
  min-width: 0;
  align-self: center;
}

.worries-answer-tag {
  display: block;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.worries-answer-headline {
  font-size: clamp(1.3rem, 2.7vw, 1.75rem);
  font-weight: 800;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0 0 1.1rem;
  letter-spacing: 0.005em;
}

.worries-answer-brand {
  font-style: normal;
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1;
  color: var(--primary);
  letter-spacing: 0;
  box-shadow: inset 0 -0.14em 0 rgba(245, 158, 11, 0.22);
  padding: 0 0.08em;
  margin-right: 0.3em;
}

/* Keep "Jumpstart English が" on one line — when the headline wraps, the
   break must fall after が, never between the brand and the particle. */
.worries-answer-brand-keep {
  white-space: nowrap;
}

.worries-answer-sub {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin: 0 0 1.6rem;
  max-width: 640px;
}
.worries-answer-break { display: none; }

.worries-answer-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding-bottom: 2px;
  position: relative;
}
.worries-answer-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.worries-answer-cta:hover::after { transform: scaleX(1); }
.worries-answer-cta-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition);
}
.worries-answer-cta:hover .worries-answer-cta-arrow {
  transform: translateX(4px);
}
button.worries-answer-cta {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 2px;
}
.worries-answer-cta-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35em;
  line-height: 1;
}
.worries-answer-cta-icon svg {
  width: 1.1em;
  height: 1.1em;
}

/* Full-bleed photo filling the right side, fading into the white card */
.worries-answer-figure {
  position: relative;
  margin: 0;
  height: 100%;
}
.worries-answer-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% center;
  /* Shift right so the subject's face clears the white gradient.
     The right edge overflows and is clipped by .worries-answer's overflow: hidden. */
  transform: translateX(8%);
}
/* Gradient overlay — fades the image into the white card on the left edge.
   The opaque region extends past the image's translated left edge so no hard edge shows. */
.worries-answer-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fff 0%,
    #fff 18%,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
}

/* ---- Tablet (≤1023px) ---- */
@media (max-width: 1023px) {
  .worries-body { gap: 2rem; grid-template-columns: auto 1fr; }
  .worries-figure { max-width: 320px; margin-right: 0; }
  .worries-figure-mark { font-size: 4.4rem; top: -1.3rem; right: -1.1rem; }
  .worries-figure-caption { font-size: 1.35rem; }

  .worries-answer-content { padding: 2rem 1.75rem; }
  .worries-answer-sub { max-width: none; }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
  .worries-title-br { display: inline; }
  .worries-title-punct { display: none; }
  .worries-header { margin-bottom: 2.25rem; }
  .worries-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .worries-figure {
    max-width: 280px;
    margin: 0 auto;
    padding: 0.7rem 0.7rem 2.8rem;
  }
  .worries-figure-mark { font-size: 4rem; top: -1.1rem; right: -0.9rem; }
  .worries-figure-caption { font-size: 1.3rem; bottom: 0.5rem; }

  /* Swap order: list on top, photo on bottom */
  .worries-list  { order: 1; padding: 0.25rem 1.15rem; }
  .worries-figure { order: 2; }

  /* Tail points DOWN toward the photo below */
  .worries-list::after {
    left: 50%;
    margin-left: -8px;
    top: auto;
    bottom: -8px;
    transform: rotate(-45deg);
  }
  .worry-item { padding: 1rem 0 1rem 1.3rem; }
  .worry-item::before { top: 1.4rem; left: 0; }
  .worry-text { font-size: 0.9rem; }

  .worries-answer-content { padding: 1.5rem 1.25rem; }
  .worries-answer-headline { font-size: 1.1rem; line-height: 1.75; }
  .worries-answer-break { display: inline; }
  .worries-answer-sub { font-size: 0.9rem; line-height: 1.85; margin-bottom: 1.2rem; }
}

/* ---- Narrow mobile (≤650px): stack the answer card ---- */
@media (max-width: 650px) {
  .worries-answer {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .worries-answer-content { padding: 1.85rem 1.5rem; }
  .worries-answer-headline { font-size: 1.15rem; line-height: 1.75; }
  .worries-answer-figure {
    order: -1;
    height: 200px;
    width: 100%;
  }
  .worries-answer-figure img {
    transform: none;
    object-position: center 30%;
  }
  .worries-answer-figure::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.6) 80%,
      #fff 100%);
  }
}

/* =====================
   3. STRENGTHS
   ===================== */
.section-strengths { background: var(--bg-cream); }

.strengths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.strength-card {
  position: relative;
  isolation: isolate; /* contain z-index:-1 frame pseudo */
  border-radius: var(--r-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
/* Visual frame lives on a pseudo so it can scale on hover
   without dragging the text content along. */
.strength-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.strength-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2; /* paint above media/body so the ring's inner half isn't covered by the image */
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(245, 158, 11, 0.07) 285deg,
    rgba(245, 158, 11, 0.22) 320deg,
    rgba(245, 158, 11, 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease,
              transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}
.strength-card:hover::after,
.strength-card:hover::before {
  /* Scale the visual frame + glow ring, not the card itself.
     The card stays put so the text content never shifts. */
  transform: scale(1.008);
}
.strength-card:hover::before {
  opacity: 1;
  animation: strength-card-glow 10s linear infinite;
}
@keyframes strength-card-glow {
  to { --glow-angle: 360deg; }
}
.strength-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-warm);
  overflow: hidden;
  /* Match the frame's outer radius so the media's rounded top corners and the
     frame's outer corner curve coincide. The 1px border ring is then painted
     by ::before below, overlaid on the image's outer 1px. */
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  /* Scale from the bottom so the top edge extends upward in sync with the
     frame (which scales from its centre). Since cardH ≈ 2 × mediaH, the
     two top edges move up by the same amount and stay flush. */
  transform-origin: 50% 100%;
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
/* Border ring overlaid above the image on the three sides the media touches
   (top, left, right). Putting it on a pseudo at z-index:1 — rather than on the
   .strength-card::after frame which the image covers — guarantees the border
   paints on top of the image's outermost 1px, so the line can't be hidden and
   there's no possibility of a sub-pixel gap. The ::before scales with the
   media on hover, keeping image edge and visible border in lockstep. */
.strength-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-top: 1px solid var(--border-warm);
  border-left: 1px solid var(--border-warm);
  border-right: 1px solid var(--border-warm);
  border-radius: inherit;
  pointer-events: none;
}
.strength-card:hover .strength-card-media {
  transform: scale(1.008);
}
.strength-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.strength-card-expand {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.45, 0, 0.55, 1),
              color 0.3s cubic-bezier(0.45, 0, 0.55, 1),
              transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.strength-card-expand svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.strength-card:hover .strength-card-expand,
.strength-card-expand:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.04);
}
.strength-card:hover .strength-card-expand svg,
.strength-card-expand:hover svg {
  transform: scale(1.06);
}
.strength-card-expand svg path {
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
/* Push the two arrows apart on hover so the icon visually "expands" —
   foreshadowing the modal that opens on click. */
.strength-card:hover .strength-card-expand .arrow-tr,
.strength-card-expand:hover .arrow-tr {
  transform: translate(2.5px, -2.5px);
}
.strength-card:hover .strength-card-expand .arrow-bl,
.strength-card-expand:hover .arrow-bl {
  transform: translate(-2.5px, 2.5px);
}
.strength-card-expand:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.strength-card-body {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  flex: 1;
}
.strength-num {
  display: block;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.strength-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.65;
  color: var(--text-main);
  margin-bottom: 0.85rem;
  padding-right: 3.25rem;
}
.strength-keyword {
  font-style: normal;
  color: var(--accent);
}
.strength-summary,
.strength-card-body p {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0;
}

/* Mobile-only line break inside section description */
.strengths-desc-break { display: none; }

/* Tablet (≤1023px): 3 columns crowd the cards and cause awkward Japanese
   line breaks (e.g. 「最短ル | ート」). Switch to 2 columns with the third
   card centered across both. */
@media (max-width: 1023px) {
  .strengths-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    margin: 0 auto;
  }
  .strengths-grid > :last-child {
    grid-column: 1 / -1;
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Mobile (≤600px): single column */
@media (max-width: 600px) {
  .strengths-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .strengths-grid > :last-child {
    grid-column: auto;
    max-width: none;
  }
  .strengths-desc-break { display: inline; }
}

/* ---- Strength detail modal ---- */
.strength-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: strength-modal-fade 0.18s ease-out;
}
.strength-modal[hidden] {
  display: none;
}
@keyframes strength-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.strength-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.strength-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-white);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: strength-modal-rise 0.22s ease-out;
}
.strength-modal-scroll-area {
  flex: 1;
  overflow-y: auto;
}
.strength-modal-drag-handle,
.strength-modal-top-fade {
  display: none;
}
@keyframes strength-modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.strength-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-main);
  border: 1px solid rgba(35, 25, 15, 0.08);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(35, 25, 15, 0.12);
  transition: background var(--transition);
}
.strength-modal-close svg {
  width: 16px;
  height: 16px;
}
.strength-modal-close:hover {
  background: #fff;
}
.strength-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.strength-modal-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-warm);
}
.strength-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.strength-modal-content {
  padding: 1.75rem 1.75rem 2rem;
}
.strength-modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0 0 1rem;
}
.strength-modal-body {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
}
.strength-modal-body p {
  margin: 0 0 0.8rem;
}
.strength-modal-body p:last-child {
  margin-bottom: 0;
}

body.is-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .strength-modal {
    align-items: flex-end;
    padding: 0;
  }
  .strength-modal-panel {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: strength-drawer-rise 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes strength-drawer-rise {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .strength-modal-drag-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 2.5rem;
    cursor: grab;
    touch-action: none;
  }
  .strength-modal-drag-handle::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  .strength-modal-top-fade {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5rem;
    background: linear-gradient(to bottom, var(--bg-white) 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .strength-modal-close {
    display: none;
  }
  .strength-modal-scroll-area {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .strength-modal-content {
    padding: 1.5rem 1.25rem 1.75rem;
  }
  .strength-modal-title {
    font-size: 1.3rem;
  }
  .strength-modal-body {
    font-size: 0.9rem;
  }
}

/* Modal rich content helpers */
.modal-callout {
  position: relative;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(245, 158, 11, 0.03) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--r-md);
  padding: 1.5rem 1.25rem 1.15rem;
  margin: 1.5rem 0 1.1rem;
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.8;
  text-align: left;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}
.modal-callout::before {
  content: 'POINT';
  position: absolute;
  top: -0.6rem;
  left: 1.25rem;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  background: var(--accent);
  color: #fff;
  padding: 0.28rem 0.85rem;
  border-radius: var(--r-full);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.modal-stat-row {
  display: flex;
  gap: 0.65rem;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}

.modal-stat {
  flex: 1;
  min-width: 60px;
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.modal-stat-num {
  display: block;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.modal-stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 0.3rem;
  line-height: 1.4;
}

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.75;
}

.modal-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.56em;
}

.modal-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.modal-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-full);
  background: rgba(0, 174, 239, 0.1);
  color: var(--primary);
  border: 1px solid rgba(0, 174, 239, 0.25);
}

.strength-modal-body .modal-section-label,
.modal-section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 2.25rem 0 0.6rem;
}

/* =====================
   4. RESULTS — Success Stories
   ===================== */
.section-results {
  background: var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* --- Centered editorial header (matches strengths/worries language) --- */
.success-header {
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.success-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
/* Signature gold SVG underline — same as worries-title-mark */
.success-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.success-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.success-header-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.25rem;
}
.success-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
/* Mobile-only extra break inside the success header description */
.success-header-break-mobile { display: none; }

/* --- Stats banner (echoes hero-stat styling) --- */
.success-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.success-stat {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 8px 24px rgba(35, 25, 15, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.success-stat-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.8vw, 3.4rem);
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  margin: 0.15rem 0 0.35rem;
}
.success-stat-strong {
  font: inherit;
  color: inherit;
}
.success-stat-pct {
  font-size: 0.52em;
  font-weight: 700;
  margin-left: 0.1em;
  color: var(--primary);
  opacity: 0.9;
}
/* Gold accent rule — matches hero-stat-rule */
.success-stat-rule {
  width: 40px;
  height: 3px;
  background: var(--accent);
  opacity: 0.9;
  border-radius: 2px;
}
.success-stat-caption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.5;
}

/* --- Stories intro divider — handwritten Caveat label --- */
.success-stories-intro {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  max-width: 520px;
  margin-inline: auto;
}
.success-stories-intro-rule {
  flex: 1;
  height: 1px;
  background: var(--border-warm);
}
.success-stories-intro-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--primary);
  line-height: 1;
  white-space: nowrap;
}

/* --- Story cards (echoes strength-card hover language) --- */
.success-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.success-story {
  position: relative;
  isolation: isolate; /* contain z-index:-1 frame pseudo */
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.25rem;
  color: var(--text-main);
  cursor: pointer;
}
.success-story:hover { opacity: 1; }

/* Visual frame on a pseudo so it can scale without dragging the text */
.success-story::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Conic-gradient primary-blue glow ring — same recipe as .strength-card::before
   but tinted blue to distinguish the success-story cards. */
.success-story::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2; /* paint ring above content */
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(0, 174, 239, 0.07) 285deg,
    rgba(0, 174, 239, 0.22) 320deg,
    rgba(0, 174, 239, 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease,
              transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}

.success-story:hover::after,
.success-story:hover::before {
  /* Scale the visual frame + glow ring, not the card itself.
     Text stays put so the eye reads the same place on hover. */
  transform: scale(1.008);
}
.success-story:hover::before {
  opacity: 1;
  animation: strength-card-glow 10s linear infinite;
}

/* --- Story head — index in strength-num style + tag pill --- */
.success-story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.success-story-index {
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.success-story-tag {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  padding-left: 0.85rem;
  white-space: nowrap;
}
/* Orange accent dot — matches worry-item::before */
.success-story-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* --- Achievement display --- */
.success-story-achievement {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-bottom: 1.1rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--border-warm);
  flex-wrap: wrap;
}
.success-story-achievement-pre {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-light);
}
.success-story-achievement-pre sup {
  font-size: 0.55em;
  vertical-align: super;
}
.success-story-achievement-level {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.success-story-achievement-post {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

/* --- Pull quote with handwritten Caveat quotation mark --- */
.success-story-quote {
  position: relative;
  padding: 0 0 0 1.85rem;
  margin: 0 0 0.9rem;
}
.success-story-quote-mark {
  position: absolute;
  top: -0.6rem;
  left: -0.15rem;
  font-family: var(--font-deco);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  transform: rotate(-4deg);
}
.success-story-quote p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-main);
  font-weight: 600;
}

/* --- Story narrative text --- */
.success-story-text {
  font-size: 0.83rem;
  color: var(--text-light);
  line-height: 1.9;
  flex: 1;
  margin-bottom: 1.25rem;
}

/* --- Footer: student info + Japanese link (worries-answer-cta style) --- */
.success-story-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border-warm);
}
.success-story-student {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.success-story-student-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.success-story-student-grade {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.success-story-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 2px;
}
.success-story-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.success-story:hover .success-story-link::after { transform: scaleX(1); }
.success-story-link-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition);
}
.success-story:hover .success-story-link-arrow {
  transform: translateX(4px);
}

/* --- View all CTA (worries-answer-cta style) --- */
.success-cta {
  text-align: center;
  margin-top: 3rem;
}
.success-cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 4px;
}
.success-cta-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.success-cta-link:hover { opacity: 1; }
.success-cta-link:hover::after { transform: scaleX(1); }
.success-cta-arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--transition);
}
.success-cta-link:hover .success-cta-arrow {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .success-stats { grid-template-columns: 1fr 1fr; }
  .success-stats > :last-child {
    grid-column: 1 / -1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }

  .success-stories { grid-template-columns: repeat(2, 1fr); }
  .success-stories > :last-child {
    grid-column: 1 / -1;
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .success-header { margin-bottom: 2.5rem; }
  .success-header-desc { font-size: 0.9rem; }
  .success-header-break-mobile { display: inline; }

  .success-stories { grid-template-columns: 1fr; }
  .success-stories > :last-child {
    grid-column: auto;
    max-width: none;
  }
  .success-story { padding: 1.5rem 1.35rem 1.15rem; }

  .success-stories-intro-text { font-size: 0.88rem; letter-spacing: 0.14em; }
}

@media (max-width: 520px) {
  .success-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
  }
  .success-stats > :last-child {
    grid-column: auto;
    max-width: none;
  }
}

/* =====================
   5. INSTRUCTOR — Editorial portrait, minimal containers
   ===================== */
.section-instructor {
  background: var(--bg-cream);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient gold dot pattern */
.section-instructor::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.09) 1px, transparent 1.2px);
  background-size: 28px 28px;
  opacity: 0.55;
  pointer-events: none;
}

/* ---- Editorial header (matches success-header / worries-header) ---- */
.instructor-header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 4.5rem;
}
.instructor-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.instructor-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.instructor-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.instructor-header-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.25rem;
}
.instructor-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.instructor-header-break-mobile { display: none; }

/* ---- Body: Portrait + flowing editorial content (no card wrapper) ---- */
.instructor-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 4.5rem;
  align-items: center;
  margin-bottom: 4.5rem;
}

/* Portrait — polaroid-style frame (matches worries-figure recipe) */
.instructor-portrait {
  position: relative;
  margin: 0;
  padding: 0.85rem 0.85rem 3.4rem;
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 18px 38px rgba(35, 25, 15, 0.16);
  transform: rotate(1.8deg);
  max-width: 360px;
}
/* Washi-tape decorations — mirrored corners from worries so the stamp can own the top-left */
.instructor-portrait::before,
.instructor-portrait::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 26px;
  background: linear-gradient(
    180deg,
    rgba(255, 238, 180, 0)    0%,
    rgba(255, 238, 180, 0.5) 14%,
    rgba(253, 230, 160, 0.55) 50%,
    rgba(255, 238, 180, 0.5) 86%,
    rgba(255, 238, 180, 0)  100%
  );
  box-shadow: 0 2px 5px rgba(35, 25, 15, 0.07);
  z-index: 3;
  pointer-events: none;
}
.instructor-portrait::before {
  top: -2px;
  right: -42px;
  transform: rotate(42deg);
}
.instructor-portrait::after {
  bottom: -2px;
  left: -42px;
  transform: rotate(42deg);
}

/* Certified stamp — sits above the polaroid at the top-left */
.instructor-portrait-stamp {
  position: absolute;
  top: -1.35rem;
  left: -1.35rem;
  z-index: 4;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  transform: rotate(-12deg);
  border: 3px solid #fff;
  padding: 0.35rem;
}
.instructor-portrait-stamp-tag {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0.95;
  margin-bottom: 0.18rem;
  text-transform: uppercase;
}
.instructor-portrait-stamp-level {
  font-family: var(--font-ja);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.05;
}
.instructor-portrait-stamp-level sup {
  font-size: 0.55em;
  vertical-align: super;
}

/* Inner photo area — no border/shadow of its own, lives inside the polaroid frame */
.instructor-portrait-frame {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f3efe9;
}
.instructor-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(0.97);
}
.instructor-portrait-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(20, 28, 50, 0.10) 100%);
  pointer-events: none;
}

/* Caption — lives inside the polaroid's bottom margin */
.instructor-portrait-caption {
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.85rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.instructor-portrait-sig {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  transform: rotate(-2deg);
  letter-spacing: 0;
}
.instructor-portrait-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: right;
}

/* Editorial profile content — no card, breathes on section background */
.instructor-profile {
  position: relative;
}

/* Philosophy quote — thin gold rail accent (not a card) */
.instructor-philosophy {
  position: relative;
  margin: 0 0 1.85rem 0.25rem;
  padding: 0.4rem 0 0.4rem 1.5rem;
  border-left: 3px solid var(--accent);
}
.instructor-philosophy-mark {
  position: absolute;
  top: -1.1rem;
  left: 0.85rem;
  font-family: var(--font-deco);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
  pointer-events: none;
  transform: rotate(-4deg);
}
.instructor-philosophy p {
  position: relative;
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text-main);
  font-weight: 700;
  margin: 0;
}
.instructor-philosophy p em {
  font-style: normal;
  color: var(--primary);
}

.instructor-profile-bio {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-bottom: 1.5rem;
}
.instructor-profile-bio p { margin: 0; }
.instructor-profile-bio p + p { margin-top: 0.95rem; }
.instructor-profile-bio sup {
  font-size: 0.65em;
  vertical-align: super;
}

.instructor-profile-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 2px;
}
.instructor-profile-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.instructor-profile-cta:hover { opacity: 1; }
.instructor-profile-cta:hover::after { transform: scaleX(1); }
.instructor-profile-cta-arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--transition);
}
.instructor-profile-cta:hover .instructor-profile-cta-arrow {
  transform: translateX(4px);
}

/* Highlighted emphasis inside the bio — primary blue with gold underline */
.instructor-profile-bio em {
  font-style: normal;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  padding: 0 0.1em;
  z-index: 0;
}
.instructor-profile-bio em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}

/* ---- Tablet (≤1023px) ---- */
@media (max-width: 1023px) {
  .instructor-body {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .instructor-portrait {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
  .instructor-header { margin-bottom: 3rem; }
  .instructor-header-desc { font-size: 0.9rem; }
  .instructor-header-break-mobile { display: inline; }

  .instructor-body { gap: 2rem; margin-bottom: 3rem; }
  .instructor-portrait {
    max-width: 280px;
    padding: 0.7rem 0.7rem 2.8rem;
  }
  .instructor-portrait-stamp {
    width: 4.5rem;
    height: 4.5rem;
    top: -1rem;
    left: -1rem;
  }
  .instructor-portrait-stamp-tag { font-size: 0.42rem; }
  .instructor-portrait-stamp-level { font-size: 0.78rem; }
  .instructor-portrait-caption {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.7rem;
  }
  .instructor-portrait-sig { font-size: 1.45rem; }
  .instructor-portrait-meta { font-size: 0.68rem; }

  .instructor-philosophy {
    padding-left: 1.15rem;
    margin-left: 0.15rem;
  }
  .instructor-philosophy-mark {
    font-size: 3.6rem;
    left: 0.6rem;
    top: -0.85rem;
  }
  .instructor-philosophy p { font-size: 1rem; }
}

/* =====================
   6. COURSES — Compact 4-up grid, level-as-hero
   ===================== */
.section-courses {
  background: var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* ---- Editorial header (matches success-header / instructor-header) ---- */
.courses-header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.courses-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.courses-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.courses-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.courses-title-break-mobile { display: none; }
.courses-header-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.25rem;
}
.courses-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.courses-header-break-mobile { display: none; }

/* ---- 2×2 grid — all levels visible at one glance, with breathing room ---- */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* ---- Course card: full-bleed image background + gradient overlay
   (same recipe as worries-answer-figure: image fades into the white card).
   Hover effect mirrors .strength-card — frame, media, and glow ring scale
   together while text content stays anchored. ---- */
.course-card {
  position: relative;
  isolation: isolate;  /* contain z-index pseudo layers */
  display: block;
  border-radius: var(--r-lg);
  color: var(--text-main);
  cursor: pointer;
  padding: 1.85rem 2rem 1.7rem;
  min-height: 320px;
}
.course-card:hover { opacity: 1; }

/* Frame on ::after — bg + 1px border + shadow. Scales 1.008 on hover from the
   card centre (matches .strength-card::after exactly). */
.course-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Conic-gradient primary-blue glow ring — exact same recipe as
   .strength-card::before, scales 1.008 on hover from card centre. */
.course-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(0, 174, 239, 0.07) 285deg,
    rgba(0, 174, 239, 0.22) 320deg,
    rgba(0, 174, 239, 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease,
              transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}
.course-card:hover::after,
.course-card:hover::before { transform: scale(1.008); }
.course-card:hover::before {
  opacity: 1;
  animation: strength-card-glow 10s linear infinite;
}

/* ---- Media: full-bleed background image filling the entire card.
   Scales 1.008 on hover; transform-origin chosen per modifier so the edge
   that's at the card boundary tracks the frame's scaling. ---- */
.course-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.course-card:hover .course-card-media { transform: scale(1.008); }
.course-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;  /* shift subject toward the right, where the image stays visible */
  display: block;
  filter: saturate(1.08) contrast(1.03);
}

/* Modifier: photo cards (image takes the right 50% of the card).
   A white gradient overlay covers the image's left edge so it blends into the
   card and content remains readable over it. Content sits in normal flow with
   max-width 50% of the card, overlapping the opaque portion of the overlay. */
.course-card--photo .course-card-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 50%;
  height: auto;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  /* Transposed strength-card recipe.
     Strength-card has media at the TOP, transform-origin: 50% 100% — bottom
     stays fixed (boundary with body), top extends UP in sync with the frame's
     centre-scaling because cardH ≈ 2 × mediaH.
     Here media is on the RIGHT, transform-origin: 0% 50% — LEFT stays fixed
     (boundary with body), RIGHT extends RIGHT in sync with frame because
     cardW = 2 × mediaW (media is 50% of card). The boundary with body never
     shifts, and the right edge always tracks the frame's border exactly. */
  transform-origin: 0% 50%;
}

/* Border ring overlaid above the image. We put it on a pseudo (rather than as
   a real border on the media) so it doesn't subtract from the image's box —
   the image fills the full media, and this ring paints on top of its outermost
   1px on the three sides that touch the card edge. That keeps the image flush
   with the visible border with no possibility of a sub-pixel gap, and the ring
   scales together with the media on hover since it's the same element. */
.course-card--photo .course-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--border-warm);
  border-right: 1px solid var(--border-warm);
  border-bottom: 1px solid var(--border-warm);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.course-card--photo .course-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

/* Overlay: fully opaque on the LEFT edge of the image so its hard edge stays
   hidden and the content over it is readable. Many stops give a smooth, gradual
   fall-off so the boundary between content and image is never visible. */
.course-card--photo .course-card-media::after {
  background: linear-gradient(90deg,
    #fff 0%,
    #fff 10%,                              /* fully opaque plateau covers the image's leftmost pixels — no bleed-through on hover */
    rgba(255, 255, 255, 0.85) 18%,
    rgba(255, 255, 255, 0.65) 26%,
    rgba(255, 255, 255, 0.46) 33%,
    rgba(255, 255, 255, 0.30) 40%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0) 78%);
}

.course-card--photo .course-card-body {
  max-width: 50%;
}
/* Gradient overlay: opaque white on the left → transparent on the right.
   Mirrors the .worries-answer-figure::after pattern used elsewhere on the page. */
.course-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fff 0%,
    #fff 38%,
    rgba(255, 255, 255, 0.92) 52%,
    rgba(255, 255, 255, 0.55) 68%,
    rgba(255, 255, 255, 0.18) 84%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* ---- Body: editorial content sits on top, constrained to the opaque zone ---- */
.course-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(320px - 1.85rem - 1.7rem);  /* match card min-height minus padding */
  max-width: 62%;  /* keep content in the opaque overlay zone */
}

/* ---- Level: the visual hero, with signature gold squiggle ---- */
.course-card-level {
  position: relative;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--border-warm);
}
/* Small "コース" suffix — uses the same text style the 英検 prefix used,
   placed inline after the big level mark. */
.course-card-level-suffix {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: baseline;
}
/* Big level mark with gold squiggle underneath (echoes courses-title-em) */
.course-card-level-mark {
  position: relative;
  display: inline-block;
  font-family: var(--font-ja);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.015em;
  line-height: 1;
  padding: 0 0.05em 0.18em;
}
.course-card-level-mark::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.05em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ---- Title ---- */
.course-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.7;
  color: var(--text-main);
  margin: 0 0 1rem;
}
/* Highlighted keyword — primary blue with gold ground swatch */
.course-card-title em {
  font-style: normal;
  color: var(--primary);
  position: relative;
  padding: 0 0.08em;
  z-index: 0;
}
.course-card-title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}

/* ---- Specs: clean key/value description list ---- */
.course-card-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.9rem;
  margin: 0 0 1.25rem;
}
.course-card-specs dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  position: relative;
  padding-left: 0.7rem;
}
/* Gold accent dot prefix (matches worry-item / success-story-tag) */
.course-card-specs dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.course-card-specs dd {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin: 0;
}

/* ---- Footer: price + CTA on the same row, dashed top rule ---- */
.course-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border-warm);
  margin-top: auto;
}
.course-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08rem;
  margin: 0;
  color: var(--text-main);
  line-height: 1;
}
.course-card-price-num {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.course-card-price-unit {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
}
.course-card-price-cycle {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 0.1em;
}
.course-card-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  padding-bottom: 2px;
  white-space: nowrap;
}
.course-card-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.course-card:hover .course-card-cta::after { transform: scaleX(1); }
.course-card-cta-arrow {
  display: inline-block;
  margin-left: 0.3em;
  transition: transform var(--transition);
}
.course-card:hover .course-card-cta-arrow { transform: translateX(4px); }

/* ---- Shared footnote ---- */
.courses-note {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.7;
}
.courses-note-mark {
  display: inline-block;
  margin-right: 0.2em;
  color: var(--accent);
  font-weight: 700;
}
.courses-note strong {
  color: var(--text-main);
  font-weight: 800;
}

/* ---- Tablet (≤900px) — single column, image stays as background ---- */
@media (max-width: 900px) {
  .courses-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .course-card { min-height: 260px; padding: 1.65rem 1.85rem 1.5rem; }
  .course-card-body {
    min-height: calc(260px - 1.65rem - 1.5rem);
    max-width: 58%;  /* a bit tighter to keep image visibility */
  }
}

/* ---- Mobile (≤560px) — image becomes a clean banner at the top,
   content sits below in its own white area (no overlap with image) ---- */
@media (max-width: 560px) {
  .courses-title-break-mobile { display: inline; }
  .courses-header-break-mobile { display: inline; }
  .courses-header { margin-bottom: 2.25rem; }
  .courses-header-desc { font-size: 0.88rem; }
  .courses-grid { gap: 1.1rem; }

  /* Reset card padding; media and body each manage their own space */
  .course-card {
    padding: 0;
    min-height: 0;
  }

  /* Image: regular block banner at the top of the card.
     Round only the top corners since content sits below the banner. */
  .course-card-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  }
  .course-card-media img { object-position: center 35%; }
  /* Photo modifier on mobile: reset the desktop right-aligned absolute layout
     so the image becomes a normal-flow top banner and content sits below. */
  .course-card--photo .course-card-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 200px;
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    /* No border on the mobile banner — frame ::after handles the card outline,
       and we don't want a horizontal line where the banner meets the body. */
    border: 0;
  }
  /* Hide the desktop-only border ring pseudo on the mobile banner. */
  .course-card--photo .course-card-media::before { display: none; }
  .course-card--photo .course-card-media img { object-position: center; }
  /* Vertical (mobile) layout: no overlay — the image stands on its own as a
     clean banner above the content. */
  .course-card--photo .course-card-media::after {
    background: none;
  }
  .course-card--photo .course-card-body {
    max-width: 100%;
  }
  /* Subtle white fade at the bottom edge of the image — soft handoff to content */
  .course-card-media::after {
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 72%,
      rgba(255, 255, 255, 0.22) 88%,
      rgba(255, 255, 255, 0.65) 100%);
  }

  /* Body: normal flow below the image; takes full card width */
  .course-card-body {
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 1.5rem 1.5rem 1.45rem;
  }
  .course-card-level { margin-bottom: 1rem; padding-bottom: 0.95rem; }
  .course-card-level-mark { font-size: 2.2rem; }
  .course-card-title { font-size: 0.95rem; margin-bottom: 0.95rem; }
  .course-card-specs { margin-bottom: 1.1rem; }
  .course-card-foot { padding-top: 1rem; }
  .course-card-price-num { font-size: 1.5rem; }
}

/* =====================
   7. FLOW — Editorial numbered step list (vertical, title-first hierarchy)
   ===================== */
.section-flow {
  background: var(--bg-cream);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient gold dot pattern — matches .section-instructor */
.section-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.08) 1px, transparent 1.2px);
  background-size: 28px 28px;
  opacity: 0.55;
  pointer-events: none;
}

/* ---- Editorial header (matches success / instructor / courses) ---- */
.flow-header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 4rem;
}
.flow-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.flow-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.flow-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.flow-title-break-mobile { display: none; }
.flow-header-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.25rem;
}
.flow-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.flow-header-break-mobile { display: none; }

/* ---- Step list container — fills the .container (1080px), matching the
   grid sections (STRENGTHS / SUCCESS / COURSES / INSTRUCTOR). ---- */
.flow-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Connector — a thin gold dashed line + arrowhead between consecutive steps,
   sitting in the gutter between cards. Echoes the dashed dividers used elsewhere.
   Positioned under the centre of the number column (card left padding 2rem +
   half of the 7rem column = 5.5rem). */
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5.5rem;
  bottom: -1.05rem;
  width: 0;
  height: 1.05rem;
  border-left: 2px dashed rgba(245, 158, 11, 0.55);
  z-index: 0;
}
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(5.5rem - 4px);
  bottom: -1.3rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(245, 158, 11, 0.7);
  border-bottom: 2px solid rgba(245, 158, 11, 0.7);
  transform: rotate(45deg);
  z-index: 0;
}

/* ---- Step card ---- */
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 2rem;
  padding: 1.85rem 2rem;
  border-radius: var(--r-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  box-shadow: 0 8px 24px rgba(35, 25, 15, 0.06);
}

/* ---- Number column: big editorial figure with "Step" / "Goal" eyebrow.
   Content is centered horizontally so the eyebrow tag and figure align over
   each other and the spacing on both sides of the column reads as even. ---- */
.flow-step-num {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 2rem;
  border-right: 1px dashed var(--border-warm);
  min-height: 5rem;
  justify-content: center;
}
.flow-step-num-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.55rem;
}
.flow-step-num-figure {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.03em;
  position: relative;
  display: inline-block;
}
/* Signature gold squiggle underneath the number — same SVG as title-em recipe */
.flow-step-num-figure::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.18em;
  height: 0.26em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Final step — eyebrow becomes "Goal" in primary blue, figure also blue */
.flow-step-num--final .flow-step-num-tag {
  color: var(--primary);
}
.flow-step-num--final .flow-step-num-figure {
  color: var(--primary);
}

/* ---- Body content: title (primary) → description ---- */
.flow-step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}

/* Title — primary visual hierarchy. Gold-ground keyword treatment matches courses-card-title em */
.flow-step-title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0 0 0.55rem;
  letter-spacing: 0.005em;
}
.flow-step-keyword {
  font-style: normal;
  color: var(--primary);
  position: relative;
  padding: 0 0.08em;
  z-index: 0;
}
.flow-step-keyword::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}

/* Description — secondary */
.flow-step-text {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0;
}

/* Inline hyperlink inside the step-01 description — leads the user to add
   the official LINE account. Standard underlined link in primary blue. */
.flow-step-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-left: 0.35em;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.flow-step-link:hover {
  opacity: 1;
  color: var(--primary-dark);
  text-decoration-color: var(--primary-dark);
}

/* ---- Tablet (≤768px): tighten the number column ----
   Connector centre = left padding + (num column / 2)
   At this breakpoint: 1.4rem + 5.5rem/2 = 4.15rem */
@media (max-width: 768px) {
  .flow-header { margin-bottom: 2.75rem; }
  .flow-step {
    grid-template-columns: 5.5rem 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1.4rem;
  }
  .flow-step-num { padding-right: 1.5rem; min-height: 4.5rem; }
  .flow-step-num-tag { font-size: 0.62rem; letter-spacing: 0.18em; margin-bottom: 0.45rem; }
  .flow-step-num-figure { font-size: 2.5rem; }
  .flow-step-title { font-size: 1.05rem; line-height: 1.6; }
  .flow-step-text { font-size: 0.86rem; }
  .flow-step:not(:last-child)::after { left: 4.15rem; }
  .flow-step:not(:last-child)::before { left: calc(4.15rem - 4px); }
}

/* ---- Mobile (≤520px): compact ----
   Connector centre = 1.15rem + 4.5rem/2 = 3.4rem */
@media (max-width: 520px) {
  .flow-title-break-mobile { display: inline; }
  .flow-header-break-mobile { display: inline; }
  .flow-header-desc { font-size: 0.9rem; }

  .flow-steps { gap: 0.9rem; }

  .flow-step {
    grid-template-columns: 4.5rem 1fr;
    gap: 1.15rem;
    padding: 1.3rem 1.15rem;
  }
  .flow-step-num { padding-right: 1.15rem; min-height: 3.8rem; }
  .flow-step-num-tag { font-size: 0.58rem; margin-bottom: 0.4rem; }
  .flow-step-num-figure { font-size: 2.1rem; }
  .flow-step-title { font-size: 0.98rem; line-height: 1.55; margin-bottom: 0.5rem; }
  .flow-step-text { font-size: 0.82rem; line-height: 1.85; }
  .flow-step:not(:last-child)::after { left: 3.4rem; bottom: -0.9rem; height: 0.9rem; }
  .flow-step:not(:last-child)::before { left: calc(3.4rem - 4px); bottom: -1.15rem; }
}

/* =====================
   8. FAQ — Editorial Q&A magazine spread
   ===================== */
.section-faq {
  background: var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* ---- Editorial header (matches success/instructor/courses) ---- */
.faq-header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.faq-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.faq-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
.faq-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.faq-header-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.25rem;
}
.faq-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.faq-header-break-mobile { display: none; }

/* ---- FAQ list — magazine-spread Q&A cards. Fills the standard container
   (var(--max-w)) so widths stay consistent with the rest of the page. ---- */
.faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Each Q&A card — frame with conic glow ring on hover/open
   (mirrors strength-card / success-story / course-card pattern, but tinted
   orange and triggered by [open] as well as :hover). */
.faq-item {
  position: relative;
  isolation: isolate;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.faq-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(245, 158, 11, 0.07) 285deg,
    rgba(245, 158, 11, 0.22) 320deg,
    rgba(245, 158, 11, 0.07) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.faq-item:hover::before,
.faq-item[open]::before {
  opacity: 1;
  animation: strength-card-glow 10s linear infinite;
}
.faq-item[open] { box-shadow: var(--shadow-md); }

/* ---- Summary (the question) ---- */
.faq-summary {
  display: block;
  list-style: none;
  padding: 1.35rem 1.65rem 1.5rem;
  cursor: pointer;
  user-select: none;
  border-radius: inherit;
  transition: background var(--transition);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { background: rgba(245, 158, 11, 0.025); }

/* Head row: category tag (left, with accent dot) + index number (right) */
.faq-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}
.faq-item-tag {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  padding-left: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}
/* Gold accent dot prefix — matches worry-item / success-story-tag */
.faq-item-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
.faq-item-index {
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  line-height: 1;
}

/* Body row: big handwritten "Q." + question text + toggle */
.faq-item-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.faq-item-q-letter {
  display: inline-block;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 0.85;
  letter-spacing: 0;
  transform: rotate(-4deg);
  flex-shrink: 0;
  align-self: center;
}
.faq-item-q-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.7;
  min-width: 0;
}

/* Toggle button — + morphs to × via 45° rotation when open */
.faq-item-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease;
}
.faq-item-toggle-icon {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.3s ease;
  /* Noto Sans JP's "+" glyph sits ~0.08em below the line-box center because
     the font's ascent/descent metrics are asymmetric (more space above the
     baseline than below to make room for kana descenders). Nudge the glyph
     up so it's visually centered in the circular button. Using em so it
     scales with the font-size at any breakpoint. */
  transform: translateY(-0.08em);
}
.faq-item[open] .faq-item-toggle-icon {
  /* Compose the optical-centering shift with the open-state rotation
     so the × also stays visually centered. */
  transform: translateY(-0.08em) rotate(45deg);
}
.faq-item[open] .faq-item-toggle {
  background: var(--primary);
  color: #fff;
}

/* ---- Answer area ---- */
.faq-answer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin: 0 1.65rem;
  padding: 1.25rem 0 1.65rem;
  border-top: 1px dashed var(--border-warm);
}
.faq-item-a-letter {
  display: inline-block;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 0.85;
  letter-spacing: 0;
  transform: rotate(-4deg);
  flex-shrink: 0;
  align-self: start;
  margin-top: 0.1rem;
}
.faq-item-a-text {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.95;
  min-width: 0;
}
.faq-item-a-text p { margin: 0; }
.faq-item-a-text p + p { margin-top: 0.85rem; }
.faq-item-a-text sup {
  font-size: 0.65em;
  vertical-align: super;
}

/* ---- Closing CTA card — "Still have questions?". Spans the full container
   width so it matches the FAQ list and the rest of the page. ---- */
.faq-cta {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  padding: 2.5rem 1.75rem 2.25rem;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-warm) 0%, #fff 70%);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.faq-cta-heading {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 0.85rem;
  transform: rotate(-2deg);
}
.faq-cta-text {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.95;
  margin-bottom: 1.5rem;
}
.faq-cta-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  padding: 0 0.1em;
  z-index: 0;
}
/* Gold ground swatch behind the em — matches instructor-profile-bio em / course-card-title em */
.faq-cta-text em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.3em;
  background: rgba(245, 158, 11, 0.22);
  z-index: -1;
}
.faq-cta-break-mobile { display: none; }
/* The CTA button itself reuses `.btn .btn-primary .btn-lg .hero-cta-primary`
   from the hero section, so styling and hover behavior stay in sync. */

/* ---- Tablet (≤768px) ---- */
@media (max-width: 768px) {
  .faq-header { margin-bottom: 2.5rem; }
  .faq-header-desc { font-size: 0.9rem; }
  .faq-header-break-mobile { display: inline; }

  .faq-summary { padding: 1.15rem 1.25rem 1.25rem; }
  .faq-item-head { margin-bottom: 0.55rem; }
  .faq-item-body { gap: 0.7rem; }
  .faq-item-q-letter { font-size: 2rem; }
  .faq-item-q-text { font-size: 0.92rem; line-height: 1.65; }
  .faq-item-toggle { width: 32px; height: 32px; }
  .faq-item-toggle-icon { font-size: 1.2rem; }

  .faq-answer {
    margin: 0 1.25rem;
    padding: 1.05rem 0 1.4rem;
    gap: 0.7rem;
  }
  .faq-item-a-letter { font-size: 2rem; }
  .faq-item-a-text { font-size: 0.88rem; line-height: 1.9; }

  .faq-cta {
    padding: 2rem 1.25rem 1.85rem;
    margin-top: 2.5rem;
  }
  .faq-cta-heading { font-size: 1.65rem; }
  .faq-cta-text { font-size: 0.88rem; margin-bottom: 1.25rem; }
  .faq-cta-break-mobile { display: inline; }
}

/* ---- Narrow mobile (≤480px) ---- */
@media (max-width: 480px) {
  .faq-item-head {
    gap: 0.6rem;
  }
  .faq-item-tag { font-size: 0.68rem; }
  .faq-item-index { font-size: 0.65rem; letter-spacing: 0.16em; }
}

/* =====================
   9. FINAL CTA — Full-bleed photo background; left-anchored editorial content
   (mirrors the hero's visual + overlay + content composition for page consistency)
   ===================== */
.section-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-cream);
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Section height scales with viewport but stays tight — the content drives
     the height, the min just gives the photo enough room to read as a scene */
  min-height: clamp(420px, 56vh, 560px);
  padding: clamp(var(--sp-xl), 8vw, var(--sp-2xl)) 0;
}

/* Full-bleed background photograph */
.cta-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor on the right so the smiling subject stays visible while the
     left whitespace receives the cream wash for headline legibility */
  object-position: 78% 50%;
  display: block;
}

/* Cream wash — solid on the left, fades out before the subject so the
   photograph's focal point reads cleanly. Same recipe as the hero. */
.cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(250, 247, 243, 0.96) 0%,
      rgba(250, 247, 243, 0.92) 30%,
      rgba(250, 247, 243, 0.78) 46%,
      rgba(250, 247, 243, 0.35) 62%,
      rgba(250, 247, 243, 0)    80%
    );
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.cta-content {
  /* Width is anchored on the left; capped so the line length stays comfortable
     even at very wide viewports. Pairs with the .cta-title clamp below. */
  max-width: min(540px, 50%);
}

/* ---- Editorial header — matches courses/instructor/success ---- */
.cta-header {
  position: relative;
  z-index: 1;
  margin: 0 0 1.75rem;
}
.cta-title {
  /* Smooth scaling: ~25px at 360px viewport up to ~36px at 1280px */
  font-size: clamp(1.55rem, 1.55vw + 1.1rem, 2.25rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.cta-title-em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
}
/* Signature gold SVG underline — exact recipe used by courses-title-em / instructor-title-em / success-title-em */
.cta-title-em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.32em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'><path d='M4 12 Q 80 2, 160 8 T 316 6' fill='none' stroke='%23F59E0B' stroke-width='5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Always break the title after the comma so the two clauses sit on their own
   lines — prevents mid-word wraps as the content column resizes */
.cta-title-break { display: inline; }

.cta-header-desc {
  /* Body copy scales gently from ~14px on phones to ~16px on desktop */
  font-size: clamp(0.86rem, 0.35vw + 0.78rem, 1rem);
  color: var(--text-light);
  line-height: 1.95;
  margin-top: 1.1rem;
}
.cta-header-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-main);
}
.cta-header-desc sup {
  font-size: 0.6em;
  vertical-align: super;
}
.cta-header-break { display: inline; }

/* ---- Body: the action stack, anchored to the left under the header ---- */
.cta-body {
  position: relative;
  z-index: 1;
}

/* ---- Action area: the visual anchor of the section ---- */
.cta-action {
  margin: 0 0 1.25rem;
}

/* Button — same recipe as .hero-cta-primary: standard .btn .btn-primary .btn-lg
   pill with no transform lift on hover; the arrow span translates 4px instead.
   We just override the hover transform and wire up the arrow. */
.cta-btn:hover { transform: none; }
.cta-btn-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition);
}
.cta-btn:hover .cta-btn-arrow {
  transform: translateX(4px);
}

/* Note directly under the button — preserves the LINE / 30秒 microcopy that
   used to live as the button's secondary line. */
.cta-btn-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Reassurance checkmarks — directly below the button so users see them right when they hover */
.cta-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.cta-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
}
.cta-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* Secondary path — same recipe as worries-answer-cta / success-cta-link */
.cta-alt {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 1.85rem 0 0;
}
.cta-alt-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 2px;
}
.cta-alt-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.cta-alt-link:hover { opacity: 1; }
.cta-alt-link:hover::after { transform: scaleX(1); }
.cta-alt-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--transition);
}
.cta-alt-link:hover .cta-alt-arrow { transform: translateX(4px); }

/* ---- Responsive — breakpoints aligned with the rest of the site ----
   1023 → tablet (header hamburger kicks in here too)
   767  → phone (image becomes an abstract backdrop)
   520  → narrow phone (sticky CTA hides header CTA)                       */
@media (max-width: 1023px) {
  /* Tablet: subject gets close to the content — shift the photo further right
     and tighten the cream wash so the headline keeps its breathing room */
  .cta-img { object-position: 86% 50%; }
  .cta-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(250, 247, 243, 0.97) 0%,
        rgba(250, 247, 243, 0.93) 38%,
        rgba(250, 247, 243, 0.70) 58%,
        rgba(250, 247, 243, 0.25) 82%,
        rgba(250, 247, 243, 0)    100%
      );
  }
  .section-cta { min-height: clamp(400px, 50vh, 520px); }
  .cta-content { max-width: min(460px, 60%); }
}

@media (max-width: 767px) {
  /* Phone: photo becomes a soft abstract backdrop behind full-width content.
     Anchor the subject to the bottom of the frame so the top of the section
     stays bright enough for the headline to read against. */
  .cta-img { object-position: 70% 92%; }
  .cta-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(250, 247, 243, 0.96) 0%,
        rgba(250, 247, 243, 0.90) 50%,
        rgba(250, 247, 243, 0.55) 100%
      );
  }
  .section-cta {
    min-height: auto;
    padding: var(--sp-xl) 0;
    align-items: stretch;
  }
  .cta-content { max-width: 100%; }
  .cta-header { margin-bottom: 1.5rem; }
}

@media (max-width: 520px) {
  /* Narrow phone: full-width button + tighter check row to keep the action
     visually self-contained inside the smaller frame */
  .cta-header-break { display: none; }
  .cta-btn { width: 100%; }
  .cta-btn-note { font-size: 0.74rem; }
  .cta-checks { gap: 0.4rem 0.95rem; margin-top: 1rem; }
  .cta-checks li { font-size: 0.75rem; }
  .cta-alt { margin-top: 1.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-btn-arrow,
  .cta-alt-arrow { transition: none; }
}

/* =====================================================
   HERO VIDEO TRIGGER — floating pill, bottom-right of hero
   =====================================================
   A small, editorial trigger that lives over the hero illustration.
   Clicking it opens the native <dialog> modal with the intro video.
   Hidden on narrow phones — the mobile sticky CTA hosts its own
   sibling trigger at that size. */
.hero-video-trigger {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-full);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 30px -8px rgba(0, 0, 0, 0.22),
    0 4px 10px -2px rgba(0, 0, 0, 0.08);
  font-family: var(--font-ja);
  color: var(--text-main);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
/* Animated orange halo around the pill.
   Uses box-shadow (renders outside the box) instead of a radial gradient
   so the glow cannot bleed into the pill's interior — the parent forms its
   own stacking context, so a z-index:-1 child still paints above the
   parent's background per CSS painting order. */
.hero-video-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: transparent;
  box-shadow: 0 0 36px 8px rgba(245, 158, 11, 0.75);
  z-index: -1;
  pointer-events: none;
  animation: hero-video-trigger-glow 2.6s ease-in-out infinite;
}
.hero-video-trigger:hover {
  transform: scale(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -10px rgba(0, 0, 0, 0.28),
    0 6px 14px -2px rgba(0, 0, 0, 0.12);
}
.hero-video-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Play-icon disc — primary blue with a soft pulse ring */
.hero-video-trigger-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(245, 158, 11, 0.55);
}
.hero-video-trigger-icon svg {
  width: 18px;
  height: 18px;
  /* No offset needed — path d="M9 6v12l9-6z" has its centroid at the
     exact center of the 24×24 viewBox, so the triangle reads visually
     centered on its own. */
}

/* Text stack: Caveat eyebrow + Japanese label */
.hero-video-trigger-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.hero-video-trigger-eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.005em;
  margin-bottom: 0.15rem;
  transform: rotate(-1deg);
  transform-origin: left center;
}
.hero-video-trigger-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

@keyframes hero-video-trigger-glow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

/* On narrow phones the mobile sticky CTA hosts its own trigger;
   hide the hero-floating one to avoid duplication */
@media (max-width: 520px) {
  .hero-video-trigger { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-trigger::before { animation: none; }
  .hero-video-trigger { transition: none; }
}