*{box-sizing:border-box}
:root{--ink:#14110F;--cream:#FFF4DC;--paper:#FFFBF0;--sand:#F7E6BF;--marigold:#F6A91B;--tomato:#C8361F;--indigo:#2B2A7A;--green:#0B3D2E;--sage:#DCE9D9;--wood:#F6DFBD;--muted:#4A4036;--sh:5px 6px 0 var(--ink)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden;min-width:320px;font-family:var(--kb-body)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:4px solid var(--indigo);outline-offset:3px;border-radius:4px}
.hub{width:100%;overflow-x:hidden}
.hub-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
/* top nav: cream bar, thick ink rule */
.hub-top{background:var(--cream);border-bottom:4px solid var(--ink);position:relative}
.hub-bar{max-width:1240px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hub-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:800 1.375rem/1 var(--kb-display);letter-spacing:-.03em;text-transform:uppercase}
.hub-brand img{width:34px;height:auto;display:block}
.hub-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hub-home,.hub-app-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);box-shadow:3px 3px 0 var(--ink);font:700 .8125rem/1.2 var(--kb-body);text-decoration:none;white-space:nowrap}
.hub-app-link{background:var(--tomato);color:var(--cream)}
.hub-home:active,.hub-app-link:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
/* hero block */
.hub-hero{background:var(--cream);padding:30px 0 34px}
.hub-eyebrow{display:inline-block;margin:0 0 14px;padding:5px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--marigold);transform:rotate(-2deg);font:700 .75rem/1.3 var(--kb-mono);letter-spacing:.06em;text-transform:uppercase}
.hub-hero h1{margin:0;font:800 clamp(3rem,11vw,7rem)/.92 var(--kb-display);letter-spacing:-.045em;text-transform:uppercase}
.hub-hero h1 em{font-style:normal;color:var(--green);background:linear-gradient(transparent 62%,var(--marigold) 62%,var(--marigold) 92%,transparent 92%)}
.hub-hero h1 em.km-mark,.km-pre .hub-hero h1 em{background:none}
.hub-hero h1 em.km-mark::before{bottom:.04em;height:.3em}
.hub-hero p:last-child{margin:16px 0 0;max-width:34ch;font:500 1.0625rem/1.5 var(--kb-body);color:var(--muted)}
/* colour bands */
.hub-band{border-top:4px solid var(--ink);padding:26px 0 30px}
.hub-today{background:var(--sand)}
.hub-today-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.hub-today-grid [data-kubear-today]{margin:0}
.hub-appsband{background:var(--cream)}
.hub-games{background:var(--green);color:var(--cream)}
.hub-label{margin:0 0 6px;font:700 .75rem/1.4 var(--kb-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tomato)}
.hub-games .hub-label{color:var(--marigold)}
.hub-section-title{margin:0 0 16px;font:800 clamp(1.75rem,5vw,2.75rem)/1 var(--kb-display);letter-spacing:-.035em;text-transform:uppercase}
/* continue */
.hub-continue{display:flex;align-items:center;gap:14px;padding:16px;border:3px solid var(--ink);border-radius:18px;background:var(--tomato);color:var(--cream);box-shadow:var(--sh);text-decoration:none;min-height:88px;transition:transform .15s,box-shadow .15s}
.hub-continue:active{transform:translate(4px,4px);box-shadow:1px 2px 0 var(--ink)}
.hub-continue .dot,.hub-continue .go{flex:0 0 46px;width:46px;height:46px;border:2.5px solid var(--ink);border-radius:50%;background:var(--marigold);color:var(--ink);display:grid;place-items:center}
.hub-continue .txt{flex:1;min-width:0}
.hub-continue .eyebrow{display:block;font:700 .75rem/1.4 var(--kb-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);opacity:.9}
.hub-continue strong{display:block;font:800 1.375rem/1.15 var(--kb-display);letter-spacing:-.025em}
.hub-continue .sub{display:block;font:500 .875rem/1.4 var(--kb-body);color:var(--cream)}
.hub-continue svg,.hub-card svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hub-continue .dot svg{fill:currentColor;stroke:none}
/* app cards */
.hub-apps{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.hub-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px 12px 10px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:4px 5px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .16s,box-shadow .16s}
.hub-card.learn{background:var(--sage)}
.hub-card.business{background:var(--marigold)}
.hub-card.stories{background:var(--paper)}
.hub-card.paths{background:var(--wood)}
.hub-card .art{width:100%;height:78px;object-fit:contain;transition:transform .2s}
.hub-card h3{margin:8px 0 4px;font:800 1.5rem/1.05 var(--kb-display);letter-spacing:-.03em;text-transform:uppercase}
.hub-card p{margin:0 0 8px;font:500 .8125rem/1.45 var(--kb-body);color:#2d2a22}
.hub-card .chip{align-self:flex-start;margin:0 0 8px;padding:3px 9px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font:700 .6875rem/1.4 var(--kb-mono);letter-spacing:.03em;text-transform:uppercase}
.hub-card .act{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;min-height:44px;border-top:2px solid var(--ink);font:700 .8125rem/1.3 var(--kb-body)}
.hub-card .act svg{width:20px;height:20px;padding:2px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);flex:none}
@media(hover:hover){.hub-card:hover{transform:translateY(-3px);box-shadow:4px 9px 0 var(--ink)}.hub-card:hover .art{transform:rotate(-2deg) translateY(-2px)}}
.hub-card:active{transform:translate(4px,4px);box-shadow:1px 2px 0 var(--ink)}
/* footer */
.hub-footer{background:var(--ink);color:var(--cream);border-top:4px solid var(--ink);padding:22px 0 30px}
.hub-foot{margin:0 0 6px;font:500 .8125rem/1.5 var(--kb-body)}
.hub-foot-links a{display:inline-flex;align-items:center;min-height:44px;margin-right:18px;color:var(--marigold);font:700 .8125rem/1.3 var(--kb-body)}
@media(min-width:620px){.hub-wrap{padding:0 32px}.hub-bar{padding:8px 32px}.hub-card .art{height:96px}.hub-card{padding:16px 16px 12px;border-radius:18px;box-shadow:var(--sh)}.hub-card h3{font-size:1.75rem}.hub-card p{font-size:.9375rem}}
@media(min-width:900px){.hub-today-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.hub-hero{padding:48px 0 56px}.hub-band{padding:40px 0 48px}}
@media(min-width:1100px){.hub-wrap{padding:0 56px}.hub-bar{padding:8px 56px}.hub-apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.hub-card .art{height:110px}}
@media(max-width:360px){.hub-hero h1{font-size:2.9rem}.hub-card h3{font-size:1.3rem}.hub-home{display:none}}
@media(prefers-reduced-motion:reduce){.hub-card,.hub-continue,.hub-card .art{transition:none}.hub-card:hover,.hub-card:hover .art{transform:none}}

