/* ============================================================
   スラリ — Landing Page Styles
   ============================================================ */

:root {
  --primary: #FF006E;
  --primary-hover: #E60062;
  --primary-50:  #FFE5EE;
  --primary-100: #FFD0E0;

  --gray-900: #1A1A1A;
  --gray-800: #2B2B2B;
  --gray-700: #555555;
  --gray-600: #6E6E6E;
  --gray-500: #8C8C8C;
  --gray-400: #B5B5B5;
  --gray-300: #D9D9D9;
  --gray-200: #ECECEC;
  --gray-100: #F5F5F5;
  --gray-50:  #FAFAFA;
  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,20,20,.04), 0 1px 1px rgba(20,20,20,.03);
  --shadow-md: 0 4px 12px rgba(20,20,20,.05), 0 2px 4px rgba(20,20,20,.04);
  --shadow-lg: 0 20px 40px rgba(20,20,20,.06), 0 8px 16px rgba(20,20,20,.04);
  --shadow-glow: 0 12px 32px rgba(255,0,110,.20);

  --container: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--gray-900);
  background: var(--white);
  font-feature-settings: "palt";
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--gray-200);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--gray-900);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
}
.nav-list {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
  white-space: nowrap;
}
.nav-list a {
  font-size: 14px; font-weight: 500; color: var(--gray-700);
  transition: color .15s;
}
.nav-list a:hover { color: var(--gray-900); }
.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--primary); color: #fff !important;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.header-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* ============================================================
   Hero (FV)  — faithful reproduction of design-system mock
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: 40px 0 56px;
  background: #FAFAF7;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: stretch;
  min-height: 420px;
}
.hero-left {
  position: relative;
  z-index: 2;
  /* H1 + sub + CTA を中央に配置（grid cell の高さを使う） */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .25em;
  color: var(--primary);
  padding: 5px 11px;
  background: rgba(255,0,110,.08);
  border-radius: 999px;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 40px; line-height: 1.4; letter-spacing: .005em;
  font-weight: 800; color: var(--gray-900);
}
.hero h1 .accent {
  color: var(--primary);
  position: relative;
}
.hero h1 .accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: rgba(255,0,110,.18);
  border-radius: 4px;
  z-index: -1;
}
.hero-sub {
  margin-top: 20px;
  font-size: 15px; line-height: 1.85; color: var(--gray-700);
}
.hero-actions {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* ============================================================
   §1 Hero — BEFORE / AFTER 16:9 illustration system
   ============================================================ */
.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  /* 左カラム（hero-left）の高さに追従 */
  height: 100%;
}

/* shared tag */
.hr-tag {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 3;
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  border-radius: 4px;
  pointer-events: none;
}
.hr-tag.dark {
  background: var(--gray-900);
  color: #fff;
  border-color: var(--gray-900);
}

/* ---------- BEFORE: 16:9 slide illustration ---------- */
.hr-before {
  position: relative;
  width: 100%;
}
.hr-slide {
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(20,20,20,.06);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 34px 14px;
  filter: saturate(.5);
  position: relative;
  overflow: hidden;
}
.hr-slide::before {
  /* page edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--gray-200);
}
.hrs-header {
  display: grid; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.hrs-title {
  display: block;
  height: 14px; width: 58%;
  background: var(--gray-400);
  border-radius: 2px;
}
.hrs-subtitle {
  display: block;
  height: 6px; width: 30%;
  background: var(--gray-200);
  border-radius: 2px;
}
.hrs-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  padding: 18px 0;
}
.hrs-bullets {
  display: grid; gap: 10px;
  align-content: start;
  padding-top: 4px;
}
.hrs-bul {
  display: block;
  height: 6px;
  background: var(--gray-200);
  border-radius: 2px;
  position: relative;
  padding-left: 14px;
}
.hrs-bul::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 6px; height: 6px;
  background: var(--gray-400);
  border-radius: 50%;
}
.hrs-bul.w-85 { width: 85%; }
.hrs-bul.w-78 { width: 78%; }
.hrs-bul.w-70 { width: 70%; }
.hrs-bul.w-60 { width: 60%; }
.hrs-chart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: end;
  height: 90%;
  min-height: 70px;
}
.hrs-chart i {
  display: block;
  background: var(--gray-300);
  border-radius: 2px 2px 0 0;
}
.hrs-footer {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--gray-400);
  letter-spacing: .04em;
}
.hrs-stamp {
  position: absolute;
  top: 30%; right: 7%;
  transform: rotate(-10deg);
  padding: 6px 14px;
  border: 2px solid var(--gray-400);
  color: var(--gray-500);
  font-size: 11px; font-weight: 800;
  letter-spacing: .2em;
  border-radius: 4px;
  background: rgba(255,255,255,.72);
  opacity: .85;
}

/* ---------- Transition arrow ---------- */
.hero-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.hf-rail {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
}
.hf-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--primary);
}
.hf-arrow {
  display: none;
}

/* ---------- AFTER: 16:9 browser illustration ---------- */
.hr-after {
  position: relative;
  width: 100%;
}
.hr-browser-frame {
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow:
    0 20px 40px rgba(20,20,20,.10),
    0 0 0 4px rgba(255,0,110,.06);
  display: grid;
  grid-template-rows: 26px 1fr;
  overflow: hidden;
  position: relative;
}
.hr-browser-top {
  height: 26px;
  background: #FAFAFA;
  display: flex; align-items: center; gap: 5px;
  padding: 0 10px;
  border-bottom: 1px solid var(--gray-200);
}
.hr-browser-top i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-300);
}
.hr-url {
  margin-left: 6px;
  font-size: 10px; color: var(--gray-500);
  font-family: ui-monospace, "SFMono-Regular", monospace;
}
.hr-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .15em;
  color: var(--primary);
}
.hr-live .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,0,110,.18);
  animation: hr-live-pulse 1.6s ease-in-out infinite;
}
@keyframes hr-live-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
.hr-browser-body {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px 18px 16px;
  background: #fff;
}
.hb-hero {
  background: linear-gradient(135deg, #FFF1F6, #FFE4ED);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}
.hb-eyebrow {
  display: block;
  width: 48px; height: 5px;
  background: var(--primary); border-radius: 2px;
}
.hb-h1 {
  display: block;
  height: 12px; width: 72%;
  background: var(--gray-900); border-radius: 3px;
}
.hb-h2 {
  display: block;
  height: 6px; width: 90%;
  background: var(--gray-400); border-radius: 2px;
}
.hb-cta {
  display: block;
  height: 16px; width: 68px;
  background: var(--primary); border-radius: 4px;
  margin-top: 4px;
  animation: hb-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes hb-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,110,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(255,0,110,0); }
}
.hb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: end;
}
.hb-card {
  background: var(--gray-50);
  border-radius: 6px;
  padding: 10px;
  display: grid; gap: 6px;
}
.hb-card-bar {
  display: block;
  height: 14px;
  background: var(--gray-300);
  border-radius: 4px;
  transform-origin: left center;
  animation: hb-bar-grow 4s ease-in-out infinite;
}
.hb-card-bar.pink { background: var(--primary); animation-delay: .5s; }
@keyframes hb-bar-grow {
  0%, 100% { transform: scaleX(.7); }
  50%      { transform: scaleX(1); }
}
.hb-card-l {
  display: block;
  height: 4px;
  background: var(--gray-300);
  border-radius: 2px;
}
.hb-card-l.w-90 { width: 90%; }
.hb-card-l.w-85 { width: 85%; }
.hb-card-l.w-80 { width: 80%; }
.hb-card-l.w-70 { width: 70%; }
.hb-card-l.w-60 { width: 60%; }
.hb-card-l.w-55 { width: 55%; }
.hb-card-l.w-50 { width: 50%; }

/* cursor that hops between cards */
.hr-cursor {
  position: absolute;
  width: 16px; height: 16px;
  z-index: 3;
  animation: hr-cursor-move 8s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
@keyframes hr-cursor-move {
  0%, 8%   { left: 22%; top: 26%; }
  18%, 32% { left: 28%; top: 70%; }
  42%, 58% { left: 58%; top: 70%; }
  68%, 88% { left: 78%; top: 70%; }
  100%     { left: 22%; top: 26%; }
}
/* tooltips */
.hr-tip {
  position: absolute;
  background: var(--gray-900); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  z-index: 4;
  opacity: 0;
  animation: hr-tip 8s ease-in-out infinite;
}
.hr-tip::after {
  content: ""; position: absolute;
  left: 18px; bottom: -4px;
  width: 8px; height: 8px;
  background: inherit; transform: rotate(45deg);
}
.hr-tip strong { color: var(--primary); }
.hr-tip.tip-1 { left: 28%; top: 28%; animation-delay: 1.2s; }
.hr-tip.tip-2 { left: 56%; top: 56%; animation-delay: 4.6s; }
@keyframes hr-tip {
  0%, 12%  { opacity: 0; transform: translateY(6px); }
  14%, 28% { opacity: 1; transform: translateY(0); }
  32%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hb-card-bar, .hb-cta, .hr-cursor, .hr-tip, .hr-live .dot { animation: none; }
}

/* legacy floating tiles (preserved utility classes) */
.hr-stat {
  position: absolute; right: -18px; top: -18px;
  background: var(--gray-900); color: #fff;
  border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 12px 28px rgba(20,20,20,.18);
  transform: rotate(-3deg);
}
.hr-stat-num {
  font-size: 24px; font-weight: 800; color: var(--primary);
  line-height: 1;
}
.hr-stat-lbl {
  font-size: 10px; letter-spacing: .15em; margin-top: 4px; color: #fff;
}
.hr-pill {
  position: absolute; left: -12px; bottom: -14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: var(--gray-700);
  box-shadow: 0 6px 16px rgba(20,20,20,.08);
}
.hr-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.b-line.w-40 { width: 40%; }
.hero-chartcard {
  position: absolute;
  left: 38%; bottom: 0;
  width: 230px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20,20,20,.08);
  padding: 16px 18px;
  z-index: 3;
}
.hc-lines { display: grid; gap: 6px; }
.hc-lines .b-line { height: 6px; }
.hc-chart {
  margin-top: 10px; height: 48px;
  display: grid; grid-template-columns: repeat(5,1fr); gap: 5px;
  align-items: end;
}
.hc-chart b { background: var(--gray-300); border-radius: 2px; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,0,110,.18); }
  50%     { box-shadow: 0 0 0 8px rgba(255,0,110,.04); }
}

.hero h1 {
  margin-top: 24px;
  font-size: 56px; line-height: 1.25; letter-spacing: .005em;
  font-weight: 700; color: var(--gray-900);
}
.hero h1 .accent { color: var(--primary); }

.hero-sub {
  margin-top: 28px;
  font-size: 17px; line-height: 1.85; color: var(--gray-700);
  max-width: 520px;
}

.hero-actions {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px;
  transition: background .15s, transform .15s, box-shadow .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); }
.btn-secondary {
  background: #fff; color: var(--gray-900);
  border: 1.5px solid var(--gray-300);
}
.btn-secondary:hover { border-color: var(--gray-900); }
.btn-dark {
  background: var(--gray-900); color: #fff;
}
.btn-dark:hover { background: #000; transform: translateY(-2px); }
.btn-lg { padding: 20px 36px; font-size: 17px; }


/* ============================================================
   Section base
   ============================================================ */
section { padding: 88px 0; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .15em;
  color: var(--primary);
  margin-bottom: 16px; text-transform: uppercase;
}
.section-title {
  font-size: 40px; line-height: 1.4; font-weight: 700;
  color: var(--gray-900);
  letter-spacing: .01em;
}
.section-title .accent { color: var(--primary); }
.section-sub {
  margin-top: 16px;
  font-size: 16px; color: var(--gray-700);
  line-height: 1.85;
  max-width: 640px; margin-left: auto; margin-right: auto;
}

/* ============================================================
   §2  Empathy / Problem
   ============================================================ */
.empathy { background: #fff; }
.pain-list {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-bottom: 56px;
}
.pain-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,0,110,.25);
}
.pain-illust {
  aspect-ratio: 200/140;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
}
.pain-illust svg { width: 100%; height: 100%; }
.pain-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--primary); text-transform: uppercase;
  padding: 4px 10px;
  background: var(--primary-50);
  border-radius: 4px;
  margin-bottom: 12px;
}
.pain-h {
  font-size: 19px; font-weight: 700; line-height: 1.55;
  color: var(--gray-900);
  margin-bottom: 10px;
}
.pain-d {
  font-size: 13px; color: var(--gray-700); line-height: 1.85;
}
.empathy-turn {
  margin-top: 32px;
}
.turn-question {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 44px 56px;
  background: linear-gradient(135deg, #1A1A1A 0%, #2B2B2B 100%);
  border-radius: var(--radius-xl);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.turn-question::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(420px 260px at 105% 0%, rgba(255,0,110,.22), transparent 60%),
    radial-gradient(280px 180px at 0% 100%, rgba(255,0,110,.10), transparent 60%);
  pointer-events: none;
}
.turn-q-mark {
  font-family: "Noto Sans JP", serif;
  font-size: 140px; font-weight: 900;
  line-height: .9;
  color: var(--primary);
  position: relative; z-index: 1;
  text-shadow: 0 8px 32px rgba(255,0,110,.4);
}
.turn-q-body { position: relative; z-index: 1; }
.turn-q-lead {
  font-size: 15px; line-height: 1.9; color: #BBB;
  margin: 0 0 18px;
}
.turn-q-lead .strike {
  position: relative;
  font-weight: 700; color: #fff;
  padding: 0 4px;
}
.turn-q-lead .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%;
  height: 2px; background: var(--primary);
  transform: rotate(-2deg);
}
.turn-q-text {
  font-size: 30px; font-weight: 800; line-height: 1.5;
  color: #fff;
  margin: 0;
}
.turn-q-text em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(255,0,110,.55) 62%, rgba(255,0,110,.55) 92%, transparent 92%);
  padding: 0 2px;
}
.m-only { display: none; }
@media (max-width: 760px) {
  .turn-question {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 24px;
    gap: 16px;
  }
  .turn-q-mark { font-size: 96px; margin: 0 auto; }
  .turn-q-text { font-size: 22px; }
  .m-only { display: inline; }
}

