/* VisuaLearn home: minimal. One idea per screen, lots of air, one colour doing the work (Pip's yellow). */
body.home{--paper:#fbfaf7;--line:#e7e4dc;--pip:#f2b51d;--pip-ink:#14161f}
@media (prefers-color-scheme: dark){ body.home{--paper:#101218;--line:#262a36;--pip:#f5c242;--pip-ink:#14161f} }
body.home .top{border-bottom-color:transparent}

.h-hero{padding-block:72px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.h-hero h1{font-size:clamp(40px, 7.4vw, 92px);line-height:.98;letter-spacing:-.035em;max-width:14ch}
.h-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%, color-mix(in srgb, var(--pip) 70%, transparent) 62% 92%, transparent 92%)}
.h-hero > p{margin:0;max-width:56ch;font-size:clamp(17px, 1.6vw, 20px);color:var(--ink-2)}

.pip-card{margin:24px 0 0;width:100%;max-width:880px;display:flex;flex-direction:column;gap:6px}
#pip-stage{width:100%;height:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:20px}
#pip-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pip-card figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;min-height:3.2em}
.pip-card figcaption p{margin:0;font-size:16px;color:var(--ink);max-width:60ch}
.h-math{margin:0;font-size:13.5px;color:var(--muted);max-width:62ch}
.h-math span{font-family:var(--font-code);font-size:12.5px;color:var(--ink-2);white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:0 5px}

/* Pip and the number line */
.nl{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.nl-tick{stroke:var(--muted);stroke-width:1.5}
.nl-num{fill:var(--muted);font-family:var(--font-code);font-size:14px;text-anchor:middle}
.nl-range{fill:color-mix(in srgb, var(--pip) 55%, transparent)}
.pip-body{fill:var(--pip)}
.pip-eye{fill:#fff}
.pip-pupil{fill:var(--pip-ink)}
.pip-mouth{fill:none;stroke:var(--pip-ink);stroke-width:3;stroke-linecap:round}
.pip-shadow{fill:var(--ink);opacity:.08}
.pip-bubble rect{fill:var(--ink)}
.pip-bubble text{fill:var(--paper);font-family:var(--font-display);font-weight:700;font-size:17px;text-anchor:middle;dominant-baseline:middle}
.flag-num{fill:var(--ink);font-family:var(--font-display);font-weight:700;font-size:22px;text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:6px}

/* sections */
.h-kicker{margin:0;font-family:var(--font-code);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.h-band{padding-block:88px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.h-band h2{font-size:clamp(30px, 4.6vw, 54px);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.h-band p:not(.h-kicker){margin:0;max-width:60ch;font-size:18px;color:var(--ink-2)}
.h-section{padding-block:72px;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line)}
.h-section h2{font-size:clamp(28px, 3.6vw, 42px);letter-spacing:-.025em;margin-bottom:12px}

/* habits: a quiet numbered list, not a wall of cards */
.habits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:0;border-top:1px solid var(--line)}
.habits li{border-bottom:1px solid var(--line)}
.habits a,.habits .soon-item{display:flex;flex-direction:column;gap:6px;padding:26px 24px 28px 0;height:100%;color:var(--ink);text-decoration:none}
.habits .soon-item{padding:26px 24px 28px 0;opacity:.5}
.habits .n{font-family:var(--font-code);font-size:13px;color:var(--muted)}
.habits b{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.habits .life{color:var(--ink-2);font-size:15.5px;max-width:34ch}
.habits .algo{margin-top:auto;padding-top:10px;font-family:var(--font-code);font-size:12.5px;color:var(--muted)}
.habits a .algo::after{content:" →";color:var(--ink)}
.habits a:hover b{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--pip);text-underline-offset:4px}

/* science */
.science{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:36px 40px}
.science li{display:flex;flex-direction:column;gap:8px}
.science b{font-family:var(--font-display);font-size:20px}
.science p{margin:0;color:var(--ink-2);font-size:15.5px}
.science small{color:var(--muted);font-size:12.5px;line-height:1.45}
.h-section > .fine{margin-top:14px}

/* grown-ups */
.home .gu{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
.home .promises{font-size:16.5px;gap:10px}
.home .gu-set{background:transparent}
.h-teach{margin:14px 0 0;max-width:70ch;color:var(--ink-2)}
.home .foot{border-top-color:var(--line)}

@media (max-width: 920px){ .home .gu{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 560px){
  .h-hero{padding-block:44px 24px;gap:16px}
  .h-band{padding-block:60px}
  .h-section{padding-block:52px}
  .nl-num{font-size:20px}
}

/* seven dots: one per hop, the most Pip ever needs for 1 to 100 */
.pip-dots{display:flex;justify-content:center;gap:10px;margin:8px 0 0;min-height:14px}
.pip-dots i{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background-color .2s, transform .2s}
.pip-dots i.on{background:var(--ink-2)}
.pip-dots i.win{background:var(--done);transform:scale(1.25)}

.h-play{display:inline-flex;align-items:center;gap:10px;padding:14px 30px 14px 24px;border-radius:999px;background:var(--pip);color:var(--pip-ink);text-decoration:none;
  font-family:var(--font-display);font-size:24px;font-weight:700;box-shadow:0 5px 0 color-mix(in srgb, var(--pip) 55%, #000)}
.h-play svg{width:24px;height:24px;fill:currentColor}
.h-play:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb, var(--pip) 55%, #000)}