/* =====================================================================================
   Sage homepage: hero, folder tabs and the Home folder (2026-10-01).
   Built from the approved mock (outputs/home-folders-mock-v10.html) with Rob's later
   corrections: the old card style, Home opens like a folder, the site footer stays.

   EVERY rule here is scoped to #sg-home, the homepage's root, so nothing reaches another
   app or page. Class names carry an hf- prefix so they can never meet a Tailwind utility.
   The old homepage sections are still in the page (their scripts and the app cards are
   the data source); `#sg-home ~ main` hides them. The JS is apps/home-folders.js.
   ===================================================================================== */

#sg-home {
  --ink:#191510; --paper:#FBF6EC; --muted:#5f584c; --mono:#8a7f6d; --yellow:#FFCE45; --green:#6FD060;
  --accent:#6FD060; --coral:#FF6F5E; --blue:#62A0FF; --lilac:#BFA2FF; --radius:16px;
  --c-home:#191510; --c-start:#FFCE45; --c-games:#FF8A7A; --c-teach:#7FB2FF; --c-print:#C6ADFF; --c-room:#86D977; --c-mine:#FFCE45;
  --gut:30px;      /* side gutter, and the gap above the stuck tabs */
  --fp:20px;       /* folder's inner side padding */
  background:var(--paper); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16px; line-height:1.5; width:100%;
}
#sg-home button { font-family:inherit; color:inherit; }
#sg-home h1, #sg-home h2, #sg-home h3 { font-weight:700; }

/* The old homepage stays in the page as the data source, out of sight. */
#sg-home ~ main { padding-top:0 !important; padding-bottom:0 !important; }
#sg-home ~ main > :not(script):not(style) { display:none !important; }

/* ---------- hero ---------- */
#sg-home .hf-top { margin:0 auto; padding:46px calc(var(--gut) + 16px) 38px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center; }
#sg-home .hf-top > * { min-width:0; }
#sg-home .hf-top h1 { font-size:clamp(2.4rem,4.6vw,4.2rem); line-height:1.16; letter-spacing:-.035em; margin:0 0 16px; }
#sg-home .hf-top h1 mark { display:inline-block; line-height:1; background:var(--yellow); padding:.04em .16em .1em; margin:0 .02em; border-radius:12px; border:3px solid var(--ink); color:var(--ink); }
/* "Built by a teacher, for teachers" (2026-10-06): one faded line after "today.", a fifth of the way across the gap to the left card */
#sg-home .hf-top h1 .hf-last { display:flex; align-items:baseline; margin-right:calc(-44px - 2%); }
#sg-home .hf-top h1 .hf-last i { flex:1 4 0; min-width:.3em; }
#sg-home .hf-top h1 .hf-last .hf-gl { flex-grow:.25; }
#sg-home .hf-top h1 .hf-built { flex:none; font:700 clamp(12px,1.15vw,17px)/1 'Space Mono',monospace; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:rgba(25,21,16,.3); }
#sg-home .hf-top p { font-size:1.15rem; line-height:1.55; color:var(--muted); margin:0; max-width:32em; font-weight:500; }
#sg-home .hf-stackwrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
#sg-home .hf-stack { position:relative; width:100%; height:clamp(220px,20vw,290px); }
#sg-home .hf-sc { position:absolute; width:42%; background:#fff; border:3px solid var(--ink); border-radius:16px; overflow:hidden; cursor:pointer;
  left:var(--x); top:var(--y); transform:rotate(var(--r)) scale(var(--s)); opacity:var(--o); z-index:var(--z);
  transition:left .75s cubic-bezier(.34,1.56,.64,1), top .75s cubic-bezier(.34,1.56,.64,1), transform .75s cubic-bezier(.34,1.56,.64,1), opacity .45s ease; }
#sg-home .hf-sc .hf-nm { padding:10px 14px 12px; font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sg-home .hf-sc.l    { --x:0%;  --y:16%; --r:-7deg;  --s:.93; --o:1; --z:2; }
#sg-home .hf-sc.m    { --x:29%; --y:0%;  --r:1.5deg; --s:1.06; --o:1; --z:4; }
#sg-home .hf-sc.r    { --x:58%; --y:18%; --r:7deg;   --s:.93; --o:1; --z:3; }
#sg-home .hf-sc.out  { --x:8%;  --y:30%; --r:-16deg; --s:.6;  --o:0; --z:1; }
#sg-home .hf-sc.wait { --x:62%; --y:30%; --r:14deg;  --s:.6;  --o:0; --z:0; }
#sg-home .hf-sdots { display:flex; align-items:center; justify-content:center; gap:12px; }
#sg-home .hf-sd { width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); transition:background .2s, transform .2s; }
#sg-home .hf-sd.on { background:var(--ink); transform:scale(1.15); }
#sg-home .hf-sarr { width:46px; height:46px; border-radius:50%; border:0; background:var(--ink); color:var(--paper); font:700 1.3rem 'Space Grotesk',sans-serif; line-height:1; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
#sg-home .hf-sarr:hover { background:#3a332a; }

/* A picture box holding a copy of an app's real card art. */
#sg-home .hf-th { position:relative; overflow:hidden; aspect-ratio:16/10; border-bottom:3px solid var(--ink); background:var(--paper); }
#sg-home .hf-th > .thumbnail { position:absolute !important; inset:0; width:100% !important; height:100% !important; margin:0 !important; border:0 !important; border-radius:0 !important; aspect-ratio:auto !important; }