/* ============================================================
   §3 Solution — 3 step
   ============================================================ */
.steps {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px;
  align-items: stretch;
  margin-bottom: 56px;
}
.step {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  font-size: 14px; font-weight: 800;
  margin-bottom: 20px;
}
.step h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--gray-700); }
.step-arrow {
  align-self: center;
  display: grid; place-items: center;
  color: var(--primary);
}
.step-arrow svg { width: 28px; height: 28px; }
/* §3 solution background */
#solution { background: #fff; }

/* §5 sample background */
#sample { background: #fff; }

/* §7 plans background */
#plans { background: #FFF6FA; border-top: 1px solid #FFE0EC; border-bottom: 1px solid #FFE0EC; }

.solution-note {
  text-align: center;
  font-size: 16px; line-height: 2; color: var(--gray-700);
}
.solution-note strong { color: var(--gray-900); font-weight: 700; }

/* solution callout */
.callout {
  margin-top: 40px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 0;
  background: linear-gradient(135deg, #1A1A1A 0%, #2B2B2B 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
}
.callout-left {
  padding: 40px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.callout-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--primary);
  padding: 6px 14px;
  background: rgba(255,0,110,.15);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  width: fit-content;
}
.callout-title {
  font-size: 32px; line-height: 1.45; font-weight: 700;
  margin-bottom: 20px;
}
.callout-desc {
  font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.7);
}
.callout-right {
  padding: 40px 44px;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(255,0,110,.12), transparent),
    rgba(255,255,255,.03);
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; justify-content: center; gap: 32px;
}
.callout-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 12px;
}
.cf-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.cf-icon {
  width: 64px; height: 64px;
  background: #fff;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.cf-icon.dark { background: var(--gray-900); border: 1.5px solid var(--primary); }
.cf-icon svg { width: 32px; height: 32px; }
.cf-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65);
}
.cf-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--primary);
}
.cf-arrow svg { width: 56px; height: 14px; }
.cf-arrow span {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--primary);
}
.callout-bullets {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
}
.cb svg { stroke: var(--primary); width: 14px; height: 14px; }

/* ============================================================
   §4 — 3 values
   ============================================================ */
.values { background: #FAFAF7; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.value-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.value-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--gray-200);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,0,110,.25);
}
.value-illust {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 280/180;
}
.value-illust svg { width: 100%; height: 100%; display: block; }
.value-num {
  position: absolute; top: 40px; right: 40px;
  font-size: 12px; font-weight: 800; letter-spacing: .15em;
  color: var(--gray-300);
}
.value-card h3 {
  font-size: 20px; font-weight: 700; line-height: 1.55; margin-bottom: 14px;
  color: var(--gray-900);
}
.value-card p {
  font-size: 14px; color: var(--gray-700); line-height: 1.85;
}

/* ============================================================
   §5 Sample
   ============================================================ */
.sample-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-bottom: 48px;
}
.sample-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.sample-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.sample-card .thumb {
  aspect-ratio: 4 / 3;
  background: var(--gray-100);
  position: relative; overflow: hidden;
  padding: 18px;
}
.sample-card .thumb .row {
  display: grid; gap: 6px;
}
.sample-card .thumb .h { height: 12px; background: var(--gray-300); border-radius: 3px; width: 60%; }
.sample-card .thumb .l { height: 5px; background: var(--gray-300); border-radius: 3px; }
.sample-card .thumb .l.s { width: 80%; }
.sample-card .thumb .l.x { width: 50%; }
.sample-card .thumb .chart {
  margin-top: 14px; height: 60px;
  display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; align-items: end;
}
.sample-card .thumb .chart b { background: var(--primary); opacity: .25; border-radius: 2px; }
.sample-card .thumb .chart b:nth-child(2n) { opacity: .6; }
.sample-card .thumb .chart b:nth-child(3n) { opacity: .85; }
.sample-card .thumb .grid {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sample-card .thumb .grid b { background: var(--gray-200); height: 36px; border-radius: 4px; }
.sample-card .meta {
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--gray-200);
}
.sample-card .meta strong { font-size: 15px; font-weight: 700; }
.sample-card .meta span { font-size: 12px; color: var(--gray-500); }
.sample-card .meta .device {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--primary); font-weight: 600;
}
.sample-cta { text-align: center; }

/* ============================================================
   §6 Partner program
   ============================================================ */
.partner {
  background: var(--gray-900); color: #fff;
  position: relative; overflow: hidden;
}
.partner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(255,0,110,.18), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(255,0,110,.08), transparent 60%);
}
.partner-inner { position: relative; }
.partner .section-eyebrow { color: var(--primary); }
.partner .section-title { color: #fff; }
.partner .section-sub { color: rgba(255,255,255,.7); }

.partner-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--primary); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700;
  margin-bottom: 20px;
}
.partner-badge .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; }

.exchange {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-bottom: 56px;
}
.exchange .col {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.exchange .col.right {
  background: linear-gradient(180deg, rgba(255,0,110,.10), rgba(255,0,110,.02));
  border-color: rgba(255,0,110,.35);
}
.exchange h3 {
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
  letter-spacing: .04em;
}
.exchange h3 .label {
  font-size: 11px; padding: 4px 10px;
  background: rgba(255,255,255,.10); border-radius: 4px; font-weight: 600;
}
.exchange .col.right h3 .label { background: var(--primary); }
.exchange ul { list-style: none; display: grid; gap: 16px; }
.exchange li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.85);
}
.exchange li svg { width: 18px; height: 18px; margin-top: 4px; stroke: var(--primary); }
.exchange li .sub {
  display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px;
}
.partner-cta { text-align: center; }
.partner-cta .meta {
  margin-top: 16px;
  font-size: 13px; color: rgba(255,255,255,.55);
}

/* ============================================================
   §7 Plans
   ============================================================ */
.plans-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-bottom: 32px;
}
.plan {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  display: flex; flex-direction: column;
}
.plan.featured {
  border-color: var(--primary);
  box-shadow: 0 20px 50px rgba(255,0,110,.12);
  transform: translateY(-8px);
}
.plan.featured::before {
  content: "おすすめ";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  padding: 6px 16px; border-radius: var(--radius-pill);
}
.plan-name {
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  color: var(--gray-500); text-transform: uppercase;
  margin-bottom: 6px;
}
.plan.featured .plan-name { color: var(--primary); }
.plan-tagline {
  font-size: 13px; color: var(--gray-700); margin-bottom: 24px;
  height: 24px;
}
.price-old {
  font-size: 14px; color: var(--gray-500);
  text-decoration: line-through;
}
.price-new {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
}
.price-new .num {
  font-size: 44px; font-weight: 700; color: var(--gray-900);
  line-height: 1;
}
.price-new .yen { font-size: 18px; font-weight: 700; }
.price-new .unit { font-size: 13px; color: var(--gray-500); }
.plan .delivery {
  margin-top: 12px;
  font-size: 13px; color: var(--gray-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.plan .delivery::before {
  content: ""; width: 6px; height: 6px; background: var(--primary); border-radius: 50%;
}
.plan-features {
  list-style: none;
  margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--gray-200);
  display: grid; gap: 14px;
  flex: 1;
}
.plan-features li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  font-size: 14px; line-height: 1.6; color: var(--gray-800);
}
.plan-features li svg { width: 16px; height: 16px; stroke: var(--primary); margin-top: 4px; }
.plan .btn { width: 100%; margin-top: 28px; }
.plans-note {
  text-align: center; font-size: 13px; color: var(--gray-500); line-height: 2;
}

/* ============================================================
   §8 About
   ============================================================ */
.about { background: var(--gray-50); }
.about-grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 64px;
  align-items: start;
}
.about-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: sticky; top: 96px;
}
.avatar {
  width: 100%; aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  position: relative; overflow: hidden;
  margin-bottom: 20px;
}
.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* placeholder 用 — img がない場合のフォールバック表示。img があれば見えない */
.avatar .ph {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; color: var(--gray-500); letter-spacing: .1em;
}
.about-card .name {
  font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.about-card .ruby {
  font-size: 12px; color: var(--gray-500); margin-bottom: 8px;
}
.about-card .role {
  font-size: 13px; color: var(--primary); font-weight: 600;
  margin-bottom: 20px;
}
.about-card .links {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.about-card .links a {
  font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--gray-700);
  transition: background .15s, color .15s;
}
.about-card .links a:hover { background: var(--gray-900); color: #fff; }

.about-body p {
  font-size: 15px; line-height: 2; color: var(--gray-800);
  margin-bottom: 20px;
}
.creds {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 24px 0 32px;
}
.cred {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.cred .ic {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary);
  border-radius: 50%;
}
.cred .ic svg { width: 14px; height: 14px; stroke: var(--primary); }
.cred .lbl { font-size: 11px; color: var(--gray-500); }
.cred .val { font-size: 13px; font-weight: 600; color: var(--gray-900); line-height: 1.5; }

/* 書籍カバー（PUBLICATIONS の中・カバー＋タイトル横並びリスト） */
.cred-books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.cred-books .book-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cred-books .book-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20,20,20,.10);
  border-color: var(--primary-50);
}
.cred-books .book-item img {
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  box-shadow: 0 2px 6px rgba(20,20,20,.06);
}
.cred-books .book-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.5;
  letter-spacing: .01em;
}

/* PUBLICATIONS だけ書籍カバーが大きいので、cred カードを 2 カラム分使う */
.cred.cred-publications { grid-column: span 2; }
@media (max-width: 720px) {
  .cred.cred-publications { grid-column: auto; }
  .cred-books { grid-template-columns: 1fr; }
  .cred-books .book-item { grid-template-columns: 56px 1fr; }
  .cred-books .book-item img { width: 56px; }
  .cred-books .book-title { font-size: 12px; }
}

.quote-block {
  margin-top: 32px;
  padding: 32px;
  background: #fff;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
}
.quote-block p {
  font-size: 17px; line-height: 1.95; color: var(--gray-900); font-weight: 500;
  margin: 0;
}

/* ============================================================
   §9 FAQ
   ============================================================ */
.faq-list {
  max-width: 880px; margin: 0 auto;
  display: grid; gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: grid; grid-template-columns: 32px 1fr 24px; gap: 16px;
  align-items: center;
  padding: 22px 28px;
  cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--gray-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
}
.faq-item summary .chev {
  transition: transform .2s;
}
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item summary .chev svg { width: 14px; height: 14px; stroke: var(--gray-500); }
.faq-item .a {
  padding: 0 28px 24px 76px;
  font-size: 14px; line-height: 1.95; color: var(--gray-700);
}

/* ============================================================
   §10 Final CTA + Form
   ============================================================ */
/* §8 about already has bg */
#faq { background: #fff; }
.final-cta { background: var(--gray-50); }
.cta-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 80px 64px;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-card::before {
  content: ""; position: absolute; inset: -2px;
  background:
    radial-gradient(400px 200px at 0% 0%, rgba(255,0,110,.10), transparent 60%),
    radial-gradient(400px 200px at 100% 100%, rgba(255,0,110,.08), transparent 60%);
  pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card h2 {
  font-size: 40px; line-height: 1.4; font-weight: 700;
  margin-bottom: 16px;
}
.cta-card .remaining {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: var(--primary-50); color: var(--primary);
  font-weight: 700; font-size: 13px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.cta-card p {
  font-size: 16px; color: var(--gray-700); line-height: 1.9;
  max-width: 520px; margin: 0 auto 40px;
}

.form-section { margin-top: 80px; max-width: 720px; margin-left: auto; margin-right: auto; }
.form-title {
  text-align: center; margin-bottom: 32px;
}
.form-title h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.form-title p { font-size: 14px; color: var(--gray-500); }
.form-title .mail {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary); font-weight: 600;
}

.form {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid; gap: 20px;
}
.field label {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--gray-800);
  margin-bottom: 8px;
}
.field label .req {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 700;
  background: var(--primary); color: #fff;
  padding: 2px 6px; border-radius: 4px;
  vertical-align: middle;
}
.field label .opt {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 600;
  background: var(--gray-100); color: var(--gray-500);
  padding: 2px 6px; border-radius: 4px;
  vertical-align: middle;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 15px; font-family: inherit;
  background: #fff; color: var(--gray-900);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,0,110,.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-actions {
  display: flex; justify-content: center; gap: 16px;
  margin-top: 8px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--gray-900); color: #fff;
  padding: 80px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand .logo { color: #fff; }
.footer-brand .tag {
  margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.55);
  line-height: 1.8;
}
.footer-col h4 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  margin-bottom: 20px; color: rgba(255,255,255,.9);
}
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a {
  font-size: 13px; color: rgba(255,255,255,.6);
  transition: color .15s;
}
.footer-col a:hover { color: #fff; }
.footer-newsletter h4 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  margin-bottom: 16px; color: rgba(255,255,255,.9);
}
.newsletter-form {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.newsletter-form input {
  padding: 12px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  color: #fff; font-size: 13px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form button {
  padding: 0 22px;
  background: var(--primary); color: #fff;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 700;
}
.newsletter-form button:hover { background: var(--primary-hover); }
.footer-bottom {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom .copy { font-size: 12px; color: rgba(255,255,255,.45); }
.footer-bottom .social {
  display: flex; gap: 12px;
}
.footer-bottom .social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  transition: background .15s, border-color .15s;
}
.footer-bottom .social a:hover { background: var(--primary); border-color: var(--primary); }
.footer-bottom .social svg { width: 14px; height: 14px; fill: rgba(255,255,255,.7); }
.footer-bottom .social a:hover svg { fill: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .hero h1 { font-size: 36px; white-space: normal; }
}
@media (max-width: 960px) {
  .hero { padding: 64px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 40px; }
  section { padding: 80px 0; }
  .section-title { font-size: 30px; }
  .pain-list, .value-grid, .sample-grid, .plans-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: center; }
  .hero-right { display: none; }
  .hero h1 { font-size: 30px; line-height: 1.5; }
  .hero-eyebrow { font-size: 10px; }
  .callout { grid-template-columns: 1fr; }
  .callout-left, .callout-right { padding: 36px 28px; }
  .callout-title { font-size: 24px; }
  .callout-flow { grid-template-columns: 1fr; gap: 8px; }
  .cf-arrow svg { transform: rotate(90deg); }
  .exchange { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-card { position: static; }
  .creds { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-card { padding: 48px 24px; }
  .cta-card h2 { font-size: 28px; }
  .nav-list { display: none; }
}


/* ============================================================
   §5 ROI Simulator
   ============================================================ */
.sim-shell {
  margin: 40px auto 0;
  max-width: 1100px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px rgba(20,20,20,.08), 0 4px 12px rgba(20,20,20,.04);
  overflow: hidden;
}
.sim-shell-top {
  height: 36px; background: #FAFAFA;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
}
.sim-shell-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
.sim-url {
  margin-left: 12px; font-size: 12px; color: var(--gray-500);
  font-family: ui-monospace, "SFMono-Regular", monospace;
}
.sim-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .15em; color: var(--primary);
}
.sim-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,0,110,.18);
  animation: simlive 1.6s ease-in-out infinite;
}
@keyframes simlive {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
.sim-body { padding: 32px; }
.sim-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px;
}
.sim-label-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.sim-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 4px 10px; border-radius: 999px;
}
.sim-tag.dark {
  color: #fff; background: var(--primary);
}
.sim-h3 {
  font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0;
}

