/* ---------------------------------------------------------- hero */
.ap-print-stage { --stage-accent: #5c93ff; }
.ap-print-caption { flex-direction: column; align-items: center; gap: 10px; bottom: 2%; }
.ap-print-caption span { font-size: 16px; color: var(--kz-soft); }

/* ---------------------------------------------------------- template vs kaizen */
.ap-compare { --mode-accent: var(--kz-faint); }
.ap-compare[data-mode="kaizen"] { --mode-accent: #5c93ff; }
.ap-compare-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.ap-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid var(--kz-border-strong); border-radius: 99px; background: var(--kz-panel); }
.ap-switch button { position: relative; z-index: 1; padding: 12px 22px; border: 0; background: none; color: var(--kz-muted); font: 600 15px/1 "Manrope", sans-serif; white-space: nowrap; cursor: pointer; transition: color .35s ease; }
.ap-switch button.active { color: #fff; }
.ap-switch i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: #2b3346; transition: transform .5s cubic-bezier(.16,1,.3,1), background .5s ease, box-shadow .5s ease; }
.ap-compare[data-mode="kaizen"] .ap-switch i { transform: translateX(100%); background: linear-gradient(180deg, #3b7bff, #1e52e0); box-shadow: 0 8px 26px rgba(47,109,255,.4); }
.ap-compare-rows { margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kz-border); }
.ap-compare-rows li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; padding: clamp(20px, 3vh, 30px) 0; border-bottom: 1px solid var(--kz-border); }
.ap-compare-rows span { display: inline-flex; align-items: center; gap: 10px; color: var(--kz-faint); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.ap-compare-rows span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mode-accent); box-shadow: 0 0 10px var(--mode-accent); transition: background .5s ease, box-shadow .5s ease; }
.ap-compare-rows p { margin: 0; color: var(--kz-muted); font: 600 clamp(22px, 2.6vw, 38px)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.035em; transition: color .5s ease, opacity .3s ease, transform .3s ease, filter .3s ease; }
.ap-compare[data-mode="kaizen"] .ap-compare-rows p { color: var(--kz-strong); }
.ap-compare-rows p.is-swapping { opacity: 0; transform: translateY(10px); filter: blur(4px); }

/* ---------------------------------------------------------- plan builder */
.ap-plan-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.ap-plan-left { display: grid; gap: 40px; }
.ap-questions { display: grid; gap: 30px; align-content: start; }
.ap-questions fieldset { margin: 0; padding: 0; border: 0; }
.ap-questions legend { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 0; color: var(--kz-strong); font: 600 20px/1.2 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.ap-questions legend b { color: var(--kz-accent); font: 500 11px/1 "IBM Plex Mono", monospace; }
.ap-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-options button { padding: 13px 20px; border: 1px solid var(--kz-border-strong); border-radius: 99px; background: var(--kz-panel); color: var(--kz-soft); font: 600 15px/1 "Manrope", sans-serif; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; }
.ap-options button:hover { color: var(--kz-strong); transform: translateY(-1px); }
.ap-options button.active { color: var(--kz-strong); border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ap-plan { --accent: #49c7cf; }
.ap-plan-card h3 { margin-bottom: 0; }
.ap-plan-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-self: stretch; margin: 22px 0 6px; padding: 16px 0; border-top: 1px solid var(--kz-border); border-bottom: 1px solid var(--kz-border); }
.ap-plan-meta dt { color: var(--kz-faint); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.ap-plan-meta dd { margin: 8px 0 0; color: var(--kz-strong); font-size: 15px; font-weight: 600; line-height: 1.35; }
.ap-plan-card .ap-plan-meta dd, .ap-plan-card h3 { transition: opacity .25s ease, transform .25s ease; }
.ap-plan-card.is-swapping .ap-plan-meta dd { opacity: 0; transform: translateY(6px); }
.ap-plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; align-self: stretch; margin-top: auto; padding-top: 26px; }
.ap-plan-foot .sv-route-mix { margin: 0; }
.ap-plan .kp-note { margin-top: 18px; }

/* ---------------------------------------------------------- meaning of the name */
.ap-meaning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ap-kanji { margin: 26px 0 0; }
.ap-kanji > div { display: flex; gap: 28px; }
.ap-kanji span { display: grid; justify-items: start; gap: 10px; color: var(--kz-strong); font: 300 clamp(72px, 9vw, 140px)/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; text-shadow: 0 0 40px rgba(92,147,255,.35); }
.ap-kanji small { color: var(--kz-faint); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; text-shadow: none; }
.ap-kanji figcaption { display: inline-block; margin-top: 22px; padding: 9px 14px; border: 1px solid var(--kz-border-strong); border-radius: 99px; color: var(--kz-soft); font-size: 14px; }
.ap-kanji figcaption b { color: var(--kz-accent); font-weight: 600; }
.ap-meaning h2 { margin: 30px 0 0; color: var(--kz-strong); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -.045em; }
.ap-meaning h2 em { color: var(--kz-accent); font-style: normal; }
.ap-meaning-copy > p { max-width: 480px; margin: 20px 0 0; color: var(--kz-muted); font-size: 17px; line-height: 1.65; }
.ap-orbit { width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.ap-orbit svg { width: 100%; height: 100%; overflow: visible; }
.ap-orbit-ring { fill: none; stroke: var(--kz-border-strong); stroke-width: 1; transform-origin: 200px 200px; }
.ap-orbit-ring--outer { stroke-dasharray: 2 10; animation: ap-orbit-rotate 90s linear infinite; }
.ap-orbit-ring--inner { stroke-dasharray: 1 7; opacity: .7; animation: ap-orbit-rotate 60s linear infinite reverse; }
.ap-orbit-spin { transform-origin: 200px 200px; animation: ap-orbit-rotate 40s linear infinite; }
.ap-orbit-track { fill: none; stroke: rgba(140,170,235,.16); stroke-width: 1.2; }
/* A comet runs along the widening spiral; the dot rides its head (same duration, same easing). */
.ap-orbit-comet { fill: none; stroke: url(#ap-orbit-gradient); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .08 .92; stroke-dashoffset: .08; filter: drop-shadow(0 0 7px rgba(92,147,255,.85)); animation: ap-orbit-comet 7s linear infinite; }
.ap-orbit-dot { fill: #fff; filter: drop-shadow(0 0 10px #35d6e8); offset-rotate: 0deg; animation: ap-orbit-dot 7s linear infinite; }
@keyframes ap-orbit-rotate { to { transform: rotate(360deg); } }
@keyframes ap-orbit-comet { from { stroke-dashoffset: .08; } to { stroke-dashoffset: -.92; } }
@keyframes ap-orbit-dot { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ap-orbit-ring, .ap-orbit-spin, .ap-orbit-comet, .ap-orbit-dot { animation: none; } .ap-orbit-comet { stroke-dasharray: none; opacity: .5; } .ap-orbit-dot { offset-distance: 100%; } }

/* ---------------------------------------------------------- manifesto */
.ap-manifesto ol { margin: 34px 0 0; padding: 0; list-style: none; }
.ap-manifesto li { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: baseline; padding: clamp(26px, 4vh, 44px) 0; border-bottom: 1px solid var(--kz-border); opacity: .22; transition: opacity .6s ease; }
.ap-manifesto li:first-child { border-top: 1px solid var(--kz-border); }
.ap-manifesto li.is-lit { opacity: 1; }
.ap-manifesto b { color: var(--kz-accent); font: 500 12px/1 "IBM Plex Mono", monospace; }
.ap-manifesto h3 { margin: 0; color: var(--kz-strong); font-size: clamp(36px, 5.4vw, 84px); line-height: .98; letter-spacing: -.055em; }
.ap-manifesto p { margin: 0; color: var(--kz-muted); font-size: 16px; line-height: 1.6; }

@media (max-width: 960px) {
  .ap-plan-body, .ap-meaning { grid-template-columns: 1fr; }
  .ap-manifesto li { grid-template-columns: 50px 1fr; }
  .ap-manifesto p { grid-column: 2; }
}

@media (max-width: 760px) {
  .ap-compare-rows li { grid-template-columns: 1fr; gap: 10px; }
  .ap-switch button { padding: 11px 14px; font-size: 13px; }
  .ap-plan-meta { grid-template-columns: 1fr; }
  .ap-kanji span { font-size: 72px; }
  .ap-orbit { width: min(100%, 320px); margin-top: 24px; }
}