/* ========================================
   天朗心理落地页
   三套可切换配色：鼠尾草 / 灰蓝 / 淡紫
   ======================================== */

:root {
  --container: 74rem;
  --radius: 0.85rem;
  --radius-lg: 1rem;
  --radius-xl: 1.15rem;
  --radius-2xl: 1.35rem;
  --header-h: 4.5rem;
  --font: "Microsoft YaHei", "微软雅黑", sans-serif;
}

/* 方案一：暖米白 + 鼠尾草绿 */
html,
html[data-theme="sage"] {
  --paper: #f7f5f0;
  --paper-deep: #eeebe4;
  --cream: #fbf9f6;
  --ink: #33413a;
  --ink-soft: #718078;
  --muted: #8a938d;
  --brand-50: #e6ede8;
  --brand-100: #d7e3db;
  --brand-200: #b7c8bc;
  --brand-500: #789486;
  --brand-600: #5f7f70;
  --brand-700: #4f6f61;
  --brand-800: #3d574c;
  --gold: #5f7f70;
  --gold-deep: #4f6f61;
  --gold-soft: #e6ede8;
  --rose-soft: #f3eee9;
  --rose: #a08b84;
  --white: #fbf9f6;
  --line: #e4e0d8;
  --ok: #5f7f70;
  --sage-soft: #e6ede8;
  --blue-soft: #e6ede8;
  --amber-soft: #f3eee9;
  --red-soft: #f3eee9;
  --green-soft: #e6ede8;
  --purple-soft: #eeebe4;
  --indigo-soft: #e6ede8;
  --btn-fg: #f7f5f0;
  --header-bg: rgba(247, 245, 240, 0.92);
  --sticky-bg: rgba(247, 245, 240, 0.96);
  --hero-glow: rgba(120, 148, 134, 0.14);
  --btn-shadow: 0 8px 20px rgba(95, 127, 112, 0.18);
  --focus-ring: 0 0 0 4px rgba(120, 148, 134, 0.16);
  --shadow-sm: 0 6px 18px rgba(51, 65, 58, 0.04);
  --shadow: 0 12px 32px rgba(51, 65, 58, 0.06);
  --shadow-lg: 0 22px 48px rgba(51, 65, 58, 0.08);
}

/* 方案二：米白 + 灰蓝 */
html[data-theme="slate"] {
  --paper: #f8f7f4;
  --paper-deep: #eeece7;
  --cream: #fcfbf9;
  --ink: #34434f;
  --ink-soft: #71869a;
  --muted: #a8aaa5;
  --brand-50: #e8eef1;
  --brand-100: #d5e0e7;
  --brand-200: #b7c5d0;
  --brand-500: #71869a;
  --brand-600: #5a7186;
  --brand-700: #34434f;
  --brand-800: #2a3640;
  --gold: #5a7186;
  --gold-deep: #34434f;
  --gold-soft: #e8eef1;
  --rose-soft: #f3eeeb;
  --rose: #a08b84;
  --white: #fcfbf9;
  --line: #e4e2dc;
  --ok: #5a7186;
  --sage-soft: #e8eef1;
  --blue-soft: #e8eef1;
  --amber-soft: #f3eeeb;
  --red-soft: #f3eeeb;
  --green-soft: #e8eef1;
  --purple-soft: #eeece7;
  --indigo-soft: #e8eef1;
  --btn-fg: #f8f7f4;
  --header-bg: rgba(248, 247, 244, 0.92);
  --sticky-bg: rgba(248, 247, 244, 0.96);
  --hero-glow: rgba(113, 134, 154, 0.14);
  --btn-shadow: 0 8px 20px rgba(90, 113, 134, 0.18);
  --focus-ring: 0 0 0 4px rgba(113, 134, 154, 0.16);
  --shadow-sm: 0 6px 18px rgba(52, 67, 79, 0.04);
  --shadow: 0 12px 32px rgba(52, 67, 79, 0.06);
  --shadow-lg: 0 22px 48px rgba(52, 67, 79, 0.08);
}

/* 方案三：奶油白 + 淡紫 */
html[data-theme="lilac"] {
  --paper: #fbf8f5;
  --paper-deep: #f0eae4;
  --cream: #fdfbf9;
  --ink: #49434d;
  --ink-soft: #7a7380;
  --muted: #9a948e;
  --brand-50: #eee9f1;
  --brand-100: #e0d8e6;
  --brand-200: #c9bfd3;
  --brand-500: #9b8fa8;
  --brand-600: #7f738c;
  --brand-700: #49434d;
  --brand-800: #3a353e;
  --gold: #7f738c;
  --gold-deep: #49434d;
  --gold-soft: #eee9f1;
  --rose-soft: #e8d8d2;
  --rose: #b89a92;
  --white: #fdfbf9;
  --line: #ece6e0;
  --ok: #7f738c;
  --sage-soft: #eee9f1;
  --blue-soft: #eee9f1;
  --amber-soft: #e8d8d2;
  --red-soft: #e8d8d2;
  --green-soft: #eee9f1;
  --purple-soft: #eee9f1;
  --indigo-soft: #eee9f1;
  --btn-fg: #fbf8f5;
  --header-bg: rgba(251, 248, 245, 0.92);
  --sticky-bg: rgba(251, 248, 245, 0.96);
  --hero-glow: rgba(155, 143, 168, 0.16);
  --btn-shadow: 0 8px 20px rgba(127, 115, 140, 0.18);
  --focus-ring: 0 0 0 4px rgba(155, 143, 168, 0.16);
  --shadow-sm: 0 6px 18px rgba(73, 67, 77, 0.045);
  --shadow: 0 12px 32px rgba(73, 67, 77, 0.06);
  --shadow-lg: 0 22px 48px rgba(73, 67, 77, 0.08);
}