/* inputs */
.sim-inputs { display: grid; gap: 22px; }
.sim-field { display: grid; gap: 10px; }
.sim-field-head {
  display: flex; align-items: center; justify-content: space-between;
}
.sim-field label {
  font-size: 13px; font-weight: 600; color: var(--gray-700);
}
.sim-out {
  font-size: 22px; font-weight: 800; color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.sim-out span {
  font-size: 12px; font-weight: 600; color: var(--gray-500); margin-left: 4px;
}
.sim-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: var(--gray-200); border-radius: 999px;
  outline: none;
}
.sim-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary);
  box-shadow: 0 2px 8px rgba(255,0,110,.25);
  cursor: pointer; transition: transform .15s;
}
.sim-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.sim-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary);
  box-shadow: 0 2px 8px rgba(255,0,110,.25);
  cursor: pointer;
}
.sim-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--gray-500);
}
.sim-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sim-chip {
  font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-700);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all .15s;
}
.sim-chip:hover { background: var(--gray-200); }
.sim-chip.is-active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(255,0,110,.25);
}

/* results */
.sim-results { display: grid; gap: 16px; align-content: start; }
.sim-result-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.sim-result-card.primary {
  background: linear-gradient(135deg, #1A1A1A, #2B2B2B);
  border-color: var(--gray-900);
  color: #fff;
  position: relative; overflow: hidden;
}
.sim-result-card.primary::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(280px 180px at 100% 0%, rgba(255,0,110,.22), transparent 60%);
  pointer-events: none;
}
.sim-result-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--gray-500); text-transform: uppercase;
  position: relative;
}
.sim-result-card.primary .sim-result-lbl { color: rgba(255,255,255,.6); }
.sim-result-num {
  margin-top: 8px;
  font-size: 38px; font-weight: 900; color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
  position: relative;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sim-result-card.primary .sim-result-num { color: #fff; }
.sim-result-card.primary .sim-result-num .num { color: var(--primary); }
.sim-result-num.sm { font-size: 26px; }
.sim-result-num .yen { font-size: 22px; font-weight: 700; }
.sim-result-num.sm .yen { font-size: 16px; }
.sim-result-num .unit {
  font-size: 14px; font-weight: 700; color: var(--gray-500); margin-left: 4px;
}
.sim-result-card.primary .sim-result-num .unit { color: rgba(255,255,255,.6); }
.sim-result-sub {
  margin-top: 6px;
  font-size: 12px; color: rgba(255,255,255,.7);
  position: relative;
}
.sim-result-sub strong { color: #fff; }
.sim-result-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sim-chart {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.sim-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--gray-700); margin-bottom: 10px;
}
.sim-chart-yr {
  font-size: 10px; color: var(--gray-500); letter-spacing: .1em;
}
.sim-chart-svg {
  width: 100%; height: 140px; display: block;
}
.sim-chart-grid line {
  stroke: var(--gray-200); stroke-dasharray: 2 4;
}
.sim-chart-line {
  transition: d .5s cubic-bezier(.4,0,.2,1);
}
.sim-chart-area {
  transition: d .5s cubic-bezier(.4,0,.2,1);
}
.sim-chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--gray-500); margin-top: 6px;
}

.sim-closing {
  margin: 36px auto 0; max-width: 720px;
  text-align: center;
  font-size: 16px; line-height: 2; color: var(--gray-700);
}
.sim-closing .hl {
  font-weight: 700; color: var(--gray-900);
  background: linear-gradient(transparent 62%, rgba(255,0,110,.30) 62%, rgba(255,0,110,.30) 92%, transparent 92%);
  padding: 0 4px;
}

@media (max-width: 860px) {
  .sim-body { padding: 20px; }
  .sim-grid { grid-template-columns: 1fr; gap: 28px; }
  .sim-result-num { font-size: 30px; }
  .sim-result-num.sm { font-size: 22px; }
}

/* ============================================================
   §7 Plan diagnosis quiz
   ============================================================ */
.quiz {
  margin: 0 auto 40px;
  max-width: 1100px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 12px 32px rgba(20,20,20,.04);
}
.quiz-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.quiz-q-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.quiz-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.quiz-q h3 {
  font-size: 15px; font-weight: 700; color: var(--gray-900); margin: 0;
}
.quiz-opts {
  display: grid; gap: 8px;
}
.quiz-opts button {
  text-align: left;
  font-size: 13px; line-height: 1.5; color: var(--gray-800);
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer; transition: all .15s;
  font-weight: 500;
}
.quiz-opts button:hover {
  background: #fff; border-color: var(--gray-400);
}
.quiz-opts button.is-active {
  background: #FFF1F6; border-color: var(--primary);
  color: var(--gray-900); font-weight: 600;
  box-shadow: 0 4px 12px rgba(255,0,110,.10);
}
.quiz-status {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--gray-200);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.quiz-status-text {
  font-size: 14px; color: var(--gray-500);
}
.quiz-status-text[data-state="done"] {
  color: var(--gray-900); font-weight: 600;
}
.quiz-status-text[data-state="done"] strong {
  color: var(--primary);
}
.quiz-reset {
  background: transparent; border: 1px solid var(--gray-300);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 600; color: var(--gray-700);
  cursor: pointer; transition: all .15s;
}
.quiz-reset:hover { background: var(--gray-100); border-color: var(--gray-400); }

/* plan recommend badge — hidden until quiz completes */
.plan-recommend {
  display: none;
  position: absolute;
  top: -14px; right: 16px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 6px 14px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(255,0,110,.25);
}
.plan.is-recommend .plan-recommend { display: block; }
.plan.is-recommend {
  border-color: var(--primary) !important;
  box-shadow: 0 30px 60px rgba(255,0,110,.18) !important;
  transform: translateY(-12px) scale(1.02) !important;
  z-index: 2;
}
.plans-grid.has-result .plan:not(.is-recommend) {
  opacity: .55;
  transform: scale(.98);
}
.plan { transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s, box-shadow .35s, border-color .35s; }

@media (max-width: 860px) {
  .quiz { padding: 20px; }
  .quiz-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ---- §5 simulator interactive upgrades ---- */
.sim-payback-bar { margin-top: 14px; }
.sim-payback-track {
  position: relative;
  height: 8px; background: var(--gray-200); border-radius: 999px;
  overflow: hidden;
}
.sim-payback-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #FF4D8F);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(255,0,110,.4);
}
.sim-payback-fill.over {
  background: var(--gray-400);
  box-shadow: none;
}
.sim-payback-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 10px; color: var(--gray-500);
}
.sim-3y-delta {
  margin-top: 10px;
  font-size: 11px; color: var(--gray-500);
}
.sim-3y-delta strong {
  color: var(--primary); font-weight: 800;
}
.sim-chart-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
}
.sim-chart-line.redraw {
  animation: simdraw .8s ease-out forwards;
}
@keyframes simdraw {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
.sim-break-line, .sim-break-label {
  transition: opacity .4s, transform .4s;
}
.sim-chart-dot {
  filter: drop-shadow(0 0 6px rgba(255,0,110,.5));
}

/* ---- §1 hero: legacy overrides removed; clean 16:9 illustration styles live at top of file ---- */

/* ============================================================
   §5 simulator — 36-month scenario track (replaces old chart)
   ============================================================ */
.sim-scenario {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px 20px;
}
.sim-scenario-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.sim-scenario-title {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
  letter-spacing: .02em;
}
.sim-scenario-legend {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600; color: var(--gray-600);
}
.sim-scenario-legend i {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 6px; vertical-align: -1px;
}
.leg-recovery { background: var(--gray-400); }
.leg-profit   { background: var(--primary); }

.sim-scenario-track {
  position: relative;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  margin: 44px 0 10px;
  overflow: visible;
}
.sim-scenario-track.all-recovery { background: var(--gray-400); }

.sim-track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--gray-400);
  border-radius: 8px 0 0 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.sim-track-fill.full { border-radius: 8px; }
.sim-track-recovery-label {
  font-size: 10px; font-weight: 700; color: #fff;
  letter-spacing: .2em; white-space: nowrap;
}

.sim-track-marker {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  pointer-events: none;
  transition: left .6s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}
.sim-track-marker.over { display: none; }
.sim-track-marker-line {
  position: absolute;
  left: -2px; top: -10px; bottom: -10px;
  width: 4px;
  background: var(--gray-900);
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.95);
}
.sim-track-marker-label {
  position: absolute;
  left: 50%; bottom: calc(100% + 14px);
  transform: translateX(-50%);
  background: var(--gray-900); color: #fff;
  font-size: 11px; font-weight: 600;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap; text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.sim-track-marker-label::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--gray-900);
}
.sim-payback-num {
  color: #FF85B0; font-size: 15px; font-weight: 900;
  margin-right: 2px; font-variant-numeric: tabular-nums;
}

.sim-scenario-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--gray-500);
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}

.sim-scenario-totals {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px dashed var(--gray-300);
}
.sst-cell { display: grid; gap: 5px; }
.sst-cell-out { text-align: right; }
.sst-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: .15em; color: var(--gray-500);
  text-transform: uppercase;
}
.sst-val {
  font-size: 22px; font-weight: 800;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sst-val .yen {
  font-size: 13px; font-weight: 700; margin-right: 2px;
}
.sst-cost    { color: var(--gray-700); }
.sst-benefit { color: var(--primary); }
.sst-arrow   { font-size: 18px; color: var(--gray-400); font-weight: 700; }

@media (max-width: 860px) {
  .sim-scenario { padding: 18px; }
  .sim-scenario-totals { grid-template-columns: 1fr; gap: 12px; }
  .sst-cell-out { text-align: left; }
  .sst-arrow { display: none; }
  .sst-val { font-size: 20px; }
}


/* ============================================================
   §6 Sales Dashboard (replaces old simulator inside .sim-shell)
   ============================================================ */
.dash { padding: 24px; background: #fff; }

/* KPI strip */
.dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.kpi-hot {
  background: linear-gradient(135deg, #FFF1F6, #FFE4ED);
  border-color: rgba(255,0,110,.25);
}
.kpi-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--gray-500); text-transform: uppercase;
}
.kpi-val {
  margin-top: 6px;
  font-size: 30px; font-weight: 900; color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 4px;
}
.kpi-hot .kpi-val { color: var(--primary); }
.kpi-unit { font-size: 13px; font-weight: 700; color: var(--gray-500); }
.kpi-hot .kpi-unit { color: var(--primary); }
.kpi-foot {
  margin-top: 4px;
  font-size: 11px; color: var(--gray-500);
}
.kpi-foot.kpi-up { color: var(--primary); font-weight: 600; }

/* body: list + detail */
.dash-body {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px;
}

/* LEFT: companies list */
.dash-list {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dash-list-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.dash-list-head h3 {
  font-size: 13px; font-weight: 700; color: var(--gray-900); margin: 0;
}
.dash-list-tabs {
  display: inline-flex; gap: 4px;
  background: var(--gray-100); border-radius: 999px; padding: 3px;
}
.dlt {
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  color: var(--gray-600); cursor: pointer;
  transition: all .15s;
  border: none; background: transparent;
}
.dlt:hover { color: var(--gray-900); }
.dlt.is-active { background: #fff; color: var(--gray-900); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.dash-companies { list-style: none; padding: 0; margin: 0; }
.dc-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background .15s;
}
.dc-item:last-child { border-bottom: none; }
.dc-item:hover { background: rgba(255,0,110,.03); }
.dc-item.is-active {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--primary);
}
.dc-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
}
.dc-meta { display: grid; gap: 2px; min-width: 0; }
.dc-meta strong {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-sub {
  font-size: 11px; color: var(--gray-500);
}
.dc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 999px;
  white-space: nowrap;
}
.dc-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.dc-status.hot { background: rgba(255,0,110,.12); color: var(--primary); }
.dc-status.hot .dot { background: var(--primary); animation: hr-live-pulse 1.6s ease-in-out infinite; }
.dc-status.read { background: #E6F4FF; color: #1F6FCC; }
.dc-status.read .dot { background: #2A7FE0; }
.dc-status.unread { background: var(--gray-100); color: var(--gray-500); }
.dc-status.unread .dot { background: var(--gray-400); }
.dc-last {
  font-size: 10px; color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dc-item[hidden] { display: none; }

/* RIGHT: detail panel */
.dash-detail {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: grid; gap: 18px;
  align-content: start;
}
.dd-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}
.dd-title h4 {
  font-size: 17px; font-weight: 800; color: var(--gray-900); margin: 0 0 6px;
}
.dd-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--gray-500);
}
.dd-meta-row strong { color: var(--gray-900); font-weight: 700; }
.dd-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.dd-status.hot { background: rgba(255,0,110,.12); color: var(--primary); }
.dd-status.hot .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.dd-status.read { background: #E6F4FF; color: #1F6FCC; }
.dd-status.read .dot { width: 5px; height: 5px; border-radius: 50%; background: #2A7FE0; }
.dd-status.unread { background: var(--gray-100); color: var(--gray-600); }
.dd-status.unread .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-400); }
.dd-summary {
  display: flex; gap: 18px;
  text-align: right;
}
.dd-sum {
  display: grid; gap: 2px;
}
.dd-sum-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--gray-500); text-transform: uppercase;
}
.dd-sum-val {
  font-size: 18px; font-weight: 800; color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.dd-sum-val span:last-child { font-size: 11px; color: var(--gray-500); margin-left: 2px; font-weight: 700; }
.dd-sum-val.sm { font-size: 13px; }

.dd-block h5 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--gray-500); text-transform: uppercase;
  margin: 0 0 12px;
}
.dd-pages { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.dd-pages li {
  display: grid; grid-template-columns: 110px 1fr 60px; gap: 12px;
  align-items: center;
}
.dp-name { font-size: 12px; color: var(--gray-800); font-weight: 500; }
.dd-pages li.is-hot .dp-name { color: var(--primary); font-weight: 700; }
.dp-bar { display: block; height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.dp-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #FF9EBE, var(--primary));
  border-radius: 999px;
}
.dd-pages li:not(.is-hot) .dp-fill { background: var(--gray-300); }
.dp-val {
  font-size: 11px; color: var(--gray-700); font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* timeline */
.dd-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.dd-timeline::before {
  content: "";
  position: absolute; left: 4.5px; top: 6px; bottom: 6px;
  width: 1.5px; background: var(--gray-200);
}
.dd-timeline li {
  display: grid; grid-template-columns: 12px 1fr; gap: 12px;
  padding: 6px 0;
}
.dt-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary);
  margin-top: 4px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gray-200);
  position: relative; z-index: 1;
}
.dd-timeline li:not(:first-child) .dt-dot { background: var(--gray-400); }
.dt-body {
  font-size: 12px; color: var(--gray-700); line-height: 1.6;
}
.dt-body strong { color: var(--gray-900); font-weight: 700; }
.dt-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 700;
  color: var(--primary); background: rgba(255,0,110,.08);
  padding: 2px 8px; border-radius: 999px;
}

