@import url('style.css');

.guide { max-width: 900px; }
.guide .eyebrow { margin-bottom: 10px; }
.guide h1 { margin: 9px 0 14px; font-size: 50px; line-height: 1.06; letter-spacing: -2.4px; }
.dek { max-width: 750px; color: var(--muted); font-size: 19px; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 13px 0 0; color: #7d8a80; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.byline strong { color: var(--ink-2); }
.updated { color: #7d8a80; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.disclosure { margin: 20px 0; padding: 13px; border: 1px solid #d9e9b6; border-radius: 8px; background: #eff7df; color: #667564; font-size: 12px; }

.quick-compare { margin: 24px 0 30px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 14px 38px rgba(23, 35, 29, .06); }
.quick-compare__head { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding: 18px; border-bottom: 1px solid var(--line); }
.quick-compare__head h2 { margin: 3px 0 0; font-size: 23px; }
.quick-compare__head p { margin: 0; color: var(--muted); font-size: 12px; }
.quick-row { display: grid; grid-template-columns: 54px 1.2fr .45fr .9fr auto; gap: 13px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.quick-row:last-child { border-bottom: 0; }
.quick-row img { width: 50px; height: 50px; object-fit: contain; }
.quick-product strong, .quick-price strong { display: block; color: var(--ink); }
.quick-product span, .quick-price span, .quick-best { color: var(--muted); font-size: 12px; }
.quick-price strong { font-size: 18px; }
.quick-actions { display: grid; gap: 6px; min-width: 142px; }
.quick-actions .watch-button { min-height: 34px; }

.agent-summary { margin: 28px 0; padding: 24px; border-radius: 14px; background: var(--ink); color: #f5f8ee; }
.agent-summary .eyebrow { color: var(--lime); }
.agent-summary h2 { margin-top: 0; color: #fff; }
.agent-summary > p { color: #d0dbd2; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0; background: #53645a; }
.facts div { padding: 13px; background: var(--ink); }
.facts dt { color: #b9d679; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; text-transform: uppercase; }
.facts dd { margin: 5px 0 0; }
.agent-summary .note { color: #c2cec2; }

.toc, .callout, .faq { margin: 28px 0; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.toc a { display: block; padding: 4px 0; }
.callout h2, .faq h2 { margin-top: 0; }
.faq h3 { margin: 16px 0 5px; }
.faq h3:first-of-type { margin-top: 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: #6d7d6f; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.table code, .deal-card code { padding: 2px 5px; border-radius: 4px; background: #eef2eb; color: #34423a; }

.product { margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.product h3 { margin: 0 0 6px; font-size: 20px; }
.product p { margin: 6px 0; color: var(--muted); }
.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.decision-grid .product { margin: 0; }
.source-card { margin: 18px 0; padding: 20px; border: 2px solid #b9d679; border-radius: 11px; background: #fff; }
.source-card h3 { margin: 0 0 8px; }
.checklist { padding-left: 20px; }
.checklist li { margin: 8px 0; }
.note { color: #849085 !important; font-size: 12px; }
.source-note { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

.verdict { margin: 28px 0; padding: 24px; border-radius: 14px; background: var(--ink); color: #f7faef; }
.verdict .eyebrow { color: var(--lime); }
.verdict h2 { margin: 3px 0 18px; color: #fff; }
.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.verdict-grid div { padding: 14px; border: 1px solid #4a5b51; border-radius: 8px; }
.verdict-grid p { margin: 5px 0; color: #c9d3cb; }
.price-rule { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 !important; }
.price-rule span { color: var(--lime); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.price-rule strong { padding: 5px 9px; border-radius: 999px; background: #2c3b33; font-size: 12px; }

.identity-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.identity-card div { padding: 13px; border-bottom: 1px solid var(--line); }
.identity-card dt { color: #748178; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.identity-card dd { margin: 4px 0 0; font-weight: 700; }
.compat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compat-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.compat-grid h3 { margin: 8px 0 4px; font-size: 17px; }
.compat-grid p { margin: 0; font-size: 14px; }
.status { display: inline-block; padding: 4px 7px; border-radius: 999px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.status.good { background: #e6f6c8; color: #476416; }
.status.check { background: var(--amber-soft); color: #7b5910; }
.status.no { background: #f8dfda; color: #83382c; }

.deal-stack { display: grid; gap: 16px; }
.deal-card { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.deal-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; }
.deal-image { min-height: 185px; display: grid; place-items: center; padding: 14px; border-radius: 11px; background: linear-gradient(145deg, #f1f6ec, #fff); }
.deal-image img { width: 100%; height: 170px; object-fit: contain; }
.deal-content h3 { margin: 10px 0 2px; font-size: 24px; line-height: 1.2; }
.deal-card p { margin: 9px 0; }
.deal-subtitle { color: #7b877d !important; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.deal-rank { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.live-dot { color: #607164; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #79a72d; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.deal-actions .cta { margin: 0; }
.fallback-link { align-self: center; font-size: 12px; font-weight: 700; }
.official-source { color: var(--muted); font-size: 11px; }
.sources { padding-left: 20px; }
.sources li { margin: 8px 0; }
.change-log { display: grid; gap: 8px; }
.change-entry { padding: 12px 14px; border-left: 3px solid #9fc04f; background: #f1f6e7; color: var(--muted); font-size: 13px; }
.change-entry strong { color: var(--ink); }

@media (max-width: 760px) {
  .guide h1 { font-size: 40px; }
  .facts, .decision-grid, .verdict-grid, .identity-card, .compat-grid { grid-template-columns: 1fr; }
  .quick-compare__head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .quick-row { grid-template-columns: 48px 1fr auto; align-items: start; }
  .quick-row img { grid-row: 1 / 3; }
  .quick-best { grid-column: 2 / 4; }
  .quick-actions { grid-column: 1 / 4; grid-template-columns: 1fr 1fr; width: 100%; }
  .deal-body { grid-template-columns: 130px minmax(0, 1fr); gap: 15px; }
  .deal-image { min-height: 135px; }
  .deal-image img { height: 125px; }
  .table { font-size: 13px; }
  .table th, .table td { padding: 9px; }
}

@media (max-width: 540px) {
  .deal-body { grid-template-columns: 1fr; }
  .deal-image { min-height: 200px; }
  .deal-image img { height: 190px; }
  .deal-rank { align-items: flex-start; flex-direction: column; }
  .deal-actions { align-items: stretch; flex-direction: column; }
  .deal-actions .cta, .deal-actions .watch-button { width: 100%; }
  .quick-actions { grid-template-columns: 1fr; }
}