/* T05 · index 07 compare + 08 price. Logical properties only. */

/* ---- 07 compare ---- */
#compare .section-head { margin-bottom: var(--s-7); }
.cmp-hint { margin: 0 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.cmp-hint::after { content: ""; flex: none; inline-size: 28px; block-size: 1px; background: var(--kx-blue-line); }
@media (min-width: 640px) { .cmp-hint { display: none; } }
.table-scroll { background: #fff; box-shadow: var(--sh-2); border: 1px solid var(--kx-line); }
.table-scroll .compare { border: 0; border-radius: 0; }
.compare thead th { font-size: var(--fs-small); letter-spacing: .01em; padding-block: var(--s-5); }
.compare tbody th { font-weight: var(--fw-bold); color: var(--kx-ink); inline-size: 12rem; background: #fff; }
.compare td { color: var(--kx-ink-2); }
.compare td.is-us { color: var(--kx-ink); }
.compare thead .is-us { font-size: 1.0625rem; letter-spacing: .02em; }
.compare tbody td.is-us { box-shadow: inset 2px 0 0 var(--kx-blue-tint-2), inset -2px 0 0 var(--kx-blue-tint-2); }
.compare strong { font-weight: var(--fw-black); }
.cmp { display: inline-flex; align-items: flex-start; gap: 6px; }
.cmp .icon { inline-size: 18px; block-size: 18px; margin-top: 3px; stroke-width: 2; }
.cmp--yes .icon { color: var(--kx-blue-ink); }
.cmp--no .icon { color: var(--kx-ink-3); }
.cmp--maybe .icon { color: var(--kx-ink-3); }
.compare td.is-us .cmp--yes .icon { color: var(--kx-blue-ink); }
.cmp-note { margin: var(--s-4) 0 0; max-inline-size: 72ch; }

/* ---- 08 price ---- */
.price-wrap { display: grid; gap: var(--s-8); }
.price-card h2 { margin-bottom: var(--s-6); }
.price-figure {
  position: relative; padding-block: var(--s-5) var(--s-4);
  border-block: 1px solid var(--kx-line);
}
/* thin measurement ticks along the price rule */
.price-figure::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; block-size: 7px;
  background: repeating-linear-gradient(90deg, var(--kx-blue-line) 0 1px, transparent 1px 24px);
  opacity: .6;
}
.price-figure .price { margin: 0; color: var(--kx-ink); }
.price-figure .price bdi { unicode-bidi: isolate; }
.price-sub bdi { font-weight: var(--fw-bold); color: var(--kx-ink); font-variant-numeric: tabular-nums; }
.price-card .btn--block { margin-top: var(--s-2); }
.price-micro { margin: var(--s-4) 0 0; text-align: center; }
.price-micro a { color: var(--kx-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.price-media { margin: 0; display: none; }

@media (min-width: 960px) {
  .price-wrap {
    max-inline-size: calc(1080px + 2 * var(--gutter));
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: var(--s-10);
  }
  .price-media {
    display: block; container-type: inline-size; position: relative; border-radius: var(--r-lg);
    background: var(--kx-surface); border: 1px solid var(--kx-line); padding: var(--s-7);
  }
  .price-media img { display: block; inline-size: 100cqi; block-size: auto; border-radius: var(--r-md); mix-blend-mode: multiply; }
  .price-media::before {
    content: ""; position: absolute; inset: var(--s-4); border: 1px dashed var(--kx-blue-line);
    border-radius: var(--r-md); opacity: .45; pointer-events: none;
  }
}
@media (forced-colors: active) { .price-figure::after, .price-media::before { display: none; } }
.compare .num { white-space: nowrap; }
@media (max-width: 639px) { .compare tbody th { inline-size: auto; } .compare th, .compare td { padding: var(--s-3); } }