.dd-nudge {
  background: var(--gray-900); color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  align-items: start;
}
.dd-nudge-icon { font-size: 18px; }
.dd-nudge p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.85); }
.dd-nudge strong { color: var(--primary); font-weight: 700; }

@media (max-width: 960px) {
  .dash { padding: 16px; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-body { grid-template-columns: 1fr; }
  .dd-head { grid-template-columns: 1fr; }
  .dd-summary { text-align: left; }
  .dd-pages li { grid-template-columns: 90px 1fr 50px; gap: 8px; }
  .dc-item { grid-template-columns: 32px 1fr; }
  .dc-item .dc-status, .dc-item .dc-last { grid-column: 1 / -1; }
}


/* ============================================================
   §9 About — 2-axis bio
   ============================================================ */
.bio-axis {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 16px;
}
.bio-axis-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: .2em;
  color: var(--primary); background: rgba(255,0,110,.08);
  padding: 3px 8px; border-radius: 4px;
  margin-bottom: 10px;
}
.bio-axis-h {
  font-size: 16px; font-weight: 800; color: var(--gray-900);
  margin: 0 0 10px;
}
.bio-axis p {
  font-size: 13px; line-height: 1.85; color: var(--gray-700); margin: 0;
}
.bio-axis p strong { color: var(--gray-900); font-weight: 700; }
.bio-axis-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-decoration: none;
}
.bio-axis-link:hover { text-decoration: underline; }

.bio-quote {
  margin: 24px 0 0;
  padding: 20px 22px;
  background: linear-gradient(135deg, #FFF1F6, #FFE4ED);
  border-radius: var(--radius-md);
}
.bio-quote p {
  margin: 0;
  font-size: 14px; line-height: 1.9; color: var(--gray-900); font-weight: 500;
}

/* ============================================================
   §11 Final CTA — two-action stack
   ============================================================ */
.cta-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 4px;
}


/* ============================================================
   §1 Hero v3 — Live Proposal Viewer
   ============================================================ */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Browser frame */
.hv-browser {
  width: 100%;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow:
    0 30px 60px rgba(20,20,20,.10),
    0 0 0 6px rgba(255,0,110,.05);
  overflow: hidden;
  position: relative;
}
.hv-browser-top {
  height: 30px;
  background: #FAFAFA;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px;
}
.hv-browser-top i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gray-300);
}
.hv-url {
  margin-left: 8px;
  font-size: 11px;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  color: var(--gray-600);
}
.hv-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em;
  color: var(--primary);
}
.hv-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  animation: hv-pulse 1.6s ease-in-out infinite;
}
@keyframes hv-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hv-progress {
  height: 3px;
  background: var(--gray-100);
  position: relative;
  overflow: hidden;
}
.hv-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--primary), #FF4D8F);
  animation: hv-prog 6s ease-in-out infinite;
}
@keyframes hv-prog {
  0% { width: 8%; }
  50% { width: 68%; }
  100% { width: 92%; }
}

.hv-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  min-height: 280px;
}

/* page nav */
.hv-nav {
  background: #FAFAF7;
  border-right: 1px solid var(--gray-200);
  padding: 16px 12px;
}
.hv-nav-lbl {
  display: block;
  font-size: 9px; font-weight: 800; letter-spacing: .2em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.hv-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
}
.hv-nav li {
  font-size: 11px;
  color: var(--gray-700);
  padding: 7px 10px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap;
}
.hv-nav li.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.hv-eye {
  display: inline-block;
  font-size: 9px;
  background: rgba(255,255,255,.25);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* page content */
.hv-page {
  padding: 22px 26px 24px;
  display: grid; gap: 10px;
  align-content: start;
}
.hv-page-eyebrow {
  width: 56px; height: 5px;
  background: var(--primary); border-radius: 2px;
}
.hv-page-h1 {
  height: 14px; width: 60%;
  background: var(--gray-900);
  border-radius: 3px;
}
.hv-page-sub {
  height: 6px; width: 80%;
  background: var(--gray-300);
  border-radius: 2px;
}
.hv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.hv-card {
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px;
  display: grid; gap: 7px;
}
.hv-card-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .15em;
  color: var(--gray-500);
}
.hv-card-tag.pink { color: var(--primary); }
.hv-card-price {
  height: 18px; width: 70%;
  background: var(--gray-300); border-radius: 3px;
  margin-bottom: 4px;
}
.hv-card-price.tall { height: 22px; background: var(--gray-900); }
.hv-card-line {
  height: 4px;
  background: var(--gray-300);
  border-radius: 2px;
}
.hv-card-line.w-60 { width: 60%; }
.hv-card-line.w-70 { width: 70%; }
.hv-card-line.w-80 { width: 80%; }
.hv-card-line.w-90 { width: 90%; }

.hv-card.is-watching {
  background: #fff;
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px rgba(255,0,110,.18),
    0 8px 18px rgba(255,0,110,.18);
  transform: scale(1.04);
  z-index: 2;
}
.hv-watching-ring {
  position: absolute; inset: -6px;
  border: 2px solid var(--primary);
  border-radius: 10px;
  animation: hv-ring 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hv-ring {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.04); opacity: .35; }
}
.hv-watching-tip {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: var(--gray-900); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.hv-watching-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--gray-900);
}

/* animated cursor across the page */
.hv-cursor {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
  animation: hv-cursor-move 7s ease-in-out infinite;
}
@keyframes hv-cursor-move {
  0%, 8%   { left: 22%; top: 38%; }
  20%, 35% { left: 56%; top: 70%; }
  50%, 70% { left: 56%; top: 70%; }
  85%, 100%{ left: 22%; top: 38%; }
}

/* Live-viewer toast (top-left, overlaps the browser corner) */
.hv-toast {
  position: absolute;
  top: -12px; left: -16px;
  z-index: 5;
  background: var(--gray-900);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px 11px;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    0 0 0 4px rgba(255,255,255,.4);
  animation: hv-toast-in 1s ease-out .3s both;
}
@keyframes hv-toast-in {
  from { opacity: 0; transform: translate(-8px, -8px); }
  to   { opacity: 1; transform: none; }
}
.hv-toast-icon {
  width: 26px; height: 26px;
  background: rgba(255,0,110,.18);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
}
.hv-toast-body { display: grid; gap: 3px; }
.hv-toast-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.hv-toast-row strong {
  font-weight: 700; color: #fff;
}
.hv-toast-time {
  margin-left: 4px;
  font-size: 10px; color: rgba(255,255,255,.55);
}
.hv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,0,110,.25);
  animation: hv-pulse 1.6s ease-in-out infinite;
}
.hv-toast-page {
  font-size: 11px; color: rgba(255,255,255,.75);
}
.hv-toast-page strong { color: var(--primary); font-weight: 800; }

/* Bottom-right stat / heatmap card */
.hv-stat {
  position: absolute;
  right: -12px; bottom: -12px;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 14px 11px;
  box-shadow:
    0 14px 30px rgba(20,20,20,.10),
    0 0 0 4px rgba(255,255,255,.5);
  min-width: 200px;
  animation: hv-toast-in 1s ease-out .6s both;
}
.hv-stat-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hv-stat-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  align-items: end;
  height: 48px;
}
.hv-stat-bars span {
  background: var(--gray-300);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: hv-bar 4s ease-in-out infinite;
}
.hv-stat-bars span.hot {
  background: linear-gradient(180deg, #FF4D8F, var(--primary));
  box-shadow: 0 0 0 2px rgba(255,0,110,.12);
}
@keyframes hv-bar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.85); }
}
.hv-stat-bars span:nth-child(2) { animation-delay: .2s; }
.hv-stat-bars span:nth-child(3) { animation-delay: .4s; }
.hv-stat-bars span:nth-child(4) { animation-delay: .6s; }
.hv-stat-bars span:nth-child(5) { animation-delay: .8s; }
.hv-stat-bars span:nth-child(6) { animation-delay: 1s; }
.hv-stat-foot {
  margin-top: 8px;
  font-size: 10px; color: var(--gray-700); line-height: 1.5;
}
.hv-stat-foot strong { color: var(--primary); font-weight: 800; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hv-progress-fill, .hv-cursor, .hv-watching-ring, .hv-stat-bars span, .hv-live .dot, .hv-dot { animation: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .hv-body { grid-template-columns: 92px 1fr; }
  .hv-cards { grid-template-columns: 1fr 1fr; }
  .hv-cards .hv-card:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .hv-toast { left: 8px; top: -8px; }
  .hv-stat { right: -4px; bottom: -8px; min-width: 160px; }
}


/* Inline SVG icon containers (replacing emoji) */
.hv-toast-icon svg {
  width: 14px; height: 14px;
  color: var(--primary);
}
.hv-eye svg {
  width: 11px; height: 11px;
  vertical-align: -1px;
  margin-right: 4px;
}
.dd-nudge-icon svg {
  width: 18px; height: 18px;
  color: var(--primary);
  display: block;
}

/* ============================================================
   ============================================================
   V3 — 営業資料診断 (Sales Doc Diagnosis)
   ============================================================
   ============================================================ */

/* ---- shared tokens added in V3 ---- */
:root {
  --bg-cream: #FAFAF7;
  --bg-soft: #FFF8FB;
  --prio-high-bg: #FFE5EE;
  --prio-high-fg: #C8004F;
  --prio-mid-bg:  #FFF1D6;
  --prio-mid-fg:  #B66E00;
  --prio-low-bg:  #E6F4FF;
  --prio-low-fg:  #1E6FB8;
}

/* ---- reveal animation (used by IO) ---- */
.pain-card, .dg-row, .op-block, .sf-step, .ba-col, .me-card, .pp-plan, .fit-item, .flow-item, .rc-check, .bio-axis, .faq-item {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.2,.65,.25,1), transform .6s cubic-bezier(.2,.65,.25,1);
}
.is-in {
  opacity: 1 !important; transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .pain-card, .dg-row, .op-block, .sf-step, .ba-col, .me-card, .pp-plan, .fit-item, .flow-item, .rc-check, .bio-axis, .faq-item {
    opacity: 1; transform: none;
  }
}

/* ============================================================
   Header — logo sub label
   ============================================================ */
.logo-sub {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--primary);
  background: var(--primary-50);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}
@media (max-width: 720px) {
  .logo-sub { display: none; }
}

/* ============================================================
   §1 Hero — V3 (3-metrics row + diagnosis report preview)
   ============================================================ */
.hero h1 { font-size: 38px; line-height: 1.45; }
@media (max-width: 1100px) { .hero h1 { font-size: 32px; } }
@media (max-width: 720px)  { .hero h1 { font-size: 26px; line-height: 1.5; } }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0 24px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.hm {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
}
.hm-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary);
  display: grid; place-items: center;
}
.hm-icon svg { width: 18px; height: 18px; }
.hm-body { line-height: 1.35; }
.hm-num {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
}
.hm-num strong {
  font-size: 18px; color: var(--primary); font-weight: 900;
  margin-right: 1px;
}
.hm-sub {
  font-size: 11px; color: var(--gray-600);
}
@media (max-width: 720px) {
  .hero-metrics { grid-template-columns: 1fr; padding: 10px; }
}

