/* Actual app screens. Native radios work even before this section's JavaScript loads. */
.app-gallery { overflow:hidden; }
.app-gallery .section-heading { max-width:760px; margin-bottom:28px; }
.app-gallery .section-heading p { max-width:640px; }
.app-gallery-browser { position:relative; min-width:0; margin:0; padding:0; border:0; }
.app-gallery-sr,.app-gallery-radio { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-gallery-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:760px; margin-bottom:34px; }
.app-gallery-tabs label { display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--paper); color:var(--teal); font-size:.9rem; line-height:1.25; font-weight:750; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color 130ms ease,border-color 130ms ease; }
.app-gallery-tabs svg { flex:0 0 20px; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform 140ms ease; }
.app-gallery-tabs label:active svg { transform:scale(.9); }
.app-gallery-selection { display:inline-flex; flex:0 0 14px; width:14px; height:14px; visibility:hidden; }
.app-gallery-tabs .app-gallery-selection svg { flex:0 0 14px; width:14px; height:14px; stroke-width:2.2; }
#app-screen-count:checked~.app-gallery-tabs label[for=app-screen-count] .app-gallery-selection,#app-screen-scores:checked~.app-gallery-tabs label[for=app-screen-scores] .app-gallery-selection,#app-screen-rules:checked~.app-gallery-tabs label[for=app-screen-rules] .app-gallery-selection,#app-screen-appearance:checked~.app-gallery-tabs label[for=app-screen-appearance] .app-gallery-selection { visibility:visible; }
#app-screen-count:checked~.app-gallery-tabs label[for=app-screen-count],#app-screen-scores:checked~.app-gallery-tabs label[for=app-screen-scores],#app-screen-rules:checked~.app-gallery-tabs label[for=app-screen-rules],#app-screen-appearance:checked~.app-gallery-tabs label[for=app-screen-appearance] { background:var(--teal); border-color:var(--teal); color:var(--paper); }
#app-screen-count:focus-visible~.app-gallery-tabs label[for=app-screen-count],#app-screen-scores:focus-visible~.app-gallery-tabs label[for=app-screen-scores],#app-screen-rules:focus-visible~.app-gallery-tabs label[for=app-screen-rules],#app-screen-appearance:focus-visible~.app-gallery-tabs label[for=app-screen-appearance] { outline:3px solid var(--teal); outline-offset:4px; }
.app-gallery-panel { display:none; grid-template-columns:minmax(250px,.85fr) minmax(0,1fr); align-items:center; gap:clamp(35px,7vw,100px); padding:34px clamp(24px,4vw,56px); background:var(--sand); border:1px solid #e5d6b7; border-radius:30px; }
#app-screen-count:checked~.app-gallery-panels #app-gallery-count,#app-screen-scores:checked~.app-gallery-panels #app-gallery-scores,#app-screen-rules:checked~.app-gallery-panels #app-gallery-rules,#app-screen-appearance:checked~.app-gallery-panels #app-gallery-appearance { display:grid; }
.app-gallery-phone { width:min(100%,300px); margin:0 auto; padding:7px; border:1px solid #35535a; border-radius:29px; background:var(--teal); box-shadow:0 16px 28px #073b4314; }
.app-gallery-phone img { display:block; width:100%; height:auto; aspect-ratio:390/844; border-radius:21px; background:var(--cream); }
.app-gallery-copy { max-width:430px; }
.app-gallery-copy h3 { font-size:clamp(1.8rem,3.2vw,2.9rem); font-weight:800; line-height:1.12; letter-spacing:-.04em; margin-bottom:20px; }
.app-gallery-copy p { color:var(--muted); font-size:1rem; }
.app-gallery-copy .app-gallery-state { display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; padding:7px 11px; border:1px solid #c8ba99; border-radius:999px; color:var(--teal); background:#fff9eeaa; font-size:.77rem; line-height:1.3; font-weight:750; }
.app-gallery-state svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-gallery-details { display:grid; gap:13px; margin:24px 0; padding:0; list-style:none; }
.app-gallery-details li { display:flex; align-items:flex-start; gap:10px; font-size:.92rem; line-height:1.5; }
.app-gallery-details svg { flex:0 0 18px; width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.app-gallery-copy .app-gallery-caption { margin:18px 0 0; color:var(--muted); font-size:.78rem; line-height:1.55; }
.app-gallery-credit { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px; margin-top:10px; color:var(--muted); font-size:.72rem; line-height:1.6; }
.app-gallery-credit a { display:inline-flex; align-items:center; min-height:44px; font-weight:650; text-underline-offset:4px; }
.app-gallery[data-gallery-motion=fade] .app-gallery-panel { animation:app-gallery-arrive 160ms ease-out both; }
@keyframes app-gallery-arrive { from { opacity:.35; } to { opacity:1; } }
@media (hover:hover) and (pointer:fine) { .app-gallery-tabs label:hover svg { transform:translateY(-2px); } }
@media (max-width:800px) {
  .app-gallery-panel { grid-template-columns:minmax(220px,.9fr) minmax(0,1fr); gap:28px; padding:28px; }
  .app-gallery-phone { width:min(100%,270px); }
  .app-gallery-copy h3 { font-size:2rem; }
  .app-gallery-copy p,.app-gallery-details li { font-size:.88rem; }
}
@media (max-width:600px) {
  .app-gallery .section-heading { margin-bottom:22px; }
  .app-gallery-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:22px; }
  .app-gallery-tabs label { min-height:52px; font-size:.83rem; padding:12px 10px; }
  .app-gallery-panel { grid-template-columns:1fr; gap:28px; padding:24px 17px; border-radius:23px; }
  .app-gallery-phone { width:min(100%,300px); }
  .app-gallery-copy { max-width:430px; }
  .app-gallery-copy h3 { font-size:1.9rem; margin-bottom:16px; }
  .app-gallery-copy p { font-size:.92rem; }
  .app-gallery-details { margin-block:20px; gap:11px; }
  .app-gallery-copy .app-gallery-state { margin-bottom:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-gallery[data-gallery-motion=fade] .app-gallery-panel { animation:none; }
  .app-gallery-tabs label,.app-gallery-tabs svg { transition:none; }
  .app-gallery-tabs label:hover svg,.app-gallery-tabs label:active svg { transform:none; }
}
@media (prefers-contrast:more) {
  .app-gallery-panel,.app-gallery-tabs label { border-color:var(--teal); }
  .app-gallery-copy p,.app-gallery-copy .app-gallery-caption,.app-gallery-credit { color:var(--teal); }
}