/* == huisstijl-paginas: additions ==
   Extra building blocks for the subpages (About, Tutorials, Recommended, Blog, Knowledge).
   Only existing tokens and existing values from the homepage stylesheet are used:
   colors, radii (999px / 28-40px), shadows, type sizes and easing are copied from homepage rules.
   Each block says why it was needed. The homepage itself does not use any of these classes. */

/* list placeholders: server-rendered lists sit in a transparent wrapper */
fh-list{display:contents}

/* active menu item: the homepage has no "current page" state; same look as the nav hover */
.nav-links a[aria-current="page"]{background:#fff;color:var(--fh-blue)}
.mobile-menu a.ml[aria-current="page"] .mla{background:var(--fh-orange);border-color:var(--fh-orange)}

/* ---------- page hero: compact hero for subpages (homepage hero is never reused) ----------
   background, glows and sub text from .hero, the H1 uses the .cta h2 display type */
.phero{position:relative;background:var(--fh-blue);color:#fff;overflow:hidden;padding:clamp(150px,17vw,220px) 0 clamp(80px,10vw,140px)}
.phero .glow.a{right:-20vw;top:-35%}
.phero .glow.b{left:-12vw;bottom:-45%}
.phero .wrap{position:relative;z-index:2}
.phero .lead-in{color:#FFB59D}
.phero h1{font-size:clamp(44px,8vw,128px);line-height:.95;letter-spacing:-.035em;font-weight:900;text-transform:uppercase}
.phero h1 em{font-style:normal;font-weight:inherit;color:#F5ECFF}
.phero-sub{margin-top:30px;max-width:620px;font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:#E9ECFF}
.phero-sub strong{color:#fff}
.phero .actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
.phero .bigword{position:absolute;left:0;right:0;bottom:-.1em;font-size:clamp(40px,7vw,140px);font-weight:900;letter-spacing:-.05em;line-height:1;color:rgba(255,255,255,.05);white-space:nowrap;text-align:center;pointer-events:none}
.phero.center{text-align:center}
.phero.center .wrap{display:flex;flex-direction:column;align-items:center}
.phero.center .phero-sub{margin-inline:auto}
.phero.center .actions{justify-content:center}
.phero.center .lead-in{justify-content:center}
.phero-row{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:end}
.phero .hero-badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
.phero .badge-float{position:static}
.phero .faq-search{margin-top:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.phero-panel{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.phero-panel .faq-search{align-self:stretch}
.phero-panel .chips2{margin-bottom:0}
.phero-panel p{font-size:18px;font-weight:600;color:#C9B8FF}
@media(max-width:960px){.phero-row{grid-template-columns:1fr;align-items:start}}
@media(max-width:640px){.phero{padding-top:120px}.phero .actions .btn{width:100%;justify-content:space-between}}

/* ---------- section heads on light backgrounds: .picks-head layout with light colors ---------- */
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.sec-head p:not(.lead-in){font-size:clamp(18px,1.3vw,21px);color:#2A2F55;line-height:1.6}
.on-dark .sec-head .h2,.sec-head.dark .h2{color:#fff}
.sec-head.dark p:not(.lead-in){color:#D4D7F2}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:16px}}

/* ---------- tutorial library: the .tcard from the homepage rail, laid out as a grid ---------- */
.lib{background:var(--fh-navy);color:#fff;padding:clamp(80px,10vw,150px) 0;position:relative;overflow:hidden}
.lib::before{content:"";position:absolute;right:-20%;top:-10%;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(circle,rgba(108,79,230,.5),transparent 70%);filter:blur(60px);pointer-events:none}
.lib .wrap{position:relative}
.lib-topics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,44px)}
.lib-topics .chip b{font-weight:800;color:#FFB59D;margin-left:4px}
.lib-topics .chip.active b{color:var(--fh-orange)}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.lib-grid .tcard{width:auto;display:flex;flex-direction:column}
.lib-grid .tcard .body{flex:1;display:flex;flex-direction:column}
.lib-grid .tcard .meta{margin-top:auto;padding-top:22px}
.lib-grid .tcard h3{font-size:clamp(22px,1.6vw,26px)}
.lib-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin-top:clamp(36px,4vw,56px)}
.lib-count{font-size:18px;font-weight:700;color:#C8CCF0}
.lib-count.dark{color:#3B4166}
.lib-empty{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:30px;font-size:19px;color:#D4D7F2}
.is-off{display:none!important}
@media(max-width:1080px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.lib-grid{grid-template-columns:minmax(0,1fr)}.lib-more .btn{width:100%;justify-content:space-between}}

/* ---------- topic tiles: white tiles on cream, built from .acc-item and .stat ---------- */
.tiles{background:var(--fh-cream);padding:clamp(80px,10vw,150px) 0}
.topic-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ttile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:200px;padding:26px 26px 28px;border-radius:28px;background:#fff;border:2px solid transparent;transition:border-color .4s,box-shadow .5s var(--fh-ease),transform .5s var(--fh-ease)}
.ttile:hover{border-color:var(--fh-blue);box-shadow:0 40px 60px -40px rgba(27,44,163,.5);transform:translateY(-6px)}
.ttile .tt-n{font-size:24px;font-weight:700;color:var(--fh-orange);margin-bottom:auto}
.ttile b{font-size:clamp(22px,1.8vw,26px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-top:28px}
.ttile small{font-size:17px;font-weight:600;color:#3B4166}
.ttile .tt-ic{position:absolute;right:20px;top:20px;width:48px;height:48px;border-radius:50%;background:var(--fh-cream);display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--fh-ease)}
.ttile .tt-ic svg{width:18px;height:18px}
.ttile:hover .tt-ic{background:var(--fh-orange);color:#fff;transform:rotate(-45deg)}
@media(max-width:1080px){.topic-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.topic-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.topic-tiles{grid-template-columns:minmax(0,1fr)}.ttile{min-height:0}}

/* ---------- light content cards (recommended, blog): .tcard structure on white ---------- */
.lsec{background:var(--fh-cream);padding:clamp(80px,10vw,150px) 0;position:relative;overflow:hidden}
.lsec::before{content:"";position:absolute;right:-10%;top:-10%;width:40vw;height:40vw;max-width:600px;max-height:600px;border-radius:50%;background:radial-gradient(circle,rgba(108,79,230,.16),transparent 70%);pointer-events:none}
.lsec .wrap{position:relative}
.filterbar{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-bottom:clamp(28px,3vw,44px)}
.filterbar .topics,.filterbar .faq-search{margin-top:0}
.filterbar .faq-search{flex:0 1 420px;min-width:min(100%,320px)}
.topics .topic b{color:var(--fh-orange);margin-left:4px}
.topics .topic.on b{color:#FFB59D}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.lcard{display:flex;flex-direction:column;background:#fff;border-radius:32px;overflow:hidden;border:2px solid transparent;transition:transform .6s var(--fh-ease),box-shadow .5s var(--fh-ease),border-color .4s}
.lcard:hover{transform:translateY(-10px);box-shadow:0 40px 60px -40px rgba(27,44,163,.5);border-color:var(--fh-blue)}
.lthumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#fff}
.lthumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--fh-ease)}
.lcard:hover .lthumb img{transform:scale(1.06)}
.lbody{flex:1;display:flex;flex-direction:column;gap:12px;padding:24px 28px 30px}
.lbody .btn-line{margin-top:auto;align-self:flex-start}
.lcard h3{font-size:clamp(22px,1.6vw,26px);line-height:1.15}
.lcard h3 a,.feat h2 a{background-image:linear-gradient(var(--fh-orange),var(--fh-orange));background-repeat:no-repeat;background-size:0% 3px;background-position:0 100%;transition:background-size .5s var(--fh-ease),color .3s}
.lcard h3 a:hover,.lcard h3 a:focus-visible,.feat h2 a:hover,.feat h2 a:focus-visible{background-size:100% 3px}
.lcard p{font-size:17px;color:#2A2F55;line-height:1.55}
.lmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:17px;font-weight:600;color:#6A6F99}
.ltag{font-size:17px;font-weight:700;line-height:1.2;color:#fff;background:var(--fh-blue);border-radius:999px;padding:7px 14px}
.ltag.soft{background:var(--fh-cream);color:var(--fh-blue)}
.lnote{margin-top:clamp(28px,3vw,40px);font-size:17px;font-weight:600;color:#3B4166}
.lnote a{color:var(--fh-blue);font-weight:700;text-decoration:underline}
@media(max-width:1080px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.lgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- featured article: two columns like .slide, on white ---------- */
.feat{display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:40px;overflow:hidden;box-shadow:0 60px 100px -60px rgba(11,18,64,.6);margin-bottom:clamp(48px,6vw,90px)}
.feat-img{display:block;min-height:100%;overflow:hidden;background:var(--fh-blue)}
.feat-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--fh-ease)}
.feat:hover .feat-img img{transform:scale(1.04)}
.feat-body{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(28px,4vw,60px)}
.feat h2{font-size:clamp(30px,3.2vw,52px);line-height:1.05}
.feat p{font-size:clamp(18px,1.35vw,21px);color:#2A2F55;line-height:1.6}
.feat .btn{margin-top:10px}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat-img{aspect-ratio:16/9}}

/* ---------- numbered steps: .beat numbers and type, laid out in three columns ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.step{border-top:2px solid rgba(255,255,255,.18);padding-top:28px}
.step .step-n{display:block;font-size:clamp(56px,6vw,92px);font-weight:900;letter-spacing:-.04em;line-height:.95;color:var(--fh-orange);margin-bottom:22px}
.step h3{font-size:clamp(24px,2.2vw,34px);line-height:1.15;margin-bottom:12px;letter-spacing:-.02em}
.step p{font-size:clamp(18px,1.3vw,21px);line-height:1.6;color:#D4D7F2}
.steps.light .step{border-top-color:#DCD5EE}
.steps.light .step p{color:#2A2F55}
.steps.light .step .step-n{color:var(--fh-blue)}
@media(max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- bio: portrait frame + beats (homepage story layout without the scroll scene) ---------- */
.bio{background:var(--fh-cream);padding:clamp(80px,10vw,150px) 0}
.bio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,110px);align-items:start}
.bio-visual{position:sticky;top:clamp(90px,12vh,120px)}
.zoom-frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;background:#fff}
.bio .yearstamp{z-index:2}
.bio .beat{opacity:.45;cursor:pointer;outline:none}
.bio .beat.on,.bio .beat:focus-visible{opacity:1}
.bio .beat:focus-visible h3{color:var(--fh-blue)}
.bio .beats{margin-top:clamp(30px,4vw,56px)}
@media(max-width:960px){.bio-grid{grid-template-columns:1fr}.bio-visual{position:relative;top:0;max-width:520px}}

/* ---------- split section: heading left, text and tags right ---------- */
.split{background:var(--fh-cream);padding:clamp(80px,10vw,150px) 0}
.split-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,100px);align-items:start}
.split-grid p.big{color:#2A2F55}
.split .topics{margin-top:28px}
.split .topics .topic{cursor:default}
.split .btn{margin-top:36px}
@media(max-width:900px){.split-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- knowledge index: FAQ layout with letter groups ---------- */
.kb .faq-side .h2{margin-bottom:0}
.kb-acc{gap:12px}
.kb-group{display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px}
.kb-group + .kb-group{margin-top:clamp(28px,4vw,48px)}
.kb-letter{display:flex;align-items:baseline;gap:14px;font-size:clamp(40px,5.4vw,76px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--fh-blue);margin-bottom:6px}
.kb-letter small{font-size:17px;font-weight:700;letter-spacing:0;color:#6A6F99}
.kb-letters{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.kb-letters .topic,.kb-letters .chip{display:inline-grid;place-items:center;width:48px;padding:0}
.kb-letters .off{opacity:.35;pointer-events:none}
.phero .kb-letters{margin-top:40px;max-width:900px}
.kb-group.is-empty{display:none}
@media(max-width:960px){.kb-letters .topic,.kb-letters .chip{width:44px}}
.bio .zoom-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(11,18,64,.85));z-index:1;pointer-events:none}
/* spacing for action rows and section footers, same values as .story-copy .actions */
.bio .story-actions{margin-top:clamp(36px,5vw,60px);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.picks-foot{margin-top:clamp(36px,4vw,56px)}
.picks-steps{margin-top:clamp(56px,7vw,100px)}
.phero-panel .chips2 a{color:inherit}
/* mobile: keep the portrait in its 4:5 frame, and let topic filters scroll sideways instead of stacking */
@media(max-width:960px){.bio .zoom-frame{aspect-ratio:4/5}}
@media(max-width:640px){
  .lib-topics,.filterbar .topics{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding-inline:18px;padding-bottom:4px}
  .lib-topics::-webkit-scrollbar,.filterbar .topics::-webkit-scrollbar{display:none}
  .lib-topics .chip,.filterbar .topic{flex:none;white-space:nowrap}
}
/* video length on tutorial thumbnails (data from the tutorial's duration field) */
.tcard .tdur{position:absolute;right:14px;bottom:14px;z-index:2;font-size:17px;font-weight:700;line-height:1;color:#fff;background:rgba(11,18,64,.85);border-radius:999px;padding:8px 12px;pointer-events:none}

/* ===== improvement pass: About ===== */
/* rotating role line under the hero title (same flip motion as the homepage hero word) */
.role{display:inline-flex;justify-content:center;margin-top:24px;padding:12px 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:clamp(19px,1.6vw,24px);font-weight:700;line-height:1.2;color:#fff;overflow:hidden}
.rot{display:inline-grid;perspective:600px}
.rot em{grid-area:1/1;font-style:normal;white-space:nowrap;transition:transform .7s var(--fh-ease),opacity .5s var(--fh-ease)}
.rot em:not(.on){opacity:0;transform:translateY(70%) rotateX(-50deg)}
.rot em.off{opacity:0;transform:translateY(-70%) rotateX(50deg)}
@media(max-width:640px){.role{padding:10px 18px}.rot em{white-space:normal}}

/* bio: the year on the portrait follows the story you read */
.bio .beat{transition:opacity .5s var(--fh-ease)}
.bio .yearstamp .d span{transition:none}

/* numbers: bento layout */
.bento{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.bento .stat{min-height:250px;gap:18px}
.bento .big{grid-row:span 2;min-height:524px}
.bento .stat > *{position:relative;z-index:1}
.big-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stat .yt-big{width:76px;height:76px;border-radius:24px;background:#fff;color:var(--fh-orange);display:grid;place-items:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transition:transform .6s var(--fh-ease)}
.stat .yt-big svg{width:38px;height:38px}
.stat.big:hover .yt-big{transform:rotate(-8deg) scale(1.06)}
.big-tag{font-size:17px;font-weight:700;padding:8px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4)}
.bento .big .n{font-size:clamp(84px,10vw,168px);display:block}
.bento .big .l{display:block}
.bento .big .btn{align-self:flex-start}
.bento .stars{margin-bottom:auto}
.bento .stars svg{width:22px;height:22px}
@media(max-width:900px){.bento{grid-template-columns:1fr}.bento .big{grid-row:auto;min-height:0}}
@media(max-width:640px){.bento .big .btn{width:100%;justify-content:space-between}}

/* why free: the line between the steps draws itself, a dot travels along it */
.steps.flow .step{position:relative;border-top-color:rgba(255,255,255,.12)}
.steps.flow .step::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--fh-orange);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--fh-ease)}
.steps.flow .step::after{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--fh-orange);box-shadow:0 0 0 6px rgba(255,74,28,.25);transition:left 1.4s var(--fh-ease)}
.steps.flow .step.in::before{transform:none}
.steps.flow .step.in::after{left:calc(100% - 14px)}
.steps.flow .step.d1::before,.steps.flow .step.d1::after{transition-delay:.5s}
.steps.flow .step.d2::before,.steps.flow .step.d2::after{transition-delay:1s}
.step-y{display:inline-flex;margin-bottom:14px;font-size:17px;font-weight:700;color:#FFB59D}

/* what you can build: pick a kind of website, the browser mock rebuilds itself */
.split-grid{align-items:center}
.split-copy{display:flex;flex-direction:column;align-items:flex-start}
.split-copy .big{margin-top:24px}
.types{margin-top:28px}
.types .topic{cursor:pointer}
.split .types .topic{cursor:pointer}
.mock{position:relative;border-radius:28px;background:#fff;box-shadow:0 60px 100px -60px rgba(11,18,64,.6);overflow:hidden;border:1px solid #EEE8FA}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--fh-sand)}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:#CFC7E3}
.mock-bar i:first-child{background:var(--fh-orange)}
.mock-url{margin-left:10px;flex:1;max-width:320px;padding:5px 14px;border-radius:999px;background:#fff;font-size:17px;font-weight:600;color:#3B4166;line-height:1.3}
.mock-body{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:22px repeat(3,1fr) 74px;gap:12px;padding:16px;aspect-ratio:4/3.1}
.mock-body b{display:block;border-radius:14px;background:var(--fh-cream);position:relative;overflow:hidden;transition:background .6s var(--fh-ease)}
.mock-body .m1{border-radius:999px}
.mock.swap .mock-body b{animation:build .7s var(--fh-ease) both}
.mock.swap .m2{animation-delay:.05s}.mock.swap .m3{animation-delay:.1s}.mock.swap .m4{animation-delay:.15s}.mock.swap .m5{animation-delay:.2s}.mock.swap .m6{animation-delay:.25s}.mock.swap .m7{animation-delay:.3s}
.mock .m1{grid-area:m1}.mock .m2{grid-area:m2}.mock .m3{grid-area:m3}.mock .m4{grid-area:m4}.mock .m5{grid-area:m5}.mock .m6{grid-area:m6}.mock .m7{grid-area:m7}
.mock-body b::before,.mock-body b::after{content:"";position:absolute;border-radius:999px}
/* business: hero, photo, three service cards, footer */
.mock[data-type="business"] .mock-body{grid-template-areas:"m1 m1 m1 m1 m1 m1" "m2 m2 m2 m2 m3 m3" "m2 m2 m2 m2 m3 m3" "m4 m4 m5 m5 m6 m6" "m7 m7 m7 m7 m7 m7"}
.mock[data-type="business"] .m2{background:var(--fh-blue)}
.mock[data-type="business"] .m2::before{left:14%;top:30%;width:55%;height:12%;background:#fff}
.mock[data-type="business"] .m2::after{left:14%;top:58%;width:28%;height:14%;background:var(--fh-orange)}
.mock[data-type="business"] .m3{background:linear-gradient(160deg,var(--fh-purple),var(--fh-orange))}
.mock[data-type="business"] .m7{background:var(--fh-ink)}
/* shop: product grid with prices */
.mock[data-type="shop"] .mock-body{grid-template-areas:"m1 m1 m1 m1 m1 m1" "m2 m2 m3 m3 m4 m4" "m2 m2 m3 m3 m4 m4" "m5 m5 m6 m6 m7 m7" "m5 m5 m6 m6 m7 m7"}
.mock[data-type="shop"] .mock-body b:not(.m1){background:linear-gradient(var(--fh-sand) 0 62%,#fff 62%);border:1px solid #EEE8FA}
.mock[data-type="shop"] .mock-body b:not(.m1)::before{left:12%;bottom:22%;width:50%;height:8%;background:var(--fh-ink)}
.mock[data-type="shop"] .mock-body b:not(.m1)::after{left:12%;bottom:9%;width:26%;height:8%;background:var(--fh-orange)}
.mock[data-type="shop"] .m3{background:linear-gradient(#C9B8FF 0 62%,#fff 62%)!important}
/* course: video player, lesson list, progress */
.mock[data-type="course"] .mock-body{grid-template-areas:"m1 m1 m1 m1 m1 m1" "m2 m2 m2 m2 m3 m3" "m2 m2 m2 m2 m4 m4" "m2 m2 m2 m2 m5 m5" "m6 m6 m6 m7 m7 m7"}
.mock[data-type="course"] .m2{background:var(--fh-ink)}
.mock[data-type="course"] .m2::before{left:calc(50% - 26px);top:calc(50% - 26px);width:52px;height:52px;background:var(--fh-orange)}
.mock[data-type="course"] .m2::after{left:8%;right:8%;bottom:10%;height:6px;background:linear-gradient(90deg,var(--fh-orange) 40%,rgba(255,255,255,.25) 40%)}
.mock[data-type="course"] .m3,.mock[data-type="course"] .m4,.mock[data-type="course"] .m5{background:var(--fh-cream)}
.mock[data-type="course"] .m3::before,.mock[data-type="course"] .m4::before,.mock[data-type="course"] .m5::before{left:12%;top:calc(50% - 7px);width:14px;height:14px;background:var(--fh-blue)}
.mock[data-type="course"] .m3::after,.mock[data-type="course"] .m4::after,.mock[data-type="course"] .m5::after{left:30%;right:12%;top:calc(50% - 5px);height:10px;background:#C9B8FF}
.mock[data-type="course"] .m6{background:var(--fh-blue)}
.mock[data-type="course"] .m7{background:var(--fh-orange)}
/* news: big headline, columns of articles */
.mock[data-type="news"] .mock-body{grid-template-areas:"m1 m1 m1 m1 m1 m1" "m2 m2 m2 m2 m5 m5" "m2 m2 m2 m2 m6 m6" "m3 m3 m4 m4 m7 m7" "m3 m3 m4 m4 m7 m7"}
.mock[data-type="news"] .m2{background:linear-gradient(180deg,var(--fh-purple),var(--fh-ink))}
.mock[data-type="news"] .m2::before{left:8%;right:20%;bottom:28%;height:10%;background:#fff}
.mock[data-type="news"] .m2::after{left:8%;width:30%;bottom:12%;height:8%;background:var(--fh-orange)}
.mock[data-type="news"] .m3,.mock[data-type="news"] .m4,.mock[data-type="news"] .m5,.mock[data-type="news"] .m6,.mock[data-type="news"] .m7{background:#fff;border:1px solid #EEE8FA}
.mock[data-type="news"] .m3::before,.mock[data-type="news"] .m4::before,.mock[data-type="news"] .m5::before,.mock[data-type="news"] .m6::before,.mock[data-type="news"] .m7::before{left:10%;right:10%;top:18%;height:12px;background:var(--fh-ink)}
.mock[data-type="news"] .m3::after,.mock[data-type="news"] .m4::after,.mock[data-type="news"] .m5::after,.mock[data-type="news"] .m6::after,.mock[data-type="news"] .m7::after{left:10%;right:30%;top:calc(18% + 22px);height:10px;background:#DCD5EE}
/* social: profile, feed post, reactions */
.mock[data-type="social"] .mock-body{grid-template-areas:"m1 m1 m1 m1 m1 m1" "m2 m2 m3 m3 m3 m3" "m4 m4 m3 m3 m3 m3" "m4 m4 m3 m3 m3 m3" "m5 m5 m6 m6 m7 m7"}
.mock[data-type="social"] .m2{background:var(--fh-blue)}
.mock[data-type="social"] .m2::before{left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;background:var(--fh-orange);box-shadow:0 0 0 5px #fff}
.mock[data-type="social"] .m3{background:linear-gradient(140deg,var(--fh-orange),var(--fh-purple))}
.mock[data-type="social"] .m3::after{left:8%;bottom:8%;width:40%;height:9%;background:rgba(255,255,255,.9)}
.mock[data-type="social"] .m4{background:#fff;border:1px solid #EEE8FA}
.mock[data-type="social"] .m4::before{left:12%;right:12%;top:16%;height:10px;background:var(--fh-ink)}
.mock[data-type="social"] .m4::after{left:12%;right:30%;top:calc(16% + 20px);height:10px;background:#DCD5EE}
.mock[data-type="social"] .m5,.mock[data-type="social"] .m6,.mock[data-type="social"] .m7{background:var(--fh-cream)}
.mock[data-type="social"] .m5::before,.mock[data-type="social"] .m6::before,.mock[data-type="social"] .m7::before{left:calc(50% - 9px);top:calc(50% - 9px);width:18px;height:18px;background:var(--fh-orange)}
@media(max-width:900px){.split-grid{align-items:start}.mock{max-width:560px;width:100%}}

/* ===== improvement pass: Tutorials ===== */
/* hero: copy and search left, a slowly moving wall of the newest thumbnails right */
.tut-hero{padding-bottom:clamp(70px,8vw,110px)}
.tut-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.tut-copy{display:flex;flex-direction:column;align-items:flex-start}
.tut-hero h1{font-size:clamp(44px,6.6vw,108px)}
.tut-copy .faq-search{align-self:stretch;margin-top:34px;max-width:560px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:17px;font-weight:600;color:#C9B8FF}
.quick button{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;font-size:17px;font-weight:600;transition:background .3s,color .3s,border-color .3s,transform .4s var(--fh-ease)}
.quick button:hover{background:#fff;color:var(--fh-blue);border-color:#fff;transform:translateY(-2px)}
.thumbwall{position:relative;height:clamp(460px,48vw,640px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-6deg) scale(1.08);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.tw-col{overflow:hidden}
.tw-track{display:flex;flex-direction:column;gap:14px;animation:twup 46s linear infinite}
.tw-c2 .tw-track{animation-direction:reverse;animation-duration:52s}
.tw-c3 .tw-track{animation-duration:40s}
.thumbwall:hover .tw-track{animation-play-state:paused}
.tw-track a{display:block;border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:transform .5s var(--fh-ease)}
.tw-track a:hover{transform:scale(1.05)}
.tw-track img{width:100%;height:100%;object-fit:cover}
@keyframes twup{to{transform:translateY(calc(-50% - 7px))}}
@media(max-width:960px){.tut-grid{grid-template-columns:1fr}.thumbwall{height:260px;transform:rotate(-4deg) scale(1.12);margin-top:10px}}
@media(max-width:640px){.thumbwall{height:200px}}

/* library: filters stick to the top while you scroll, the newest tutorial gets a wide card */
.lib-bar{position:sticky;top:78px;z-index:20;display:flex;align-items:center;gap:16px;padding:12px;margin:0 -12px clamp(24px,3vw,40px);border-radius:28px;transition:background .4s,box-shadow .4s}
.lib-bar.stuck{background:rgba(11,18,64,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.lib-bar .lib-topics{flex:1;min-width:0;margin-bottom:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:40px}
.lib-bar .lib-topics::-webkit-scrollbar{display:none}
.lib-bar .chip{flex:none;white-space:nowrap}
.bar-search{display:flex;align-items:center;gap:10px;flex:0 0 240px;min-height:48px;padding:4px 16px;border-radius:999px;background:#fff;color:var(--fh-blue)}
.bar-search svg{width:20px;height:20px;flex:none}
.bar-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;font-weight:600;color:var(--fh-ink);height:40px}
.lib-grid .tcard.lead{grid-column:span 2;flex-direction:row}
.lib-grid .tcard.lead .thumb{flex:0 0 52%;aspect-ratio:auto;min-height:100%}
.lib-grid .tcard.lead .body{padding:clamp(28px,3vw,44px)}
.lib-grid .tcard.lead h3{font-size:clamp(26px,2.4vw,38px)}
.lib-grid .tcard.lead .play i{width:88px;height:88px}
.lib-grid .tcard.lead::before{content:"Newest";position:absolute;left:18px;top:18px;z-index:3;font-size:17px;font-weight:700;color:#fff;background:var(--fh-orange);border-radius:999px;padding:7px 14px}
@media(max-width:1080px){.lib-grid .tcard.lead{grid-column:span 2}}
@media(max-width:760px){.lib-grid .tcard.lead{flex-direction:column}.lib-grid .tcard.lead .thumb{flex:none;aspect-ratio:16/9;min-height:0}}
@media(max-width:640px){.lib-grid .tcard.lead{grid-column:auto}.lib-bar{top:70px;margin-inline:-18px;border-radius:0;padding:10px 18px}.bar-search{display:none}.lib-bar .lib-topics{margin-inline:0;padding-inline:0 40px}}

/* topic tiles: three thumbnails fan out on hover */
.ttile{overflow:hidden}
.tt-fan{position:absolute;right:18px;bottom:22px;width:46%;height:56%;pointer-events:none}
.tt-fan img{position:absolute;right:0;bottom:0;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:0 14px 30px -14px rgba(11,18,64,.6);transform-origin:bottom right;transition:transform .6s var(--fh-ease),opacity .4s;opacity:0}
.tt-fan img:nth-child(1){transform:rotate(0) translate(0,0);opacity:1}
.ttile:hover .tt-fan img:nth-child(1){transform:rotate(-4deg) translate(-6px,-4px)}
.ttile:hover .tt-fan img:nth-child(2){opacity:1;transform:rotate(-12deg) translate(-26px,-18px)}
.ttile:hover .tt-fan img:nth-child(3){opacity:1;transform:rotate(-20deg) translate(-46px,-38px)}
.tt-fan img:nth-child(1){z-index:3}.tt-fan img:nth-child(2){z-index:2}.tt-fan img:nth-child(3){z-index:1}
.ttile .tt-fan ~ b,.ttile .tt-fan ~ small{max-width:55%;position:relative;z-index:1}
.ttile .tt-ic{z-index:2}
@media(max-width:760px){.tt-fan{display:none}.ttile .tt-fan ~ b,.ttile .tt-fan ~ small{max-width:none}}

/* ===== improvement pass: Recommended ===== */
/* hero: floating logo cloud that reacts to the pointer */
.rec-hero .phero-row{align-items:center}
.rec-hero .phero-panel .phero-sub{margin-top:0;color:#E9ECFF}
.rec-hero .chips2 li{transition:background .3s,color .3s}
.rec-hero .chips2 li:hover{background:#fff;color:var(--fh-blue)}
.lcloud{position:relative;height:clamp(300px,30vw,420px);transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .6s var(--fh-ease)}
.lc{position:absolute;width:clamp(96px,10vw,148px);aspect-ratio:1;border-radius:28px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);animation:lcf 7s ease-in-out infinite alternate;transition:transform .5s var(--fh-ease)}
.lc img{width:130%;max-width:none;height:auto}
.lc:hover{transform:scale(1.1) rotate(-4deg);z-index:3}
.lc1{left:4%;top:6%;animation-delay:-1s}
.lc2{left:34%;top:0;width:clamp(120px,12vw,176px);animation-delay:-3s}
.lc3{left:70%;top:10%;animation-delay:-5s}
.lc4{left:16%;top:42%;width:clamp(116px,12vw,170px);animation-delay:-2s}
.lc5{left:50%;top:36%;animation-delay:-4s}
.lc6{left:78%;top:52%;width:clamp(84px,8vw,120px);animation-delay:-6s}
.lc7{left:0;top:74%;width:clamp(84px,8vw,118px);animation-delay:-2.5s}
.lc8{left:34%;top:72%;animation-delay:-1.5s}
.lc9{left:62%;top:78%;width:clamp(80px,7vw,108px);animation-delay:-3.5s}
@keyframes lcf{from{translate:0 0;rotate:-2deg}to{translate:0 -16px;rotate:2deg}}
@media(max-width:960px){.lcloud{height:240px;margin-top:20px}.lc{width:88px}.lc2,.lc4{width:104px}.lc6,.lc7,.lc9{width:72px}}
@media(max-width:640px){.lcloud{height:200px}.lc{width:70px;border-radius:20px}.lc2,.lc4{width:84px}.lc6,.lc7,.lc9{width:60px}}
/* slider: my rating on each top pick */
.srate{display:flex;align-items:center;gap:10px;margin:-4px 0 16px}
.srate .stars svg{width:20px;height:20px}
.srate b{font-size:24px;font-weight:900;letter-spacing:-.02em}
.srate small{font-size:17px;font-weight:600;color:#C9B8FF}
/* all picks: compact rows (logo, text, arrow) in two columns */
.prows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prow{position:relative;display:grid;grid-template-columns:clamp(96px,9vw,128px) minmax(0,1fr) auto;gap:clamp(16px,2vw,24px);align-items:center;padding:16px 20px 16px 16px;border-radius:28px;background:#fff;border:2px solid transparent;transition:border-color .4s,box-shadow .5s var(--fh-ease),transform .5s var(--fh-ease)}
.prow:hover{border-color:var(--fh-blue);box-shadow:0 40px 60px -40px rgba(27,44,163,.5);transform:translateY(-4px)}
.prow-logo{aspect-ratio:1;border-radius:20px;overflow:hidden;background:#fff;display:grid;place-items:center;border:1px solid #EEE8FA}
.prow-logo img{width:150%;max-width:none;height:auto;transition:transform .8s var(--fh-ease)}
.prow:hover .prow-logo img{transform:scale(1.08)}
.prow-body{display:flex;flex-direction:column;gap:6px}
.prow h3{font-size:clamp(21px,1.6vw,25px);line-height:1.15}
.prow h3 a::after{content:"";position:absolute;inset:0;border-radius:28px}
.prow p{font-size:17px;line-height:1.5;color:#2A2F55}
.prow-go{width:48px;height:48px;border-radius:50%;background:var(--fh-cream);display:grid;place-items:center;flex:none;transition:background .4s,color .4s,transform .5s var(--fh-ease)}
.prow-go svg{width:18px;height:18px}
.prow:hover .prow-go{background:var(--fh-orange);color:#fff;transform:rotate(-45deg)}
@media(max-width:1000px){.prows{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.prow{grid-template-columns:76px minmax(0,1fr);padding:14px}.prow-go{display:none}.prow p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* filters stay at hand while scrolling long lists */
.lsec .filterbar{position:sticky;top:78px;z-index:20;padding:10px 12px;margin-inline:-12px;border-radius:999px;transition:background .4s,box-shadow .4s}
.lsec .filterbar.stuck{background:rgba(245,236,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 40px -24px rgba(27,44,163,.45)}
@media(max-width:640px){.lsec .filterbar{top:70px;border-radius:0;margin-inline:-18px;padding-inline:18px}.lsec .filterbar .faq-search{display:none}}
.rec-hero .phero-panel .phero-sub{font-size:clamp(19px,1.5vw,23px);font-weight:500;line-height:1.5;color:#E9ECFF}
.lc img{width:200%}
.prow-logo img{width:210%}

/* ===== improvement pass: Blog ===== */
.blog-hero .phero-sub{margin-top:26px}
.blog-panel{position:relative;padding:clamp(22px,2.4vw,32px);border-radius:32px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.bp-title{font-size:17px;font-weight:700;color:#FFB59D;margin-bottom:10px}
.headlines li + li{border-top:1px solid rgba(255,255,255,.14)}
.headlines a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 4px;color:#fff;transition:padding .5s var(--fh-ease)}
.hl-n{font-size:24px;font-weight:700;color:var(--fh-orange)}
.hl-t{display:flex;flex-direction:column;gap:4px}
.hl-t b{font-size:clamp(19px,1.5vw,22px);font-weight:800;line-height:1.25}
.hl-t time{font-size:17px;font-weight:600;color:#C9B8FF}
.hl-go{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background .4s,border-color .4s,transform .5s var(--fh-ease)}
.hl-go svg{width:18px;height:18px}
.headlines a:hover{padding-left:12px}
.headlines a:hover .hl-go{background:var(--fh-orange);border-color:var(--fh-orange);transform:rotate(-45deg)}
@media(max-width:640px){.hl-go{display:none}.headlines a{grid-template-columns:auto minmax(0,1fr)}}

/* ===== improvement pass: Knowledge ===== */
/* hero: a random "term of the day" card with a shuffle button */
.kb-hero .bigword{text-align:left;padding-left:4vw}
.tod{position:relative;overflow:hidden;padding:clamp(26px,3vw,40px);border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 90px -40px rgba(0,0,0,.6);min-height:360px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.tod-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;position:relative;z-index:1}
.tod-label{font-size:17px;font-weight:700;color:#FFB59D}
.tod-shuffle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;background:#fff;color:var(--fh-blue);font-size:17px;font-weight:700;transition:background .3s,color .3s}
.tod-shuffle svg{width:18px;height:18px;transition:transform .6s var(--fh-ease)}
.tod-shuffle:hover{background:var(--fh-orange);color:#fff}
.tod-shuffle:hover svg{transform:rotate(180deg)}
.tod-letter{position:absolute;right:-.06em;bottom:-.22em;font-size:clamp(200px,20vw,300px);font-weight:900;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.07);pointer-events:none}
.tod-title{position:relative;font-size:clamp(30px,3vw,46px);font-weight:900;line-height:1.05;letter-spacing:-.03em;margin-top:auto}
.tod-text{position:relative;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:#E9ECFF;max-width:520px}
.tod .btn-line{position:relative}
.tod.flip .tod-title,.tod.flip .tod-text,.tod.flip .tod-letter{animation:build .6s var(--fh-ease) both}
.tod.flip .tod-text{animation-delay:.06s}
@media(max-width:960px){.tod{min-height:0}}

/* index: terms in two columns, an opened term takes the full row */
.kb-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kb-group .kb-letter{grid-column:1/-1}
.kb-group .acc-item{align-self:start}
.kb-group .acc-item.open{grid-column:1/-1}
.kb-acc .acc-q{font-size:clamp(18px,1.3vw,21px);padding:16px 16px 16px 20px;min-height:64px}
.kb-acc .acc-q .qn{font-size:19px;width:auto}
.kb-acc .acc-q .pm{width:40px;height:40px}
.kb-acc .acc-a p{padding-left:20px;padding-right:20px}
.kb-acc .acc-a .btn-line{margin-left:20px}
.kb-letters .topic.cur{background:var(--fh-blue);border-color:var(--fh-blue);color:#fff}
@media(max-width:640px){.kb-group{grid-template-columns:minmax(0,1fr)}}
.headlines{list-style:none}
.tod-shuffle{white-space:nowrap}
@media(max-width:520px){.tod-shuffle span{display:none}.tod-shuffle{width:44px;padding:0;justify-content:center}}