/* The overview pages: what each program is, with pictures of the real screens.
   Nothing here can be played. One stylesheet for all six pages. */
:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#1d1d1f; --soft:#55555a; --line:#e3dfd6; --accent:#1f4fb3;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#151515; --card:#1f1f1f; --ink:#f2f2f2; --soft:#a8a8ad; --line:#2e2e2e; --accent:#8fb0ff; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
header.top{padding:20px 0 4px}
header.top a.home{color:var(--ink);text-decoration:none;font-weight:600}
h1{font-size:32px;line-height:1.2;margin:28px 0 10px}
h2{font-size:22px;margin:36px 0 8px}
p.lede{font-size:19px;color:var(--soft);margin:0 0 8px;max-width:640px}
p{max-width:640px}
.status{display:inline-block;font-size:14px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--soft);margin:6px 0 4px}
ul.facts{padding-left:20px;max-width:640px}
ul.facts li{margin:6px 0}

/* Phone pictures: a sideways strip on a phone, a grid on a wide screen. */
.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;margin:12px 0 4px}
.shots figure{flex:0 0 200px;margin:0;scroll-snap-align:start}
.shots img{width:200px;height:auto;display:block;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.shots figcaption{font-size:14px;color:var(--soft);margin-top:6px;line-height:1.35}
@media (min-width:760px){
  .shots{flex-wrap:wrap;overflow:visible}
}

/* A page that opens on its screens (seniors, 2026-10-30): one line, then the session
   left to right. Stacked on a phone, side by side from tablet width up. */
p.kicker{margin:28px 0 0;font-size:15px;color:var(--soft);font-weight:600}
h1 + ol.steps{margin-top:22px}
ol.steps{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr;gap:26px;max-width:960px}
@media (min-width:640px){ ol.steps{grid-template-columns:repeat(3,1fr);gap:18px} }
ol.steps li{margin:0}
ol.steps img{width:100%;max-width:240px;height:auto;display:block;margin:12px auto 0;
  border-radius:22px;border:1px solid var(--line);background:var(--card)}
ol.steps b{display:block;font-size:19px;line-height:1.3}
ol.steps span{display:block;color:var(--soft);font-size:16px;margin-top:4px;min-height:4.7em}

/* The home page's program cards. */
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
@media (min-width:640px){ .cards{grid-template-columns:1fr 1fr} }
.cards a{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  color:var(--ink);text-decoration:none}
.cards a b{display:block;font-size:19px;margin-bottom:4px}
.cards a span{color:var(--soft);font-size:15px}

footer{border-top:1px solid var(--line);margin:48px 0 0;padding:20px 0 40px;color:var(--soft);font-size:15px}

/* The home page. Ryan, 2026-11-02, three passes: "terrible design", "too much on the screen at
   one time", "very minimal design - need more branding". So: one idea per stop, in the app's own
   brand. AHA with the name, Interactive in the brand orange (--warm #FF9600 in shell.html), the
   app's Inter (fonts.css, written by build.mjs), a dark opening band, big orange step numbers.
   Strong dark colour on a neutral page, no pastel washes (his 2026-09-23 taste note). */
body.home{--orange:#FF9600;--night:#141416;font-family:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif}
.lockup{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
  font-weight:800;font-size:19px;letter-spacing:.005em}
.lockup img{width:auto;height:44px}
.lockup i{font-style:normal;color:var(--orange)}
.lockup sup{font-size:.5em;font-weight:600}
header.bar{padding:14px 0}

.band{background:var(--night);color:#fff}
.opener .wrap{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;padding-top:44px;padding-bottom:48px}
.opener h1{color:#fff;font-size:36px;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 18px;max-width:760px}
.opener h1 em{font-style:normal;color:var(--orange)}
.opener .lede{color:#c9c9cf;font-size:20px;max-width:620px;margin:0 0 16px}
.opener .status{color:#c9c9cf;border-color:#3a3a40}
.opener .aha{width:150px;height:auto;justify-self:center;order:-1;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* A .phone is a screenshot in a dark bezel so a light screen does not melt into the page. */
.phone{display:block;width:100%;height:auto;border:7px solid #1b1b1d;border-radius:30px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08)}
.stop{padding:56px 0;border-bottom:1px solid var(--line)}
.stop:last-of-type{border-bottom:0}
body.home h2{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:0 0 14px;max-width:680px}
.stop p{font-size:19px;color:var(--soft);margin:0 0 12px;max-width:640px}
p.kicker,p.kind{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0 0 10px}
p.kind{color:var(--ink)}
p.kind.div{color:var(--orange)}
.num{display:block;font-size:96px;line-height:.9;font-weight:900;color:var(--orange);letter-spacing:-.04em;margin-bottom:10px}
.diamond{display:block;width:100%;max-width:760px;height:auto;margin:26px 0 0}
.diamond .dTitle{font:800 46px "Inter",system-ui,sans-serif}
.dCaps{display:grid;grid-template-columns:1fr 1fr;max-width:760px;margin-top:10px;font-weight:700;font-size:16px;color:var(--ink)}
.dCaps span:last-child{text-align:right}
@media (max-width:420px){ .dCaps{font-size:13px} }
.step{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.step .phone{max-width:250px;margin:0 auto}
.cards a[style*="--door"]{border-left:6px solid var(--door)}
.cards a b{font-weight:800}

footer.foot{border:0;margin:0;padding:34px 0 40px;color:#c9c9cf;font-size:15px}
footer.foot .lockup{color:#fff}
footer.foot .lockup img{height:38px}
footer.foot p{margin:12px 0 0}
footer.foot a{color:var(--orange)}

@media (min-width:760px){
  .opener .wrap{grid-template-columns:minmax(0,1fr) 260px;gap:48px;min-height:72vh;padding-top:24px;padding-bottom:24px}
  .opener h1{font-size:50px;line-height:1.06}
  .opener .aha{width:100%;order:0}
  .stop{padding:0;min-height:88vh;display:flex;flex-direction:column;justify-content:center}
  .step{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px}
  .step .phone{max-width:none}
  body.home h2{font-size:42px;line-height:1.1}
  .step h2{font-size:50px}
  .num{font-size:140px}
  .programs h2{font-size:32px}
  .programs{min-height:auto;padding:72px 0}
}
@media (prefers-color-scheme:dark){
  .diamond path.dark{fill:#2c2c30}
  body.home{--night:#000}
}