.hero-note {
  margin-top: 12px;
  font-size: 12px; color: var(--gray-600);
  letter-spacing: .01em;
}

/* ============================================================
   §1 Hero — Hero Image (PNG: 診断レポートビジュアル)
   ============================================================ */
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* 左カラム（H1 + sub + CTA）の高さに合わせる */
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 24px 48px rgba(20, 20, 20, .10)) drop-shadow(0 4px 10px rgba(255, 0, 110, .08));
}
@media (max-width: 1100px) {
  .hero-image { max-width: 100%; }
}
@media (max-width: 720px) {
  .hero-image { max-width: 100%; }
}

/* ============================================================
   §1 Hero — Diagnosis Report Card (preview) [legacy: now hidden]
   ============================================================ */
.report-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow:
    0 24px 48px rgba(20,20,20,.08),
    0 4px 10px rgba(20,20,20,.05);
  display: grid; gap: 16px;
  z-index: 2;
}
.report-card::before {
  content: "";
  position: absolute; inset: -14px -10px auto auto;
  width: 88%; height: 18px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0));
  z-index: -1; opacity: .8;
}
.rc-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.rc-head-icon {
  width: 32px; height: 32px;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: 8px;
  display: grid; place-items: center;
}
.rc-head-icon svg { width: 16px; height: 16px; }
.rc-head-meta { display: grid; gap: 2px; min-width: 0; }
.rc-head-title {
  font-size: 13px; font-weight: 800; color: var(--gray-900);
  letter-spacing: .01em;
}
.rc-head-sub {
  font-size: 11px; color: var(--gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: var(--primary);
  background: var(--primary-50);
  border-radius: 999px;
  padding: 4px 9px;
}
.rc-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,0,110,.25);
  animation: rc-pulse 1.6s ease-in-out infinite;
}
@keyframes rc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* legacy rc-summary (hidden — replaced by rc-score) */
.rc-summary { display: none; }

/* rc-score — combined score + summary at top */
.rc-score {
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF8FB 0%, #fff 100%);
  border: 1px solid var(--primary-50);
  border-radius: 12px;
}
.rc-score-main {
  display: grid;
  gap: 6px;
}
.rc-score-lbl {
  font-size: 10px; font-weight: 800;
  color: var(--gray-600);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rc-score-val {
  display: flex; align-items: baseline; gap: 4px;
  line-height: 1;
}
.rc-score-num {
  font-size: 36px; font-weight: 900;
  color: var(--primary);
  letter-spacing: -.02em;
}
.rc-score-deno {
  font-size: 14px; font-weight: 700;
  color: var(--gray-500);
}
.rc-score-main .rc-stars-row .star { width: 16px; height: 16px; }

.rc-score-side {
  display: flex; flex-direction: column;
  gap: 8px;
}
.rc-score-stat {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  min-width: 120px;
}
.rc-score-stat.is-hot {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.rc-score-stat-num {
  font-size: 18px; font-weight: 900;
  color: var(--gray-900);
  line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.rc-score-stat.is-hot .rc-score-stat-num { color: #fff; }
.rc-score-stat-unit {
  font-size: 10px; font-weight: 700;
  color: var(--gray-600);
  margin-left: 1px;
}
.rc-score-stat.is-hot .rc-score-stat-unit { color: rgba(255,255,255,.85); }
.rc-score-stat-lbl {
  grid-row: 2; grid-column: 1 / -1;
  font-size: 10px; font-weight: 700;
  color: var(--gray-600);
  letter-spacing: .04em;
}
.rc-score-stat.is-hot .rc-score-stat-lbl { color: rgba(255,255,255,.9); }

@media (max-width: 720px) {
  .rc-score {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rc-score-main { justify-items: center; }
  .rc-score-val { justify-content: center; }
  .rc-score-side { flex-direction: row; justify-content: center; }
}

/* hide old foot rc-stars since now we show the rating in rc-score */
.rc-foot { display: none; }

.rc-section-head { margin-bottom: 8px; }
.rc-section-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.rc-checks {
  list-style: none;
  display: grid; gap: 6px;
}
.rc-check {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
}
.rc-c-num {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--gray-500);
}
.rc-c-body {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
  line-height: 1.5;
}
.rc-c-badge {
  font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.bg-high { background: var(--prio-high-bg); color: var(--prio-high-fg); }
.bg-mid  { background: var(--prio-mid-bg);  color: var(--prio-mid-fg); }
.bg-low  { background: var(--prio-low-bg);  color: var(--prio-low-fg); }

.rc-foot {
  display: flex; justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}
.rc-stars {
  display: inline-flex; align-items: center; gap: 8px;
}
.rc-stars-lbl {
  font-size: 11px; font-weight: 700; color: var(--gray-600);
}
.rc-stars-row {
  display: inline-flex; gap: 2px;
}
.rc-stars-row .star {
  width: 16px; height: 16px;
  color: var(--gray-300);
}
.rc-stars-row .star.is-full { color: #F5BC2A; }
.rc-stars-row .star.is-half {
  color: #F5BC2A;
  -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%);
          mask: linear-gradient(90deg, #000 50%, transparent 50%);
}
.rc-stars-num {
  font-size: 14px; font-weight: 800; color: var(--gray-900);
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: auto; }
  .hero-right { min-height: auto; }
}
@media (max-width: 720px) {
  .rc-summary { grid-template-columns: 1fr 1fr; }
  .rc-summary .rc-sum-item:nth-child(3) { grid-column: 1 / -1; }
}

/* ============================================================
   §2 Problem — uses existing .pain-* styles
   ============================================================ */

/* ============================================================
   §3 Diagnosis — 5 checks table
   ============================================================ */
.diagnosis {
  padding: 96px 0;
  background: var(--bg-cream);
}
.dg-table {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dg-row {
  display: grid;
  grid-template-columns: 64px 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--gray-100);
}
.dg-row:last-child { border-bottom: none; }
.dg-head-row {
  background: var(--gray-50);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--gray-500);
  text-transform: uppercase;
  padding: 12px 22px;
}
.dg-col-num {
  font-family: "Noto Sans JP";
  font-size: 14px; font-weight: 800;
  color: var(--primary);
  letter-spacing: .04em;
}
.dg-head-row .dg-col-num { color: var(--gray-500); }
.dg-col-body {
  display: grid; gap: 4px;
  font-size: 15px; font-weight: 600; color: var(--gray-900);
  line-height: 1.65;
}
.dg-col-body strong { font-weight: 800; }
.dg-hint {
  font-size: 12px; font-weight: 500;
  color: var(--gray-600);
  line-height: 1.6;
}
.dg-col-prio { text-align: right; }
.prio {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.prio-high { background: var(--prio-high-bg); color: var(--prio-high-fg); }
.prio-mid  { background: var(--prio-mid-bg);  color: var(--prio-mid-fg); }
.prio-low  { background: var(--prio-low-bg);  color: var(--prio-low-fg); }
.dg-note {
  max-width: 920px;
  margin: 16px auto 0;
  font-size: 12px; color: var(--gray-600);
  text-align: center;
}
.dg-note strong { font-weight: 700; color: var(--gray-900); }

@media (max-width: 720px) {
  .diagnosis { padding: 64px 0; }
  .dg-row { grid-template-columns: 40px 1fr 64px; gap: 10px; padding: 14px 14px; }
  .dg-head-row { padding: 10px 14px; }
  .dg-col-body { font-size: 13px; }
  .dg-hint { font-size: 11px; }
  .prio { font-size: 11px; padding: 4px 10px; }
}

/* ============================================================
   §4 Output — diagnosis paper + side info
   ============================================================ */
.output {
  padding: 96px 0;
}
.op-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.op-paper {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.op-paper::before {
  content: "";
  position: absolute;
  inset: -8px -8px auto auto;
  width: 50px; height: 50px;
  background: var(--primary);
  border-radius: 50%;
  opacity: .08;
  filter: blur(8px);
  pointer-events: none;
}
.op-paper-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-100);
  margin-bottom: 20px;
}
.op-paper-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800;
  color: var(--primary);
  background: var(--primary-50);
  padding: 6px 12px;
  border-radius: 999px;
}
.op-paper-tag svg { width: 14px; height: 14px; }

/* 実物レポート iframe 埋め込み（.op-paper-live） */
.op-paper-live { padding: 18px 18px 14px; }
.op-paper-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.op-paper-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.op-paper-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gray-200);
}
.op-paper-foot-hint {
  font-size: 12px;
  color: var(--gray-500);
}
.op-paper-foot-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 13px/1 "Noto Sans JP", sans-serif;
  color: var(--primary);
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 2px;
  transition: gap .2s, border-color .2s;
}
.op-paper-foot-cta:hover { gap: 8px; border-color: var(--primary); }
.op-paper-foot-cta svg { width: 13px; height: 13px; }

/* op-paper-live の場合は op-grid を 1 列にして iframe を最大化、
   下段の op-right は points → CTA を縦並びで全幅表示にする */
.op-grid:has(.op-paper-live) {
  grid-template-columns: 1fr;
  max-width: 1080px;
}
.op-grid:has(.op-paper-live) > .op-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}
/* points を横一列の 2 カラム化（情報量はそのまま、縦方向を圧縮） */
.op-grid:has(.op-paper-live) .op-bul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 12px;
}
@media (max-width: 760px) {
  .op-grid:has(.op-paper-live) .op-bul { grid-template-columns: 1fr; }
}

/* CTA バナー：サイト標準のダーク（var(--gray-900)）に揃える、強調版
   ─ 全セレクタを .op-cta.op-cta-banner（特異度 0,2,0）で書き、
     後段の .op-cta デフォルトを source order に依存せず上書き。 */
.op-cta.op-cta-banner {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.op-cta.op-cta-banner::before {
  content: "";
  position: absolute;
  inset: -50% -15% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle at center, rgba(255,0,110,.28) 0%, transparent 65%);
  pointer-events: none;
}
.op-cta.op-cta-banner .op-cta-lead {
  font-size: 18px; font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  position: relative;
  text-align: center;
}
.op-cta.op-cta-banner .op-cta-lead strong { color: var(--primary); }
.op-cta.op-cta-banner .btn-primary {
  position: relative;
  width: auto;
}
.op-cta.op-cta-banner .op-cta-meta {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  position: relative;
}

.op-paper-meta {
  font-size: 11px; color: var(--gray-500); font-weight: 600;
  letter-spacing: .04em;
}

.op-block {
  padding: 16px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.op-block:last-of-type { border-bottom: none; }
.op-block-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.op-block-num {
  font-size: 11px; font-weight: 800;
  color: var(--primary);
  background: var(--primary-50);
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  letter-spacing: .02em;
}
.op-block-h {
  font-size: 15px; font-weight: 800; color: var(--gray-900);
  display: inline-flex; align-items: center; gap: 8px;
}
.op-block-p {
  font-size: 13px; color: var(--gray-700); line-height: 1.85;
  margin-bottom: 6px;
}
.op-block-p strong { color: var(--gray-900); font-weight: 700; }
.op-block-effect {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  background: linear-gradient(90deg, rgba(255,0,110,.07), rgba(255,0,110,0));
  padding: 6px 12px;
  border-radius: 6px;
  margin-top: 4px;
}
.op-effect-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.op-block-effect strong {
  color: var(--primary); font-weight: 900; font-size: 14px;
}

/* legacy in-paper next (no longer used) */
.op-paper-next { display: none; }
.op-next-lbl { display: none; }

/* op-next-section — independent block after op-grid */
.op-next-section {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 44px 36px 36px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border: 1px solid var(--primary-50);
  border-radius: var(--radius-lg);
  position: relative;
}
.op-next-section::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 4px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
}
.op-next-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 32px;
}
.op-next-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--primary-50);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.op-next-h2 {
  font-size: 28px; font-weight: 900;
  color: var(--gray-900);
  line-height: 1.5;
  margin-bottom: 14px;
  letter-spacing: .005em;
}
.op-next-h2 .accent {
  color: var(--primary);
  position: relative;
}
.op-next-h2 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: rgba(255,0,110,.18);
  border-radius: 4px;
  z-index: -1;
}
.op-next-lead {
  font-size: 17px; color: var(--gray-700);
  line-height: 1.9;
}
@media (max-width: 1100px) {
  .op-next-h2 { font-size: 24px; }
}
@media (max-width: 720px) {
  .op-next-section { padding: 32px 22px 26px; }
  .op-next-h2 { font-size: 21px; }
  .op-next-lead { font-size: 15px; }
}

/* 3 cards + arrows */
.op-next-cards {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  gap: 12px;
  align-items: stretch;
}
.op-next-card {
  background: #fff;
  border: 1px solid var(--primary-50);
  border-radius: 12px;
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.op-next-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.op-next-illust {
  background: var(--bg-cream);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 8px;
  overflow: hidden;
}
.op-next-illust svg {
  display: block;
  width: 100%;
  height: auto;
}
.op-next-tag {
  display: inline-block;
  font-size: 12px; font-weight: 900;
  letter-spacing: .04em;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 10px;
  white-space: nowrap;
}
.op-next-h {
  font-size: 15px; font-weight: 800;
  color: var(--gray-900);
  line-height: 1.7;
  margin: 0 0 12px;
  flex: 1;
  letter-spacing: .005em;
}
.op-next-meta {
  font-size: 13px; font-weight: 800;
  color: var(--primary);
  letter-spacing: .01em;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}
.op-next-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.op-next-arrow svg {
  filter: drop-shadow(0 2px 4px rgba(255,0,110,.2));
}

@media (max-width: 900px) {
  .op-next-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .op-next-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}
@media (max-width: 720px) {
  .op-next-card { padding: 14px 16px 16px; }
  .op-next-h { font-size: 14px; }
  .op-next-meta { font-size: 12px; }
}

.op-right {
  display: grid; gap: 20px;
  position: sticky; top: 100px;
}
.op-points {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
}
.op-points-h {
  font-size: 16px; font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 14px;
}
.op-bul {
  list-style: none;
  display: grid; gap: 10px;
}
.op-bul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px; color: var(--gray-800);
  line-height: 1.7;
}
.op-bul li svg {
  color: var(--primary);
  margin-top: 4px;
}