/* Card art: hide the old corner tag pills, keep the five spans that are real artwork. */
#sg-home .thumbnail span { display:none !important; }
#sg-home .thumbnail :is(span.sh-pro-badge, span.bn-num, span.kcc-mark, span.kcc-caret, span.wrc-txt, span.sh-beta) { display:inline-block !important; }

/* ---------- shelf, tabs and the folder ---------- */
#sg-home .hf-shelf { margin:0 auto; padding:0 var(--gut) 50px; }
#sg-home .hf-tabbar { --p:0; position:sticky; top:68px; z-index:15; background:var(--paper); margin:0 -6px; padding:var(--gut) 6px 0; }
#sg-home .hf-tabs { display:flex; gap:5px; padding:0 30px; align-items:stretch; }
#sg-home .hf-tab { flex:1 1 auto; min-width:0; border:3px solid var(--ink); border-bottom:0; border-radius:14px 14px 0 0; cursor:pointer; text-align:left; position:relative; z-index:3;
  display:flex; align-items:center; gap:9px; margin:0; color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#fff 35%,var(--paper) 100%);
  padding:calc(27px - 8px*var(--p)) 16px calc(12px - 4px*var(--p)); }
#sg-home .hf-tab::before { content:""; position:absolute; left:10px; right:10px; top:calc(8px - 2px*var(--p)); height:calc(6px - 1px*var(--p)); border-radius:6px; background:var(--c); border:2px solid var(--ink); }
/* The paper bridge: paints the folder's top line out under every tab. Tabs never overlap the line. */
#sg-home .hf-tab::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:6px; background:var(--paper); pointer-events:none; }
#sg-home .hf-tab.home, #sg-home .hf-tab.mine { flex:0 0 auto; }
#sg-home .hf-tab:not(.on):hover { padding-top:calc(30px - 8px*var(--p)); }
#sg-home .hf-tab.on { background:linear-gradient(180deg,var(--yellow) 0%,#FFE9A6 45%,var(--paper) 100%); }
#sg-home .hf-tab:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
#sg-home .hf-tx { min-width:0; }
#sg-home .hf-tl { display:flex; align-items:baseline; gap:7px; font-weight:700; font-size:calc(1.02rem - .07rem*var(--p)); line-height:1.3; white-space:nowrap; }
#sg-home .hf-tl .hf-nm { overflow:hidden; text-overflow:ellipsis; }
#sg-home .hf-ct { font:700 .68rem 'Space Mono',monospace; background:rgba(25,21,16,.08); border-radius:50px; padding:1px 7px; flex:none; }
#sg-home .hf-hint { display:block; font-size:.76rem; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-height:calc(20px*(1 - var(--p))); opacity:calc(1 - var(--p)*1.6); margin-top:calc(2px*(1 - var(--p))); }
#sg-home .hf-tab.pop { animation:hfTabPop .52s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes hfTabPop { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(-12px) scale(1.05)} 55%{transform:translateY(3px) scale(.985)} 75%{transform:translateY(-4px) scale(1.012)} 100%{transform:translateY(0) scale(1)} }
#sg-home .hf-lip { height:20px; background:var(--paper); border:3px solid var(--ink); border-bottom:0; border-radius:18px 18px 0 0; position:relative; z-index:1; }
/* cards scrolling under the stuck bar fade out instead of being cut flat */
#sg-home .hf-lip::after { content:""; position:absolute; left:0; right:0; top:100%; height:22px; background:linear-gradient(var(--paper),rgba(251,246,236,0)); opacity:var(--p); pointer-events:none; }
#sg-home .hf-folder { border:3px solid var(--ink); border-top:0; border-radius:0 0 18px 18px; background:var(--paper); padding:6px var(--fp) 24px; position:relative; z-index:1; min-height:440px; }

/* ---------- folder head ---------- */
#sg-home .hf-fbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px; }
#sg-home .hf-fbar h2 { margin:0 auto 0 0; font-size:1.5rem; line-height:1.25; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
#sg-home .hf-fbar h2 i { width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); background:var(--c); flex:none; }
#sg-home .hf-fbar .hf-clear { height:30px; border:2px solid var(--ink); border-radius:50px; background:#fff; font:700 .72rem 'Space Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; padding:0 12px; cursor:pointer; }
#sg-home .hf-pills { display:flex; gap:6px; flex-wrap:wrap; }
#sg-home .hf-pill { height:32px; border:2px solid var(--ink); border-radius:50px; background:#fff; font:700 .72rem 'Space Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; padding:0 13px; cursor:pointer; white-space:nowrap; flex:none; color:var(--ink); }
#sg-home .hf-pill.on { background:var(--ink); color:var(--paper); }
#sg-home .hf-pill small { font:700 .66rem 'Space Mono',monospace; opacity:.6; margin-left:5px; }
#sg-home .hf-how { background:var(--ink); color:var(--paper); border-radius:14px; padding:12px 16px; margin:0 0 16px; font-size:.95rem; line-height:1.45; display:flex; gap:10px; align-items:baseline; }
#sg-home .hf-how b { color:var(--yellow); white-space:nowrap; }
#sg-home .hf-divider { grid-column:1/-1; font:700 .72rem 'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; margin:8px 0 -2px; }
#sg-home .hf-divider::after { content:""; flex:1; border-top:2px dashed rgba(25,21,16,.25); }
#sg-home .hf-empty { grid-column:1/-1; text-align:center; padding:50px 10px; color:var(--muted); font-size:1.05rem; }
#sg-home .hf-empty b { display:block; color:var(--ink); font-size:1.3rem; margin-bottom:6px; }

