/* ============================================================
   日日日文 — wabi-sabi system
   warm washi · ink · one vermilion · pine for "free"
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ─────────────────────────────────────────────
     顏色一律別名到 tokens.css（單一真相來源）。
     本檔只保留 site.css 元件用的「本地名稱」，值來自 tokens.css。
     線上頁面務必在本檔之前先 link css/tokens.css。
     ───────────────────────────────────────────── */
  /* paper */
  --paper:   var(--paper-50);
  --paper-2: var(--paper-100);
  --paper-3: var(--paper-200);
  --paper-edge: #ddd0b8;            /* 紙緣描邊，site.css 本地用，tokens 無對應 */

  /* ink */
  --ink:   var(--ink-900);
  --ink-2: var(--ink-700);
  --ink-3: var(--ink-500);          /* 次級文字；tokens 的 ink-500 已達 AA ≥4.5 on paper */
  --ink-line:      rgba(26, 20, 16, 0.14);   /* 預設描邊，沿用原權重、改用新墨色 */
  --ink-line-soft: rgba(26, 20, 16, 0.08);

  /* accents */
  --vermilion:     var(--vermilion-600);
  --vermilion-ink: #87331f;         /* 朱紅當文字用的 AA 變體，tokens 無對應，保留本地 */
  --vermilion-deep:#7c2e1d;         /* hover 加深（landing 既有行為），保留本地 */
  --pine:     var(--pine-600);
  --pine-ink: #3f5040;

  /* type */
  --serif: "Noto Serif TC", "Noto Serif JP", serif;
  --serif-jp: "Noto Serif JP", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;

  /* rhythm */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vh, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(115% 80% at 88% -8%, var(--paper-2) 0%, rgba(241,232,214,0) 46%),
    radial-gradient(95% 70% at -6% 102%, var(--paper-3) 0%, rgba(233,221,199,0) 50%);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- helpers ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; position: relative; z-index: 1; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* focus — visible, vermilion, generous */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2.5px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 2px;
}

/* eyebrow / kicker */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: none;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
}
.eyebrow::before {
  content: "";
  width: 1.7rem; height: 1px;
  background: var(--vermilion);
  display: inline-block;
}
.eyebrow .idx { color: var(--vermilion-ink); font-variant-numeric: tabular-nums; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.site-nav[data-scrolled="true"] {
  border-bottom-color: var(--ink-line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.brand img { height: clamp(58px, 7vw, 92px); width: auto; }
.nav-right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.nav-link {
  font-size: 0.94rem; font-weight: 500; color: var(--ink-2);
  position: relative; padding: 0.4rem 0; transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.1rem;
  height: 1px; background: var(--vermilion); transition: right 0.3s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }

/* buttons */
.btn {
  --btn-bg: var(--vermilion);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  white-space: nowrap;
  min-height: 48px;
  padding: 0.85em 1.7em;
  font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.04em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover { background: var(--vermilion-deep); border-color: var(--vermilion-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(124,46,29,0.8); }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 42px; padding: 0.6em 1.3em; font-size: 0.92rem; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--ink-line);
}
.btn--ghost:hover { background: var(--paper-2); border-color: var(--ink-3); box-shadow: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.hero-copy { position: relative; z-index: 2; max-width: none; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-2);
  padding: 0.4em 0.9em 0.4em 0.55em;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  margin-bottom: 1.8rem;
  white-space: nowrap;
}
.hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); flex: none; }

.hero h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.5rem, 4.6vw, 3.95rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.hero h1 .accent { position: relative; color: var(--ink); white-space: nowrap; }
/* vermilion brush underline under the accent words */
.hero h1 .accent::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.08em;
  height: 0.42em;
  background: var(--vermilion);
  opacity: 0.9;
  z-index: -1;
  border-radius: 40% 60% 55% 45% / 60% 50% 55% 45%;
  transform: rotate(-1.2deg) scaleX(var(--brush, 1));
  transform-origin: left center;
}
.hero h1 .accent:last-of-type::after { transform: rotate(-0.6deg); border-radius: 55% 45% 50% 50% / 55% 50% 50% 45%; }
.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 2.3rem;
  max-width: 34ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-meta {
  margin-top: 2.4rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  font-size: 0.86rem; color: var(--ink-3);
}
.hero-meta .sep { width: 1px; height: 1em; background: var(--ink-line); }
.hero-meta b { color: var(--ink-2); font-weight: 700; }

