/* הבנתי! hub (amsalem.co/hevanti/): a learning portal. Builds on hevanti.css variables.
   One panel and one glow per screen (the hero panel), one orange moment per block. */
:root{--surface:var(--card);--paper-2:var(--soft);--line-strong:#8A93A3;--orange:#EA7414;--success:#1E7A4C;--success-soft:#E4F2EA;--lift:0 1px 0 rgba(9,40,69,.06),0 14px 30px -18px rgba(9,40,69,.35)}
:root[data-theme="dark"]{--line-strong:#5F7893;--success:#5BC28E;--success-soft:#163B2E;--lift:0 1px 0 rgba(255,255,255,.04),0 18px 36px -18px rgba(0,0,0,.7)}
html{scroll-padding-top:130px}
.hub section{position:relative}
.hub h2{font-size:clamp(26px,3.2vw,38px)}
.sec-h{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
.sec-h .sub{margin:0;max-width:60ch}
.hv-icon{width:22px;height:22px;flex:none}
.hv-itile{width:46px;height:46px;flex:none;border-radius:13px;display:inline-grid;place-items:center;background:var(--teal-soft);color:var(--ink)}
.hv-itile .hv-icon{width:24px;height:24px}
.hv-itile--navy{background:var(--panel);color:#fff;--hv-accent:#F4914A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* 2. hero: the question + live search, and the navy panel with the big logo */
.hero2{padding-block:44px 30px}
.hero2-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;align-items:stretch}
.h2-ask{display:flex;flex-direction:column;justify-content:center;gap:18px;min-width:0}
.h2-ask h1{font-size:clamp(40px,6.2vw,78px);line-height:1.05;letter-spacing:-.01em}
.h2-ask .lead{max-width:34em}
.srch{position:relative;z-index:6}
.srch-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line-strong);border-radius:999px;padding:0 20px;min-height:62px;transition:border-color .15s}
.srch-box:focus-within{border-color:var(--ink)}
.srch-ic{width:24px;height:24px;color:var(--ink)}
.srch-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 19px/1.2 var(--body);padding:14px 0;outline:none}
.srch-box input::placeholder{color:var(--muted);opacity:1}
.srch-box input::-webkit-search-cancel-button{cursor:pointer}
.srch:focus-within .srch-box{outline:3px solid var(--teal);outline-offset:2px}
.hres{list-style:none;margin:8px 0 0;padding:8px;position:absolute;inset-inline:0;top:100%;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--lift);max-height:min(440px,60vh);overflow:auto}
.hres li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;line-height:1.35}