/* 評価ラベル（合格 / 要注意 / 要改善）── ブランド統一のシンプルな強調 */
.ev-lab {
  font-weight: 700;
  color: var(--gray-900);
}

/* op-sample: サンプルレポートへの導線（op-points と op-cta の間） */
.op-sample {
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(255,0,110,.10);
  transition: transform .2s, box-shadow .2s;
}
.op-sample:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255,0,110,.15);
}
.op-sample-link {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: var(--gray-900);
}
.op-sample-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary);
  display: grid; place-items: center;
}
.op-sample-body {
  display: grid; gap: 2px;
  min-width: 0;
}
.op-sample-lbl {
  font-size: 13px; font-weight: 800;
  color: var(--gray-900);
  letter-spacing: .01em;
}
.op-sample-sub {
  font-size: 11px;
  color: var(--gray-600);
  font-weight: 500;
}
.op-sample-arrow {
  color: var(--primary);
}

.op-cta {
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.op-cta-lead {
  font-size: 14px; font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.6;
}
.op-cta .btn { width: 100%; justify-content: center; }
.op-cta-meta {
  margin-top: 10px;
  font-size: 11px; color: rgba(255,255,255,.65);
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-right { position: static; }
}

/* ============================================================
   §5 Steps Flow — 5-step pipeline
   ============================================================ */
.steps-flow {
  padding: 96px 0;
  background: var(--bg-cream);
}
.sf-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.sf-step {
  flex: 1 1 0;
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 14px 16px;
  text-align: center;
  min-width: 0;
  transition: transform .2s, box-shadow .2s;
}
.sf-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sf-step.is-free {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.sf-step-num {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.sf-step-num strong {
  font-size: 18px; font-weight: 900;
  color: var(--primary);
  letter-spacing: .02em;
  margin-left: 3px;
}
.sf-step.is-free .sf-step-num,
.sf-step.is-free .sf-step-num strong {
  color: rgba(255,255,255,.85);
}
.sf-step.is-free .sf-step-num strong { color: #fff; }
.sf-step-tag {
  font-size: 11px; font-weight: 800;
  color: var(--primary);
  background: var(--primary-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 6px auto 10px;
  letter-spacing: .04em;
  display: inline-block;
}
.sf-step.is-free .sf-step-tag {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.sf-step-h {
  font-size: 13px; font-weight: 800;
  line-height: 1.55;
  color: var(--gray-900);
  margin: 0 0 12px;
  min-height: 60px;
}
.sf-step.is-free .sf-step-h { color: #fff; }
.sf-step-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--primary);
  display: grid; place-items: center;
  margin: 0 auto 12px;
}
.sf-step.is-free .sf-step-icon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.sf-step-price {
  font-size: 13px; font-weight: 800;
  color: var(--gray-900);
  margin-top: auto;
  letter-spacing: .01em;
}
.sf-step.is-free .sf-step-price {
  color: #fff;
}

.sf-arrow {
  align-self: center;
  flex: 0 0 22px;
  color: var(--gray-400);
  display: flex; align-items: center; justify-content: center;
}
.sf-arrow svg { width: 22px; height: 22px; }

.sf-bound {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  max-width: 900px;
}
.sf-bound-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}
.sf-bound-pill {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  white-space: nowrap;
}
.sf-bound-pill.ghost {
  background: #fff;
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
}

@media (max-width: 1100px) {
  .sf-list { flex-wrap: wrap; gap: 12px; }
  .sf-step { flex: 1 1 calc(50% - 12px); }
  .sf-arrow { display: none; }
}
@media (max-width: 720px) {
  .steps-flow { padding: 64px 0; }
  .sf-step { flex: 1 1 100%; }
  .sf-step-h { min-height: 0; }
}

/* ============================================================
   §6 Before / After
   ============================================================ */
.ba-section {
  padding: 96px 0;
}
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.ba-col {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
}
.ba-before { background: var(--gray-50); }
.ba-after {
  background: linear-gradient(180deg, #FFF8FB, #FFFFFF);
  border-color: var(--primary-50);
  box-shadow: 0 8px 24px rgba(255,0,110,.08);
}
.ba-col-head { margin-bottom: 20px; }
.ba-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ba-tag-after {
  background: var(--primary);
  color: #fff;
}
.ba-col-h {
  font-size: 20px; font-weight: 900;
  color: var(--gray-900);
  line-height: 1.5;
}
.ba-after .ba-col-h { color: var(--primary); }

.ba-flow {
  list-style: none;
  display: grid;
  gap: 6px;
}
.ba-flow li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.ba-before .ba-flow li {
  background: rgba(255,255,255,.7);
}
.ba-flow li.ba-arr {
  background: none;
  border: none;
  padding: 0;
  grid-template-columns: 1fr;
  justify-content: center;
  color: var(--gray-400);
  height: 14px;
}
.ba-after .ba-flow li.ba-arr { color: var(--primary); }
.ba-flow li.ba-arr svg {
  margin: 0 auto;
}
.ba-num {
  font-size: 12px; font-weight: 800;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 6px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  letter-spacing: .02em;
}
.ba-after .ba-num {
  color: var(--primary);
  background: var(--primary-50);
}
.ba-body {
  font-size: 14px; font-weight: 700; color: var(--gray-800);
  line-height: 1.6;
}
.ba-end {
  background: var(--gray-200) !important;
  border-color: var(--gray-300) !important;
}
.ba-end-after {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-glow);
}
.ba-end .ba-body { color: var(--gray-700); }
.ba-end-after .ba-body { color: #fff; font-weight: 800; }
.ba-end-num {
  background: #fff !important;
  color: var(--gray-700) !important;
}
.ba-end-after .ba-end-num {
  background: #fff !important;
  color: var(--primary) !important;
}
.ba-end-after .ba-end-num svg { color: var(--primary); }

.ba-foot {
  max-width: 900px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px; color: var(--gray-700);
  line-height: 1.85;
}

@media (max-width: 720px) {
  .ba-section { padding: 64px 0; }
  .ba-grid { grid-template-columns: 1fr; gap: 16px; }
  .ba-col { padding: 22px 18px; }
  .ba-col-h { font-size: 17px; }
  .ba-body { font-size: 13px; }
}

/* ============================================================
   §7 Metrics — 4 big numbers
   ============================================================ */
.metrics {
  padding: 96px 0;
  background: var(--gray-900);
  color: #fff;
}
.metrics .section-eyebrow { color: rgba(255,255,255,.55); }
.metrics .section-title { color: #fff; }
.metrics .section-title .accent { color: var(--primary); }
.metrics .section-title .accent::after { display: none; }

.me-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.me-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  text-align: center;
  transition: transform .2s, background .2s;
}
.me-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
}
.me-card-hot {
  background: rgba(255,0,110,.12);
  border-color: rgba(255,0,110,.32);
  box-shadow: 0 0 32px rgba(255,0,110,.18);
}
.me-key {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.me-val {
  font-size: 44px; font-weight: 900;
  color: #fff;
  line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.me-val .me-num { color: var(--primary); }
.me-unit-pre {
  font-size: 24px; color: var(--primary); font-weight: 800;
  margin-right: 2px;
}
.me-unit {
  font-size: 16px; color: #fff;
  font-weight: 800;
  margin-left: 6px;
}
.me-val-text { font-size: 36px; }
.me-num-text { color: #fff; }
.me-sub {
  font-size: 12px; color: rgba(255,255,255,.7);
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .me-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .metrics { padding: 64px 0; }
  .me-grid { gap: 12px; }
  .me-val { font-size: 36px; }
}

/* ============================================================
   §8 Pricing — Free / Starter / Growth
   ============================================================ */
.pricing {
  padding: 96px 0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.pp-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.pp-plan:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pp-featured {
  background: linear-gradient(180deg, #FFF8FB, #FFFFFF);
  border-color: var(--primary);
  box-shadow:
    0 0 0 4px rgba(255,0,110,.08),
    var(--shadow-lg);
  transform: translateY(-6px);
}
.pp-ribbon {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-glow);
}
.pp-name {
  font-size: 22px; font-weight: 900;
  color: var(--gray-900);
  letter-spacing: .02em;
}
.pp-featured .pp-name { color: var(--primary); }
.pp-tag {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .04em;
  margin: 4px 0 16px;
}
.pp-price {
  font-size: 30px; font-weight: 900;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.pp-price-pre {
  font-size: 18px;
  vertical-align: 4px;
  margin-right: 2px;
}
.pp-price-num { font-size: inherit; }
.pp-price-suf {
  font-size: 18px; font-weight: 700;
  color: var(--gray-600);
  margin-left: 4px;
}
.pp-lead {
  font-size: 13px; font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 18px;
  line-height: 1.6;
}
.pp-features {
  list-style: none;
  display: grid; gap: 10px;
  margin-bottom: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.pp-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px; color: var(--gray-800);
  line-height: 1.65;
}
.pp-features li svg {
  color: var(--primary);
  margin-top: 3px;
}
.pp-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.pp-note {
  max-width: 800px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 12px; color: var(--gray-600);
  line-height: 1.85;
}
.pp-note strong { color: var(--primary); font-weight: 800; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pp-featured { transform: none; }
}
@media (max-width: 720px) {
  .pricing { padding: 64px 0; }
}

/* ============================================================
   §9 Fit
   ============================================================ */
.fit {
  padding: 96px 0;
  background: var(--bg-cream);
}
.fit-list {
  list-style: none;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fit-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.7;
  transition: transform .15s, border-color .15s;
}
.fit-item:hover {
  transform: translateX(2px);
  border-color: var(--primary-50);
}
.fit-check {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--primary-50);
  color: var(--primary);
  display: grid; place-items: center;
}
.fit-body strong { font-weight: 800; color: var(--gray-900); }

/* §4 Output の .op-cta-banner と同じダーク基調に揃える */
.fit-judge {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 36px 32px;
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.fit-judge::before {
  content: "";
  position: absolute;
  inset: -50% -15% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle at center, rgba(255,0,110,.28) 0%, transparent 65%);
  pointer-events: none;
}
.fit-judge p {
  font-size: 16px; color: #fff;
  line-height: 1.85;
  margin-bottom: 18px;
  position: relative;
}
.fit-judge p strong {
  color: var(--primary);
  font-weight: 900;
}
.fit-judge .btn {
  position: relative;
}
.m-only { display: none; }

@media (max-width: 720px) {
  .fit { padding: 64px 0; }
  .fit-list { grid-template-columns: 1fr; }
  .fit-item { font-size: 13px; }
  .m-only { display: inline; }
}

/* ============================================================
   §10 Flow — 5 application steps
   ============================================================ */
.flow {
  padding: 96px 0;
}
.flow-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  counter-reset: flowstep;
}
.flow-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 22px 18px 20px;
  text-align: center;
}
.flow-item.flow-opt {
  background: var(--gray-50);
}
.flow-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px; font-weight: 900;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  box-shadow: var(--shadow-glow);
}
.flow-item.flow-opt .flow-num {
  background: var(--gray-400);
  box-shadow: none;
}
.flow-h {
  font-size: 13px; font-weight: 800;
  color: var(--gray-900);
  line-height: 1.5;
  margin-bottom: 8px;
  min-height: 42px;
}
.flow-p {
  font-size: 12px; color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: 10px;
}
.flow-meta {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  color: var(--primary);
  background: var(--primary-50);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.flow-item.flow-opt .flow-meta {
  color: var(--gray-600);
  background: var(--gray-200);
}

.flow-bound {
  display: flex; justify-content: center;
  margin-top: 24px;
}
.flow-bound-pill {
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

@media (max-width: 1100px) {
  .flow-list { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .flow { padding: 64px 0; }
  .flow-list { grid-template-columns: 1fr; }
  .flow-h { min-height: 0; }
}

/* ============================================================
   §13 Form — V3 enhancements (file upload + 2-column)
   ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
.field-help {
  margin-top: 6px;
  font-size: 11px; color: var(--gray-600);
  line-height: 1.6;
}
.form-meta {
  margin-top: 12px;
  font-size: 13px; color: var(--gray-600);
  text-align: center;
  line-height: 1.6;
}
.form-meta strong { color: var(--primary); font-weight: 800; }

/* ============================================================
   Submission modal — full-page semi-transparent backdrop
   - loading / success / error の 3 状態
   - 背後をブロックして誤再送信を防ぐ
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modalFade 0.18s ease-out;
}
.modal-backdrop[hidden] { display: none !important; }
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 44px 32px 32px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  animation: modalSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes modalSlide {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-h {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
  color: var(--gray-900, #1a1a1a);
}
.modal-lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-700, #444);
  margin: 0 0 12px;
}
.modal-lead strong { color: var(--primary, #ff006e); font-weight: 700; }
.modal-email {
  display: inline-block;
  background: var(--gray-50, #f7f7f8);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--mono, monospace);
  font-size: 14px;
  color: var(--gray-900, #1a1a1a);
  word-break: break-all;
}
.modal-sub {
  font-size: 14px;
  color: var(--gray-600, #666);
  margin: 8px 0 0;
  line-height: 1.7;
  white-space: pre-line; /* JS 側で \n 改行を活かす */
}
.modal-foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--gray-500, #888);
  line-height: 1.7;
}
.modal-foot a { color: var(--primary, #ff006e); text-decoration: underline; }

/* Spinner */
.modal-spinner {
  display: inline-flex;
  width: 56px;
  height: 56px;
  color: var(--primary, #ff006e);
  margin: 0 auto 16px;
  animation: modalSpin 1.1s linear infinite;
}
@keyframes modalSpin {
  to { transform: rotate(360deg); }
}

/* Status icons */
.modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto 14px;
}
.modal-icon-ok { color: var(--primary, #ff006e); }
.modal-icon-error { color: #d11; }

/* Error message detail */
.modal-err-detail {
  background: #fef2f4;
  border-left: 3px solid #d11;
  padding: 12px 16px;
  margin: 14px 0 0;
  font-size: 13px;
  color: #b00;
  text-align: left;
  border-radius: 4px;
  font-family: var(--mono, monospace);
  word-break: break-word;
  line-height: 1.6;
}

/* Action button at bottom of modal */
.modal-btn {
  margin-top: 24px;
  min-width: 160px;
}

/* ---------- privacy consent checkbox ---------- */
.field-consent {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.consent-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-800);
  user-select: none;
  padding: 12px 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.consent-check:hover {
  border-color: var(--primary-50);
  background: var(--bg-soft);
}
.consent-check input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.consent-box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--gray-400);
  border-radius: 6px;
  background: #fff;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.consent-box svg {
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .2s;
}
.consent-check input[type="checkbox"]:checked + .consent-box {
  background: var(--primary);
  border-color: var(--primary);
}
.consent-check input[type="checkbox"]:checked + .consent-box svg {
  opacity: 1;
  transform: scale(1);
}
.consent-check input[type="checkbox"]:focus-visible + .consent-box {
  box-shadow: 0 0 0 3px rgba(255,0,110,.25);
}
.consent-text a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 700;
}
.consent-text a:hover { color: var(--primary-hover); }

/* ---------- form actions: center + meta below button ---------- */
.form-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.form-actions .btn {
  min-width: 280px;
  justify-content: center;
}
@media (max-width: 720px) {
  .form-actions .btn { min-width: 0; width: 100%; }
  .consent-check { font-size: 13px; padding: 10px 14px; }
}

.file-field input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-drop {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  transition: border-color .15s, background .15s;
}
.file-drop.is-over {
  border-color: var(--primary);
  background: var(--primary-50);
}
.file-drop.has-file {
  border-style: solid;
  border-color: var(--primary);
  background: #fff;
}
.file-drop-inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
}
.file-drop-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.file-drop-main {
  font-size: 14px; font-weight: 700;
  color: var(--gray-900);
}
.file-drop-sub {
  font-size: 11px; color: var(--gray-600);
}

/* ============================================================
   Section default paddings (ensure consistent rhythm)
   ============================================================ */
.empathy { padding: 96px 0; }
@media (max-width: 720px) {
  .empathy { padding: 64px 0; }
}

/* ============================================================
   ============================================================
   V3 REFINEMENT — round 2
   ============================================================
   ============================================================ */

/* ---- Global text bump (+2px on reading copy) ---- */
.hero-sub      { font-size: 17px; line-height: 1.9; }
.section-sub   { font-size: 17px; line-height: 1.9; }
.pain-d        { font-size: 16px; line-height: 1.85; }
.dg-card-p     { font-size: 15px; }
.dg-hint       { font-size: 14px; }
.op-block-p    { font-size: 15px; line-height: 1.9; }
.op-bul li     { font-size: 15px; }
.ba-step-body  { font-size: 14px; line-height: 1.6; }
.ba-foot       { font-size: 16px; line-height: 1.95; }
.ba-col-sub    { font-size: 14px; line-height: 1.75; color: var(--gray-600); margin-top: 6px; }
.me-sub        { font-size: 14px; }
.pp-features li { font-size: 15px; }
.pp-lead       { font-size: 15px; }
.fit-item      { font-size: 16px; }
.flow-p        { font-size: 14px; }
.flow-h        { font-size: 15px; }
.faq-item summary span:not(.q):not(.chev) { font-size: 16px; }
.faq-item .a   { font-size: 15px; line-height: 1.95; }
.bio-axis p    { font-size: 15px; line-height: 1.95; }
.dg-note       { font-size: 14px; line-height: 1.85; }
.pp-note       { font-size: 14px; line-height: 1.95; }
.hero-note     { font-size: 14px; }

/* ============================================================
   §1 Hero — report card: progress bar + new check rows
   ============================================================ */
.rc-progress {
  display: grid; gap: 6px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: 10px;
  margin-bottom: 4px;
}
.rc-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.rc-progress-lbl {
  font-size: 11px; font-weight: 700;
  color: var(--gray-700);
  letter-spacing: .04em;
}
.rc-progress-pct {
  font-size: 14px; font-weight: 900;
  color: var(--primary);
  letter-spacing: -.01em;
}
.rc-progress-bar {
  position: relative;
  height: 6px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
}
.rc-progress-fill {
  position: absolute; inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--primary), #FF4D8F);
  border-radius: 99px;
  animation: rc-prog-fill 1.6s cubic-bezier(.2,.65,.25,1) .2s forwards;
}
@keyframes rc-prog-fill {
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-progress-fill { animation: none; width: 100%; }
}

/* rc-check — simplified layout (icon + body + priority badge) */
.rc-checks { gap: 8px; display: grid; list-style: none; }
.rc-check {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}
.rc-check:hover {
  transform: translateX(3px);
  border-color: var(--primary-50);
  box-shadow: 0 6px 18px rgba(255,0,110,.10);
}
.rc-c-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary-50), #fff);
  color: var(--primary);
  display: grid; place-items: center;
  transition: transform .25s ease-out, background .25s ease-out;
}
.rc-check:hover .rc-c-icon {
  background: var(--primary);
  color: #fff;
  transform: rotate(-6deg) scale(1.08);
}
.rc-c-icon svg { width: 18px; height: 18px; transition: transform .25s ease-out; }
.rc-check:hover .rc-c-icon svg { transform: rotate(6deg); }

.rc-c-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.4;
}
.rc-c-name {
  font-size: 13px; font-weight: 800;
  color: var(--gray-900);
}
.rc-c-sub {
  font-size: 11px; font-weight: 500;
  color: var(--gray-600);
}
.rc-c-done { display: none; }

/* 次の打ち手2軸の注記（Heroレポートカード末尾） */
.rc-future-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 11px;
  color: var(--gray-700);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.55;
  border: 1px dashed var(--gray-300);
}
.rc-future-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--primary-50);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   §3 Diagnosis — card grid (new design)
   ============================================================ */
.dg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- 5軸の診断（5枚のカードを 3+2 レイアウトで配置） ---- */
.dg-tier {
  max-width: 1080px;
  margin: 0 auto;
}

/* dg-cards-5: 6カラム基準で 1段目=3枚×2col、2段目=2枚×3col の左右均等レイアウト */
.dg-cards-5 {
  grid-template-columns: repeat(6, 1fr);
}
.dg-cards-5 .dg-card {
  grid-column: span 2;
}
.dg-cards-5 .dg-card:nth-child(n+4) {
  grid-column: span 3;
}

@media (max-width: 960px) {
  .dg-cards-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-cards-5 .dg-card,
  .dg-cards-5 .dg-card:nth-child(n+4) {
    grid-column: auto;
  }
  /* 5枚目（奇数）を中央寄せに */
  .dg-cards-5 .dg-card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 8px);
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .dg-cards-5 {
    grid-template-columns: 1fr;
  }
  .dg-cards-5 .dg-card:nth-child(5) {
    max-width: none;
  }
}
.dg-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-50);
}
.dg-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(255,0,110,.06), transparent 70%);
  pointer-events: none;
}
.dg-card { padding-top: 0; overflow: hidden; }
.dg-card-illust {
  margin: 0 -22px 16px;
  height: 156px;
  background: linear-gradient(180deg, #FFF8FB 0%, #fff 100%);
  border-bottom: 1px solid var(--gray-100);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.dg-card-illust svg {
  width: 92%;
  height: auto;
  max-height: 140px;
  position: relative; z-index: 1;
}
.dg-card-illust::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,0,110,.06), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255,0,110,.04), transparent 40%);
  pointer-events: none;
}

