/* "Why Hearth": a stat strip, a live load test, a wall of what's included, and the usual
   media-server grumbles struck through. Typography and light only, no pictures: the two
   panels are the only boxes, because each is a discrete demo. */
.versus-chapter { --sage:#a9d5b5; --ash:#c49a9e; --ash-hot:#e3786a; position:relative; isolation:isolate; overflow:clip; background:linear-gradient(180deg,#1b1223 0%,#211729 46%,#1d1426 100%); border-bottom:1px solid var(--border); }
.versus-glow { position:absolute; inset:-10% -10% auto; height:720px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 60% at 72% 30%,rgba(255,150,96,.16),transparent 70%),radial-gradient(ellipse 40% 50% at 12% 10%,rgba(169,213,181,.06),transparent 70%); }
.versus-chapter h3 em { color:var(--ember); font-style:normal; }

/* Heading: the claim, then four promises set as a ledger. */
.versus-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px 64px; align-items:end; }
.versus-intro .eyebrow { margin-bottom:22px; }
.versus-intro h2 { font-size:clamp(36px,4vw,56px); }
.versus-lead { max-width:56ch; margin-top:24px; font-size:18px; line-height:1.7; text-wrap:pretty; }
.versus-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; border-top:1px solid var(--border); }
.versus-stat { position:relative; padding:20px 18px 20px 0; border-bottom:1px solid var(--border); min-width:0; }
.versus-stat:nth-child(odd) { padding-right:22px; border-right:1px solid var(--border); }
.versus-stat:nth-child(even) { padding-left:22px; }
.versus-stat dt { font:500 clamp(24px,2.3vw,32px)/1.1 Hearth,ui-rounded,system-ui,sans-serif; letter-spacing:-.01em; white-space:nowrap; background:linear-gradient(100deg,var(--ink) 0 40%,#ffe2c7 46%,var(--ember) 50%,#ffe2c7 54%,var(--ink) 60% 100%) 100% 0/250% 100% no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; }
.versus-stat dd { margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.versus-stat::after { content:''; position:absolute; left:0; bottom:-1px; width:56px; height:2px; background:var(--ember); box-shadow:0 0 12px rgba(255,173,121,.8); transform-origin:left; transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 160ms + .2s); }
.versus-stat:nth-child(even)::after { left:22px; }
.versus-stats.is-lit .versus-stat dt { animation:stat-glint 1.4s cubic-bezier(.4,0,.2,1) calc(var(--i) * 160ms) both; }
.js .versus-stats:not(.is-lit) .versus-stat::after { transform:scaleX(0); }
@keyframes stat-glint { from { background-position:100% 0; } to { background-position:0 0; } }

/* The two panels sit side by side and end together. */
.versus-bench { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,6fr); gap:28px; margin-top:72px; align-items:stretch; }
.load-test, .feature-wall { display:flex; flex-direction:column; min-width:0; padding:28px 30px 24px; border-radius:22px; border:1px solid rgba(231,191,220,.16); background:linear-gradient(180deg,rgba(61,43,72,.55),rgba(33,23,41,.85)); box-shadow:0 26px 60px -24px rgba(8,3,14,.8),inset 0 1px 0 rgba(255,228,200,.06); }
.bench-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.bench-kicker { display:block; margin-bottom:10px; font:600 10.5px/1 system-ui,sans-serif; letter-spacing:.2em; color:var(--faint); }
.bench-head h3 { font-size:clamp(22px,2.1vw,28px); }
.bench-note { margin-top:auto; padding-top:18px; font-size:12px; line-height:1.6; color:var(--faint); }

.load-quality { flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:4px; border-radius:12px; border:1px solid var(--border); background:rgba(24,15,32,.7); }
.load-quality button { min-width:72px; min-height:44px; padding:6px 14px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:500 15px Hearth,ui-rounded,system-ui,sans-serif; white-space:nowrap; transition:background-color .25s,color .25s; }
.load-quality button[aria-pressed=true] { background:var(--ember); color:var(--deep); box-shadow:0 2px 0 rgba(12,5,18,.5); }
.load-quality button:not([aria-pressed=true]):hover { color:var(--peach); }

.load-lanes { display:grid; margin-top:22px; }
.load-lane { display:grid; gap:12px; padding-block:22px; border-top:1px solid rgba(231,191,220,.12); }
.load-lane:last-child { padding-bottom:6px; }
.load-who { display:flex; align-items:center; gap:13px; min-width:0; }
.load-who::before { content:''; flex:none; width:4px; height:36px; border-radius:2px; background:var(--ash-hot); }
.load-hearth .load-who::before { background:var(--ember); box-shadow:0 0 12px rgba(255,173,121,.7); }
.load-who > span { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.load-who b { font:500 19px/1.25 Hearth,ui-rounded,system-ui,sans-serif; color:var(--ink); text-wrap:balance; }
.load-who small { font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.load-mood { margin-left:auto; flex:none; padding:5px 12px; border-radius:8px; font:600 12px system-ui,sans-serif; font-style:normal; letter-spacing:.02em; white-space:nowrap; }
.load-rival .load-mood { color:#ffb3a6; background:rgba(227,120,106,.14); box-shadow:inset 0 0 0 1px rgba(227,120,106,.32); }
.load-hearth .load-mood { color:var(--sage); background:rgba(169,213,181,.1); box-shadow:inset 0 0 0 1px rgba(169,213,181,.28); }
.load-meter { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:14px; }
.load-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.load-wave { display:block; width:100%; height:86px; border-radius:10px; background:linear-gradient(180deg,rgba(24,15,32,.2),rgba(24,15,32,.75)); box-shadow:inset 0 0 0 1px rgba(231,191,220,.08); }
.load-bar { position:relative; display:block; height:12px; border-radius:6px; overflow:hidden; background:rgba(24,15,32,.8); box-shadow:inset 0 0 0 1px rgba(231,191,220,.08); }
.load-bar > i { position:absolute; inset:0 auto 0 0; width:100%; border-radius:6px; transform-origin:left; transform:scaleX(var(--level,.5)); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.load-rival .load-bar > i { background:linear-gradient(90deg,var(--ash),var(--ash-hot)); }
.load-hearth .load-bar > i { background:linear-gradient(90deg,#e8915f,var(--peach)); box-shadow:0 0 14px rgba(255,173,121,.5); }
.load-rival .load-bar > i::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 10px,rgba(255,255,255,.12) 10px 14px); animation:bar-strain 1.2s linear infinite; }
@keyframes bar-strain { to { background-position:28px 0; } }
.load-verdict { margin-top:18px; padding:4px 0 4px 18px; border-left:3px solid var(--ember); font:500 21px/1.45 Hearth,ui-rounded,system-ui,sans-serif; color:var(--ink); text-wrap:pretty; }

/* The feature wall: five rooms of features, one at a time, and the bill comes to nothing.
   An ember runs round the panel's edge, and a warm light follows the pointer. */
@property --wall-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.feature-wall { position:relative; isolation:isolate; overflow:hidden; }
.feature-wall::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; background:conic-gradient(from var(--wall-angle), transparent 0 62%, rgba(255,173,121,.15) 70%, rgba(255,173,121,.95) 80%, #fff0de 83%, transparent 88%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:0; transition:opacity .8s; }
.feature-wall.is-lit::before { opacity:1; animation:wall-orbit 7s linear infinite; }
@keyframes wall-orbit { to { --wall-angle:360deg; } }
.feature-wall::after { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(460px circle at var(--mx, 80%) var(--my, -10%), rgba(255,173,121,.13), transparent 62%); transition:opacity .4s; }

.wall-count { flex:none; display:flex; align-items:center; gap:10px; margin:0; }
.wall-count b { font:500 58px/.9 Hearth,ui-rounded,system-ui,sans-serif; letter-spacing:-.03em; font-variant-numeric:tabular-nums; min-width:1.15em; text-align:right; background:linear-gradient(180deg,#ffe7cf,var(--ember) 60%,#e2734b); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 16px rgba(255,140,80,.35)); }
.wall-count span { font:600 10.5px/1.45 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.feature-wall.is-counting .wall-count b { animation:count-pulse .18s ease-out; }
@keyframes count-pulse { 50% { scale:1.06; } }

/* Five rooms, one at a time: a segmented tab strip whose active tab fills like a story
   timer, and a stage where each room's artwork crossfades in behind four short lines. */
.wall-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:22px; padding:4px; border-radius:12px; border:1px solid var(--border); background:rgba(24,15,32,.7); }
.wall-tabs button { position:relative; overflow:hidden; min-width:0; min-height:44px; padding:6px 4px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:500 14.5px Hearth,ui-rounded,system-ui,sans-serif; white-space:nowrap; transition:color .25s, background-color .25s; }
.wall-tabs button > span { position:relative; z-index:1; }
.wall-tabs button:hover { color:var(--peach); }
.wall-tabs button[aria-selected=true] { color:var(--ink); background:rgba(255,173,121,.14); }
.wall-tab-fill { position:absolute; left:8px; right:8px; bottom:4px; height:2px; border-radius:2px; background:var(--ember); box-shadow:0 0 8px rgba(255,173,121,.8); transform-origin:left; transform:scaleX(0); }
.wall-tabs button[aria-selected=true] .wall-tab-fill { transform:scaleX(1); }
.feature-wall.is-playing .wall-tabs button[aria-selected=true] .wall-tab-fill { animation:tab-fill var(--room-ms, 5200ms) linear both; }
.feature-wall.is-paused .wall-tabs button[aria-selected=true] .wall-tab-fill { animation-play-state:paused; }
@keyframes tab-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.wall-stage { position:relative; flex:1; min-height:300px; margin-top:16px; border-radius:16px; overflow:hidden; background:#140c1a; box-shadow:0 0 0 1px rgba(231,191,220,.12), 0 18px 36px -18px rgba(8,3,14,.9); }
.wall-room { position:absolute; inset:0; display:flex; align-items:flex-end; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s; }
.wall-room.is-active { opacity:1; visibility:visible; transition:opacity .7s ease, visibility 0s; }
.wall-art { position:absolute; inset:0; }
.wall-art img { width:100%; height:100%; object-fit:cover; scale:1.06; }
.wall-room.is-active .wall-art img { animation:wall-drift 9s ease-out both; }
@keyframes wall-drift { from { scale:1.16; translate:2% 1%; } to { scale:1.06; translate:0 0; } }
.wall-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,26,.15) 0%,rgba(20,12,26,.5) 40%,rgba(20,12,26,.94) 100%), linear-gradient(90deg,rgba(20,12,26,.7),transparent 70%); }
.wall-lines { position:relative; list-style:none; margin:0; padding:22px 24px 24px; display:grid; gap:9px; }
.wall-lines li { display:flex; align-items:center; gap:12px; font:500 21px/1.25 Hearth,ui-rounded,system-ui,sans-serif; color:var(--ink); text-shadow:0 2px 12px rgba(10,4,16,.8); }
.wall-lines li::before { content:''; flex:none; width:18px; height:2px; border-radius:2px; background:var(--ember); box-shadow:0 0 8px rgba(255,173,121,.9); }
.wall-room.is-active .wall-lines li { animation:line-in .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--k) * 110ms) both; }
@keyframes line-in { from { opacity:0; translate:-18px 0; filter:blur(6px); } }
/* Without JavaScript every room is shown, one under another. */
html:not(.js) .wall-stage { min-height:0; display:grid; gap:2px; }
html:not(.js) .wall-room { position:relative; opacity:1; visibility:visible; min-height:240px; }

/* The receipt: everything above, for nothing. The price is stamped on last. */
.wall-receipt { display:flex; align-items:center; gap:14px; margin:20px 0 0; padding-top:18px; border-top:1px solid rgba(231,191,220,.12); font:500 15px Hearth,ui-rounded,system-ui,sans-serif; color:var(--muted); }
.receipt-rule { flex:1; min-width:24px; border-top:1.5px dashed rgba(255,196,157,.3); }
.receipt-price { padding:3px 14px 4px; border:2px solid var(--ember); border-radius:9px; font:600 22px/1.1 Hearth,ui-rounded,system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--ember); rotate:-5deg; box-shadow:0 0 18px rgba(255,140,80,.3), inset 0 0 10px rgba(255,140,80,.15); }
.feature-wall.is-lit .receipt-price { animation:stamp-in .5s cubic-bezier(.2,1.6,.4,1) 1.75s both; }
@keyframes stamp-in { 0% { opacity:0; scale:2.2; rotate:-14deg; } 70% { opacity:1; scale:.94; } 100% { scale:1; rotate:-5deg; } }
.feature-wall .bench-note { padding-top:12px; }

/* The grumbles, struck through as they scroll into view. */
.gripe-ledger { margin-top:92px; }
.gripe-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding-bottom:26px; border-bottom:1px solid var(--border); }
.gripe-head h3 { font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-.015em; }
.gripe-head .text-link { flex:none; display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--peach); font:500 16px Hearth,ui-rounded,system-ui,sans-serif; white-space:nowrap; }
.gripe-head .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.gripe-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; }
.gripe { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px 0; padding:22px 0 24px; border-bottom:1px solid rgba(231,191,220,.1); min-width:0; }
.gripe-num { grid-row:1/3; font:600 12px/1.9 ui-monospace,monospace; color:var(--faint); }
.gripe-was { font-size:14.5px; color:var(--faint); }
/* A background stroke, not a pseudo-element, so a complaint that wraps is struck on every line. */
.gripe-was s { text-decoration:none; background:linear-gradient(var(--ash-hot),var(--ash-hot)) 0 58%/100% 2px no-repeat; transition:background-size .7s cubic-bezier(.6,.05,.3,1) calc(var(--i) * 110ms); }
.gripe-now { font:500 20px/1.3 Hearth,ui-rounded,system-ui,sans-serif; color:var(--ink); text-wrap:balance; transition:opacity .5s calc(var(--i) * 110ms + .3s),translate .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 110ms + .3s); }
/* Without JavaScript the list is simply shown struck through. */
.js .gripe-list:not(.is-struck) .gripe-was s { background-size:0% 2px; }
.js .gripe-list:not(.is-struck) .gripe-now { opacity:0; translate:-14px 0; }