/* enso stage */
.hero-stage {
  position: relative;
  align-self: stretch;
  min-height: clamp(360px, 48vw, 600px);
  display: grid; place-items: center;
}
/* full scene — washi ground matches --paper, so the frame dissolves into the page */
.hero-photo {
  width: min(124%, 740px);
  height: auto;
  margin-right: -6%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
          mask-composite: intersect;
  animation: heroPhotoIn 1.5s var(--ease) both;
}
@keyframes heroPhotoIn {
  from { transform: scale(0.965) translateY(10px); }
  to   { transform: none; }
}
.enso-wrap {
  position: relative;
  width: clamp(280px, 38vw, 500px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.enso-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
/* brush-draw reveal via conic mask */
.enso-img.is-draw {
  -webkit-mask-image: conic-gradient(from -18deg, #000 0deg, #000 var(--sweep, 360deg), transparent var(--sweep, 360deg));
  mask-image: conic-gradient(from -18deg, #000 0deg, #000 var(--sweep, 360deg), transparent var(--sweep, 360deg));
}
/* vertical japanese inside the enso */
.enso-vertical {
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.32em;
  color: var(--ink-2);
  line-height: 1;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1s var(--ease) 0.9s forwards;
}
.enso-seal {
  position: absolute;
  bottom: 6%;
  right: -2%;
  z-index: 2;
  font-family: var(--serif); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--vermilion);
  padding: 0.55em 0.5em;
  writing-mode: vertical-rl;
  border-radius: 2px;
  box-shadow: 0 6px 18px -10px rgba(124,46,29,0.9);
  opacity: 0;
  animation: rise 0.8s var(--ease) 1.3s forwards;
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* situation catalog — closes the method narrative: the example map → all 55 */
.scene-catalog {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink-line-soft);
}
.catalog-head {
  display: flex; align-items: baseline; gap: 0.5rem 1.1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.catalog-head .kicker {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.18rem, 2vw, 1.45rem); color: var(--ink);
  line-height: 1.4;
}
.catalog-head .kicker b { color: var(--vermilion-ink); font-size: 1.2em; font-weight: 900; }
.catalog-head p { margin: 0; color: var(--ink-3); font-size: 0.94rem; }
.catalog-head .free-key {
  color: var(--pine-ink); font-weight: 600;
  white-space: nowrap;
}
.catalog-head .free-key::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pine);
  display: inline-block; vertical-align: 0.06em; margin-right: 0.34em;
}
.catalog-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.scene-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.94rem; color: var(--ink-2);
  white-space: nowrap;
  padding: 0.55em 1.05em;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color 0.22s var(--ease), color 0.22s, transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.scene-chip:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: 0 10px 22px -18px rgba(33,26,19,0.7); }
.scene-chip.free {
  color: var(--pine-ink);
  border-color: color-mix(in srgb, var(--pine) 45%, var(--ink-line));
  background: color-mix(in srgb, var(--pine) 6%, var(--paper));
}
.scene-chip.free::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); flex: none;
}
.scene-chip.email {
  color: #8b3929;
  border-color: rgba(139,57,41,0.4);
  background: rgba(139,57,41,0.06);
}
.scene-chip.email::before {
  content: "\2709"; font-size: 0.72em; line-height: 1; color: #8b3929; flex: none;
}
.scene-chip:not(.free):not(.more):not(.email)::before {
  content: ""; width: 0.8em; height: 0.8em; flex: none;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.scene-chip.more { color: var(--ink-3); border-style: dashed; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding-block: var(--section-y); position: relative; }
.section + .section { padding-top: 0; }
section[id] { scroll-margin-top: 88px; }
.section-head { max-width: 50ch; margin-bottom: clamp(2.5rem, 5vw, 3.8rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.section-sub { font-size: 1.05rem; color: var(--ink-2); margin: 1rem 0 0; max-width: 42ch; }
.section-head.center .section-sub { margin-inline: auto; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--ink-line) 12%, var(--ink-line) 88%, transparent);
}

/* ============================================================
   PAIN
   ============================================================ */
.pain { position: relative; }
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
}
.pain-card {
  position: relative;
  padding: 2.2rem 1.7rem 2rem;
  border-top: 1.5px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 60%, transparent), transparent 70%);
}
.pain-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.pain-card .mark {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--ink);
  flex: none;
}
.pain-step { line-height: 1.3; }
.pain-step .gate {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.16em; color: var(--vermilion-ink);
  margin-bottom: 0.2rem;
}
.pain-step .gloss {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem); line-height: 1.2; color: var(--ink);
}
.pain-card h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.22rem; line-height: 1.45; margin: 0 0 1rem; color: var(--ink-2);
}
.pain-card p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }

/* framing thesis line */
.pain-thesis { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); }
.pain-thesis b { color: var(--ink); font-weight: 700; }

/* scannable ✓→✕ micro-moment */
.pain-scene {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
}
.pain-card .pain-scene .step {
  margin: 0; font-size: 0.95rem; line-height: 1.45;
  display: flex; align-items: center; gap: 0.6em;
  color: var(--ink-2);
}
.pain-card .pain-scene .step.bad { color: var(--ink); font-weight: 500; }
.pain-scene .step .ic {
  flex: none; width: 1.35em; height: 1.35em;
  display: inline-grid; place-items: center;
  border-radius: 50%; font-size: 0.74em; font-weight: 700; line-height: 1;
}
.pain-scene .step.ok .ic {
  color: var(--pine-ink);
  background: color-mix(in srgb, var(--pine) 15%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--pine) 38%, transparent);
}
.pain-scene .step.bad .ic {
  color: var(--vermilion-ink);
  background: color-mix(in srgb, var(--vermilion) 13%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--vermilion) 36%, transparent);
}
.pain-scene .step .jp { font-family: var(--serif-jp); color: var(--ink); }
.pain-card .pain-foot { color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; }

/* ============================================================
   METHOD + BRANCH TREE
   ============================================================ */
.method { position: relative; }
/* method: example-led — map is fixed & always visible; explanation cross-fades in place (no layout shift) */
.method-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: stretch;
}
.method-explain { position: relative; min-width: 0; order: 1; }
.method-demo { min-width: 0; order: 0; }
/* real explanation — reserves the column space even while hidden, so nothing reflows */
.explain-body {
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}
/* closed-state coach cue, layered over the reserved space (no layout shift) */
.explain-cue {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding-left: 1rem;
  opacity: 1; transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.explain-cue .cue-mark {
  align-self: flex-start;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ink-3);
  border: 1px solid var(--ink-line); border-radius: 999px; padding: 0.4em 1em;
}
.explain-cue p { margin: 0; color: var(--ink-3); font-size: 1.02rem; line-height: 1.85; }
.explain-cue .cue-arrow { color: var(--vermilion-ink); font-weight: 600; }
.method-demo { min-width: 0; }
.method-demo .tree { max-width: 640px; }
/* open: hover or keyboard focus anywhere in the stage — only opacity changes, map stays put */
.method-stage:hover .explain-body, .method-stage:focus-within .explain-body { opacity: 1; transform: none; }
.method-stage:hover .explain-cue, .method-stage:focus-within .explain-cue { opacity: 0; }
/* touch / no-hover — just show the explanation, drop the cue */
@media (hover: none) {
  .explain-body { opacity: 1; transform: none; }
  .explain-cue { display: none; }
}
/* method as a readable, branching "map" — tags mirror the live tree on the right */
.method-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mp {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mp:hover { border-color: var(--ink-3); transform: translateX(3px); box-shadow: 0 14px 30px -26px rgba(33,26,19,0.6); }
.mp-node {
  flex: none; align-self: start;
  font-size: 0.74rem; letter-spacing: 0.06em; font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 999px; padding: 0.32em 0.78em; white-space: nowrap;
}
.mp[data-k="main"]   .mp-node { color: var(--ink); border-color: var(--ink); }
.mp[data-k="branch"] .mp-node { color: var(--pine-ink); border-color: color-mix(in srgb, var(--pine) 42%, var(--ink-line)); }
.mp[data-k="rescue"] .mp-node { color: var(--vermilion-ink); border-color: color-mix(in srgb, var(--vermilion) 42%, var(--ink-line)); background: color-mix(in srgb, var(--vermilion) 5%, var(--paper)); }
.mp-body h4 { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.3rem; }
.mp-body p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
.mp-body strong { color: var(--ink); font-weight: 700; }
.mp-foot {
  margin: 1.3rem 0 0; padding-left: 0.1rem;
  font-size: 0.9rem; color: var(--ink-3); line-height: 1.7;
}
.mp-foot b { color: var(--vermilion-ink); font-weight: 600; }
/* cross-highlight: example step ↔ its explanation card */
.mp.is-active { border-color: var(--ink); background: var(--paper-2); box-shadow: 0 16px 32px -26px rgba(33,26,19,0.75); transform: translateX(3px); }
.mp[data-k="branch"].is-active { border-color: color-mix(in srgb, var(--pine) 70%, var(--ink)); }
.mp[data-k="rescue"].is-active { border-color: color-mix(in srgb, var(--vermilion) 70%, var(--ink)); }
.tree-prompt.is-cued {
  border-left-color: var(--vermilion);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--vermilion) 7%, var(--paper-2));
  box-shadow: 0 16px 30px -22px rgba(124,46,29,0.55), inset 0 0 0 1px color-mix(in srgb, var(--vermilion) 22%, transparent);
  transform: translateX(3px);
}
.branch.is-cued > .branch-btn { border-color: var(--ink); background: var(--paper-2); }
.branch-rescue.is-cued > .branch-btn { border-color: var(--vermilion); }

