:root {
  --kcn-ink: #152238;
  --kcn-muted: #637083;
  --kcn-line: #e0e5eb;
  --kcn-paper: #ffffff;
  --kcn-soft: #f4f6f8;
  --kcn-green: #233e64;
  --kcn-green-dark: #152238;
  --kcn-gold: #657892;
  --kcn-peach: #eef1f5;
  --kcn-yellow: #e9eef5;
  --kcn-blue: #e7edf4;
  --kcn-radius: 12px;
  --kcn-shadow: none;
}

.kcn-shell,
.kcn-shell * {
  box-sizing: border-box;
}

.kcn-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  color: var(--kcn-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.78;
}

.kcn-ad-disclosure {
  margin: 18px 0 0;
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-hero,
.kcn-product-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: center;
  overflow: hidden;
  margin: 18px 0 32px;
  padding: clamp(34px, 7vw, 78px);
  border: 1px solid #e7ded3;
  border-radius: 32px;
  background: #f2f4f7;
}

.kcn-hero::before,
.kcn-product-hero::before {
  position: absolute;
  top: -80px;
  right: -70px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(31, 89, 71, 0.15);
  border-radius: 50%;
  content: "";
}

.kcn-eyebrow {
  margin: 0 0 10px;
  color: var(--kcn-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kcn-hero h1,
.kcn-product-hero h1,
.kcn-page-hero h1 {
  margin: 0;
  color: var(--kcn-ink);
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.kcn-product-hero h1 {
  font-size: clamp(32px, 5vw, 54px);
}

.kcn-home .kcn-hero h1 {
  font-size: clamp(38px, 4.6vw, 56px);
}

.kcn-lead {
  max-width: 720px;
  margin: 22px 0 0;
  color: #526176;
  font-size: clamp(16px, 2vw, 19px);
}

.kcn-hero-actions,
.kcn-buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.kcn-button,
.kcn-buy-button,
.kcn-official-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 11px 20px;
  text-decoration: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.kcn-button:hover,
.kcn-buy-button:hover,
.kcn-official-link:hover {
  transform: translateY(-2px);
}

.kcn-button-primary {
  background: var(--kcn-green);
  box-shadow: 0 10px 22px rgba(31, 89, 71, 0.22);
  color: #fff !important;
  font-weight: 800;
}

.kcn-button-quiet,
.kcn-official-link {
  border: 1px solid #bdc9c2;
  background: rgba(255, 255, 255, 0.7);
  color: var(--kcn-ink) !important;
  font-weight: 700;
}

.kcn-hero-panel {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--kcn-shadow);
  backdrop-filter: blur(12px);
}

.kcn-panel-label {
  margin: 0 0 14px;
  color: var(--kcn-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.kcn-hero-panel dl,
.kcn-hero-panel dd {
  margin: 0;
}

.kcn-hero-panel dl > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e5e9e6;
}

.kcn-hero-panel dl > div:last-child {
  border-bottom: 0;
}

.kcn-hero-panel dt {
  color: var(--kcn-muted);
  font-size: 13px;
}

.kcn-hero-panel dd {
  color: var(--kcn-green-dark);
  font-weight: 800;
  text-align: right;
}

.kcn-answer-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 76px;
}

.kcn-answer-strip article {
  padding: 22px;
  border: 1px solid var(--kcn-line);
  border-radius: 18px;
  background: var(--kcn-paper);
}

.kcn-answer-strip span {
  color: var(--kcn-gold);
  font-size: 12px;
  font-weight: 900;
}

.kcn-answer-strip h2 {
  margin: 5px 0 8px;
  font-size: 20px;
}

.kcn-answer-strip p,
.kcn-section-heading > p,
.kcn-decision-grid p,
.kcn-compare-notes p,
.kcn-sources p {
  color: var(--kcn-muted);
  font-size: 14px;
}

.kcn-section {
  margin: 76px 0;
}

.kcn-section-heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.kcn-section-heading h2,
.kcn-fit h2,
.kcn-prose h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.kcn-section-heading > p {
  max-width: 430px;
  margin: 0;
}

.kcn-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.kcn-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kcn-line);
  border-radius: var(--kcn-radius);
  background: #fff;
  box-shadow: 0 8px 30px rgba(31, 41, 38, 0.045);
}

