/* Hub and homepage styles. Lesson pages keep their own authored CSS and never
   load this file.

   Tokens are copied verbatim from the lessons so the marketing pages and the
   content read as one publication. The app's violet appears only as a product
   accent — and mostly via Syna herself, who is already that colour. */

:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --wash:#F7F8FA;
  --ink:#1B2230; --ink-soft:#4B5567; --faint:#79839A;
  --rule:#E2E6ED; --rule-soft:#EEF1F5;
  --accent:#24406B;                 /* lesson navy — links, structure */
  --product:#7C5CE0;                /* Syna's violet — the app, used sparingly */
  --product-bg:rgba(124,92,224,.08);
  --shadow:0 1px 2px rgba(27,34,48,.05), 0 8px 24px rgba(27,34,48,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#11151B; --surface:#171C24; --wash:#1B212A;
    --ink:#E8EBF1; --ink-soft:#B6BECC; --faint:#8892A3;
    --rule:#2B333F; --rule-soft:#232A34;
    --accent:#93B7EC;
    --product:#B9A3F5;
    --product-bg:rgba(185,163,245,.10);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 "Source Serif 4",Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
img{max-width:100%;height:auto}

h1,h2,h3,.mss-brand,.mss-card a,.mss-wait button,.mss-eyebrow,.mss-topnav,.mss-kicker{
  font-family:"Bricolage Grotesque",system-ui,-apple-system,sans-serif}

:focus-visible{outline:2px solid var(--product);outline-offset:3px;border-radius:4px}
.mss-skip{position:absolute;left:-9999px}
.mss-skip:focus{left:12px;top:12px;z-index:10;background:var(--paper);
  border:1px solid var(--rule);padding:9px 14px;border-radius:8px;text-decoration:none}

/* ---------- header ---------- */
.mss-top{
  max-width:860px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.mss-brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:17px;letter-spacing:-.01em;
}
.mss-brand img{width:34px;height:39px;display:block}
.mss-topnav a{
  font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-soft);
  padding:6px 2px;border-bottom:1.5px solid transparent;
}
.mss-topnav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- shared layout ---------- */
.mss-wrap{max-width:860px;margin:0 auto;padding:8px 22px 56px}

.mss-crumbs{font:400 12px/1.5 "IBM Plex Mono",ui-monospace,monospace}
.mss-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px;padding:0}
.mss-crumbs li+li::before{content:"\203A";margin-right:6px;opacity:.5}
.mss-crumbs a{color:var(--faint);text-decoration:none}
.mss-crumbs a:hover{color:var(--ink);text-decoration:underline}
.mss-crumbs [aria-current]{color:var(--ink-soft)}

.mss-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
h1{font-size:clamp(32px,5.4vw,50px);line-height:1.08;margin:.05em 0 .4em;letter-spacing:-.022em;font-weight:700}
h2{font-size:clamp(22px,3vw,28px);line-height:1.2;margin:0 0 .45em;letter-spacing:-.015em;font-weight:700}
.mss-lead{font-size:19.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 1.15em}
p{margin:0 0 1.1em}

/* ---------- lesson list ---------- */
.mss-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:0;
  border-top:1px solid var(--rule)}
.mss-card{border-bottom:1px solid var(--rule);padding:15px 4px;display:grid;
  grid-template-columns:2.4rem 1fr;gap:2px 14px;align-items:baseline}
.mss-card .mss-n{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  color:var(--faint);grid-row:span 2;padding-top:3px}
.mss-card a{text-decoration:none;font-weight:700;font-size:17.5px;color:var(--ink);
  letter-spacing:-.01em}
.mss-card a:hover{color:var(--accent);text-decoration:underline}
.mss-card p{margin:3px 0 0;font-size:15px;color:var(--ink-soft);line-height:1.5}
.mss-time{display:inline-block;margin-left:8px;white-space:nowrap;color:var(--faint);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px}
.mss-time::before{content:"· "}

/* ---------- homepage ---------- */
.mss-hero{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center;
  padding:8px 0 34px;border-bottom:1px solid var(--rule);margin-bottom:38px}
.mss-hero-syna{justify-self:end}
.mss-hero-syna img{width:200px;height:auto;
  filter:drop-shadow(0 14px 28px rgba(27,34,48,.14))}
@media (prefers-color-scheme:dark){
  .mss-hero-syna img{filter:drop-shadow(0 14px 28px rgba(0,0,0,.45))}
}

.mss-wait{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;max-width:430px}
.mss-wait input{flex:1 1 210px;padding:12px 13px;border:1px solid var(--rule);
  border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:15.5px}
.mss-wait input:focus{border-color:var(--product)}
.mss-wait button{padding:12px 20px;border:0;border-radius:9px;background:var(--product);
  color:#fff;font:700 15px "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}
.mss-wait button:hover{filter:brightness(1.07)}
.mss-note{font-size:13.5px;color:var(--faint);margin:11px 0 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace}

.mss-band{background:var(--wash);border:1px solid var(--rule-soft);
  border-radius:14px;padding:26px 24px 12px}
.mss-band .mss-list{margin-top:22px}
.mss-more{display:inline-block;margin:18px 0 14px;font-weight:600;
  text-decoration:none;font-size:16px}
.mss-more:hover{text-decoration:underline}

.mss-kicker{display:inline-block;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--product);background:var(--product-bg);
  border-radius:99px;padding:5px 11px;margin-bottom:14px;font-weight:500}

/* ---------- footer ---------- */
.mss-foot{border-top:1px solid var(--rule);margin-top:20px;padding:24px 22px 40px;
  font:400 13.5px/1.6 "IBM Plex Mono",ui-monospace,monospace;color:var(--faint);
  max-width:860px;margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center}
.mss-foot p{margin:0}
.mss-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.mss-foot a{color:var(--faint);text-decoration:none}
.mss-foot a:hover{color:var(--ink);text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:600px){
  body{font-size:16px}
  .mss-top{padding:14px 16px}
  .mss-wrap{padding:6px 16px 44px}
  .mss-band{padding:20px 16px 8px;border-radius:12px}
  .mss-hero{grid-template-columns:1fr;gap:18px;padding-bottom:28px;margin-bottom:30px}
  .mss-hero-syna{justify-self:start;order:-1}
  .mss-hero-syna img{width:118px}
  .mss-card{grid-template-columns:2rem 1fr}
  .mss-foot{padding:20px 16px 36px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}