/* The four guide pages. Everything else comes from site.css, so they match the legal pages. */
.guide { max-width: 44rem; }
.guide .summary p { margin: 0; }
.guide ol { padding-left: 1.4rem; }
.guide ol li { color: rgba(237, 235, 230, 0.84); margin: 0.35rem 0; }
.guide td, .guide th { overflow-wrap: anywhere; }
.guide tbody th { color: var(--ivory); font-weight: 500; font-size: 0.95rem; min-width: 6.5rem; }
.guide .shot { margin: 2rem auto; max-width: 15rem; text-align: center; }
.guide .shot img { display: block; width: 100%; height: auto; aspect-ratio: 660 / 1434; border-radius: 1.6rem; border: 1px solid var(--hairline); background: #000; }
.guide .shot figcaption { color: var(--ivory-faint); font-size: 0.85rem; margin-top: 0.6rem; }
.guide .get { margin: 2.6rem 0 0; padding: 1.6rem 1rem 1.4rem; border: 1px solid var(--hairline); border-radius: 1rem; text-align: center; }
.guide .get .badge { margin-top: 0; }
.guide .get p { color: var(--ivory-soft); font-size: 0.92rem; margin: 0.8rem 0 0; }
.guide .more h2 { margin-top: 2.2rem; }
.guide .more ul { list-style: none; padding: 0; margin: 0; }
.guide .more a { display: inline-block; padding: 0.3rem 0; }

/* Two products side by side. On a phone each row stacks, so neither column can end up off-screen. */
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 34rem) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare tbody th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 0.9rem 0; border-bottom: 1px solid var(--hairline); }
  .compare tbody th, .compare td { border: 0; padding: 0.15rem 0; }
  .compare tbody th { font-size: 1rem; margin-bottom: 0.25rem; }
  .compare td::before { content: attr(data-label) ": "; color: var(--champagne); }
}