/* 方案：雾霾蓝 + 暖米白 */
html[data-theme="haze"] {
  --paper: #f5f3ee;
  --paper-deep: #ebe8e1;
  --cream: #ffffff;
  --ink: #30383d;
  --ink-soft: #6a7c86;
  --muted: #8a9296;
  --brand-50: #e8f0ee;
  --brand-100: #d5e4e0;
  --brand-200: #c8d8d3;
  --brand-500: #6f8fa6;
  --brand-600: #6f8fa6;
  --brand-700: #405b6b;
  --brand-800: #324853;
  --gold: #6f8fa6;
  --gold-deep: #405b6b;
  --gold-soft: #e8f0ee;
  --rose-soft: #f3eee9;
  --rose: #a08b84;
  --white: #ffffff;
  --line: #e3dfd7;
  --ok: #6f8fa6;
  --sage-soft: #c8d8d3;
  --blue-soft: #e4edf2;
  --amber-soft: #f3eee9;
  --red-soft: #f3eee9;
  --green-soft: #c8d8d3;
  --purple-soft: #ebe8e1;
  --indigo-soft: #e4edf2;
  --btn-fg: #f5f3ee;
  --header-bg: rgba(245, 243, 238, 0.92);
  --sticky-bg: rgba(245, 243, 238, 0.96);
  --hero-glow: rgba(111, 143, 166, 0.16);
  --btn-shadow: 0 8px 20px rgba(64, 91, 107, 0.18);
  --focus-ring: 0 0 0 4px rgba(111, 143, 166, 0.16);
  --shadow-sm: 0 6px 18px rgba(48, 56, 61, 0.04);
  --shadow: 0 12px 32px rgba(48, 56, 61, 0.06);
  --shadow-lg: 0 22px 48px rgba(48, 56, 61, 0.08);
}

/* 方案：鼠尾草绿 + 奶油白 */
html[data-theme="fern"] {
  --paper: #f7f5ef;
  --paper-deep: #ece8de;
  --cream: #fcfbf8;
  --ink: #343b36;
  --ink-soft: #6b776e;
  --muted: #8b938c;
  --brand-50: #dde6de;
  --brand-100: #cfdacd;
  --brand-200: #b4c4b6;
  --brand-500: #829b87;
  --brand-600: #829b87;
  --brand-700: #52685a;
  --brand-800: #3f5046;
  --gold: #d9bfa9;
  --gold-deep: #52685a;
  --gold-soft: #dde6de;
  --rose-soft: #f3eee9;
  --rose: #d9bfa9;
  --white: #fcfbf8;
  --line: #e4e0d6;
  --ok: #829b87;
  --sage-soft: #dde6de;
  --blue-soft: #dde6de;
  --amber-soft: #f3eee9;
  --red-soft: #f3eee9;
  --green-soft: #dde6de;
  --purple-soft: #ece8de;
  --indigo-soft: #dde6de;
  --btn-fg: #f7f5ef;
  --header-bg: rgba(247, 245, 239, 0.92);
  --sticky-bg: rgba(247, 245, 239, 0.96);
  --hero-glow: rgba(130, 155, 135, 0.16);
  --btn-shadow: 0 8px 20px rgba(82, 104, 90, 0.18);
  --focus-ring: 0 0 0 4px rgba(130, 155, 135, 0.16);
  --shadow-sm: 0 6px 18px rgba(52, 59, 54, 0.04);
  --shadow: 0 12px 32px rgba(52, 59, 54, 0.06);
  --shadow-lg: 0 22px 48px rgba(52, 59, 54, 0.08);
}

/* 方案：灰紫 + 暖灰 */
html[data-theme="mauve"] {
  --paper: #f5f2f4;
  --paper-deep: #ebe6ea;
  --cream: #ffffff;
  --ink: #363139;
  --ink-soft: #736c7a;
  --muted: #938c96;
  --brand-50: #d8ceda;
  --brand-100: #cdc2d0;
  --brand-200: #b8aec0;
  --brand-500: #81788f;
  --brand-600: #81788f;
  --brand-700: #554d60;
  --brand-800: #3f3948;
  --gold: #cdae9d;
  --gold-deep: #554d60;
  --gold-soft: #d8ceda;
  --rose-soft: #f3ebe6;
  --rose: #cdae9d;
  --white: #ffffff;
  --line: #e4dde2;
  --ok: #81788f;
  --sage-soft: #d8ceda;
  --blue-soft: #d8ceda;
  --amber-soft: #f3ebe6;
  --red-soft: #f3ebe6;
  --green-soft: #d8ceda;
  --purple-soft: #d8ceda;
  --indigo-soft: #d8ceda;
  --btn-fg: #f5f2f4;
  --header-bg: rgba(245, 242, 244, 0.92);
  --sticky-bg: rgba(245, 242, 244, 0.96);
  --hero-glow: rgba(129, 120, 143, 0.16);
  --btn-shadow: 0 8px 20px rgba(85, 77, 96, 0.18);
  --focus-ring: 0 0 0 4px rgba(129, 120, 143, 0.16);
  --shadow-sm: 0 6px 18px rgba(54, 49, 57, 0.04);
  --shadow: 0 12px 32px rgba(54, 49, 57, 0.06);
  --shadow-lg: 0 22px 48px rgba(54, 49, 57, 0.08);
}

