/* Prism on the home page (index.html, September 30, 2026): the models Solipsium trains
   itself. The introduction sits on the black band, with a gold ribbon of light, in the
   manner of the PlayStation 3's wave, running across it and over the foot of its heading
   (prism-ribbon.js). What Prism is, why it's different and how
   it compares are read on the off-white band, in white hairline cards like the other
   reading sections (landing.css). Gold stays on what can be pressed. */

/* The introduction follows the first screen, whose grain lifts the black to #0d0e10, so it
   starts at that and settles to the night colour, and no seam shows between them. The
   band clips the ribbon, so it never makes a phone's page scroll sideways. The ribbon's
   canvas lies over the words, so it can pass in front of the heading's foot; it never
   takes a tap, and the pause button sits above it. */
.prism-intro { position:relative; isolation:isolate; overflow:hidden; padding:136px 0 128px; background:linear-gradient(#0d0e10,var(--night) 320px); text-align:center; }
.prism-ribbon { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.prism-intro .eyebrow { justify-content:center; margin-bottom:56px; }
/* PRISM in capitals, set by the style so a screen reader still says "Prism". As wide as
   the word, so prism-ribbon.js can measure where its letters stand. Gold like SOLIPSIUM
   in the bar above, with a thin black edge; the stroke is painted under the fill, so only
   its outer half shows and the letters keep their weight. */
.site .prism-title { width:fit-content; margin:0 auto; color:var(--gold-light); -webkit-text-stroke:2px #000; paint-order:stroke fill; font:500 clamp(68px,12vw,160px)/1 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:.04em; text-transform:uppercase; }
/* Far enough under the word for the ribbon to pass between them. */
.prism-lede { max-width:30em; margin:128px auto 0; }
/* The first screen's round pause button (landing.css), in this band's corner. */
.prism-intro .prism-pause { top:24px; right:max(24px,calc((100% - 1120px) / 2)); }

.prism-body { padding:120px 0 136px; }
.prism-part + .prism-part { margin-top:112px; }
.site .prism-subhead { margin:0 0 28px; font:500 clamp(28px,2.6vw,36px)/1.1 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.014em; }
.prism-body h4 { margin:0 0 8px; font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.012em; }
.prism-body p { margin:0; }

/* What it is: three white hairline cards, like the doors further down. */
.prism-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.prism-card { padding:30px 30px 32px; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.prism-card p,.prism-points p { color:var(--coal-2); font-size:16px; line-height:1.5; text-wrap:pretty; }

/* Why it's different: the heading on the left, four points in two columns beside it. */
.prism-why { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:0 72px; align-items:start; }
.prism-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 40px; margin:0; padding:0; list-style:none; }
.prism-points li { padding-top:18px; border-top:1px solid var(--hair); }
.prism-points h4 { font-size:18px; }

/* How it compares: a real table. Solipsium's column comes first after the labels, a white
   card with a hairline edge; the others sit on the page. */
.prism-note { max-width:44em; color:var(--coal-2); font-size:17px; line-height:1.55; text-wrap:pretty; }
.compare-scroll { margin-top:36px; 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, under the heading. */
.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; }
.prism-body .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; }

@media (max-width:820px) {
  .prism-cards,.prism-why { grid-template-columns:minmax(0,1fr); }
  /* 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); }
  .prism-body .compare-hint { display:block; margin:20px 0 0; color:var(--coal); font-size:14px; font-weight:500; }
  .compare-scroll { margin-top:12px; }
}
@media (max-width:700px) {
  .prism-intro { padding:96px 0 88px; }
  .prism-intro .eyebrow { margin-bottom:40px; }
  .prism-lede { margin-top:68px; }
  .prism-intro .prism-pause { top:12px; right:12px; }
  .prism-body { padding:84px 0; }
  .prism-part + .prism-part { margin-top:72px; }
  .prism-points { grid-template-columns:minmax(0,1fr); gap:28px; }
  .prism-card { padding:26px 22px; }
}