/* 4ab.in — ONE FEELING (3.1). The home page and every category page wear this one stylesheet:
   /  /chemistry/ /education/ /spiritual/ /life/ /ventures/ /aniket-bhardwaj/ /ecosystem/ /tools/ /ai/ /projects/
   Owner, 30 Sep 2026: "keep all categories same design … sparkling website with meaning structure … full website in one feeling".

   The structure every page follows, top to bottom:
     crumb → hero (where am I, what is here) → cards (what can I open) → categories strip (where else can I go)
   Colour is the only thing that changes between categories: the group class (k1…k8, hues defined in
   hub-shell.css) sets --accent / --accent-ink / --wash and everything below reads those three.
   Motion is decoration only and stops under prefers-reduced-motion. */

/* 2026-10-02 (Fable, CLS): the browser's default 8px body margin showed at first paint and only hub-shell's
   body.hs-boxed{margin:0 !important} removed it on boot - the body node jumped 8px (+0.006 CLS on every page
   wearing this sheet). The final layout is margin 0 either way; set it here so it is 0 from the first paint. */
body{margin:0}
/* 2026-10-02 (Fable, CLS): metric-matched stand-ins for Roboto and Poppins. While the Google fonts are still
   downloading the browser draws the page in a local face; a wider local face wraps lines that the real font
   does not, so pills, chips and ledes jump when the swap happens. Each stand-in is a local font scaled with
   size-adjust so its text takes the same width as the real font (ratios measured in headless Chromium here:
   Roboto = 1.004x Arial/Helvetica/Nimbus, 0.946x Noto Sans, 0.881x DejaVu Sans; Poppins Bold = 1.07x Arial
   Bold, 1.02x Noto Sans Bold, 0.893x DejaVu Sans Bold; Poppins Regular = 1.14x / 1.07x / 1.00x), with
   ascent/descent overrides so the line box is the same height too (Roboto 92.77%/24.41%/0, Poppins 105%/35%/10%,
   divided by the size-adjust). A family whose local() font is not installed is skipped, so the stack falls
   through to the next one; Android has Roboto itself, which the first face picks up unchanged. */