.versus-chapter :focus-visible { outline:3px solid var(--outline); outline-offset:3px; }

@media (max-width:1150px) {
  .versus-heading { gap:36px 44px; }
  .load-test, .feature-wall { padding:24px 22px 20px; }
  .load-meter { grid-template-columns:70px minmax(0,1fr); gap:10px; }
}
@media (max-width:900px) {
  .versus-heading { grid-template-columns:minmax(0,1fr); }
  .versus-bench { grid-template-columns:minmax(0,1fr); margin-top:52px; gap:20px; }
  .gripe-ledger { margin-top:68px; }
}
@media (max-width:650px) {
  .versus-lead { font-size:16px; margin-top:18px; }
  .versus-stat { padding:16px 12px 16px 0; }
  .versus-stat:nth-child(odd) { padding-right:14px; }
  .versus-stat:nth-child(even) { padding-left:14px; }
  .versus-stat:nth-child(even)::after { left:14px; }
  .versus-stat dt { font-size:21px; }
  .versus-stat dd { font-size:12.5px; }
  .load-test, .feature-wall { padding:20px 16px 18px; border-radius:18px; }
  .bench-head { flex-direction:column; gap:14px; }
  .load-quality { align-self:stretch; }
  .load-who small { display:none; }
  .load-who b { font-size:17px; }
  .load-meter { grid-template-columns:minmax(0,1fr); gap:6px; }
  .load-wave { height:60px; }
  .load-verdict { font-size:17px; }
  .wall-count { align-self:flex-start; }
  .wall-count b { font-size:46px; }
  .wall-tabs button { font-size:13px; }
  .wall-stage { min-height:280px; }
  .wall-lines { padding:18px 16px 18px; gap:8px; }
  .wall-lines li { font-size:17.5px; gap:10px; }
  .wall-lines li::before { width:12px; }
  .gripe-head { flex-direction:column; align-items:flex-start; gap:12px; }
  .gripe-list { grid-template-columns:minmax(0,1fr); }
  .gripe { grid-template-columns:34px minmax(0,1fr); padding-block:18px 20px; }
  .gripe-now { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .load-rival .load-bar > i::after, .versus-stats.is-lit .versus-stat dt { animation:none !important; }
  .load-bar > i, .gripe-was s, .gripe-now, .versus-stat::after, .wall-room, .wall-tabs button { transition:none; }
  .feature-wall.is-lit::before, .feature-wall.is-lit .receipt-price, .feature-wall.is-counting .wall-count b, .wall-room.is-active .wall-art img, .wall-room.is-active .wall-lines li, .wall-tab-fill { animation:none !important; }
  .feature-wall::before { display:none; }
}
.motion-paused .load-rival .load-bar > i::after, .motion-paused .versus-stats.is-lit .versus-stat dt { animation:none !important; }
.motion-paused .load-bar > i, .motion-paused .gripe-was s, .motion-paused .gripe-now, .motion-paused .versus-stat::after, .motion-paused .wall-room { transition:none; }
.motion-paused .feature-wall.is-lit::before, .motion-paused .feature-wall.is-lit .receipt-price, .motion-paused .feature-wall.is-counting .wall-count b, .motion-paused .wall-room.is-active .wall-art img, .motion-paused .wall-room.is-active .wall-lines li, .motion-paused .wall-tab-fill { animation:none !important; }