/* ---------- app cards: the old live card ("sh-newcard"), copied onto a real card ---------- */
#sg-home .hf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px; padding:4px; }
#sg-home .hf-card.app-box { border:3px solid var(--ink) !important; border-radius:16px; box-shadow:none; background:#fff; overflow:hidden; display:flex; flex-direction:column; min-width:0; }
#sg-home .hf-card .thumbnail { border-bottom:3px solid var(--ink) !important; height:auto !important; aspect-ratio:16/10; flex:none; }
#sg-home .hf-card .app-info { padding:22px; display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; }
#sg-home .hf-card .app-info h4 { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:0 0 10px; line-height:1.5; }
#sg-home .hf-card .app-info h4 a { color:inherit; text-decoration:none; }
#sg-home .hf-card .app-info p { font-family:'Space Grotesk',system-ui,sans-serif; font-weight:500; font-size:.96rem; color:var(--ink); line-height:1.5; margin:0 0 18px; }
#sg-home .hf-tags { display:flex; gap:5px; flex-wrap:wrap; margin:auto 0 12px; }
#sg-home .hf-tag { font:700 .64rem 'Space Mono',monospace; line-height:1.5; letter-spacing:.05em; text-transform:uppercase; border:2px solid var(--ink); border-radius:50px; padding:2px 8px; background:#fff; color:var(--ink); white-space:nowrap; }
#sg-home .hf-tag.free { background:var(--green); }
#sg-home .hf-tag.dev { background:var(--ink); color:var(--paper); }
#sg-home .hf-tag.soon { background:#7B4FD6; color:#fff; }   /* Coming soon: purple (Rob, 2026-10-04) */
#sg-home .hf-tag.beta { background:transparent; border-color:#7B4FD6; color:#7B4FD6; }   /* Beta: purple ring and text (Rob, 2026-10-08) */
#sg-home .hf-open { align-self:flex-start; margin-top:auto; font:700 1.125rem 'Space Grotesk',sans-serif; line-height:1.5; color:var(--ink); background:var(--green); border:3px solid var(--ink); border-radius:16px; padding:9px 16px; cursor:pointer; transition:transform .08s ease; }
#sg-home .hf-tags + .hf-open { margin-top:0; }
#sg-home .hf-open:hover { transform:translate(2px,2px); }
/* the live site's scroll reveal: fade up on the way down, reset on the way back up */
#sg-home .hf-rise { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
#sg-home .hf-rise.hf-in { opacity:1; transform:none; }
#sg-home .hf-rise.hf-in:hover { transform:translate(-3px,-3px); transition-duration:.12s; transition-delay:0s; }
#sg-home .hf-card[data-coming-soon="true"]:hover { transform:none !important; }