@font-face{font-family:"Roboto FB";src:local("Roboto"),local("Roboto-Regular");font-weight:100 900;ascent-override:92.77%;descent-override:24.41%;line-gap-override:0%}
@font-face{font-family:"Roboto FB A";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");font-weight:100 900;size-adjust:100.4%;ascent-override:92.4%;descent-override:24.3%;line-gap-override:0%}
@font-face{font-family:"Roboto FB N";src:local("Noto Sans"),local("NotoSans-Regular"),local("Droid Sans");font-weight:100 900;size-adjust:94.6%;ascent-override:98.1%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:"Roboto FB D";src:local("DejaVu Sans"),local("DejaVuSans");font-weight:100 900;size-adjust:88.1%;ascent-override:105.3%;descent-override:27.7%;line-gap-override:0%}
@font-face{font-family:"Poppins FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");font-weight:700 900;size-adjust:107%;ascent-override:98.1%;descent-override:32.7%;line-gap-override:9.3%}
@font-face{font-family:"Poppins FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");font-weight:600 699;size-adjust:120%;ascent-override:87.5%;descent-override:29.2%;line-gap-override:8.3%}
@font-face{font-family:"Poppins FB";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");font-weight:100 599;size-adjust:114%;ascent-override:92.1%;descent-override:30.7%;line-gap-override:8.8%}
@font-face{font-family:"Poppins FB N";src:local("Noto Sans Bold"),local("NotoSans-Bold"),local("Droid Sans Bold");font-weight:700 900;size-adjust:102%;ascent-override:102.9%;descent-override:34.3%;line-gap-override:9.8%}
@font-face{font-family:"Poppins FB N";src:local("Noto Sans Bold"),local("NotoSans-Bold"),local("Droid Sans Bold");font-weight:600 699;size-adjust:117%;ascent-override:89.7%;descent-override:29.9%;line-gap-override:8.5%}
@font-face{font-family:"Poppins FB N";src:local("Noto Sans"),local("NotoSans-Regular"),local("Droid Sans");font-weight:100 599;size-adjust:107.4%;ascent-override:97.8%;descent-override:32.6%;line-gap-override:9.3%}
@font-face{font-family:"Poppins FB D";src:local("DejaVu Sans Bold"),local("DejaVuSans-Bold");font-weight:700 900;size-adjust:89.3%;ascent-override:117.6%;descent-override:39.2%;line-gap-override:11.2%}
@font-face{font-family:"Poppins FB D";src:local("DejaVu Sans Bold"),local("DejaVuSans-Bold");font-weight:600 699;size-adjust:100%;ascent-override:105%;descent-override:35%;line-gap-override:10%}
@font-face{font-family:"Poppins FB D";src:local("DejaVu Sans"),local("DejaVuSans");font-weight:100 599;size-adjust:100%;ascent-override:105%;descent-override:35%;line-gap-override:10%}
.hubwrap{--accent:var(--blue,#0862F9);--accent-ink:var(--blue-ink,#0A50C7);--wash:#E6F0FF}
.hubwrap.k1,.hubcard.k1,.hubcat.k1,.hubtop a.k1{--accent:var(--c1,#F59E0B);--accent-ink:var(--n1,#B45309);--wash:var(--l1,#FEF3C7)}
.hubwrap.k2,.hubcard.k2,.hubcat.k2,.hubtop a.k2{--accent:var(--c2,#0862F9);--accent-ink:var(--n2,#0A50C7);--wash:var(--l2,#DCEBFF)}
.hubwrap.k3,.hubcard.k3,.hubcat.k3,.hubtop a.k3{--accent:var(--c3,#10B981);--accent-ink:var(--n3,#15803D);--wash:var(--l3,#D1FAE5)}
.hubwrap.k4,.hubcard.k4,.hubcat.k4,.hubtop a.k4{--accent:var(--c4,#8B5CF6);--accent-ink:var(--n4,#6D28D9);--wash:var(--l4,#EDE9FE)}
.hubwrap.k5,.hubcard.k5,.hubcat.k5,.hubtop a.k5{--accent:var(--c5,#0D9488);--accent-ink:var(--n5,#0F766E);--wash:var(--l5,#CCFBF1)}
.hubwrap.k6,.hubcard.k6,.hubcat.k6,.hubtop a.k6{--accent:var(--c6,#EC4899);--accent-ink:var(--n6,#BE185D);--wash:var(--l6,#FCE7F3)}
.hubwrap.k7,.hubcard.k7,.hubcat.k7,.hubtop a.k7{--accent:var(--c7,#F97316);--accent-ink:var(--n7,#C2410C);--wash:var(--l7,#FFEDD5)}
.hubwrap.k8,.hubcard.k8,.hubcat.k8,.hubtop a.k8{--accent:var(--c8,#06B6D4);--accent-ink:var(--n8,#0E7490);--wash:var(--l8,#CFFAFE)}

.hubwrap{--ink:#0F2039;--body:#3E5068;--soft:#5B6B82;--line:#E3E9F3;--deep:#0B1B3A;
  --disp:var(--font-display,"Poppins","Poppins FB","Poppins FB N","Poppins FB D",system-ui,sans-serif);--ui:var(--font-ui,"Roboto","Roboto FB","Roboto FB A","Roboto FB N","Roboto FB D",system-ui,sans-serif);
  max-width:1160px;margin:0 auto;padding:18px 18px 64px;font-family:var(--ui);color:var(--ink)}
.hubwrap *{box-sizing:border-box}
.hubwrap svg{width:22px;height:22px;display:block}

.hubcrumb{font-size:13px;color:#5F6F87;margin:0 0 12px}
.hubcrumb a{color:inherit;text-decoration:none}.hubcrumb a:hover{color:var(--accent-ink);text-decoration:underline}

/* ---------- hero: a deep field in the category's hue, with a slow sparkle ---------- */
.hubhero{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:44px 40px 38px;margin:0 0 30px;color:#fff;
  background:#0F2A5C;
  background:
    radial-gradient(58% 90% at 90% 4%,color-mix(in srgb,var(--accent) 72%,transparent) 0,transparent 62%),
    radial-gradient(46% 80% at 4% 104%,color-mix(in srgb,var(--accent-ink) 80%,transparent) 0,transparent 64%),
    linear-gradient(135deg,#0B1B3A 0%,#10295A 52%,color-mix(in srgb,var(--accent-ink) 58%,#0B1B3A) 100%);
  box-shadow:0 34px 60px -38px color-mix(in srgb,var(--accent-ink) 75%,#000);
  animation:hubin .7s cubic-bezier(.2,.7,.2,1) both}
.hubhero::before,.hubhero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;animation:hubtw 5s ease-in-out infinite}
.hubhero::before{background-image:
  radial-gradient(circle 1.6px at 9% 18%,#fff 98%,transparent),radial-gradient(circle 1.2px at 23% 72%,#fff 98%,transparent),
  radial-gradient(circle 1.8px at 38% 12%,#fff 98%,transparent),radial-gradient(circle 1.1px at 52% 84%,#fff 98%,transparent),
  radial-gradient(circle 1.5px at 66% 28%,#fff 98%,transparent),radial-gradient(circle 1.3px at 81% 66%,#fff 98%,transparent),
  radial-gradient(circle 1.9px at 94% 38%,#fff 98%,transparent)}
.hubhero::after{animation-delay:-2.5s;background-image:
  radial-gradient(circle 1.3px at 15% 48%,#fff 98%,transparent),radial-gradient(circle 1.7px at 30% 30%,#fff 98%,transparent),
  radial-gradient(circle 1.1px at 45% 58%,#fff 98%,transparent),radial-gradient(circle 1.6px at 59% 10%,#fff 98%,transparent),
  radial-gradient(circle 1.2px at 73% 80%,#fff 98%,transparent),radial-gradient(circle 1.8px at 87% 16%,#fff 98%,transparent),
  radial-gradient(circle 1.2px at 97% 88%,#fff 98%,transparent)}
@keyframes hubtw{0%,100%{opacity:.18}50%{opacity:.9}}
@keyframes hubin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hubshine{to{background-position:-200% 0}}
@keyframes hubfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hubhero .eyebrow{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 13px;margin:0 0 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hubhero .eyebrow::before{content:"✦";font-size:12px;color:#FFD66B}
.hubwrap h1{font:700 clamp(28px,4.8vw,44px)/1.12 var(--disp);letter-spacing:-.015em;margin:0 0 12px;color:#fff;text-wrap:balance}
.hubwrap h1 em{font-style:normal;background:linear-gradient(90deg,#FFD66B,#FF9EC7,#A9C7FF,#FFD66B);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hubshine 8s linear infinite}
.hubwrap .lede{font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);margin:0;max-width:62ch}
.hubchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hubchips span,.hubhero .count{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:rgba(255,255,255,.9);background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 12px;margin-top:0}
.hubhero .count{margin-top:20px}
.hubchips b{font:700 15px var(--disp);color:#fff}

.hubcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hubbtn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--disp);padding:14px 22px;border-radius:999px;text-decoration:none;
  background:#fff;color:var(--deep);border:1px solid #fff;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.hubbtn:hover,.hubbtn:focus-visible{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}
.hubbtn.line{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34)}
.hubbtn.line:hover{background:rgba(255,255,255,.18)}

/* ---------- section heading: a label, a title, one line of meaning ---------- */
.hubsec{margin:40px 0 16px}
.hubsec small{display:block;font:600 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.hubsec h2,.hubwrap h2.sec{font:700 clamp(21px,3vw,27px)/1.2 var(--disp);letter-spacing:-.01em;margin:0;color:var(--ink)}
.hubsec p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--soft);max-width:64ch}
.hubwrap h2.sec{margin:38px 0 14px;display:flex;align-items:center;gap:10px}
.hubwrap h2.sec::before{content:"";width:6px;height:24px;border-radius:4px;background:linear-gradient(180deg,var(--accent),var(--accent-ink))}
.hubwrap h2.sec a{color:inherit;text-decoration:none}.hubwrap h2.sec a:hover{color:var(--accent-ink)}

/* ---------- cards ---------- */
.hubgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.hubcard{position:relative;display:flex;flex-direction:column;gap:9px;padding:20px 20px 50px;background:#fff;border:1px solid var(--line);border-radius:20px;
  text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(15,32,57,.04),0 12px 28px -20px rgba(15,32,57,.3);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hubcard .ico,.hubcat .ico,.hubwhy .ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--wash);color:var(--accent-ink);margin-bottom:4px}
.hubcard:not(:has(.ico))::before{content:"";width:38px;height:5px;border-radius:4px;background:var(--accent);margin-bottom:6px}
.hubcard::after{content:"Open →";position:absolute;left:20px;bottom:18px;font:600 13px var(--disp);color:var(--accent-ink);transition:letter-spacing .18s ease}
.hubcard:hover,.hubcard:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,#fff);
  box-shadow:0 2px 4px rgba(15,32,57,.05),0 26px 40px -22px color-mix(in srgb,var(--accent-ink) 60%,#0F2039)}
.hubcard:hover::after{letter-spacing:.03em}
.hubcard h2,.hubcard h3{font:600 17px/1.3 var(--disp);margin:0;color:var(--ink)}
.hubcard p{font-size:14px;line-height:1.55;color:var(--soft);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- the top menu: CATEGORIES ONLY (owner's 3.0 mockup: "Home -> explore all categories; Category -> focused
   menu only"). No product is linked from here; a product is reached through its category. ---------- */
.hubtop{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:0 0 16px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(15,32,57,.04),0 12px 28px -22px rgba(15,32,57,.3)}
.hubtop a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 8px;border-radius:14px;text-decoration:none;color:var(--ink);
  font:600 12px/1.2 var(--disp);text-align:center;transition:background .16s ease,transform .16s ease}
.hubtop a i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--wash);color:var(--accent-ink);transition:transform .16s ease}
.hubtop a svg{width:20px;height:20px}
.hubtop a:hover,.hubtop a:focus-visible{background:var(--wash)}.hubtop a:hover i{transform:translateY(-2px);background:#fff}
.hubtop a.on{background:var(--deep);color:#fff}.hubtop a.on i{background:linear-gradient(135deg,var(--accent),var(--accent-ink));color:#fff}
.hubback{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font:600 13px var(--disp);color:var(--soft);text-decoration:none}
.hubback:hover{color:var(--accent-ink)}
.hubhero .tagline{display:block;font:600 15px/1.3 var(--disp);letter-spacing:.02em;color:#FFD66B;margin:-4px 0 10px}

.hubwrap .more{margin:26px 0 0;padding:16px 18px;background:#fff;border:1px dashed #C9D6EA;border-radius:16px;font-size:14.5px;color:var(--body);line-height:1.6}
.hubwrap .more a{color:var(--accent-ink);font-weight:600}

/* ---------- the home page ---------- */
.hubhome .hubhero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:30px;align-items:center;padding:52px 44px 64px;margin-bottom:0}
.hubhome .hubhero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.04}
.hubhome .hubhero h1 em{display:block}
.hubhero .art{margin:0;animation:hubfloat 7s ease-in-out infinite}
.hubhero .art img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2)}
.hubfind{position:relative;z-index:2;max-width:760px;margin:-30px auto 0;padding:0 18px}
.hubfind input{width:100%;font:400 16px/1.2 var(--ui);padding:19px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 22px 44px -24px rgba(15,32,57,.5)}
.hubfind input:focus{outline:2px solid var(--accent);outline-offset:2px}
.hubfind .none{display:none;margin:12px 4px 0;font-size:14px;color:var(--soft);text-align:center}
.hubfind .none a{color:var(--accent-ink);font-weight:600}

.hubcats{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.hubcat{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,32,57,.04),0 12px 28px -20px rgba(15,32,57,.3);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hubcat::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.hubcat::after{content:"";position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;background:var(--wash);opacity:.7;z-index:0}
.hubcat>*{position:relative;z-index:1}
.hubcat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,#fff);box-shadow:0 2px 4px rgba(15,32,57,.05),0 26px 40px -22px color-mix(in srgb,var(--accent-ink) 60%,#0F2039)}
.hubcat__h{display:flex;align-items:center;gap:13px}
.hubcat .ico{margin:0;background:linear-gradient(135deg,var(--accent),var(--accent-ink));color:#fff;box-shadow:0 10px 18px -10px var(--accent-ink)}
.hubcat h3{font:700 19px/1.2 var(--disp);margin:0}
.hubcat h3 a{color:var(--ink);text-decoration:none}.hubcat h3 a:hover{color:var(--accent-ink)}
.hubcat h3 small{display:block;font:600 12px/1.2 var(--disp);letter-spacing:.03em;color:var(--accent-ink);margin-top:5px}
.hubcat p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.hubcat .chips{display:flex;flex-wrap:wrap;gap:7px}
.hubcat .chips a{background:var(--wash);border:1px solid transparent;border-radius:999px;padding:7px 12px;font-size:13.5px;line-height:1.2;color:var(--accent-ink);font-weight:500;text-decoration:none}
.hubcat .chips a:hover,.hubcat .chips a:focus-visible{border-color:var(--accent);background:#fff}
.hubcat .all{margin-top:auto;padding-top:6px;font:600 13.5px var(--disp);color:var(--accent-ink);text-decoration:none}
.hubcat .all:hover{text-decoration:underline}
.hubcard[hidden],.hubcat[hidden],.hubcat .chips a[hidden]{display:none}

.hubwhy{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hubwhy div{padding:22px;border-radius:20px;background:linear-gradient(180deg,#fff,#F6F9FE);border:1px solid var(--line)}
.hubwhy h3{font:600 17px/1.3 var(--disp);margin:0 0 6px}.hubwhy p{margin:0;font-size:14.5px;line-height:1.6;color:var(--soft)}

.hubband{position:relative;isolation:isolate;overflow:hidden;margin:44px 0 0;padding:34px 34px;border-radius:26px;color:#fff;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:#0F2A5C;background:radial-gradient(50% 120% at 100% 0,color-mix(in srgb,#8B5CF6 70%,transparent) 0,transparent 60%),radial-gradient(40% 120% at 0 100%,color-mix(in srgb,#0862F9 80%,transparent) 0,transparent 62%),linear-gradient(135deg,#0B1B3A,#10295A)}
.hubband h2{font:700 clamp(20px,3vw,26px)/1.2 var(--disp);margin:0 0 6px;color:#fff}.hubband p{margin:0;color:rgba(255,255,255,.84);font-size:15.5px;max-width:52ch}
.hubband .hubcta{margin:0}

/* cards rise into place as they scroll in — only where the browser can do it without script */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hubcard,.hubcat,.hubwhy div{animation:hubin linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}
@media (max-width:760px){
  .hubwrap{padding:12px 12px 48px}
  .hubhero{padding:28px 20px 26px;border-radius:22px;margin-bottom:22px}
  .hubhome .hubhero{grid-template-columns:minmax(0,1fr);padding:30px 20px 52px;gap:22px}
  .hubwrap .lede{font-size:15.5px}
  .hubgrid,.hubcats{grid-template-columns:minmax(0,1fr);gap:12px}
  .hubfind{padding:0 10px;margin-top:-28px}.hubfind input{padding:16px 18px}
  .hubbtn{padding:13px 18px;font-size:14px}
  .hubsec{margin:32px 0 14px}
  /* the top controls are gone (the bottom toolbar replaced them, 2026-10-11): no reserved slot */
  .hubtop{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px;border-radius:18px;margin:0 0 12px}
  .hubtop a{font-size:12px;padding:8px 2px 7px}.hubtop a i{width:36px;height:36px}
  /* inside a category the bar is one swipeable row, so the category itself starts on the first screen */
  .hubwrap:not(.hubhome) .hubtop{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hubwrap:not(.hubhome) .hubtop::-webkit-scrollbar{display:none}.hubwrap:not(.hubhome) .hubtop a{flex:0 0 72px}
  .hubband{padding:26px 20px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .hubhero,.hubhero::before,.hubhero::after,.hubhero .art,.hubwrap h1 em{animation:none}
  .hubhero::before,.hubhero::after{opacity:.5}
  .hubcard,.hubcat,.hubbtn,.hubtop a,.hubtop a i{transition:none}.hubcard:hover,.hubcat:hover,.hubbtn:hover,.hubtop a:hover i{transform:none}
}

/* ---------- pages that carry their own content or an embedded page (help, legal, blog, ABC Jobs, Dreamers Quiz) ---------- */
.hubpage{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 30px;font-size:15.5px;line-height:1.65;color:var(--body)}
.hubpage h1{color:var(--ink);font-size:clamp(24px,3.6vw,32px);margin:0 0 14px}
.hubpage h2{font:600 21px/1.25 var(--disp);color:var(--ink);margin:30px 0 10px}.hubpage h2:first-child{margin-top:0}
.hubpage h3{font:600 17px/1.3 var(--disp);color:var(--ink);margin:22px 0 8px}
.hubpage p{margin:0 0 14px}.hubpage a{color:var(--accent-ink);font-weight:500}
.hubpage nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.hubpage nav a{background:var(--wash);border-radius:999px;padding:7px 13px;font:600 13px var(--disp);text-decoration:none}
.hubpage section{padding:6px 0 4px;border-top:1px solid var(--line)}.hubpage section:first-of-type{border-top:0}
.hubpage ul,.hubpage ol{padding-left:22px;margin:0 0 14px}.hubpage li{margin:4px 0}
.hubpage img{max-width:100%;height:auto;border-radius:12px}
.hubframe{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 1px 2px rgba(15,32,57,.04),0 12px 28px -20px rgba(15,32,57,.3)}
.hubframe iframe{display:block;width:100%;height:calc(100vh - 230px);min-height:620px;border:0;border-radius:16px;background:#fff}
.hubframe__src{margin:8px 6px 2px;font-size:12.5px;color:var(--soft)}.hubframe__src a{color:var(--accent-ink)}
@media (max-width:760px){.hubpage{padding:20px 16px;border-radius:18px}.hubframe{padding:6px;border-radius:18px}.hubframe iframe{height:calc(100vh - 150px);min-height:560px;border-radius:14px}}
/* ---------- Great Education six-module shell (wf3-gedu, 2 Oct 2026; design: Fable) ----------
   One white block per module. The card is the link; the row of sub-links under it belongs to the SAME block
   (a hairline and a quieter field separate them), so nothing floats loose under the grid. The module number
   sits as a faint numeral in the corner; "Module n" is a small pill, the speciality a quiet label. */
.hubmods{gap:18px}
.hubmods .hubmod{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,32,57,.04),0 12px 28px -20px rgba(15,32,57,.3);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hubmods .hubmod::before{content:attr(data-n);position:absolute;right:18px;top:10px;z-index:0;pointer-events:none;
  font:800 60px/1 var(--disp);letter-spacing:-.05em;color:var(--wash)}
.hubmods .hubmod:hover,.hubmods .hubmod:focus-within{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,#fff);
  box-shadow:0 2px 4px rgba(15,32,57,.05),0 26px 40px -22px color-mix(in srgb,var(--accent-ink) 60%,#0F2039)}
.hubmods .hubmod>.hubcard{flex:1;position:relative;z-index:1;gap:10px;background:none;border:0;border-radius:0;box-shadow:none;padding:22px 22px 50px}
.hubmods .hubmod>.hubcard:hover,.hubmods .hubmod>.hubcard:focus-visible{transform:none;box-shadow:none;border-color:transparent}
.hubmods .hubcard::after{left:22px;bottom:18px}
.hubmods .hubcard .ico{margin-bottom:2px}
.hubcard .mod{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 12px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.hubcard .mod b{font-weight:700;letter-spacing:.05em;color:var(--accent-ink);background:var(--wash);border-radius:999px;padding:4px 9px}
.hubmod .modlinks{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:12px 18px 14px;
  border-top:1px solid var(--line);background:linear-gradient(180deg,#FBFCFE,#F5F8FD)}
.hubmod .modlinks:empty{display:none}
.hubmod .modlinks a{display:inline-flex;align-items:center;font:600 12px/1 var(--disp);padding:7px 11px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--accent-ink);text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.hubmod .modlinks a:hover,.hubmod .modlinks a:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .hubmods .hubmod{animation:hubin linear both;animation-timeline:view();animation-range:entry 0% entry 38%}.hubmods .hubcard{animation:none}}}
@media (max-width:760px){.hubmods{gap:12px}.hubmods .hubmod>.hubcard{padding:20px 18px 46px}.hubmods .hubcard::after{left:18px}
  .hubmod .modlinks{padding:10px 18px 12px}.hubmods .hubmod::before{font-size:50px;right:16px}}
@media (prefers-reduced-motion:reduce){.hubmods .hubmod{transition:none;animation:none}.hubmods .hubmod:hover{transform:none}}

/* 2026-10-11 (owner): on phones the category icon strip never shows Blog, Pricing or Help (the toolbar and drawer carry them).
   The home hero copy (.hubtop--hero) keeps its own tiles. */
@media (max-width:768px){.hubtop:not(.hubtop--hero) a[href="/blog/"],.hubtop:not(.hubtop--hero) a[href="/pricing/"],.hubtop:not(.hubtop--hero) a[href="/help/"]{display:none}}

/* 2026-10-11 (owner): phone category strip. Tiles snap to the centre, the current one is centred on load (hs-dock.js sets
   scrollLeft), and two-word labels break one word per line. */
@media (max-width:768px){
  .hubwrap:not(.hubhome) .hubtop{scroll-snap-type:x proximity;scroll-padding:0 12px}
  .hubwrap:not(.hubhome) .hubtop a{scroll-snap-align:center}
  .hubtop:not(.hubtop--hero) a span{display:block;width:min-content;max-width:100%;margin:0 auto;text-align:center}
}

/* 2026-10-11 (owner): phone spacing. The "Not sure where to start?" band keeps its two buttons in ONE row, and the
   empty bands between the band, the dashed note and the footer are tightened to 12-16px. */
@media (max-width:768px){
  .hubwrap{padding-bottom:12px}
  .hubband{margin-top:16px;padding:18px 16px}
  .hubband .hubcta{display:flex;flex-wrap:nowrap;gap:8px;margin-top:12px}
  .hubband .hubcta .hubbtn{flex:1 1 0;min-width:0;min-height:44px;box-sizing:border-box;padding:6px 8px;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .hubwrap .more{margin-top:14px;padding:12px 14px}
}

/* 2026-10-11 (owner): on phones the product/link cards sit two per row, compact, equal height per row. */
@media (max-width:768px){
  .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hubgrid .hubcard,.hubmods .hubmod>.hubcard{padding:12px 12px 36px;gap:6px;border-radius:16px}
  .hubgrid .hubcard{height:100%;box-sizing:border-box}
  .hubcard .ico{width:40px;height:40px;border-radius:12px;margin-bottom:2px}
  .hubcard h2,.hubcard h3{font:700 15px/1.25 var(--disp)}
  .hubcard p{font-size:12.5px;line-height:1.4;-webkit-line-clamp:2}
  .hubcard::after,.hubmods .hubcard::after{left:12px;bottom:12px;font-size:13px}
}

/* 2026-10-11 (owner): phone category cards - the product chips are justified edge to edge, equal 8px gaps. */
@media (max-width:768px){
  .hubcat .chips{gap:8px}
  .hubcat .chips a{flex:1 1 auto;min-width:84px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font-size:14px}
}

/* 2026-10-11 (owner): colourful cards everywhere. Every card is tinted with its category's hue (--accent from .kN on the card, the
   .hubwrap.kN page, or - on /ecosystem/ - the category heading above its grid), icon filled with the hue, 'Open ->' in the deep hue.
   On /ecosystem/ each category section is also set apart: coloured heading bar + name, a thin top rule and a faint tinted band. */
.hubcard{background:color-mix(in srgb,var(--accent,#0862F9) 7%,#fff);border-color:color-mix(in srgb,var(--accent,#0862F9) 24%,#fff)}
.hubcard .ico{background:linear-gradient(135deg,var(--accent,#0862F9),var(--accent-ink,#0A50C7));color:#fff}
.hubcard::after{color:var(--accent-ink,#0A50C7)}
.hubwrap h2.sec:has(a[href="/chemistry/"]),.hubwrap h2.sec:has(a[href="/chemistry/"]) + .hubgrid{--accent:var(--c2,#0862F9);--accent-ink:var(--n2,#0A50C7);--wash:var(--l2,#DCEBFF)}
.hubwrap h2.sec:has(a[href="/education/"]),.hubwrap h2.sec:has(a[href="/education/"]) + .hubgrid{--accent:var(--c1,#F59E0B);--accent-ink:var(--n1,#B45309);--wash:var(--l1,#FEF3C7)}
.hubwrap h2.sec:has(a[href="/directory/"]),.hubwrap h2.sec:has(a[href="/directory/"]) + .hubgrid{--accent:var(--c3,#10B981);--accent-ink:var(--n3,#15803D);--wash:var(--l3,#D1FAE5)}
.hubwrap h2.sec:has(a[href="/spiritual/"]),.hubwrap h2.sec:has(a[href="/spiritual/"]) + .hubgrid{--accent:var(--c4,#8B5CF6);--accent-ink:var(--n4,#6D28D9);--wash:var(--l4,#EDE9FE)}
.hubwrap h2.sec:has(a[href="/life/"]),.hubwrap h2.sec:has(a[href="/life/"]) + .hubgrid{--accent:var(--c6,#EC4899);--accent-ink:var(--n6,#BE185D);--wash:var(--l6,#FCE7F3)}
.hubwrap h2.sec:has(a[href="/ventures/"]),.hubwrap h2.sec:has(a[href="/ventures/"]) + .hubgrid{--accent:var(--c5,#0D9488);--accent-ink:var(--n5,#0F766E);--wash:var(--l5,#CCFBF1)}
.hubwrap h2.sec:has(a[href="/aniket-bhardwaj/"]),.hubwrap h2.sec:has(a[href="/aniket-bhardwaj/"]) + .hubgrid{--accent:var(--c8,#06B6D4);--accent-ink:var(--n8,#0E7490);--wash:var(--l8,#CFFAFE)}
.hubwrap h2.sec:has(a[href^="/"]) a{color:var(--accent-ink,var(--ink))}
.hubwrap h2.sec:has(a[href^="/"]) + .hubgrid{padding:14px;border-radius:22px;border-top:3px solid var(--accent,#0862F9);background:color-mix(in srgb,var(--accent,#0862F9) 5%,transparent)}
@media (max-width:768px){.hubwrap h2.sec:has(a[href^="/"]) + .hubgrid{padding:10px;border-radius:18px}}

/* 2026-10-11 (owner): "Great X" tile labels on two lines; every desktop tile reserves two lines so the bar keeps one height. */
@media (min-width:769px){
  .hubtop a span{display:flex;align-items:center;justify-content:center;min-height:2.4em;text-align:center}
  .hubtop a span.g2{display:block;line-height:1.2}
}

/* 2026-10-11: tool-tile image (16:9, never cropped, space reserved by width/height so no layout shift) */
.hubcard .cardimg{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:12px;background:var(--wash);margin:0 0 4px}