.kcn-product-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.kcn-product-main {
  position: relative;
  display: block;
  flex: 1;
  padding: 28px;
  color: inherit !important;
  text-decoration: none !important;
}

.kcn-product-card:hover {
  border-color: color-mix(in srgb, var(--kcn-product-accent), #fff 55%);
}

.kcn-product-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--kcn-product-accent), #fff 82%);
  color: var(--kcn-product-accent);
  font-size: 22px;
  font-weight: 900;
}

.kcn-product-mark-large {
  position: relative;
  z-index: 1;
  width: min(240px, 36vw);
  height: min(240px, 36vw);
  margin: 0 auto;
  border-radius: 50%;
  font-size: clamp(56px, 10vw, 106px);
}

.kcn-product-photo-wrap {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
}

.kcn-product-photo-link {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid #e5e9e6;
  border-radius: 18px;
  background: #fff;
  color: var(--kcn-product-accent);
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.kcn-product-photo-link:hover {
  border-color: color-mix(in srgb, var(--kcn-product-accent), #fff 45%);
  box-shadow: 0 12px 30px rgba(31, 41, 38, 0.1);
  transform: translateY(-2px);
}

.kcn-product-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.kcn-product-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--kcn-product-accent), #fff 88%);
  color: var(--kcn-product-accent);
  font-size: 38px;
  font-weight: 900;
}

.kcn-product-photo-link.is-broken .kcn-product-photo {
  display: none;
}

.kcn-product-photo-wrap figcaption {
  margin-top: 7px;
  color: var(--kcn-muted);
  font-size: 10px;
  line-height: 1.4;
}

.kcn-product-photo-card {
  padding: 24px 28px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kcn-product-accent), #fff 94%), #fff);
}

.kcn-product-photo-card .kcn-product-photo-link {
  min-height: 164px;
}

.kcn-product-photo-hero {
  width: min(300px, 100%);
  justify-self: center;
}

.kcn-product-photo-hero .kcn-product-photo-link {
  min-height: 260px;
  border-radius: 26px;
  box-shadow: var(--kcn-shadow);
}

.kcn-product-photo-hero .kcn-product-photo {
  width: 176px;
  height: 176px;
}

.kcn-product-photo-finder {
  margin-bottom: 12px;
}

.kcn-product-photo-finder .kcn-product-photo-link {
  width: 96px;
  height: 96px;
  margin: 0 auto;
}

.kcn-product-photo-finder .kcn-product-photo {
  width: 88px;
  height: 88px;
}

.kcn-product-photo-finder figcaption {
  display: none;
}

.kcn-product-photo-choice,
.kcn-product-photo-value {
  margin-bottom: 16px;
}

.kcn-product-photo-choice .kcn-product-photo-link,
.kcn-product-photo-value .kcn-product-photo-link {
  min-height: 176px;
}

.kcn-product-photo-choice .kcn-product-photo,
.kcn-product-photo-value .kcn-product-photo {
  width: 150px;
  height: 150px;
}

.kcn-product-photo-choice figcaption,
.kcn-product-photo-value figcaption {
  display: none;
}

.kcn-product-photo-pair,
.kcn-product-photo-related {
  margin-bottom: 16px;
}

.kcn-product-photo-pair .kcn-product-photo-link {
  min-height: 230px;
}

.kcn-product-photo-pair .kcn-product-photo {
  width: 205px;
  height: 205px;
}

.kcn-product-photo-related .kcn-product-photo-link {
  min-height: 138px;
}

.kcn-product-photo-related .kcn-product-photo {
  width: 122px;
  height: 122px;
}

.kcn-product-photo-pair figcaption,
.kcn-product-photo-related figcaption {
  display: none;
}