/* ---------- Home folder ---------- */
#sg-home .hf-band { margin:0 calc(var(--fp) * -1); padding:72px var(--fp); border-top:3px solid var(--ink); scroll-margin-top:120px; }
#sg-home .hf-band.first { border-top:0; padding-top:20px; }
#sg-home .hf-band.b-blue { background:#D8E6FF; }
#sg-home .hf-band.b-ink { background:var(--ink); color:var(--paper); padding:0; margin-bottom:-24px; border-radius:0 0 15px 15px; }
#sg-home .hf-kick { font:700 .74rem 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--mono); }
#sg-home .hf-h2 { font-size:clamp(2rem,3.4vw,3rem); letter-spacing:-.025em; line-height:1.05; margin:10px 0 0; }
#sg-home .hf-c { text-align:center; }
#sg-home .hf-lead { color:var(--muted); font-size:1.08rem; line-height:1.55; margin:14px 0 0; max-width:34em; font-weight:500; }
#sg-home .hf-c .hf-lead { margin-left:auto; margin-right:auto; }
#sg-home .hf-bhead { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
#sg-home .hf-bhead p { margin:0; max-width:24em; color:var(--muted); font-size:1.05rem; line-height:1.5; font-weight:500; }
#sg-home .hf-flag { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:40px; padding:4px; }
#sg-home .hf-reach { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:64px; align-items:center; }
#sg-home .hf-reach > * { min-width:0; }
#sg-home .hf-ticks { display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 0; font:700 .72rem 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
#sg-home .hf-reach .hf-sdots { justify-content:flex-start; margin-top:30px; }
#sg-home .hf-flower { display:flex; justify-content:center; min-width:0; }
/* the live site's own showcase flower, moved in whole; its own dots row is replaced by the one under the text */
/* sized so the whole flower fits on screen under the stuck tabs */
#sg-home #sh-showcase { margin:0 auto !important; transform:none !important; max-width:min(820px, calc((100vh - 230px) * 1.19)) !important; }
#sg-home #sh-showcase > div:last-child:not(.shc-card):not(.shc-pol) { display:none !important; }
#sg-home .hf-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:44px; }
#sg-home .hf-step { background:#fff; border:3px solid var(--ink); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; }
#sg-home .hf-step .n { width:34px; height:34px; border-radius:10px; border:2.5px solid var(--ink); background:var(--yellow); display:flex; align-items:center; justify-content:center; font-weight:700; }
#sg-home .hf-step h3 { margin:0; font-size:1.2rem; }
#sg-home .hf-step p { margin:0; color:var(--muted); line-height:1.45; font-size:.95rem; font-weight:500; }
#sg-home .hf-step img { width:100%; height:150px; object-fit:contain; margin-top:auto; display:block; }
#sg-home .hf-prices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; max-width:1120px; margin:48px auto 0; padding-top:16px; }
#sg-home .hf-pc { background:#fff; border:3px solid var(--ink); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; gap:8px; position:relative; }
#sg-home .hf-pc.mo { background:#F3EDFF; box-shadow:none; }   /* no lilac back shadow (Rob, 2026-10-05) */
#sg-home .hf-pc h3 { margin:0; font-size:1.15rem; }
#sg-home .hf-amt { font-size:2.3rem; font-weight:700; letter-spacing:-.03em; line-height:1.2; }
#sg-home .hf-amt small { font-size:1rem; font-weight:500; color:var(--muted); margin-left:2px; letter-spacing:0; }
#sg-home .hf-pc .hf-sub { color:var(--muted); font-size:.9rem; margin:0; font-weight:500; }
#sg-home .hf-pc ul { list-style:none; padding:0; margin:4px 0 12px; font-size:.9rem; line-height:1.45; display:flex; flex-direction:column; gap:6px; font-weight:500; }
#sg-home .hf-pbtn { margin-top:auto; border:3px solid var(--ink); border-radius:14px; padding:11px; font:700 1rem 'Space Grotesk',sans-serif; text-align:center; background:#fff; color:var(--ink); cursor:pointer; width:100%; transition:transform .08s ease; }
#sg-home .hf-pbtn:hover { transform:translate(2px,2px); }
#sg-home .hf-pc.mo .hf-pbtn { background:#8B6FD6; color:#fff; }
#sg-home .hf-pc.yr .hf-pbtn { background:var(--yellow); }   /* CTA yellow, as /getpro (Rob, 2026-10-05) */
#sg-home .hf-badge { position:absolute; top:-16px; left:20px; transform:rotate(-4deg); background:var(--yellow); border:3px solid var(--ink); border-radius:10px; padding:3px 10px; font:700 .72rem 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
#sg-home .hf-whole { max-width:1120px; margin:40px auto 0; border:3px solid var(--ink); border-radius:16px; display:flex; align-items:center; gap:18px; padding:20px 24px; flex-wrap:wrap; background:var(--ink); color:var(--paper); }
#sg-home .hf-whole b.w { font-size:1.25rem; }
#sg-home .hf-whole span.t { flex:1; min-width:220px; color:#cfc6b5; font-weight:500; }
#sg-home .hf-whole span.t strong { color:var(--paper); }
#sg-home .hf-whole button { border:2px solid var(--yellow); border-radius:50px; background:var(--yellow); color:var(--ink); padding:9px 18px; font-weight:700; font-size:.92rem; cursor:pointer; white-space:nowrap; }
/* the live multiplayer showcase, moved in whole, sitting as the Home folder's black foot */
#sg-home #sg-mp-show { --sgmp-dg:64px; margin:0; border-radius:0 0 15px 15px; padding:72px var(--fp) calc(var(--sgmp-dg) - 6px); }
#sg-home #sg-mp-show .sgmp-dots { align-items:center; }
#sg-home #sg-mp-show .sgmp-dots .hf-mparr { width:46px; height:46px; border-radius:50%; border:0; background:var(--yellow); color:var(--ink); font:700 1.3rem 'Space Grotesk',sans-serif; display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0 10px; cursor:pointer; }
#sg-home #sg-mp-show .sgmp-dots .hf-mparr::before { display:none; }

#sg-home .hf-cnav, #sg-home .hf-cmini { display:none; }

/* ---------- small laptops and iPad: names only ---------- */
@media (max-width:1150px) {
  #sg-home .hf-tabs { padding:0 24px; }
  #sg-home .hf-tab { padding-left:14px; padding-right:14px; }
  #sg-home .hf-tab .hf-hint, #sg-home .hf-tab .hf-ct { display:none; }
  #sg-home .hf-flag { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #sg-home .hf-reach { grid-template-columns:minmax(0,1fr); gap:40px; }
  #sg-home .hf-reach .hf-sdots { justify-content:center; }
  #sg-home #sh-showcase { max-width:min(720px, calc((100vh - 230px) * 1.19)) !important; }
  #sg-home .hf-band { padding-top:60px; padding-bottom:60px; }
  #sg-home .hf-band.first { padding-top:20px; }
  #sg-home .hf-band.b-ink { padding:0; }
}
@media (max-width:900px) {
  #sg-home { --gut:16px; }
  #sg-home .hf-top { grid-template-columns:minmax(0,1fr); padding:40px 30px 30px; gap:30px; }
  #sg-home .hf-top h1 .hf-last { margin-right:0; }
  #sg-home .hf-stackwrap { max-width:600px; width:100%; margin:0 auto; }
  #sg-home .hf-stack { height:260px; }
  #sg-home .hf-tabs { padding:0 8px; gap:3px; }
  #sg-home .hf-tab { padding-left:9px; padding-right:9px; }
  #sg-home .hf-tl { font-size:calc(.88rem - .05rem*var(--p)); }
  #sg-home .hf-steps { gap:12px; }
  #sg-home .hf-step img { height:110px; }
  #sg-home .hf-prices { gap:14px; }
}

