/* Site additions on top of the generated design CSS (site.css is regenerated by build_site.py; keep hand edits here). */
.su{min-height:100vh}
.su .shot-img{all:unset;box-sizing:border-box;cursor:zoom-in;display:block;width:100%;break-inside:avoid;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.su .shot-img img{display:block;width:100%;height:auto}
.su .shot-img:focus-visible{outline:3px solid var(--blue)}
.su .lb{max-width:min(92vw,900px);padding:12px;background:var(--card)}
.su .lb img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;border-radius:10px}
.su .legaldoc ul{margin:0;padding-left:20px}
.su .legaldoc li{margin-top:6px}
.su .legaldoc h2{font-size:clamp(22px,2.4vw,28px);margin-top:18px}
.su .legaldoc a{color:var(--accent-text)}
.su .legaldoc section{display:flex;flex-direction:column;gap:12px}
.su .legaldoc table{border-collapse:collapse}
.su .legaldoc td,.su .legaldoc th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.su .legal-fill{background:#fff3c4;color:#5c4400;padding:0 4px;border-radius:4px}
/* Dark mode: the light-blue highlight behind white headline text was ~2:1 contrast; use a deep blue instead (navy bands keep the light swipe with dark text). */
:root[data-theme="dark"] .su .hl{background-image:linear-gradient(100deg,transparent 0 2%,#1f4a8f 3% 96%,transparent 98%)}
:root[data-theme="dark"] .su .navyband .hl{background-image:linear-gradient(100deg,transparent 0 2%,var(--hl) 3% 96%,transparent 98%)}
/* Score reports grid: same-size cards, 3 columns on desktop, 2 on phones; tap opens full size. */
.su .wall{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px}
.su .shot-img{position:relative;margin:0;aspect-ratio:3/4;border-radius:14px;box-shadow:0 10px 24px -16px rgba(5,10,25,.45);transition:transform .2s ease}
.su .shot-img:hover{transform:translateY(-3px)}
.su .shot-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.su .shot-img::after{content:"Tap to view";position:absolute;left:0;right:0;bottom:0;padding:30px 10px 9px;font-size:13px;font-weight:700;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(5,10,25,.78))}
@media (max-width:700px){.su .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.su .shot-img::after{font-size:12px;padding:24px 6px 7px}}
.su .reports+.sec{padding-top:0}
/* Small label under a stat number (e.g. "plus a second pass on incorrects"). */
.su .statnote{display:block;font-size:12px;font-weight:600;opacity:.75;margin-top:2px}
.su .field[hidden]{display:none}
/* Smoother scrolling on phones: the frosted header and the pulsing dot repaint on every frame. */
.su header.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
@media (max-width:760px){.su .live i{animation:none}}
/* Popups fit short phones: scroll inside the box, smaller exit headline. */
.su .modal .box{max-height:calc(100dvh - 32px);overflow-y:auto}
@media (max-width:600px){.su .modal .box{padding:22px 20px}.su #exitmodal h2{font-size:28px!important}}
/* LMS preview tabs: every screen sits in the same spot, so the box is always as
   tall as the tallest one and switching tabs never moves the page. */
.su .dash.shots{display:grid;grid-template-columns:minmax(0,1fr)}
.su .dash.shots>.dpanel{grid-row:3;grid-column:1}
.su .dash.shots>.dpanel.off{visibility:hidden}
/* Flashcards offer on phones: a small one-line card (it used to cover a third of
   the screen). Tapping it opens the form. */
@media (max-width:760px){
  .su .slidein:not(.open){padding:12px 44px 12px 16px;cursor:pointer;border-width:1.5px}
  .su .slidein:not(.open) .eyebrow,.su .slidein:not(.open) .fine,.su .slidein:not(.open) form{display:none}
  .su .slidein:not(.open) h3{font-size:16px;margin:0}
  .su .slidein:not(.open) h3::after{content:"Tap to get them →";display:block;font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--accent-text);margin-top:2px}
  .su .slidein .xbtn{top:6px}
}
/* Phones: the price note goes on its own line instead of leaving one word dangling;
   the footer phone number stays on one line. */
@media (max-width:700px){.su .price>.fine{display:block;margin-top:4px;line-height:1.4}}
.su footer .mono{white-space:nowrap}
/* Comparison tables fit a phone screen (the highlighted StepUp column used to be
   cut off behind a sideways scroll). */
@media (max-width:700px){
  .su .cmp{min-width:0;table-layout:fixed}
  .su .cmp th,.su .cmp td{padding:10px 6px;font-size:13.5px;overflow-wrap:anywhere}
  .su .cmp th{font-size:14px}
  .su .cmp th:first-child,.su .cmp td:first-child{width:27%}
}