/* Compare articles use the same light visual language as the overseas product pages. */
:root {
  --compare-blue: #3157ff;
  --compare-ink: #17233d;
  --compare-muted: #5e6d85;
  --compare-line: #dce5f4;
  --compare-soft: #f6f8fd;
}

body.compare-page {
  margin: 0;
  color: var(--compare-ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

.compare-page .compare-source { overflow: clip; }
.compare-page .compare-source section {
  position: relative;
  padding: 90px 24px;
}
.compare-page .compare-source .container {
  width: min(100%, 1160px);
  max-width: 1160px;
  margin-inline: auto;
}
.compare-page .compare-source section:nth-of-type(2n+1):not(.hero):not(.vs-hero):not(.final-cta) {
  background: var(--compare-soft);
}
.compare-page .compare-source :is(.hero, .vs-hero) {
  min-height: 650px;
  padding-top: 152px;
  padding-bottom: 104px;
  background: radial-gradient(circle at 83% 25%, #e0eaff 0, transparent 32%),
              linear-gradient(110deg, #f8faff 5%, #edf4ff 65%, #f2f5ff 100%);
  color: var(--compare-ink);
}
/* The homepage's full-viewport .hero rule must not push article headings below the fold. */
body.compare-page .compare-source > .hero {
  display: block;
  height: auto;
  min-height: 0;
  padding: 136px 24px 82px;
}
body.compare-page .compare-source > .vs-hero {
  height: auto;
  min-height: 0;
  padding: 112px 24px 76px;
}
.compare-page .hero-content { width: 100%; }
.compare-page .hero-content > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  column-gap: 60px;
  align-content: center;
  align-items: center;
}
.compare-page .hero-content > .container > :not(.compare-hero-visual) { grid-column: 1; }
.compare-page .hero-eyebrow,
.compare-page .section-label,
.compare-page .eco-tag,
.compare-page .feat-badge {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--compare-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compare-page .hero-eyebrow .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--compare-blue);
  vertical-align: 2px;
}
.compare-page .hero-headline,
.compare-page .vs-hero h1 {
  margin: 0;
  color: var(--compare-ink);
  font-size: clamp(44px, 5vw, 70px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.compare-page .hero-headline .hl { display: block; }
.compare-page :is(.hero-headline, .vs-hero h1) :is(em, span) {
  color: var(--compare-blue);
  font-style: normal;
}
.compare-page .hero-sub,
.compare-page .vs-hero .section-sub {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--compare-muted);
  font-size: 17px;
  line-height: 1.7;
}
.compare-page .hero-ctas,
.compare-page .final-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.compare-page :is(.btn-primary, .btn-ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.compare-page .btn-primary {
  border: 1px solid var(--compare-blue);
  background: var(--compare-blue);
  color: #fff;
  box-shadow: 0 8px 20px #3157ff27;
}
.compare-page .btn-ghost {
  border: 1px solid #cbd8ef;
  background: #fff;
  color: #3153ce;
}
.compare-page :is(.btn-primary, .btn-ghost):hover { transform: translateY(-2px); }
.compare-page .btn-primary:hover { background: #2448e3; }
.compare-page .compare-hero-visual {
  grid-column: 2;
  grid-row: 1 / span 4;
  min-width: 0;
  padding: 18px;
  border: 1px solid #e1e8f4;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 70px #4264a822;
}
.compare-page .compare-hero-visual > span {
  display: block;
  margin: 0 0 12px 2px;
  color: #53647e;
  font-size: 13px;
  font-weight: 650;
}
.compare-page .compare-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e9edf5;
  border-radius: 14px;
}
/* Keep earlier single-column Compare markup visually aligned with generated pages. */
.compare-page:not(.demo-page) .hero-content > .container::after {
  content: "";
  display: block;
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 100%;
  aspect-ratio: 1.38;
  border: 18px solid #fff;
  border-radius: 24px;
  background: #fff url("../assets/product-ui/desk-call-summary-v1.webp") center / contain no-repeat;
  box-shadow: 0 26px 70px #4264a822;
}
.compare-page:not(.demo-page) .hero-headline { font-size: clamp(39px, 3.9vw, 58px); }
.compare-page .vs-hero { min-height: 590px; }
.compare-page .vs-hero .container { max-width: 920px; }
.compare-page .vs-logos { display: flex; align-items: center; gap: 14px; margin: 5px 0 24px; }
.compare-page .vs-logo-box {
  padding: 9px 17px;
  border: 1px solid #dce5f4;
  border-radius: 12px;
  background: #fff;
  color: var(--compare-ink);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 22px #39578a12;
}
.compare-page .vs-logo-box.solvea { color: var(--compare-blue); }
.compare-page .vs-sep { color: #7d8ca5; font-size: 14px; }
.compare-page .vs-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.compare-page .vs-nav a {
  padding: 8px 13px;
  border: 1px solid #dce5f4;
  border-radius: 9px;
  background: #fff;
  color: #4e6080;
  font-size: 13px;
  text-decoration: none;
}
.compare-page .vs-nav a.active { border-color: #a9bdff; color: var(--compare-blue); }
.compare-page .section-title,
.compare-page .compare-source section h2 {
  max-width: 850px;
  margin: 0 0 18px;
  color: var(--compare-ink);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.04em;
}
.compare-page .vs-hero h1.section-title { font-size: clamp(44px, 5vw, 70px); }
.compare-page .section-sub {
  max-width: 760px;
  margin: 0 0 34px;
  color: var(--compare-muted);
  font-size: 17px;
}
.compare-page .eco-grid,
.compare-page .money-scenario-grid,
.compare-page .quote-grid,
.compare-page .use-case-grid,
.compare-page .price-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}
.compare-page :is(.eco-card, .quote-card, .use-case-card, .faq-item, .vs-card, .price-compare-card) {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--compare-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px #1e3c790d;
}
.compare-page .compare-source h3 { margin: 0 0 12px; color: var(--compare-ink); font-size: 22px; line-height: 1.3; }
.compare-page :is(.eco-card, .quote-card, .use-case-card, .price-compare-card) p,
.compare-page .feat-desc { color: var(--compare-muted); }
.compare-page .eco-features { display: grid; gap: 9px; margin-top: 16px; }
.compare-page .eco-feat { display: block; padding: 12px 14px; border-radius: 10px; background: var(--compare-soft); color: #31476d; }
.compare-page .compare-source img { max-width: 100%; height: auto; }
.compare-page .eco-mockup { margin-top: 22px; overflow: hidden; border: 1px solid var(--compare-line); border-radius: 14px; }
.compare-page .eco-mockup img { display: block; width: 100%; }
.compare-page .feat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--compare-line);
}
.compare-page .feat-row.reverse .feat-text { order: 2; }
.compare-page .feat-row.reverse .feat-visual { order: 1; }
.compare-page .feat-title { font-size: 27px; }
.compare-page .feat-visual { padding: 16px; border: 1px solid var(--compare-line); border-radius: 20px; background: #edf3ff; }
.compare-page .feat-visual img { display: block; width: 100%; border-radius: 12px; }
.compare-page .money-compare,
.compare-page .compare-table { width: 100%; margin-top: 30px; overflow: hidden; border: 1px solid var(--compare-line); border-radius: 18px; background: #fff; }
.compare-page .money-compare-head,
.compare-page .money-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--compare-line); }
.compare-page .money-compare-head { background: #ecf2ff; color: #2948ae; font-weight: 700; }
.compare-page .money-compare-row:last-child { border: 0; }
.compare-page .money-compare-row p { margin: 0; }
.compare-page .money-compare-row p:last-child { color: #2951bb; font-weight: 600; }
.compare-page .money-keyword-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.compare-page .money-keyword-cloud span {
  display: inline-flex;
  padding: 9px 14px;
  border: 1px solid var(--compare-line);
  border-radius: 999px;
  background: #fff;
  color: #526484;
  font-size: 14px;
}
.compare-page .pcc-name,
.compare-page .cost-name { margin: 0 0 9px; color: var(--compare-ink); font-size: 20px; font-weight: 700; }
.compare-page .price-compare-card.solvea,
.compare-page .cost-card.solvea { border-color: #b9cbff; background: #fbfcff; }
.compare-page .pcc-price,
.compare-page .cost-price { color: var(--compare-ink); font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.compare-page .pcc-price span,
.compare-page .cost-price span { margin-left: 3px; color: var(--compare-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.compare-page .pcc-features { display: grid; gap: 0; margin-top: 22px; }
.compare-page .pcc-feat { display: block; padding: 9px 0; border-top: 1px solid var(--compare-line); color: #34435f; }
.compare-page .pcc-feat::before { content: "✓"; display: inline-block; width: 23px; color: #2b58dd; font-weight: 700; }
.compare-page .pcc-feat.no { color: #7c879b; }
.compare-page .pcc-feat.no::before { content: "×"; color: #a0aaba; }
.compare-page .cost-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 38px; }
.compare-page .cost-card { min-width: 0; padding: 28px; border: 1px solid var(--compare-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 32px #1e3c790d; }
.compare-page .cost-sub { margin: 8px 0 18px; color: var(--compare-muted); }
.compare-page .cost-line { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--compare-line); }
.compare-page .cost-line .label { color: var(--compare-muted); }
.compare-page .cost-line .value { text-align: right; }
.compare-page .cost-line .good { color: #2558cf; }
.compare-page .cost-line .bad { color: #8a95a9; }
.compare-page .feat-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.compare-page .feat-stats .stat { display: grid; gap: 2px; min-width: 150px; padding: 16px; border: 1px solid var(--compare-line); border-radius: 12px; background: #fff; }
.compare-page .stat-num { color: var(--compare-blue); font-size: 25px; font-weight: 700; }
.compare-page .stat-label { color: var(--compare-muted); font-size: 12px; }
.compare-page .quote-wall .quote-grid,
.compare-page .quote-wall .use-case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compare-page .quote-wall article { min-width: 0; padding: 25px; border: 1px solid var(--compare-line); border-radius: 18px; background: #fff; }
.compare-page .quote-wall article p { margin: 0; }
.compare-page .faq-grid,
.compare-page .faq-list { display: grid; gap: 14px; margin-top: 30px; }
.compare-page .faq-item { padding: 22px 26px; }
.compare-page .faq-item h3 { font-size: 19px; }
.compare-page .faq-item p { margin: 0; color: var(--compare-muted); }
.compare-page details { padding: 22px; border: 1px solid var(--compare-line); border-radius: 16px; background: #fff; }
.compare-page details summary { cursor: pointer; font-weight: 700; }
.compare-page table.compare-table { border-collapse: separate; border-spacing: 0; }
.compare-page .compare-table th,
.compare-page .compare-table td { padding: 16px 20px; border-bottom: 1px solid var(--compare-line); text-align: left; vertical-align: top; }
.compare-page .compare-table th { background: #ecf2ff; color: #2948ae; }
.compare-page .compare-table tr:last-child td { border-bottom: 0; }
.compare-page .closing-section .site-cta { min-height: 520px !important; }
.compare-page .closing-section .site-cta-copy h2 {
  font-size: 48px !important;
  font-weight: 600 !important;
  line-height: 1.15;
}
.compare-page .closing-section .site-cta-copy p { font-size: 18px; }
.compare-page .closing-section .site-cta-button { font-size: 15px; }
/* Keep earlier imported CTA markup consistent with the shared closing component. */
.compare-page .final-cta {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px 28px 0 0;
  background: radial-gradient(ellipse 54% 46% at 50% 100%, rgba(49,87,255,.30), transparent 68%), linear-gradient(180deg, rgba(11,17,34,.96), rgba(6,10,22,.92)) !important;
  color: #fff;
  text-align: center;
}
.compare-page .final-cta h2 { max-width: 850px; margin-inline: auto; color: #fff; }
.compare-page .final-cta p { max-width: 680px; margin: 0 auto 24px; color: #c8d1e2; }
.compare-page .final-cta :is(.hero-ctas, .final-cta-btns) { justify-content: center; }
.compare-page .final-cta .final-cta-btns > a:not(.btn-primary) { display: none; }
.compare-page .final-cta .btn-primary { background: var(--compare-blue); color: #fff; }

@media (max-width: 850px) {
  body.compare-page .compare-source > .hero { padding-top: 112px; padding-bottom: 68px; }
  body.compare-page .compare-source > .vs-hero { padding-top: 96px; padding-bottom: 64px; }
  .compare-page .hero-content > .container { grid-template-columns: 1fr; row-gap: 38px; }
  .compare-page .hero-content > .container > :not(.compare-hero-visual) { grid-column: 1; }
  .compare-page .compare-hero-visual { grid-column: 1; grid-row: auto; max-width: 650px; }
  .compare-page:not(.demo-page) .hero-content > .container::after { grid-column: 1; grid-row: auto; max-width: 650px; }
  .compare-page .compare-source :is(.hero, .vs-hero) { min-height: 0; padding-top: 140px; }
}
@media (max-width: 640px) {
  body.compare-page .compare-source > .hero { padding: 98px 20px 58px; }
  body.compare-page .compare-source > .vs-hero { padding: 92px 20px 58px; }
  .compare-page .closing-section .site-cta-copy h2 { font-size: 30px !important; }
  .compare-page .closing-section .site-cta-copy p { font-size: 16px; }
  .compare-page .compare-source section { padding: 64px 20px; }
  .compare-page .compare-source :is(.hero, .vs-hero) { padding-top: 124px; padding-bottom: 70px; }
  .compare-page .hero-headline,
  .compare-page .vs-hero h1.section-title { font-size: clamp(39px, 11vw, 58px); }
  .compare-page .hero-sub,
  .compare-page .vs-hero .section-sub { font-size: 16px; }
  .compare-page .eco-grid,
  .compare-page .money-scenario-grid,
  .compare-page .quote-grid,
  .compare-page .use-case-grid,
  .compare-page .price-compare,
  .compare-page .cost-compare,
  .compare-page .quote-wall .quote-grid,
  .compare-page .quote-wall .use-case-grid,
  .compare-page .feat-row { grid-template-columns: 1fr; }
  .compare-page .feat-row.reverse .feat-text,
  .compare-page .feat-row.reverse .feat-visual { order: initial; }
  .compare-page .money-compare-head,
  .compare-page .money-compare-row { gap: 10px; padding: 14px; }
  .compare-page .compare-table { display: block; overflow-x: auto; }
  .compare-page :is(.eco-card, .quote-card, .use-case-card, .faq-item, .vs-card, .price-compare-card) { padding: 22px; }
  .compare-page .compare-hero-visual { padding: 12px; }
  .compare-page:not(.demo-page) .hero-content > .container::after { border-width: 12px; }
}