/* 方案：燕麦色 + 棕灰 + 灰绿 */
html[data-theme="oat"] {
  --paper: #f3efe8;
  --paper-deep: #e7e1d6;
  --cream: #fbfaf7;
  --ink: #37332f;
  --ink-soft: #766c61;
  --muted: #938a80;
  --brand-50: #e6ebe6;
  --brand-100: #d5ddd6;
  --brand-200: #9ba99c;
  --brand-500: #9ba99c;
  --brand-600: #766c61;
  --brand-700: #5c544b;
  --brand-800: #3f3a36;
  --gold: #d3b8a5;
  --gold-deep: #5c544b;
  --gold-soft: #f0e6dc;
  --rose-soft: #f3ebe4;
  --rose: #d3b8a5;
  --white: #fbfaf7;
  --line: #e4ddd3;
  --ok: #9ba99c;
  --sage-soft: #e6ebe6;
  --blue-soft: #e6ebe6;
  --amber-soft: #f3ebe4;
  --red-soft: #f3ebe4;
  --green-soft: #e6ebe6;
  --purple-soft: #e7e1d6;
  --indigo-soft: #e6ebe6;
  --btn-fg: #f3efe8;
  --header-bg: rgba(243, 239, 232, 0.92);
  --sticky-bg: rgba(243, 239, 232, 0.96);
  --hero-glow: rgba(118, 108, 97, 0.14);
  --btn-shadow: 0 8px 20px rgba(92, 84, 75, 0.18);
  --focus-ring: 0 0 0 4px rgba(155, 169, 156, 0.2);
  --shadow-sm: 0 6px 18px rgba(55, 51, 47, 0.04);
  --shadow: 0 12px 32px rgba(55, 51, 47, 0.06);
  --shadow-lg: 0 22px 48px rgba(55, 51, 47, 0.08);
}

/* 方案：深蓝绿 + 米白 */
html[data-theme="pine"] {
  --paper: #f5f2ea;
  --paper-deep: #ebe6d9;
  --cream: #ffffff;
  --ink: #293331;
  --ink-soft: #5c6b68;
  --muted: #7d8885;
  --brand-50: #cadbd6;
  --brand-100: #b7cdc6;
  --brand-200: #9bb8b2;
  --brand-500: #315e5b;
  --brand-600: #315e5b;
  --brand-700: #244542;
  --brand-800: #1a322f;
  --gold: #b99a72;
  --gold-deep: #244542;
  --gold-soft: #f0e6d4;
  --rose-soft: #f3eee6;
  --rose: #b99a72;
  --white: #ffffff;
  --line: #e4dfd3;
  --ok: #315e5b;
  --sage-soft: #cadbd6;
  --blue-soft: #cadbd6;
  --amber-soft: #f0e6d4;
  --red-soft: #f3eee6;
  --green-soft: #cadbd6;
  --purple-soft: #ebe6d9;
  --indigo-soft: #cadbd6;
  --btn-fg: #f5f2ea;
  --header-bg: rgba(245, 242, 234, 0.92);
  --sticky-bg: rgba(245, 242, 234, 0.96);
  --hero-glow: rgba(49, 94, 91, 0.14);
  --btn-shadow: 0 8px 20px rgba(36, 69, 66, 0.2);
  --focus-ring: 0 0 0 4px rgba(49, 94, 91, 0.16);
  --shadow-sm: 0 6px 18px rgba(41, 51, 49, 0.04);
  --shadow: 0 12px 32px rgba(41, 51, 49, 0.06);
  --shadow-lg: 0 22px 48px rgba(41, 51, 49, 0.08);
}