.kcn-brand {
  margin: 0 0 4px;
  color: var(--kcn-product-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.kcn-product-card h3 {
  margin: 0;
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.38;
}

.kcn-position,
.kcn-verdict {
  margin: 10px 0 0;
  color: var(--kcn-green);
  font-weight: 800;
}

.kcn-card-facts {
  display: grid;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.kcn-card-facts li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid #edf0ee;
  font-size: 13px;
}

.kcn-card-facts span {
  color: var(--kcn-muted);
}

.kcn-buy-actions {
  padding: 0 28px 28px;
  margin-top: auto;
}

.kcn-product-hero .kcn-buy-actions {
  padding: 0;
}

.kcn-buy-actions.is-compact {
  gap: 7px;
}

.kcn-buy-button {
  flex: 1 1 170px;
  flex-direction: column;
  padding: 10px 14px;
  color: #fff !important;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.kcn-buy-button span {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.82;
}

.kcn-buy-rakuten {
  background: #bf0000;
}

.kcn-buy-yahoo {
  background: #3f50a6;
}

.kcn-buy-actions-disabled {
  padding: 0 28px 28px;
}

.kcn-decision {
  padding: clamp(28px, 6vw, 58px);
  border-radius: 28px;
  background: var(--kcn-green-dark);
  color: #fff;
}

.kcn-decision .kcn-eyebrow,
.kcn-decision .kcn-text-link {
  color: #f2c57e;
}

.kcn-decision .kcn-section-heading h2 {
  color: #fff;
}

.kcn-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kcn-decision-grid > div {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.kcn-decision-grid p {
  color: #cbd5e2;
}

.kcn-center {
  text-align: center;
}

.kcn-text-link {
  color: var(--kcn-green);
  font-weight: 800;
  text-decoration: none;
}

.kcn-update-note {
  margin: 64px 0 24px;
  padding-top: 18px;
  border-top: 1px solid var(--kcn-line);
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-breadcrumbs a {
  color: inherit;
}

.kcn-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 68px;
}

.kcn-fit {
  padding: clamp(24px, 5vw, 40px);
  border-radius: 24px;
}

.kcn-fit h2 {
  font-size: 27px;
}

.kcn-fit ul {
  margin: 20px 0 0;
  padding-left: 1.3em;
}

.kcn-fit li + li {
  margin-top: 10px;
}

.kcn-fit-good {
  border: 1px solid #cfe1d7;
  background: #f3f5f8;
}

.kcn-fit-caution {
  border: 1px solid #eadfcf;
  background: #f3f5f8;
}

.kcn-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kcn-line);
  border-radius: 18px;
  background: #fff;
}

.kcn-spec-table,
.kcn-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kcn-spec-table th,
.kcn-spec-table td,
.kcn-compare-table th,
.kcn-compare-table td {
  padding: 17px 18px;
  border: 0;
  border-bottom: 1px solid #e8ece9;
  text-align: left;
  vertical-align: top;
}

.kcn-spec-table tr:last-child th,
.kcn-spec-table tr:last-child td,
.kcn-compare-table tbody tr:last-child th,
.kcn-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.kcn-spec-table th {
  width: 28%;
  background: #f3f5f8;
}

.kcn-spec-table small {
  display: block;
  color: var(--kcn-muted);
}

.kcn-compare-table {
  min-width: 1820px;
}

.kcn-compare-table thead th {
  background: var(--kcn-green-dark);
  color: #fff;
  font-size: 12px;
}

.kcn-compare-table tbody th {
  min-width: 150px;
}

.kcn-compare-table tbody th a {
  color: var(--kcn-ink);
  text-decoration: none;
}

.kcn-compare-table tbody th small {
  display: block;
  margin-top: 3px;
  color: var(--kcn-muted);
}

.kcn-compare-table .kcn-buy-actions {
  display: grid;
  min-width: 170px;
  padding: 0;
  margin: 0;
}

.kcn-compare-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 0;
}

.kcn-compare-notes p {
  margin: 0;
  padding: 15px;
  border-radius: 14px;
  background: var(--kcn-soft);
}