/* hide old icon-based design */
.dg-card-icon { display: none; }
.dg-icon-pulse { display: none; }

.dg-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  padding-top: 22px;
}
.dg-card:first-child .dg-card-head { padding-top: 0; }
.dg-card .dg-card-head { padding-top: 0; }
.dg-card-num {
  font-size: 12px; font-weight: 900;
  color: var(--primary);
  letter-spacing: .14em;
  background: var(--primary-50);
  padding: 4px 9px;
  border-radius: 6px;
}
.dg-card-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-50), #fff);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.dg-card.is-in .dg-card-icon svg {
  animation: dg-icon-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dg-icon-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dg-icon-pulse {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: var(--primary);
  opacity: 0;
}
.dg-card.is-in .dg-icon-pulse {
  animation: dg-pulse-ring 1.4s ease-out .6s;
}
@keyframes dg-pulse-ring {
  0%   { opacity: .3; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-card.is-in .dg-card-icon svg,
  .dg-card.is-in .dg-icon-pulse { animation: none; }
}

.dg-card-h {
  font-size: 17px; font-weight: 800;
  color: var(--gray-900);
  line-height: 1.55;
  margin-bottom: 10px;
}
.dg-card-p {
  color: var(--gray-700); line-height: 1.85;
  margin-bottom: 18px;
  flex: 1;
}
.dg-card-meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.dg-meter-lbl {
  font-size: 11px; font-weight: 700;
  color: var(--gray-600);
  letter-spacing: .04em;
}
.dg-meter-bar {
  position: relative;
  height: 6px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.dg-meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--primary), #FF6FA3);
  border-radius: 99px;
  transition: width 1.1s cubic-bezier(.2,.65,.25,1) .25s;
}
.dg-card.is-in .dg-meter-fill {
  width: var(--w, 60%);
}
.dg-meter-val {
  font-size: 12px; font-weight: 800;
  color: var(--primary);
  letter-spacing: .02em;
}

@media (max-width: 980px) {
  .dg-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dg-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   §5 Steps — minimal version (.sf-mini override)
   ============================================================ */
.sf-mini {
  align-items: stretch;
  gap: 6px;
}
.sf-mini .sf-step {
  padding: 18px 12px 16px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 8px;
  min-height: 168px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.sf-mini .sf-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sf-mini .sf-step.is-free {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.sf-mini .sf-step-num {
  font-size: 11px; font-weight: 900;
  color: var(--gray-500);
  letter-spacing: .14em;
  margin: 0;
}
.sf-mini .sf-step.is-free .sf-step-num { color: rgba(255,255,255,.8); }
.sf-mini .sf-step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--primary-50);
  color: var(--primary);
  display: grid; place-items: center;
  margin: 0;
}
.sf-mini .sf-step.is-free .sf-step-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.sf-mini .sf-step-tag {
  font-size: 13px; font-weight: 800;
  color: var(--gray-900);
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0;
  letter-spacing: .01em;
  line-height: 1.4;
}
.sf-mini .sf-step.is-free .sf-step-tag { color: #fff; }
.sf-mini .sf-step-price {
  font-size: 12px; font-weight: 800;
  color: var(--primary);
  letter-spacing: .01em;
  margin: 0;
  align-self: end;
}
.sf-mini .sf-step.is-free .sf-step-price { color: #fff; }
.sf-mini .sf-arrow {
  flex: 0 0 16px;
  color: var(--gray-300);
}
.sf-mini .sf-arrow svg { width: 16px; height: 16px; }

@media (max-width: 980px) {
  .sf-mini { flex-wrap: wrap; }
  .sf-mini .sf-step { flex: 1 1 calc(33.33% - 8px); min-height: 150px; }
  .sf-mini .sf-arrow { display: none; }
}
@media (max-width: 600px) {
  .sf-mini .sf-step { flex: 1 1 calc(50% - 6px); }
}

/* ============================================================
   §5 Steps — Roadmap band design
   ============================================================ */
.roadmap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 0;
}
.rm-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
/* 帯（横一本のグラデーションライン） */
.rm-list::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--primary) 0%,
    var(--primary) 20%,
    #FF6FA3 50%,
    var(--gray-300) 100%);
  z-index: 0;
  box-shadow: 0 2px 8px rgba(255,0,110,.18);
}
.rm-step {
  position: relative;
  text-align: center;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.rm-dot {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gray-200);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  color: var(--gray-400);
  transition: transform .2s, border-color .2s, background .2s;
  z-index: 2;
}
.rm-step.is-free .rm-dot {
  background: var(--primary);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,0,110,.15), var(--shadow-glow);
  transform: scale(1.06);
}
.rm-step:nth-child(2) .rm-dot { border-color: var(--primary-100); color: var(--primary); }
.rm-step:nth-child(3) .rm-dot { border-color: var(--primary-50);  color: var(--primary); }
.rm-step:nth-child(4) .rm-dot { border-color: var(--gray-300);    color: var(--gray-500); }
.rm-step:nth-child(5) .rm-dot { border-color: var(--gray-300);    color: var(--gray-500); }
.rm-step:hover .rm-dot {
  transform: scale(1.08);
}
.rm-step.is-free:hover .rm-dot {
  transform: scale(1.12);
}

.rm-num {
  font-size: 11px; font-weight: 900;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: 6px;
}
.rm-step:nth-child(n+4) .rm-num { color: var(--gray-500); }

.rm-h {
  font-size: 15px; font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
  letter-spacing: .01em;
  line-height: 1.5;
}
.rm-desc {
  font-size: 13px; color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 14px;
  padding: 0 4px;
  min-height: 65px;
}
/* legacy price row (kept for compat) */
.rm-price-row {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  margin-top: auto;
}
.rm-price {
  font-size: 14px; font-weight: 900;
  color: var(--gray-900);
}