/* 方案：加深灰紫 + 暖白（层级更清楚） */
html[data-theme="dusk"] {
  --paper: #faf8f5;
  --paper-deep: #f0ebe4;
  --cream: #fffdfc;
  --ink: #35313a;
  --ink-soft: #6b6573;
  --muted: #8a8490;
  --brand-50: #eee9f1;
  --brand-100: #e3dce8;
  --brand-200: #c4b8cc;
  --brand-500: #a99eb2;
  --brand-600: #71657f;
  --brand-700: #35313a;
  --brand-800: #2a2730;
  --gold: #71657f;
  --gold-deep: #35313a;
  --gold-soft: #eee9f1;
  --rose-soft: #f3ebe6;
  --rose: #c4a99a;
  --white: #fffdfc;
  --line: #e8e2dc;
  --ok: #71657f;
  --sage-soft: #eee9f1;
  --blue-soft: #eee9f1;
  --amber-soft: #f3ebe6;
  --red-soft: #f3ebe6;
  --green-soft: #eee9f1;
  --purple-soft: #eee9f1;
  --indigo-soft: #eee9f1;
  --btn-fg: #fffdfc;
  --header-bg: rgba(250, 248, 245, 0.92);
  --sticky-bg: rgba(250, 248, 245, 0.96);
  --hero-glow: rgba(113, 101, 127, 0.16);
  --btn-shadow: 0 8px 20px rgba(53, 49, 58, 0.16);
  --focus-ring: 0 0 0 4px rgba(113, 101, 127, 0.16);
  --shadow-sm: 0 6px 18px rgba(53, 49, 58, 0.045);
  --shadow: 0 12px 32px rgba(53, 49, 58, 0.06);
  --shadow-lg: 0 22px 48px rgba(53, 49, 58, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 9.2rem;
  font-family: var(--font);
  background: var(--paper);
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation: none;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root) {
  animation: none;
  z-index: 1;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: page-cross-in 0.38s ease both;
  z-index: 2;
  mix-blend-mode: normal;
}

@keyframes page-cross-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.site-header,
.sticky-cta,
.announce-bar,
.hero,
.site-footer {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

body.is-locked {
  overflow: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea, option {
  font-family: var(--font);
}

h1, h2, h3, h4, h5, h6, p, a, span, li, label, td, th, strong, em, small, blockquote {
  font-family: inherit;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[x-cloak] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow { max-width: 46rem; }

.section {
  padding: 5.25rem 0;
}

.section-head {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 3.25rem;
}

.section-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--brand-500);
  margin-bottom: 0.9rem;
}

.section-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.section-desc {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.85;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}

.btn-primary {
  background: var(--brand-600);
  color: var(--btn-fg);
  border-color: var(--brand-600);
  box-shadow: var(--btn-shadow);
}

.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

.btn-sm { font-size: 0.84rem; padding: 0.55rem 1.15rem; min-height: 2.5rem; }

.btn-lg {
  font-size: 0.95rem;
  padding: 0.88rem 1.7rem;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--brand-200);
  padding: 0.85rem 1.45rem;
}

.btn-ghost:hover { background: var(--brand-50); border-color: var(--brand-500); }

.btn-gold {
  background: var(--brand-600);
  color: var(--btn-fg);
  border-color: var(--brand-600);
  padding: 0.88rem 1.7rem;
  box-shadow: var(--btn-shadow);
}

.btn-gold:hover { background: var(--brand-700); color: var(--btn-fg); }

.btn-block {
  width: 100%;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-block:hover { background: var(--brand-600); color: var(--btn-fg); border-color: var(--brand-600); }

.btn-block-primary {
  width: 100%;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  background: var(--brand-600);
  color: var(--btn-fg);
  border: 1px solid var(--brand-600);
}

.btn-block-primary:hover { background: var(--brand-700); }

.btn-submit {
  width: 100%;
  padding: 0.88rem 1rem;
  background: var(--brand-600);
  color: var(--btn-fg);
  border-radius: 999px;
}

.btn-submit:hover { background: var(--brand-700); }

.btn-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.form-error {
  color: #b42318;
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

.form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: var(--brand-50);
  border: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}

.btn-icon:hover { color: var(--ink); background: var(--brand-100); }

.btn-menu {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.header-cta { display: none; }

/* ---------- Announce ---------- */
.announce-bar {
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.82rem;
  padding: 0.75rem 1.2rem;
  text-align: center;
  border-bottom: none;
}

.badge-hot {
  display: inline-block;
  background: var(--cream);
  color: var(--brand-700);
  font-weight: 600;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  margin-right: 0.45rem;
  border: none;
}

/* ---------- Header ---------- */
.site-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header {
  background: transparent;
  border-bottom: none;
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.brand-mark {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--btn-fg);
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
}

.brand-sub { font-size: 0.74rem; color: var(--muted); }

.nav {
  display: none;
  gap: 1.2rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.nav a:hover { color: var(--brand-600); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(61, 52, 44, 0.22);
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(20rem, 86vw);
  height: 100%;
  background: var(--cream);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: var(--shadow-lg);
}

.mobile-nav-panel a {
  padding: 0.9rem 0.4rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 4.25rem 0 4.75rem;
  overflow: hidden;
  background:
    radial-gradient(720px 380px at 12% 0%, var(--hero-glow), transparent 62%),
    var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.8rem;
  align-items: center;
}

.hero-copy { display: flex; flex-direction: column; gap: 1.55rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  border: none;
  box-shadow: none;
}

.hero-title {
  font-size: 2.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.hero-title .hl {
  color: var(--brand-600);
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 0;
}

.hero-lead {
  font-size: 1.04rem;
  color: var(--ink-soft);
  max-width: 38rem;
  line-height: 1.9;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  padding-top: 0.15rem;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

.trust-item i { color: var(--brand-500); }

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-card {
  background: var(--cream);
  padding: 2rem 1.8rem 1.85rem;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  position: relative;
}

.hero-card-badge {
  position: absolute;
  top: -0.7rem;
  right: 1.2rem;
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: none;
}

.hero-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-card-title i { color: var(--brand-500); }

.check-list { display: flex; flex-direction: column; gap: 0.65rem; }

.check-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.9rem;
  background: var(--brand-50);
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink-soft);
  text-align: left;
  width: 100%;
  line-height: 1.55;
}

.check-item.is-on {
  background: var(--cream);
  border-color: var(--brand-200);
  color: var(--ink);
}

.check-kicker {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.check-item.is-on .check-kicker { color: var(--brand-700); }

.check-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.check-result {
  margin-top: 1.05rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.7;
  background: var(--brand-50);
  color: var(--brand-800);
  border-top: none;
}

.check-result.is-ok { background: var(--brand-50); color: var(--ink-soft); }

.check-meta {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.check-result-box {
  margin-top: 1rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--brand-50);
}

.check-result-box p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.check-result-box strong {
  display: block;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.check-note {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.55;
}

.check-result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.check-result-box .btn { margin-top: 0; width: 100%; }

.hero-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.hero-focus span {
  color: var(--ink-soft);
  font-weight: 600;
  margin-right: 0.15rem;
}

.hero-focus a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.08rem;
}

.hero-focus a:hover {
  color: var(--brand-600);
  border-bottom-color: var(--brand-500);
}

#status-check,
#pain-effort,
#pain-exam,
#pain-avoid,
#pain-family,
#grade-g1,
#grade-g2,
#grade-g3 {
  scroll-margin-top: 9.2rem;
}

/* ---------- Grade tabs ---------- */
.grade-tabs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.grade-tab {
  border: 1px solid transparent;
  background: var(--cream);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.grade-tab.is-on {
  background: var(--brand-600);
  color: var(--btn-fg);
  border-color: var(--brand-600);
  font-weight: 500;
}

.grade-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: 2rem 1.7rem;
}

.grade-panel h3 {
  font-size: 1.18rem;
  margin-bottom: 0.6rem;
}

.grade-panel > p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin-bottom: 1.3rem;
}

.grade-points {
  display: grid;
  gap: 0.85rem;
}

.grade-points li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.grade-points i {
  color: var(--brand-500);
  margin-top: 0.28rem;
}

/* ---------- Pain ---------- */
.pain { background: var(--cream); }

.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

.pain-card {
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.5rem 1.45rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.pain-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38%;
  pointer-events: none;
}

.pain-card.is-effort::before {
  background: linear-gradient(180deg, var(--brand-50) 0%, transparent 100%);
}

.pain-card.is-exam::before {
  background: linear-gradient(180deg, var(--rose-soft) 0%, transparent 100%);
}

.pain-card.is-avoid::before {
  background: linear-gradient(180deg, var(--paper-deep) 0%, transparent 100%);
}

.pain-card.is-family::before {
  background: linear-gradient(180deg, var(--purple-soft) 0%, transparent 100%);
}

.pain-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.pain-mark {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.02rem;
  font-weight: 700;
  background: var(--cream);
  color: var(--brand-700);
  border: 1px solid var(--line);
}

.pain-no {
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 0;
}

.pain-quote {
  position: relative;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.pain-signs {
  position: relative;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.85;
  margin-bottom: 0.2rem;
}

.pain-card .sign-note {
  position: relative;
  margin-top: auto;
  padding-top: 0.95rem;
}

.pain-loop {
  margin-top: 2.5rem;
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.pain-loop-chain {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.85;
}

.pain-loop-note {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.pain-cta {
  margin-top: 1.7rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.pain-cta a {
  color: var(--brand-700);
  font-weight: 600;
  border-bottom: 1px solid var(--brand-200);
}

.pain-cta a:hover { color: var(--brand-800); }

.pain-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  background: var(--brand-50);
  border: none;
  color: var(--brand-700);
}

.pain-icon.is-blue,
.pain-icon.is-amber,
.pain-icon.is-red,
.pain-icon.is-emerald,
.pain-icon.is-purple,
.pain-icon.is-indigo {
  background: var(--brand-50);
  color: var(--brand-700);
}

.pain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.95rem;
}

.pain-tags li {
  font-size: 0.74rem;
  color: var(--brand-800);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
}

.sign-list {
  margin: 0.85rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.sign-list li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 0.9rem;
  position: relative;
  line-height: 1.55;
}

.sign-list li::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--brand-500);
  position: absolute;
  left: 0;
  top: 0.55em;
}

.sign-note {
  margin-top: 1rem;
  font-size: 0.86rem;
  color: var(--brand-800);
  line-height: 1.65;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------- Page narrative path ---------- */
body[data-page="study"] {
  --page-accent: var(--brand-600);
  --page-accent-soft: var(--brand-50);
  --page-accent-ink: var(--brand-800);
}

body[data-page="teen"] {
  --page-accent: #b56a45;
  --page-accent-soft: #f3e8df;
  --page-accent-ink: #6e3f2a;
}

body[data-page="refuse"] {
  --page-accent: #6a8499;
  --page-accent-soft: #e7eef3;
  --page-accent-ink: #3e5363;
}

body[data-page="child"] {
  --page-accent: #9a8a4a;
  --page-accent-soft: #f3ecd4;
  --page-accent-ink: #5c5328;
}

body[data-page="love"] {
  --page-accent: #8a6574;
  --page-accent-soft: #f3e7eb;
  --page-accent-ink: #5a3d48;
}

.story {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body[data-page] .section-kicker {
  color: var(--page-accent);
}

.story-path {
  list-style: none;
  max-width: 26rem;
  margin: 0 auto;
}

.story-path li {
  position: relative;
  text-align: center;
  padding: 0.95rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

.story-path li + li { margin-top: 1.35rem; }

.story-path li + li::before {
  content: "↓";
  position: absolute;
  left: 50%;
  top: -1.18rem;
  transform: translateX(-50%);
  color: var(--page-accent, var(--brand-500));
  font-size: 0.9rem;
  font-weight: 400;
}

.story-path li.is-turn {
  background: var(--page-accent-soft, var(--brand-50));
  color: var(--page-accent-ink, var(--brand-800));
  border-color: transparent;
}

.story-path li.is-end {
  background: var(--page-accent, var(--brand-600));
  color: var(--btn-fg);
  border-color: transparent;
}

.story-read {
  max-width: 38rem;
  margin: 1.9rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.story-read strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

body[data-page] .chip {
  background: var(--page-accent-soft);
  color: var(--page-accent-ink);
}

body[data-page] .chip i {
  color: var(--page-accent);
}

.see-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
}

.see-col {
  padding: 1.35rem 1.4rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.see-col h3 {
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
  color: var(--page-accent-ink, var(--brand-800));
}

.see-col ul {
  list-style: none;
}

.see-col li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.see-col li:last-child { border-bottom: 0; }

.see-col.is-inner {
  background: var(--page-accent-soft, var(--brand-50));
  border-color: transparent;
}

.see-col.is-inner li {
  color: var(--page-accent-ink, var(--brand-800));
  border-color: rgba(0,0,0,.06);
}

.conflict-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
}

.conflict-item {
  padding: 1.15rem 1.2rem;
  background: var(--cream);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
}

.conflict-item h3 {
  font-size: 0.98rem;
  margin-bottom: 0.4rem;
}

.conflict-item p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- Grades timeline ---------- */
.grades { background: var(--cream); }

.grade-axis {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  list-style: none;
  margin: 0 0 2.2rem;
  position: relative;
  padding-left: 0.35rem;
}

.grade-axis::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 1px;
  background: var(--brand-200);
}

.grade-axis li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: center;
}

.grade-axis-no {
  grid-row: 1 / span 2;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade-axis strong {
  font-size: 1.02rem;
  color: var(--ink);
}

.grade-axis em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.grade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

.grade-stage {
  padding-top: 0.2rem;
}

.grade-quote {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.grade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.grade-chips li {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--brand-800);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
}

.grade-copy {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

.grade-more {
  margin-top: 0.95rem;
}

.grade-more summary {
  cursor: pointer;
  width: fit-content;
  color: var(--brand-700);
  font-weight: 600;
  font-size: 0.88rem;
  list-style: none;
}

.grade-more summary::-webkit-details-marker { display: none; }

.grade-more summary::after {
  content: " →";
}

.grade-more[open] summary::after {
  content: "";
}

.grade-more p {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.grade-foot {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .grade-axis {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 46rem;
    margin: 0 auto 2.6rem;
    padding-left: 0;
    gap: 0;
  }

  .grade-axis::before {
    left: 10%;
    right: 10%;
    top: 1.15rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .grade-axis li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    flex: 1;
  }

  .grade-axis-no { grid-row: auto; }
}

/* ---------- Compare ---------- */
.compare { background: var(--cream); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.compare-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.7rem 1.55rem;
}

.compare-card.is-focus {
  border-color: transparent;
  background: var(--brand-50);
}

.compare-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}

.compare-tag {
  font-size: 0.76rem;
  color: var(--brand-600);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.compare-card ul { display: flex; flex-direction: column; gap: 0.55rem; }
.compare-card li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-left: 0.95rem;
  position: relative;
}

.compare-card li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  position: absolute;
  left: 0;
  top: 0.55rem;
}

.safe-note {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--rose-soft);
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-lg);
  line-height: 1.75;
}

/* ---------- Methods ---------- */
.methods { background: var(--cream); }

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.method-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.65rem 1.5rem;
}

.method-card h3 {
  font-size: 1.05rem;
  margin: 0.7rem 0 0.4rem;
}

.method-card p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.8; }

.method-card i {
  color: var(--brand-500);
  font-size: 1.3rem;
}

/* ---------- Process ---------- */
.process { background: var(--paper); }

.process-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.process-card {
  background: var(--paper);
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}

.process-index {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  border: none;
}

.process-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.process-card p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.75; }
.process-stage { font-size: 0.78rem; color: var(--brand-600); font-weight: 600; margin-bottom: 0.2rem; }