.kcn-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcn-sources li {
  padding: 12px 0;
  border-bottom: 1px solid var(--kcn-line);
}

.kcn-sources a,
.kcn-prose a {
  color: var(--kcn-green);
  font-weight: 700;
}

.kcn-page-hero {
  max-width: 850px;
  margin: 56px 0 48px;
}

.kcn-prose {
  max-width: 880px;
  padding-bottom: 70px;
}

.kcn-prose section {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--kcn-line);
}

.kcn-prose h2 {
  font-size: 28px;
}

.kcn-quick-picks ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcn-quick-picks li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #e8e8e2;
}

.kcn-quick-picks li:last-child {
  border-bottom: 0;
}

.kcn-quick-picks li > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: #f3f5f8;
  color: var(--kcn-green-dark);
  font-size: 13px;
  font-weight: 900;
}

.kcn-quick-picks small,
.kcn-quick-picks strong {
  display: block;
}

.kcn-quick-picks small {
  color: var(--kcn-muted);
  font-size: 11px;
}

.kcn-quick-picks strong {
  color: var(--kcn-ink);
  font-size: 14px;
  line-height: 1.35;
}

.kcn-finder {
  scroll-margin-top: 92px;
  margin: 34px 0 76px;
  padding: clamp(26px, 5vw, 50px);
  border: 1px solid #eadfce;
  border-radius: 28px;
  background: #f3f5f8;
  box-shadow: 0 16px 46px rgba(82, 62, 42, 0.06);
}

.kcn-finder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kcn-finder-question {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--kcn-line);
  border-radius: 18px;
  background: #fff;
}

.kcn-finder-question legend {
  width: 100%;
  padding: 0 0 12px;
  color: var(--kcn-ink);
  font-size: 14px;
  font-weight: 900;
}

.kcn-finder-question legend span {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--kcn-yellow);
  color: var(--kcn-green-dark);
  font-size: 12px;
}

