/* Styles for the /vs/ comparison section only.
   Kept out of style.css on purpose: appending there changes that file's content
   hash, which rewrites the cache-busting URL in every /best-mattress-for/ page and
   counts as modifying them. This file uses the same tokens and adds no new ones. */

/* head-to-head comparison pages (/vs/). Uses the existing tokens only. */
.faceoff{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:1.6rem 0 .4rem;padding:0}
.faceoff-side{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 22px;text-align:center;position:relative}
.faceoff-side.faceoff-win{border-color:var(--purple)}
.faceoff-side img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--purple-band)}
.faceoff-side h2{font-size:1.2rem;margin:.9rem 0 .2rem}
.faceoff-score{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--purple);margin:0;line-height:1.1}
.faceoff-score .of{font-size:.9rem;color:var(--gray);font-weight:600}
.faceoff-side .deal-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%)}
@media (max-width:680px){.faceoff{grid-template-columns:1fr;gap:16px}}
.compare-list{list-style:none;padding:0;margin:.6rem 0 1.4rem}
.compare-list li{padding:7px 0;border-bottom:1px solid var(--border)}

/* Deep-content sections. Same tokens as the rest of the site, no new ones. */
.layer-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:1.1rem 0 1.5rem}
.layer-col h4{font-size:1rem;margin:0 0 .5rem;color:var(--purple)}
.layer-list{margin:0;padding-left:1.15rem}
.layer-list li{margin:0 0 .6rem;line-height:1.5}
.layer-detail{display:block;color:var(--gray);font-size:.93rem;margin-top:.15rem}
@media (max-width:680px){.layer-cols{grid-template-columns:1fr;gap:14px}}

.fit{font-weight:600;white-space:nowrap}
.fit-in-range{color:var(--purple)}
.fit-too-firm,.fit-too-soft{color:var(--gray)}

.pts{list-style:none;padding:0;margin:.5rem 0 1.2rem}
.pts li{padding:9px 0 9px 26px;border-bottom:1px solid var(--border);position:relative;line-height:1.55}
.pts li:last-child{border-bottom:0}
.pt-win::before{content:"+";position:absolute;left:4px;top:9px;color:var(--purple);font-weight:800}
.pt-loss::before{content:"\2212";position:absolute;left:4px;top:9px;color:var(--gray);font-weight:800}

.fineprint{color:var(--gray);font-size:.9rem;margin:.4rem 0 1.4rem}

/* Layer cross-section. Replaces the two ragged lists: both stacks are the same
   height so the beds line up however many layers each one has. */
.ld-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:1.3rem 0 .5rem}
.ld-col{margin:0}
.ld-col figcaption{font-family:var(--display);font-weight:700;color:var(--purple);margin:0 0 .55rem}
.ld-stack{display:flex;flex-direction:column;height:340px;border:1px solid var(--border);
          border-radius:12px;overflow:hidden;background:var(--bg-2)}
.ld-band{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding:0 12px;min-height:28px;border-bottom:1px solid rgba(0,0,0,.25)}
.ld-band:last-child{border-bottom:0}
.ld-name{font-size:.86rem;font-weight:600;line-height:1.25}
.ld-thick{font-size:.78rem;color:var(--gray);font-weight:600;white-space:nowrap}
.ld-prose{color:var(--gray);font-size:.95rem;line-height:1.65;margin:.9rem 0 0}
@media (max-width:680px){.ld-grid{grid-template-columns:1fr;gap:18px}.ld-stack{height:300px}}

/* Short construction read under each stack, headed by the bed it describes. */
.ld-notes{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:1rem 0 .2rem}
.ld-note h4{font-size:.95rem;margin:0 0 .35rem;color:var(--purple)}
.ld-note p{color:var(--gray);font-size:.95rem;line-height:1.6;margin:0}
@media (max-width:680px){.ld-notes{grid-template-columns:1fr;gap:16px}}

/* Winner emphasis in the comparison tables.
   style.css fills the winning cell with a purple block (td.win). Down a scorecard the
   winner alternates between the two brands, so the block jumps from column to column
   and the table reads as randomly coloured cells instead of two columns of numbers.
   Here the winner is marked on the number itself - purple, bold - and the cell keeps
   whatever background its row already had, so every cell in a row matches.
   The second rule restores the zebra stripe that the first one would otherwise remove
   from winner cells only, which is what made a cell look punched out of its row.
   Scoped to /vs/: the guides keep the filled cell they have always had. */
.narrow td.win{background:transparent!important;color:var(--purple);font-weight:700}
.narrow tr:nth-child(2n) td.win{background:var(--bg-2)!important}
/* the fit table's second label column is a sub-heading, not a full header */
.narrow th.sub{font-weight:600;opacity:.82}