@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #ffffff;
  color: #111111;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
.site-header {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wordmark {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}
.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.top-nav a {
  padding: 6px 9px;
  border-radius: 999px;
  color: #4d4d4d;
  font-size: 12px;
  font-weight: 750;
}
.top-nav a.is-active,
.top-nav a:hover {
  background: #f8f8f8;
  color: #111111;
}
.site-main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 2px 20px 56px;
}
.hero { margin: 6px 0 16px; }
.eyebrow {
  margin: 0 0 6px;
  color: #606067;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}
h1 {
  max-width: 920px;
  margin: 0;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 900;
}
.hero p:last-child {
  max-width: 760px;
  margin: 12px 0 0;
  color: #333333;
  font-size: 15px;
  line-height: 1.75;
}
h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: 0;
  font-weight: 900;
}
.matrix-section,
.band-section,
.product-cards,
.pair-summary,
.qa-section,
.stage-guide,
.simulator,
.sources {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed #dcdcdc;
}
.matrix-section > p {
  margin: 0 0 12px;
  color: #444444;
  font-size: 14px;
  line-height: 1.65;
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
}
.section-heading h2,
.section-heading p {
  margin-left: 0;
  margin-right: 0;
}
.hero-sim-button,
.section-sim-button,
.floating-sim-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid rgba(9,9,11,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #111111;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
}
.hero-sim-button {
  margin-top: 22px;
  padding: 12px 18px;
  font-size: 14px;
}
.section-sim-button {
  padding: 10px 15px;
  font-size: 13px;
}
.floating-sim-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  padding: 11px 16px;
  font-size: 13px;
}
.hero-sim-button:hover,
.section-sim-button:hover,
.floating-sim-button:hover {
  background: #111111;
  color: #ffffff;
}