/* tree card */
.tree {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  box-shadow: 0 30px 60px -42px rgba(33,26,19,0.5);
}
.tree-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--ink-line);
}
.tree-bar .who { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--ink-3); letter-spacing: 0.05em; }
.tree-bar .who b { color: var(--ink); font-family: var(--serif); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; }

.hint-toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.82rem; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--ink-line);
  border-radius: 999px; padding: 0.4em 0.9em; min-height: 36px; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hint-toggle:hover { background: var(--paper-3); border-color: var(--ink-3); color: var(--ink); box-shadow: 0 6px 16px -12px rgba(33,26,19,0.6); }
.hint-toggle:active { box-shadow: none; }
.hint-toggle .sw { width: 26px; height: 15px; border-radius: 999px; background: var(--ink-line); position: relative; transition: background 0.3s var(--ease); }
.hint-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.32s var(--ease); }
.hint-toggle[aria-pressed="true"] .sw { background: var(--pine); }
.hint-toggle[aria-pressed="true"] .sw::after { transform: translateX(11px); }

/* a teaching line: japanese / romaji / chinese */
.line { position: relative; }
.line .jp {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5; color: var(--ink); margin: 0;
}
.line .jp ruby rt { font-size: 0.5em; font-weight: 400; color: var(--ink-3); }
.line .romaji { font-size: 0.84rem; letter-spacing: 0.04em; color: var(--ink-3); font-style: italic; margin: 0.2rem 0 0; }
.line .zh { font-size: 0.96rem; color: var(--ink-2); margin: 0.25rem 0 0; }
.tree[data-hints="off"] .romaji,
.tree[data-hints="off"] .zh { visibility: hidden; height: 0; margin: 0; overflow: hidden; }

/* the prompt (their line) */
.tree-prompt {
  position: relative;
  padding: 1.1rem 1.2rem;
  background: var(--paper-2);
  border-radius: 4px;
  border-left: 3px solid var(--ink);
  transition: border-left-color 0.28s var(--ease), border-left-width 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}
.tree-prompt .who-tag { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--ink-3); margin: 0 0 0.5rem; }

/* connector */
.tree-branches { margin-top: 0.4rem; }
.branch {
  position: relative;
  margin-top: 0.9rem;
  padding-left: 1.6rem;
}
.branch::before {
  content: ""; position: absolute; left: 0.5rem; top: -0.9rem; bottom: 50%;
  width: 1px; background: var(--ink-line);
}
.branch::after {
  content: ""; position: absolute; left: 0.5rem; top: 50%;
  width: 0.85rem; height: 1px; background: var(--ink-line);
}
.branch:first-child::before { top: -0.5rem; }

.branch-btn {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--paper); border: 1px solid var(--ink-line);
  border-radius: 4px; padding: 0.85rem 1rem; min-height: 48px;
  font-family: var(--sans); color: var(--ink);
  transition: border-color 0.25s var(--ease), background 0.25s, transform 0.2s;
}
.branch-btn:hover { border-color: var(--ink-3); background: var(--paper-2); }
.branch-btn .tag {
  flex: none; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-3); border: 1px solid var(--ink-line);
  padding: 0.2em 0.6em; border-radius: 999px;
}
.branch-btn .tag.ok   { color: var(--pine-ink); border-color: color-mix(in srgb,var(--pine) 40%, var(--ink-line)); }
.branch-btn .tag.sos  { color: var(--vermilion-ink); border-color: color-mix(in srgb,var(--vermilion) 40%, var(--ink-line)); }
.branch-btn .txt { flex: 1; font-size: 0.96rem; color: var(--ink-2); }
.branch-btn .chev { flex: none; color: var(--ink-3); transition: transform 0.3s var(--ease); font-size: 0.8rem; }
.branch[data-open="true"] .branch-btn { border-color: var(--ink); background: var(--paper-2); }
.branch[data-open="true"] .chev { transform: rotate(90deg); }