.kcn-finder-question > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kcn-finder-question button {
  flex: 1 1 auto;
  min-height: 42px;
  border: 1px solid #cfd8d2;
  border-radius: 12px;
  background: #f3f5f8;
  color: var(--kcn-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.kcn-finder-question button:hover {
  border-color: var(--kcn-green);
}

.kcn-finder-question button[aria-pressed="true"] {
  border-color: var(--kcn-green);
  background: var(--kcn-green);
  box-shadow: 0 6px 16px rgba(31, 89, 71, 0.16);
  color: #fff;
}

.kcn-finder-output {
  margin-top: 18px;
}

.kcn-finder-prompt {
  margin: 0;
  padding: 13px 16px;
  border-radius: 12px;
  background: #f3f5f8;
  color: var(--kcn-muted);
  font-size: 13px;
  text-align: center;
}

.kcn-finder-prompt.is-ready {
  background: #f3f5f8;
  color: var(--kcn-green-dark);
  font-weight: 800;
}

.kcn-finder-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.kcn-finder-result {
  padding: 20px;
  border: 1px solid var(--kcn-line);
  border-radius: 16px;
  background: #fff;
}

.kcn-finder-result.is-primary {
  border-color: #8b9eb9;
  background: #f3f5f8;
}

.kcn-finder-result p,
.kcn-finder-result strong,
.kcn-finder-result span,
.kcn-finder-result a {
  display: block;
}

.kcn-finder-result p {
  margin: 0 0 3px;
  color: var(--kcn-muted);
  font-size: 11px;
}

.kcn-finder-result strong {
  font-size: 20px;
}

.kcn-finder-result span {
  margin: 3px 0 12px;
  color: var(--kcn-green);
  font-size: 13px;
  font-weight: 800;
}

.kcn-finder-result a {
  color: var(--kcn-ink);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.kcn-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

.kcn-card-top .kcn-product-mark {
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.kcn-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.kcn-card-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f3f5f8;
  color: #526176;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.kcn-card-more {
  display: block;
  margin-top: 18px;
  color: var(--kcn-green-dark);
  font-size: 13px;
  font-weight: 900;
}

.kcn-check-note {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 24px;
  background: #f3f5f8;
}

.kcn-check-note h2,
.kcn-bottom-buy h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.kcn-check-note > p {
  margin: 0;
  color: var(--kcn-muted);
  font-size: 14px;
}

.kcn-four-steps {
  grid-template-columns: repeat(4, 1fr);
}

.kcn-verdict span {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--kcn-yellow);
  color: var(--kcn-green-dark);
  font-size: 10px;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

.kcn-fit-label {
  margin: 0 0 6px;
  color: var(--kcn-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.kcn-fit-caution .kcn-fit-label {
  color: #9b6b31;
}

.kcn-bottom-buy {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 0.75fr);
  gap: 28px;
  align-items: center;
  margin: 70px 0 26px;
  padding: clamp(26px, 5vw, 44px);
  border-radius: 24px;
  background: #f3f5f8;
}

.kcn-bottom-buy p {
  margin: 8px 0 0;
  color: var(--kcn-muted);
  font-size: 13px;
}

.kcn-bottom-buy .kcn-buy-actions {
  padding: 0;
  margin: 0;
}

.kcn-sources,
.kcn-compare-notes {
  display: block;
  margin: 18px 0 42px;
  border: 1px solid var(--kcn-line);
  border-radius: 16px;
  background: #fff;
}

.kcn-sources summary,
.kcn-compare-notes summary {
  padding: 16px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.kcn-source-body,
.kcn-compare-notes > div {
  padding: 0 18px 18px;
}

.kcn-compare-notes > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kcn-quick-compare {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.kcn-quick-compare > article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--kcn-line);
  border-radius: 14px;
  background: #fff;
}

.kcn-quick-compare-detail {
  display: block;
  color: var(--kcn-ink);
  text-decoration: none;
}

.kcn-product-photo-quick {
  margin-bottom: 10px;
}

.kcn-product-photo-quick .kcn-product-photo-link {
  width: 100%;
  min-height: 112px;
}

.kcn-product-photo-quick .kcn-product-photo {
  width: 104px;
  height: 104px;
}

.kcn-product-photo-quick figcaption {
  font-size: 9px;
}

.kcn-quick-compare span,
.kcn-quick-compare strong {
  display: block;
}

.kcn-quick-compare span {
  color: var(--kcn-muted);
  font-size: 10px;
}

.kcn-quick-compare strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.kcn-product-photo-table {
  margin-bottom: 9px;
}

.kcn-product-photo-table .kcn-product-photo-link {
  width: 92px;
  height: 92px;
}

.kcn-product-photo-table .kcn-product-photo {
  width: 84px;
  height: 84px;
}

.kcn-product-photo-table figcaption {
  width: 92px;
  font-size: 9px;
  text-align: left;
}

.kcn-compare-hint {
  display: none;
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-compare-table thead th:first-child,
.kcn-compare-table tbody th {
  position: sticky;
  z-index: 1;
  left: 0;
}

.kcn-compare-table tbody th {
  background: #fff;
}

.kcn-compare-table thead th:first-child {
  z-index: 2;
}

.kcn-choice-principles,
.kcn-buy-choice-grid,
.kcn-lifecycle-grid,
.kcn-candidate-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 64px;
}

.kcn-choice-principles article,
.kcn-buy-choice-grid article,
.kcn-lifecycle-grid article,
.kcn-candidate-list article {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--kcn-line);
  border-radius: 20px;
  background: #fff;
}

.kcn-choice-principles span,
.kcn-buy-choice-grid span,
.kcn-candidate-list span {
  display: inline-block;
  margin-bottom: 9px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f5f8;
  color: var(--kcn-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.kcn-choice-principles h2,
.kcn-buy-choice-grid h2,
.kcn-lifecycle-grid h3,
.kcn-candidate-list h3 {
  margin: 0 0 9px;
  color: var(--kcn-ink);
  font-size: 20px;
  line-height: 1.35;
}

.kcn-lifecycle-grid h3 small {
  color: var(--kcn-muted);
  font-size: 12px;
  font-weight: 700;
}

.kcn-choice-principles p,
.kcn-buy-choice-grid p,
.kcn-lifecycle-grid p,
.kcn-candidate-list p {
  margin: 0 0 16px;
  color: var(--kcn-muted);
  font-size: 13px;
  line-height: 1.75;
}

.kcn-pair-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0 64px;
}

.kcn-pair-products article {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--kcn-line);
  border-radius: 22px;
  background: #fff;
}

.kcn-pair-products h2,
.kcn-related h3 {
  margin: 0 0 8px;
  color: var(--kcn-ink);
}

.kcn-pair-products p,
.kcn-related p {
  color: var(--kcn-muted);
  line-height: 1.7;
}

.kcn-pair-same-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kcn-pair-same-grid div {
  padding: 18px;
  border: 1px solid var(--kcn-line);
  border-radius: 16px;
  background: #fff;
}

.kcn-pair-same-grid span,
.kcn-pair-same-grid strong {
  display: block;
}

.kcn-pair-same-grid span {
  margin-bottom: 6px;
  color: var(--kcn-muted);
  font-size: 11px;
}

.kcn-pair-callout {
  display: grid;
  grid-template-columns: 1.25fr auto;
  gap: 22px;
  align-items: center;
  margin: 54px 0;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid #d9e7df;
  border-radius: 22px;
  background: #f3f5f8;
}

.kcn-pair-callout h2,
.kcn-pair-callout p {
  margin-top: 0;
}

.kcn-faq,
.kcn-related {
  margin: 64px 0;
}

.kcn-faq {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 28px;
  align-items: start;
}

.kcn-faq h2,
.kcn-related h2 {
  margin-top: 0;
}

.kcn-faq-list {
  border-top: 1px solid var(--kcn-line);
}

.kcn-faq-list details {
  border-bottom: 1px solid var(--kcn-line);
}

.kcn-faq-list summary {
  padding: 18px 2px;
  color: var(--kcn-ink);
  cursor: pointer;
  font-weight: 900;
}

.kcn-faq-list p {
  margin: 0;
  padding: 0 2px 20px;
  color: var(--kcn-muted);
  line-height: 1.8;
}

.kcn-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kcn-related-grid article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--kcn-line);
  border-radius: 18px;
  background: #fff;
}

.kcn-used-safety,
.kcn-old-model-callout,
.kcn-used-checklist,
.kcn-search-needs,
.kcn-empty-state {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 28px;
  align-items: center;
  margin: 58px 0;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 24px;
  background: #f3f5f8;
}

.kcn-old-model-callout {
  grid-template-columns: 1fr auto;
  background: #f3f5f8;
}

.kcn-used-checklist {
  grid-template-columns: 0.75fr 1fr;
  background: #f3f5f8;
}

.kcn-used-checklist > p {
  grid-column: 1 / -1;
  margin: -10px 0 0;
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-used-safety h2,
.kcn-old-model-callout h2,
.kcn-used-checklist h2,
.kcn-search-needs h2,
.kcn-empty-state h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.kcn-used-safety > p,
.kcn-old-model-callout p,
.kcn-used-checklist li,
.kcn-empty-state p {
  color: var(--kcn-muted);
  font-size: 14px;
  line-height: 1.8;
}

.kcn-relation-note {
  margin: 20px 0 0;
  color: var(--kcn-muted);
  font-size: 12px;
}

.kcn-difference-table {
  min-width: 760px;
}

.kcn-difference-table th,
.kcn-difference-table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--kcn-line);
  text-align: left;
  vertical-align: top;
}