/* ---------- PHONE: its own layout, built for browsing ---------- */
@media (max-width:600px) {
  #sg-home { --gut:16px; --fp:16px; }
  #sg-home .hf-top { padding:24px 16px 20px; gap:0; }
  #sg-home .hf-top h1 { font-size:2.05rem; margin:0 0 10px; }
  #sg-home .hf-top h1 mark { border-width:2.5px; border-radius:9px; }
  #sg-home .hf-top h1 .hf-built { font-size:min(11px,2.85vw); letter-spacing:.02em; }
  #sg-home .hf-top p { font-size:.98rem; }
  #sg-home .hf-stackwrap, #sg-home .hf-tabbar { display:none; }
  #sg-home .hf-shelf { padding:0 0 10px; }
  /* big round filters in two rows: four, then three */
  #sg-home .hf-cnav { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 0; padding:18px 8px 22px; border-bottom:3px solid var(--ink); background:var(--paper); }
  #sg-home .hf-cnav button, #sg-home .hf-cmini button { border:0; background:transparent; display:flex; flex-direction:column; align-items:center; padding:0; cursor:pointer; min-width:0; color:var(--ink); }
  #sg-home .hf-cnav button { flex:0 0 25%; gap:7px; }
  #sg-home .hf-ci { border-radius:50%; border:3px solid var(--ink); background:#fff; display:flex; align-items:center; justify-content:center; }
  #sg-home .hf-ci i { display:block; background:center/contain no-repeat; }
  #sg-home .hf-cnav .hf-ci { width:58px; height:58px; }
  #sg-home .hf-cnav .hf-ci i { width:36px; height:36px; }
  #sg-home .hf-cnav .hf-cl { font-size:.84rem; font-weight:700; white-space:nowrap; line-height:1.2; }
  #sg-home .hf-cnav button.on .hf-ci { box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink); }
  /* once scrolled past, a slim row slides down and joins the header */
  #sg-home .hf-cmini { display:block; position:sticky; top:62px; height:0; z-index:16; }
  #sg-home .hf-cmini .hf-in { display:flex; justify-content:space-around; background:var(--paper); border-bottom:3px solid var(--ink); padding:7px 2px 8px; margin-top:-3px;
    transform:translateY(-110%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
  #sg-home .hf-cmini.show .hf-in { transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  #sg-home .hf-cmini button { flex:1; gap:3px; }
  #sg-home .hf-cmini .hf-ci { width:36px; height:36px; border-width:2.5px; }
  #sg-home .hf-cmini .hf-ci i { width:24px; height:24px; }
  #sg-home .hf-cmini .hf-cl { font-size:.62rem; font-weight:700; white-space:nowrap; line-height:1.2; }
  #sg-home .hf-cmini button.on .hf-ci { box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink); }
  /* folder */
  #sg-home .hf-folder { border:0; border-radius:0; padding:18px var(--fp) 30px; min-height:0; }
  #sg-home .hf-fbar { display:block; margin-bottom:12px; }
  #sg-home .hf-fbar h2 { font-size:1.45rem; margin-bottom:10px; }
  #sg-home .hf-pills { flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--fp) * -1); padding:4px var(--fp); scrollbar-width:none; }
  #sg-home .hf-pills::-webkit-scrollbar { display:none; }
  #sg-home .hf-how { display:block; font-size:.88rem; padding:10px 12px; }
  #sg-home .hf-how b { white-space:normal; }
  /* cards become rows: picture left, words right */
  #sg-home .hf-grid { display:flex; flex-direction:column; gap:12px; padding:0; }
  #sg-home .hf-grid .hf-card { flex-direction:row; min-height:118px; }
  #sg-home .hf-grid .hf-card .thumbnail { width:132px; min-height:118px; aspect-ratio:auto; border-bottom:0 !important; border-right:3px solid var(--ink) !important; }
  #sg-home .hf-grid .hf-card .app-info { padding:12px 14px; }
  #sg-home .hf-grid .hf-card .app-info h4 { font-size:1.08rem; line-height:1.2; margin:0 0 4px; }
  #sg-home .hf-grid .hf-card .app-info p { font-size:.86rem; line-height:1.35; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  #sg-home .hf-card .hf-open { display:none; }
  #sg-home .hf-tags { margin:auto 0 0; }
  #sg-home .hf-tag { font-size:.56rem; padding:1px 6px; }
  #sg-home .hf-rise.hf-in:hover { transform:none; }
  /* home: flagship 2 x 2, then pricing; nothing else */
  #sg-home .hf-band { padding:32px var(--fp); }
  #sg-home .hf-band.first { padding-top:8px; }
  #sg-home .hf-band.hf-fav, #sg-home .hf-band.b-blue, #sg-home .hf-band.b-ink, #sg-home .hf-pill.ph-off { display:none; }
  #sg-home .hf-h2 { font-size:1.6rem; margin-top:6px; }
  #sg-home .hf-bhead { gap:10px; }
  #sg-home .hf-bhead p, #sg-home .hf-lead { font-size:.95rem; }
  #sg-home .hf-flag { grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; padding:0; }
  #sg-home .hf-flag .hf-card .app-info { padding:9px 10px 11px; }
  #sg-home .hf-flag .hf-card .app-info h4 { font-size:.95rem; line-height:1.2; margin:0 0 4px; }
  #sg-home .hf-flag .hf-card .app-info p { font-size:.76rem; line-height:1.35; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  #sg-home .hf-flag .hf-card .thumbnail { aspect-ratio:auto; height:96px !important; }
  #sg-home .hf-prices { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:22px calc(var(--fp) * -1) 0; padding:18px var(--fp) 12px; gap:12px; scrollbar-width:none; }
  #sg-home .hf-prices::-webkit-scrollbar { display:none; }
  #sg-home .hf-pc { flex:0 0 80%; scroll-snap-align:center; }
  #sg-home .hf-pc.mo { box-shadow:none; }
  #sg-home .hf-whole { margin-top:16px; padding:14px 16px; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #sg-home .hf-sc { transition:none; }
  #sg-home .hf-tab.pop { animation:none; }
  #sg-home .hf-rise { opacity:1; transform:none; transition:none; }
}

/* 2026-10-01: Home's five flagship cards sit in one row, straight under the black bar */
#sg-home .hf-flag { grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; margin-top:0; }
#sg-home .hf-band.first { padding-top:4px; }
@media (max-width:1150px) { #sg-home .hf-flag { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px)  { #sg-home .hf-flag { grid-template-columns:repeat(2,minmax(0,1fr)); } #sg-home .hf-flag > :last-child:nth-child(odd) { grid-column:1/-1; } }
/* tabs opening back out after a click: ease, never snap */
#sg-home .hf-tabbar.hf-ease .hf-tab, #sg-home .hf-tabbar.hf-ease .hf-tab * , #sg-home .hf-tabbar.hf-ease { transition:padding .3s ease, font-size .3s ease, max-height .3s ease, opacity .3s ease, top .3s ease; }

/* 2026-10-01 (Rob): the homepage header gets the mock's lighter, more professional sizing, which is
   the header-pill standard (Design Language: 32px, 2px border, Space Grotesk 700, no shadow).
   .main-header exists only on the homepage; :has(#sg-home) keeps it to the new homepage. Phones keep
   their existing header rules. */
@media (min-width:641px) {
  body:has(#sg-home) .main-header { height:63px; padding:0 22px; background:#FBF6EC; border-bottom:3px solid #191510; }
  body:has(#sg-home) .main-header > div:first-child { gap:9px !important; }
  body:has(#sg-home) .main-header > div:first-child img { height:40px !important; transform:none !important; }
  body:has(#sg-home) .main-header .wordmark-desktop span { font-size:1.28rem !important; letter-spacing:-.01em !important; color:#191510 !important; }
  body:has(#sg-home) .main-header .header-right { gap:10px !important; }
  body:has(#sg-home) .main-header .header-pill { height:32px !important; border-width:2px !important; border-color:#191510 !important; font-size:.7rem !important; padding:0 13px !important; gap:6px !important; box-shadow:none !important; }
  body:has(#sg-home) .main-header .header-pill svg { width:14px !important; height:14px !important; }
  body:has(#sg-home) .main-header .header-search-pill { width:220px !important; padding:0 12px !important; }
  body:has(#sg-home) .main-header .sg-search-icon { font-size:0 !important; opacity:1 !important; width:15px; height:15px; flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191510' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat; }
  body:has(#sg-home) .main-header #sg-search-input,
  body:has(#sg-home) .main-header #sg-search-input::placeholder { font-family:'Space Grotesk',sans-serif !important; font-weight:500 !important; font-size:.85rem !important; }
  body:has(#sg-home) .main-header #sg-search-input::placeholder { color:#9a917f !important; }
  body:has(#sg-home) .main-header .owner-dash-pill { width:32px !important; padding:0 !important; justify-content:center; font-size:.85rem !important; }
  body:has(#sg-home) .main-header .profile-pill img,
  body:has(#sg-home) .main-header .signin-pill img { width:24px !important; height:24px !important; }
  body:has(#sg-home) .main-header #header-google-btn,
  body:has(#sg-home) .main-header #header-google-btn button { max-height:28px; }
}
@media (min-width:641px) and (max-width:980px) {
  body:has(#sg-home) .main-header .header-bookmarks-pill,
  body:has(#sg-home) .main-header .get-pro-pill.pro-short { width:32px !important; padding:0 !important; justify-content:center; }
  body:has(#sg-home) .main-header .header-search-pill { width:160px !important; }
}
@media (min-width:641px) {
  body:has(#sg-home) .main-header #pro-pill-wrap { align-items:center !important; align-self:center !important; height:32px !important; }
  body:has(#sg-home) .main-header #pro-pill-wrap > .get-pro-pill { margin:0 !important; top:auto !important; }
}

/* 2026-10-01 (Rob, comparing with the mock): the mock's compact cards, not the big ones. Five to a
   row on a laptop, art 150px, title 1.08rem, a two-line description, no Open app button (the whole
   card opens the app), a white star with an ink ring. Phones keep their rows (rules above). */
@media (min-width:601px) {
  #sg-home .hf-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
  #sg-home .hf-flag { gap:18px; }
  #sg-home .hf-card .thumbnail { aspect-ratio:auto !important; height:150px !important; }
  #sg-home .hf-card .app-info { padding:12px 14px 14px; gap:6px; }
  #sg-home .hf-card .app-info h4 { font-size:1.08rem; line-height:1.15; margin:0; }
  #sg-home .hf-card .app-info p { font-weight:400; font-size:.9rem; line-height:1.35; color:var(--muted,#5f584c); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #sg-home .hf-card .hf-tags { margin:auto 0 0; padding-top:4px; }
  #sg-home .hf-card .hf-open { display:none !important; }
  #sg-home .hf-card:hover { transform:translate(-2px,-2px); }
}
#sg-home .hf-card .app-star-btn { width:32px !important; height:32px !important; top:8px !important; right:8px !important; left:auto !important;
  border-radius:50% !important; border:2px solid var(--ink) !important; background:#fff !important; color:var(--ink) !important;
  font-size:15px !important; font-weight:400 !important; line-height:1 !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; opacity:1 !important; box-shadow:none !important; }
#sg-home .hf-card .app-star-btn.starred, #sg-home .hf-card .app-star-btn.active, #sg-home .hf-card .app-star-btn.on { background:var(--yellow,#FFCE45) !important; }
/* the coloured strip on each tab stays full thickness when the tabs shrink, as on the mock */
#sg-home .hf-tab::before { height:6px !important; top:calc(8px - 2px*var(--p)) !important; }

/* 2026-10-01 (Rob, side by side with the mock): the strip is 6px of COLOUR plus its 2px ring, as on
   the mock. border-box squeezed the colour down to 2px, which read as a thin dark line. */
#sg-home .hf-tab::before { box-sizing:content-box !important; }
/* Card words: the live site's ink, in the lighter weight, still two lines (Rob: "a thin version of
   what's on the live site", not the grey). */
@media (min-width:601px) {
  #sg-home .hf-card .app-info p { color:var(--ink,#191510); font-weight:400; font-size:.92rem; }
}
/* Rob picked option 2 (2026-10-01): the live site's Space Grotesk at medium weight. The thin weight's
   letter shapes read as a different, typewriter-like font. */
@media (min-width:601px) { #sg-home .hf-card .app-info p { font-weight:500; } }

/* 2026-10-01 (Rob): the phone header gets the same mock look: 32px pills and circles with a 2px ink
   ring, paper background, a 3px ink line. The phone keeps its own buttons (Join a game stays for
   pupils, search stays hidden) and its stacked wordmark, just lighter. */
@media (max-width:640px) {
  body:has(#sg-home) .main-header { background:#FBF6EC !important; border-bottom:3px solid #191510 !important; min-height:54px !important; padding:0 12px !important; }
  body:has(#sg-home) .main-header > div:first-child img { height:34px !important; transform:none !important; }
  body:has(#sg-home) .main-header .wordmark-mobile span { color:#191510 !important; }
  body:has(#sg-home) .main-header .header-right { gap:6px !important; }
  body:has(#sg-home) .main-header .header-pill { height:32px !important; border-width:2px !important; border-color:#191510 !important; font-size:.66rem !important; box-shadow:none !important; }
  body:has(#sg-home) .main-header .header-join-pill,
  body:has(#sg-home) .main-header .signin-pill:not(.logged-in) { padding:0 11px !important; }
  body:has(#sg-home) .main-header #pro-pill-wrap { height:32px !important; }
  body:has(#sg-home) .main-header .get-pro-pill,
  body:has(#sg-home) .main-header .profile-pill,
  body:has(#sg-home) .main-header .signin-pill.logged-in,
  body:has(#sg-home) .main-header .owner-dash-pill { width:32px !important; height:32px !important; padding:0 !important; }
  body:has(#sg-home) .main-header .get-pro-pill svg { width:13px !important; height:13px !important; }
  body:has(#sg-home) .main-header .profile-pill img,
  body:has(#sg-home) .main-header .signin-pill img { width:26px !important; height:26px !important; }
}

/* 2026-10-01 (Rob): pricing is a 2 x 2. Free and Pro Monthly on top, Pro Yearly and Whole school
   below; Whole school is a black card the same size. */
#sg-home .hf-prices { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:880px; }
#sg-home .hf-pc.whole { background:var(--ink); color:var(--paper); }
#sg-home .hf-pc.whole .hf-sub, #sg-home .hf-pc.whole ul { color:#cfc6b5; }
#sg-home .hf-pc.whole .hf-amt { color:var(--paper); }
#sg-home .hf-pc.whole .hf-pbtn { background:#fff; color:var(--ink); border-color:var(--ink); }   /* white, as /getpro (Rob, 2026-10-05) */
/* Phone: the fifth flagship card is the same size as the others, centred on its own row. */
@media (max-width:900px) { #sg-home .hf-flag > :last-child:nth-child(odd) { grid-column:1/-1; justify-self:center; width:calc(50% - 6px); } }
#sg-home .hf-prices { grid-auto-rows:1fr; }
@media (max-width:900px) { #sg-home .hf-flag > :last-child:nth-child(odd) { width:auto; max-width:none; }
  #sg-home .hf-flag { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #sg-home .hf-flag > * { grid-column:span 2; }
  #sg-home .hf-flag > :last-child:nth-child(odd) { grid-column:2 / span 2; justify-self:stretch; } }

/* 2026-10-01 (Rob): the signed-in photo sits snug in the pill's left curve, 2px clear all round. */
body:has(#sg-home) .main-header .signin-pill.logged-in { padding:0 12px 0 2px !important; gap:8px !important; }
body:has(#sg-home) .main-header .signin-pill.logged-in > img { width:24px !important; height:24px !important; border:0 !important; }
@media (max-width:640px) { body:has(#sg-home) .main-header .signin-pill.logged-in { padding:0 !important; justify-content:center !important; } }
/* The pill menus (Log out, Profile, Pro) in the lighter header style. */
body:has(#sg-home) .main-header .pill-dropdown { top:calc(100% + 8px) !important; border:2px solid #191510; border-radius:12px; min-width:180px; }
body:has(#sg-home) .main-header .dropdown-item { font-family:'Space Grotesk',sans-serif; font-size:.74rem; padding:12px 16px; max-height:none !important; height:auto !important; }
body:has(#sg-home) .main-header .dropdown-item.logout:only-child { border-top:0; }
/* Phone: once the slim filter row joins the header, the header's own bottom line goes, so the two
   read as one taller header. (The inline style the script sets loses to the !important line above.) */
@media (max-width:640px) { body:has(#hf-cmini.show) .main-header { border-bottom-color:transparent !important; } }
/* Phone pricing: a 2 x 2 that fits the screen, no sideways scrolling. */
@media (max-width:600px) {
  #sg-home .hf-prices { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; margin:22px 0 0; padding:16px 0 0; gap:10px; scroll-snap-type:none; }
  #sg-home .hf-pc { flex:none; padding:16px 12px; gap:6px; }
  #sg-home .hf-pc h3 { font-size:.95rem; }
  #sg-home .hf-pc .hf-amt { font-size:1.5rem; }
  #sg-home .hf-pc .hf-sub { font-size:.74rem; }
  #sg-home .hf-pc ul { font-size:.74rem; line-height:1.35; gap:5px; }
  #sg-home .hf-pc .hf-pbtn { font-size:.78rem; padding:9px 6px; }
  #sg-home .hf-pc .hf-badge { font-size:.55rem; right:8px; left:auto; padding:2px 7px; }
}
/* Rob, 2026-10-01: the 2 x 2 is for the PHONE only. Laptop and whiteboard show all four in one row,
   Whole school last; iPad keeps a 2 x 2 because four would be too narrow there. */
@media (min-width:1151px) { #sg-home .hf-prices { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1320px; gap:22px; } }

/* 2026-10-01 (Rob): no black lines between the Home sections. The colours blend instead:
   cream -> white (favourites) -> blue (settle down) -> cream (pricing), then a hard cut into the
   black multiplayer section. Each band fades from the colour above it into its own. */
#sg-home .hf-band { border-top:0 !important; }
#sg-home .hf-band.hf-fav { background:linear-gradient(180deg, var(--paper) 0%, #fff 140px, #fff 100%); }
#sg-home .hf-band.b-blue { background:linear-gradient(180deg, #fff 0%, #D8E6FF 160px, #D8E6FF 100%); }
#sg-home #hf-sec-price { background:linear-gradient(180deg, #D8E6FF 0%, var(--paper) 160px, var(--paper) 100%); }
#sg-home .hf-band.b-ink { background:var(--ink); }
/* Phone has no favourites, settle down or multiplayer, so its pricing simply sits on cream. */
@media (max-width:600px) { #sg-home #hf-sec-price { background:var(--paper); } }
/* Rob, 2026-10-01: the carousel arrows sit centred under the ticks ("Just sign in" in the middle),
   so they read as the flower's controls rather than drifting at the far left. */
#sg-home .hf-tickdots { display:inline-flex; flex-direction:column; align-items:center; }
#sg-home .hf-tickdots .hf-ticks { justify-content:center; }
#sg-home .hf-reach .hf-tickdots .hf-sdots { justify-content:center; }
@media (max-width:1150px) { #sg-home .hf-tickdots { display:flex; } }
/* Favourites words centred in their space beside the fan (Rob picked option 2, 2026-10-07) */
#sg-home .hf-reach .hf-rtext { text-align:center; max-width:500px; justify-self:center; }
#sg-home .hf-reach .hf-h2 { font-size:clamp(2rem,3vw,2.6rem); }

/* 2026-10-05 (Rob): the new /getpro wording on these cards. Yearly's grey total, the whole-school
   lead and its email + Copy button. The price, the billed line and the email shrink with the card
   (cqi) so they never wrap; on a phone the yearly total drops to its own line. */
#sg-home .hf-pc { container-type:inline-size; }
#sg-home .hf-amt { white-space:nowrap; }
#sg-home .hf-amt > span { font-size:min(1em, 19cqi); }
#sg-home .hf-pc .hf-sub { white-space:nowrap; font-size:min(.9rem, 7.1cqi); }
#sg-home .hf-pc .hf-sub b { color:var(--ink); font-weight:700; }
#sg-home .hf-pc .hf-sub .hf-g { color:#6B645A; font-weight:600; }
#sg-home .hf-pc .hf-wlead { margin:0; font-size:.9rem; line-height:1.45; font-weight:500; color:#cfc6b5; }
#sg-home .hf-pc .hf-wlead strong { display:block; color:var(--paper); font-weight:700; margin-bottom:4px; }
#sg-home .hf-pbtn.hf-em { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 8px; }
#sg-home .hf-em .hf-e { white-space:nowrap; font-size:min(1em, 6.4cqi); }
#sg-home .hf-em .hf-copy { display:inline-flex; align-items:center; gap:5px; font-size:.82rem; border-top:2px solid rgba(25,21,16,.3); padding-top:4px; align-self:stretch; justify-content:center; }
@media (max-width:600px) {
  #sg-home .hf-pc .hf-sub { white-space:normal; font-size:.74rem; }
  #sg-home .hf-pc .hf-sub .hf-dot { display:none; }
  #sg-home .hf-pc .hf-sub .hf-g { display:block; white-space:nowrap; }
  #sg-home .hf-pc .hf-wlead { font-size:.74rem; line-height:1.35; }
  #sg-home .hf-em .hf-copy { font-size:.7rem; }
}