.hero-sim-button::after,
.section-sim-button::after,
.floating-sim-button::after,
.sim-result a::after,
.product-link::after {
  content: "→";
  margin-left: 8px;
  font-size: .82em;
}
.hero-sim-button,
.section-sim-button,
.floating-sim-button,
.product-link,
.sim-result a {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.product-link:hover,
.sim-result a:hover,
.hero-sim-button:hover,
.section-sim-button:hover,
.floating-sim-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(9, 9, 11, 0.20);
}
.logo-marquee {
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px dashed #dcdcdc;
  border-bottom: 1px dashed #dcdcdc;
  display: grid;
  grid-template-columns: minmax(220px, .34fr) 1fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
}
.logo-marquee-copy span {
  display: block;
  color: #71717a;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.logo-marquee-copy strong {
  display: block;
  margin-top: 6px;
  font-size: 1.08rem;
  line-height: 1.55;
}
.logo-track {
  overflow: hidden;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track-inner {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: logoFlow 34s linear infinite;
}
.logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 10px 26px rgba(24, 24, 27, .08);
  color: #3f3f46;
  font-weight: 800;
  font-size: .94rem;
}
.logo-pill img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.matrix-section,
.band-section,
.product-cards,
.pair-summary,
.qa-section,
.stage-guide,
.sources {
  border-top: 0;
  padding: 28px;
  border-radius: 30px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(228, 228, 231, .96), 0 20px 54px rgba(24, 24, 27, .07);
}
.matrix-section { background: linear-gradient(180deg, #ffffff 0%, #fffdf9 100%); }
.band-section { background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%); }
.product-cards { background: linear-gradient(180deg, #ffffff 0%, #f9fff9 100%); }
.pair-summary { background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%); }
.qa-section { background: linear-gradient(180deg, #ffffff 0%, #fcf9ff 100%); }
.stage-guide { background: linear-gradient(180deg, #ffffff 0%, #f9ffff 100%); }
.sources { background: #f8f8f8; }
.decision-map {
  margin-top: 26px;
  padding: 26px 28px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: minmax(220px, .34fr) 1fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 18px 44px rgba(24, 24, 27, .06);
}
.decision-map h2 {
  margin: 6px 0 0;
  max-width: 520px;
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.decision-map-visual {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 14px;
  align-items: center;
}
.map-node,
.map-core {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 12px 24px rgba(24, 24, 27, .07);
  font-weight: 900;
  animation: nodeFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--node-delay, 0) * -.28s);
}
.map-core {
  grid-column: 2;
  min-height: 70px;
  border-radius: 999px;
  background: #09090b;
  color: #fff;
  animation-delay: -.8s;
}
.sim-result {
  transition: opacity .22s ease, transform .22s ease, background .28s ease, box-shadow .28s ease;
}
.sim-result.is-changing {
  opacity: .72;
  transform: translateY(4px);
}
@keyframes logoFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.check-note {
  margin: 8px 0 0;
  color: #777777;
  font-size: 12px;
  line-height: 1.6;
}
.matrix {
  width: 100%;
  display: grid;
  gap: 0;
}
.matrix-group {
  margin-top: 12px;
  padding: 8px 0 5px;
  color: #111111;
  font-size: 15px;
  font-weight: 900;
  border-bottom: 1px dashed #dcdcdc;
}
.matrix-row {
  display: grid;
  grid-template-columns: minmax(168px, 190px) repeat(var(--columns, 5), minmax(0, 1fr));
  align-items: stretch;
}
.matrix-header { --columns: 5; }
.matrix-row:has(.matrix-cell:nth-child(3):last-child) { --columns: 2; }
.matrix-row:has(.matrix-cell:nth-child(4):last-child) { --columns: 3; }
.matrix-row:has(.matrix-cell:nth-child(6):last-child) { --columns: 5; }
.row-label {
  min-width: 0;
  padding: 9px 10px 9px 0;
  border-bottom: 1px dashed #dcdcdc;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
}
.matrix-cell {
  min-width: 0;
  padding: 9px 10px;
  border-bottom: 1px dashed #dcdcdc;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.48;
  text-align: center;
  word-break: normal;
  overflow-wrap: anywhere;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.matrix-cell strong {
  display: block;
  font-size: 22px;
  line-height: 1.08;
  white-space: nowrap;
}
.matrix-cell span {
  display: block;
  margin-top: 3px;
  color: #555555;
  font-size: 13px;
}
.brand-wordmark {
  display: inline-block;
  max-width: 100%;
  color: #111111;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-lockup {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}
.brand-favicon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}
.matrix-cell .brand-wordmark {
  font-size: 27px;
}
.card-title .brand-wordmark {
  font-size: 19px;
}
.brand-typeform {
  color: #2b3038;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 900;
}
.brand-jotform {
  color: #14205f;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 950;
}
.brand-tally {
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: lowercase;
}
.brand-fillout {
  color: #ffbd24;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.brand-paperform {
  color: #111111;
  font-family: "Trebuchet MS", Inter, "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.matrix-lines {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}
.matrix-cell .matrix-line {
  display: inline-grid;
  grid-template-columns: minmax(0, auto);
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.matrix-cell .matrix-line.has-media {
  grid-template-columns: 16px minmax(0, auto);
}
.matrix-cell .matrix-line .matrix-line-text {
  display: inline;
  margin-top: 0;
  color: #111111;
  font-size: 14px;
  line-height: 1.45;
  min-width: 0;
}
.check-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.favicon-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}
.free-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}
.inline-symbol {
  flex: 0 0 auto;
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.matrix-cell:hover,
.matrix-row:hover .matrix-cell,
.matrix-cell.is-active {
  background: var(--hover) !important;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.matrix-cell.is-active strong,
.matrix-row:hover .matrix-cell strong {
  font-weight: 950;
}
.band-grid,
.product-cards > div,
.pair-summary > div,
.qa-section > div,
.stage-guide > div {
  display: grid;
  gap: 10px;
}
.band-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-cards > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pair-summary > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qa-section > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-guide > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band-grid article,
.product-card,
.pair-summary article,
.qa-section article,
.stage-guide article {
  min-width: 0;
  border-radius: 14px;
  background: #f8f8f8;
  padding: 14px;
}
.band-grid article,
.stage-guide article { background: #f8f8f8; }
.product-card,
.pair-summary article {
  background: var(--bg);
  transition: transform .16s ease, box-shadow .16s ease;
}
.product-card:hover,
.product-card.is-active,
.pair-summary article:hover,
.pair-summary article.is-active {
  background: var(--hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 900;
}
.band-grid p,
.product-card p,
.pair-summary p,
.qa-section p,
.stage-guide p {
  margin: 0;
  color: #333333;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}
ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
li {
  color: #222222;
  font-size: 12px;
  line-height: 1.4;
}
li::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 900;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.card-title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.card-title strong {
  min-width: 0;
  font-size: 17px;
  white-space: nowrap;
}
.best-for {
  margin: 8px 0;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 850;
}
.product-card a,
.sim-result a {
  display: block;
  width: fit-content;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--accent, #e4e4e7);
  font-size: 12px;
  font-weight: 850;
}
.pair-summary dl {
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}
.pair-summary div div {
  display: grid;
  gap: 3px;
}
dt {
  color: #555555;
  font-size: 11px;
  font-weight: 850;
}
dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.qa-section span {
  display: block;
  margin-bottom: 6px;
  color: #606067;
  font-size: 11px;
  font-weight: 850;
}
.simulator {
  border-top: 0;
  scroll-margin-top: 22px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%),
    linear-gradient(145deg, #ffffff 0%, #f7f7f8 58%, #f0f0f2 100%);
  padding: 30px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 24px 70px rgba(0,0,0,.11);
}
.sim-header {
  max-width: 820px;
  margin-bottom: 20px;
}
.sim-kicker {
  margin: 0 0 6px;
  color: #71717a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sim-header p,
.sim-result p {
  margin: 0;
  color: #333333;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}
.sim-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.sim-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.05);
  backdrop-filter: blur(18px);
}
label {
  display: grid;
  gap: 6px;
  color: #444444;
  font-size: 12px;
  font-weight: 850;
}
select,
input {
  width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  background: #ffffff;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
select:focus,
input:focus {
  outline: 2px solid rgba(0,0,0,.14);
  outline-offset: 2px;
}
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: auto;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f8f8f8;
}
.checkline input { width: auto; }
.sim-result {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
  border-radius: 30px;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  transition: background-color .16s ease, box-shadow .16s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 18px 46px rgba(0,0,0,.09);
}
.result-eyebrow {
  color: #333333;
  font-size: 12px;
  font-weight: 900;
  grid-column: 1;
  padding: 28px 28px 0;
}
.sim-result strong {
  display: block;
  margin: 0;
  padding: 14px 28px 10px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
  grid-column: 1;
  grid-row: 2;
}
.result-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.result-brand-lockup .brand-favicon {
  width: 28px;
  height: 28px;
}
.result-brand-lockup .brand-wordmark {
  font-size: 44px;
}
.sim-result p {
  grid-column: 2;
  margin: 14px 18px 0 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f7f7f8;
  color: #222222;
  font-size: 14px;
  line-height: 1.75;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.sim-result p:first-of-type {
  margin-top: 18px;
  background: var(--result-bg, #f8f8f8);
  font-weight: 800;
}
.sim-result p + p { margin-top: 10px; }
.sim-result a {
  grid-column: 1;
  align-self: end;
  justify-self: start;
  margin: 0 28px 28px;
}
.sim-result::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 6;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.84), rgba(255,255,255,0) 34%),
    var(--result-bg, #f8f8f8);
  z-index: 0;
}
.sim-result > * {
  position: relative;
  z-index: 1;
}
.sources {
  color: #555555;
  font-size: 11px;
}
.sources p { margin: 0 0 8px; }
.sources .ad-disclosure {
  margin-top: 10px;
  color: #777777;
  font-size: 10px;
}
.sources div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.sources a {
  color: #444444;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px;
  text-decoration-color: #999999;
}
@media (max-width: 1040px) {
  .product-cards > div,
  .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-shell { grid-template-columns: 1fr; }
  .sim-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-main { padding: 4px 12px 42px; }
  .top-nav { justify-content: flex-start; }
  h1 { font-size: 34px; line-height: 1.08; }
  .matrix-header { display: none; }
  .matrix-group {
    margin-top: 14px;
    padding: 10px 0 7px;
    font-size: 14px;
  }
  .matrix-row {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px #e4e4e7;
    overflow: hidden;
  }
  .row-label {
    padding: 10px 9px 8px;
    background: #f8f8f8;
    font-size: 14px;
  }
  .matrix-cell {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 9px;
    text-align: left;
    font-size: 14px;
  }
  .matrix-cell::before {
    content: attr(data-name);
    color: #111111;
    font-weight: 900;
  }
  .matrix-cell:last-child { border-bottom: 0; }
  .product-cards > div,
  .band-grid,
  .pair-summary > div,
  .qa-section > div,
  .stage-guide > div,
  .sim-controls {
    grid-template-columns: 1fr;
  }
  .simulator { padding: 16px; border-radius: 20px; }
  .sim-result {
    grid-template-columns: 1fr;
  }
  .sim-result::before {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-height: 180px;
  }
  .result-eyebrow,
  .sim-result strong,
  .sim-result p,
  .sim-result a {
    grid-column: 1;
  }
  .sim-result p {
    margin: 10px 12px 0;
  }
  .sim-result a {
    margin: 12px;
  }
  .sim-result strong { font-size: 36px; }
  .matrix-cell .brand-wordmark { font-size: 24px; }
  .card-title .brand-wordmark { font-size: 17px; }
}
@media (max-width: 420px) {
  h1 { font-size: 30px; }
  .hero,
  section { max-width: 100%; }
  .matrix-cell .brand-wordmark { font-size: 21px; }
  .sim-controls { grid-template-columns: 1fr; }
}
/* 2026-07-17 UI bugfix: readable generated sections, banner CTAs, calmer radii */
.logo-marquee { grid-template-columns: minmax(300px, .30fr) 1fr; gap: 34px; padding: 22px 0; }
.logo-marquee-copy { min-width: 280px; }
.logo-track { position: relative; z-index: 0; }
.decision-map { grid-template-columns: minmax(360px, .42fr) minmax(0, 1fr); gap: 36px; border-radius: 18px; overflow: hidden; }
.decision-map h2 { font-size: clamp(2rem, 4.2vw, 4.4rem); max-width: 680px; }
.decision-map-visual { min-height: 150px; grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.map-node, .map-core { min-height: 48px; border-radius: 14px; white-space: nowrap; }
.hero-sim-button, .section-sim-button, .floating-sim-button, .sim-result a, .product-link { border-radius: 14px; }
.hero-sim-button, .section-sim-button { display: flex; width: min(520px, 100%); justify-content: space-between; padding: 18px 22px; background: #09090b; color: #ffffff; box-shadow: 0 18px 40px rgba(9, 9, 11, .18); }
.hero-sim-button:hover, .section-sim-button:hover { background: #2b2b2f; }
.floating-sim-button { border-radius: 999px; }
.matrix-section, .band-section, .product-cards, .pair-summary, .qa-section, .stage-guide, .sources, .simulator, .sim-result { border-radius: 18px; }
.sim-result { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); border-radius: 18px; box-shadow: 0 24px 70px rgba(24, 24, 27, .10), inset 0 0 0 1px rgba(228, 228, 231, .96); }
.sim-result p { border-radius: 14px; white-space: pre-line; }
.sim-result p:first-of-type { box-shadow: inset 0 0 0 1px rgba(9, 9, 11, .06); }
.sim-result a { display: flex; align-items: center; justify-content: space-between; min-width: 220px; padding: 14px 18px; background: #09090b; color: #ffffff; box-shadow: 0 18px 36px rgba(9, 9, 11, .16); }
@media (max-width: 920px) { .decision-map, .logo-marquee { grid-template-columns: 1fr; } .decision-map-visual { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }

/* 2026-07-17 final bugfix: remove mojibake risk, lower radii, stable banners */
.hero { padding-top: 34px; }
.hero h1 { line-height: .98; letter-spacing: -.055em; margin-bottom: 14px; }
.hero p { margin-top: 0; max-width: 1080px; line-height: 1.75; }
.hero-sim-button, .section-sim-button { border-radius: 12px; min-height: 58px; text-decoration: none; }
.logo-marquee { grid-template-columns: minmax(380px, .36fr) 1fr; padding: 20px 0; }
.logo-marquee-copy { min-width: 360px; }
.logo-marquee-copy span, .logo-marquee-copy strong { white-space: normal; overflow-wrap: anywhere; }
.decision-map { grid-template-columns: 1fr; border-radius: 14px; padding: 28px 30px; }
.decision-map h2 { max-width: 1120px; font-size: clamp(1.8rem, 3.2vw, 3.8rem); line-height: 1.12; letter-spacing: -.025em; }
.decision-map-visual { grid-template-columns: repeat(3, minmax(150px, 1fr)); min-height: auto; }
.map-node, .map-core { border-radius: 10px; min-height: 52px; }
.matrix-section, .band-section, .product-cards, .pair-summary, .qa-section, .stage-guide, .sources, .simulator, .sim-result { border-radius: 14px; }
.sim-result { border-radius: 14px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); overflow: hidden; }
.sim-result-brand { padding: 34px 32px; }
.sim-result p { border-radius: 10px; line-height: 1.9; white-space: pre-line; }
.sim-result a { border-radius: 12px; text-decoration: none; }
@media (max-width: 920px) { .logo-marquee, .decision-map, .sim-result { grid-template-columns: 1fr; } .logo-marquee-copy { min-width: 0; } .decision-map-visual { grid-template-columns: 1fr; } }

/* 2026-07-18 banner redesign: remove weak hero CTA, animated decision flow, stronger customer CTAs */
.hero { padding-top: 48px; padding-bottom: 32px; }
.hero h1 { max-width: 1180px; margin-bottom: 18px; line-height: .98; letter-spacing: -.052em; }
.hero p { max-width: 1040px; font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.85; }
.hero-sim-button { display: none !important; }
.section-sim-button {
  width: min(360px, 100%);
  min-height: 62px;
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  background: #09090b;
  color: #fff;
  box-shadow: 0 18px 38px rgba(9,9,11,.20), inset 0 0 0 1px rgba(255,255,255,.12);
}
.section-sim-button::after { content: "→"; margin-left: 12px; font-size: .9em; }
.section-sim-button:hover { transform: translateY(-2px); background: #202024; box-shadow: 0 22px 48px rgba(9,9,11,.24); }
.decision-map-animated {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(380px, .44fr) minmax(520px, 1fr);
  gap: 46px;
  padding: clamp(34px, 4vw, 58px);
  border-radius: 12px;
  background: radial-gradient(circle at 82% 18%, rgba(224,255,255,.75), rgba(255,255,255,0) 26%), radial-gradient(circle at 18% 86%, rgba(255,239,224,.72), rgba(255,255,255,0) 30%), linear-gradient(135deg, #ffffff 0%, #fff9f4 48%, #f9ffff 100%);
  box-shadow: 0 26px 70px rgba(24,24,27,.08), inset 0 0 0 1px rgba(9,9,11,.08);
}
.decision-map-animated::before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(113,113,122,.38); border-radius: 10px; pointer-events: none; }
.decision-map-copy { position: relative; z-index: 2; }
.decision-map-copy .eyebrow { color: #52525b; letter-spacing: .08em; }
.decision-map-copy h2 { margin: 10px 0 18px; max-width: 760px; font-size: clamp(2.6rem, 5.4vw, 6.4rem); line-height: .98; letter-spacing: -.055em; }
.decision-map-copy p:not(.eyebrow) { max-width: 620px; margin: 0; color: #3f3f46; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.9; }
.decision-map-visual { position: relative; z-index: 2; min-height: 360px; display: block; }
.map-node, .map-core { position: absolute; display: inline-flex; justify-content: center; align-items: center; min-width: 150px; min-height: 58px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(9,9,11,.10); box-shadow: 0 18px 42px rgba(24,24,27,.10); font-weight: 900; letter-spacing: .02em; animation: mapFloat 6.5s ease-in-out infinite; animation-delay: calc(var(--node-delay, 0) * .22s); }
.map-core { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 190px; min-height: 74px; background: #09090b; color: #fff; box-shadow: 0 24px 56px rgba(9,9,11,.28); animation: corePulse 3.8s ease-in-out infinite; }
.map-node-1 { left: 7%; top: 8%; background: #fff4f4; }
.map-node-2 { right: 10%; top: 10%; background: #fff9f4; }
.map-node-3 { left: 3%; top: 47%; background: #f4f9ff; }
.map-node-4 { right: 5%; top: 48%; background: #f4fff9; }
.map-node-5 { left: 18%; bottom: 5%; background: #f9f4ff; }
.map-node-6 { right: 18%; bottom: 6%; background: #fffff4; }
.map-line { position: absolute; left: 50%; top: 50%; width: 72%; height: 1px; border-top: 1px dashed rgba(113,113,122,.42); transform-origin: center; animation: linePulse 4.8s ease-in-out infinite; }
.map-line-a { transform: translate(-50%, -50%) rotate(0deg); }
.map-line-b { transform: translate(-50%, -50%) rotate(58deg); }
.map-line-c { transform: translate(-50%, -50%) rotate(-58deg); }
@keyframes mapFloat { 0%,100% { transform: translateY(0) scale(1); opacity: .9; } 50% { transform: translateY(-8px) scale(1.025); opacity: 1; } }
@keyframes corePulse { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
@keyframes linePulse { 0%,100% { opacity: .28; } 50% { opacity: .72; } }
.sim-result { position: relative; border-radius: 12px; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.86), transparent 30%), linear-gradient(135deg, var(--result-bg, #f8f8f8), #ffffff 62%); }
.sim-result::after { content: ""; position: absolute; left: 28px; bottom: 28px; width: 160px; height: 160px; border: 1px dashed rgba(9,9,11,.18); border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(9,9,11,.08) 0 8px, transparent 9px), radial-gradient(circle at 25% 30%, rgba(9,9,11,.12) 0 5px, transparent 6px), radial-gradient(circle at 72% 28%, rgba(9,9,11,.12) 0 5px, transparent 6px), radial-gradient(circle at 30% 75%, rgba(9,9,11,.12) 0 5px, transparent 6px), radial-gradient(circle at 76% 72%, rgba(9,9,11,.12) 0 5px, transparent 6px); opacity: .58; pointer-events: none; animation: corePulse 5s ease-in-out infinite; }
.sim-result p { border-radius: 10px; white-space: pre-line; }
.sim-result a { width: min(260px, calc(100% - 56px)); min-height: 58px; justify-content: center; border-radius: 10px; font-size: 18px; font-weight: 900; text-decoration: none; }
.sim-result a::after { content: "→"; margin-left: 12px; }
@media (max-width: 920px) { .decision-map-animated { grid-template-columns: 1fr; } .decision-map-visual { min-height: 420px; } .decision-map-copy h2 { font-size: clamp(2.2rem, 13vw, 4.4rem); } }

/* 2026-07-18 agency creative refinement: readable ink, editorial CTAs, animated decision map, simulator visual */
:root { --ink-main: #25252b; --ink-strong: #1f2025; --ink-soft: #4f4f57; }
body, main, p, li, td, th, .matrix-cell, .row-label { color: var(--ink-main); }
h1, h2, h3, strong, .matrix-header .matrix-cell { color: var(--ink-strong); }
.hero h1 { color: #202126; }
.hero p, .section-heading p, .decision-map-copy p:not(.eyebrow), .sim-header p { color: var(--ink-soft); }

.section-sim-button,
.product-link,
.sim-result a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 8px !important;
  border: 1px solid rgba(31,32,37,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,249,244,.96) 48%, rgba(244,249,255,.96) 100%);
  color: #25252b !important;
  box-shadow: 0 18px 36px rgba(31,32,37,.12), inset 0 1px 0 rgba(255,255,255,.86);
  font-family: var(--font-main);
  letter-spacing: .01em;
}
.section-sim-button { width: min(300px, 100%); min-height: 56px; font-size: clamp(19px, 1.7vw, 28px); }
.product-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; font-size: 16px; font-weight: 850; text-decoration: none; }
.section-sim-button::before,
.product-link::before,
.sim-result a::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(31,32,37,.20);
  border-radius: 6px;
  opacity: .8;
  pointer-events: none;
}
.section-sim-button::after,
.product-link::after,
.sim-result a::after {
  content: "" !important;
  width: 32px;
  height: 1px;
  margin-left: 14px;
  background: currentColor;
  box-shadow: 8px -4px 0 -7px currentColor, 8px 4px 0 -7px currentColor;
  transform: translateX(0);
  transition: transform .22s ease;
}
.section-sim-button:hover,
.product-link:hover,
.sim-result a:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #ffffff 0%, #fff4e8 52%, #eaf8ff 100%);
  box-shadow: 0 24px 48px rgba(31,32,37,.17), inset 0 1px 0 rgba(255,255,255,.92);
}
.section-sim-button:hover::after,
.product-link:hover::after,
.sim-result a:hover::after { transform: translateX(6px); }

.simulator,
.sim-controls,
.sim-controls label,
.sim-controls select,
.sim-controls input,
.checkline,
.sim-result,
.sim-result p,
.matrix-section,
.band-section,
.product-cards,
.pair-summary,
.qa-section,
.stage-guide,
.sources { border-radius: 10px !important; }

.decision-map-animated { border-radius: 10px !important; min-height: 420px; }
.decision-map-animated::before { border-radius: 8px; opacity: .72; }
.decision-map-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10px;
  top: -58px;
  width: 120%;
  color: rgba(31,32,37,.045);
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: .82;
  font-weight: 950;
  letter-spacing: -.075em;
  white-space: pre-line;
  pointer-events: none;
}
.decision-map-copy h2 { font-size: clamp(2.05rem, 3.7vw, 4.2rem) !important; line-height: 1.04; letter-spacing: -.04em; margin-top: 70px; }
.decision-map-copy p:not(.eyebrow) { max-width: 560px; }
.decision-map-visual::before,
.decision-map-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  aspect-ratio: 1;
  border: 1px dashed rgba(31,32,37,.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mapOrbit 14s linear infinite;
}
.decision-map-visual::after { width: 76%; animation-duration: 21s; animation-direction: reverse; opacity: .7; }
.map-node { animation-name: mapDrift; animation-duration: 7.8s; }
.map-node-1 { --float-x: 22px; --float-y: 18px; }
.map-node-2 { --float-x: -20px; --float-y: 22px; }
.map-node-3 { --float-x: 26px; --float-y: -16px; }
.map-node-4 { --float-x: -24px; --float-y: -18px; }
.map-node-5 { --float-x: 20px; --float-y: -22px; }
.map-node-6 { --float-x: -22px; --float-y: -20px; }
.map-core { background: #24242a; color: #fff; animation: coreBreath 4.6s ease-in-out infinite; }
.map-line { animation: linePulse 3.2s ease-in-out infinite; }
@keyframes mapDrift {
  0%,100% { transform: translate(0,0) rotate(0deg); opacity: .88; }
  35% { transform: translate(var(--float-x), var(--float-y)) rotate(-1.2deg); opacity: 1; }
  70% { transform: translate(calc(var(--float-x) * -.55), calc(var(--float-y) * .45)) rotate(1.1deg); opacity: .94; }
}
@keyframes mapOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes coreBreath { 0%,100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 24px 56px rgba(31,32,37,.24); } 50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 28px 68px rgba(31,32,37,.30); } }

.sim-result { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important; gap: 30px; padding: clamp(28px, 3vw, 46px); }
.sim-result::after { display: none; }
.result-graphic {
  grid-column: 1;
  min-height: 210px;
  position: relative;
  margin-top: 18px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.92), rgba(255,255,255,.42) 38%, transparent 70%);
  overflow: hidden;
}
.result-orbit,
.result-line,
.result-dot { position: absolute; display: block; }
.result-orbit { inset: 28px; border: 1px dashed rgba(31,32,37,.18); border-radius: 50%; animation: mapOrbit 16s linear infinite; }
.result-orbit-b { inset: 54px; animation-duration: 11s; animation-direction: reverse; }
.result-dot { width: 16px; height: 16px; border-radius: 50%; background: #25252b; box-shadow: 0 10px 28px rgba(31,32,37,.18); animation: dotFloat 5s ease-in-out infinite; }
.result-dot-a { left: 18%; top: 34%; background: #ffe0e0; }
.result-dot-b { right: 20%; top: 24%; background: #e0efff; animation-delay: .6s; }
.result-dot-c { left: 48%; bottom: 16%; background: #e0ffe0; animation-delay: 1.1s; }
.result-line { left: 50%; top: 50%; width: 64%; border-top: 1px dashed rgba(31,32,37,.16); transform-origin: center; animation: linePulse 4s ease-in-out infinite; }
.result-line-a { transform: translate(-50%, -50%) rotate(34deg); }
.result-line-b { transform: translate(-50%, -50%) rotate(-42deg); }
@keyframes dotFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10px,-8px) scale(1.12); } }
.sim-result .result-eyebrow,
.sim-result strong,
.result-graphic { position: relative; z-index: 2; }
.sim-result a { width: min(220px, 100%); min-height: 54px; margin-top: 8px; font-size: 18px; font-weight: 900; }

/* 2026-07-18 repair: restore simulator choices, remove broken two-column result, and fix decision-map wording */
:root {
  --ink-main: #2f3036;
  --ink-strong: #2a2b31;
  --ink-soft: #565861;
}
.decision-map-copy .eyebrow {
  display: none !important;
}
.decision-map-copy h2 {
  color: #303136 !important;
  margin-top: clamp(120px, 13vw, 210px) !important;
}
.decision-map-copy::before {
  content: "" !important;
  left: 0 !important;
  top: -48px !important;
  width: min(620px, 100%) !important;
  white-space: pre-line !important;
  text-align: left !important;
  line-height: .88 !important;
  color: rgba(31,32,37,.045) !important;
}
.decision-map-copy p:not(.eyebrow) {
  color: #565861 !important;
}
.decision-node-center {
  color: #27282e !important;
}

.sim-controls label,
.sim-controls select,
.sim-controls input,
.checkline {
  border-radius: 8px !important;
}
.sim-result {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  padding: clamp(28px, 3vw, 44px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 22%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(135deg, var(--result-bg, #f8f8f8) 0%, rgba(255,255,255,.97) 62%, rgba(255,255,255,.9) 100%) !important;
}
.sim-result::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(31,32,37,.10);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 36%, rgba(255, 153, 166, .22) 0 8px, transparent 9px),
    radial-gradient(circle at 42% 58%, rgba(123, 240, 153, .20) 0 9px, transparent 10px),
    radial-gradient(circle at 70% 28%, rgba(140, 185, 255, .22) 0 8px, transparent 9px);
  opacity: .86;
  pointer-events: none;
  animation: mapDrift 9s ease-in-out infinite alternate;
}
.sim-result::after {
  display: none !important;
}
.sim-result .result-eyebrow {
  display: none !important;
}
.sim-result strong {
  display: flex !important;
  align-items: center !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding: 0 clamp(8px, 1vw, 12px) !important;
  font-size: clamp(2.2rem, 4vw, 5.1rem) !important;
  color: #303136 !important;
  position: relative !important;
  z-index: 2 !important;
}
.result-graphic {
  position: absolute !important;
  inset: 0 !important;
  grid-column: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: .95 !important;
}
.result-orbit {
  width: min(620px, 42vw) !important;
  height: min(620px, 42vw) !important;
  left: 6% !important;
  top: 8% !important;
  border-color: rgba(31,32,37,.12) !important;
  animation-duration: 12s !important;
}
.result-orbit-b {
  left: auto !important;
  right: 7% !important;
  top: 18% !important;
}
.result-dot {
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 14px 32px rgba(31,32,37,.12) !important;
}
.sim-result p {
  grid-column: 1 !important;
  width: min(1040px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 34px) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.80) !important;
  box-shadow: inset 0 0 0 1px rgba(31,32,37,.08), 0 18px 44px rgba(31,32,37,.05) !important;
  font-size: clamp(1rem, 1.12vw, 1.14rem) !important;
  line-height: 2 !important;
  color: #33343a !important;
  position: relative !important;
  z-index: 2 !important;
}
.sim-result p:first-of-type {
  width: 100% !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(31,32,37,.10) !important;
  font-size: clamp(1.08rem, 1.28vw, 1.28rem) !important;
  font-weight: 800 !important;
  color: #2c2d33 !important;
}
.sim-result a {
  grid-column: 1 !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 190px !important;
  min-height: 54px !important;
  margin: 10px 0 0 clamp(2px, 1vw, 10px) !important;
  border-radius: 8px !important;
  color: #2d2e34 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,249,244,.96)) !important;
  box-shadow: 0 18px 42px rgba(31,32,37,.13), inset 0 0 0 1px rgba(31,32,37,.13) !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 920px) {
  .decision-map-copy h2 {
    margin-top: clamp(90px, 24vw, 160px) !important;
  }
  .sim-result strong {
    min-height: 74px !important;
  }
}

/* 2026-07-18 final repair: commit-per-change CTA sizing, matrix spacing, simulator order, and mojibake-safe headline */
.decision-map-copy::before {
  content: "" !important;
  left: 0 !important;
  top: -38px !important;
  width: min(760px, 100%) !important;
  white-space: pre-line !important;
  text-align: left !important;
  line-height: .78 !important;
  letter-spacing: -.08em !important;
  color: rgba(31,32,37,.085) !important;
}
.decision-map-copy h2 {
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.decision-map-copy p:not(.eyebrow) {
  max-width: 560px !important;
  margin-top: clamp(180px, 16vw, 260px) !important;
  font-size: 1.125rem !important;
  line-height: 1.95 !important;
}
.section-sim-button {
  min-width: 0 !important;
  width: min(200px, 100%) !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
  font-size: clamp(.95rem, 1vw, 1.1rem) !important;
}
.matrix-section {
  padding-top: clamp(10px, 1.4vw, 18px) !important;
}
.matrix-section .section-heading {
  margin-top: -4px !important;
  margin-bottom: clamp(14px, 2vw, 22px) !important;
  align-items: end !important;
}
.matrix-section .section-heading h2 {
  margin-top: 0 !important;
}
.sim-result {
  grid-template-columns: 1fr !important;
  gap: clamp(20px, 2.2vw, 30px) !important;
  padding: clamp(30px, 3.4vw, 54px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.sim-result::before {
  inset: -10% !important;
  border: 1px dashed rgba(31,32,37,.15) !important;
  background:
    radial-gradient(circle at 12% 28%, rgba(255, 153, 166, .34) 0 14px, transparent 15px),
    radial-gradient(circle at 35% 68%, rgba(123, 240, 153, .32) 0 16px, transparent 17px),
    radial-gradient(circle at 71% 20%, rgba(140, 185, 255, .34) 0 14px, transparent 15px),
    radial-gradient(circle at 83% 61%, rgba(255, 214, 102, .26) 0 12px, transparent 13px),
    radial-gradient(circle at 52% 43%, rgba(199, 167, 255, .22) 0 10px, transparent 11px),
    linear-gradient(145deg, transparent 15%, rgba(31,32,37,.06) 15.3%, transparent 15.8%, transparent 39%, rgba(31,32,37,.06) 39.3%, transparent 39.8%, transparent 62%, rgba(31,32,37,.05) 62.3%, transparent 62.8%) !important;
  opacity: .94 !important;
  animation: mapDrift 4.8s ease-in-out infinite alternate !important;
}
.sim-result strong {
  order: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  min-height: auto !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #3a3b41 !important;
  font-size: clamp(3rem, 5vw, 5.8rem) !important;
}
.result-orbit {
  width: min(980px, 72vw) !important;
  height: min(980px, 72vw) !important;
  left: -10% !important;
  top: -18% !important;
  border-color: rgba(31,32,37,.18) !important;
  animation-duration: 7.6s !important;
}
.result-orbit-b {
  left: auto !important;
  right: -10% !important;
  top: 8% !important;
}
.result-orbit-c {
  width: min(860px, 62vw) !important;
  height: min(860px, 62vw) !important;
  left: 6% !important;
  top: 20% !important;
  border-color: rgba(31,32,37,.13) !important;
  animation-duration: 5.8s !important;
}
.result-dot {
  width: 28px !important;
  height: 28px !important;
  opacity: .96 !important;
}
.result-dot-a { top: 19% !important; left: 10% !important; }
.result-dot-b { top: 62% !important; left: 24% !important; }
.result-dot-c { top: 24% !important; right: 16% !important; }
.result-dot-d { top: 72% !important; right: 21% !important; background: rgba(255,214,102,.84) !important; animation-duration: 4.7s !important; }
.result-dot-e { top: 46% !important; left: 52% !important; background: rgba(255,153,166,.82) !important; animation-duration: 5.4s !important; }
.result-line-a { width: 82% !important; opacity: .28 !important; }
.result-line-b { width: 76% !important; opacity: .24 !important; }
.result-line-c { transform: translate(-50%, -50%) rotate(18deg) !important; width: 84% !important; opacity: .3 !important; }
.result-line-d { transform: translate(-50%, -50%) rotate(-68deg) !important; width: 74% !important; opacity: .24 !important; }
.sim-result p {
  width: 100% !important;
  order: 3 !important;
  font-size: 1.1875rem !important;
}
.sim-result p:first-of-type {
  order: 2 !important;
  grid-row: 2 !important;
  background: rgba(255,255,255,.36) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: clamp(1.45rem, 1.9vw, 1.78rem) !important;
  line-height: 1.78 !important;
  padding: 0 !important;
  color: #3a3b41 !important;
}
.sim-result #result-band {
  order: 3 !important;
  grid-row: 3 !important;
  background: rgba(255,255,255,.36) !important;
}
.sim-result #result-checks {
  order: 4 !important;
  grid-row: 4 !important;
  background: rgba(255,255,255,.30) !important;
}
.sim-result #result-advice {
  order: 5 !important;
  grid-row: 5 !important;
  background: rgba(255,255,255,.24) !important;
}
.sim-result a {
  order: 6 !important;
  grid-row: 6 !important;
}
.sim-header p,
.band-grid p,
.stage-guide p {
  font-size: 1.1875rem !important;
}
.sim-header p {
  max-width: 860px !important;
}
.sim-controls select,
.sim-controls input {
  font-weight: 700 !important;
}
.sim-controls label.compact-input input {
  width: 52% !important;
  min-width: 136px !important;
}
.checkline {
  gap: 12px !important;
}
.checkline input {
  width: 22px !important;
  height: 22px !important;
}
.checkline span {
  font-size: 1.16rem !important;
  font-weight: 800 !important;
}

/* 2026-07-17 priority repair: exact order, banner headline, and simulator readability */
.decision-map-copy::before {
  content: "" !important;
  left: 32px !important;
  top: -2px !important;
  width: min(760px, 100%) !important;
  font-size: clamp(9.6rem, 19vw, 16.4rem) !important;
  line-height: .9 !important;
  letter-spacing: -.03em !important;
  color: rgba(31,32,37,.11) !important;
}
.decision-map-animated {
  min-height: 460px !important;
}
.decision-map-visual::before,
.decision-map-visual::after {
  opacity: .9 !important;
}
.map-line {
  border-top-color: rgba(31,32,37,.22) !important;
}
.map-node {
  animation-duration: 5.4s !important;
}
.map-core {
  font-size: clamp(1.7rem, 2.2vw, 2.1rem) !important;
}
.sim-result .result-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.sim-result #result-product {
  justify-content: flex-start !important;
}
.sim-result #result-reason {
  margin-top: -6px !important;
}



/* 2026-07-18 authoritative simulator + banner override */
.decision-map-copy .eyebrow { display: none !important; }
.decision-map-copy h2 { display: none !important; }
.decision-map-animated {
  position: relative !important;
  min-height: 460px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.decision-map-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 520px !important;
}
.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: -4px !important;
  white-space: pre !important;
  text-align: left !important;
  font-size: clamp(6rem, 12vw, 10.5rem) !important;
  line-height: .82 !important;
  letter-spacing: -.08em !important;
  color: rgba(48, 49, 54, .1) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.decision-map-copy p:not(.eyebrow) {
  margin-top: clamp(210px, 18vw, 280px) !important;
  max-width: 560px !important;
  font-size: 1.125rem !important;
  line-height: 1.95 !important;
}
.decision-map-visual {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 38% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.decision-map-visual::before,
.decision-map-visual::after { opacity: .92 !important; }
.map-line { border-top-color: rgba(31, 32, 37, .22) !important; animation-duration: 2.4s !important; }
.map-node { border-radius: 10px !important; animation-duration: 3.8s !important; }
.map-core {
  border-radius: 10px !important;
  background: rgba(18, 18, 22, .88) !important;
  color: rgba(255, 255, 255, .96) !important;
}
.map-core-link {
  pointer-events: auto !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-sim-button {
  width: min(154px, 100%) !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  font-size: .93rem !important;
  border-radius: 8px !important;
}
.matrix-section { padding-top: 10px !important; }
.matrix-section .section-heading {
  align-items: start !important;
  margin: 0 24px 18px !important;
}
.matrix-section .section-heading h2 {
  margin-top: 0 !important;
  width: 100% !important;
}
.sim-header p,
.band-grid p,
.stage-guide p { font-size: 1.1875rem !important; }
.sim-controls label { font-size: 1.125rem !important; font-weight: 800 !important; }
.sim-controls select,
.sim-controls input { font-weight: 800 !important; }
.sim-controls label.compact-input input { width: 50% !important; min-width: 136px !important; }
.checkline { gap: 12px !important; border-radius: 8px !important; }
.checkline input { width: 22px !important; height: 22px !important; }
.checkline span { font-size: 1.15rem !important; font-weight: 800 !important; }
.sim-result {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  padding: clamp(30px, 3vw, 48px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(224,255,224,.42) 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,.96) 100%) !important;
}
.sim-result::before {
  content: "" !important;
  position: absolute !important;
  inset: -4% !important;
  border: 1px dashed rgba(31,32,37,.14) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 10% 24%, rgba(255,153,166,.34) 0 16px, transparent 17px),
    radial-gradient(circle at 34% 68%, rgba(123,240,153,.3) 0 18px, transparent 19px),
    radial-gradient(circle at 72% 20%, rgba(140,185,255,.34) 0 16px, transparent 17px),
    radial-gradient(circle at 84% 64%, rgba(255,214,102,.26) 0 14px, transparent 15px),
    radial-gradient(circle at 50% 48%, rgba(199,167,255,.24) 0 12px, transparent 13px);
  opacity: .95 !important;
  pointer-events: none !important;
}
.result-graphic {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.result-orbit { width: min(980px, 72vw) !important; height: min(980px, 72vw) !important; left: -10% !important; top: -18% !important; border-color: rgba(31,32,37,.18) !important; animation-duration: 7.6s !important; }
.result-orbit-b { left: auto !important; right: -10% !important; top: 8% !important; }
.result-orbit-c { width: min(860px, 62vw) !important; height: min(860px, 62vw) !important; left: 6% !important; top: 20% !important; border-color: rgba(31,32,37,.13) !important; animation-duration: 5.8s !important; }
.result-dot { width: 28px !important; height: 28px !important; opacity: .96 !important; }
.result-dot-a { top: 19% !important; left: 10% !important; }
.result-dot-b { top: 62% !important; left: 24% !important; }
.result-dot-c { top: 24% !important; right: 16% !important; }
.result-dot-d { top: 72% !important; right: 21% !important; background: rgba(255,214,102,.84) !important; animation-duration: 4.7s !important; }
.result-dot-e { top: 46% !important; left: 52% !important; background: rgba(255,153,166,.82) !important; animation-duration: 5.4s !important; }
.result-line-a { width: 82% !important; opacity: .28 !important; }
.result-line-b { width: 76% !important; opacity: .24 !important; }
.result-line-c { transform: translate(-50%, -50%) rotate(18deg) !important; width: 84% !important; opacity: .3 !important; }
.result-line-d { transform: translate(-50%, -50%) rotate(-68deg) !important; width: 74% !important; opacity: .24 !important; }
.sim-result strong {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #3a3b41 !important;
  font-size: clamp(3rem, 5vw, 5.4rem) !important;
  position: relative !important;
  z-index: 2 !important;
}
.sim-result p {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(31,32,37,.08), 0 18px 44px rgba(31,32,37,.05) !important;
  font-size: 1.1875rem !important;
  line-height: 1.95 !important;
  color: #33343a !important;
  position: relative !important;
  z-index: 2 !important;
}
.sim-result p:first-of-type {
  order: 2 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.55rem !important;
  line-height: 1.78 !important;
  font-weight: 800 !important;
  color: #3a3b41 !important;
}
#result-band { order: 3 !important; background: rgba(255,255,255,.28) !important; }
#result-checks { order: 4 !important; background: rgba(255,255,255,.22) !important; }
#result-advice { order: 5 !important; background: rgba(255,255,255,.18) !important; }
.sim-result a {
  order: 6 !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 188px !important;
  min-height: 52px !important;
  margin-top: 8px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,249,244,.94)) !important;
  color: #2f3036 !important;
}
.product-card .card-title {
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.product-card .card-title strong,
.product-card .card-title .brand-lockup {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(1.78rem, 2.1vw, 2.25rem) !important;
  line-height: 1.04 !important;
}
.product-card .card-title .brand-wordmark {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(1.78rem, 2.1vw, 2.25rem) !important;
}
.product-card .card-title .brand-favicon {
  width: 26px !important;
  height: 26px !important;
}
.product-cards > div {
  align-items: stretch !important;
}
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-card p { font-size: 1.125rem !important; line-height: 1.48 !important; }
.product-card li {
  font-size: 1.125rem !important;
  line-height: 1.36 !important;
  margin: 0 !important;
}
.product-card ul {
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 9px !important;
  align-content: start !important;
}
.product-card a {
  align-self: center !important;
  margin-top: auto !important;
  font-size: 16px !important;
}
.matrix-section .section-heading h2,
.band-section > h2,
.product-cards > h2,
.stage-guide > h2,
.stage-guide h2,
.qa-section > h2,
.pair-summary > h2,
.sim-header h2 {
  font-size: 2rem !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
.stage-guide p { font-size: calc(1.1875rem - 2pt) !important; }
@media (max-width: 920px) {
  .decision-map-copy::before { font-size: clamp(4.8rem, 18vw, 8rem) !important; }
  .decision-map-copy p:not(.eyebrow) { margin-top: 190px !important; }
  .decision-map-visual { left: 0 !important; }
}

/* 2026-07-18 hard stop repair: fixed heading scale, right-side decision map, stable card CTAs */
.decision-map-animated {
  display: grid !important;
  grid-template-columns: minmax(520px, .44fr) minmax(420px, 1fr) !important;
  align-items: center !important;
  overflow: hidden !important;
}
.decision-map-copy { min-width: 0 !important; overflow: hidden !important; }
.decision-map-copy::before {
  content: "" !important;
  left: 38px !important;
  top: 30px !important;
  width: min(560px, 94%) !important;
  max-width: 94% !important;
  font-size: clamp(4.6rem, 7vw, 7.1rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .035em !important;
  white-space: pre-line !important;
  color: #3f3f46 !important;
  opacity: .16 !important;
  transform: rotate(-4deg) !important;
}
.decision-map-copy p:not(.eyebrow) { position: relative !important; z-index: 3 !important; margin-top: 250px !important; }
.decision-map-visual {
  position: relative !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 380px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.decision-map-visual::before,
.decision-map-visual::after { width: 92% !important; height: 92% !important; left: 4% !important; top: 4% !important; opacity: .96 !important; animation-duration: 16s !important; }
.map-line { opacity: .78 !important; transform-origin: center !important; animation: mapLineDrift 9s ease-in-out infinite alternate !important; }
.map-line-b { animation-duration: 12s !important; }
.map-line-c { animation-duration: 15s !important; }
.map-node { animation: mapFloatWide 5.8s ease-in-out infinite alternate !important; }
.map-core { background: rgba(36,36,42,.92) !important; color: #fff !important; pointer-events: auto !important; }
.map-core-link { text-decoration: none !important; cursor: pointer !important; }
@keyframes mapLineDrift { from { transform: translate(-8px, -4px) rotate(-1deg); } to { transform: translate(10px, 8px) rotate(1.5deg); } }
@keyframes mapFloatWide { from { transform: translate(-8px, -6px) scale(1); } to { transform: translate(12px, 10px) scale(1.04); } }
.matrix-section .section-heading h2,
.band-section > h2,
.product-cards > h2,
.stage-guide > h2,
.stage-guide h2,
.qa-section > h2,
.pair-summary > h2,
.sim-header h2,
.sources > h2 { font-size: 2rem !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: 0 !important; margin-top: 0 !important; }
.product-cards > div { align-items: stretch !important; }
.product-card { display: flex !important; flex-direction: column !important; min-height: 430px !important; height: 100% !important; }
.product-card .card-title strong,
.product-card .card-title .brand-lockup,
.product-card .card-title .brand-wordmark {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(1.78rem, 2.1vw, 2.25rem) !important;
  line-height: 1.02 !important;
}
.matrix-cell .brand-wordmark { font-size: clamp(1.78rem, 2.1vw, 2.25rem) !important; }
.product-card ul { flex: 1 1 auto !important; }
.product-card a { margin-top: auto !important; align-self: center !important; font-size: 16px !important; }
#result-reason { border: 0 !important; box-shadow: none !important; }
@media (max-width: 920px) {
  .decision-map-animated { grid-template-columns: 1fr !important; }
  .decision-map-copy::before { font-size: clamp(5.2rem, 19vw, 9rem) !important; }
  .decision-map-copy p:not(.eyebrow) { margin-top: 200px !important; }
  .decision-map-visual { min-height: 330px !important; }
}


/* 2026-07-24 layout contract: image headline, horizontal mobile comparison, stable cards */
.matrix-section,
.product-cards,
.band-section,
.stage-section,
.simulator,
.decision-map-animated { max-width: 100% !important; box-sizing: border-box !important; }
.matrix-section, .product-cards, .band-section, .stage-section, .simulator { overflow: hidden !important; }
.section-heading { align-items: flex-start !important; }
.section-heading h2, .product-cards h2, .band-section h2, .stage-section h2, .simulator h2, .matrix-section h2, .qa-section h2 { font-size: 2rem !important; line-height: 1.18 !important; letter-spacing: 0 !important; margin: 0 0 10px !important; }
.section-heading p, .product-cards > p, .band-section > p, .stage-section > p, .simulator > p, .matrix-section .section-heading p { font-size: 1.14rem !important; line-height: 1.7 !important; }
.matrix-scroll { overflow-x: visible !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scrollbar-gutter: stable both-edges !important; max-width: 100% !important; }
.matrix { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
.matrix-row { display: grid !important; grid-template-columns: minmax(150px, .62fr) repeat(var(--columns, 5), minmax(0, 1fr)) !important; margin-bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
.row-label, .matrix-cell, .matrix-group { word-break: keep-all !important; overflow-wrap: break-word !important; white-space: normal !important; }
.row-label { white-space: nowrap !important; }
.matrix-cell { display: flex !important; flex-direction: column !important; justify-content: center !important; grid-template-columns: none !important; text-align: center !important; font-size: .98rem !important; padding: 16px 12px !important; }
.matrix-cell span, .matrix-cell strong, .matrix-cell li { white-space: normal !important; overflow-wrap: break-word !important; word-break: keep-all !important; }
.matrix-cell::before { content: none !important; display: none !important; }
.decision-map-animated { position: relative !important; display: block !important; aspect-ratio: 16 / 5.2 !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; padding: 0 !important; border-radius: 10px !important; }
.decision-map-copy { position: absolute !important; inset: 7% 54% 7% 4% !important; min-height: 0 !important; overflow: hidden !important; z-index: 2 !important; }
.decision-map-copy::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: min(98%, 560px) !important; height: 58% !important; background: url("./decision-headline.svg") left top / contain no-repeat !important; opacity: .78 !important; pointer-events: none !important; }
.decision-map-copy p:not(.eyebrow) { position: absolute !important; z-index: 2 !important; left: 0 !important; right: 0 !important; top: 61% !important; margin: 0 !important; max-width: 620px !important; font-size: clamp(1rem, 1.25vw, 1.28rem) !important; line-height: 1.74 !important; color: #565963 !important; }
.decision-map-visual { position: absolute !important; inset: 6% 4% 6% 46% !important; min-height: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; overflow: hidden !important; pointer-events: none !important; }
.map-core { left: 50% !important; top: 50% !important; min-width: 190px !important; min-height: 70px !important; border-radius: 14px !important; background: rgba(36,36,42,.84) !important; color: #fff !important; pointer-events: auto !important; }
.map-node { min-width: 136px !important; min-height: 56px !important; padding: 12px 18px !important; border-radius: 12px !important; animation-name: mapNodeSeparate !important; animation-duration: calc(5.2s + var(--node-delay, 0) * .55s) !important; animation-delay: calc(var(--node-delay, 0) * -.45s) !important; pointer-events: none !important; }
.map-node-1 { left: 6% !important; top: 3% !important; --node-x: 34px; --node-y: -20px; }
.map-node-2 { right: 3% !important; top: 8% !important; --node-x: -34px; --node-y: 24px; }
.map-node-3 { left: 2% !important; top: 43% !important; --node-x: 36px; --node-y: 20px; }
.map-node-4 { right: 2% !important; top: 42% !important; --node-x: -36px; --node-y: -18px; }
.map-node-5 { left: 18% !important; bottom: 2% !important; --node-x: 28px; --node-y: -28px; }
.map-node-6 { right: 17% !important; bottom: 3% !important; --node-x: -28px; --node-y: 28px; }
@keyframes mapNodeSeparate { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(var(--node-x), var(--node-y)) scale(1.035); } 100% { transform: translate(calc(var(--node-x) * -.55), calc(var(--node-y) * -.45)) scale(.995); } }
.product-cards > div, .band-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; }
.product-card { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; padding: 22px 24px 18px !important; gap: 8px !important; justify-content: flex-start !important; border-radius: 10px !important; }
.product-card h3 { font-size: 2.35rem !important; line-height: 1.05 !important; min-height: auto !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.product-card .brand-favicon { width: 28px !important; height: 28px !important; }
.product-card strong { font-size: 1.18rem !important; line-height: 1.55 !important; }
.product-card ul { flex: 0 0 auto !important; margin: 6px 0 0 !important; gap: 2px !important; align-content: start !important; }
.product-card li { line-height: 1.28 !important; margin: 0 !important; }
.product-card a { margin-top: 8px !important; align-self: center !important; font-size: 16px !important; }
.stage-guide > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sim-controls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
.sim-controls label { min-width: 0 !important; font-size: 1.14rem !important; font-weight: 850 !important; }
.sim-controls select, .sim-controls input { width: 100% !important; font-weight: 850 !important; }
.sim-controls label:nth-child(4), .sim-controls label:nth-child(5) { max-width: 52% !important; }
.checkline { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; min-height: auto !important; padding: 16px 18px !important; border: 1px solid #d4d4d8 !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,246,247,.92)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(39,39,42,.07) !important; cursor: pointer !important; max-width: 100% !important; }
.checkline input { appearance: none !important; -webkit-appearance: none !important; width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border: 1.5px solid #a1a1aa !important; border-radius: 7px !important; background: #fff !important; position: relative !important; cursor: pointer !important; }
.checkline input:checked { background: #34353b !important; border-color: #34353b !important; box-shadow: 0 0 0 4px rgba(52,53,59,.08) !important; }
.checkline input:checked::after { content: "" !important; position: absolute !important; left: 8px !important; top: 4px !important; width: 7px !important; height: 13px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
.checkline span { color: #303036 !important; font-size: 1.25rem !important; font-weight: 850 !important; line-height: 1.25 !important; white-space: nowrap !important; }
@media (max-width: 920px) {
  .decision-map-animated { display: block !important; aspect-ratio: 16 / 5.2 !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; }
  .decision-map-copy { position: absolute !important; inset: 7% 54% 7% 4% !important; min-height: 0 !important; overflow: hidden !important; }
  .decision-map-copy::before { width: min(98%, 560px) !important; height: 58% !important; left: 0 !important; top: 0 !important; background-size: contain !important; }
  .decision-map-copy p:not(.eyebrow) { position: absolute !important; top: 61% !important; margin: 0 !important; font-size: clamp(.68rem, 2.1vw, 1.05rem) !important; line-height: 1.6 !important; max-width: 620px !important; }
  .decision-map-visual { position: absolute !important; inset: 6% 4% 6% 46% !important; min-height: 0 !important; overflow: hidden !important; }
  .map-core { min-width: clamp(104px, 17vw, 190px) !important; min-height: clamp(38px, 6.6vw, 70px) !important; font-size: clamp(.78rem, 2.35vw, 1.45rem) !important; }
  .map-node { min-width: clamp(78px, 14vw, 136px) !important; min-height: clamp(30px, 5.6vw, 56px) !important; padding: 7px 10px !important; font-size: clamp(.56rem, 1.65vw, .95rem) !important; }
  .product-cards > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; overflow-x: visible !important; padding-bottom: 0 !important; scroll-snap-type: none !important; }
  .product-card { scroll-snap-align: none !important; }
  .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow-x: visible !important; padding-bottom: 0 !important; }
  .stage-guide > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow-x: visible !important; padding-bottom: 0 !important; }
  .sim-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .sim-controls label:nth-child(4), .sim-controls label:nth-child(5) { max-width: none !important; }
  .matrix-scroll { overflow-x: auto !important; overflow-y: hidden !important; }
  .matrix { min-width: 1180px !important; width: max-content !important; max-width: none !important; }
  .matrix-row { grid-template-columns: minmax(220px, .78fr) repeat(var(--columns, 5), minmax(220px, 1fr)) !important; }
}



/* 2026-07-24 hard visual contract: no accidental mobile layout on PC, stable decision banner */
html, body { overflow-x: hidden !important; }

.decision-map-animated {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 5.2 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  contain: layout paint !important;
}

.decision-map-copy {
  position: absolute !important;
  inset: 7% 53% 7% 4% !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.decision-map-copy h2 { display: none !important; }

.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: min(100%, 580px) !important;
  height: 70% !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
  opacity: .78 !important;
  pointer-events: none !important;
}

.decision-map-copy p:not(.eyebrow) {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  top: 72% !important;
  margin: 0 !important;
  max-width: 620px !important;
  color: #565963 !important;
  font-size: clamp(1rem, 1.2vw, 1.24rem) !important;
  line-height: 1.72 !important;
}

.decision-map-visual {
  position: absolute !important;
  inset: 7% 4% 7% 46% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.map-line { opacity: .55 !important; }

.map-core {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  min-width: clamp(168px, 15vw, 220px) !important;
  min-height: clamp(56px, 5vw, 74px) !important;
  border-radius: 12px !important;
  background: rgba(38, 38, 44, .84) !important;
  color: #fff !important;
  font-size: clamp(1.05rem, 1.6vw, 1.7rem) !important;
  pointer-events: auto !important;
}

.map-node {
  position: absolute !important;
  z-index: 2 !important;
  min-width: clamp(116px, 11vw, 148px) !important;
  min-height: clamp(42px, 4vw, 56px) !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  animation-name: mapNodeSeparate !important;
  animation-duration: calc(5.5s + var(--node-delay, 0) * .55s) !important;
  animation-delay: calc(var(--node-delay, 0) * -.48s) !important;
}

.map-node-1 { left: 6% !important; top: 7% !important; --node-x: 28px; --node-y: -16px; }
.map-node-2 { right: 5% !important; top: 8% !important; --node-x: -28px; --node-y: 18px; }
.map-node-3 { left: 4% !important; top: 45% !important; --node-x: 26px; --node-y: 16px; }
.map-node-4 { right: 3% !important; top: 45% !important; --node-x: -28px; --node-y: -16px; }
.map-node-5 { left: 21% !important; bottom: 5% !important; --node-x: 22px; --node-y: -22px; }
.map-node-6 { right: 20% !important; bottom: 6% !important; --node-x: -22px; --node-y: 22px; }

@keyframes mapNodeSeparate {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--node-x), var(--node-y)) scale(1.035); }
  100% { transform: translate(calc(var(--node-x) * -.5), calc(var(--node-y) * -.45)) scale(.995); }
}

@media (min-width: 761px) {
  .matrix-section { overflow: visible !important; }
  .matrix-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .matrix {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .matrix-row {
    grid-template-columns: minmax(142px, .58fr) repeat(var(--columns, 5), minmax(0, 1fr)) !important;
  }
  .matrix-cell,
  .row-label {
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  .decision-map-animated {
    aspect-ratio: 16 / 5.2 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .decision-map-copy {
    inset: 7% 53% 7% 4% !important;
  }
  .decision-map-copy::before {
    width: min(100%, 580px) !important;
    height: 58% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    top: 60% !important;
    font-size: clamp(.68rem, 2vw, .98rem) !important;
    line-height: 1.55 !important;
  }
  .decision-map-visual {
    inset: 7% 4% 7% 46% !important;
  }
  .map-core {
    min-width: clamp(104px, 17vw, 168px) !important;
    min-height: clamp(36px, 6vw, 56px) !important;
    font-size: clamp(.78rem, 2.25vw, 1.12rem) !important;
  }
  .map-node {
    min-width: clamp(76px, 14vw, 116px) !important;
    min-height: clamp(28px, 5vw, 42px) !important;
    padding: 6px 9px !important;
    font-size: clamp(.55rem, 1.55vw, .85rem) !important;
  }
  .matrix-section { overflow: hidden !important; }
  .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .matrix {
    min-width: 1180px !important;
    width: max-content !important;
    max-width: none !important;
  }
  .matrix-row {
    grid-template-columns: minmax(220px, .78fr) repeat(var(--columns, 5), minmax(220px, 1fr)) !important;
  }
}

/* 2026-07-24 locked visual contract v2:
   PC and mobile share the same decision-banner aspect ratio.
   PC matrix must fit all 5 tools without becoming a mobile horizontal table.
*/
.decision-map-animated {
  aspect-ratio: 16 / 5.2 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.decision-map-copy {
  left: 4% !important;
  top: 7% !important;
  bottom: 7% !important;
  right: auto !important;
  width: 38% !important;
  overflow: hidden !important;
}

.decision-map-copy::before {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;
  height: 70% !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
}

.decision-map-copy p:not(.eyebrow) {
  top: 72% !important;
  max-width: 520px !important;
  font-size: clamp(.95rem, 1.18vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

.decision-map-visual {
  left: 43% !important;
  right: 4% !important;
  top: 7% !important;
  bottom: 7% !important;
  overflow: hidden !important;
}

.map-core {
  left: 50% !important;
  top: 50% !important;
  background: rgba(38, 38, 44, .86) !important;
}

.map-node-1 { left: 4% !important; top: 8% !important; }
.map-node-2 { right: 4% !important; top: 9% !important; }
.map-node-3 { left: 3% !important; top: 46% !important; }
.map-node-4 { right: 3% !important; top: 47% !important; }
.map-node-5 { left: 22% !important; bottom: 5% !important; }
.map-node-6 { right: 22% !important; bottom: 6% !important; }

@media (min-width: 921px) {
  .matrix-section { overflow: visible !important; }
  .matrix-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .matrix {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .matrix-row {
    grid-template-columns: minmax(160px, .62fr) repeat(5, minmax(0, 1fr)) !important;
  }
  .matrix-header .matrix-cell,
  .matrix-cell {
    min-width: 0 !important;
    overflow: visible !important;
  }
  .product-cards > div,
  .use-case-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
  .band-grid,
  .price-band-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
  .stage-guide > div,
  .tier-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .decision-map-copy {
    left: 4% !important;
    top: 7% !important;
    bottom: 7% !important;
    right: auto !important;
    width: 38% !important;
  }
  .decision-map-copy::before {
    width: 100% !important;
    height: 70% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    top: 72% !important;
    font-size: clamp(.62rem, 2vw, .95rem) !important;
    line-height: 1.5 !important;
  }
  .decision-map-visual {
    left: 43% !important;
    right: 4% !important;
    top: 7% !important;
    bottom: 7% !important;
  }
}

/* 2026-07-24 locked visual contract v3:
   The decision banner must keep one visual composition on PC and mobile.
   The comparison matrix fits desktop and keeps horizontal scroll only below tablet.
*/
.decision-map-animated {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 5.2 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  contain: layout paint !important;
}
.decision-map-animated::before {
  inset: 18px !important;
  border-radius: 8px !important;
}
.decision-map-copy {
  position: absolute !important;
  left: 4% !important;
  top: 7% !important;
  bottom: 7% !important;
  right: auto !important;
  width: 38% !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.decision-map-copy .eyebrow,
.decision-map-copy h2 {
  display: none !important;
}
.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: min(100%, 540px) !important;
  height: 58% !important;
  max-width: none !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
  opacity: .78 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.decision-map-copy p:not(.eyebrow) {
  position: absolute !important;
  left: 0 !important;
  top: 60% !important;
  width: min(100%, 560px) !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(.95rem, 1.1vw, 1.18rem) !important;
  line-height: 1.62 !important;
  color: #565963 !important;
  z-index: 2 !important;
}
.decision-map-visual {
  position: absolute !important;
  left: 46% !important;
  right: 5% !important;
  top: 8% !important;
  bottom: 8% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.decision-map-visual::before,
.decision-map-visual::after {
  inset: 4% 1% !important;
}
.map-core {
  left: 50% !important;
  top: 50% !important;
  min-width: 170px !important;
  min-height: 62px !important;
  border-radius: 10px !important;
  background: rgba(38, 38, 44, .88) !important;
  color: #fff !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}
.map-node {
  min-width: 120px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}
.map-node-1 { left: 4% !important; top: 6% !important; --node-x: -22px; --node-y: -18px; }
.map-node-2 { right: 4% !important; top: 7% !important; --node-x: 28px; --node-y: -18px; }
.map-node-3 { left: 2% !important; top: 43% !important; --node-x: -26px; --node-y: 22px; }
.map-node-4 { right: 2% !important; top: 44% !important; --node-x: 30px; --node-y: 18px; }
.map-node-5 { left: 14% !important; bottom: 3% !important; --node-x: -22px; --node-y: 28px; }
.map-node-6 { right: 14% !important; bottom: 4% !important; --node-x: 28px; --node-y: 26px; }

@media (min-width: 921px) {
  .matrix-section {
    overflow: visible !important;
  }
  .matrix-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .matrix {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .matrix-row {
    grid-template-columns: minmax(132px, .5fr) repeat(5, minmax(0, 1fr)) !important;
  }
  .matrix-header .matrix-cell,
  .matrix-cell {
    min-width: 0 !important;
    overflow: visible !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .brand-wordmark {
    font-size: clamp(1.35rem, 1.65vw, 1.9rem) !important;
  }
  .brand-favicon {
    width: 22px !important;
    height: 22px !important;
  }
  .product-cards > div,
  .use-case-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
  .band-grid,
  .price-band-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
  .stage-guide > div,
  .tier-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .decision-map-animated {
    aspect-ratio: 16 / 5.2 !important;
  }
  .decision-map-copy {
    left: 4% !important;
    top: 7% !important;
    bottom: 7% !important;
    width: 38% !important;
  }
  .decision-map-copy::before {
    width: 100% !important;
    height: 70% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    top: 72% !important;
    font-size: clamp(.62rem, 2vw, .9rem) !important;
    line-height: 1.5 !important;
  }
  .decision-map-visual {
    left: 46% !important;
    right: 5% !important;
    top: 8% !important;
    bottom: 8% !important;
  }
  .map-core {
    min-width: 110px !important;
    min-height: 44px !important;
    font-size: clamp(.82rem, 2.8vw, 1rem) !important;
  }
  .map-node {
    min-width: 78px !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: clamp(.65rem, 2vw, .82rem) !important;
  }
}



/* 2026-07-24 final visual contract:
   - Decision banner keeps the same aspect ratio on PC and mobile.
   - PC comparison matrix shows all five tools without horizontal scrolling.
   - Mobile comparison matrix keeps the table shape and scrolls horizontally.
*/
.decision-map-animated {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 5.2 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  contain: layout paint !important;
}
.decision-map-animated::before {
  inset: 18px !important;
  border-radius: 8px !important;
}
.decision-map-copy {
  position: absolute !important;
  left: 4% !important;
  top: 7% !important;
  bottom: 7% !important;
  width: 49% !important;
  right: auto !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.decision-map-copy .eyebrow,
.decision-map-copy h2 {
  display: none !important;
}
.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 70% !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
  opacity: .78 !important;
  pointer-events: none !important;
}
.decision-map-copy p:not(.eyebrow) {
  position: absolute !important;
  left: 0 !important;
  top: 72% !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: clamp(.95rem, 1.08vw, 1.18rem) !important;
  line-height: 1.64 !important;
  color: #565963 !important;
}
.decision-map-visual {
  position: absolute !important;
  left: 53% !important;
  right: 5% !important;
  top: 8% !important;
  bottom: 8% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.decision-map-visual::before,
.decision-map-visual::after {
  inset: 3% 0 !important;
}
.map-node,
.map-core {
  position: absolute !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
.map-node {
  min-width: 118px !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.map-core {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 176px !important;
  min-height: 62px !important;
  background: rgba(38, 38, 44, .88) !important;
  color: #fff !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}
.map-core-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.map-node-1 { left: 8% !important; top: 8% !important; --node-x: -20px; --node-y: -16px; }
.map-node-2 { right: 8% !important; top: 10% !important; --node-x: 24px; --node-y: -14px; }
.map-node-3 { left: 7% !important; top: 47% !important; --node-x: -24px; --node-y: 20px; }
.map-node-4 { right: 7% !important; top: 47% !important; --node-x: 26px; --node-y: 18px; }
.map-node-5 { left: 23% !important; bottom: 8% !important; --node-x: -20px; --node-y: 24px; }
.map-node-6 { right: 24% !important; bottom: 8% !important; --node-x: 24px; --node-y: 22px; }

@media (min-width: 921px) {
  .comparison-matrix,
  .matrix-section,
  .matrix-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .matrix-scroll {
    width: 100% !important;
    max-width: 100% !important;
  }
  .matrix {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .matrix-header,
  .matrix-row {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(118px, .54fr) repeat(5, minmax(0, 1fr)) !important;
  }
  .matrix-cell,
  .row-label {
    min-width: 0 !important;
    max-width: none !important;
  }
  .matrix-cell {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: clamp(.74rem, .78vw, .9rem) !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    overflow: hidden !important;
  }
  .matrix-header .matrix-cell {
    padding: 17px 7px !important;
  }
  .matrix-header .brand-wordmark {
    max-width: 100% !important;
    font-size: clamp(.98rem, 1.13vw, 1.28rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .matrix-header .brand-favicon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
  .product-cards > div,
  .use-case-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .product-card {
    min-height: auto !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .product-card ul {
    margin: 8px 0 10px !important;
    display: grid !important;
    gap: 7px !important;
  }
  .product-card li {
    margin: 0 !important;
    line-height: 1.42 !important;
  }
  .product-card a {
    margin-top: 8px !important;
    align-self: flex-start !important;
    font-size: 16px !important;
  }
  .band-grid,
  .price-band-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .stage-guide > div,
  .tier-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 920px) {
  .decision-map-animated {
    aspect-ratio: 16 / 5.2 !important;
  }
  .decision-map-copy {
    left: 4% !important;
    top: 7% !important;
    bottom: 7% !important;
    width: 49% !important;
  }
  .decision-map-copy::before {
    width: 100% !important;
    height: 70% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    top: 72% !important;
    font-size: clamp(.54rem, 1.85vw, .84rem) !important;
    line-height: 1.46 !important;
  }
  .decision-map-visual {
    left: 53% !important;
    right: 5% !important;
    top: 8% !important;
    bottom: 8% !important;
  }
  .map-node {
    min-width: 76px !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: clamp(.52rem, 1.8vw, .76rem) !important;
  }
  .map-core {
    min-width: 104px !important;
    min-height: 38px !important;
    font-size: clamp(.7rem, 2.35vw, .95rem) !important;
  }
  .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .matrix {
    width: max-content !important;
    min-width: 1120px !important;
    max-width: none !important;
  }
  .matrix-header,
  .matrix-row {
    display: grid !important;
    grid-template-columns: minmax(136px, .55fr) repeat(5, minmax(184px, 1fr)) !important;
  }
}


/* 2026-07-24 final hard contract.
   This block is intentionally last: no earlier responsive rule may override it. */
.decision-map-animated,
.decision-map-animated * {
  box-sizing: border-box !important;
}
.decision-map-animated {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 5.8 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}
.decision-map-animated::before {
  inset: 18px !important;
  border-radius: 8px !important;
}
.decision-map-copy {
  position: absolute !important;
  left: 3.8% !important;
  top: 8% !important;
  width: 39% !important;
  height: 84% !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
.decision-map-copy .eyebrow,
.decision-map-copy h2 {
  display: none !important;
}
.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 88% !important;
  height: 50% !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
  opacity: .62 !important;
}
.decision-map-copy p:not(.eyebrow) {
  position: absolute !important;
  left: 0 !important;
  right: 2% !important;
  top: 57% !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 92% !important;
  color: #565a64 !important;
  font-size: clamp(.72rem, .78vw, .88rem) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: .01em !important;
}
.decision-map-visual {
  position: absolute !important;
  left: 49% !important;
  right: 4.5% !important;
  top: 9% !important;
  height: 82% !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}
.map-core {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 134px !important;
  min-height: 42px !important;
  padding: 7px 15px !important;
  border-radius: 9px !important;
  background: rgba(38, 38, 44, .78) !important;
  color: #fff !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}
.map-node {
  position: absolute !important;
  min-width: 80px !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  border-radius: 9px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  animation: mapNodeDriftFinal 8.8s ease-in-out infinite alternate !important;
}
.map-node-1 { left: 5% !important; top: 6% !important; --node-x: -12px; --node-y: -9px; }
.map-node-2 { right: 5% !important; top: 7% !important; --node-x: 12px; --node-y: -9px; }
.map-node-3 { left: 2% !important; top: 41% !important; --node-x: -12px; --node-y: 10px; }
.map-node-4 { right: 2% !important; top: 41% !important; --node-x: 12px; --node-y: 10px; }
.map-node-5 { left: 16% !important; bottom: 6% !important; --node-x: -10px; --node-y: 12px; }
.map-node-6 { right: 16% !important; bottom: 6% !important; --node-x: 10px; --node-y: 12px; }
@keyframes mapNodeDriftFinal {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--node-x), var(--node-y)); }
  100% { transform: translate(calc(var(--node-x) * -.72), calc(var(--node-y) * -.72)); }
}
@media (min-width: 921px) {
  .matrix-section .matrix-scroll {
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .matrix-section .matrix {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .matrix-section .matrix-header,
  .matrix-section .matrix-row {
    grid-template-columns: minmax(82px, .34fr) repeat(var(--columns, 5), minmax(0, 1fr)) !important;
  }
  .matrix-section .matrix-cell {
    min-width: 0 !important;
    padding: 8px 3px !important;
    font-size: clamp(.48rem, .50vw, .60rem) !important;
    line-height: 1.44 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .matrix-section .row-label {
    min-width: 0 !important;
    padding-right: 6px !important;
  }
  .matrix-section .brand-lockup {
    justify-content: center !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  .matrix-section .brand-wordmark {
    font-size: clamp(.50rem, .62vw, .72rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
  .matrix-section .brand-favicon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
}
@media (max-width: 920px) {
  .matrix-section .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .matrix-section .matrix {
    width: max-content !important;
    min-width: 1120px !important;
    max-width: none !important;
  }
  .matrix-section .matrix-header,
  .matrix-section .matrix-row {
    grid-template-columns: minmax(150px, .55fr) repeat(var(--columns, 5), minmax(184px, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .decision-map-animated {
    width: 100% !important;
    aspect-ratio: 16 / 5.45 !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    font-size: clamp(.38rem, 1.26vw, .58rem) !important;
    line-height: 1.48 !important;
  }
  .map-core {
    min-width: 74px !important;
    min-height: 28px !important;
    padding: 5px 7px !important;
    font-size: clamp(.5rem, 1.62vw, .74rem) !important;
  }
  .map-node {
    min-width: 52px !important;
    min-height: 22px !important;
    padding: 4px 6px !important;
    font-size: clamp(.38rem, 1.18vw, .6rem) !important;
  }
}


/* 2026-07-24 release hard contract.
   This block is intentionally last.
   PC and mobile share the same decision-banner artboard ratio.
   PC matrix shows five tools in place; mobile keeps the table and scrolls horizontally. */
.decision-map-animated,
.decision-map-animated * { box-sizing: border-box !important; }
.decision-map-animated {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .36fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 5.8 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  contain: layout paint !important;
  isolation: isolate !important;
}
.decision-map-animated::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border: 1px dashed rgba(113, 113, 122, .32) !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.decision-map-copy {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 24px 0 24px 30px !important;
  overflow: hidden !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.decision-map-copy .eyebrow,
.decision-map-copy h2 { display: none !important; }
.decision-map-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: min(100%, 520px) !important;
  height: 56% !important;
  background: url("./decision-headline.svg") left top / contain no-repeat !important;
  opacity: .56 !important;
  pointer-events: none !important;
}
.decision-map-copy p:not(.eyebrow) {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(100%, 540px) !important;
  margin: clamp(170px, 16vw, 248px) 0 0 !important;
  color: #565a64 !important;
  font-size: clamp(.72rem, .86vw, .96rem) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: .01em !important;
}
.decision-map-visual {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}
.decision-map-visual::before,
.decision-map-visual::after,
.map-line { pointer-events: none !important; z-index: 1 !important; }
.map-core,
.map-node {
  position: absolute !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border-radius: 9px !important;
}
.map-core {
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 142px !important;
  min-height: 44px !important;
  padding: 9px 16px !important;
  background: rgba(38, 38, 44, .78) !important;
  color: #fff !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  font-size: clamp(.9rem, 1.2vw, 1.08rem) !important;
  text-align: center !important;
}
.map-node {
  min-width: 82px !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  animation: mapNodeDriftRelease 8.8s ease-in-out infinite alternate !important;
  font-size: clamp(.62rem, .82vw, .82rem) !important;
}
.map-node-1 { left: 8% !important; top: 7% !important; --node-x: -22px; --node-y: -14px; }
.map-node-2 { right: 9% !important; top: 8% !important; --node-x: 22px; --node-y: -14px; }
.map-node-3 { left: 5% !important; top: 45% !important; --node-x: -21px; --node-y: 18px; }
.map-node-4 { right: 5% !important; top: 45% !important; --node-x: 21px; --node-y: 18px; }
.map-node-5 { left: 21% !important; bottom: 7% !important; --node-x: -18px; --node-y: 20px; }
.map-node-6 { right: 21% !important; bottom: 8% !important; --node-x: 18px; --node-y: 20px; }
@keyframes mapNodeDriftRelease {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--node-x), var(--node-y)); }
  100% { transform: translate(calc(var(--node-x) * -.72), calc(var(--node-y) * -.72)); }
}
.product-grid,
.usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.product-card,
.usecase-card {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .72rem !important;
}
.product-card ul,
.usecase-card ul { gap: .42rem !important; margin-bottom: .45rem !important; }
.product-card .pill-button,
.usecase-card .pill-button { margin-top: .25rem !important; align-self: center !important; font-size: 16px !important; }
.price-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.stage-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sim-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.checkline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .85rem !important;
  padding: .95rem 1rem !important;
  border-radius: 10px !important;
  background: #f6f6f7 !important;
  font-weight: 800 !important;
}
.checkline input[type="checkbox"] { width: 24px !important; height: 24px !important; accent-color: #25272c !important; }
@media (min-width: 921px) {
  .matrix-section .matrix-scroll {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .matrix-section .matrix { width: 100% !important; min-width: 0 !important; max-width: 100% !important; display: block !important; }
  .matrix-section .matrix-header,
  .matrix-section .matrix-row { display: grid !important; grid-template-columns: minmax(126px, .48fr) repeat(var(--columns, 5), minmax(0, 1fr)) !important; }
  .matrix-section .matrix-cell {
    min-width: 0 !important;
    padding: 10px 6px !important;
    font-size: clamp(.58rem, .66vw, .8rem) !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .matrix-section .matrix-axis,
  .matrix-section .matrix-row-label { white-space: nowrap !important; overflow-wrap: normal !important; }
  .matrix-section .brand-wordmark { font-size: clamp(.68rem, .92vw, 1.05rem) !important; line-height: 1.05 !important; white-space: nowrap !important; overflow-wrap: normal !important; }
  .matrix-section .brand-favicon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
}
@media (max-width: 920px) {
  .decision-map-animated {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    aspect-ratio: auto !important;
  }
  .decision-map-copy {
    padding: 22px 18px 0 !important;
  }
  .decision-map-copy::before {
    width: min(100%, 560px) !important;
    height: 52% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    margin-top: clamp(148px, 38vw, 208px) !important;
    font-size: clamp(.76rem, 2.1vw, 1rem) !important;
    line-height: 1.55 !important;
  }
  .decision-map-visual {
    min-height: clamp(250px, 56vw, 420px) !important;
  }
  .map-core {
    min-width: clamp(104px, 17vw, 160px) !important;
    min-height: clamp(38px, 6.6vw, 58px) !important;
  }
  .map-node {
    min-width: clamp(72px, 14vw, 120px) !important;
    min-height: clamp(30px, 5vw, 46px) !important;
    padding: 7px 10px !important;
  }
  .matrix-section .matrix-scroll { overflow-x: auto !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; -webkit-overflow-scrolling: touch !important; display: block !important; }
  .matrix-section .matrix { width: max-content !important; min-width: 920px !important; max-width: none !important; }
  .matrix-section .matrix-header,
  .matrix-section .matrix-row { display: grid !important; grid-template-columns: minmax(108px, .34fr) repeat(var(--columns, 5), minmax(120px, 1fr)) !important; }
  .matrix-section .matrix-cell {
    padding: 8px 6px !important;
    font-size: clamp(.54rem, 1.6vw, .86rem) !important;
  }
  .matrix-section .brand-wordmark {
    font-size: clamp(.62rem, 1.02vw, .92rem) !important;
  }
  .sim-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .decision-map-animated { width: 100% !important; max-width: 100% !important; }
  .decision-map-copy p:not(.eyebrow) { font-size: clamp(.68rem, 3.1vw, .92rem) !important; line-height: 1.5 !important; }
  .map-core { min-width: 82px !important; min-height: 30px !important; padding: 5px 8px !important; font-size: clamp(.5rem, 1.58vw, .7rem) !important; }
  .map-node { min-width: 52px !important; min-height: 22px !important; padding: 4px 6px !important; font-size: clamp(.38rem, 1.18vw, .6rem) !important; }
}
/* Final no-overlap decision banner contract. Keep desktop and mobile on the same 16:5.8 artboard. */
.decision-map-animated {
  position: relative !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  aspect-ratio: 16 / 5.8 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.decision-map-copy {
  left: 3.8% !important;
  top: 7% !important;
  width: 39.5% !important;
  height: 86% !important;
  overflow: hidden !important;
  z-index: 3 !important;
}
.decision-map-copy::before {
  left: 0 !important;
  top: 1% !important;
  width: 82% !important;
  height: 57% !important;
  opacity: .58 !important;
}
.decision-map-copy p:not(.eyebrow) {
  left: 0 !important;
  top: 61% !important;
  width: 86% !important;
  font-size: clamp(.72rem, .84vw, .94rem) !important;
  line-height: 1.55 !important;
  color: #5b5f68 !important;
}
.decision-map-visual {
  left: 44.8% !important;
  right: auto !important;
  width: 51% !important;
  top: 7.5% !important;
  height: 85% !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
.decision-map-visual::before {
  width: 112% !important;
  height: 112% !important;
  left: -8% !important;
  top: -7% !important;
  opacity: .62 !important;
  animation: mapOrbitRelease 12s ease-in-out infinite alternate !important;
}
.decision-map-visual::after {
  width: 88% !important;
  height: 88% !important;
  right: -8% !important;
  bottom: -9% !important;
  opacity: .42 !important;
  animation: mapOrbitRelease 15s ease-in-out infinite alternate-reverse !important;
}
.map-core {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 148px !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: rgba(38, 39, 45, .84) !important;
  box-shadow: 0 16px 32px rgba(26, 27, 31, .24) !important;
  z-index: 40 !important;
  animation: coreGlowSafe 4.8s ease-in-out infinite !important;
}
.map-node {
  width: 112px !important;
  min-width: 112px !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: clamp(.58rem, .72vw, .78rem) !important;
  line-height: 1.15 !important;
  z-index: 14 !important;
  animation: mapNodeDriftSafe 8.5s ease-in-out infinite alternate !important;
}
.map-node-1 { left: 13% !important; top: 10% !important; --node-x: -12px; --node-y: -10px; }
.map-node-2 { right: 10% !important; top: 11% !important; --node-x: 12px; --node-y: -10px; }
.map-node-3 { left: 4% !important; top: 47% !important; --node-x: -12px; --node-y: 8px; }
.map-node-4 { right: 4% !important; top: 47% !important; --node-x: 12px; --node-y: 8px; }
.map-node-5 { left: 22% !important; bottom: 8% !important; --node-x: -10px; --node-y: 10px; }
.map-node-6 { right: 22% !important; bottom: 8% !important; --node-x: 10px; --node-y: 10px; }
@keyframes mapNodeDriftSafe {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--node-x), var(--node-y)); }
  100% { transform: translate(calc(var(--node-x) * -.45), calc(var(--node-y) * -.45)); }
}
@keyframes coreGlowSafe {
  0%, 100% {
    opacity: .94;
    box-shadow: 0 16px 32px rgba(26, 27, 31, .24);
  }
  50% {
    opacity: 1;
    box-shadow: 0 20px 42px rgba(26, 27, 31, .34);
  }
}
.checkline { justify-content: flex-start !important; }
@media (max-width: 920px) {
  .decision-map-animated {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    aspect-ratio: auto !important;
  }
  .decision-map-copy {
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 22px 18px 0 !important;
  }
  .decision-map-copy::before {
    width: min(100%, 560px) !important;
    height: 52% !important;
  }
  .decision-map-copy p:not(.eyebrow) {
    margin-top: clamp(148px, 38vw, 208px) !important;
    font-size: clamp(.76rem, 2.1vw, 1rem) !important;
    line-height: 1.55 !important;
  }
  .decision-map-visual {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: clamp(250px, 56vw, 420px) !important;
  }
  .map-core {
    min-width: clamp(104px, 17vw, 160px) !important;
    min-height: clamp(38px, 6.6vw, 58px) !important;
  }
  .map-node {
    min-width: clamp(72px, 14vw, 120px) !important;
    min-height: clamp(30px, 5vw, 46px) !important;
    padding: 7px 10px !important;
  }
  .matrix-section .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  .matrix-section .matrix { width: max-content !important; min-width: 920px !important; max-width: none !important; }
  .matrix-section .matrix-header,
  .matrix-section .matrix-row { display: grid !important; grid-template-columns: minmax(108px, .34fr) repeat(var(--columns, 5), minmax(120px, 1fr)) !important; }
  .matrix-section .matrix-cell {
    padding: 8px 6px !important;
    font-size: clamp(.54rem, 1.6vw, .86rem) !important;
  }
  .matrix-section .brand-wordmark {
    font-size: clamp(.62rem, 1.02vw, .92rem) !important;
  }
  .sim-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .decision-map-animated { width: 100% !important; max-width: 100% !important; }
  .decision-map-copy p:not(.eyebrow) { font-size: clamp(.68rem, 3.1vw, .92rem) !important; line-height: 1.5 !important; }
  .map-core { min-width: 82px !important; min-height: 30px !important; padding: 5px 8px !important; font-size: clamp(.5rem, 1.58vw, .7rem) !important; }
  .map-node { min-width: 52px !important; min-height: 22px !important; padding: 4px 6px !important; font-size: clamp(.38rem, 1.18vw, .6rem) !important; }
}


/* 2026-07-30 element API contract: target only decision banner, price bands, matrix CTA, section rhythm. */
.decision-map-animated {
  position: relative !important;
  display: block !important;
  width: min(100%, 1160px) !important;
  aspect-ratio: 3380 / 1248 !important;
  min-height: 0 !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #c7f3ef !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
.decision-map-animated::before,
.decision-map-animated::after { content: none !important; display: none !important; }
.decision-banner-template {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.decision-map-copy,
.decision-map-visual { display: none !important; opacity: 0 !important; pointer-events: none !important; }
.decision-banner-hotspot {
  position: absolute !important;
  left: 43.8% !important;
  bottom: 13.2% !important;
  z-index: 2 !important;
  width: 16% !important;
  height: 23% !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}
.price-band-section {
  position: relative !important;
  padding: 34px 44px 44px !important;
  margin-block: 56px !important;
  background: linear-gradient(180deg, #fbfdff, #f6f9fc) !important;
  overflow: hidden !important;
}
.price-band-section::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 30% !important;
  height: 100% !important;
  opacity: .34 !important;
  background: radial-gradient(circle, rgba(96,137,214,.22) 0 2px, transparent 3px) 0 0 / 18px 18px !important;
  pointer-events: none !important;
}
.price-band-heading {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1060px !important;
  margin: 0 0 28px !important;
}
.price-band-heading h2,
.matrix-section .section-heading h2,
.product-cards > h2,
.stage-guide > h2,
.sim-header h2 {
  font-size: clamp(1.72rem, 2.35vw, 2.85rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 14px !important;
}
.price-band-heading p {
  display: block !important;
  width: min(100%, 1120px) !important;
  max-width: none !important;
  margin: 0 !important;
  color: #596170 !important;
  font-size: clamp(.98rem, 1.1vw, 1.14rem) !important;
  line-height: 1.65 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.price-band-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.price-band-card {
  min-height: 382px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 24px 22px 22px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #dbe3ee !important;
  border-top-width: 4px !important;
  box-shadow: 0 14px 30px rgba(25,34,48,.12) !important;
}
.band-trial { border-top-color: #c9d6e8 !important; }
.band-solo { border-top-color: #f3b36f !important; }
.band-growth { border-top-color: #9472de !important; }
.band-scale { border-top-color: #58b98c !important; }
.price-band-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #f3f6fa !important;
  border: 1px solid #d9e1eb !important;
  color: #495160 !important;
  font-size: clamp(.78rem, .92vw, .92rem) !important;
  font-weight: 750 !important;
  margin-bottom: 22px !important;
}
.price-line {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  white-space: nowrap !important;
  margin-bottom: 14px !important;
  color: #0f172a !important;
}
.price-line strong {
  font-size: clamp(1.64rem, 2.16vw, 2.62rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
}
.price-line span {
  display: inline !important;
  font-size: clamp(.82rem, .95vw, .98rem) !important;
  color: #4b5563 !important;
  white-space: nowrap !important;
}
.price-band-card p {
  font-size: clamp(.86rem, .96vw, .98rem) !important;
  line-height: 1.62 !important;
  margin: 0 0 20px !important;
  color: #111827 !important;
}
.price-band-card h3 {
  font-size: .92rem !important;
  line-height: 1.35 !important;
  margin: auto 0 10px !important;
}
.price-band-card ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
}
.price-band-card li,
.tool-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: clamp(.82rem, .94vw, .96rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}
.tool-chip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.42) !important;
  color: inherit !important;
  font-size: .78em !important;
  font-weight: 950 !important;
  flex: 0 0 auto !important;
}
.tool-typeform { background: #efe2ff !important; color: #65418f !important; border-color: #dec8f5 !important; }
.tool-jotform { background: #e8f0ff !important; color: #315aa6 !important; border-color: #cfdbf8 !important; }
.tool-tally { background: #dff5ec !important; color: #197153 !important; border-color: #c6eadb !important; }
.tool-fillout { background: #ffe6c7 !important; color: #965518 !important; border-color: #f6cf9e !important; }
.tool-paperform { background: #dff4f8 !important; color: #287487 !important; border-color: #c6e7ef !important; }
.price-band-card a {
  margin-top: auto !important;
  align-self: flex-end !important;
  color: #111827 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.matrix-section, .product-cards, .stage-guide, .simulator { margin-block: 56px !important; }
.matrix-section { padding: 32px 30px !important; }
.matrix-header .matrix-cell { padding: 18px 8px 16px !important; gap: 7px !important; }
.matrix-header .brand-wordmark { font-size: clamp(1rem, 1.08vw, 1.28rem) !important; line-height: 1.08 !important; }
.matrix-header .brand-favicon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
.matrix-official-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: fit-content !important;
  max-width: 92% !important;
  margin-top: 7px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #20242b !important;
  color: #fff !important;
  font-size: clamp(.58rem, .64vw, .7rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.sim-result { grid-template-columns: minmax(0, 1fr) !important; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.76)) !important; }
.sim-result h3 { font-size: clamp(1.35rem, 1.82vw, 2.02rem) !important; line-height: 1.18 !important; }
.sim-result p { font-size: clamp(.98rem, 1.12vw, 1.18rem) !important; line-height: 1.78 !important; }
.sim-result #result-visual { display: none !important; }
@media (max-width: 980px) {
  .price-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .decision-map-animated { aspect-ratio: 3380 / 1248 !important; }
  .price-band-grid { grid-template-columns: 1fr !important; }
  .price-band-section { padding: 30px 20px 36px !important; }
}
/* Atomic element: b2b-plan-growth-feature-card */
.plan-growth-stage {
  position: relative;
  overflow: hidden;
  padding: 18px 24px 20px;
  background: linear-gradient(112deg, rgba(255,255,255,.98), rgba(247,251,252,.98));
  border: 1px solid rgba(215, 222, 231, .9);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(30, 41, 59, .08);
}
.plan-growth-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(84, 151, 210, .22) 1.2px, transparent 1.6px), radial-gradient(circle, rgba(244, 180, 96, .2) 1px, transparent 1.4px);
  background-size: 18px 18px, 23px 23px;
  background-position: right 24px top 10px, right 4px top 2px;
  mask-image: linear-gradient(90deg, transparent 0 68%, #000 82% 100%);
}
.plan-growth-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}
.plan-growth-heading h2 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.plan-growth-heading div { text-align: center; }
.plan-growth-heading p {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
  color: #111827;
}
.plan-growth-heading span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}
.plan-growth-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.plan-growth-card {
  position: relative;
  min-height: 150px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(195, 205, 218, .95);
  border-top: 4px solid var(--stage-accent, #9ca3af);
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 26px rgba(15,23,42,.12);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 4px;
}
.plan-growth-free { --stage-accent: #cbd5e1; --stage-soft: #f3f7fb; --stage-ink: #334155; }
.plan-growth-starter { --stage-accent: #f2b171; --stage-soft: #fff3e5; --stage-ink: #8a4b16; }
.plan-growth-pro { --stage-accent: #8b6de8; --stage-soft: #f1ecff; --stage-ink: #5b3fb6; }
.plan-growth-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.plan-growth-pill {
  display: inline-flex;
  align-items: center;
  max-width: 62%;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--stage-soft);
  border: 1px solid rgba(190, 200, 214, .75);
  color: #4b5563;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.plan-growth-card-top strong {
  color: #050816;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: .88;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.plan-growth-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  color: var(--stage-ink);
  font-size: 19px;
  line-height: 1;
}
.plan-growth-feature-icon {
  position: absolute;
  right: 18px;
  top: 42px;
  font-size: 42px;
  opacity: .9;
}
.plan-growth-card h3 {
  margin: 0;
  color: #111827;
  font-size: clamp(17px, 1.25vw, 24px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.04em;
}
.plan-growth-card p {
  margin: 0;
  max-width: 96%;
  color: #18202c;
  font-size: clamp(10px, .78vw, 13px);
  line-height: 1.45;
  font-weight: 650;
}
.plan-growth-card dl {
  margin: 0;
  color: #1f2937;
  font-size: clamp(9px, .68vw, 12px);
  line-height: 1.35;
}
.plan-growth-card dt { margin: 0 0 2px; font-weight: 800; }
.plan-growth-card dd { margin: 0; color: #334155; font-weight: 650; }
.plan-growth-card a {
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  color: #111827;
  font-size: clamp(9px, .68vw, 12px);
  line-height: 1;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.plan-growth-arrow {
  align-self: center;
  justify-self: center;
  color: #374151;
  font-size: 26px;
  font-weight: 800;
  opacity: .78;
}
@media (max-width: 900px) {
  .plan-growth-stage { padding: 18px; }
  .plan-growth-heading { grid-template-columns: 1fr; gap: 6px; }
  .plan-growth-heading div { text-align: left; }
  .plan-growth-row { grid-template-columns: 1fr; }
  .plan-growth-arrow { transform: rotate(90deg); }
  .plan-growth-card { min-height: 0; }
}
/* Final override: b2b-plan-growth-feature-card must stay one compact strip */
section.plan-growth-stage {
  padding: 16px 24px 18px !important;
}
section.plan-growth-stage .plan-growth-heading {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1fr !important;
  margin-bottom: 14px !important;
}
section.plan-growth-stage .plan-growth-heading h2 {
  font-size: clamp(20px, 1.8vw, 29px) !important;
}
section.plan-growth-stage .plan-growth-heading p {
  font-size: clamp(17px, 1.35vw, 23px) !important;
}
section.plan-growth-stage .plan-growth-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}
section.plan-growth-stage .plan-growth-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 158px !important;
  min-height: 158px !important;
  padding: 10px 12px 10px !important;
  gap: 2px !important;
  overflow: hidden !important;
}
section.plan-growth-stage .plan-growth-arrow {
  flex: 0 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
section.plan-growth-stage .plan-growth-card-top {
  height: 34px !important;
  align-items: start !important;
}
section.plan-growth-stage .plan-growth-pill {
  max-width: 58% !important;
  padding: 3px 7px !important;
  font-size: 9px !important;
}
section.plan-growth-stage .plan-growth-card-top strong {
  font-size: clamp(26px, 2.45vw, 38px) !important;
  letter-spacing: -.055em !important;
}
section.plan-growth-stage .plan-growth-icons {
  height: 17px !important;
  font-size: 15px !important;
}
section.plan-growth-stage .plan-growth-feature-icon {
  position: static !important;
  font-size: 15px !important;
  opacity: 1 !important;
}
section.plan-growth-stage .plan-growth-card h3 {
  font-size: clamp(14px, 1.02vw, 18px) !important;
  line-height: 1.05 !important;
}
section.plan-growth-stage .plan-growth-card p {
  font-size: clamp(8px, .58vw, 10px) !important;
  line-height: 1.32 !important;
  max-width: 100% !important;
}
section.plan-growth-stage .plan-growth-card dl {
  font-size: clamp(7px, .48vw, 9px) !important;
  line-height: 1.24 !important;
}
section.plan-growth-stage .plan-growth-card a {
  min-height: 24px !important;
  padding: 5px 10px !important;
  font-size: clamp(7px, .48vw, 9px) !important;
}
@media (max-width: 900px) {
  section.plan-growth-stage .plan-growth-row { flex-direction: column !important; }
  section.plan-growth-stage .plan-growth-card { height: auto !important; min-height: 150px !important; }
  section.plan-growth-stage .plan-growth-arrow { transform: rotate(90deg) !important; flex-basis: 18px !important; }
}
/* Quality correction: b2b-plan-growth-feature-card readability and containment */
section.plan-growth-stage .plan-growth-card {
  height: 204px !important;
  min-height: 204px !important;
  padding: 12px 18px 14px !important;
  gap: 5px !important;
  overflow: visible !important;
}
section.plan-growth-stage .plan-growth-card-top {
  height: 42px !important;
  padding-right: 10px !important;
}
section.plan-growth-stage .plan-growth-card-top strong {
  margin-right: 6px !important;
  font-size: clamp(30px, 2.55vw, 41px) !important;
}
section.plan-growth-stage .plan-growth-pill {
  font-size: 10px !important;
  padding: 4px 8px !important;
}
section.plan-growth-stage .plan-growth-icons {
  height: 20px !important;
  font-size: 18px !important;
}
section.plan-growth-stage .plan-growth-feature-icon {
  font-size: 18px !important;
}
section.plan-growth-stage .plan-growth-card h3 {
  font-size: clamp(18px, 1.28vw, 22px) !important;
  line-height: 1.08 !important;
}
section.plan-growth-stage .plan-growth-card p {
  font-size: clamp(12px, .82vw, 14px) !important;
  line-height: 1.34 !important;
  font-weight: 720 !important;
}
section.plan-growth-stage .plan-growth-card dl {
  font-size: clamp(11px, .72vw, 13px) !important;
  line-height: 1.28 !important;
}
section.plan-growth-stage .plan-growth-card a {
  min-width: 132px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  font-size: clamp(10px, .68vw, 12px) !important;
  border-radius: 10px !important;
}
section.plan-growth-stage .plan-growth-row {
  align-items: stretch !important;
}
/* Template alignment: low horizontal cards, CTA shifted lower but visible */
section.plan-growth-stage {
  padding: 15px 24px 18px !important;
}
section.plan-growth-stage .plan-growth-heading {
  margin-bottom: 12px !important;
}
section.plan-growth-stage .plan-growth-row {
  gap: 11px !important;
}
section.plan-growth-stage .plan-growth-card {
  height: 174px !important;
  min-height: 174px !important;
  padding: 10px 18px 12px !important;
  overflow: hidden !important;
  grid-template-rows: 30px 18px 22px auto 34px !important;
  gap: 2px !important;
}
section.plan-growth-stage .plan-growth-card-top {
  height: 30px !important;
  padding-right: 18px !important;
}
section.plan-growth-stage .plan-growth-card-top strong {
  margin-right: 12px !important;
  font-size: clamp(30px, 2.55vw, 39px) !important;
  line-height: .9 !important;
}
section.plan-growth-stage .plan-growth-pill {
  font-size: 9px !important;
  padding: 3px 7px !important;
}
section.plan-growth-stage .plan-growth-icons {
  height: 18px !important;
  font-size: 17px !important;
}
section.plan-growth-stage .plan-growth-feature-icon {
  font-size: 17px !important;
}
section.plan-growth-stage .plan-growth-card h3 {
  font-size: clamp(16px, 1.12vw, 20px) !important;
  line-height: 1.05 !important;
}
section.plan-growth-stage .plan-growth-card p {
  font-size: clamp(11px, .74vw, 13px) !important;
  line-height: 1.28 !important;
  font-weight: 720 !important;
}
section.plan-growth-stage .plan-growth-card dl {
  font-size: clamp(9.5px, .61vw, 11px) !important;
  line-height: 1.2 !important;
}
section.plan-growth-stage .plan-growth-card dt {
  margin-bottom: 1px !important;
}
section.plan-growth-stage .plan-growth-card a {
  align-self: end !important;
  justify-self: end !important;
  min-width: 130px !important;
  min-height: 30px !important;
  padding: 7px 13px !important;
  font-size: clamp(9px, .62vw, 11px) !important;
  transform: translateY(2px) !important;
}
/* Quality pass: pass containment/readability while preserving template-like low cards */
section.plan-growth-stage .plan-growth-card {
  height: 192px !important;
  min-height: 192px !important;
  padding: 10px 18px 13px !important;
  grid-template-rows: 30px 18px 22px auto 36px !important;
}
section.plan-growth-stage .plan-growth-card p {
  font-size: 12px !important;
  line-height: 1.26 !important;
}
section.plan-growth-stage .plan-growth-card dl {
  font-size: 10px !important;
  line-height: 1.18 !important;
}
section.plan-growth-stage .plan-growth-card a {
  min-width: 136px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  font-size: 10px !important;
}
/* Match plan growth body/tool chips to price-band cards */
section.plan-growth-stage .plan-growth-card p {
  font-size: clamp(.86rem, .96vw, .98rem) !important;
  line-height: 1.42 !important;
}
section.plan-growth-stage .plan-growth-card dl {
  font-size: clamp(.78rem, .86vw, .92rem) !important;
  line-height: 1.28 !important;
}
section.plan-growth-stage .plan-growth-card dd {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 3px !important;
}
section.plan-growth-stage .plan-growth-card .tool-chip {
  padding: 4px 8px !important;
  font-size: clamp(.74rem, .82vw, .86rem) !important;
  line-height: 1 !important;
}
section.plan-growth-stage .plan-growth-card {
  height: 228px !important;
  min-height: 228px !important;
  grid-template-rows: 30px 18px 22px auto 36px !important;
}
/* Match plan growth CTA to price-band CTA */
section.plan-growth-stage .plan-growth-card a {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: auto !important;
  align-self: end !important;
  justify-self: end !important;
  color: #111827 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  font-size: clamp(.82rem, .94vw, .96rem) !important;
  line-height: 1.1 !important;
  transform: none !important;
}
/* Keep plan growth tool chips inside the compact card */
section.plan-growth-stage .plan-growth-card {
  height: 250px !important;
  min-height: 250px !important;
}
section.plan-growth-stage .plan-growth-card dd {
  gap: 5px !important;
}
section.plan-growth-stage .plan-growth-card .tool-chip {
  padding: 3px 7px !important;
  font-size: clamp(.68rem, .76vw, .8rem) !important;
  gap: 5px !important;
}
section.plan-growth-stage .plan-growth-card .tool-chip-icon {
  width: 15px !important;
  height: 15px !important;
}
/* Price-band parity: vertical tool chips and CTA breathing room */
section.plan-growth-stage .plan-growth-card {
  height: 318px !important;
  min-height: 318px !important;
  padding: 12px 18px 18px !important;
  grid-template-rows: 34px 20px 24px auto auto 28px !important;
}
section.plan-growth-stage .plan-growth-card dd {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 22px !important;
}
section.plan-growth-stage .plan-growth-card .tool-chip {
  padding: 5px 10px !important;
  font-size: clamp(.82rem, .94vw, .96rem) !important;
  gap: 7px !important;
  line-height: 1.1 !important;
}
section.plan-growth-stage .plan-growth-card .tool-chip-icon {
  width: 18px !important;
  height: 18px !important;
}
section.plan-growth-stage .plan-growth-card a {
  margin-top: auto !important;
  padding-top: 0 !important;
  align-self: end !important;
  justify-self: end !important;
}
/* Containment correction after vertical tool list parity */
section.plan-growth-stage .plan-growth-card {
  height: 372px !important;
  min-height: 372px !important;
  overflow: hidden !important;
}
/* Section title alignment: center target section titles */
.simulator .sim-header,
.price-band-section .price-band-heading,
.matrix-section .section-heading > div,
.product-cards > h2,
.plan-growth-stage .plan-growth-heading {
  text-align: center !important;
}
.simulator .sim-header h2,
.price-band-section .price-band-heading h2,
.matrix-section .section-heading h2,
.product-cards > h2,
.plan-growth-stage .plan-growth-heading h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.price-band-section .price-band-heading,
.simulator .sim-header,
.plan-growth-stage .plan-growth-heading {
  max-width: none !important;
  width: 100% !important;
}
.matrix-section .section-heading {
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
}
.matrix-section .section-heading > div {
  width: 100% !important;
  justify-self: center !important;
}
.product-cards > h2 {
  display: block !important;
  width: 100% !important;
}
.plan-growth-stage .plan-growth-heading {
  display: block !important;
  margin-bottom: 18px !important;
}
.plan-growth-stage .plan-growth-heading h2 {
  display: block !important;
}
/* Hard correction: make plan-growth and matrix titles geometrically centered */
.plan-growth-stage .plan-growth-heading h2 {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
.matrix-section .section-heading {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 12px !important;
}
.matrix-section .section-heading > div {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
.matrix-section .section-heading h2,
.matrix-section .section-heading p {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
.matrix-section .section-heading .section-sim-button {
  justify-self: end !important;
}
/* Hard correction: plan growth heading container full width */
section.plan-growth-stage > .plan-growth-heading {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}
section.plan-growth-stage > .plan-growth-heading > h2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
/* Unified section title size and centered rhythm */
.simulator .sim-header h2,
.price-band-section .price-band-heading h2,
.plan-growth-stage .plan-growth-heading h2,
.matrix-section .section-heading h2,
.product-cards > h2 {
  font-size: clamp(2.05rem, 2.35vw, 2.72rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* Simulator input panel: match compact 3-column reference */
.simulator .sim-shell {
  gap: 22px !important;
}
.simulator .sim-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 18px !important;
  align-items: end !important;
  padding: 18px 18px 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(202, 211, 222, .95) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.12) !important;
}
.simulator .sim-controls label {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.simulator .sim-controls label:not(.checkline)::after {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 2 !important;
  color: #4b5563 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  opacity: .9 !important;
}
.simulator .sim-controls label:nth-child(1)::after { content: "▣" !important; }
.simulator .sim-controls label:nth-child(2)::after { content: "⌄" !important; font-size: 22px !important; bottom: 9px !important; }
.simulator .sim-controls label:nth-child(3)::after { content: "▤⌄" !important; font-size: 15px !important; }
.simulator .sim-controls label:nth-child(4)::after { content: "⌁" !important; font-size: 20px !important; bottom: 10px !important; }
.simulator .sim-controls label:nth-child(5)::after { content: "♧" !important; font-size: 20px !important; bottom: 10px !important; }
.simulator .sim-controls select,
.simulator .sim-controls input[type="number"] {
  width: 100% !important;
  min-height: 48px !important;
  padding: 9px 42px 9px 13px !important;
  border-radius: 8px !important;
  border: 1px solid #c9d1dc !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.03) !important;
  outline: none !important;
}
.simulator .sim-controls select:focus,
.simulator .sim-controls input[type="number"]:focus {
  border-color: #1788c7 !important;
  box-shadow: 0 0 0 3px rgba(23,136,199,.16), inset 0 1px 1px rgba(15,23,42,.03) !important;
}
.simulator .sim-controls .checkline {
  grid-column: 3 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: start !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
  font-weight: 800 !important;
}
.simulator .sim-controls .checkline input[type="checkbox"] {
  appearance: none !important;
  width: 21px !important;
  height: 21px !important;
  border-radius: 5px !important;
  border: 1px solid #2f7db8 !important;
  background: #2e85c7 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}
.simulator .sim-controls .checkline input[type="checkbox"]::before {
  content: "✓" !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
}
.simulator .sim-controls .checkline input[type="checkbox"]:not(:checked) {
  background: #fff !important;
  border-color: #aeb8c5 !important;
}
.simulator .sim-controls .checkline input[type="checkbox"]:not(:checked)::before {
  content: "" !important;
}
@media (max-width: 900px) {
  .simulator .sim-controls { grid-template-columns: 1fr !important; }
  .simulator .sim-controls .checkline { grid-column: auto !important; grid-row: auto !important; }
}

/* Restore visible motion on the decision banner */
.decision-map-animated .decision-banner-template {
  animation: decisionBannerBreath 6.8s ease-in-out infinite !important;
  transform-origin: center !important;
}
.decision-map-animated::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 8% 4% 8% 50% !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: .28 !important;
  background:
    radial-gradient(circle, rgba(38,133,110,.8) 0 2px, transparent 3px) 14% 36% / 34px 34px,
    radial-gradient(circle, rgba(105,116,226,.72) 0 2px, transparent 3px) 48% 62% / 38px 38px,
    radial-gradient(circle, rgba(217,150,61,.62) 0 2px, transparent 3px) 78% 28% / 42px 42px;
  filter: blur(.1px) !important;
  animation: decisionParticleDrift 5.4s ease-in-out infinite alternate !important;
}
@keyframes decisionBannerBreath {
  0%, 100% { transform: scale(1) translate3d(0,0,0); }
  50% { transform: scale(1.006) translate3d(0,-2px,0); }
}
@keyframes decisionParticleDrift {
  0% { transform: translate3d(-6px, 4px, 0) scale(.98); background-position: 14% 36%, 48% 62%, 78% 28%; }
  100% { transform: translate3d(8px, -7px, 0) scale(1.02); background-position: 18% 32%, 45% 58%, 82% 34%; }
}
/* Hard title size parity for plan-growth heading */
section.plan-growth-stage > .plan-growth-heading > h2,
.plan-growth-stage .plan-growth-heading h2 {
  font-size: clamp(2.05rem, 2.35vw, 2.72rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}
/* 2026-07-30 correction: title spacing, simulator compact template, visible banner motion */
.simulator .sim-header h2,
.price-band-section .price-band-heading h2,
.plan-growth-stage .plan-growth-heading h2,
.matrix-section .section-heading h2,
.product-cards > h2 {
  margin-bottom: 26px !important;
}
.simulator .sim-header,
.price-band-section .price-band-heading,
.plan-growth-stage .plan-growth-heading,
.matrix-section .section-heading,
.product-cards > h2 {
  margin-bottom: 34px !important;
}

.simulator .sim-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  align-items: end !important;
  padding: 16px 18px 14px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #d6dce4 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.13) !important;
}
.simulator .sim-controls label {
  gap: 5px !important;
  color: #050816 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
.simulator .sim-controls select,
.simulator .sim-controls input[type="number"] {
  min-height: 38px !important;
  height: 38px !important;
  padding: 7px 34px 7px 11px !important;
  border-radius: 5px !important;
  border: 1px solid #c8ced6 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.02) !important;
}
.simulator .sim-controls select:focus,
.simulator .sim-controls input[type="number"]:focus {
  border-color: #1688c2 !important;
  box-shadow: 0 0 0 2px rgba(22,136,194,.22), inset 0 1px 1px rgba(15,23,42,.02) !important;
}
.simulator .sim-controls label:not(.checkline)::after {
  right: 10px !important;
  bottom: 9px !important;
  font-size: 14px !important;
  opacity: .85 !important;
}
.simulator .sim-controls label:nth-child(2)::after { font-size: 17px !important; bottom: 7px !important; }
.simulator .sim-controls label:nth-child(3)::after { font-size: 13px !important; bottom: 10px !important; }
.simulator .sim-controls label:nth-child(4)::after { font-size: 15px !important; bottom: 9px !important; }
.simulator .sim-controls label:nth-child(5)::after { font-size: 15px !important; bottom: 9px !important; }
.simulator .sim-controls .checkline {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: end !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  gap: 9px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.simulator .sim-controls .checkline input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
}
.simulator .sim-controls .checkline input[type="checkbox"]::before {
  font-size: 13px !important;
}

.decision-map-animated .decision-banner-template {
  animation: decisionBannerBreath 5.2s ease-in-out infinite !important;
}
.decision-map-animated .decision-map-node,
.decision-map-animated .decision-map-center,
.decision-map-animated [class*="bubble"],
.decision-map-animated [class*="node"] {
  animation: decisionBubbleFloat 3.8s ease-in-out infinite alternate !important;
}
.decision-banner-hotspot {
  text-indent: 0 !important;
  overflow: visible !important;
  color: transparent !important;
  border-radius: 999px !important;
  animation: decisionHotspotBounce 2.4s ease-in-out infinite !important;
}
.decision-banner-hotspot::before {
  content: "Scroll to Simulator" !important;
  position: absolute !important;
  left: -16% !important;
  bottom: -22% !important;
  color: #111827 !important;
  font-weight: 900 !important;
  font-size: clamp(11px, .95vw, 17px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72) !important;
  animation: decisionLinkFloat 1.8s ease-in-out infinite alternate !important;
}
.decision-banner-hotspot::after {
  content: "↓" !important;
  position: absolute !important;
  left: 38% !important;
  bottom: -54% !important;
  color: #111827 !important;
  font-size: clamp(18px, 1.8vw, 32px) !important;
  font-weight: 900 !important;
  animation: decisionArrowDrop 1.2s ease-in-out infinite !important;
}

/* Nene patch: avoid duplicate visible simulator-link text over the banner image */
.decision-banner-hotspot::before,
.decision-banner-hotspot::after {
  content: "" !important;
  display: none !important;
}
@keyframes decisionBubbleFloat {
  0% { transform: translate3d(-3px, 2px, 0) scale(.985); }
  100% { transform: translate3d(5px, -5px, 0) scale(1.015); }
}
@keyframes decisionHotspotBounce {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-7px,0); }
}
@keyframes decisionLinkFloat {
  0% { transform: translate3d(0,2px,0); opacity: .82; }
  100% { transform: translate3d(0,-3px,0); opacity: 1; }
}
.simulator .sim-controls label:nth-child(4),
.simulator .sim-controls label:nth-child(5) {
  width: 100% !important;
  max-width: none !important;
}
.simulator .sim-controls label:nth-child(4) input,
.simulator .sim-controls label:nth-child(5) input {
  width: 100% !important;
}
/* 2026-07-30 correction: simulator icons belong beside labels, not inside fields */
.simulator .sim-controls label:not(.checkline)::after {
  content: none !important;
  display: none !important;
}
.simulator .sim-label-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 17px !important;
}
.simulator .sim-label-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}
.simulator .sim-controls select,
.simulator .sim-controls input[type="number"] {
  padding-right: 11px !important;
}
.simulator .sim-label-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.simulator .sim-check-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.simulator .sim-controls .checkline .sim-label-icon {
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
}

/* 2026-07-30 correction: use local image icons on the left side of simulator labels */
.simulator .sim-label-title,
.simulator .sim-check-title {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
}
.simulator .sim-label-icon {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  object-fit: contain !important;
  opacity: .92 !important;
  transform: none !important;
}
.simulator .sim-controls .checkline .sim-label-icon {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
}
.simulator .sim-label-icon svg { display: block !important; }

/* 2026-07-30 correction: banner particles behind bubbles and visible moving link/bubbles */
.decision-map-animated {
  isolation: isolate !important;
}
.decision-map-animated::after {
  z-index: 1 !important;
  opacity: .28 !important;
  pointer-events: none !important;
  mix-blend-mode: multiply !important;
}
.decision-banner-template {
  position: relative !important;
  z-index: 2 !important;
}
.decision-banner-float-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.decision-float-bubble {
  position: absolute !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(210,218,228,.78) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.16) !important;
  animation: decisionBubbleFloat 3.8s ease-in-out infinite alternate !important;
}
.decision-float-bubble.bubble-a { width: 13.5%; height: 12%; left: 61%; top: 8%; }
.decision-float-bubble.bubble-b { width: 14.5%; height: 12%; left: 80%; top: 8%; animation-delay: -.7s !important; }
.decision-float-bubble.bubble-c { width: 13%; height: 11%; left: 57%; top: 36%; animation-delay: -1.1s !important; }
.decision-float-bubble.bubble-d { width: 15%; height: 11%; left: 83%; top: 36%; animation-delay: -.4s !important; }
.decision-float-bubble.bubble-e { width: 13%; height: 12%; left: 64%; top: 70%; animation-delay: -.9s !important; }
.decision-float-bubble.bubble-f { width: 15%; height: 12%; left: 78%; top: 70%; animation-delay: -1.4s !important; }
.decision-banner-hotspot {
  z-index: 6 !important;
  color: #111827 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  animation: decisionLinkFloat 1.8s ease-in-out infinite alternate !important;
}
.decision-banner-hotspot::before,
.decision-banner-hotspot::after {
  display: block !important;
}
.decision-banner-hotspot::before {
  content: "Scroll to Simulator" !important;
  position: absolute !important;
  left: -10% !important;
  bottom: -22% !important;
  color: #111827 !important;
  font-weight: 900 !important;
  font-size: clamp(11px, .95vw, 17px) !important;
  white-space: nowrap !important;
}
.decision-banner-hotspot::after {
  content: "↓" !important;
  position: absolute !important;
  left: 38% !important;
  bottom: -55% !important;
  color: #111827 !important;
  font-size: clamp(18px, 1.8vw, 32px) !important;
  font-weight: 900 !important;
  animation: decisionArrowDrop 1.2s ease-in-out infinite !important;
}

/* 2026-07-30 correction: remove duplicate banner link text and make moving bubbles readable */
.decision-float-bubble {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111827 !important;
  font-weight: 900 !important;
  font-size: clamp(11px, 1.1vw, 18px) !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(207,216,226,.92) !important;
  opacity: .96 !important;
  backdrop-filter: blur(2px) !important;
}
.decision-float-bubble::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.decision-float-bubble.bubble-a::before { content: "回答数" !important; }
.decision-float-bubble.bubble-b::before { content: "料金帯" !important; }
.decision-float-bubble.bubble-c::before { content: "決済" !important; }
.decision-float-bubble.bubble-d::before { content: "外部連携" !important; }
.decision-float-bubble.bubble-e::before { content: "チーム" !important; }
.decision-float-bubble.bubble-f::before { content: "ブランド表示" !important; }
.decision-banner-hotspot {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
.decision-banner-hotspot::before {
  left: -2% !important;
  bottom: -19% !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.78) !important;
}
.decision-banner-hotspot::after {
  left: 44% !important;
  bottom: -50% !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.78) !important;
}

/* 2026-07-30 correction: inline simulator icons cannot fail asset loading */
.simulator .sim-label-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: #5f6b7a !important;
  opacity: .95 !important;
}
.simulator .sim-label-svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: #ffffff !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.simulator .sim-label-title > .sim-label-icon,
.simulator .sim-check-title > .sim-label-icon {
  order: -1 !important;
}
@keyframes decisionArrowDrop {
  0%, 100% { transform: translateY(-2px); opacity: .65; }
  50% { transform: translateY(6px); opacity: 1; }
}


/* Two-company pages: key differences tile redesign. Scoped to pair-summary only; index page has no pair-summary. */
.pair-summary-redesign {
  position: relative !important;
  padding: 22px 24px 24px !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(45, 142, 160, .10) 0 2px, transparent 2.4px) 0 0 / 18px 18px,
    linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .78), 0 18px 46px rgba(15, 23, 42, .08) !important;
}
.pair-summary-redesign > h2 {
  margin: 0 0 34px !important;
  text-align: center !important;
  color: #0e1726 !important;
  font-size: clamp(1.85rem, 2.45vw, 2.45rem) !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}
.pair-summary-redesign .pair-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.pair-summary-redesign .pair-summary-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 420px !important;
  padding: 18px 18px 16px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-top: 4px solid var(--line, #cbd5e1) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)), var(--bg) !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.pair-summary-redesign .pair-summary-card:hover,
.pair-summary-redesign .pair-summary-card.is-active {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)), var(--hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, .14) !important;
}
.pair-summary-redesign .pair-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}
.pair-summary-redesign .pair-card-head .brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: clamp(1.45rem, 1.75vw, 2rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  color: #111827 !important;
  white-space: nowrap !important;
}
.pair-summary-redesign .pair-card-head .brand-favicon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  padding: 4px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .42), 0 6px 16px rgba(15, 23, 42, .08) !important;
}
.pair-summary-redesign .pair-card-head .brand-wordmark {
  font-size: inherit !important;
  line-height: inherit !important;
}
.pair-summary-redesign .pair-card-head p {
  margin: 0 !important;
  color: #334155 !important;
  font-size: .98rem !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: normal !important;
}
.pair-summary-redesign .pair-diff-list {
  display: grid !important;
  gap: 15px !important;
  margin: 0 !important;
}
.pair-summary-redesign .pair-diff-row {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pair-summary-redesign .pair-diff-row dt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: .94rem !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.pair-summary-redesign .pair-diff-row dd {
  margin: 0 !important;
  min-width: 0 !important;
  color: #111827 !important;
  font-size: .95rem !important;
  line-height: 1.68 !important;
  font-weight: 650 !important;
  overflow-wrap: anywhere !important;
}
.pair-summary-redesign .pair-row-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45), 0 5px 12px rgba(15, 23, 42, .07) !important;
}
.pair-summary-redesign .pair-row-icon::before {
  font-size: 14px !important;
  line-height: 1 !important;
}
.pair-summary-redesign .pair-icon-tools .pair-row-icon::before { content: "⚒"; }
.pair-summary-redesign .pair-icon-trophy .pair-row-icon::before { content: "🏆"; }
.pair-summary-redesign .pair-icon-target .pair-row-icon::before { content: "◎"; color: #dc2626; font-weight: 950; }
.pair-summary-redesign .pair-icon-link .pair-row-icon::before { content: "↗"; color: #2563eb; font-weight: 950; }
.pair-summary-redesign .pair-icon-light .pair-row-icon::before { content: "💡"; }
.pair-summary-redesign .pair-summary-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 24px !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(9, 9, 11, .14) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.88) !important;
  color: #09090b !important;
  font-size: .98rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
.pair-summary-redesign .pair-summary-cta:hover {
  background: #09090b !important;
  color: #ffffff !important;
}
@media (max-width: 920px) {
  .pair-summary-redesign .pair-summary-grid { grid-template-columns: 1fr !important; }
  .pair-summary-redesign .pair-summary-card { min-height: 0 !important; }
}
@media (max-width: 640px) {
  .pair-summary-redesign { padding: 18px 14px !important; }
  .pair-summary-redesign .pair-diff-row { grid-template-columns: 1fr !important; gap: 5px !important; }
  .pair-summary-redesign .pair-diff-row dt { white-space: normal !important; }
}


/* Two-company pages: FAQ redesign. Scoped to pair-qa-redesign only. */
.pair-qa-redesign {
  position: relative !important;
  padding: 26px 28px 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 6%, rgba(45, 142, 160, .10) 0 1.6px, transparent 2px) 0 0 / 16px 16px,
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .80), 0 18px 44px rgba(15, 23, 42, .07) !important;
}
.pair-qa-redesign > h2 {
  margin: 0 0 22px !important;
  text-align: left !important;
  color: #0e1726 !important;
  font-size: clamp(1.8rem, 2.3vw, 2.35rem) !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}
.pair-qa-redesign .pair-qa-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: start !important;
}
.pair-qa-redesign .pair-qa-column {
  min-width: 0 !important;
}
.pair-qa-redesign .pair-qa-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}
.pair-qa-redesign .pair-qa-brand .brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(2.15rem, 3.25vw, 3.25rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}
.pair-qa-redesign .pair-qa-brand .brand-favicon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  padding: 7px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45), 0 10px 22px rgba(15, 23, 42, .09) !important;
}
.pair-qa-redesign .pair-qa-brand .brand-wordmark {
  font-size: inherit !important;
  line-height: inherit !important;
}
.pair-qa-redesign .pair-qa-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 92px !important;
  margin: 0 0 13px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: var(--accent, #e9d5ff) !important;
  color: #111827 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(255,255,255,.62) !important;
}
.pair-qa-redesign .pair-qa-stack {
  display: grid !important;
  gap: 16px !important;
}
.pair-qa-redesign .pair-qa-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 17px 20px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-left: 5px solid var(--line, #a78bfa) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(255,255,255,.70) !important;
}
.pair-qa-redesign .pair-qa-card h3 {
  position: relative !important;
  margin: 0 0 12px !important;
  padding-left: 52px !important;
  color: #09090b !important;
  font-size: clamp(1.16rem, 1.22vw, 1.28rem) !important;
  line-height: 1.34 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}
.pair-qa-redesign .pair-qa-card h3 span,
.pair-qa-redesign .pair-qa-card p span {
  position: absolute !important;
  left: 0 !important;
  top: -.08em !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #4b5563 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 18px rgba(15, 23, 42, .20), inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
.pair-qa-redesign .pair-qa-card p span {
  background: #3b82f6 !important;
}
.pair-qa-redesign .pair-qa-card p {
  position: relative !important;
  margin: 0 !important;
  padding-left: 52px !important;
  color: #111827 !important;
  font-size: clamp(1.02rem, 1.06vw, 1.12rem) !important;
  line-height: 1.56 !important;
  font-weight: 680 !important;
  white-space: normal !important;
}
@media (max-width: 920px) {
  .pair-qa-redesign { padding: 22px 16px 24px !important; }
  .pair-qa-redesign .pair-qa-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pair-qa-redesign > h2 { text-align: center !important; }
}


/* Free page FAQ redesign. Separate from pair-qa-redesign; do not merge. */
.free-qa-redesign {
  position: relative !important;
  padding: 26px 28px 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 6%, rgba(45, 142, 160, .10) 0 1.6px, transparent 2px) 0 0 / 16px 16px,
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .80), 0 18px 44px rgba(15, 23, 42, .07) !important;
}
.free-qa-redesign > h2 {
  margin: 0 0 22px !important;
  text-align: left !important;
  color: #0e1726 !important;
  font-size: clamp(1.8rem, 2.3vw, 2.35rem) !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}
.free-qa-redesign .free-qa-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: start !important;
}
.free-qa-redesign .free-qa-column {
  min-width: 0 !important;
}
.free-qa-redesign .free-qa-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}
.free-qa-redesign .free-qa-brand .brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(1.75rem, 2.45vw, 2.55rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}
.free-qa-redesign .free-qa-brand .brand-favicon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  padding: 7px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45), 0 10px 22px rgba(15, 23, 42, .09) !important;
}
.free-qa-redesign .free-qa-brand .brand-wordmark {
  font-size: inherit !important;
  line-height: inherit !important;
}
.free-qa-redesign .free-qa-stack {
  display: grid !important;
  gap: 16px !important;
}
.free-qa-redesign .free-qa-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 17px 20px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-left: 5px solid var(--line, #a78bfa) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(255,255,255,.70) !important;
}
.free-qa-redesign .free-qa-card h3 {
  position: relative !important;
  margin: 0 0 12px !important;
  padding-left: 52px !important;
  color: #09090b !important;
  font-size: clamp(1.12rem, 1.16vw, 1.22rem) !important;
  line-height: 1.34 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}
.free-qa-redesign .free-qa-card h3 span,
.free-qa-redesign .free-qa-card p span {
  position: absolute !important;
  left: 0 !important;
  top: -.08em !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #4b5563 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 18px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
.free-qa-redesign .free-qa-card p span {
  background: #3b82f6 !important;
}
.free-qa-redesign .free-qa-card p {
  position: relative !important;
  margin: 0 !important;
  padding-left: 52px !important;
  color: #111827 !important;
  font-size: clamp(.98rem, 1.02vw, 1.08rem) !important;
  line-height: 1.56 !important;
  font-weight: 680 !important;
  white-space: normal !important;
}
@media (max-width: 1100px) {
  .free-qa-redesign .free-qa-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .free-qa-redesign > h2 { text-align: center !important; }
}


/* Payment page FAQ redesign. Separate from free-qa-redesign and pair-qa-redesign; do not merge. */
.payment-qa-redesign {
  position: relative !important;
  padding: 26px 28px 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 6%, rgba(45, 142, 160, .10) 0 1.6px, transparent 2px) 0 0 / 16px 16px,
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 224, .80), 0 18px 44px rgba(15, 23, 42, .07) !important;
}
.payment-qa-redesign > h2 {
  margin: 0 0 22px !important;
  text-align: left !important;
  color: #0e1726 !important;
  font-size: clamp(1.8rem, 2.3vw, 2.35rem) !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}
.payment-qa-redesign .payment-qa-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: start !important;
}
.payment-qa-redesign .payment-qa-column {
  min-width: 0 !important;
}
.payment-qa-redesign .payment-qa-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}
.payment-qa-redesign .payment-qa-brand .brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(1.75rem, 2.45vw, 2.55rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}
.payment-qa-redesign .payment-qa-brand .brand-favicon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  padding: 7px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45), 0 10px 22px rgba(15, 23, 42, .09) !important;
}
.payment-qa-redesign .payment-qa-brand .brand-wordmark {
  font-size: inherit !important;
  line-height: inherit !important;
}
.payment-qa-redesign .payment-qa-stack {
  display: grid !important;
  gap: 16px !important;
}
.payment-qa-redesign .payment-qa-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 17px 20px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-left: 5px solid var(--line, #a78bfa) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(255,255,255,.70) !important;
}
.payment-qa-redesign .payment-qa-card h3 {
  position: relative !important;
  margin: 0 0 12px !important;
  padding-left: 52px !important;
  color: #09090b !important;
  font-size: clamp(1.12rem, 1.16vw, 1.22rem) !important;
  line-height: 1.34 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}
.payment-qa-redesign .payment-qa-card h3 span,
.payment-qa-redesign .payment-qa-card p span {
  position: absolute !important;
  left: 0 !important;
  top: -.08em !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #4b5563 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 18px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
.payment-qa-redesign .payment-qa-card p span {
  background: #3b82f6 !important;
}
.payment-qa-redesign .payment-qa-card p {
  position: relative !important;
  margin: 0 !important;
  padding-left: 52px !important;
  color: #111827 !important;
  font-size: clamp(.98rem, 1.02vw, 1.08rem) !important;
  line-height: 1.56 !important;
  font-weight: 680 !important;
  white-space: normal !important;
}
@media (max-width: 1100px) {
  .payment-qa-redesign .payment-qa-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .payment-qa-redesign > h2 { text-align: center !important; }
}


/* Matrix content typography contract: body cells only, headers/tool names excluded. */
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell {
  font-size: 15px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell span,
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell strong,
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell li,
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell dd,
.matrix-section .matrix-row:not(.matrix-header) .matrix-line,
.matrix-section .matrix-row:not(.matrix-header) .matrix-line-text {
  font-size: inherit !important;
  line-height: inherit !important;
}
.matrix-section .matrix-row:not(.matrix-header) .matrix-cell strong {
  font-weight: 560 !important;
}
.matrix-section .matrix-row:not(.matrix-header) .matrix-lines {
  display: grid !important;
  gap: 7px !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.matrix-section .matrix-row:not(.matrix-header) .matrix-line {
  align-items: center !important;
  justify-content: center !important;
  gap: .48em !important;
}
.matrix-section .matrix-row:not(.matrix-header) .favicon-icon {
  width: 1.12em !important;
  height: 1.12em !important;
  flex: 0 0 1.12em !important;
}
.matrix-section .row-label {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
  line-break: strict !important;
}
.matrix-section .matrix-row {
  grid-template-columns: minmax(154px, .58fr) repeat(var(--columns, 5), minmax(0, 1fr)) !important;
}
.matrix-section .matrix-header:has(.matrix-cell:nth-child(3):last-child) .brand-lockup {
  gap: .46rem !important;
}
.matrix-section .matrix-header:has(.matrix-cell:nth-child(3):last-child) .brand-favicon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}
.matrix-section .matrix-header:has(.matrix-cell:nth-child(3):last-child) .brand-wordmark {
  font-size: clamp(1.2rem, 1.42vw, 1.54rem) !important;
  line-height: 1.06 !important;
}
.matrix-section .matrix-header:has(.matrix-cell:nth-child(3):last-child) .matrix-cell > span {
  font-size: clamp(1rem, 1.12vw, 1.18rem) !important;
  line-height: 1.36 !important;
}
@media (max-width: 920px) {
  .matrix-section .matrix-row:not(.matrix-header) .matrix-cell {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
}


/* Decision banner element. Base image is fixed; only copy and bubbles are DOM overlays. */
.nene-decision-banner,
.nene-decision-banner * { box-sizing: border-box !important; }
.nene-decision-banner {
  container-type: inline-size;
  position: relative !important;
  display: block !important;
  width: min(100%, 1680px) !important;
  max-width: 1680px !important;
  aspect-ratio: 1027 / 380 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
  contain: layout paint !important;
}
.nene-decision-banner::before,
.nene-decision-banner::after { content: none !important; display: none !important; }
.nene-banner-base {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
}
.nene-decision-banner .decision-banner-template,
.nene-decision-banner .decision-banner-float-layer,
.nene-decision-banner .decision-float-bubble,
.nene-decision-banner .decision-banner-hotspot,
.nene-decision-banner .decision-map-copy,
.nene-decision-banner .decision-map-visual,
.nene-decision-banner .map-node,
.nene-decision-banner .map-core,
.nene-decision-banner .map-line { display: none !important; }
.nene-banner-left,
.nene-banner-right,
.nene-banner-scroll { position: absolute !important; z-index: 2 !important; }
.nene-banner-left {
  left: 5.2% !important;
  top: 10.2% !important;
  width: 43.1% !important;
  height: 68% !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.nene-banner-kicker {
  margin: 0 0 1.45cqw !important;
  max-width: 94% !important;
  color: #22262d !important;
  font-size: clamp(20px, 2.35cqw, 39px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
.nene-banner-left h2 {
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #202228 !important;
  font-size: clamp(48px, 6.35cqw, 104px) !important;
  font-weight: 900 !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.nene-banner-lead {
  margin: 2.2cqw 0 0 !important;
  max-width: 92% !important;
  color: #22262d !important;
  font-size: clamp(19px, 2.02cqw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}
.nene-banner-scroll {
  left: 49.4% !important;
  bottom: 9.4% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: .08cqw !important;
  color: #101827 !important;
  text-align: center !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  animation: neneScrollFloat 2.6s ease-in-out infinite !important;
}
.nene-banner-scroll strong {
  font-size: clamp(11px, 1.32cqw, 22px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.nene-scroll-arrow {
  font-size: clamp(18px, 2.35cqw, 39px) !important;
  line-height: .75 !important;
  font-weight: 900 !important;
}
.nene-banner-scroll span:last-child {
  font-size: clamp(9px, 1.02cqw, 17px) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}
.nene-banner-right {
  left: 51.3% !important;
  top: 7.2% !important;
  width: 46% !important;
  height: 84.6% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.nene-center-node,
.nene-choice-bubble {
  position: absolute !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}
.nene-center-node {
  text-decoration: none !important;
  pointer-events: auto !important;
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%, -50%);
  gap: .64cqw !important;
  width: 41% !important;
  height: 19% !important;
  min-width: 0 !important;
  border-radius: 1cqw !important;
  background: linear-gradient(180deg, #3b3e46, #22242b) !important;
  color: #fff !important;
  font-size: clamp(17px, 2.12cqw, 34px) !important;
  font-weight: 900 !important;
  box-shadow: 0 1.5cqw 3cqw rgba(17, 24, 39, .26) !important;
  animation: neneCenterBreath 3.8s ease-in-out infinite !important;
}
.nene-center-node span {
  display: grid !important;
  place-items: center !important;
  width: 1.22em !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
}
.nene-choice-bubble {
  gap: .5cqw !important;
  width: 28.4% !important;
  height: 14% !important;
  min-width: 0 !important;
  border: .11cqw solid rgba(30, 41, 59, .14) !important;
  border-radius: .98cqw !important;
  color: #101827 !important;
  font-size: clamp(13px, 1.56cqw, 26px) !important;
  font-weight: 900 !important;
  box-shadow: 0 1cqw 2.1cqw rgba(30, 41, 59, .12), inset 0 0 0 1px rgba(255,255,255,.68) !important;
  animation: neneBubbleFloat 5.8s ease-in-out infinite !important;
  animation-delay: calc(var(--bubble-index) * -.44s) !important;
}
.nene-choice-responses { left: 29.8% !important; top: 2.4% !important; background: rgba(255, 242, 241, .96) !important; }
.nene-choice-price { right: 6.2% !important; top: 2.4% !important; background: rgba(255, 249, 235, .96) !important; }
.nene-choice-payment { left: 1.2% !important; top: 42.1% !important; background: rgba(239, 247, 255, .96) !important; }
.nene-choice-integration { right: .8% !important; top: 42.1% !important; background: rgba(239, 253, 245, .96) !important; }
.nene-choice-team { left: 29.6% !important; bottom: 3.3% !important; background: rgba(247, 241, 255, .96) !important; }
.nene-choice-brand { right: 6.6% !important; bottom: 3.3% !important; background: rgba(255, 251, 235, .96) !important; }
.nene-choice-icon {
  position: relative !important;
  width: 1em !important;
  height: 1em !important;
  flex: 0 0 1em !important;
}
.nene-choice-icon::before,
.nene-choice-icon::after { content: "" !important; position: absolute !important; inset: 0 !important; }
.icon-chart::before { border-left: .14em solid #c56a6f; border-bottom: .14em solid #c56a6f; }
.icon-chart::after { inset: .18em .05em .18em .22em !important; background: linear-gradient(135deg, transparent 40%, #c56a6f 41% 55%, transparent 56%), linear-gradient(90deg, #c56a6f 0 .16em, transparent .16em .38em, #c56a6f .38em .54em, transparent .54em .76em, #c56a6f .76em .92em) !important; }
.icon-money::before { border: .13em solid #b99862; border-radius: .12em; }
.icon-money::after { inset: .34em .2em !important; border-top: .12em solid #b99862; border-bottom: .12em solid #b99862; }
.icon-card::before { border: .13em solid #3f7fc8; border-radius: .16em; }
.icon-card::after { top: .34em !important; height: .14em !important; background: #3f7fc8; }
.icon-link::before { inset: .18em .1em !important; border: .15em solid #299566; border-radius: .35em; transform: rotate(-35deg); }
.icon-people::before { border-radius: 50%; background: radial-gradient(circle at 30% 34%, #8a63c8 0 18%, transparent 19%), radial-gradient(circle at 68% 34%, #8a63c8 0 18%, transparent 19%), radial-gradient(ellipse at 50% 80%, #8a63c8 0 42%, transparent 43%) !important; }
.icon-badge::before { border-radius: 50%; background: #b49a66; }
.icon-badge::after { content: "Logo" !important; display: grid !important; place-items: center !important; color: #fff !important; font-size: .33em !important; font-weight: 900 !important; }
@keyframes neneBubbleFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(calc((var(--bubble-index) - 2.5) * .28cqw), -1.1cqw); } }
@keyframes neneCenterBreath { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-56%) scale(1.025); } }
@keyframes neneScrollFloat { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-.4cqw); } }
@media (max-width: 760px) {
  .nene-banner-kicker { font-size: clamp(12px, 2.35cqw, 18px) !important; }
  .nene-banner-left h2 { font-size: clamp(30px, 6.9cqw, 54px) !important; }
  .nene-banner-lead { font-size: clamp(9px, 1.55cqw, 12px) !important; margin-top: 1.2cqw !important; line-height: 1.28 !important; }
  .nene-center-node { font-size: clamp(10px, 1.95cqw, 15px) !important; }
  .nene-choice-bubble { gap: .3cqw !important; font-size: clamp(8px, 1.42cqw, 12px) !important; }
  .nene-banner-scroll strong { font-size: clamp(7px, 1.3cqw, 10px) !important; }
  .nene-scroll-arrow { font-size: clamp(12px, 2.25cqw, 18px) !important; }
  .nene-banner-scroll span:last-child { font-size: clamp(6px, 1cqw, 8px) !important; }
}


/* Locale switcher atom: static hreflang URLs + user preference only. */
.locale-switcher {
  position: sticky;
  top: 10px;
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  max-width: 1220px;
  margin: 10px auto -4px;
  padding: 0 18px;
  pointer-events: auto;
}
.locale-switcher__menu {
  position: relative;
  min-width: 188px;
  pointer-events: auto;
}
.locale-switcher__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(12, 24, 40, .13);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 252, 251, .9));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  color: #263142;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  list-style: none;
}
.locale-switcher__button::-webkit-details-marker {
  display: none;
}
.locale-switcher__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.locale-switcher__icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #0f766e;
}
.locale-switcher__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locale-switcher__chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .7;
}
.locale-switcher__menu[open] .locale-switcher__chevron {
  transform: translateY(3px) rotate(225deg);
}
.locale-switcher__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(260px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgba(12, 24, 40, .13);
  border-radius: 19px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
  backdrop-filter: blur(16px);
}
.locale-switcher a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
}
.locale-switcher a + a {
  border-top: 1px solid rgba(12, 24, 40, .08);
}
.locale-switcher a:hover,
.locale-switcher a:focus-visible {
  background: rgba(20, 184, 166, .09);
  outline: none;
}
.locale-switcher__meta {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}
.locale-switcher a[aria-current="true"] {
  color: #083f39;
  background: linear-gradient(135deg, rgba(184, 243, 234, .9), rgba(237, 253, 248, .95));
}
.locale-switcher[data-suggested-locale="en"] a[data-locale="en"],
.locale-switcher[data-suggested-locale="ja"] a[data-locale="ja"] {
  box-shadow: inset 4px 0 0 rgba(17, 148, 136, .45);
}
html[lang="en"] .nene-banner-left h2 {
  max-width: 95% !important;
  font-size: clamp(42px, 4.55cqw, 76px) !important;
  line-height: .96 !important;
  white-space: normal !important;
}
html[lang="en"] .nene-banner-kicker {
  max-width: 82% !important;
  font-size: clamp(18px, 1.85cqw, 32px) !important;
  line-height: 1.2 !important;
}
html[lang="en"] .nene-banner-lead {
  max-width: 74% !important;
  font-size: clamp(17px, 1.58cqw, 28px) !important;
  line-height: 1.26 !important;
}
html[lang="en"] .nene-center-node {
  width: 48% !important;
  height: 20% !important;
  font-size: clamp(15px, 1.58cqw, 27px) !important;
  gap: .42cqw !important;
  padding: 0 .7cqw !important;
}
html[lang="en"] .nene-choice-bubble {
  font-size: clamp(12px, 1.28cqw, 22px) !important;
}
html[lang="en"] .nene-choice-payment {
  left: 2.8% !important;
}
html[lang="en"] .nene-choice-integration {
  right: 1.4% !important;
  width: 31% !important;
}
html[lang="en"] .hero {
  text-align: center !important;
}
html[lang="en"] .hero h1 {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.25rem, 5.2vw, 4.9rem) !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
}
html[lang="en"] .section-heading {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}
html[lang="en"] .section-sim-button {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
html[lang="en"] .matrix .row-label {
  min-width: 210px !important;
  width: 210px !important;
  padding: 11px 20px 11px 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
}
html[lang="en"] .matrix .matrix-row {
  grid-template-columns: minmax(210px, 210px) repeat(var(--columns, 5), minmax(196px, 1fr)) !important;
}
html[lang="en"] .matrix-cell {
  min-width: 196px !important;
  position: relative !important;
  z-index: 1 !important;
}
html[lang="en"] .nene-center-node {
  z-index: 30 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
html[lang="en"] .nene-choice-bubble {
  z-index: 12 !important;
}
html[lang="en"] .nene-right-panel,
html[lang="en"] .nene-arrow-field {
  z-index: 1 !important;
}
@media (max-width: 720px) {
  .locale-switcher {
    top: 6px;
    padding: 0 12px;
  }
  .locale-switcher__menu {
    min-width: 166px;
  }
  .locale-switcher__button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 11px;
  }
  .locale-switcher a {
    font-size: 14px;
    padding: 13px 14px;
  }
  html[lang="en"] .nene-center-node {
    width: 56% !important;
    height: 24% !important;
    font-size: clamp(8px, 2.28cqw, 13px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    text-align: center !important;
    gap: .2cqw !important;
  }
  html[lang="en"] .nene-center-node span {
    width: 1.05em !important;
  }
  html[lang="en"] .hero h1 {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }
  html[lang="en"] .section-sim-button {
    min-width: 0 !important;
    white-space: normal !important;
  }
}