.kcn-difference-table td:last-child small {
  display: block;
  max-width: 210px;
  margin-top: 6px;
  color: var(--kcn-muted);
  font-size: 10px;
  line-height: 1.5;
}

.kcn-diff-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f5f8;
  color: #8d5a21;
  font-size: 10px;
  font-weight: 900;
}

.kcn-diff-status.is-unchanged {
  background: #f3f5f8;
  color: var(--kcn-green-dark);
}

.kcn-purchase-matrix {
  margin: 66px 0;
}

.kcn-purchase-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--kcn-line);
}

.kcn-purchase-row > div:first-child span,
.kcn-purchase-row > div:first-child strong {
  display: block;
}

.kcn-purchase-row > div:first-child span {
  margin-bottom: 3px;
  color: var(--kcn-muted);
  font-size: 11px;
}

.kcn-purchase-row > div:first-child strong {
  font-size: 16px;
}

.kcn-purchase-row .kcn-buy-actions,
.kcn-buy-stacked .kcn-buy-actions {
  margin: 0;
  padding: 0;
}

.kcn-buy-stacked {
  display: grid;
  gap: 10px;
}

.kcn-buy-stacked > strong {
  color: var(--kcn-muted);
  font-size: 11px;
}

.kcn-search-needs {
  display: block;
  background: #f3f5f8;
}