.process-note {
  margin-top: 1.4rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.process-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.process-flow .process-card {
  display: block;
  background: var(--cream);
}

/* ---------- Cause loops ---------- */
.causes { background: var(--paper); }

.cause-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.cause-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.cause-no {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.1rem;
}

.cause-loop {
  display: flex;
  flex-direction: column;
}

.cause-loop li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  padding: 0.58rem 0.75rem;
  background: var(--brand-50);
  border-radius: 0.7rem;
}

.cause-loop li span {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-700);
  letter-spacing: 0.04em;
  padding-top: 0.12rem;
}

.cause-loop li + li {
  margin-top: 1.15rem;
}

.cause-loop li + li::before {
  content: "↓";
  position: absolute;
  left: 50%;
  top: -1.05rem;
  transform: translateX(-50%);
  color: var(--brand-500);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1;
}

.cause-loop li.is-back {
  background: var(--brand-600);
  color: var(--btn-fg);
  font-weight: 700;
  justify-content: space-between;
}

.cause-loop li.is-back::before {
  content: "↘";
}

.cause-loop li.is-back i {
  font-style: normal;
  font-weight: 400;
  opacity: 0.92;
}

.cause-note {
  margin-top: auto;
  padding-top: 1.05rem;
  font-size: 0.84rem;
  color: var(--brand-800);
  line-height: 1.65;
}

