/* ============================================================
   comparison.css — 比較ページ専用
   ============================================================ */

/* ── ヒーロー ── */
.cmp-hero {
  padding-top: calc(64px + clamp(3.5rem, 7vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f8fafc 0%, #edf5fb 60%, #f4f8fc 100%);
  border-bottom: 1px solid var(--border-light);
}
.cmp-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.cmp-hero-orb {
  position: absolute;
  top: -20%; right: -8%;
  width: clamp(280px, 45vw, 500px);
  height: clamp(280px, 45vw, 500px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,223,240,.35) 0%, transparent 70%);
  filter: blur(40px);
}
.cmp-hero-inner { position: relative; z-index: 1; }
.cmp-h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 300;
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 1.2rem;
}
.cmp-lead {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.9;
  max-width: 520px;
}
.cmp-lead-note {
  display: inline-block;
  margin-top: .4rem;
  font-size: clamp(.85rem, 1.2vw, .9rem);
  color: var(--blue);
  font-style: italic;
}

/* ── まず結論 ── */
.cmp-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
.cmp-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border-light);
  text-decoration: none;
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  gap: .8rem;
}
.cmp-summary-card:hover {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.cmp-summary-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-icon-breath {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.cmp-icon-breath span {
  display: block;
  width: 6px;
  background: var(--blue-light);
  border-radius: 3px;
  animation: breathBar 1.8s ease-in-out infinite;
}
.cmp-icon-breath span:nth-child(1) { height: 18px; animation-delay: 0s; }
.cmp-icon-breath span:nth-child(2) { height: 28px; animation-delay: .2s; }
.cmp-icon-breath span:nth-child(3) { height: 18px; animation-delay: .4s; }
@keyframes breathBar {
  0%,100% { opacity: .4; transform: scaleY(.8); }
  50% { opacity: 1; transform: scaleY(1); }
}
.cmp-icon-drop { font-size: 2rem; line-height: 1; }
.cmp-icon-wave {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--blue-light);
  letter-spacing: -.1em;
  animation: waveMove 2s ease-in-out infinite;
}
@keyframes waveMove { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.cmp-summary-if {
  font-size: clamp(.82rem, 1.1vw, .88rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}
.cmp-summary-then {
  font-size: clamp(.95rem, 1.4vw, 1rem);
  color: var(--navy);
}
.cmp-summary-then strong { color: var(--blue-mid); font-weight: 500; }
.cmp-summary-product {
  font-size: .75rem;
  color: var(--muted);
  background: var(--off-white);
  padding: .3rem .8rem;
  border-radius: 2px;
}
.cmp-summary-note {
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  background: var(--off-white);
  border-left: 3px solid var(--border);
  font-size: clamp(.85rem, 1.1vw, .9rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.8;
}

/* ── 比較表 ── */
.cmp-table-wrap { margin-top: 1rem; }
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.cmp-th-label {
  width: 130px;
  padding: 1rem .8rem;
  background: transparent;
}
.cmp-th {
  padding: 1.1rem 1rem;
  text-align: center;
  border-bottom: 2px solid var(--border);
}
.cmp-th--air   { border-top: 3px solid var(--blue); }
.cmp-th--aqua  { border-top: 3px solid #5ba3c9; }
.cmp-th--life  { border-top: 3px solid #7bb8d4; }
.cmp-th-type {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.cmp-th-name {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 300;
  color: var(--navy);
}
.cmp-table td {
  padding: .9rem .8rem;
  border-bottom: 1px solid var(--border-light);
  font-size: clamp(.82rem, 1.1vw, .88rem);
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  vertical-align: top;
}
.cmp-row-label {
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 400;
  text-align: left !important;
  background: var(--off-white);
  white-space: nowrap;
}
.cmp-td-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem !important;
  font-weight: 300;
  color: var(--navy) !important;
}
.cmp-rating {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-bottom: .4rem;
}
.cmp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.cmp-dot--on { background: var(--blue); }
.cmp-rating-note {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.5;
}
.cmp-table-note {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .6rem;
  text-align: right;
  line-height: 1.7;
}

/* ── 特徴セクション ── */
.cmp-feature-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}
.cmp-feature-points {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.cmp-feature-point {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border-light);
}
.cmp-point-label {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: .6rem;
}
.cmp-point-label.good { color: var(--blue); }
.cmp-point-label.check { color: var(--muted); }
.cmp-feature-point ul {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.cmp-feature-point li {
  font-size: clamp(.85rem, 1.2vw, .9rem);
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.6;
  padding-left: .9rem;
  position: relative;
}
.cmp-point-label.good + ul li::before { content: '›'; position: absolute; left: 0; color: var(--blue); }
.cmp-point-label.check + ul li::before { content: '·'; position: absolute; left: 0; color: var(--muted); }

.cmp-feature-sidebar { position: sticky; top: 84px; }
.cmp-feature-card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  background: var(--off-white);
}
.cmp-feature-card-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--navy);
  margin-bottom: .8rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border-light);
}
.cmp-feature-card-price {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .3rem;
}
.cmp-feature-card-price strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--navy);
}
.cmp-feature-card-sub {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ── チェックリスト ── */
.cmp-checklist {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: 2rem;
}
.cmp-check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}
.cmp-check-item:hover { border-color: var(--blue-light); background: var(--blue-pale); }
.cmp-check-input { display: none; }
.cmp-check-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: .15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.cmp-check-input:checked ~ .cmp-check-box {
  background: var(--blue);
  border-color: var(--blue);
}
.cmp-check-input:checked ~ .cmp-check-box::after {
  content: '✓';
  color: #fff;
  font-size: .75rem;
  line-height: 1;
}
.cmp-check-title {
  font-size: clamp(.9rem, 1.3vw, .95rem);
  color: var(--navy);
  font-weight: 400;
  margin-bottom: .3rem;
}
.cmp-check-note {
  font-size: clamp(.78rem, 1.1vw, .82rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}
.cmp-checklist-note {
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 1.2rem;
  font-weight: 300;
}

/* ── CTA ── */
.cmp-cta {
  background: var(--navy);
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cmp-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,144,184,.1) 0%, transparent 65%);
  pointer-events: none;
}
.cmp-cta-inner { position: relative; z-index: 1; }
.cmp-cta h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}
.cmp-cta p {
  color: rgba(255,255,255,.6);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  font-weight: 300;
  line-height: 2;
  max-width: 460px;
  margin: 0 auto;
}
.cmp-cta-btns {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cmp-cta .btn-primary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.cmp-cta .btn-primary:hover {
  background: var(--blue-pale);
  border-color: var(--blue-pale);
}
.cmp-cta .btn-outline {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
}
.cmp-cta .btn-outline:hover {
  border-color: var(--white);
  color: var(--white);
}
.cmp-cta-note {
  margin-top: 1.5rem;
  font-size: .74rem;
  color: rgba(255,255,255,.28);
  letter-spacing: .06em;
}

/* ── インフォグラフィック ── */
.cmp-infographic { background: var(--white); }

.cmp-infographic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.cmp-info-card {
  border: 1px solid var(--border-light);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.cmp-info-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* 画像エリア */
.cmp-info-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-info-img-wrap--air  { background: linear-gradient(145deg, #f0f5fa 0%, #e4eff8 100%); }
.cmp-info-img-wrap--aqua { background: linear-gradient(145deg, #edf7f4 0%, #daf0ea 100%); }
.cmp-info-img-wrap--life { background: linear-gradient(145deg, #f0f0fa 0%, #e4e4f5 100%); }

/* 実画像差し込み用 */
.cmp-info-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ラベル */
.cmp-info-img-label {
  position: absolute;
  bottom: .8rem;
  left: .8rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(13,45,69,.45);
  backdrop-filter: blur(4px);
  padding: .25rem .7rem;
  font-weight: 400;
}

/* ── プレースホルダーシーン（画像未設定時） ── */
.cmp-info-scene-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 吸入シーン */
.cmp-scene-air {
  position: relative;
  width: 120px;
  height: 90px;
}
.cmp-scene-sofa {
  position: absolute;
  bottom: 0; left: 10px;
  width: 80px; height: 28px;
  background: rgba(74,144,184,.18);
  border-radius: 6px 6px 4px 4px;
}
.cmp-scene-sofa::before {
  content: '';
  position: absolute;
  top: -18px; left: 0;
  width: 80px; height: 18px;
  background: rgba(74,144,184,.12);
  border-radius: 6px 6px 0 0;
}
.cmp-scene-book {
  position: absolute;
  bottom: 28px; left: 22px;
  width: 30px; height: 20px;
  background: rgba(74,144,184,.25);
  border-radius: 1px;
  transform: rotate(-5deg);
}
.cmp-scene-breath {
  position: absolute;
  top: 5px; right: 5px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.cmp-scene-breath span {
  display: block;
  width: 5px;
  background: rgba(74,144,184,.35);
  border-radius: 3px;
  animation: breathPulse2 2.4s ease-in-out infinite;
}
.cmp-scene-breath span:nth-child(1) { height: 14px; animation-delay: 0s; }
.cmp-scene-breath span:nth-child(2) { height: 22px; animation-delay: .3s; }
.cmp-scene-breath span:nth-child(3) { height: 14px; animation-delay: .6s; }
@keyframes breathPulse2 {
  0%,100% { transform: scaleY(.6); opacity: .4; }
  50% { transform: scaleY(1); opacity: .9; }
}

/* 飲水シーン */
.cmp-scene-aqua { position: relative; width: 100px; height: 90px; display: flex; align-items: flex-end; justify-content: center; }
.cmp-scene-glass {
  width: 38px; height: 62px;
  border: 2px solid rgba(74,184,150,.3);
  border-top: none;
  border-radius: 0 0 6px 6px;
  position: relative;
  overflow: hidden;
}
.cmp-scene-water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(74,184,150,.2), rgba(74,184,150,.4));
  animation: waterLevel 3s ease-in-out infinite;
}
@keyframes waterLevel { 0%,100%{height:55%} 50%{height:58%} }
.cmp-scene-bubbles {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.cmp-scene-bubbles span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(74,184,150,.5);
  animation: bubbleRise 2s ease-in-out infinite;
}
.cmp-scene-bubbles span:nth-child(2) { animation-delay: .4s; }
.cmp-scene-bubbles span:nth-child(3) { animation-delay: .8s; }
@keyframes bubbleRise { 0%{transform:translateY(0);opacity:.7} 100%{transform:translateY(-20px);opacity:0} }
.cmp-scene-morning-light {
  position: absolute;
  top: -10px; right: -10px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,100,.3) 0%, transparent 65%);
}

/* 温浴シーン */
.cmp-scene-life { position: relative; width: 110px; height: 90px; }
.cmp-scene-bath {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55px;
  background: rgba(120,100,200,.1);
  border-radius: 8px;
  overflow: hidden;
}
.cmp-scene-steam {
  position: absolute;
  top: -25px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.cmp-scene-steam span {
  display: block;
  width: 3px; height: 18px;
  background: linear-gradient(to top, rgba(120,100,200,.3), transparent);
  border-radius: 3px;
  animation: steamRise 2.5s ease-in-out infinite;
}
.cmp-scene-steam span:nth-child(2) { animation-delay: .5s; height: 22px; }
.cmp-scene-steam span:nth-child(3) { animation-delay: 1s; }
@keyframes steamRise {
  0%,100% { transform: translateY(0) scaleX(1); opacity: .6; }
  50% { transform: translateY(-6px) scaleX(1.3); opacity: .3; }
}
.cmp-scene-wave-anim {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 40%;
}
.cmp-scene-wave-anim div {
  position: absolute;
  inset: 0;
  border-radius: 40%;
  background: rgba(120,100,200,.12);
  animation: waveRotate 6s linear infinite;
}
.cmp-scene-wave-anim div:nth-child(2) { animation-duration: 8s; animation-direction: reverse; background: rgba(120,100,200,.08); }
@keyframes waveRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* 本文エリア */
.cmp-info-body { padding: 1.4rem 1.5rem; }
.cmp-info-type {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: .6rem;
  display: block;
}
.cmp-info-type--air  { color: var(--blue); }
.cmp-info-type--aqua { color: #2a8a6a; }
.cmp-info-type--life { color: #6a3a8a; }

.cmp-info-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.cmp-info-scene { margin-bottom: 1rem; }
.cmp-info-scene-label {
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: .5rem;
}
.cmp-info-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cmp-info-list li {
  font-size: clamp(.82rem, 1.1vw, .87rem);
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.6;
  padding-left: .8rem;
  position: relative;
}
.cmp-info-list li::before { content: '›'; position: absolute; left: 0; color: var(--muted); }

.cmp-info-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.cmp-info-kw {
  font-size: .7rem;
  color: var(--text-mid);
  background: var(--off-white);
  border: 1px solid var(--border-light);
  padding: .2rem .65rem;
  font-weight: 300;
  letter-spacing: .04em;
}

/* 注意書き */
.cmp-infographic-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
  .cmp-infographic-grid { grid-template-columns: 1fr; }
  .cmp-info-img-wrap { aspect-ratio: 16 / 7; }
}
@media (min-width: 769px) and (max-width: 960px) {
  .cmp-infographic-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cmp-summary-grid { grid-template-columns: 1fr; }
  .cmp-feature-grid { grid-template-columns: 1fr; }
  .cmp-feature-sidebar { position: static; }
  .cmp-cta-btns { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .cmp-summary-card { padding: 1.5rem 1rem; }
}

/* ── 製品詳細ブロック（比較ページ追加） ── */
.cmp-detail-block {
  margin-top: 1.2rem;
  border: 1px solid var(--border-light);
  background: var(--off-white);
  overflow: hidden;
}
.cmp-detail-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  border-bottom: 1px solid var(--border-light);
  font-size: clamp(.8rem, 1.2vw, .86rem);
  font-weight: 300;
}
.cmp-detail-row:last-of-type { border-bottom: none; }
.cmp-detail-label {
  padding: .6rem .9rem;
  background: var(--white);
  color: var(--muted);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .04em;
  border-right: 1px solid var(--border-light);
  line-height: 1.6;
}
.cmp-detail-val {
  padding: .6rem .9rem;
  color: var(--text);
  line-height: 1.6;
}
.cmp-detail-note {
  padding: .6rem .9rem;
  font-size: .74rem;
  color: var(--muted);
  font-weight: 300;
  background: var(--white);
  border-top: 1px solid var(--border-light);
}
@media (max-width: 480px) {
  .cmp-detail-row { grid-template-columns: 1fr; }
  .cmp-detail-label { border-right: none; border-bottom: 1px solid var(--border-light); }
}

/* ── ヒーローバッジ（TOP）── */
.top-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}
.top-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .85rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: .76rem;
  letter-spacing: .04em;
  font-weight: 300;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
  border-radius: 2px;
}
.top-hero-badge:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
}

/* ── 診断ウィジェット ── */
.cmp-diag { background: var(--off-white); }
.cmp-diag-widget {
  margin-top: 1.8rem;
  border: 1px solid var(--border-light);
  background: var(--white);
  padding: clamp(1.4rem, 3vw, 2rem);
  min-height: 180px;
}
.cmp-diag-step { display: none; }
.cmp-diag-step.active { display: block; }
.cmp-diag-q {
  font-size: clamp(.92rem, 1.4vw, 1rem);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 1.2rem;
  line-height: 1.7;
}
.cmp-diag-choices {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.cmp-diag-btn {
  flex: 1;
  min-width: 160px;
  padding: .85rem 1.2rem;
  border: 1px solid var(--border);
  background: var(--off-white);
  color: var(--navy);
  font-size: .9rem;
  font-family: inherit;
  font-weight: 300;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.cmp-diag-btn:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
}
.cmp-diag-result { display: none; }
.cmp-diag-result.active { display: block; }
.cmp-diag-result-label {
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: .5rem;
}
.cmp-diag-result-name {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: .8rem;
}
.cmp-diag-result-reason {
  font-size: clamp(.88rem, 1.3vw, .95rem);
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: .5rem;
}
.cmp-diag-result-note {
  font-size: .74rem;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 1.2rem;
}
.cmp-diag-result-btns {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.cmp-diag-reset {
  margin-top: 1.2rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.cmp-diag-reset:hover { color: var(--blue); }
@media (max-width: 480px) {
  .cmp-diag-choices { flex-direction: column; }
  .cmp-diag-btn { min-width: unset; }
}