:root {
  --ink: #214f51;
  --deep: #2b8588;
  --teal: #6cb3b8;
  --teal2: #3f969b;
  --mint: #d8eeee;
  --cream: #f3f4f2;
  --paper: #ffffff;
  --gold: #e8d36e;
  --line: rgba(33, 79, 81, .2);
  --muted: #526f70;
  --shadow: 0 24px 70px rgba(46, 112, 115, .16);
}

body {
  background: var(--paper);
}

.nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(33, 79, 81, .1);
}

.desktop-nav {
  gap: 24px;
}

.desktop-nav a {
  white-space: nowrap;
  transition: color .2s ease;
}

.desktop-nav a:hover {
  color: var(--teal2);
}

.nav-actions,
.social-links {
  display: flex;
  align-items: center;
}

.nav-actions {
  gap: 12px;
}

.social-links {
  gap: 7px;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: white;
  transition: .2s ease;
}

.social-links a:hover {
  color: white;
  background: var(--teal2);
  border-color: var(--teal2);
  transform: translateY(-2px);
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu-toggle,.mobile-menu{display:none}

@media(max-width:900px){
  body.mobile-menu-open{overflow:hidden}
  .nav{position:relative;z-index:100}
  .nav-actions{display:none}
  .mobile-menu-toggle{position:relative;z-index:1002;display:grid;align-content:center;gap:5px;width:46px;height:46px;margin-left:auto;padding:0 11px;border:1px solid rgba(52,54,47,.14);border-radius:50%;background:#fff;color:#34362f}
  .mobile-menu-toggle span{display:block;width:100%;height:1.5px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
  .mobile-menu-open .mobile-menu-toggle span:first-child{transform:translateY(6.5px) rotate(45deg)}
  .mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
  .mobile-menu-open .mobile-menu-toggle span:last-child{transform:translateY(-6.5px) rotate(-45deg)}
  .mobile-menu{position:fixed;z-index:1000;inset:0;display:block;visibility:hidden;pointer-events:none}
  .mobile-menu.open{visibility:visible;pointer-events:auto}
  .mobile-menu-backdrop{position:absolute;inset:0;border:0;background:rgba(34,39,31,.38);opacity:0;transition:opacity .3s}
  .mobile-menu.open .mobile-menu-backdrop{opacity:1}
  .mobile-menu-panel{position:absolute;top:0;right:0;width:min(88vw,390px);height:100%;display:flex;flex-direction:column;padding:26px 25px 24px;background:#fff;box-shadow:-24px 0 70px rgba(45,53,39,.2);transform:translateX(102%);transition:transform .34s cubic-bezier(.22,.8,.32,1);overflow-y:auto}
  .mobile-menu.open .mobile-menu-panel{transform:none}
  .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid rgba(52,54,47,.1)}
  .mobile-menu-head>span{color:#78914a;font-size:12px;font-weight:700;letter-spacing:.18em}
  .mobile-menu-close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#f3f5ee;color:#46513e;font-size:25px;line-height:1}
  .mobile-menu-panel nav{display:grid;padding:20px 0}
  .mobile-menu-panel nav>a,.mobile-course-group>p{display:grid;grid-template-columns:34px 1fr;align-items:center;margin:0;padding:15px 3px;border-bottom:1px solid rgba(52,54,47,.09)}
  .mobile-menu-panel nav span{color:#8a9d65;font-size:11px;font-weight:700;letter-spacing:.08em}
  .mobile-menu-panel nav b{color:#343a31;font:700 21px "Noto Serif TC"}
  .mobile-course-group{border-bottom:1px solid rgba(52,54,47,.09)}
  .mobile-course-group>p{border-bottom:0;padding-bottom:8px}
  .mobile-course-group>a{display:block;margin-left:37px;padding:8px 0;color:#66705f;font-size:14px}
  .mobile-course-group>a:last-child{padding-bottom:16px}
  .mobile-menu-foot{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;border-top:1px solid rgba(52,54,47,.1)}
  .mobile-menu-foot>p{max-width:170px;margin:0;color:#969d91;font-size:10px;line-height:1.6;letter-spacing:.12em}
  .mobile-menu-foot .social-links a{width:38px;height:38px;color:#63734d;font-size:10px;font-weight:700}
}

.social-links svg circle:last-child {
  fill: currentColor;
  stroke: none;
}

.brand {
  gap: 12px;
}

.brand-logo {
  display: block;
  width: 150px;
  height: 34px;
  flex: 0 0 150px;
  background-image: url("goodlifer-logo-cropped.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.studio-name {
  padding-left: 12px;
  border-left: 1px solid rgba(33, 79, 81, .28);
}

.studio-name b,
.studio-name small {
  display: block;
  line-height: 1.3;
}

.studio-name b {
  font-family: "Noto Serif TC";
  font-size: 21px;
  letter-spacing: .04em;
  color: #173f41;
}

.studio-name small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
}

.view-switch,
.small-btn {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(255, 255, 255, .25);
}

.hero-art {
  background: radial-gradient(circle at 50% 44%, #a9d9d9 0 12%, #6cb3b8 13% 44%, #2b8588 45% 100%);
}

.primary {
  background: var(--teal2);
  box-shadow: 0 10px 30px rgba(63, 150, 155, .24);
}

.quiet,
.course-card,
.quiz-card,
.stats article,
.panel {
  background: #fffdf4;
}

.paths,
.admin-side {
  background: var(--deep);
}

.paths .light,
.path-grid a,
.path-icon {
  color: #ffe98a;
}

.quiz-wrap {
  background: #f3f4f2;
}

.quote {
  background: var(--teal2);
}

.cta {
  background: var(--teal);
  color: #173f41;
}

.gold {
  background: #fff3a9;
  color: #214f51;
}

.admin-shell {
  background: #f3f4f2;
}

.anchor-offset {
  position: relative;
  top: -90px;
}

.admin-logo {
  display: block;
  padding-bottom: 26px;
}

.admin-logo b {
  display: block;
  margin-top: 8px;
  color: white;
}

.admin-brand-logo {
  width: 180px;
  height: 42px;
  background-size: contain;
}

.course-cover {
  background: linear-gradient(145deg, #69b9bc, #2b8588);
}

.course-cover.alt {
  background: linear-gradient(145deg, #efd66b, #b69a32);
}

.course-cover.goldish {
  background: linear-gradient(145deg, #9dd4d3, #559fa2);
}

@media (max-width: 760px) {
  .nav {
    gap: 8px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .brand-logo {
    width: 112px;
    height: 26px;
    flex-basis: 112px;
    background-size: contain;
  }

  .studio-name {
    display: none;
  }

  .view-switch {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .nav-actions {
    gap: 6px;
  }

  .social-links a {
    width: 30px;
    height: 30px;
  }
}

/* Full-screen editorial hero */
.hero.shell {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 86px);
  padding: clamp(70px, 9vh, 116px) max(24px, calc((100vw - 1320px) / 2));
  grid-template-columns: minmax(0, 1.16fr) minmax(430px, .84fr);
  gap: clamp(32px, 5vw, 88px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(232, 211, 110, .22), transparent 26%),
    linear-gradient(112deg, #fff 0 59%, #f1f3f1 59% 100%);
}

.hero.shell::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -230px;
  border: 1px solid rgba(63, 150, 155, .22);
  border-radius: 50%;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero h1 {
  max-width: 790px;
  margin: 18px 0 28px;
  font-size: clamp(58px, 7vw, 104px);
  line-height: 1.12;
  letter-spacing: -.055em;
}

.hero .lead {
  max-width: 690px;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.9;
}

.hero-actions {
  margin: 40px 0 34px;
}

.hero-actions .btn {
  min-height: 56px;
  padding-inline: 30px;
}

.hero-art {
  width: min(49vw, 700px);
  max-width: none;
  justify-self: end;
  transform: translateX(clamp(18px, 4vw, 72px));
  box-shadow: 0 38px 100px rgba(33, 79, 81, .2);
}

.compass b {
  font-size: clamp(30px, 3vw, 46px);
}

.view-switch {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 28px rgba(33, 79, 81, .14);
  backdrop-filter: blur(10px);
}

.intro.shell {
  width: 100%;
  max-width: none;
  padding: clamp(82px, 9vw, 126px) max(24px, calc((100vw - 1180px) / 2));
  background: #f3f4f2;
}

@media (max-width: 900px) {
  .hero.shell {
    min-height: auto;
    padding: 68px 28px 78px;
    grid-template-columns: 1fr;
    background:
      radial-gradient(circle at 8% 8%, rgba(232, 211, 110, .2), transparent 28%),
      linear-gradient(180deg, #fff 0 64%, #f1f3f1 64% 100%);
  }

  .hero h1 {
    font-size: clamp(50px, 10vw, 76px);
  }

  .hero-art {
    width: min(100%, 620px);
    justify-self: center;
    transform: none;
  }
}

@media (max-width: 600px) {
  .hero.shell {
    width: 100%;
    padding: 52px 20px 64px;
    gap: 46px;
  }

  .hero h1 {
    font-size: 47px;
    letter-spacing: -.045em;
  }

  .view-switch {
    left: 12px;
    bottom: 12px;
    padding: 8px 12px;
  }
}

/* Hero pathway: turn passion into a second profession */
.hero-art::before {
  display: none;
}

.growth-ring {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .035);
}

.growth-ring::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 50%;
}

.path-arrow {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #587735;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(82, 104, 44, .14);
  font: 700 13px/1 "Noto Sans TC";
  font-style: normal;
}

.arrow-one { right: 11%; top: 10%; transform: rotate(45deg); }
.arrow-two { right: -3%; bottom: 21%; transform: rotate(135deg); }
.arrow-three { left: 11%; bottom: 10%; transform: rotate(225deg); }
.arrow-four { left: -3%; top: 21%; transform: rotate(315deg); }

.growth-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 47%;
  aspect-ratio: 1;
  padding: 9%;
  border-radius: 50%;
  text-align: center;
  color: #34362f;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 22px 60px rgba(85, 103, 48, .18), 0 0 0 8px rgba(255, 255, 255, .12);
}

.growth-core > span {
  align-self: end;
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .18em;
  color: #789345;
}

.growth-core .core-line {
  display: block;
  white-space: nowrap;
}

.growth-core b {
  font-family: "Noto Serif TC";
  font-size: clamp(21px, 2vw, 32px);
  line-height: 1.45;
}

.growth-core .core-result {
  color: #6f9639;
  font-size: 1.14em;
}

.growth-core i {
  align-self: start;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9d94b;
}

.growth-step {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 32%;
  padding: 9px 15px 9px 10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  color: #34362f;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 9px 26px rgba(88, 108, 46, .1);
  backdrop-filter: blur(8px);
}

.growth-step small {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #719842;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.growth-step strong {
  font-size: clamp(12px, 1vw, 15px);
  white-space: nowrap;
}

.step-one {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.step-two {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.step-three {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.step-four {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 600px) {
  .hero-art {
    aspect-ratio: 1 / 1.06;
  }

  .growth-ring {
    inset: 11%;
  }

  .growth-core {
    width: 40%;
    padding: 6%;
  }

  .growth-core b {
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.4;
  }

  .growth-core > span {
    font-size: 7px;
    letter-spacing: .13em;
  }

  .growth-step {
    min-width: 0;
    gap: 6px;
    padding: 6px 9px 6px 6px;
  }

  .step-one,
  .step-three {
    width: 48%;
    justify-content: center;
  }

  .step-two,
  .step-four {
    width: 29%;
  }

  .step-two {
    right: 1%;
  }

  .step-four {
    left: 1%;
  }

  .growth-step small {
    width: 23px;
    height: 23px;
    font-size: 8px;
  }

  .growth-step strong {
    font-size: 10px;
  }

  .path-arrow {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }
}

/* Goodlifer brand palette — sections 03 onward */
.paths,
.courses,
.quiz-wrap,
.about,
.cta {
  --brand-ink: #24342d;
  --brand-forest: #314c3b;
  --brand-leaf: #6ebc45;
  --brand-lime: #b7d93d;
  --brand-yellow: #e4df67;
  --brand-mist: #f3f5ef;
  --brand-cream: #faf9f3;
  --brand-line: rgba(36, 52, 45, .12);
}

.paths {
  position: relative;
  overflow: hidden;
  background: #263c31;
}

.paths::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -230px;
  top: -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 217, 61, .16), transparent 68%);
  pointer-events: none;
}

.paths .shell {
  position: relative;
  z-index: 1;
}

.paths .light,
.paths .path-grid a,
.paths .path-icon {
  color: #d8e76e;
}

.paths h2,
.paths h3 {
  color: #fff;
}

.path-grid {
  border-color: rgba(255, 255, 255, .18);
}

.path-grid article,
.path-grid article:first-child {
  border-color: rgba(255, 255, 255, .16);
}

.path-grid article {
  transition: background .25s ease, transform .25s ease;
}

.path-grid article:hover {
  background: rgba(255, 255, 255, .045);
  transform: translateY(-4px);
}

.path-grid article > span,
.path-grid p {
  color: rgba(255, 255, 255, .67);
}

.courses.shell {
  width: 100%;
  max-width: none;
  padding: 110px max(24px, calc((100vw - 1180px) / 2));
  background: #fff;
}

.courses .section-no,
.courses .meta b {
  color: #599d39;
}

.courses .section-head > p,
.courses .course-body p {
  color: #6c756f;
}

.course-card,
.quiz-card {
  background: #fff;
  border-color: var(--brand-line);
  box-shadow: 0 16px 45px rgba(36, 52, 45, .055);
}

.course-card:hover {
  border-color: rgba(110, 188, 69, .34);
  box-shadow: 0 24px 60px rgba(36, 52, 45, .11);
}

.course-cover {
  background: linear-gradient(145deg, #b8d944, #5caf45);
}

.course-cover.alt {
  background: linear-gradient(145deg, #e8df72, #a9c844);
}

.course-cover.goldish {
  background: linear-gradient(145deg, #83c85a, #3b7651);
}

.course-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 58%);
  pointer-events: none;
}

.course-card .badge {
  color: #365b32;
  background: rgba(255, 255, 255, .9);
}

.quiz-wrap {
  background:
    radial-gradient(circle at 8% 12%, rgba(228, 223, 103, .26), transparent 31%),
    #f3f5ef;
}

.quiz-wrap .eyebrow,
.quiz-card .step,
.quiz-result .step {
  color: #599d39;
}

.answers button {
  border-color: var(--brand-line);
  color: var(--brand-ink);
}

.answers button:hover {
  border-color: #75b84d;
  background: #f7faef;
}

.quiz-wrap .primary {
  background: #4f963d;
  box-shadow: 0 10px 28px rgba(79, 150, 61, .2);
}

.about {
  color: var(--brand-ink);
}

.about .section-no {
  color: #599d39;
}

.about-copy > p,
.founders span {
  color: #6c756f;
}

.founders div {
  border-color: var(--brand-line);
}

.quote {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #3f6947, #283d31);
  box-shadow: 0 28px 70px rgba(36, 52, 45, .14);
}

.quote span {
  color: #d8e76e;
}

.cta {
  background: linear-gradient(108deg, #c9df55 0%, #9fce4a 52%, #72b94c 100%);
  color: #203128;
}

.cta .gold {
  background: #fff;
  color: #294331;
  box-shadow: 0 12px 34px rgba(36, 52, 45, .14);
}

.cta .gold:hover {
  background: #263c31;
  color: #fff;
}

/* Keep the demo dashboard in the same visual language. */
.admin-shell {
  background: #f3f5ef;
}

.admin-side {
  background: #263c31;
}

.admin-side nav button.active {
  background: rgba(216, 231, 110, .14);
  color: #eef3c8;
}

.stats article,
.panel {
  background: #fff;
  border-color: rgba(36, 52, 45, .1);
}

.small-btn,
.text-btn {
  color: #4f873f;
  border-color: #4f873f;
}

.avatar {
  background: #eef3d6;
  color: #4f7e3f;
}

.toast {
  background: #263c31;
}

@media (max-width: 600px) {
  .courses.shell {
    padding: 72px 14px;
  }
}

/* Light Goodlifer palette — warm, airy, and logo-led */
body {
  color: #34362f;
}

.studio-name b,
.desktop-nav a,
.social-links a {
  color: #34362f;
}

.studio-name {
  border-color: rgba(52, 54, 47, .2);
}

.studio-name small {
  color: #777a70;
}

.view-switch {
  color: #4d6146;
  border-color: #8fab69;
}

.hero,
.intro,
.paths,
.courses,
.quiz-wrap,
.about,
.cta {
  --gl-charcoal: #34362f;
  --gl-soft-text: #70736a;
  --gl-green: #70b847;
  --gl-lime: #b9d94b;
  --gl-yellow: #eadf73;
  --gl-sage: #e9efdc;
  --gl-warm: #f7f6f0;
  --gl-line: rgba(52, 54, 47, .11);
}

/* First two sections: preserve the backgrounds, replace all blue-green accents. */
.hero,
.intro {
  color: var(--gl-charcoal);
}

.hero .eyebrow,
.intro .section-no {
  color: #71843d;
}

.hero h1,
.intro h2 {
  color: var(--gl-charcoal);
}

.hero h1 .hero-accent {
  color: #70b847;
  font-style: normal;
}

.hero .lead,
.hero .trust,
.intro > p:last-child {
  color: var(--gl-soft-text);
}

.hero .primary {
  background: #70b847;
  color: #fff;
  box-shadow: 0 12px 32px rgba(112, 184, 71, .22);
}

.hero .quiet {
  border-color: var(--gl-line);
  color: var(--gl-charcoal);
}

.hero-art {
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .35), transparent 24%),
    linear-gradient(145deg, #e9df70 0%, #b9d94b 48%, #72b84a 100%);
  box-shadow: 0 34px 90px rgba(104, 124, 60, .18);
}

.hero-art::before,
.orbit {
  border-color: rgba(255, 255, 255, .52);
}

.compass span,
.hero-art > p {
  color: rgba(255, 255, 255, .88);
}

.compass i {
  border-color: #fff5b8;
}

.hero.shell::after {
  border-color: rgba(185, 217, 75, .28);
}

/* Remaining sections: remove heavy dark fields and create an airy rhythm. */
.paths {
  color: var(--gl-charcoal);
  background:
    radial-gradient(circle at 92% 0%, rgba(234, 223, 115, .3), transparent 29%),
    #eef2e5;
}

.paths::after {
  background: radial-gradient(circle, rgba(185, 217, 75, .18), transparent 68%);
}

.paths .light,
.paths .path-grid a,
.paths .path-icon {
  color: #668f3f;
}

.paths h2,
.paths h3 {
  color: var(--gl-charcoal);
}

.path-grid,
.path-grid article,
.path-grid article:first-child {
  border-color: rgba(52, 54, 47, .13);
}

.path-grid article > span,
.path-grid p {
  color: var(--gl-soft-text);
}

.path-grid article:hover {
  background: rgba(255, 255, 255, .56);
}

/* Learning-path pictograms: one visual language, three distinct systems. */
.path-grid .path-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 28px 0 34px;
}

.path-icon svg {
  width: 64px;
  height: 64px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-icon .icon-line {
  stroke-width: 5.5;
}

.path-icon .icon-lime,
.path-icon .icon-card-front,
.path-icon .icon-map-sheet {
  stroke: #8fcf3f;
}

.path-icon .icon-yellow {
  stroke: #efd85b;
}

.path-icon .icon-green,
.path-icon .icon-ground,
.path-icon .icon-card-back,
.path-icon .icon-fold,
.path-icon .icon-route {
  stroke: #557f45;
}

.path-icon .icon-ground,
.path-icon .icon-card-front,
.path-icon .icon-card-back,
.path-icon .icon-map-sheet,
.path-icon .icon-fold,
.path-icon .icon-route {
  stroke-width: 2.2;
}

.path-icon .icon-detail {
  fill: #efd85b;
  stroke: #efd85b;
  stroke-width: 1.2;
}

.path-icon .icon-dot,
.path-icon .icon-pin {
  fill: #8fcf3f;
  stroke: #fffdf7;
  stroke-width: 1.5;
}

@media (max-width: 600px) {
  .path-grid .path-icon {
    width: 60px;
    height: 60px;
    margin: 20px 0 26px;
  }

  .path-icon svg {
    width: 58px;
    height: 58px;
  }
}

.courses.shell {
  background: #fff;
}

.courses h2,
.course-body h3,
.quiz-wrap h2,
.quiz-card h3,
.about h2,
.cta h2 {
  color: var(--gl-charcoal);
}

.courses .section-no,
.courses .meta b,
.quiz-wrap .eyebrow,
.quiz-card .step,
.quiz-result .step,
.about .section-no {
  color: #668f3f;
}

.course-card,
.quiz-card {
  background: #fff;
  border-color: var(--gl-line);
  box-shadow: 0 16px 44px rgba(52, 54, 47, .06);
}

.course-cover {
  background: linear-gradient(145deg, #dce77a, #8fc957);
}

.course-cover.alt {
  background: linear-gradient(145deg, #f0e89b, #d4d868);
}

.course-cover.goldish {
  background: linear-gradient(145deg, #dcebc0, #87bd63);
}

.quiz-wrap {
  background:
    radial-gradient(circle at 10% 8%, rgba(234, 223, 115, .26), transparent 30%),
    #f7f6f0;
}

.answers button:hover {
  border-color: #9cbd61;
  background: #fafbef;
}

.quiz-wrap .primary {
  background: #70a94c;
  box-shadow: 0 10px 28px rgba(112, 169, 76, .18);
}

.about {
  color: var(--gl-charcoal);
}

.quote {
  color: var(--gl-charcoal);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .55), transparent 33%),
    #e6edcf;
  box-shadow: 0 24px 65px rgba(82, 95, 56, .1);
}

.quote span {
  color: #8eaf4f;
}

.cta {
  color: var(--gl-charcoal);
  background: linear-gradient(108deg, #f1eaa2 0%, #e1e98e 56%, #cce27e 100%);
}

.cta .gold {
  color: #fff;
  background: #4d6146;
  box-shadow: 0 12px 30px rgba(77, 97, 70, .16);
}

.cta .gold:hover {
  color: #fff;
  background: #3e5139;
}

/* Dashboard demo follows the same light visual system. */
.admin-shell {
  background: #f7f6f0;
}

.admin-side {
  color: var(--gl-charcoal);
  background: #e9efdc;
}

.admin-side nav button,
.admin-side > p {
  color: #66705f;
}

.admin-side nav button.active {
  color: #3e5139;
  background: rgba(255, 255, 255, .72);
}

.admin-logo b {
  color: #3e5139;
}

.toast {
  background: #4d6146;
}

/* Brand belief — editorial statement */
.belief-section {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 10vw, 150px) 0;
  color: #34362f;
  background:
    radial-gradient(circle at 88% 10%, rgba(226, 223, 112, .2), transparent 27%),
    #f3f4f0;
}

.belief-section::before {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -250px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(133, 169, 77, .2);
  border-radius: 50%;
}

.belief-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(60px, 8vw, 126px);
  align-items: center;
}

.belief-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: #6f7e55;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.belief-label span {
  color: #34362f;
  letter-spacing: .12em;
}

.belief-label i {
  width: 34px;
  height: 1px;
  background: #a5bd6a;
}

.belief-heading h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #34362f;
  font: 700 clamp(42px, 5.25vw, 72px)/1.3 "Noto Serif TC";
  letter-spacing: -.055em;
}

.belief-heading h2 em {
  display: inline-block;
  color: #6ea846;
  font-style: normal;
  white-space: nowrap;
}

.belief-symbol {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  margin-top: 42px;
  padding: 14px 22px;
  border: 1px solid rgba(52, 54, 47, .12);
  border-radius: 999px;
  color: #74796e;
  background: rgba(255, 255, 255, .55);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
}

.belief-symbol b {
  color: #79a54d;
  font-size: 28px;
  font-weight: 500;
}

.belief-heading {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  padding: 62px 24px 58px 0;
}

.belief-heading::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -42px 0 26%;
  border-radius: 54% 46% 48% 52% / 40% 58% 42% 60%;
  background: linear-gradient(145deg, rgba(219, 224, 110, .26), rgba(119, 177, 78, .18));
}

.belief-figure {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -6px;
  width: min(58%, 330px);
  height: 118%;
  object-fit: contain;
  transform: translateY(-50%);
  opacity: .82;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .4));
  pointer-events: none;
  user-select: none;
}

.belief-copy {
  position: relative;
  padding: clamp(34px, 4vw, 58px);
  border: 1px solid rgba(52, 54, 47, .09);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 28px 80px rgba(63, 70, 54, .07);
  backdrop-filter: blur(12px);
}

.belief-number {
  position: absolute;
  right: 30px;
  top: 20px;
  color: rgba(112, 151, 72, .22);
  font: 700 56px/1 "Noto Serif TC";
}

.belief-copy p {
  position: relative;
  margin: 0;
  color: #666b62;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 2.05;
}

.belief-copy .belief-lead {
  color: #43483f;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 500;
}

.belief-green {
  color: #6ea846;
  font-weight: 700;
}

.belief-copy strong {
  color: #638f43;
  font-weight: 700;
}

.belief-divider {
  width: 56px;
  height: 3px;
  margin: 28px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #dedb6b, #77b14e);
}

.belief-story-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 14px 22px;
  border: 1px solid #b2df25;
  border-radius: 999px;
  color: #26331f;
  background: linear-gradient(135deg, #dcff55 0%, #c4f238 100%);
  box-shadow: 0 12px 30px rgba(166, 213, 36, .3);
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.belief-story-link span {
  color: #3d5628;
  font-size: 18px;
  transition: transform .2s ease;
}

.belief-story-link:hover {
  color: #1f2d18;
  background: linear-gradient(135deg, #e7ff70 0%, #d0fa43 100%);
  box-shadow: 0 16px 36px rgba(166, 213, 36, .4);
  transform: translateY(-2px);
}

.belief-story-link:hover span {
  color: #314821;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .belief-shell {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .belief-heading {
    max-width: 720px;
    min-height: 440px;
  }

  .belief-copy {
    max-width: 720px;
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .belief-section {
    padding: 82px 0;
  }

  .belief-shell {
    width: calc(100% - 40px);
    gap: 38px;
  }

  .belief-label {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px 10px;
  }

  .belief-heading h2 {
    font-size: 40px;
    line-height: 1.38;
  }

  .belief-symbol {
    margin-top: 30px;
    gap: 12px;
    padding: 11px 15px;
    font-size: 15px;
  }

  .belief-symbol b {
    font-size: 23px;
  }

  .belief-heading {
    min-height: 390px;
    padding: 46px 0 42px;
  }

  .belief-heading::before {
    inset: 0 -24px 0 12%;
  }

  .belief-figure {
    right: -28px;
    width: 68%;
    height: 110%;
    opacity: .66;
  }

  .belief-copy {
    padding: 32px 24px;
    border-radius: 22px;
  }

  .belief-number {
    right: 20px;
    top: 18px;
    font-size: 44px;
  }

  .belief-copy .belief-lead {
    padding-right: 14px;
    font-size: 18px;
  }
}

/* Homepage promotional carousel */
.promo-section {
  padding: 96px 0 84px;
  overflow: hidden;
  background: #fff;
}

/* Course navigation */
.nav-course-menu { position: relative; }
.nav-course-trigger { display: flex; align-items: center; gap: 6px; }
.nav-course-trigger span { color: #7b9b50; font-size: 16px; transition: transform .2s; }
.nav-course-menu:hover .nav-course-trigger span,
.nav-course-menu:focus-within .nav-course-trigger span { transform: rotate(180deg); }
.course-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 18px);
  left: 50%;
  width: 310px;
  padding: 18px;
  border: 1px solid rgba(52,54,47,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 65px rgba(48,61,42,.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%,8px);
  transition: .2s ease;
}
.nav-course-menu:hover .course-dropdown,
.nav-course-menu:focus-within .course-dropdown { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.course-dropdown::before { content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.course-dropdown p { margin: 0 10px 9px; color:#83936a; font-size:11px; font-weight:700; letter-spacing:.15em; }
.desktop-nav .course-dropdown a { display:block; padding:11px 10px; border-radius:11px; }
.desktop-nav .course-dropdown a:hover,
.desktop-nav .course-dropdown a[aria-current="page"] { background:#f4f6ec; }
.course-dropdown b,.course-dropdown small { display:block; }
.course-dropdown b { color:#3f443a; font:600 15px "Noto Serif TC"; }
.course-dropdown small { margin-top:2px; color:#8a9084; font-size:12px; }
.desktop-nav .course-dropdown .dropdown-all { margin-top:7px; border-top:1px solid rgba(52,54,47,.08); border-radius:0; color:#6e9f49; font-weight:600; }
.course-card-link { display:block; height:100%; }

/* Numerology course detail page */
.course-page { background:#fff; color:#34362f; }
.course-page .nav { position:relative; z-index:20; background:#fff; }
.course-page .desktop-nav .active { color:#6d9d49; font-weight:700; }
.course-back { display:none; color:#6b7861; font-size:13px; }
.number-hero { position:relative; overflow:hidden; padding:64px 0 105px; background:linear-gradient(135deg,#f7f7f1 0%,#fbfbea 52%,#eff4e8 100%); }
.number-hero::after { content:"08"; position:absolute; right:-1vw; bottom:-110px; color:rgba(117,160,72,.08); font:700 360px/1 "Noto Serif TC"; }
.number-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:75px; align-items:center; }
.course-kicker { margin:0 0 15px; color:#789555; font-size:12px; font-weight:700; letter-spacing:.2em; }
.course-type { width:max-content; margin:0 0 22px; padding:8px 14px; border:1px solid rgba(111,153,71,.25); border-radius:999px; color:#687c4f; background:rgba(255,255,255,.6); font-size:13px; }
.number-hero h1 { margin:0 0 24px; color:#34362f; font:700 clamp(52px,6.5vw,90px)/1.12 "Noto Serif TC"; letter-spacing:-.06em; }
.number-hero h1 em { color:#71a84b; font-style:normal; }
.number-lead { max-width:650px; color:#60675a; font-size:18px; line-height:1.9; }
.number-facts { display:flex; gap:0; margin:32px 0; }
.number-facts span { min-width:125px; padding:0 22px; border-left:1px solid rgba(52,54,47,.14); color:#3f463b; font-weight:600; }
.number-facts span:first-child { padding-left:0; border-left:0; }
.number-facts small { display:block; color:#8a9182; font-size:11px; font-weight:500; letter-spacing:.08em; }
.number-actions { display:flex; gap:12px; }
.blueprint-map { position:relative; padding:18px; border:1px solid rgba(76,100,56,.12); border-radius:30px; background:rgba(255,255,255,.7); box-shadow:0 30px 80px rgba(80,110,54,.13); backdrop-filter:blur(10px); }
.blueprint-map::before { content:""; position:absolute; inset:10px; z-index:-1; border-radius:24px; background:linear-gradient(145deg,rgba(224,233,119,.13),rgba(113,168,75,.06)); }
.blueprint-title { display:flex; justify-content:space-between; align-items:center; padding:2px 5px 14px; }
.blueprint-title small { color:#7c965e; font-size:9px; font-weight:700; letter-spacing:.16em; }
.blueprint-title b { color:#4b5941; font:700 15px "Noto Serif TC"; }
.blueprint-stage { padding:10px; border-radius:18px; }
.peak-stage { background:linear-gradient(135deg,#eef2ce,#e3ebbf); }
.challenge-stage { background:linear-gradient(135deg,#e6eddf,#dce8d3); }
.blueprint-stage>p { display:flex; justify-content:space-between; margin:0 2px 8px; color:#596d46; font:700 13px "Noto Serif TC"; }
.blueprint-stage>p span { color:#87977b; font:700 8px "Noto Sans TC"; letter-spacing:.13em; }
.challenge-stage>p { margin:8px 2px 0; }
.stage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.stage-grid div { min-width:0; padding:8px 3px; border:1px solid rgba(255,255,255,.75); border-radius:10px; background:rgba(255,255,255,.58); text-align:center; }
.stage-grid b,.stage-grid small,.stage-grid em { display:block; }
.stage-grid b { color:#4f5c46; font:700 11px "Noto Serif TC"; }
.stage-grid small { color:#7f8978; font-size:8px; }
.stage-grid em { color:#73964f; font-size:9px; font-style:normal; font-weight:700; }
.blueprint-main { display:grid; grid-template-columns:105px 1fr 105px; gap:7px; align-items:stretch; margin:8px 0; }
.number-rail { display:grid; gap:6px; }
.number-rail div { position:relative; display:flex; min-height:64px; flex-direction:column; justify-content:center; padding:7px 7px 7px 30px; border:1px solid rgba(112,155,72,.18); border-radius:13px; background:#fff; }
.number-rail i { position:absolute; left:7px; top:8px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:#fff; background:#75a64e; font-size:10px; font-style:normal; font-weight:700; }
.number-rail b { color:#526047; font:700 12px "Noto Serif TC"; }
.number-rail small { color:#899183; font-size:9px; line-height:1.45; }
.life-cycles { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:9px; border-radius:16px; color:#fff; background:linear-gradient(155deg,#789f55,#4e713e); }
.life-cycles>p { grid-column:1/-1; display:flex; justify-content:space-between; margin:0 1px 3px; font:700 12px "Noto Serif TC"; }
.life-cycles>p span { color:#dce7d4; font:700 8px "Noto Sans TC"; letter-spacing:.1em; }
.life-cycles div { position:relative; min-width:0; padding:27px 5px 7px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.1); text-align:center; }
.life-cycles i { position:absolute; left:50%; top:5px; transform:translateX(-50%); color:#e3e57a; font:700 15px "Noto Serif TC"; }
.life-cycles b,.life-cycles small { display:block; }
.life-cycles b { font:700 12px "Noto Serif TC"; }.life-cycles small { color:#dce6d8; font-size:9px; }
.support-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.support-numbers div { padding:8px; border:1px dashed rgba(99,128,74,.25); border-radius:11px; background:rgba(255,255,255,.55); text-align:center; }
.support-numbers b,.support-numbers small { display:block; }.support-numbers b { color:#596b4b; font:700 11px "Noto Serif TC"; }.support-numbers small { color:#8d9588; font-size:8px; }
.course-intro { display:grid; grid-template-columns:1fr .9fr; gap:110px; padding-block:120px; }
.course-intro h2,.fit-heading h2,.curriculum h2,.ability-section h2,.role-section h2,.enroll-section h2 { color:#34362f; font:700 clamp(34px,4vw,54px)/1.45 "Noto Serif TC"; letter-spacing:-.035em; }
.course-intro>div:last-child { padding-top:40px; color:#697064; font-size:18px; line-height:2; }
.fit-section { padding:110px 0; background:#f3f4f0; }
.fit-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.fit-heading { position:sticky; top:40px; align-self:start; }
.fit-heading p:last-child,.curriculum-head>p { color:#73796e; }
.fit-list { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fit-list article { min-height:230px; padding:30px; border:1px solid rgba(52,54,47,.09); border-radius:20px; background:#fff; }
.fit-list span,.curriculum-grid article>span { color:#7fa753; font-size:11px; font-weight:700; letter-spacing:.15em; }
.fit-list h3,.curriculum-grid h3,.ability-grid h3 { margin:32px 0 10px; color:#3e4439; font:700 22px "Noto Serif TC"; }
.fit-list p,.curriculum-grid p,.ability-grid p { color:#757b70; }
.curriculum { padding-block:120px; }
.curriculum-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:52px; }
.curriculum-head>p { max-width:380px; }
.curriculum-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.curriculum-grid article { padding:34px; border:1px solid rgba(52,54,47,.1); border-radius:22px; background:#fff; }
.curriculum-grid .curriculum-feature { grid-row:span 3; padding:42px; background:linear-gradient(145deg,#edf1d4,#f8f8ef); }
.curriculum-grid h3 { margin-top:18px; font-size:27px; }
.curriculum-grid ul { margin:28px 0 0; padding:0; list-style:none; }
.curriculum-grid li { padding:12px 0; border-top:1px solid rgba(52,54,47,.1); color:#596151; }
.ability-section { padding:110px 0; color:#fff; background:#40543a; }
.ability-section h2 { max-width:760px; color:#fff; }
.ability-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:55px; border-top:1px solid rgba(255,255,255,.18); }
.ability-grid article { padding:30px 24px; border-right:1px solid rgba(255,255,255,.18); }
.ability-grid article:first-child { border-left:1px solid rgba(255,255,255,.18); }
.ability-grid b { color:#dedd6d; font:600 34px "Noto Serif TC"; }
.ability-grid h3 { color:#fff; }.ability-grid p { color:#ccd6c8; }
.role-section { display:grid; grid-template-columns:1fr .8fr; gap:100px; align-items:center; padding-block:120px; }
.role-copy>p:last-child { color:#70776b; font-size:17px; line-height:2; }
.role-card { padding:48px; border-radius:28px; color:#fff; background:linear-gradient(145deg,#90b855,#52783d); box-shadow:0 28px 70px rgba(64,84,58,.2); }
.role-card small { letter-spacing:.18em; }.role-card h3 { margin:28px 0 18px; font:700 38px/1.5 "Noto Serif TC"; }
.role-card>p { color:#eef4e9; }.role-card div { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.role-card span { padding:7px 12px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-size:12px; }
.enroll-section { padding:105px 0; background:#eef1e6; }
.enroll-grid { display:grid; grid-template-columns:1fr 420px; gap:100px; align-items:center; }
.enroll-info { display:flex; gap:45px; margin-top:36px; }
.enroll-info span { color:#434a3e; font-weight:600; }.enroll-info small { display:block; color:#858d80; font-size:11px; font-weight:500; }
.price-card { padding:36px; border-radius:24px; background:#fff; box-shadow:0 20px 60px rgba(62,74,55,.1); }
.price-card>small { color:#858d80; }.price-card strong { display:block; margin:8px 0; color:#577c3e; font:700 40px "Noto Serif TC"; }
.price-card p { color:#7a8175; font-size:13px; }.price-card .btn { width:100%; margin-top:10px; }.notify-link { display:block; margin-top:18px; color:#668c48; text-align:center; font-size:13px; font-weight:600; }
.course-footer { padding:25px 0; color:#6f786a; background:#fff; font-size:13px; }.course-footer div { display:flex; justify-content:space-between; }

@media(max-width:900px){
  .course-back{display:block}.number-hero-grid,.course-intro,.fit-grid,.role-section,.enroll-grid{grid-template-columns:1fr}.blueprint-map{width:min(620px,100%);margin:20px auto 0}.fit-heading{position:static}.ability-grid{grid-template-columns:1fr 1fr}.enroll-grid{gap:45px}.price-card{max-width:520px}.course-intro,.fit-grid,.role-section{gap:45px}.course-nav .desktop-nav{display:none}
}
@media(max-width:600px){
  .number-hero{padding:38px 0 75px}.number-hero h1{font-size:50px}.number-facts{display:grid;grid-template-columns:repeat(3,1fr)}.number-facts span{min-width:0;padding:0 10px;font-size:13px}.number-facts span:first-child{padding-left:0}.number-actions{display:grid}.blueprint-map{width:100%;padding:12px}.blueprint-title{display:grid;gap:2px}.stage-grid{grid-template-columns:1fr 1fr}.blueprint-main{grid-template-columns:1fr}.number-rail{grid-template-columns:repeat(3,1fr)}.number-rail div{min-height:74px;padding:29px 6px 7px}.number-rail i{left:6px;top:6px}.life-cycles{order:-1}.support-numbers{grid-template-columns:repeat(3,1fr)}.course-intro,.curriculum,.role-section{padding-block:78px}.fit-section,.ability-section,.enroll-section{padding-block:75px}.course-intro>div:last-child{padding-top:0;font-size:16px}.fit-list,.curriculum-grid{grid-template-columns:1fr}.fit-list article{min-height:0}.curriculum-head{display:block}.curriculum-grid .curriculum-feature{grid-row:auto;padding:30px}.ability-grid{grid-template-columns:1fr}.ability-grid article,.ability-grid article:first-child{border-left:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.role-card{padding:34px}.role-card h3{font-size:31px}.enroll-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.price-card strong{font-size:35px}.course-footer div{display:grid;gap:5px}
}

.promo-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 34px;
}

.promo-head h2 {
  max-width: 720px;
  margin: 8px 0 0;
  color: #34362f;
  font: 700 clamp(32px, 4vw, 52px)/1.35 "Noto Serif TC";
}

.promo-head > p {
  max-width: 360px;
  margin: 0;
  color: #70736a;
}

.promo-head .section-no {
  color: #71843d;
}

.promo-carousel {
  position: relative;
  width: min(1380px, calc(100% - 40px));
  margin: auto;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 26px 80px rgba(68, 77, 54, .11);
}

.promo-track {
  display: flex;
  transition: transform .65s cubic-bezier(.22, .8, .25, 1);
}

.promo-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(390px, 45vw, 610px);
  display: flex;
  align-items: end;
  padding: clamp(34px, 6vw, 82px);
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.promo-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(39, 45, 35, .72) 0%, rgba(39, 45, 35, .36) 48%, rgba(39, 45, 35, .06) 78%);
}

.promo-slide.theme-lime {
  background: radial-gradient(circle at 78% 28%, rgba(255,255,255,.48), transparent 24%), linear-gradient(135deg, #dfe983, #8dc85a);
}

.promo-slide.theme-sun {
  background: radial-gradient(circle at 82% 22%, rgba(255,255,255,.45), transparent 23%), linear-gradient(135deg, #efe6a2, #d8cf63 55%, #9cc967);
}

.promo-slide.theme-sage {
  background: radial-gradient(circle at 80% 26%, rgba(255,255,255,.52), transparent 24%), linear-gradient(135deg, #dcebcf, #93c676 58%, #6eaa58);
}

.promo-soul-feature {
  align-items: center;
  justify-content: space-between;
  min-height: clamp(570px, 48vw, 680px);
  padding: clamp(45px, 6vw, 82px) clamp(55px, 7vw, 100px);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.72), transparent 26%),
    linear-gradient(120deg,#fff9df 0%,#f6df72 48%,#edca45 100%);
}
.promo-soul-feature::before {
  background:
    linear-gradient(90deg,rgba(255,252,235,.94) 0%,rgba(255,249,216,.76) 43%,rgba(246,221,111,.08) 67%),
    repeating-linear-gradient(118deg,transparent 0 42px,rgba(255,255,255,.13) 43px 44px);
}
.promo-soul-feature::after {
  content: "SOUL NAVIGATION";
  position: absolute;
  left: 4%;
  bottom: -8%;
  color: rgba(220,87,53,.08);
  font: 700 clamp(58px,9vw,132px)/1 "Noto Serif TC";
  letter-spacing: .04em;
  white-space: nowrap;
}
.soul-promo-copy {
  position: relative;
  z-index: 4;
  width: 48%;
  max-width: 610px;
  color: #28211b;
}
.soul-promo-copy .promo-kicker {
  margin-bottom: 22px;
  border-color: rgba(207,69,40,.3);
  background: rgba(255,255,255,.56);
  color: #cf4528;
}
.soul-promo-copy h3 { margin: 0 0 22px; font: 700 clamp(48px,5.4vw,76px)/1.03 "Noto Serif TC"; letter-spacing: -.06em; }
.soul-promo-copy h3 em,.soul-promo-copy h3 span { display: block; font-style: normal; }
.soul-promo-copy h3 em { color: #e45532; }
.soul-promo-copy h3 span { color: #201c18; }
.soul-promo-copy > p { max-width: 590px; margin: 0 0 19px; padding-left: 18px; border-left: 4px solid #1e777a; color: #4a4034; font: 500 clamp(16px,1.35vw,19px)/1.85 "Noto Serif TC"; }
.soul-promo-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: #1e777a; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.soul-promo-tags i { color: #e45532; font-style: normal; }
.soul-promo-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; max-width: 590px; margin: 0 0 24px; padding-top: 19px; border-top: 1px solid rgba(64,51,30,.18); }
.soul-promo-path span { min-width: 0; }
.soul-promo-path small,.soul-promo-path b { display: block; }
.soul-promo-path small { margin-bottom: 4px; color: #e45532; font: 700 10px/1 "Noto Sans TC"; letter-spacing: .1em; }
.soul-promo-path b { color: #2d2924; font: 700 14px/1.35 "Noto Serif TC"; white-space: nowrap; }
.soul-promo-path > i { margin: 10px 8px 0; color: #1e777a; font-style: normal; }
.soul-promo-copy .promo-link { color: #fff; background: #e45532; box-shadow: 0 13px 25px rgba(178,65,35,.2); }
.soul-promo-visual { position: absolute; z-index: 2; top: 0; right: 0; width: 55%; height: 100%; overflow: hidden; }
.soul-promo-visual > p { position: absolute; z-index: 5; top: 5%; right: 8%; margin: 0; text-align: right; }
.soul-promo-visual > p small,.soul-promo-visual > p b { display: block; }
.soul-promo-visual > p small { margin-bottom: 8px; color: #13777c; font: 700 10px/1.3 "Noto Sans TC"; letter-spacing: .2em; white-space: nowrap; }
.soul-promo-visual > p b { color: #483821; font: 700 clamp(15px,1.2vw,18px)/1.6 "Noto Serif TC"; }
.soul-promo-compass { position: absolute; z-index: 1; top: 47%; right: -2%; width: min(58vw,700px); max-width: none; opacity: .88; transform: translateY(-50%); filter: saturate(.92) contrast(.96); -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 14%,#000 34%); mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 14%,#000 34%); }
.soul-promo-visual::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(246,222,117,0) 0%,rgba(246,222,117,.03) 28%,transparent 55%); }
.soul-promo-cards { position: absolute; z-index: 3; left: 12%; bottom: 1%; display: flex; align-items: end; gap: clamp(5px,.65vw,10px); width: 76%; }
.soul-promo-cards figure { width: 24%; margin: 0; text-align: center; }
.soul-promo-cards img { display: block; width: 100%; border: 3px solid rgba(255,255,255,.88); border-radius: 14px; box-shadow: 0 22px 38px rgba(85,60,15,.2); }
.soul-promo-cards figure:nth-child(1) { transform: rotate(-6deg) translateY(20px); }
.soul-promo-cards figure:nth-child(2) { transform: translateY(-10px); }
.soul-promo-cards figure:nth-child(3) { transform: rotate(2deg) translateY(12px); }
.soul-promo-cards figure:nth-child(4) { transform: rotate(7deg) translateY(-17px); }
.soul-promo-cards figcaption { margin-top: 7px; color: #4f3e24; font: 700 clamp(11px,1vw,15px)/1.3 "Noto Serif TC"; white-space: nowrap; }
.soul-promo-cards figcaption small { color: #12777c; font: 700 9px/1 "Noto Sans TC"; letter-spacing: .08em; }

.promo-art {
  position: absolute;
  right: 8%;
  top: 50%;
  width: clamp(190px, 28vw, 410px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 48% 52% 45% 55%;
}

.promo-art::before,
.promo-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
}

.promo-art::before { inset: 15%; }
.promo-art::after { inset: 32%; background: rgba(255,255,255,.24); }

.promo-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  color: #fff;
}

.promo-kicker {
  display: inline-flex;
  margin-bottom: 17px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  backdrop-filter: blur(8px);
}

.promo-content h3 {
  margin: 0 0 18px;
  font: 700 clamp(34px, 5vw, 66px)/1.25 "Noto Serif TC";
  letter-spacing: -.035em;
}

.promo-content p {
  max-width: 560px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.87);
  font-size: clamp(16px, 1.4vw, 20px);
}

.promo-link {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 23px;
  border-radius: 999px;
  color: #34362f;
  background: #fff;
  font-weight: 700;
}

.promo-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  color: #34362f;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 24px rgba(52,54,47,.12);
}

.promo-arrow.prev { left: 20px; }
.promo-arrow.next { right: 20px; }

.promo-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.promo-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfd4c8;
  transition: width .25s, background .25s;
}

.promo-dots button.active {
  width: 30px;
  background: #84ae4c;
}

/* Banner manager */
.banner-manager {
  margin-top: 20px;
}

.manager-badge {
  padding: 5px 10px;
  border-radius: 999px;
  color: #58713f;
  background: #edf3dc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.banner-admin-grid {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(420px, 1.3fr);
  gap: 28px;
}

.banner-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.banner-list button {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(52,54,47,.1);
  border-radius: 12px;
  text-align: left;
  color: #34362f;
  background: #fff;
}

.banner-list button.active {
  border-color: #93b768;
  background: #f8faef;
}

.banner-thumb {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.banner-thumb.theme-lime { background: linear-gradient(135deg, #dfe983, #8dc85a); }
.banner-thumb.theme-sun { background: linear-gradient(135deg, #efe6a2, #d8cf63 55%, #9cc967); }
.banner-thumb.theme-sage { background: linear-gradient(135deg, #dcebcf, #93c676 58%, #6eaa58); }

.banner-list b,
.banner-list small { display: block; }
.banner-list small { color: #777a70; }
.banner-state { color: #658044; font-size: 11px; }

.banner-form {
  display: grid;
  gap: 14px;
}

.banner-form label {
  display: grid;
  gap: 6px;
  color: #5f655c;
  font-size: 12px;
  font-weight: 600;
}

.banner-form input,
.banner-form select,
.banner-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(52,54,47,.14);
  border-radius: 9px;
  color: #34362f;
  background: #fff;
  font: 400 14px/1.5 "Noto Sans TC";
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.upload-field input { display: none; }
.upload-field span {
  padding: 16px;
  border: 1px dashed #9eb37d;
  border-radius: 10px;
  text-align: center;
  color: #607447;
  background: #fafbf5;
  cursor: pointer;
}

.banner-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.banner-form-actions .visibility {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.banner-form-actions .visibility input { width: auto; }

.banner-save {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #678e47;
  font-weight: 700;
}

@media (max-width: 900px) {
  .promo-head { display: block; }
  .promo-head > p { margin-top: 14px; }
  .promo-carousel { width: calc(100% - 28px); border-radius: 24px; }
  .promo-slide { min-height: 510px; }
  .promo-art { right: -3%; top: 25%; width: 250px; }
  .banner-admin-grid { grid-template-columns: 1fr; }
  .promo-soul-feature { min-height: 680px; padding: 42px 48px; }
  .soul-promo-copy { width: 54%; }
  .soul-promo-visual { width: 58%; }
  .soul-promo-cards { left: 12%; width: 76%; }
}

@media (max-width: 600px) {
  .promo-section { padding: 72px 0 62px; }
  .promo-head { width: calc(100% - 40px); }
  .promo-head h2 { font-size: 34px; }
  .promo-slide { min-height: 520px; padding: 32px 24px 42px; }
  .promo-slide::before { background: linear-gradient(0deg, rgba(39,45,35,.78), rgba(39,45,35,.06) 80%); }
  .promo-art { top: 27%; right: 50%; width: 230px; transform: translate(50%,-50%); }
  .promo-content h3 { font-size: 37px; }
  .promo-content p { font-size: 15px; }
  .promo-arrow { top: 44%; width: 40px; height: 40px; }
  .promo-arrow.prev { left: 10px; }
  .promo-arrow.next { right: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .banner-form-actions { align-items: stretch; flex-direction: column; }
  .promo-soul-feature { align-items: end; min-height: 780px; padding: 32px 24px 43px; }
  .promo-soul-feature::before { background: linear-gradient(0deg,rgba(255,249,221,.98) 0%,rgba(255,247,212,.9) 46%,rgba(246,221,111,.06) 72%); }
  .promo-soul-feature::after { left: -4%; bottom: 38%; font-size: 62px; }
  .soul-promo-copy { width: 100%; }
  .soul-promo-copy .promo-kicker { margin-bottom: 12px; }
  .soul-promo-copy h3 { margin-bottom: 14px; font-size: 43px; line-height: 1.04; }
  .soul-promo-copy > p { margin-bottom: 14px; padding-left: 12px; font-size: 14px; line-height: 1.65; }
  .soul-promo-tags { gap: 5px; margin-bottom: 15px; font-size: 10px; }
  .soul-promo-path { margin-bottom: 17px; padding-top: 13px; }
  .soul-promo-path b { font-size: 11px; }
  .soul-promo-path > i { margin-inline: 2px; font-size: 10px; }
  .soul-promo-visual { top: 0; width: 100%; height: 49%; }
  .soul-promo-compass { top: 42%; right: 50%; width: 440px; transform: translate(50%,-50%); }
  .soul-promo-visual::before { background: linear-gradient(0deg,#f8e17b 0%,rgba(248,225,123,.06) 35%); }
  .soul-promo-visual > p { top: 4%; right: 6%; }
  .soul-promo-cards { left: 50%; bottom: -11%; width: 66%; transform: translateX(-50%); }
  .soul-promo-cards figcaption { font-size: 9px; }
}

/* Homepage headline scale refinement */
.hero .eyebrow {
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: .08em;
}

.hero h1 {
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.18;
  letter-spacing: -.045em;
}

@media (max-width: 900px) {
  .hero .eyebrow {
    font-size: 22px;
  }

  .hero h1 {
    font-size: clamp(38px, 7vw, 52px);
  }
}

@media (max-width: 600px) {
  .hero .eyebrow {
    font-size: 20px;
    letter-spacing: .05em;
  }

  .hero h1 {
    font-size: 34px;
  }
}

/* Blog front and editor */
.blog-section { padding:110px 0; background:#f4f5f1; }
.blog-head { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:44px; }
.blog-head h2 { margin:8px 0 0; color:#34362f; font:700 clamp(34px,4vw,52px)/1.4 "Noto Serif TC"; }
.blog-head>p { max-width:420px; margin:0; color:#747c70; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card { overflow:hidden; border:1px solid rgba(52,54,47,.09); border-radius:23px; background:#fff; transition:.25s ease; cursor:pointer; }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 24px 65px rgba(63,70,54,.1); }
.blog-cover { position:relative; height:210px; overflow:hidden; background-position:center; background-size:cover; }
.blog-cover::before,.post-list-cover::before,.article-dialog-cover::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 28%,rgba(255,255,255,.58),transparent 22%),repeating-radial-gradient(circle at 80% 90%,transparent 0 28px,rgba(255,255,255,.25) 29px 30px); }
.post-lime { background-color:#cbdc69; }.post-green { background-color:#75ae74; }.post-sun { background-color:#e7d77a; }
.blog-cover span { position:absolute; z-index:1; left:18px; top:17px; padding:6px 11px; border-radius:999px; color:#52613e; background:rgba(255,255,255,.82); font-size:11px; font-weight:700; }
.blog-card-body { padding:25px; }.blog-card-body time { color:#87907f; font-size:11px; letter-spacing:.12em; }
.blog-card-body h3 { min-height:67px; margin:9px 0 10px; color:#3d4438; font:700 22px/1.55 "Noto Serif TC"; }
.blog-card-body p { min-height:82px; color:#757d70; font-size:14px; }
.blog-card-body button { padding:0; border:0; color:#6d984d; background:transparent; font-weight:700; }
.blog-empty { grid-column:1/-1; padding:40px; text-align:center; color:#7c8378; }
.blog-manager { margin-top:20px; scroll-margin-top:20px; }
.panel-head-actions{display:flex;gap:9px}.quiet-action{color:#5f705a!important;background:#eef3ea!important}
.category-manager{margin:0 0 22px;padding:19px;border:1px solid rgba(52,54,47,.1);border-radius:15px;background:#f8faf6}.category-manager[hidden]{display:none}.category-manager-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}.category-manager-head>div{display:grid;gap:3px}.category-manager-head b{color:#465443;font-size:14px}.category-manager-head span{color:#899285;font-size:11px}.category-manager-head>button{width:30px;height:30px;border:0;border-radius:50%;color:#667062;background:#e9eee5;font-size:20px}.category-add-form{display:flex;gap:8px;margin-bottom:12px}.category-add-form input{flex:1;padding:10px 12px;border:1px solid rgba(52,54,47,.13);border-radius:9px;background:#fff}.category-add-form button,.category-row button{padding:8px 11px;border:0;border-radius:8px;color:#fff;background:#6f915e;font-size:11px}.category-list{display:grid;gap:7px}.category-row{display:grid;grid-template-columns:minmax(150px,1fr) 75px auto auto;gap:8px;align-items:center}.category-row input{padding:9px 10px;border:1px solid rgba(52,54,47,.11);border-radius:8px;background:#fff}.category-row span{color:#8c9488;font-size:10px}.category-row .category-delete{color:#9b675e;background:#f2e9e6}.category-row button:disabled{opacity:.45;cursor:not-allowed}
.blog-admin-grid { display:grid; grid-template-columns:350px 1fr; gap:22px; }
.post-list { display:grid; align-content:start; gap:7px; padding-right:5px; max-height:720px; overflow:auto; }
.post-list>button { display:grid; grid-template-columns:58px 1fr auto; gap:11px; align-items:center; width:100%; padding:10px; border:1px solid transparent; border-radius:13px; color:#3f493e; background:transparent; text-align:left; }
.post-list>button:hover,.post-list>button.active { border-color:rgba(105,143,75,.18); background:#f3f7ef; }
.post-list-cover { position:relative; width:58px; height:48px; overflow:hidden; border-radius:9px; background-position:center; background-size:cover; }
.post-list b,.post-list small { display:block; }.post-list b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.post-list small { color:#8a9285; font-size:10px; }
.post-list em { padding:4px 7px; border-radius:999px; font-size:10px; font-style:normal; }.post-list em.published { color:#317056; background:#e1f2e9; }.post-list em.draft { color:#74776f; background:#eaece8; }
.post-editor { padding:24px; border:1px solid rgba(52,54,47,.08); border-radius:17px; background:#fbfcfa; }
.post-editor label { display:grid; gap:7px; margin-bottom:15px; color:#596357; font-size:12px; font-weight:600; }
.post-editor input,.post-editor select,.post-editor textarea { width:100%; padding:11px 12px; border:1px solid rgba(52,54,47,.13); border-radius:10px; color:#354034; background:#fff; font:14px/1.7 "Noto Sans TC"; resize:vertical; }
.post-editor input:focus,.post-editor select:focus,.post-editor textarea:focus { outline:2px solid rgba(112,157,75,.2); border-color:#75a452; }
.editor-status-row { display:flex; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid rgba(52,54,47,.09); color:#465443; font-weight:700; }
.save-state { color:#8b9485; font-size:11px; font-weight:500; }
.editor-toolbar { display:flex; gap:7px; margin:-3px 0 8px; }.editor-toolbar button { padding:7px 10px; border:1px solid rgba(52,54,47,.1); border-radius:7px; color:#667361; background:#fff; font:600 11px "Noto Sans TC"; cursor:pointer; }.editor-toolbar button:hover { border-color:#91b36f; color:#5e8b40; background:#f5f9f1; }
.visual-editor{margin-top:8px;border:1px solid rgba(52,54,47,.13);border-radius:14px;background:#fff;overflow:hidden}.block-editor-head{padding:13px 15px;border-bottom:1px solid rgba(52,54,47,.08);background:#f7f8f5}.block-editor-head>div{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#596357}.block-editor-head b{font-size:12px}.block-editor-head span{color:#949b91;font-size:10px}.visual-editor .editor-toolbar{margin:0;padding:9px 11px;border-bottom:1px solid rgba(52,54,47,.08);background:#fbfcfa}.reading-width-label{display:flex;align-items:center;gap:10px;width:min(704px,calc(100% - 56px));margin:17px auto 0;color:#a0a79d;font-size:10px}.reading-width-label i{flex:1;height:1px;background:#e6e9e3}.rich-editor{width:min(704px,calc(100% - 56px));min-height:360px;margin:0 auto;padding:18px 0 28px;color:#555f51;font:17px/2.05 "Noto Sans TC";outline:0}.rich-editor:empty::before{content:attr(data-placeholder);color:#abb1a8}.rich-editor p{margin:0 0 22px}.rich-editor h2{margin:40px 0 14px;color:#3d493a;font:700 25px/1.55 "Noto Serif TC"}.rich-editor a,.article-dialog-content a{color:#648d50;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.rich-editor blockquote{margin:28px 0;padding:20px 24px;border-left:4px solid #a9c866;color:#52634c;background:#f4f7ee;font:600 18px/1.8 "Noto Serif TC"}.rich-editor figure{position:relative;margin:34px 0}.rich-editor figure img{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:12px}.rich-editor figure iframe,.article-dialog-content figure iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#1e211d}.rich-editor figcaption{margin-top:8px;color:#969d93;font-size:12px;text-align:center}.remove-editor-image,.remove-editor-video{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;color:#fff;background:rgba(46,52,43,.72);font-size:20px;cursor:pointer}.add-widget{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 24px);margin:0 12px 12px;padding:12px;border:1px dashed #aebbaa;border-radius:9px;color:#66805b;background:#f8faf6;font-weight:700;cursor:pointer}.add-widget:hover{border-color:#82a86d;background:#f2f7ee}
.editor-dialog{width:min(500px,calc(100% - 28px));padding:0;border:0;border-radius:18px;color:#465043;background:#fff;box-shadow:0 28px 80px rgba(35,43,32,.28)}.editor-dialog::backdrop{background:rgba(31,38,28,.58);backdrop-filter:blur(4px)}.editor-dialog form{padding:22px}.editor-dialog-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}.editor-dialog-head>div{display:grid;gap:4px}.editor-dialog-head b{font:700 20px "Noto Serif TC"}.editor-dialog-head span{color:#8a9286;font-size:12px}.editor-dialog-head>button{width:32px;height:32px;border:0;border-radius:50%;background:#eef1eb;font-size:20px}.editor-dialog label{display:grid;gap:7px;margin-bottom:14px;color:#5c6759;font-size:12px;font-weight:600}.editor-dialog input[type="text"],.editor-dialog input[type="url"]{padding:11px 12px;border:1px solid rgba(52,54,47,.15);border-radius:9px;font:14px "Noto Sans TC"}.editor-dialog .dialog-check{display:flex;grid-template-columns:auto 1fr;align-items:center}.video-dialog-hint{margin:-5px 0 18px;color:#979e94;font-size:11px}.editor-dialog-actions{display:flex;justify-content:flex-end;gap:9px}.editor-dialog-actions button{padding:10px 16px;border:0;border-radius:9px;font-weight:700}.dialog-cancel{color:#687265;background:#eef1eb}.dialog-confirm{color:#fff;background:#6f915e}
.rich-editor figure iframe[src*="open.spotify.com"],.article-dialog-content figure iframe[src*="open.spotify.com"]{height:232px;aspect-ratio:auto;background:#121212}.rich-editor figure iframe[src*="embed.podcasts.apple.com"],.article-dialog-content figure iframe[src*="embed.podcasts.apple.com"]{height:450px;aspect-ratio:auto;background:#f5f5f7}.remove-editor-podcast{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;color:#fff;background:rgba(46,52,43,.72);font-size:20px;cursor:pointer}
.rich-editor figure iframe[src*="embed.podcasts.apple.com"][src*="?i="],.rich-editor figure iframe[src*="embed.podcasts.apple.com"][src*="&i="],.article-dialog-content figure iframe[src*="embed.podcasts.apple.com"][src*="?i="],.article-dialog-content figure iframe[src*="embed.podcasts.apple.com"][src*="&i="]{height:175px}
.rich-editor figure video,.article-dialog-content figure video{display:block;width:100%;max-height:520px;border-radius:12px;background:#171917}.remove-uploaded-video{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;color:#fff;background:rgba(46,52,43,.72);font-size:20px;cursor:pointer}
.editor-help { margin:-6px 0 18px; color:#91988d; font-size:11px; }
.seo-panel { margin-top:20px; border:1px solid rgba(52,54,47,.1); border-radius:14px; background:#fff; }
.seo-panel summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 18px; color:#4f5c4c; cursor:pointer; list-style:none; }.seo-panel summary::-webkit-details-marker{display:none}.seo-panel summary span{font-size:14px;font-weight:700}.seo-panel summary small{color:#92998f;font-size:11px;font-weight:400}
.seo-fields { padding:18px; border-top:1px solid rgba(52,54,47,.08); }.seo-fields label{position:relative}.field-count{position:absolute;right:4px;top:1px;color:#999f96;font-size:10px;font-weight:400}
.slug-input { display:flex; align-items:center; overflow:hidden; border:1px solid rgba(52,54,47,.13); border-radius:10px; background:#f5f6f3; }.slug-input span{padding-left:12px;color:#90978d;font-size:12px}.post-editor .slug-input input{border:0;background:transparent;outline:0}
.search-preview { display:grid; gap:5px; padding:17px; border:1px solid #e4e7e1; border-radius:12px; background:#fbfcfa; }.search-preview small{color:#888f85}.search-preview b{color:#355e9a;font:500 18px/1.4 "Noto Sans TC"}.search-preview span{color:#4f7c56;font-size:11px}.search-preview p{margin:2px 0 0;color:#6f756c;font-size:12px;line-height:1.65}
.post-editor-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.article-dialog { width:min(820px,calc(100% - 30px)); max-height:90vh; padding:0; overflow:auto; border:0; border-radius:25px; color:#343b31; background:#fff; box-shadow:0 35px 100px rgba(34,44,30,.3); }
.article-dialog::backdrop { background:rgba(32,38,29,.68); backdrop-filter:blur(5px); }
.dialog-close { position:fixed; z-index:3; margin:16px 0 0 760px; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:#34402f; background:rgba(255,255,255,.9); font-size:24px; box-shadow:0 5px 20px rgba(0,0,0,.12); }
.article-dialog-cover { position:relative; height:300px; overflow:hidden; background-position:center; background-size:cover; }
.article-dialog article { padding:48px 58px 60px; }.article-dialog-meta { color:#7aa052; font-size:12px; font-weight:700; letter-spacing:.08em; }
.article-dialog h2 { margin:10px 0 18px; color:#343b31; font:700 clamp(30px,4vw,46px)/1.45 "Noto Serif TC"; }
.article-dialog-lead { padding-bottom:25px; border-bottom:1px solid rgba(52,54,47,.1); color:#697264; font-size:18px; line-height:1.9; }
.article-dialog-content { color:#555f51; font-size:17px; line-height:2.05; }.article-dialog-content p { margin:0 0 22px; }.article-dialog-content h3{margin:40px 0 14px;color:#3d493a;font:700 25px/1.55 "Noto Serif TC"}.article-dialog-content blockquote{margin:28px 0;padding:20px 24px;border-left:4px solid #a9c866;color:#52634c;background:#f4f7ee;font:600 18px/1.8 "Noto Serif TC"}.article-dialog-content ul{padding-left:24px}.article-dialog-content figure{margin:34px 0}.article-dialog-content figure img{display:block;width:100%;border-radius:15px}.article-dialog-content figcaption{margin-top:8px;color:#92998e;font-size:12px;text-align:center}

@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}.blog-admin-grid{grid-template-columns:1fr}.post-list{max-height:320px}.dialog-close{position:absolute;right:16px;margin-top:16px}}
@media(max-width:600px){.blog-section{padding:75px 0}.blog-head{display:block}.blog-head>p{margin-top:14px}.blog-grid{grid-template-columns:1fr}.blog-card-body h3,.blog-card-body p{min-height:0}.blog-admin-grid{gap:14px}.panel-head-actions{display:grid}.category-add-form{display:grid}.category-row{grid-template-columns:1fr auto auto}.category-row span{grid-column:1/-1}.post-editor{padding:17px}.post-editor .form-row{grid-template-columns:1fr}.post-editor-actions{display:grid}.block-editor-head>div{display:grid}.editor-toolbar{overflow:auto}.editor-toolbar button{flex:0 0 auto}.reading-width-label,.rich-editor{width:calc(100% - 34px)}.rich-editor{min-height:300px;padding:16px 0 24px;font-size:16px}.seo-panel summary{display:grid;gap:3px}.article-dialog-cover{height:210px}.article-dialog article{padding:34px 24px 44px}.article-dialog-lead{font-size:16px}.article-dialog-content{font-size:16px}}

/* Instant in-page navigation: avoid delayed-feeling anchor transitions. */
html{scroll-behavior:auto}

/* Life blueprint timing labels */
.stage-grid .stage-phase{display:block;margin-bottom:2px;color:#70835a;font-size:8px;font-weight:700;letter-spacing:.04em}
.stage-grid small{font-size:7px}
.blueprint-timing-note{margin:8px 3px 10px;color:#747e6f;font-size:8px;line-height:1.55;text-align:center}

/* Long-form book articles: preserve clear hierarchy in the reading view. */
.article-dialog-content h2{margin:52px 0 20px;padding-top:24px;border-top:1px solid #dfe5d7;color:#3d493a;font:700 29px/1.6 "Noto Serif TC",serif}.article-dialog-content li{margin-bottom:12px}.article-dialog-content strong{color:#3d493a}.article-dialog-content ol{padding-left:28px}.article-dialog-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
@media(max-width:600px){.article-dialog-content h2{font-size:24px;margin-top:40px}.article-dialog-content h3{font-size:21px}}

.belief-heading .belief-story-subtitle{position:relative;z-index:1;max-width:650px;margin:24px 0 0;font:400 16px/2 "Noto Sans TC",sans-serif;letter-spacing:.035em;color:#626956}.belief-story-subtitle+.belief-symbol{margin-top:30px}@media(max-width:760px){.belief-heading .belief-story-subtitle{font-size:16px;line-height:1.9;margin-top:20px;max-width:100%}}

/* Brand introduction: self exploration to a second profession. */
.about-brand-story{align-items:start;gap:clamp(35px,6vw,85px)}
.about-brand-story h2{font-size:clamp(30px,3.2vw,43px);line-height:1.5;margin-bottom:25px;letter-spacing:-.02em}
.about-brand-story h2 em{font-style:normal;color:#619c40}
.about-brand-story .about-copy>p:not(.section-no){font-size:16px;line-height:1.95;margin-bottom:18px}
.brand-quote{padding:40px 38px;border-radius:28px;position:sticky;top:110px}
.brand-quote>p{font-size:clamp(23px,2.4vw,32px);line-height:1.8;margin:12px 0 25px;font-family:"Noto Serif TC",serif;font-weight:600}
.brand-quote em{font-style:normal;color:#5b913b}
.brand-quote>small{display:block;font:500 12px "Noto Sans TC",sans-serif;letter-spacing:.1em;color:#6b775c}
.about-journey{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding-top:23px;margin-top:24px;border-top:1px solid #8eaf4f44}
.brand-quote .about-journey span{font:500 12px "Noto Sans TC",sans-serif;color:#53633e}
.about-journey i{font-style:normal;font-size:12px;color:#8eaf4f}
.founder-profile{margin-top:30px;padding:25px 0 0;border-top:1px solid #758e5d33}
.founder-label{font-size:11px;letter-spacing:.14em;color:#6e8e50;margin-bottom:10px;font-weight:700}
.founder-profile h3{font-size:23px;margin:0 0 4px}.founder-profile h3 span{font-size:17px;font-weight:500;margin-left:8px;color:#6c756f}
.founder-role{font-size:12px;color:#78816f;margin-bottom:16px}
.founder-profile>p:last-of-type{font-size:14px;line-height:1.9;color:#6c756f;margin-bottom:20px}
.founder-story-link{display:inline-flex;gap:24px;align-items:center;font-size:13px;font-weight:600;color:#4f8538;border-bottom:1px solid #88a567;padding-bottom:6px}
.founder-story-link:hover{color:#2d6422}.founder-story-link:focus-visible{outline:2px solid #81b657;outline-offset:5px}
@media(max-width:900px){.brand-quote{position:relative;top:auto}.about-brand-story{gap:35px}.brand-quote>p{font-size:28px}}
@media(max-width:560px){.brand-quote{padding:30px}.brand-quote>p{font-size:24px}.about-brand-story h2{font-size:29px}.about-brand-story .about-copy>p:not(.section-no){font-size:15px}}

/* Static story vignette: a path toward a new doorway. */
.about-brand-story .story-quote{position:relative;top:auto;transform:none;transition:none;animation:none;align-self:start;padding:28px 30px 26px;border:1px solid #dce4ce;border-radius:180px 180px 24px 24px;background:linear-gradient(160deg,#fbfcf2,#edf2dd);box-shadow:0 16px 45px #5261380a;text-align:left;overflow:hidden}
.story-quote .quote-kicker{margin:12px 0 0;text-align:center;font-size:10px;letter-spacing:.18em;color:#7b8d63}
.quote-landscape{margin:8px -10px 4px}.quote-landscape svg{display:block;width:100%;height:auto;max-height:260px}
.story-quote .quote-story-copy{font-size:clamp(20px,2vw,27px);line-height:1.7;font-weight:600;letter-spacing:-.025em;margin:8px 0 25px}
.story-quote .quote-story-copy em{color:#5b913b}
.quote-story-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:17px;border-top:1px solid #a3b88655}
.story-quote .quote-story-footer span{font:500 11px "Noto Sans TC",sans-serif;color:#778564;letter-spacing:.03em}
.quote-story-footer i{font-size:22px;font-style:normal;color:#81a34c}
@media(max-width:900px){.about-brand-story .story-quote{max-width:470px;width:100%;margin:0 auto}.story-quote .quote-story-copy{font-size:26px}}
@media(max-width:560px){.about-brand-story .story-quote{padding:25px 28px;border-radius:150px 150px 22px 22px}.story-quote .quote-story-copy{font-size:22px}.quote-landscape svg{max-height:230px}}

.story-quote .studio-landscape{margin:14px -12px 8px}
.story-quote .studio-landscape svg{max-height:none;width:100%;height:auto}
@media(max-width:560px){.story-quote .studio-landscape{margin:14px -10px 8px}}

.studio-illustration-brand{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 21px;width:100%}
.studio-illustration-brand img{display:block;width:39%;max-width:150px;height:auto;flex-shrink:0}
.studio-illustration-name{padding-left:12px;border-left:1px solid #73796c40;white-space:nowrap}
.studio-illustration-name b{display:block;font-family:"Noto Serif TC",serif;font-size:clamp(12px,1.15vw,16px);letter-spacing:.04em;line-height:1.35;color:var(--gl-charcoal,#34382f)}
.studio-illustration-name small{display:block;font-family:"Noto Sans TC",sans-serif;font-size:clamp(9px,.85vw,12px);line-height:1.5;letter-spacing:.12em;color:#7b8073}
@media(max-width:900px){.studio-illustration-name b{font-size:16px}.studio-illustration-name small{font-size:11px}}
@media(max-width:560px){.studio-illustration-brand{gap:9px}.studio-illustration-name{padding-left:9px}.studio-illustration-name b{font-size:clamp(11px,3.4vw,16px)}.studio-illustration-name small{font-size:clamp(8px,2.3vw,11px)}}

.site-legal-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:30px;color:#7b826f;font-size:12px}.site-legal-footer p{margin:0}.site-legal-footer nav{display:flex;gap:26px;flex-wrap:wrap}.site-legal-footer a:hover{color:#527e37;text-decoration:underline}.site-legal-footer a:focus-visible{outline:2px solid #81b657;outline-offset:5px}@media(max-width:600px){.site-legal-footer{flex-direction:column;align-items:flex-start;gap:12px}.site-legal-footer nav{gap:20px}}
.blog-all-link{text-align:center;margin-top:35px}.blog-all-link a{display:inline-flex;gap:35px;padding:12px 25px;border:1px solid #a8c17e;border-radius:30px;color:#61883e;font-size:14px}

/* Keep all four cards above the mobile visual clipping edge. */
@media(max-width:600px){.promo-soul-feature .soul-promo-cards{bottom:7%}}

/* Homepage-only mobile journal carousel; desktop and article library stay unchanged. */
.blog-swipe-hint{display:none}
@media(max-width:600px){
 #articles #blogGrid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;padding:2px 2px 18px;scrollbar-width:thin;scrollbar-color:#9bbb73 #eef2e7;align-items:stretch}
 #articles #blogGrid>.blog-card{flex:0 0 88%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;transition:none}
 #articles #blogGrid>.blog-card:hover{transform:none;box-shadow:none}
 #articles #blogGrid .blog-card-body{padding:22px}
 #articles #blogGrid .blog-card-body>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 #articles #blogGrid .blog-empty{flex:1}
 #articles .blog-swipe-hint{display:flex;justify-content:space-between;margin:0 0 14px;font-size:12px;letter-spacing:.05em;color:#7b8c68}
}