/* Home option A: picture tiles (owner pick, 30 Oct 2026). Same tile look as store-tiles.css (.sa-tile). Site tokens from styles.css only. */
main section.hx-hero,main section.hx-paths{margin-top:0;margin-bottom:0;padding-bottom:0}
main section.hx-hero{padding-top:22px}
main section.hx-paths{padding-top:18px}
.hx-h1{margin:0;font:800 clamp(30px,5vw,52px)/1.08 var(--display);letter-spacing:-.015em;color:var(--ink);max-width:16ch;text-wrap:balance}
.hx-sub{margin:10px 0 0;font-size:clamp(16px,2vw,20px);line-height:1.4;color:var(--muted);max-width:44ch}
.hx-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;font:700 17px var(--display);text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s}
.hx-btn:focus-visible,.hx-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hx-pri{background:var(--mark);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.hx-pri:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.hx-sec{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.hx-sec:hover{background:var(--wash)}
@media (max-width:639px){.hx-btn{flex:1 1 100%}}
.hx-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted)}
.hx-note img{flex:none;margin-top:1px}

/* tiles: 2 across on a phone and tablet, 4 across on a computer */
.hx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hx-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:168px;padding:96px 12px 12px;border-radius:18px;color:var(--ink);background:var(--sheet);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .15s,box-shadow .15s}
.hx-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.hx-tile b{position:relative;font:800 19px/1.15 var(--display)}
.hx-tile .hx-d{position:relative;font-size:14px;line-height:1.3;color:var(--muted);margin-top:3px}
.hx-tile.hx-prek{background:#fff4cc}.hx-tile.hx-les{background:#e7ecfc}.hx-tile.hx-store{background:#e3f4ea}.hx-tile.hx-games{background:#efe7fb}
.hx-tile.hx-lang{background:#fde8e4}.hx-tile.hx-hub{background:#e2f2f7}.hx-tile.hx-geo{background:#e6f1fb}.hx-tile.hx-money{background:#fff0d9}
@media (prefers-reduced-motion:reduce){.hx-tile,.hx-btn{transition:none}.hx-tile:hover,.hx-pri:hover{transform:none}}
@media (min-width:640px){
  .hx-tiles{gap:16px}
  .hx-tile{min-height:220px;padding:120px 18px 18px;border-radius:22px}
  .hx-tile b{font-size:22px}
  .hx-tile .hx-d{font-size:15px;line-height:1.35}
}
@media (min-width:960px){
  .hx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hx-h1{max-width:none;font-size:48px}
  .hx-sub{max-width:none}
  main section.hx-hero{padding-top:36px}
}

/* everything that was on the home page before, kept below the tiles */
.hx-seo{margin-top:34px;padding-top:6px;border-top:1px solid #e3e9f4}
.hx-more{margin:18px 0 4px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
main .hx-seo .hx-oldhero{padding-top:8px;padding-bottom:0}
.hx-oldh{margin:0 0 6px;font:800 24px/1.2 var(--display);color:var(--ink)}
.hx-seo .missionc{margin-top:16px}

/* tile pictures v2 (owner 30 Oct 17:50): a small fanned group of 2-3 items per tile, like the store's fanned covers.
   The picture box stays inside the top padding of the tile (phone 96px, tablet/computer 120px), so it never covers the text. */
.hx-art{position:absolute;right:8px;top:8px;width:150px;height:84px;z-index:-1;pointer-events:none}
.hx-art>*{position:absolute;display:block;margin:0;max-width:none}
.hx-f0{z-index:3}.hx-f1{z-index:1}.hx-f2{z-index:2}
.hx-cover{width:54px;height:70px;object-fit:cover;border-radius:5px;background:#fff;box-shadow:0 4px 10px rgba(21,35,60,.22),0 0 0 1px rgba(21,35,60,.08)}
.hx-prek .hx-f1{right:44px;top:8px;transform:rotate(-9deg)}
.hx-prek .hx-f0{right:4px;top:4px;transform:rotate(7deg)}
.hx-store .hx-cover{width:50px;height:65px}
.hx-store .hx-f1{right:70px;top:12px;transform:rotate(-12deg)}
.hx-store .hx-f0{right:36px;top:4px;transform:rotate(-2deg)}
.hx-store .hx-f2{right:2px;top:12px;transform:rotate(10deg)}
.hx-dev{right:0;top:0;width:112px;height:auto}
.hx-card{width:44px;height:56px;filter:drop-shadow(0 3px 5px rgba(21,35,60,.22))}
.hx-les .hx-f1{right:94px;top:22px;transform:rotate(-10deg)}
.hx-les .hx-f2{right:66px;top:26px;transform:rotate(4deg);z-index:4}
.hx-gi{width:50px;height:50px;border-radius:13px;box-shadow:0 4px 10px rgba(21,35,60,.25)}
.hx-games .hx-f1{right:78px;top:18px;transform:rotate(-10deg)}
.hx-games .hx-f0{right:39px;top:4px}
.hx-games .hx-f2{right:0;top:18px;transform:rotate(10deg)}
.hx-bub{padding:5px 10px;border-radius:14px;border:2px solid #15233c;font:800 13px/1.15 var(--display);color:#15233c;white-space:nowrap;box-shadow:0 2px 0 #15233c}
.hx-bub::after{content:"";position:absolute;bottom:-7px;width:10px;height:10px;background:inherit;border:2px solid #15233c;border-top:0;border-left:0;transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 3px 0}
.hx-lang .hx-f0{right:56px;top:2px;background:#fff;transform:rotate(-4deg)}
.hx-lang .hx-f0::after{left:14px}
.hx-lang .hx-f1{right:2px;top:28px;background:#ffd23f;transform:rotate(4deg)}
.hx-lang .hx-f1::after{right:14px;transform:rotate(45deg)}
.hx-lang .hx-f2{right:66px;top:47px;background:#9fe0cf;transform:rotate(-2deg)}
.hx-lang .hx-f2::after{left:20px}
.hx-post{width:70px;height:53px;border-radius:6px;background:#fff;box-shadow:0 4px 10px rgba(21,35,60,.22),0 0 0 1px rgba(21,35,60,.08)}
.hx-hub .hx-f1{right:66px;top:4px;transform:rotate(-8deg)}
.hx-hub .hx-f2{right:0;top:8px;transform:rotate(7deg)}
.hx-hub .hx-f0{right:31px;top:28px;transform:rotate(-1deg)}
.hx-globe{right:34px;top:6px;width:66px;height:66px}
.hx-flag{width:36px;height:25px;object-fit:cover;border-radius:3px;border:2px solid #fff;box-shadow:0 3px 8px rgba(21,35,60,.25)}
.hx-geo .hx-f1{right:86px;top:44px;transform:rotate(-9deg);z-index:4}
.hx-geo .hx-f2{right:4px;top:10px;transform:rotate(8deg);z-index:4}
.hx-bill{right:58px;top:8px;width:62px;height:34px;transform:rotate(-12deg)}
.hx-piggy{right:22px;top:26px;width:64px;height:52px}
.hx-coins{right:0;top:4px;width:36px;height:40px}
@media (min-width:640px){
  .hx-art{right:14px;top:12px;width:210px;height:102px}
  .hx-cover{width:72px;height:94px;border-radius:6px}
  .hx-prek .hx-f1{right:76px;top:8px}
  .hx-prek .hx-f0{right:6px;top:2px}
  .hx-store .hx-cover{width:68px;height:88px}
  .hx-store .hx-f1{right:96px;top:10px}
  .hx-store .hx-f0{right:50px;top:2px}
  .hx-store .hx-f2{right:4px;top:10px}
  .hx-dev{width:160px}
  .hx-card{width:58px;height:74px}
  .hx-les .hx-f1{right:134px;top:18px}
  .hx-les .hx-f2{right:98px;top:24px}
  .hx-gi{width:66px;height:66px;border-radius:16px}
  .hx-games .hx-f1{right:104px;top:20px}
  .hx-games .hx-f0{right:52px;top:4px}
  .hx-games .hx-f2{right:0;top:20px}
  .hx-bub{padding:6px 13px;font-size:17px;border-radius:16px}
  .hx-lang .hx-f0{right:84px;top:2px}
  .hx-lang .hx-f1{right:6px;top:34px}
  .hx-lang .hx-f2{right:96px;top:58px}
  .hx-post{width:100px;height:75px;border-radius:7px}
  .hx-hub .hx-f1{right:94px;top:2px}
  .hx-hub .hx-f2{right:0;top:6px}
  .hx-hub .hx-f0{right:46px;top:24px}
  .hx-globe{right:48px;top:4px;width:86px;height:86px}
  .hx-flag{width:46px;height:32px}
  .hx-geo .hx-f1{right:116px;top:54px}
  .hx-geo .hx-f2{right:6px;top:12px}
  .hx-bill{right:84px;top:8px;width:82px;height:45px}
  .hx-piggy{right:34px;top:28px;width:84px;height:68px}
  .hx-coins{right:0;top:4px;width:48px;height:53px}
}
@media (prefers-reduced-motion:no-preference){
  .hx-art>*{transition:transform .2s}
  .hx-tile:hover .hx-art>.hx-f1{translate:-3px -2px}
  .hx-tile:hover .hx-art>.hx-f2{translate:3px -2px}
}

/* v153: PE and Earth & Space tiles (wide on a computer so the grid stays even: 8 tiles + 2 wide tiles) */
.hx-tile.hx-pe{background:#e6f5df}.hx-tile.hx-space{background:#ebe7fb}
.hx-ball,.hx-watch,.hx-cone,.hx-planet,.hx-moon,.hx-star{filter:drop-shadow(0 3px 5px rgba(21,35,60,.18))}
.hx-pe .hx-f1{right:88px;top:30px;transform:rotate(-12deg)}.hx-pe .hx-f0{right:34px;top:2px;transform:rotate(6deg)}.hx-pe .hx-f2{right:2px;top:36px;transform:rotate(8deg)}
.hx-space .hx-f0{right:26px;top:10px}.hx-space .hx-f1{right:104px;top:40px}.hx-space .hx-f2{right:6px;top:2px}
@media (min-width:960px){.hx-tile.hx-pe,.hx-tile.hx-space{grid-column:span 2}}