/* new: rm-price-badge — pill-shape with white background, big number */
.rm-price-badge {
  margin-top: auto;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20,20,20,.07), 0 2px 4px rgba(20,20,20,.04);
  transition: transform .2s, box-shadow .2s;
}
.rm-step:hover .rm-price-badge {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20,20,20,.10), 0 2px 6px rgba(20,20,20,.05);
}

.rm-price-main {
  font-size: 18px;
  font-weight: 900;
  color: var(--gray-900);
  letter-spacing: -.01em;
  line-height: 1;
}
.rm-price-pre {
  font-size: 12px;
  font-weight: 900;
  color: var(--gray-700);
  vertical-align: 2px;
  margin-right: 1px;
}
.rm-price-suf {
  font-size: 13px;
  font-weight: 800;
  color: var(--gray-600);
  margin-left: 2px;
}
.rm-price-sub {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--gray-200);
  letter-spacing: .04em;
}

/* STEP01 (is-free) — solid pink */
.rm-step.is-free .rm-price-badge {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(255,0,110,.32), 0 0 0 4px rgba(255,0,110,.10);
  transform: scale(1.05);
}
.rm-step.is-free .rm-price-main { color: #fff; }
.rm-step.is-free .rm-price-sub {
  color: #fff;
  border-left-color: rgba(255,255,255,.4);
}

/* STEP02 / 03 — pink number (paid) */
.rm-step:nth-child(2) .rm-price-main,
.rm-step:nth-child(3) .rm-price-main { color: var(--primary); }
.rm-step:nth-child(2) .rm-price-pre,
.rm-step:nth-child(3) .rm-price-pre { color: var(--primary); }

/* STEP04 / 05 — neutral gray */
.rm-step:nth-child(4) .rm-price-badge,
.rm-step:nth-child(5) .rm-price-badge {
  background: var(--gray-50);
  border-color: var(--gray-200);
  box-shadow: 0 3px 10px rgba(20,20,20,.04);
}
.rm-step:nth-child(4) .rm-price-main,
.rm-step:nth-child(5) .rm-price-main {
  font-size: 14px;
  color: var(--gray-700);
}

@media (max-width: 980px) {
  .rm-step.is-free .rm-price-badge { transform: none; }
  .rm-price-badge { padding: 10px 16px; }
}

@media (max-width: 980px) {
  .rm-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rm-list::before {
    top: 0; bottom: 0; left: 32px; right: auto;
    width: 4px; height: auto;
    background: linear-gradient(180deg,
      var(--primary) 0%,
      #FF6FA3 50%,
      var(--gray-300) 100%);
  }
  .rm-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
  }
  .rm-dot { margin: 0; flex-shrink: 0; }
  .rm-step > * { z-index: 1; }
  .rm-desc { min-height: 0; }
  .rm-price-row { flex-direction: row; align-items: center; }
}

/* ============================================================
   §6 Solution — wrap V2 dashboard within new section context
   ============================================================ */
.solution {
  padding: 96px 0;
  background: var(--bg-cream);
}
@media (max-width: 720px) {
  .solution { padding: 64px 0; }
}

/* STEP 03 / 04 sub-section headers */
.sol-step3, .sol-step4 { margin-top: 56px; }
.sol-step3:first-of-type { margin-top: 32px; }
.sol-step-head {
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: center;
}
.sol-step-num {
  display: inline-block;
  font-size: 11px; font-weight: 900;
  letter-spacing: .18em;
  color: var(--primary);
  background: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--primary-50);
  margin-bottom: 14px;
}
.sol-step-h {
  font-size: 26px; font-weight: 900;
  color: var(--gray-900);
  line-height: 1.5;
  margin-bottom: 12px;
  letter-spacing: .005em;
}
.sol-step-h .accent {
  color: var(--primary);
  position: relative;
}
.sol-step-h .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: rgba(255,0,110,.18);
  border-radius: 4px;
  z-index: -1;
}
.sol-step-p {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.9;
}
@media (max-width: 720px) {
  .sol-step-h { font-size: 21px; }
  .sol-step-p { font-size: 14px; }
}

/* STEP 03 visual: PPT → Web */
.sol-step3-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.sol-side {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  position: relative;
}
.sol-before {
  background: var(--gray-50);
}
.sol-after {
  background: linear-gradient(180deg, #FFF8FB, #fff);
  border-color: var(--primary-50);
  box-shadow: 0 12px 28px rgba(255,0,110,.10);
}
.sol-bf-tag {
  position: absolute;
  top: -12px; left: 22px;
  font-size: 11px; font-weight: 900;
  letter-spacing: .14em;
  background: var(--gray-700);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
}
.sol-bf-tag.is-after {
  background: var(--primary);
  box-shadow: var(--shadow-glow);
}
.sol-mock {
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  overflow: hidden;
}
.sol-mock-ppt {
  filter: saturate(.55);
}
.sol-mock svg {
  display: block;
  width: 100%;
  height: auto;
}
.sol-bf-list, .sol-af-list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.sol-bf-list li, .sol-af-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}
.sol-bf-list li svg { color: var(--gray-500); }
.sol-af-list li svg { color: var(--primary); }

/* Arrow between Before and After */
.sol-arr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  padding: 0 4px;
}
.sol-arr-lbl {
  font-size: 11px; font-weight: 900;
  letter-spacing: .14em;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
}
.sol-arr svg {
  color: var(--primary);
  filter: drop-shadow(0 4px 8px rgba(255,0,110,.25));
}
.sol-arr-meta {
  font-size: 11px; font-weight: 700;
  color: var(--gray-600);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .sol-step3-visual { grid-template-columns: 1fr; gap: 16px; }
  .sol-arr {
    flex-direction: row;
    gap: 12px;
    justify-content: center;
  }
  .sol-arr svg { transform: rotate(90deg); }
}

/* ===========================================================
   4 パネルフローモックアップ ── PNG 画像の代わりに実 UI を再現
   =========================================================== */
.flow-mock {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap: 14px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.fm-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  box-shadow: 0 4px 12px rgba(20,20,20,.04);
}
.fm-head {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gray-200);
}
.fm-num {
  display: inline-block; align-self: flex-start;
  font: 800 10px/1 sans-serif;
  letter-spacing: .14em;
  color: var(--primary);
  background: var(--primary-50);
  padding: 4px 8px;
  border-radius: 999px;
}
.fm-h {
  font-size: 14px;
  font-weight: 800;
  color: var(--gray-900);
  margin-top: 2px;
}
.fm-sub {
  font-size: 11px;
  color: var(--gray-600);
  line-height: 1.5;
}

.fm-arrow {
  width: 22px; height: 22px;
  color: var(--primary);
  align-self: center;
}

/* ── 01 PPT・PDF ── */
.fm-pptx-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.fm-file {
  width: 100%;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px;
}
.fm-file-bar {
  display: flex; align-items: center; gap: 6px;
  font: 700 10px/1 sans-serif;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.fm-file-ico { color: var(--primary); display: inline-flex; }
.fm-file-name { font-family: ui-monospace, monospace; }
.fm-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}
.fm-thumb {
  display: flex; flex-direction: column;
  height: 34px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  padding: 4px;
  justify-content: space-between;
}
.fm-thumb i { display: block; height: 2px; background: var(--gray-300); border-radius: 1px; }
.fm-thumb i:first-child { width: 70%; }
.fm-thumb i:last-child  { width: 50%; }
.fm-file-meta {
  font: 500 9px/1 sans-serif;
  color: var(--gray-500);
  text-align: center;
}

/* ── 02 Web ── */
.fm-browser {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.fm-browser-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.fm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-300);
}
.fm-dot:nth-child(1) { background: #FF5F57; }
.fm-dot:nth-child(2) { background: #FFBD2E; }
.fm-dot:nth-child(3) { background: #28C940; }
.fm-url {
  margin-left: 6px;
  font: 500 9px/1 sans-serif;
  color: var(--gray-600);
  background: var(--white);
  padding: 3px 6px;
  border-radius: 4px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-page {
  padding: 10px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1;
}
.fm-page-h {
  font-size: 11px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.4;
}
.fm-page-h .accent { color: var(--primary); }
.fm-page-lines { display: flex; flex-direction: column; gap: 3px; }
.fm-line { display: block; height: 3px; background: var(--gray-200); border-radius: 2px; }
.fm-line.w-75 { width: 75%; }
.fm-line.w-85 { width: 85%; }
.fm-line.w-90 { width: 90%; }
.fm-page-img {
  height: 26px;
  background: linear-gradient(120deg, var(--primary-50), var(--primary-100));
  border-radius: 4px;
  margin-top: 2px;
}
.fm-page-cta {
  display: inline-block; align-self: flex-start;
  font: 700 9px/1 sans-serif;
  color: var(--white);
  background: var(--primary);
  padding: 4px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

/* ── 03 Dashboard ── */
.fm-dash-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fm-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.fm-kpi {
  display: flex; flex-direction: column;
  gap: 2px;
  background: var(--gray-50);
  border-radius: 4px;
  padding: 5px 4px;
  text-align: center;
}
.fm-kpi-hot { background: var(--primary-50); }
.fm-kpi-l { font: 600 8px/1 sans-serif; color: var(--gray-600); }
.fm-kpi-v { font: 800 14px/1 sans-serif; color: var(--gray-900); }
.fm-kpi-hot .fm-kpi-v { color: var(--primary); }

.fm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fm-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  padding: 4px 6px;
}
.fm-row.fm-hot { background: var(--primary-50); border-color: var(--primary-100); }
.fm-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 9px/1 sans-serif;
}
.fm-name-s {
  font: 600 10px/1.2 sans-serif;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-badge {
  font: 700 9px/1 sans-serif;
  color: var(--primary);
  background: var(--white);
  padding: 3px 5px;
  border-radius: 999px;
}
.fm-badge-q { color: var(--gray-500); background: var(--gray-100); }

/* ── 04 Next action ── */
.fm-act-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fm-insight {
  background: var(--gray-900);
  color: var(--white);
  border-radius: 6px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.fm-insight-tag { font: 800 8px/1 sans-serif; letter-spacing: .15em; color: var(--primary); }
.fm-insight-h { font: 700 11px/1.4 sans-serif; margin: 0; }
.fm-insight-h strong { color: var(--primary); }

.fm-suggest {
  background: var(--gray-50);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.fm-suggest-l { font: 800 8px/1 sans-serif; letter-spacing: .14em; color: var(--primary); }
.fm-suggest-body { font: 600 10px/1.4 sans-serif; color: var(--gray-800); margin: 0; }
.fm-act-btn {
  display: inline-block; align-self: flex-start;
  font: 700 9px/1 sans-serif;
  color: var(--white);
  background: var(--primary);
  padding: 5px 8px;
  border-radius: 999px;
  margin-top: 2px;
}

/* モバイル：2x2 + アロー非表示 */
@media (max-width: 720px) {
  .flow-mock { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fm-panel { min-height: auto; padding: 14px 12px; }
  .fm-arrow { display: none; }
}

/* ============================================================
   §7 Before / After — visual flow with SVG icons
   ============================================================ */
.ba-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ba-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  position: relative;
  transition: transform .15s;
}
.ba-step:hover { transform: translateX(2px); }

.ba-step-num {
  position: absolute;
  top: -8px; left: 14px;
  font-size: 10px; font-weight: 900;
  letter-spacing: .14em;
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 2px 8px;
  border-radius: 999px;
}
.ba-step-visual {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--gray-100);
  color: var(--gray-500);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ba-step-visual svg { width: 30px; height: 30px; }
.ba-step-body {
  font-weight: 700;
  color: var(--gray-800);
}
.ba-step-body strong { color: var(--gray-900); }

/* arrow between steps */
.ba-flow .ba-arr {
  display: flex; justify-content: center;
  padding: 2px 0;
  color: var(--gray-300);
}

/* Before column tint */
.ba-before .ba-step { background: #fff; }
.ba-before .ba-step-visual { background: var(--gray-100); color: var(--gray-500); }
.ba-before .ba-arr { color: var(--gray-300); }

/* After column tint */
.ba-after .ba-step {
  background: #fff;
  border-color: var(--primary-50);
}
.ba-after .ba-step-num {
  background: var(--primary-50);
  color: var(--primary);
}
.ba-after .ba-step-visual {
  background: var(--primary-50);
  color: var(--primary);
}
.ba-after .ba-arr { color: var(--primary); }

/* end / goal step */
.ba-step.ba-end {
  background: var(--gray-200) !important;
  border-color: var(--gray-300) !important;
}
.ba-step.ba-end .ba-step-num {
  background: var(--gray-700);
  color: #fff;
}
.ba-step.ba-end .ba-step-visual {
  background: #fff;
  color: var(--gray-700);
}

.ba-step.ba-end-after {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-glow);
}
.ba-step.ba-end-after .ba-step-num {
  background: #fff !important;
  color: var(--primary) !important;
}
.ba-step.ba-end-after .ba-step-visual {
  background: #fff !important;
  color: var(--primary) !important;
}
.ba-step.ba-end-after .ba-step-body {
  color: #fff;
}
.ba-step.ba-end-after .ba-step-body strong {
  color: #fff;
}

@media (max-width: 720px) {
  .ba-step { grid-template-columns: 44px 1fr; padding: 12px 14px; }
  .ba-step-visual { width: 44px; height: 44px; border-radius: 10px; }
  .ba-step-visual svg { width: 24px; height: 24px; }
}

/* override deprecated old .ba-flow legacy num/body if any older CSS in V2 conflicts */
.ba-flow li.ba-arr { background: none; border: none; padding: 0; height: auto; grid-template-columns: 1fr; }

/* ============================================================
   Section title — slight bump for V3
   ============================================================ */
.section-title { font-size: 34px; line-height: 1.45; }
@media (max-width: 1100px) { .section-title { font-size: 28px; } }
@media (max-width: 720px)  { .section-title { font-size: 24px; } }