/* sticker book on indigo */
.hub-stickers{background:var(--indigo);color:var(--cream);padding:24px 0 28px}
.hub-stickers .hub-label{color:var(--marigold)}
.stk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stk-head .hub-section-title{margin-bottom:8px}
.stk-level{margin:0;padding:6px 14px;border:3px solid var(--ink);border-radius:999px;background:var(--marigold);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(2deg);font:800 1.125rem/1.2 var(--kb-display);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.stk-next{margin:0 0 14px;font:700 .8125rem/1.4 var(--kb-mono);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.stk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;list-style:none;margin:0;padding:0}
.stk{position:relative;aspect-ratio:1/1;min-width:0;display:grid;place-items:center;padding:4px;border-radius:12px}
.stk-empty{border:2px dashed rgba(255,244,220,.55)}
.stk-on{border:2.5px solid var(--ink);background:var(--c,#FFFBF0);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--r,0deg))}
.stk-on span{display:block;max-width:100%;text-align:center;font:700 .625rem/1.15 var(--kb-mono);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.stk-note{margin:14px 0 0;font:500 .8125rem/1.5 var(--kb-body);color:var(--cream)}
@media(min-width:620px){.stk-grid{gap:14px 12px;max-width:640px}.stk-on span{font-size:.6875rem}.stk-level{font-size:1.375rem}}
/* one compact row of extra games on green */
.hub-games{padding:16px 0 18px}
.hub-more{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.hub-more .hub-label{margin:0}
.hub-pills{display:flex;flex-wrap:wrap;gap:10px}
.hub-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2.5px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font:800 .875rem/1.2 var(--kb-display);letter-spacing:-.01em;text-transform:uppercase;text-decoration:none}
.hub-pill:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
/* footer settings */
.hub-prefs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.hub-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 8px;border:2px solid var(--cream);border-radius:999px;background:transparent;color:var(--cream);font:700 .8125rem/1.2 var(--kb-body);cursor:pointer}
.hub-switch[hidden]{display:none}
.hub-switch i{position:relative;width:38px;height:22px;border:2px solid var(--cream);border-radius:999px;background:transparent;flex:none}
.hub-switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--cream);transition:transform .18s}
.hub-switch[aria-checked=true] i{background:var(--marigold);border-color:var(--marigold)}
.hub-switch[aria-checked=true] i::after{transform:translateX(16px);background:var(--ink)}
.hub-switch:focus-visible{outline:4px solid var(--marigold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hub-switch i::after,.hub-pill{transition:none}}

/* compact sticker book: 6 across, short slots */
.stk-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 6px}
.stk-grid>li{aspect-ratio:1/1;min-height:0}
@media(min-width:1100px){.stk-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 10px}}

