/* Cleaner homepage MOCKUP (29 Oct 2026). Small additions on top of styles.css; brand tokens only. */

/* 1. Hero: one main button + a quiet text link */
.hm-hero{padding-block:64px 28px}
.hm-ctas{align-items:center;gap:22px}
.hm-txt{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--mark)}
.hm-txt:hover{color:var(--accent-deep,var(--ink))}

/* slim "how it works" strip under the hero */
.hm-how{padding-block:0 8px}
.hm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hm-steps li{display:flex;align-items:center;gap:12px;background:var(--sheet);border:1.5px solid var(--line);border-radius:9px;padding:12px 16px;font-weight:700;color:var(--ink)}
.hm-n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--ink);color:var(--mark);font:800 16px/1 var(--display)}

/* 2. Free checks: one featured card, two compact links */
.hm-checks .two{margin-top:0}
.hm-checks .hm-main{max-width:none;margin-top:22px}
@media(min-width:980px){
  .hm-checks .hm-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:48px;align-content:start}
  .hm-checks .hm-main>*{grid-column:1}
  .hm-checks .hm-main>.two-ln{grid-column:2;grid-row:1 / span 3;align-self:end;margin-top:0}
  .hm-checks .hm-main>.rf-act{grid-column:2;grid-row:4 / span 1;align-self:start}
}
.hm-minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.hm-mini{display:flex;align-items:center;gap:14px;background:var(--sheet);border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;text-decoration:none;color:var(--text)}
.hm-mini:hover{border-color:var(--accent)}
.hm-mini img{flex:none}
.hm-mt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hm-mt b{font:800 17px/1.25 var(--display);color:var(--ink)}
.hm-mt span{font-size:14.5px;line-height:1.4;color:var(--muted)}
.hm-mini .hm-go{flex:none;font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap}

/* 4. Nine subjects: compact tiles, 3 x 3 */
.hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#subjects.hm-subjects{padding-block:48px}
.hm-tile{flex-direction:row !important;align-items:center !important;flex-wrap:wrap}
.hm-tile .sic{margin-bottom:0}
.hm-tile{column-gap:12px !important}
.hm-tile b{flex:1;min-width:0}
.hm-tile .hm-go{flex-basis:100%}
.hm-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;text-decoration:none;color:var(--ink)}
.hm-tile b{font:800 16.5px/1.25 var(--display)}
.hm-tile .hm-go{margin-top:auto;padding-top:4px;font-size:14px;font-weight:700;color:var(--muted)}
.hm-tile:hover .hm-go{color:var(--ink)}

/* 5. Pricing: one flashcards line, one answers link */
.hm-fc{margin:22px 0 0;font-size:15.5px;color:var(--on-band-muted)}
.hm-fc a{font-weight:700}
.hm-faq{margin:8px 0 0;font-size:15.5px}
.hm-faq a{font-weight:700;display:inline-block;padding:4px 0}

/* 6. Founder: short block */
.hm-founder{padding-block:48px 56px}
.hm-by{margin-top:4px !important;font-size:13.5px;color:#4b5a75}
.hm-fq{max-width:720px;margin:0 auto;padding:18px 22px 18px 18px;gap:18px}
.hm-fq .fq-photo{width:72px;height:72px}
.hm-fq .fq-text{font-size:19px}
.hm-story{margin-top:8px !important}
.hm-story a{font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mark);text-decoration-thickness:2px}

@media(max-width:860px){
  .hm-hero{padding-block:36px 20px}
  .hm-steps{grid-template-columns:minmax(0,1fr);gap:6px}
  .hm-steps li{padding:9px 14px}
  .hm-minis{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .hm-mini{flex-wrap:wrap;padding:14px 16px}
  .hm-mini .hm-go{flex-basis:100%;box-sizing:border-box;padding-left:58px;white-space:normal}
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hm-tile{padding:12px}
  .hm-tile b{font-size:15px}
  .hm-tile .hm-go{font-size:13px}
  .hm-fq{align-items:flex-start}
  .hm-fq .fq-photo{width:56px;height:56px}
  .hm-fq .fq-text{font-size:16.5px}
}

/* phone: mission card stays on desktop only; subject tiles stack icon over name so long names fit */
@media(max-width:860px){ .hm-hero .missionc{display:none} }
@media(max-width:560px){
  .hm-tile{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap}
  .hm-tile .hm-go{flex-basis:auto}
  .hm-tile b{flex:none;font-size:14.5px;overflow-wrap:break-word;hyphens:auto}
}

/* hero: link to the 1-minute guide (light pill) */
.hm-pill{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 16px 9px 9px;border-radius:999px;background:var(--mark-soft,#fff6d1);border:1.5px solid #f2d36b;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35;max-width:100%}
.hm-pill:hover,.hm-pill:focus-visible{background:#fff;border-color:var(--ink);text-decoration:none}
.hm-pi{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--mark)}
.hm-pq{color:#4b5a75}
.hm-pill b{font-weight:800;white-space:nowrap}
.hm-sep{margin:0 10px;opacity:.6}
@media(max-width:560px){.hm-pill b{white-space:normal}.hm-sep{display:block;height:6px;overflow:hidden;color:transparent}}

/* quiz on its own page: page heading uses the section's h2 look */
.uo-guide h1{font-size:clamp(32px,4.6vw,48px);line-height:1.06;color:var(--ink);margin:0}