#why .install-pitch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; }
#why h2 { margin: 0 0 20px; font: 400 clamp(38px, 4vw, 54px)/1.1 var(--serif); text-wrap: balance; }
#why p { margin: 0 0 22px; }
#why .lead { font-size: 19px; line-height: 1.55; }
#why .origin-line { margin: 28px 0 0; color: var(--ink-2); font-size: 14px; }
#why .window { border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 4px 4px 0 var(--shadow); }
#why .window-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--ink); text-align: center; font: 13px/1.5 var(--pixel); letter-spacing: var(--pixel-tracking); word-spacing: var(--pixel-word-spacing); }
#why .window-bar::before, #why .window-bar::after { content: ""; flex: 1; min-width: 12px; height: 9px; border-block: 1px solid var(--ink); background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--ink) 2px 3px); }
#why .window-body { padding: 24px; }
#why .panel-brand { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; text-align: center; }
#why .brand { display: inline-flex; align-items: center; gap: 10px; font: 400 34px/1.1 var(--serif); }
#why .brand img { width: 29px; height: 29px; }
#why .app-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; margin: 0; padding: 0; }
#why .app-grid li { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
#why .app-grid img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 30px; }
#why [data-study-app="jackett"] > img, #why [data-study-app="cleanuparr"] > img { background: #f4f1ea; padding: 2px; border-radius: 2px; }
#why [data-study-app="mylar3"] > img { background: #202326; padding: 2px; border-radius: 2px; }
#why .app-grid li > span { min-width: 0; }
#why .app-grid b { display: block; font-size: 14px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
#why .app-grid small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.5; margin-top: 4px; }
#why .one-app { container-type: inline-size; }
#why .one-app .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
@container (min-width: 21rem) {
  #why .one-app .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#why .one-app .app-grid li { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#why .one-app .app-grid b { font-size: 13px; }
#why .study-roster { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--ink); }
#why .study-roster > summary { display: list-item; width: fit-content; max-width: 100%; min-height: 44px; padding: 10px 0; font-size: 16px; text-underline-offset: 5px; }
#why .study-roster > summary:hover { text-decoration: underline; }
#why .study-roster[open] > header { margin-top: 20px; }
#why .study-roster h3 { margin: 0 0 10px; font: 400 34px/1.2 var(--serif); }
#why .study-roster header p { font-size: 16px; color: var(--ink-2); }
#why .study-group { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
#why .study-group h4 { font-weight: 400; color: var(--red-ink); font-size: 15px; margin: 0 0 24px; }
#why .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
#why .action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; border: 1px solid var(--ink); font: 14px/1.4 var(--pixel); letter-spacing: var(--pixel-tracking); text-transform: uppercase; text-decoration: none; word-spacing: var(--pixel-word-spacing); }
#why .action.primary { background: var(--red); border-color: var(--red); color: #fff; }
#why .action:hover { box-shadow: 3px 3px 0 var(--shadow); }
#why .actions > a:not(.action) { text-underline-offset: 4px; }
@media (max-width: 800px) {
  #why .install-pitch { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 540px) {
  #why h2 { font-size: 38px; }
  #why .window-body { padding: 22px 18px; }
  #why .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  #why .one-app .app-grid { gap: 24px 16px; }
  #why .app-grid li { gap: 9px; }
  #why .app-grid b { font-size: 13px; }
  #why .study-roster h3 { font-size: 30px; }
  #why .action { width: 100%; }
  #why .brand { font-size: 32px; }
}