.hres li[aria-selected="true"]{background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--ink)}
.hres .r-n{font:900 18px/1 var(--display);color:var(--teal);font-variant-numeric:tabular-nums;text-align:center}
.hres li.is-soon .r-n,.hres li.is-soon .r-t{color:var(--muted)}
.hres .r-t{font-weight:500;min-width:0}
.hres .r-p{display:block;font-size:13px;color:var(--muted)}
.hres .r-all{grid-template-columns:1fr;font-weight:700;color:var(--teal);text-align:center}
.hres .r-none{grid-template-columns:1fr;cursor:default;color:var(--muted)}
.hres mark{background:none;color:inherit;font-weight:700;padding:0;box-shadow:inset 0 -.32em 0 var(--teal-soft)}
.qchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qchips-l{font-size:14px;color:var(--muted);margin-inline-end:4px}
.qchip{font:500 15px/1 var(--body);padding:10px 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.qchip:hover{border-color:var(--ink)}
.qchip:focus-visible,.pn-c:focus-visible,.seg2 button:focus-visible,.world:focus-visible,.got:focus-visible,.lt2:focus-visible,.c2-link:focus-visible,.me-go:focus-visible,.ladder2 a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.h2-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:30px 30px 26px;border-radius:26px;color:#fff;background:radial-gradient(120% 90% at 0% 0%,rgba(234,116,20,.20) 0,transparent 45%),radial-gradient(130% 140% at 90% -20%,var(--panel-2) 0,var(--panel) 62%);box-shadow:var(--glow)}
.h2-panel::after{content:"";position:absolute;inset-inline:6%;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--mark-light),var(--mark),var(--mark-light),transparent);box-shadow:0 0 12px rgba(234,116,20,.7)}
.hp-logo{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0 4px}
.lg--big{font-size:clamp(66px,8vw,106px)}
.lg--big .lg-word{color:#fff}
.lg--big .lg-bang{transition:translate .35s cubic-bezier(.2,.8,.3,1)}
.hp-by{font:500 clamp(17px,1.6vw,21px)/1 var(--body);color:#C9D3DF;padding-inline-start:.3em}
.hp-host{display:flex;gap:14px;align-items:center}
.hp-host img{width:68px;height:68px;border-radius:50%;object-fit:cover;background:#12406B;box-shadow:0 0 0 3px var(--panel),0 0 0 5px rgba(234,116,20,.75)}
.hp-host div{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.hp-host b{font:900 20px/1.15 var(--display)}
.hp-host span{color:#fff;font-weight:500;font-size:15px}
.hp-host .hp-small{color:#C9D3DF;font-weight:400;font-size:14px}
.hp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hp-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.hp-stats dd{margin:0;font:900 28px/1 var(--display);font-variant-numeric:tabular-nums}
.hp-stats dt{font-size:13px;color:#C9D3DF;line-height:1.3}
.hp-promise{margin:0;font-size:14px;color:#C9D3DF}

/* 7. personal progress */
.ring-box{position:relative;width:70px;height:70px;flex:none}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring-bg{stroke:var(--paper-2)}
.ring-fg.is-zero{opacity:0}
.ring-fg{stroke:var(--orange);stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.2,.8,.3,1)}
.ring-n{position:absolute;inset:0;display:grid;place-items:center;font:900 22px/1 var(--display);font-variant-numeric:tabular-nums}
.me-t h2{font-size:clamp(20px,2.2vw,24px)}
.me-t h2 b{font-weight:900}
.me-t p{margin:4px 0 0;color:var(--muted);font-size:15px}
/* 3. worlds */
.worlds{padding-block:52px 20px}
.w-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.w-grid li{display:flex}
.world{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;padding:18px 16px 16px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;min-width:0}
.world:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--lift)}
.world .hv-itile{margin-bottom:10px}
.w-n{font:700 13px/1.2 var(--body);color:var(--teal)}
.w-t{font:900 19px/1.2 var(--display)}
.w-s{font-size:13px;color:var(--muted);line-height:1.35}
.w-c{margin-top:auto;padding-top:10px;font-size:14px;font-weight:500}
.w-prog{font-size:13px;color:var(--muted);margin-top:4px}
.world--soon{background:transparent;border-style:dashed}
.world--soon .w-t{color:var(--ink)}
.world--soon .hv-itile{background:var(--paper-2);color:var(--muted);--hv-accent:var(--muted)}
.world.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:1080px){.w-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.w-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.world{padding:14px 12px}.w-t{font-size:17px}.w-s{display:none}}

/* 4. where to start: the ladder */
.start2{padding-block:44px 20px}
.ladder2{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:10px}
.ladder2 li{flex:1;min-width:0}
.ladder2 a{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;color:var(--ink);text-decoration:none;border-radius:14px;padding:4px}
.lad-bar{display:flex;justify-content:center;align-items:flex-start;padding-top:12px;height:calc(var(--h) * 1.6px);min-height:58px;border-radius:14px 14px 6px 6px;background:var(--paper-2);border:1.5px solid var(--line);transition:background .2s,border-color .2s,transform .2s}
.lad-num{font:900 26px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.lad-t{font-size:14px;font-weight:500;line-height:1.35;min-height:4.05em}
.lad-here{order:-1;align-self:center;font:700 13px/1 var(--body);color:var(--teal);visibility:hidden;white-space:nowrap}
.ladder2 a:hover .lad-bar{border-color:var(--ink);transform:translateY(-3px)}
.lad-s.is-done .lad-bar{background:var(--ink);border-color:var(--ink)}
.lad-s.is-done .lad-num{color:var(--paper)}
.lad-s.is-here .lad-bar{background:var(--orange);border-color:var(--orange)}
.lad-s.is-here .lad-num{color:#092845}
.lad-s.is-here .lad-here{visibility:visible}
.lad-s.is-here .lad-t{font-weight:700}
@media (max-width:760px){
  .ladder2{flex-direction:column;align-items:stretch;gap:8px}
  .ladder2 a{flex-direction:row;align-items:center;gap:12px;padding:2px}
  .lad-bar{height:48px;min-height:0;width:calc(var(--h) * 1.5px + 10px);flex:none;align-items:center;padding:0;border-radius:6px 14px 14px 6px}
  .lad-t{min-height:0;flex:1}
  .lad-here{order:3;visibility:visible;display:none}
  .lad-s.is-here .lad-here{display:block}
}

/* 5. quiz */
.match{padding-block:40px}
.match-in{background:var(--paper-2);border-radius:26px;padding:32px;max-width:1080px}
@media (min-width:1121px){.match-in{margin-inline:auto}}
@media (max-width:1120px){.match-in{margin-inline:20px}}
.qz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:28px}
.qz-q{border:0;margin:0;padding:0;min-width:0}
.qz-q legend{font:700 18px/1.3 var(--display);margin-bottom:10px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:inline-block;padding:10px 15px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);font-size:15px;font-weight:500;line-height:1.25}
.opt:hover span{border-color:var(--ink)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.qz-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.qz-wait{margin:0;color:var(--muted)}
.qz-res-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.qz-res-h h3{font-size:22px}
.qz-res-h p{margin:0;color:var(--muted);font-size:15px}
.qz-reset{font:700 14px var(--body);background:none;border:0;color:var(--teal);text-decoration:underline;cursor:pointer;padding:4px}
.qz-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:q}
.qz-list a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;height:100%}
.qz-list a:hover{border-color:var(--ink)}
.qz-list img{width:96px;height:54px;object-fit:cover;border-radius:8px;display:block}
.qz-list b{display:block;font-size:15px;line-height:1.35}
.qz-list small{display:block;font-size:13px;color:var(--teal);font-weight:700}
.qz-list li:first-child a{border-color:var(--ink)}
@media (max-width:900px){.qz,.qz-list{grid-template-columns:1fr}.match-in{padding:22px 18px}}

/* 8. latest */
.latest2{padding-block:32px 20px}
.lt2-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lt2{display:flex;flex-direction:column;gap:6px;height:100%;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden;padding-bottom:18px}
.lt2:hover{border-color:var(--ink);box-shadow:var(--lift)}
.lt2 img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line);margin-bottom:8px}
.lt2>span,.lt2>b{padding-inline:18px}
.lt2-n{font:700 13px var(--body);color:var(--teal)}
.lt2 b{font:900 20px/1.25 var(--display)}
.lt2-s{color:var(--muted);font-size:15px;line-height:1.55}
@media (max-width:860px){.lt2-grid{grid-template-columns:1fr}}

/* 6. library */
.lib{padding-block:48px 56px;background:var(--surface);border-block:1px solid var(--line);margin-top:28px}
.lib-h{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px 20px}
.lib-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.lf-q{flex:1 1 240px;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);border-radius:999px;padding:0 16px;background:var(--paper);min-height:46px}
.lf-q:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.lf-q .hv-icon{width:20px;height:20px}
.lf-q input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:16px var(--body);outline:none;padding:10px 0}
.lf-q input::placeholder{color:var(--muted);opacity:1}
.seg2{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:999px;padding:3px;background:var(--paper);gap:2px}
.seg2 button{font:500 15px/1 var(--body);border:0;background:transparent;color:var(--ink);padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;cursor:pointer;position:relative}
.sw input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.sw-t{width:44px;height:26px;border-radius:99px;background:var(--paper-2);border:1.5px solid var(--line-strong);position:relative;transition:background .15s}
.sw-t::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:var(--line-strong);transition:inset-inline-start .15s,background .15s}
.sw input:checked+.sw-t{background:var(--ink);border-color:var(--ink)}
.sw input:checked+.sw-t::after{inset-inline-start:21px;background:var(--paper)}
.sw input:focus-visible+.sw-t{outline:3px solid var(--teal);outline-offset:2px}
.pnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:5;background:var(--surface);margin-inline:-20px;padding:10px 20px;border-bottom:1px solid var(--line)}
.pnav-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;scroll-snap-type:x proximity}
.pn-c{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;font:500 14px/1 var(--body);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap}
.pn-c:hover{border-color:var(--ink)}
.pn-k{font-weight:900;color:var(--teal);font-variant-numeric:tabular-nums}
.pn-c[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pn-c[aria-pressed="true"] .pn-k{color:#F4914A}
:root[data-theme="dark"] .pn-c[aria-pressed="true"] .pn-k{color:#A84F0A}
.lib-state{margin:14px 0 0;font-size:15px;color:var(--muted);min-height:1px}
.lib-state:empty{margin:0}
.lib-state button{font:700 15px var(--body);background:none;border:0;color:var(--teal);text-decoration:underline;cursor:pointer;padding:0 4px}
.none{padding:18px;background:var(--paper-2);border-radius:14px;margin-top:20px}
.lp{margin-top:36px}
.lp-h{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.lp-k{display:block;font:700 13px/1.2 var(--body);color:var(--teal)}
.lp-h h3{font-size:clamp(20px,2.2vw,24px)}
.lp-c{margin-inline-start:auto;font-size:14px;color:var(--muted)}
.cards2{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.card2{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.card2:hover{border-color:var(--ink);box-shadow:var(--lift)}
.c2-link{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none;padding-bottom:10px;border-radius:18px 18px 0 0}
.c2-link img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:8px;background:var(--panel)}
.c2-n{font:700 13px/1.2 var(--body);color:var(--teal);padding-inline:16px}
.c2-t{font:700 17px/1.35 var(--display);padding-inline:16px}
.c2-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px 14px;margin-top:auto}
.lvl{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.lvl.l1{background:var(--teal-soft);color:var(--teal)}.lvl.l2{background:var(--blue-soft);color:var(--blue)}.lvl.l3{background:#092845;color:#fff}
:root[data-theme="dark"] .lvl.l3{background:#F3F1EC;color:#092845}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;background:var(--paper-2);color:var(--muted)}
.got{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--body);padding:8px 13px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.got .hv-icon{width:17px;height:17px;--hv-accent:currentColor;opacity:.45}
.got:hover{border-color:var(--ink)}
.got[aria-pressed="true"]{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.got[aria-pressed="true"] .hv-icon{opacity:1}
.got.pop{animation:got-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes got-pop{40%{transform:scale(1.08)}}
.soons{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.soon2{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.4}
.s2-n{font:900 16px/1 var(--display);font-variant-numeric:tabular-nums}
.soon2 .lvl{opacity:.85}
/* list view */
.lib.is-list .cards2{grid-template-columns:1fr;gap:8px}
.lib.is-list .card2{flex-direction:row;align-items:center;border-radius:14px}
.lib.is-list .c2-link{flex-direction:row;align-items:center;flex:1;padding:8px;gap:12px;min-width:0}
.lib.is-list .c2-link img{width:112px;height:63px;border-radius:9px;margin:0;flex:none}
.lib.is-list .c2-n,.lib.is-list .c2-t{padding:0}
.lib.is-list .c2-n{flex:none;min-width:4.2em}
.lib.is-list .c2-foot{padding:0 14px 0 14px;margin:0}
@media (max-width:760px){
  .soons{grid-template-columns:1fr}
  .soon2{grid-template-columns:2.2em minmax(0,1fr) auto}
  .soon2 .lvl{display:none}
  .cards2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .lib.is-list .c2-link img{width:84px;height:47px}
  .lib.is-list .c2-n{display:none}
  .lib.is-list .c2-foot .lvl{display:none}
  .lib.is-list .c2-t{font-size:15px}
}
[hidden]{display:none!important}

/* hero + progress on small screens */
@media (max-width:900px){
  .hero2-in{grid-template-columns:1fr;gap:26px}
  .hero2{padding-top:28px}
}
@media (max-width:480px){
  .h2-panel{padding:22px 20px 20px}
  .hp-stats{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .srch-box{min-height:56px;padding:0 16px}
  .srch-box input{font-size:17px}
  .seg2 button{padding:8px 11px;font-size:14px}
  .match-in{margin-inline:16px}
  .wrap{padding-inline:16px}
  .pnav{margin-inline:-16px;padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){.world,.lad-bar,.ring-fg,.w-bar i,.got{transition:none}.got.pop{animation:none}.world:hover,.ladder2 a:hover .lad-bar{transform:none}}

/* ================= round 2: rising views, calculators, glow where it matters ================= */
:root{--dot-glow:drop-shadow(0 0 4px rgba(234,116,20,.75));--here-glow:0 0 0 4px rgba(234,116,20,.14),0 12px 28px -10px rgba(234,116,20,.6)}
:root[data-theme="dark"]{--dot-glow:drop-shadow(0 0 7px rgba(244,145,74,1)) drop-shadow(0 0 16px rgba(234,116,20,.7));--here-glow:0 0 0 4px rgba(234,116,20,.28),0 0 34px -2px rgba(234,116,20,.8)}

/* the hero underline stretches from right to left, like on the slides */
.hero2 h1 mark{background-repeat:no-repeat;background-position:100% 0;animation:mk-sweep .7s .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes mk-sweep{from{background-size:0% 100%}to{background-size:100% 100%}}

/* 7. progress: ring + continue on the right, the personal staircase on the left */
.me{padding-block:8px}
.me3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 26px;max-width:1080px}
@media (min-width:1121px){.me3{margin-inline:auto}}
@media (max-width:1120px){.me3{margin-inline:20px}}
.me-l{display:flex;flex-direction:column;gap:16px;min-width:0}
.me-row{display:flex;gap:18px;align-items:center}
.me-go{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 18px;border-radius:16px;background:var(--paper-2);color:var(--ink);text-decoration:none;border:1.5px solid transparent}
.me-go:hover{border-color:var(--ink)}
.me-go-l{grid-column:1;font:700 13px/1.2 var(--body);color:var(--teal)}
.me-go b{grid-column:1;font-weight:700;line-height:1.35}
.me-go-a{grid-column:2;grid-row:1/3;width:24px;height:24px;transition:transform .2s}
.me-go:hover .me-go-a,.c-src:hover .hv-icon{transform:translateX(-4px)}
.my-graph{margin:0;position:relative;min-width:0}
.my-graph figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.my-graph figcaption b{font:900 18px/1.2 var(--display)}
.my-graph figcaption span{font-size:14px;color:var(--muted)}
#mgSvg{display:block;width:100%;height:auto;overflow:visible}
.mg-empty{position:absolute;inset-inline:0;bottom:38%;margin:0 auto;width:max-content;max-width:90%;text-align:center;background:var(--paper-2);border:1.5px dashed var(--line-strong);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px}
@media (max-width:860px){.me3{grid-template-columns:1fr;padding:18px}}
@media (max-width:480px){.me3{margin-inline:16px}}

/* chart vocabulary (shared by the personal graph and the calculators) */
.g-ax{stroke:var(--line);stroke-width:1}
.g-goal{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:5 5}
.g-ghost{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 5;opacity:.6}
.g-area{fill:rgba(234,116,20,.14)}
.g-line{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.g-l{fill:none;stroke-linejoin:round;stroke-linecap:round}
.g-l.l-1{stroke:var(--orange);stroke-width:3.5}
.g-l.l-2{stroke:var(--ink);stroke-width:2;opacity:.55}
.g-fill{stroke:none}
.g-gap{fill:rgba(234,116,20,.16)}
.anim,.g-l.anim-in{stroke-dasharray:1;animation:g-draw 1s cubic-bezier(.3,.7,.3,1) both}
@keyframes g-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.g-dot{fill:var(--orange);stroke:var(--surface);stroke-width:2.5;filter:var(--dot-glow)}
.g-halo{fill:rgba(234,116,20,.22);transform-box:fill-box;transform-origin:center;animation:g-pulse 2.4s ease-out infinite}
@keyframes g-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.g-yl,.g-xl,.g-xt{font:400 12px var(--body);fill:var(--muted)}
.g-xt{font-weight:700}
.g-sn{font:700 12px var(--body);fill:var(--teal)}
.g-dl{font:700 12px var(--body);fill:var(--ink)}

/* calculators */
.calc{padding-block:44px 8px}
.cpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:30px;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px}
.c-ctl{display:flex;flex-direction:column;gap:16px;min-width:0}
.c-ctl h3{font-size:24px}
.cs label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-weight:500;font-size:15px}
.cs output{font:900 18px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer;direction:rtl}
.cs input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to left,var(--orange) var(--fill,50%),var(--paper-2) var(--fill,50%));box-shadow:inset 0 0 0 1px var(--line)}
.cs input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(to left,var(--orange) var(--fill,50%),var(--paper-2) var(--fill,50%))}
.cs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);box-shadow:0 2px 6px rgba(9,40,69,.25)}
.cs input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--ink)}
.cs input[type=range]:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.c-note{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
.c-tag{display:inline-block;margin-inline-end:8px;font:700 12px/1 var(--body);padding:5px 10px;border-radius:99px;background:var(--teal-soft);color:var(--teal);vertical-align:1px}
.c-viz{display:flex;flex-direction:column;gap:10px;min-width:0}
.c-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.c-rows div{display:flex;flex-direction:column-reverse;gap:2px;padding:10px 14px;border-radius:14px;background:var(--paper-2)}
.c-rows dt{font-size:13px;color:var(--muted)}
.c-rows dd{margin:0;font:900 clamp(20px,2.4vw,28px)/1.1 var(--display);font-variant-numeric:tabular-nums}
.c-rows .is-main dd{color:var(--teal)}
.c-sent{margin:0;font-size:16px;line-height:1.55}
.c-svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:860px){.cpanel{grid-template-columns:1fr;padding:18px}}

/* worlds: one rising bar per episode in the part; navy = out now, orange = you marked it */
.w-spark{display:flex;align-items:flex-end;gap:3px;width:100%;height:34px;margin-top:10px}
.w-spark i{flex:1;min-width:2px;height:var(--hh);border-radius:3px 3px 1px 1px;background:var(--line);transform-origin:50% 100%}
.w-spark i.is-live{background:var(--ink);opacity:.8}
.w-spark i.is-got{background:var(--orange);opacity:1}
.w-grid.rv-pre .w-spark i{transform:scaleY(.12)}
.w-grid.rv-go .w-spark i{transition:transform .6s cubic-bezier(.2,.8,.3,1) calc(var(--j) * 35ms)}

/* the ladder builds upward when you reach it; the next step glows */
.ladder2 .lad-bar{transform-origin:50% 100%}
.ladder2.rv-pre .lad-bar{transform:scaleY(.18)}
.ladder2.rv-go .lad-bar{transition:transform .7s cubic-bezier(.2,.8,.3,1) calc(var(--i) * 90ms),background .2s,border-color .2s}
.lad-s.is-here .lad-bar{box-shadow:var(--here-glow);animation:here-breath 2.8s ease-in-out infinite}
@keyframes here-breath{50%{box-shadow:0 0 0 7px rgba(234,116,20,.10),0 14px 36px -8px rgba(234,116,20,.75)}}
@media (max-width:760px){.ladder2 .lad-bar{transform-origin:100% 50%}.ladder2.rv-pre .lad-bar{transform:scaleX(.2)}}

/* tilt toward the pointer (hub.js sets --rx/--ry) */
.world,.card2,.lt2,.qz-list a{transition:transform .14s ease-out,border-color .15s,box-shadow .15s}
.is-tilt{transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-2px)}

/* the one glowing action on the ask panel: an orange ring that travels around the button */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
.ask .btn-glow{position:relative;isolation:isolate;background:var(--mark);border-color:var(--mark);color:#092845}
.ask .btn-glow::before{content:"";position:absolute;inset:-4px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--ga),transparent 0 40%,#F4914A 75%,#EA7414 90%,transparent);filter:blur(6px);animation:ga-rot 3.6s linear infinite}
@keyframes ga-rot{to{--ga:360deg}}

::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
@media (prefers-reduced-motion:reduce){
  .anim-in{animation:none!important}
  .hero2 h1 mark{animation:none;background-size:100% 100%}
  .anim,.g-halo,.lad-s.is-here .lad-bar,.ask .btn-glow::before{animation:none!important}
  .g-halo{opacity:0}
  .is-tilt{transform:none}
  .w-grid .w-spark i,.ladder2 .lad-bar{transform:none!important;transition:none!important}
}

/* ================= round 3: all the calculators ================= */
.cpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.cpick [role=tab]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:start;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;min-width:0}
.cpick [role=tab] .hv-icon{grid-row:1/3;width:24px;height:24px}
.cpick #tab-c3 .hv-icon,.cpick #tab-c39b .hv-icon{transform:scaleX(-1)}  /* growth icons rise right to left */
.cpick [role=tab] span{font:700 15px/1.25 var(--display)}
.cpick [role=tab] small{font-size:13px;color:var(--muted)}
.cpick [role=tab]:hover{border-color:var(--ink)}
.cpick [role=tab][aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);--hv-accent:#F4914A}
.cpick [role=tab][aria-selected="true"] small{color:var(--paper);opacity:.85}
:root[data-theme="dark"] .cpick [role=tab][aria-selected="true"]{--hv-accent:#C95F0C}
.cpick [role=tab]:focus-visible,.c-src:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:760px){
  .cpick{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
  .cpick [role=tab]{flex:none;max-width:200px;scroll-snap-align:start}
}
.c-src{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:700 15px/1.35 var(--body);color:var(--teal);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px}
.c-src .hv-icon{width:20px;height:20px;transition:transform .2s;flex:none}
.cchk{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;cursor:pointer}
.cchk input{width:20px;height:20px;accent-color:var(--ink);margin:0}
.cseg{border:0;margin:0;padding:0;min-width:0}
.cseg legend{font-weight:500;font-size:15px;margin-bottom:6px;padding:0}
.cseg>div{display:flex;flex-wrap:wrap;gap:6px}
.cseg label{position:relative;cursor:pointer}
.cseg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cseg span{display:inline-block;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);font-size:14px;font-weight:500}
.cseg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cseg input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.cnum{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--paper);padding:0 14px;max-width:240px}
.cnum:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.cnum input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:900 20px/1 var(--display);padding:10px 0;outline:none;text-align:right;direction:ltr}
.cnum span{font-weight:700}
.c-leg{display:flex;flex-wrap:wrap;gap:16px;margin:0;font-size:13px;color:var(--muted)}
.c-leg span{display:inline-flex;align-items:center;gap:6px}
.c-leg i{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--ink);opacity:.55}
.c-leg .l-1 i{background:var(--orange);opacity:1;height:4px}
.c-vizbox{display:flex;flex-direction:column;gap:8px;min-width:0}
/* columns */
.g-bar{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 100%}
.g-bar.b-mid{fill:var(--ink);stroke:none;opacity:.75}
.g-bar.b-main{fill:var(--orange);stroke:none}
.g-bar.b-ref{stroke-dasharray:6 5}
.g-bv{font:900 20px var(--display);fill:var(--ink)}
.g-bv.b-main{fill:var(--teal)}
.g-bl{font:500 14px var(--body);fill:var(--muted)}
.g-ref{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:5 4;opacity:.7}
.g-bar.anim-in{animation:bar-in .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes bar-in{from{transform:scaleY(0)}}
/* gauge (value against a ceiling) */
.c-gauge{max-width:340px;align-self:center}
.gg-bg,.gg-fg{fill:none;stroke-width:20;stroke-linecap:round}
.gg-bg{stroke:var(--paper-2)}
.gg-fg{stroke:var(--orange)}
.gg-fg.anim-in{animation:gg-in .8s cubic-bezier(.2,.8,.3,1) both}
@keyframes gg-in{from{stroke-dasharray:0 100}}
.gg-v{font:900 30px var(--display);fill:var(--ink)}
.gg-l{margin:0;text-align:center;font-weight:500}
/* part of a whole */
.stk{display:flex;height:64px;border-radius:14px;overflow:hidden;gap:3px}
.stk i{display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:14px;transform-origin:100% 50%}
.stk .s1{background:var(--ink);color:var(--paper)}
.stk .s2{background:var(--orange);color:#092845}
.stk .s3{background:var(--teal-soft);color:var(--teal)}
.stk i.anim-in{animation:stk-in .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes stk-in{from{transform:scaleX(0)}}
/* layers */
.lay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:8px}
.ly{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper)}
.ly div{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.ly span{font-size:14px;color:var(--muted)}
.ly span strong{color:var(--ink);white-space:nowrap}
.ly em{font-style:normal;font-weight:700;font-size:13px;padding:4px 10px;border-radius:99px;white-space:nowrap;background:var(--paper-2);color:var(--muted)}
.ly.on{border-color:var(--success)}.ly.on em{background:var(--success-soft);color:var(--success)}
.ly.hot{border-color:var(--orange)}.ly.hot em{background:var(--teal-soft);color:var(--teal)}
.ly.bank em{background:var(--blue-soft);color:var(--blue)}
.ly.off{border-style:dashed}
/* formula */
.fx{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx div{display:flex;flex-direction:column;padding:10px 14px;border-radius:14px;background:var(--paper-2)}
.fx b{font:900 20px/1.1 var(--display)}
.fx span{font-size:13px;color:var(--muted)}
.fx i{font-style:normal;font-weight:900;font-size:20px;color:var(--muted)}
.pbar{height:14px;border-radius:14px;background:var(--paper-2);overflow:hidden;display:flex}
.pbar i{display:block;height:100%;background:var(--orange);border-radius:14px;transform-origin:100% 50%}
.pbar i.anim-in{animation:stk-in .7s cubic-bezier(.2,.8,.3,1) both}
.pbar-l{margin:0;font-weight:700;font-size:14px}
.c-rows:has(div:nth-child(3)) dd{font-size:clamp(18px,1.8vw,22px)}
@media (max-width:600px){
  .c-svg .g-yl,.c-svg .g-xl,.c-svg .g-xt{font-size:21px}
  .c-svg .g-bl{font-size:20px}
  .c-svg .g-bv{font-size:28px}
  #mgSvg .g-xt,#mgSvg .g-sn{font-size:18px}
}

/* ================= round 4: rhythm, illustrations, polish ================= */
/* section rhythm: bigger headings, two full-width bands (calculators, the ladder) between quiet paper sections */
.hub h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em}
.sec-h{margin-bottom:26px}
.sec-h .sub{font-size:17px}
.calc,.start2{background:var(--paper-2);border-block:1px solid var(--line);padding-block:56px;margin-top:40px}
.worlds{padding-block:60px 28px}
.match{padding-block:56px}
/* Streamline Plump illustrations, recoloured to the brand (src/hub-illus.svg) */
.il{display:block;width:56px;height:56px;flex:none;object-fit:contain;--il-ink:var(--ink);--il-fill:var(--blue-soft);--il-paper:var(--surface);--il-accent:#EA7414}
.il-flip{transform:scaleX(-1)}
.w-il{width:64px;height:64px;margin-bottom:12px;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.world:hover .w-il,.world:focus-visible .w-il,.world.is-on .w-il{--il-fill:var(--teal-soft);transform:translateY(-3px)}
.world:hover .w-il.il-flip,.world.is-on .w-il.il-flip{transform:scaleX(-1) translateY(-3px)}
.world--soon .w-il{opacity:.55}
.il-s{width:40px;height:40px}
.qz-wait{display:flex;align-items:center;gap:12px}
.none{display:flex;align-items:center;gap:12px}
.mg-empty{display:inline-flex;align-items:center;gap:8px}
.mg-empty .il-s{width:28px;height:28px}
.lad-flag{width:40px;height:40px;align-self:center;margin-bottom:-2px}
@media (max-width:760px){.lad-flag{display:none}}
/* hero panel: the "!" as a faint watermark */
.hp-mark{position:absolute;z-index:-1;inset-inline-end:-18px;bottom:-34px;height:300px;width:auto;fill:#fff;opacity:.05;pointer-events:none}
/* the ask panel gets a speech bubble */
.ask-in{flex-wrap:nowrap}
.ask-il{width:88px;height:88px;--il-ink:#fff;--il-fill:#12406B;--il-paper:#0E2F50}
.ask-t{flex:1;min-width:0}
@media (max-width:700px){.ask-in{flex-wrap:wrap}.ask-il{width:60px;height:60px}}
.credit{margin:4px 0 0}
/* quirks-safe: the same layout when a host drops the doctype (previews) */
.cs input[type=range]{display:block}
.cs label{line-height:1.35}
.c-svg,.ring,#mgSvg{display:block}
@media (prefers-reduced-motion:reduce){.w-il{transition:none}.world:hover .w-il{transform:none}}
.hub .me-t h2{font-size:clamp(20px,2.2vw,26px)}
.hub .ask h2{font-size:clamp(24px,3vw,34px)}
.hp-mark{opacity:.04}
.lp-il{width:48px;height:48px}
@media (max-width:700px){.ask-t{flex-basis:100%}.ask-in{padding:24px 20px}}
@media (max-width:560px){
  .lib:not(.is-list) .cards2{grid-template-columns:1fr 1fr;gap:10px}
  .lib:not(.is-list) .c2-t{font-size:15px;padding-inline:12px}
  .lib:not(.is-list) .c2-n{padding-inline:12px}
  .lib:not(.is-list) .c2-foot{padding:0 12px 12px;flex-wrap:wrap;gap:6px}
  .lib:not(.is-list) .got{padding:7px 10px;font-size:13px}
}
/* tags from the calendar and NNN.json: "חדש" for a week after an episode goes live, "סרטון" when it has a video */
.tag{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:2px 8px;border-radius:99px;font:700 12px/1.4 var(--body);vertical-align:1px;white-space:nowrap}
.tag-new{background:var(--orange);color:#092845}
.tag-vid{background:var(--panel);color:#fff}
.tag-vid .tag-ic{width:12px;height:12px}
/* the ask panel: WhatsApp + a meeting */
.ask-b{flex:none}
.ask .ask-b .btn:not(.btn-glow){background:transparent;border-color:#fff;color:#fff}
.ask .ask-b .btn:not(.btn-glow):hover{background:rgba(255,255,255,.1)}
@media (max-width:700px){.ask-b{flex-basis:100%}}