@import url('./landing.css');

/* How Solipsium compares (compare.html, November 11, 2026). The table left the home page's
   Prism section for this page; its rules came with it from prism.css. A short dark first
   screen under the bar, the table and the RX note on the off-white band, then the close. */

/* The first screen sits on the same left edge as the table under it, as engine.html's does. */
.compare-hero { padding:calc(116px + env(safe-area-inset-top)) max(24px,calc((100% - 1120px) / 2)) 64px; text-align:left; }
.compare-hero::before,.compare-hero::after { -webkit-mask-image:linear-gradient(#000 45%,transparent); mask-image:linear-gradient(#000 45%,transparent); }
.compare-hero .hero-eyebrow,.compare-hero #hero-title,.compare-hero .hero-lede { margin-inline:0; padding-inline:0; }
.compare-hero #hero-title { max-width:14em; font-size:clamp(42px,5.6vw,72px); text-wrap:balance; }
.compare-hero .hero-lede { max-width:36em; }

.compare-body { padding:72px 0 120px; }

/* A real table. Solipsium's column comes first after the labels, a white card with a
   hairline edge; the others sit on the page. */
.compare-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.compare-scroll:focus-visible { outline-offset:2px; }
.compare { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:15px; line-height:1.5; text-align:left; }
/* The header row sets the columns: the labels a little narrower, the four products even. */
.compare thead td { width:16%; }
.compare thead th { width:21%; }
.compare th,.compare td { padding:16px 20px; vertical-align:top; border-top:1px solid var(--hair); }
.compare thead th,.compare thead td { padding-top:22px; border-top:0; color:var(--coal); font-size:16px; font-weight:650; letter-spacing:-.01em; vertical-align:bottom; }
/* The labels start on the page's own margin. */
.compare tbody th { padding-left:0; color:var(--coal); font-weight:600; }
.compare td { color:var(--coal-2); text-wrap:pretty; }
.compare .is-ours { background:var(--card); color:var(--coal); box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair); }
.compare thead .is-ours { border-radius:20px 20px 0 0; box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 1px 0 var(--hair); }
.compare tbody tr:last-child .is-ours { border-radius:0 0 20px 20px; box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 -1px 0 var(--hair); }
.compare-hint { display:none; }
.compare-notes { max-width:62em; margin:20px 0 0; color:var(--coal-2); font-size:13px; line-height:1.6; }
.compare-notes a { color:var(--coal); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }

/* Solipsium and iZotope RX: one paragraph under a hairline, at reading width. */
.compare-rx { max-width:44em; margin-top:88px; padding-top:28px; border-top:1px solid var(--hair); }
.site .compare-subhead { margin:0 0 18px; font:500 clamp(28px,2.6vw,36px)/1.1 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.014em; }
.compare-rx p { margin:0; color:var(--coal-2); font-size:17px; line-height:1.6; text-wrap:pretty; }

@media (max-width:820px) {
  /* The table keeps its columns and scrolls sideways inside its own box, never the page.
     A line above it says so, and the row labels stay in place while it scrolls. */
  .compare { min-width:700px; font-size:14px; }
  .compare thead td { width:15%; }
  .compare th,.compare td { padding:14px; }
  .compare tbody th,.compare thead td { position:sticky; left:0; z-index:1; background:var(--paper); box-shadow:1px 0 0 var(--hair); }
  .compare-hint { display:block; margin:0 0 12px; color:var(--coal); font-size:14px; font-weight:500; }
}
@media (max-width:700px) {
  .compare-hero { padding:calc(96px + env(safe-area-inset-top)) 16px 48px; }
  .compare-body { padding:48px 0 84px; }
  .compare-body .wrap { width:min(1120px,100% - 32px); }
  .compare-rx { margin-top:64px; }
}