/* round 6: week banner, This week in money, Compound Garden beside the sticker book */
.hub-weekband,.hub-weekcard,.hub-garden{--ink:#14110F}
.hub-weekband[hidden],.hub-weekcard[hidden],.hub-garden[hidden]{display:none!important}
.hub-weekband{padding:14px 0;background:var(--sand,#F7E6BF)}
.hub-weekcard{background:var(--cream,#FFF4DC)}
.hub-stk-wrap{display:grid;gap:24px;align-items:start}
.hub-garden{color:var(--ink);max-width:420px;width:100%}
@media(min-width:900px){.hub-stk-wrap{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.hub-garden{justify-self:end}}
/* Play & learn journey: one-line hero, Start here, three doors, More games (each link once), sticker book behind a tap */
.hub-hero{padding:20px 0 6px}
.hub-hero h1{font-size:clamp(2.25rem,9vw,5rem)}
.hub-hero p:last-child{margin-top:10px}
.hub-start{padding:12px 0 6px}
.hub-appsband,.hub-games{padding:18px 0 8px}
.hub-appsband .hub-section-title,.hub-games .hub-section-title{margin:0 0 12px}
.hub-doors{display:grid;gap:12px}
.hub-door{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:4px 5px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.hub-door.learn{background:var(--sage)}.hub-door.business{background:var(--marigold)}.hub-door.paths{background:var(--wood)}
.hub-door .art{flex:0 0 84px;width:84px;height:62px;object-fit:contain}
.hub-door .door-txt{display:block;flex:1;min-width:0}
.hub-door h3{margin:0 0 2px;font:800 1.375rem/1.05 var(--kb-display);letter-spacing:-.03em;text-transform:uppercase}
.hub-door p{margin:0 0 6px;font:500 .8125rem/1.4 var(--kb-body);color:#2d2a22}
.hub-door .chip{display:inline-block;padding:2px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font:700 .6875rem/1.4 var(--kb-mono);letter-spacing:.03em;text-transform:uppercase}
.hub-door .go{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:var(--cream)}
.hub-door .go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hub-door:active{transform:translate(4px,4px);box-shadow:1px 2px 0 var(--ink)}
@media(hover:hover){.hub-door:hover{transform:translateY(-3px);box-shadow:4px 9px 0 var(--ink)}}
.hub-stickers{padding:14px 0}
.hub-stk-details>summary{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;list-style:none}
.hub-stk-details>summary::-webkit-details-marker{display:none}
.hub-stk-details>summary .hub-section-title{margin:0;color:var(--cream)}
.hub-stk-details>summary .stk-level{margin-left:auto}
.hub-stk-details>summary::after{content:"+";flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border:2.5px solid var(--cream);border-radius:50%;font:800 1.25rem/1 var(--kb-display);color:var(--cream)}
.hub-stk-details[open]>summary::after{content:"\2212"}
.hub-stk-details .hub-stk-wrap{margin-top:12px}
@media(min-width:760px){.hub-doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hub-door{flex-direction:column;align-items:flex-start;padding:16px}.hub-door .art{width:100%;height:110px;flex:none}.hub-door .go{align-self:flex-end}.hub-hero{padding:40px 0 10px}}
@media(prefers-reduced-motion:reduce){.hub-door{transition:none}.hub-door:hover{transform:none}}