.cause-summary {
  margin-top: 2rem;
  padding: 1.45rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--brand-50);
  text-align: center;
}

.cause-summary p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.cause-summary strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

/* ---------- Team ---------- */
.team { background: var(--cream); }

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.team-card {
  background: var(--paper);
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.45rem;
  border: 1px solid var(--line);
}

.team-card.is-lead {
  background: var(--cream);
}

.team-avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--btn-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.team-card h3 { font-size: 1.08rem; }
.team-role { font-size: 0.8rem; color: var(--brand-600); margin: 0.2rem 0 0.7rem; }
.team-card p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; }

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.team-tags li {
  font-size: 0.74rem;
  background: var(--brand-50);
  color: var(--brand-800);
  border-radius: 999px;
  padding: 0.16rem 0.58rem;
}

.expert {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--paper);
  border-radius: var(--radius-2xl);
  padding: 1.7rem 1.5rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--line);
}

.expert-photo {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--btn-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
}

.expert h3 { font-size: 1.45rem; }
.expert-role { color: var(--brand-600); font-size: 0.86rem; margin: 0.25rem 0 0.8rem; }
.expert p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.8; }

.team-sub {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--ink);
}

/* ---------- Ways / Parent ---------- */
.ways { background: var(--cream); }
.ways .method-card { background: var(--paper); border: none; }
.parent { background: var(--paper); }

.parent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  align-items: center;
}

.parent-visual {
  background: var(--brand-50);
  border-radius: var(--radius-2xl);
  padding: 2rem 1.6rem;
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.parent-visual p {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
}

.parent-visual span {
  display: block;
  margin-top: 1rem;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.parent-copy .section-title {
  text-align: left;
  margin: 0.4rem 0 1rem;
}

.parent-copy ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.parent-copy li {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.65;
  padding-left: 1rem;
  position: relative;
}

.parent-copy li::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--brand-600);
  position: absolute;
  left: 0;
  top: 0.55em;
}

.parent-foot {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: var(--brand-800);
  line-height: 1.7;
}

.way-fit {
  font-size: 0.78rem;
  color: var(--brand-600);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

/* ---------- Tiers / 收费 ---------- */
.tiers { background: var(--cream); }

.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.tier-card {
  background: var(--paper);
  border-radius: var(--radius-xl);
  padding: 1.7rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 1px solid var(--line);
  min-height: 100%;
}

.tier-card.is-focus {
  background: var(--brand-50);
  border-color: transparent;
}

.tier-card h3 { font-size: 1.12rem; }
.tier-fit { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; flex: 1; }
.tier-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.tier-price span { font-size: 0.82rem; font-weight: 500; color: var(--muted); }

.tier-cta {
  text-align: center;
  margin-top: 1.2rem;
}

/* ---------- Projects ---------- */
.projects { background: var(--paper); }

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}

.project-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line);
  padding: 1.75rem 1.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cream);
  min-height: 100%;
}

.project-card.is-featured {
  border: 1px solid var(--brand-200);
  box-shadow: var(--shadow);
  position: relative;
  background: var(--brand-50);
}

.project-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  width: max-content;
  margin-bottom: 0.7rem;
  border: none;
  background: var(--cream);
  color: var(--brand-700);
}

.tag-slate,
.tag-brand,
.tag-amber,
.tag-purple {
  background: var(--cream);
  color: var(--brand-700);
}

.project-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.45rem;
}

.project-fit { font-size: 0.84rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.65; }

.project-price {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--brand-700);
  margin-bottom: 1rem;
}

.project-price span { font-size: 0.78rem; font-weight: 400; color: var(--muted); }

.feature-list {
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.35rem;
  border-top: 1px solid var(--line);
  padding-top: 1.05rem;
}

.feature-list li { display: flex; gap: 0.5rem; }
.feature-list i { color: var(--ok); margin-top: 0.2rem; }