.branch-reveal {
  overflow: hidden;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.branch[data-open="true"] .branch-reveal { grid-template-rows: 1fr; }
.branch-reveal > div { min-height: 0; }
.branch-answer {
  margin: 0.6rem 0 0.2rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px dashed var(--ink-line);
  border-radius: 4px;
}
.branch-rescue .branch-answer { background: color-mix(in srgb, var(--vermilion) 6%, var(--paper)); border-color: color-mix(in srgb, var(--vermilion) 28%, var(--ink-line)); }

/* play (real ja speech) */
.play {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 0.7rem;
  font-size: 0.82rem; color: var(--ink-2);
  background: transparent; border: 1px solid var(--ink-line);
  border-radius: 999px; padding: 0.4em 0.85em; min-height: 36px; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.play:hover { border-color: var(--vermilion); color: var(--vermilion-ink); }
.play .ico { display: inline-flex; }
.play.is-playing { border-color: var(--vermilion); color: var(--vermilion-ink); background: color-mix(in srgb,var(--vermilion) 6%, transparent); }

/* ============================================================
   TRUST (testimonial cards)
   ============================================================ */
.trust { position: relative; }
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: stretch;
}
.tm {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin: 0;
  padding: 1.9rem 1.7rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 5px;
  box-shadow: 0 26px 50px -42px rgba(33,26,19,0.6);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.tm:hover { border-color: var(--ink-3); transform: translateY(-3px); box-shadow: 0 30px 58px -38px rgba(33,26,19,0.55); }
.tm-stars { color: var(--vermilion); font-size: 0.9rem; letter-spacing: 0.2em; line-height: 1; }
.tm blockquote {
  margin: 0; flex: 1;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.05rem; line-height: 1.8; color: var(--ink);
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.tm-author {
  display: flex; align-items: center; gap: 0.8rem;
  padding-top: 1.1rem; border-top: 1px solid var(--ink-line-soft);
}
.tm-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--paper); line-height: 1;
}
.tm-avatar[data-tone="ink"]       { background: var(--ink-2); }
.tm-avatar[data-tone="pine"]      { background: var(--pine); }
.tm-avatar[data-tone="vermilion"] { background: var(--vermilion); }
.tm-id { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; flex: 1; min-width: 0; }
.tm-name { font-weight: 600; font-size: 0.96rem; color: var(--ink); }
.tm-meta { font-size: 0.79rem; color: var(--ink-3); }
.tm-src {
  flex: none; align-self: center;
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid var(--ink-line); border-radius: 3px; padding: 0.22em 0.5em;
  white-space: nowrap;
}
.quote-note {
  margin-top: clamp(2rem, 4vw, 3rem); text-align: center;
  font-size: 0.9rem; color: var(--ink-3); max-width: 52ch; margin-inline: auto;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { position: relative; }
.price-shell {
  position: relative;
  max-width: 620px; margin-inline: auto;
  border: 1px solid var(--ink); border-radius: 5px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 40px 80px -56px rgba(33,26,19,0.55);
}
.price-enso-bg {
  position: absolute;
  right: -22%; bottom: -22%;
  width: clamp(230px, 34vw, 360px);
  opacity: 0.06;
  pointer-events: none;
  transform: rotate(-7deg);
}
.price-aside-kicker {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.2em;
  color: var(--vermilion-ink);
  margin: 0 0 0.9rem;
}
.price-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem,2.8vw,2.2rem); line-height: 1.25; margin: 0; }
.price-lead { font-size: 0.96rem; color: var(--ink-2); margin: 0.8rem 0 1.7rem; max-width: 44ch; }
.price-main { position: relative; z-index: 1; padding: clamp(2.2rem, 4.5vw, 3.4rem); display: flex; flex-direction: column; }
.price-badge {
  align-self: flex-start;
  font-size: 0.8rem; letter-spacing: 0.06em; color: var(--paper);
  background: var(--pine); padding: 0.4em 0.85em; border-radius: 2px; margin-bottom: 1.4rem;
}
.price-amount { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.price-amount .now { font-family: var(--serif); font-weight: 900; font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; color: var(--ink); }
.price-amount .now .cur { font-size: 0.42em; font-weight: 700; vertical-align: 0.35em; color: var(--ink-2); margin-right: 0.1em; }
.price-amount .was { font-size: 1.1rem; color: var(--ink-3); text-decoration: line-through; }
.price-once { font-size: 0.92rem; color: var(--ink-3); margin: 0 0 1.8rem; }
.price-features { list-style: none; margin: 0 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--ink-line); display: grid; gap: 0.95rem; }
.price-features li { position: relative; padding-left: 1.8rem; font-size: 0.98rem; color: var(--ink-2); }
.price-features li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine);
  transform: rotate(-45deg);
}
.price-main .btn { width: 100%; }
.price-free-note { font-size: 0.88rem; color: var(--ink-3); margin: 1.1rem 0 0; text-align: center; }
.price-free-note a { color: var(--pine-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   EMAIL
   ============================================================ */
.subscribe {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--ink-line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  text-align: center;
  overflow: hidden;
}
.subscribe .enso-ghost {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 340px; opacity: 0.05; pointer-events: none;
}
.subscribe h2 { margin-bottom: 0.6rem; }
.subscribe p.sub-lead { color: var(--ink-2); margin: 0 auto 2rem; max-width: 40ch; }
.subscribe-points {
  list-style: none;
  margin: 0 auto 2rem;
  width: max-content;
  max-width: 100%;
  display: grid;
  gap: 0.9rem;
  text-align: left;
}
.subscribe-points li {
  position: relative;
  padding-left: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  white-space: nowrap;
}
.subscribe-points li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-size: 1.2rem;
  color: var(--vermilion); font-weight: 700;
}
.subscribe-form { display: flex; gap: 0.7rem; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.subscribe-form input {
  flex: 1 1 240px; min-height: 50px;
  padding: 0 1.1rem; font-size: 1rem; font-family: var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-line); border-radius: 2px;
  transition: border-color 0.25s;
}
.subscribe-form input::placeholder { color: var(--ink-3); }
.subscribe-form input:focus { border-color: var(--vermilion); outline: none; }
.subscribe-note { font-size: 0.82rem; color: var(--ink-3); margin: 1.3rem auto 0; max-width: 42ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--ink-line);
  margin-top: var(--section-y);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) clamp(2rem,4vw,3rem);
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  align-items: flex-start; justify-content: space-between;
}
.footer-brand { max-width: 30ch; }
.footer-brand img { height: 56px; display: block; margin: 0 0 1.25rem; }
.footer-brand p { margin: 0; color: var(--ink-3); font-size: 0.9rem; line-height: 1.85; }
.footer-contact { min-width: 0; }
.footer-contact h5 {
  font-size: 0.74rem; letter-spacing: 0.16em; color: var(--ink-3);
  margin: 0 0 1.1rem; font-weight: 500;
}
.contact-list { margin: 0; display: grid; gap: 0.7rem; }
.contact-row {
  display: grid; grid-template-columns: 5.5rem minmax(10rem, 16rem);
  align-items: baseline; gap: 0.8rem;
}
.contact-row dt { font-size: 0.84rem; color: var(--ink-2); }
.contact-row dd {
  margin: 0; min-height: 1.2em;
  border-bottom: 1px dashed var(--ink-line);
  font-size: 0.9rem; color: var(--ink);
}
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line-soft);
}
.footer-copy { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.footer-legal { margin: 0; font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.02em; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .enso-vertical, .enso-seal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .enso-img.is-draw { -webkit-mask-image: none !important; mask-image: none !important; }
  .hero-photo { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy { max-width: none; }
  .hero-stage { order: -1; min-height: 280px; }
  .enso-wrap { width: clamp(220px, 50vw, 320px); }
  .hero-photo { width: min(98%, 560px); margin: 0 auto; }
  .method-stage { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .method-explain { order: 2; }
  .method-demo { order: 1; }
  .method-demo .tree { max-width: none; }
  .explain-body { opacity: 1 !important; transform: none !important; }
  .explain-cue { display: none; }
  .price-shell { max-width: none; }
}
@media (max-width: 680px) {
  .pain-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .hero h1 .accent { white-space: normal; }
  .nav-link.hide-sm { display: none; }
}