.kcn-search-needs > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.kcn-search-needs a,
.kcn-search-needs > div > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--kcn-line);
  border-radius: 14px;
  background: #fff;
  color: var(--kcn-ink);
  text-decoration: none;
}

.kcn-search-needs span {
  color: var(--kcn-muted);
  font-size: 11px;
}

@media (max-width: 850px) {
  .kcn-hero,
  .kcn-product-hero {
    grid-template-columns: 1fr;
  }

  .kcn-product-mark-large {
    display: none;
  }

  .kcn-product-photo-hero {
    width: min(300px, 100%);
    justify-self: start;
  }

  .kcn-answer-strip,
  .kcn-decision-grid,
  .kcn-compare-notes > div {
    grid-template-columns: 1fr;
  }

  .kcn-product-grid,
  .kcn-fit-grid,
  .kcn-finder-grid,
  .kcn-bottom-buy,
	.kcn-check-note,
  .kcn-used-safety,
  .kcn-old-model-callout,
  .kcn-used-checklist {
    grid-template-columns: 1fr;
  }

  .kcn-choice-principles,
  .kcn-buy-choice-grid,
  .kcn-lifecycle-grid,
  .kcn-candidate-list,
  .kcn-pair-products,
  .kcn-pair-same-grid,
  .kcn-pair-callout,
  .kcn-faq {
    grid-template-columns: 1fr;
  }

  .kcn-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcn-used-checklist > p {
    grid-column: auto;
  }

  .kcn-four-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcn-quick-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcn-compare-hint {
    display: block;
  }

  .kcn-product-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .kcn-section-heading {
    display: block;
  }

  .kcn-section-heading > p {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .kcn-shell {
    width: min(100% - 24px, 1180px);
  }

  .kcn-hero,
  .kcn-product-hero {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .kcn-hero h1,
  .kcn-page-hero h1 {
    font-size: 38px;
  }

  .kcn-hero-actions,
  .kcn-buy-actions {
    display: grid;
  }

  .kcn-button,
  .kcn-buy-button,
  .kcn-official-link {
    width: 100%;
  }

  .kcn-product-main,
  .kcn-buy-actions,
  .kcn-buy-actions-disabled {
    padding-right: 20px;
    padding-left: 20px;
  }

  .kcn-section {
    margin: 54px 0;
  }

  .kcn-finder {
    margin-bottom: 54px;
    padding: 24px 18px;
    border-radius: 22px;
  }

  .kcn-finder-results,
  .kcn-four-steps,
  .kcn-quick-compare,
  .kcn-related-grid {
    grid-template-columns: 1fr;
  }

  .kcn-finder-question > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcn-finder-question[data-kcn-question="priority"] > div {
    grid-template-columns: 1fr;
  }

  .kcn-check-note .kcn-text-link {
    margin-top: -8px;
  }

  .kcn-bottom-buy {
    margin-top: 54px;
    padding: 24px 20px;
  }

  .kcn-purchase-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kcn-search-needs > div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kcn-button,
  .kcn-buy-button,
  .kcn-official-link {
    transition: none;
  }
}