.popular-badge {
  position: absolute;
  top: -0.7rem;
  right: 1.1rem;
  background: var(--brand-600);
  color: var(--btn-fg);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: none;
}

.price-note {
  margin-top: 1.75rem;
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

/* ---------- FAQ ---------- */
.faq { background: var(--cream); }

.faq-list { display: flex; flex-direction: column; gap: 0.9rem; }

.faq-item {
  background: var(--paper);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  padding: 1.2rem 1.3rem;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1.55;
}

.faq-q:hover { background: rgba(255, 255, 255, 0.7); }

.faq-q-text { display: flex; align-items: flex-start; gap: 0.7rem; }

.faq-no {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  border: none;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.faq-q i { color: var(--muted); flex-shrink: 0; }
.faq-q i.is-open { color: var(--brand-500); }

.faq-a {
  padding: 0 1.3rem 1.3rem 3.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* ---------- About ---------- */
.about { background: var(--paper); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

.founder-card {
  background: var(--cream);
  padding: 2.1rem 1.8rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line);
  height: 100%;
}

.founder-avatar {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--btn-fg);
  border: none;
  font-weight: 600;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.founder-name { font-size: 1.4rem; font-weight: 700; text-align: center; }
.founder-role {
  font-size: 0.82rem;
  color: var(--brand-700);
  font-weight: 600;
  text-align: center;
  margin: 0.3rem 0 1.15rem;
}

.founder-meta { display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.9rem; color: var(--ink-soft); }
.founder-meta p { display: flex; gap: 0.55rem; }
.founder-meta i { color: var(--brand-500); margin-top: 0.28rem; }

.founder-note {
  margin-top: 1.25rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.75;
}

.about-copy { display: flex; flex-direction: column; gap: 1.4rem; }
.about-copy h2 { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }
.about-year { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.about-lead { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.9; }

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.about-stat {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
}

.about-stat strong {
  display: block;
  font-size: 1.15rem;
  color: var(--brand-700);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.about-stat span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.facility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
}

.facility-card {
  padding: 1.15rem 1.2rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.facility-card h4 { font-size: 0.94rem; margin-bottom: 0.3rem; }
.facility-card h4 i { color: var(--brand-500); margin-right: 0.4rem; }
.facility-card p { font-size: 0.84rem; color: var(--muted); line-height: 1.7; }

/* ---------- More services ---------- */
.more { background: var(--paper); }

.more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.more-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.35rem;
  display: block;
  box-shadow: var(--shadow-sm);
}

a.more-card:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.more-card h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.more-card p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; }

.more-card .go {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-600);
}

/* ---------- Topic switcher / footer / myths ---------- */
.topic-bar {
  border-top: 1px solid var(--line);
}

.topic-bar-label {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding-right: 1rem;
  margin-right: 0.35rem;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  line-height: 1;
}

.topic-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.5rem;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line);
  margin: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.topic-link:hover {
  color: var(--brand-700);
  border-color: var(--brand-200);
}

.topic-link.is-on {
  background: var(--brand-600);
  color: var(--btn-fg);
  font-weight: 500;
  border-color: var(--brand-600);
  box-shadow: var(--btn-shadow);
}

.topic-link-more {
  background: transparent;
  border-style: dashed;
  color: var(--brand-700);
}

.topic-link-more.is-on {
  border-style: solid;
}

.topic-link.is-on:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--btn-fg);
}

.topic-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.topic-bar-inner::-webkit-scrollbar { display: none; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.25rem;
  margin-bottom: 1rem;
}

.footer-links a { color: var(--brand-700); }
.footer-links a:hover { color: var(--brand-600); }

.mobile-nav-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 0.95rem 0 0.3rem;
}

.myth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.myth-card {
  border-radius: var(--radius-xl);
  padding: 1.55rem 1.45rem;
  background: var(--cream);
  border: 1px solid var(--line);
}

.myth-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.myth-card li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0.32rem 0;
  line-height: 1.7;
}

.myth-card.is-no,
.myth-card.is-yes { background: var(--cream); }

/* ---------- CTA / Footer ---------- */
.cta {
  background: var(--brand-600);
  padding: 5.2rem 0;
  color: var(--btn-fg);
  text-align: center;
  border-top: none;
}

.cta h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.8rem; line-height: 1.45; color: var(--btn-fg); }
.cta p { color: var(--btn-fg); opacity: 0.82; font-size: 1rem; margin-bottom: 1.7rem; }
.cta .btn-gold {
  background: var(--cream);
  color: var(--brand-700);
  border-color: var(--cream);
}
.cta .btn-gold:hover { background: var(--paper); color: var(--brand-800); }

.site-footer {
  background: var(--paper);
  color: var(--muted);
  padding: 2.4rem 0 5.8rem;
  font-size: 0.8rem;
  border-top: 1px solid var(--line);
}

.footer-inner { text-align: center; }
.footer-inner p + p { margin-top: 0.6rem; }
.footer-disclaimer { color: var(--muted); line-height: 1.7; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: rgba(61, 52, 44, 0.26);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}

.modal {
  background: var(--cream);
  border-radius: var(--radius-2xl);
  max-width: 28.5rem;
  width: 100%;
  padding: 1.85rem 1.6rem;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.modal-head { text-align: center; margin-bottom: 1.35rem; }
.modal-head h3 { font-size: 1.2rem; font-weight: 700; }
.modal-head p { font-size: 0.84rem; color: var(--muted); margin-top: 0.4rem; line-height: 1.7; }

.form { display: flex; flex-direction: column; gap: 0.95rem; }
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.form-control {
  width: 100%;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.form-control:focus {
  border-color: var(--brand-500);
  background: var(--cream);
  box-shadow: var(--focus-ring);
}

.form-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.65;
}

.form-check input { margin-top: 0.18rem; accent-color: var(--brand-500); }

.form-success {
  text-align: center;
  padding: 1.6rem 0.5rem;
}

.form-success i { font-size: 2.1rem; color: var(--ok); margin-bottom: 0.75rem; }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0.85rem;
  right: 0.85rem;
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 35;
  background: var(--sticky-bg);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  box-shadow: var(--shadow);
}

