/* Section four: why on your PC. After usevyra's comparison: one calm table of four plain questions. The Malphas column is
   lit (bone, on a faint raised panel); the other column is ash. No red here: nothing is being stopped. */
.s-why { position: relative; min-height: 90vh; padding: 140px 0 14vh; align-items: flex-start; }
.s4wrap { width: min(1080px, calc(100vw - 48px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.s4cmp { position: relative; width: 100%; margin-top: 64px; }
/* the lit Malphas column: a soft raised strip behind the third column, top to bottom */
.s4cmp::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 34%; border-radius: 18px;
  background: linear-gradient(180deg, rgba(237,237,232,.06), rgba(237,237,232,.025)); border: 1px solid rgba(237,237,232,.12); pointer-events: none; }
.s4row { position: relative; display: grid; grid-template-columns: 32% 34% 34%; align-items: center; min-height: 84px; border-bottom: 1px solid rgba(237,237,232,.08); }
.s4row:last-child { border-bottom: 0; }
/* 2026-10-15 (owner): larger type throughout, for easy reading (was 16 / 15 / 19 / 14px) */
.s-why .s2head p { font-size: clamp(17px, 1.3vw, 20px); }
.s4row > span { padding: 22px 28px; font-size: 19px; line-height: 1.45; }
.s4row > span:first-child { padding-left: 4px; font-size: 17.5px; color: rgba(237,237,232,.55); }
.s4row > span:nth-child(2) { color: rgba(237,237,232,.55); }
.s4row > span.me { color: #edede8; }
.s4head { min-height: 76px; }
.s4head > span { font-family: var(--display); font-weight: 300; font-size: 23px !important; letter-spacing: .01em; }
.s4head > span:nth-child(2) { color: rgba(237,237,232,.55); }
.s4head .me { display: flex; align-items: center; gap: 12px; color: #edede8; }
.s4head .me img { width: 26px; height: 20px; }

.s4note { margin: 30px 0 0; max-width: 36em; text-align: center; font-size: 16px; line-height: 1.6; color: rgba(237,237,232,.5); }

@media (max-width: 820px) {
  .s4cmp::before { display: none; }
  .s4row { grid-template-columns: 1fr 1fr; padding: 14px 0; }
  .s4row > span:first-child { grid-column: 1 / -1; padding: 0 4px 6px; }
  .s4row > span { padding: 4px; font-size: 16.5px; }
  .s4head > span:first-child { display: none; }
}

/* red accents: the hero's short red rule under the headline, a thin glowing red edge on top of the Malphas column,
   and a small red dot before each Malphas answer. Red stays on Malphas's side only. */
.s-why .s2head h2::after { content: ''; display: block; width: 64px; height: 1px; margin: 26px auto 0; background: #e8283f; box-shadow: 0 0 10px rgba(232,40,63,.7); }
.s4cmp::after { content: ''; position: absolute; top: 0; right: 18px; width: calc(34% - 36px); height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(232,40,63,0), #e8283f 30%, #e8283f 70%, rgba(232,40,63,0)); box-shadow: 0 0 14px rgba(232,40,63,.55); }
.s4row:not(.s4head) > span.me { display: flex; align-items: baseline; gap: 12px; }
.s4row:not(.s4head) > span.me::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #e8283f; box-shadow: 0 0 8px rgba(232,40,63,.7); transform: translateY(-2px); }
@media (max-width: 820px) { .s4cmp::after { display: none; } }