.sticky-cta p {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.sticky-cta strong { color: var(--ink); display: block; }

@media (min-width: 640px) {
  .hero-title { font-size: 2.45rem; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .trust-item { font-size: 0.9rem; }
  .facility-grid { grid-template-columns: 1fr 1fr; }
  .grade-points { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .announce-bar { font-size: 0.88rem; padding: 0.8rem 1.5rem; }
  .header-cta, .nav { display: flex; }
  .btn-menu { display: none; }
  .hero { padding: 6.2rem 0 6.6rem; }
  .hero-title { font-size: 3rem; }
  .section { padding: 6.4rem 0; }
  .section-title { font-size: 2rem; }
  .pain-grid, .method-grid, .process-list, .myth-grid, .cause-grid, .tier-grid, .team-grid, .process-flow, .conflict-row, .see-split { grid-template-columns: 1fr 1fr; }
  .project-grid, .compare-grid, .more-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { padding: 2.8rem 0; }
  .sticky-cta { display: none; }
  .cta { padding: 6rem 0; }
  .cta h2 { font-size: 1.9rem; }
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.12fr 0.88fr; gap: 3.4rem; }
  .conflict-row, .see-split { grid-template-columns: 1fr 1fr; }
  .method-grid { grid-template-columns: repeat(4, 1fr); }
  .process-list { grid-template-columns: repeat(4, 1fr); }
  .process-flow { grid-template-columns: repeat(4, 1fr); }
  .cause-grid { grid-template-columns: repeat(3, 1fr); }
  .grade-grid { grid-template-columns: repeat(3, 1fr); }
  .expert { grid-template-columns: auto 1fr; align-items: center; padding: 2.1rem 2rem; }
  .parent-grid { grid-template-columns: 0.9fr 1.1fr; gap: 2.4rem; }
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .about-stats { grid-template-columns: repeat(4, 1fr); }
  .project-grid { grid-template-columns: repeat(4, 1fr); }
  .compare-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; }
  .founder-avatar { margin-left: 0; }
  .founder-name, .founder-role { text-align: left; }
  .more-grid { grid-template-columns: repeat(4, 1fr); }
  .container { padding: 0 2rem; }
}

/* ---------- 配色切换 ---------- */
.theme-dock {
  position: fixed;
  right: 0.85rem;
  bottom: calc(5.6rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.theme-dock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.48rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.theme-dock-toggle:hover {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.theme-dock-panel {
  display: none;
  flex-direction: column;
  gap: 0.28rem;
  width: 11.2rem;
  max-height: min(26rem, calc(100vh - 9rem));
  overflow-y: auto;
  padding: 0.7rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.theme-dock.is-open .theme-dock-panel {
  display: flex;
}

.theme-dock-title,
.theme-dock-group {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0 0.15rem 0.15rem;
}

.theme-dock-group {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
}

.theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 0.7rem;
  padding: 0.42rem 0.5rem;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.theme-swatch:hover {
  background: var(--brand-50);
}

.theme-swatch.is-on {
  background: var(--brand-50);
  border-color: var(--brand-200);
  font-weight: 600;
}

.theme-dot {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(51, 65, 58, 0.12);
}

.theme-dot-sage { background: #5f7f70; }
.theme-dot-slate { background: #5a7186; }
.theme-dot-lilac { background: #9b8fa8; }
.theme-dot-haze { background: #6f8fa6; }
.theme-dot-fern { background: #829b87; }
.theme-dot-mauve { background: #81788f; }
.theme-dot-oat { background: #766c61; }
.theme-dot-pine { background: #315e5b; }
.theme-dot-dusk { background: #71657f; }

@media (min-width: 768px) {
  .theme-dock {
    bottom: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  body,
  .site-header,
  .sticky-cta,
  .announce-bar,
  .hero,
  .site-footer,
  .topic-link,
  .grade-tab {
    transition: none;
  }
}

/* ---------- Articles ---------- */
.article-hero {
  padding: 3.25rem 0 2.5rem;
  background:
    radial-gradient(680px 320px at 14% 0%, var(--hero-glow), transparent 62%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}

.crumb {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--brand-600); }
.crumb span { margin: 0 0.4rem; }

.article-title {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.45;
  max-width: 42rem;
}

.article-meta {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.article-body {
  max-width: 44rem;
  padding: 3rem 0 4rem;
}

.article-lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.95;
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.article-body h2 {
  font-size: 1.28rem;
  font-weight: 700;
  margin: 2.6rem 0 1rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--page-accent, var(--brand-600));
  line-height: 1.5;
}

.article-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.9rem 0 0.7rem;
}

.article-body p {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.95;
}

.article-body strong { color: var(--ink); }

.article-body ul {
  margin: 0 0 1.4rem;
  list-style: none;
}

.article-body ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.85;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--page-accent, var(--brand-500));
}

.article-note {
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--page-accent, var(--brand-600));
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  margin: 1.9rem 0;
}

.article-note p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
}

.article-cta {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.6rem;
  margin: 2.5rem 0 0;
  text-align: center;
}

.article-cta h2 {
  border: none;
  padding: 0;
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.article-cta p {
  margin-bottom: 1.2rem;
  font-size: 0.92rem;
}

.article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.45rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

a.article-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}

.article-card-tag {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--page-accent, var(--brand-500));
  margin-bottom: 0.7rem;
}

.article-card h2,
.article-card h3 {
  font-size: 1.06rem;
  line-height: 1.55;
  margin-bottom: 0.55rem;
  color: var(--ink);
}

.article-card p {
  font-size: 0.89rem;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}

.article-card .go {
  display: inline-block;
  margin-top: 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-600);
}

@media (min-width: 768px) {
  .article-list { grid-template-columns: 1fr 1fr; }
  .article-title { font-size: 2.15rem; }
  .article-hero { padding: 4rem 0 3rem; }
}