:root{
/* Brand */
--gold:#d49304;
--gold-deep:#b67d03;
--gold-soft:#e8b34a;
--gold-glow:rgba(212,147,4,.18);
--navy:#002469;
--navy-600:#0a3187;
--ink:#0e1d3d;
--muted:#5b6884;
--muted-2:#8a93a8;
/* Surfaces */
--cream:#FBF7EE;
--cream-2:#F4ECDA;
--warm-white:#FFFDF8;
--soft-blue:#e9f0fa;
--soft-blue-2:#f3f7fd;
--line:rgba(14,29,61,.09);
/* System */
--r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
/* Alias of --r-pill: a bunch of selectors written for the generate-flow
UI (.pv-act, .sefer-card__perek, .gdrop__chip, and others) reference
var(--pill) directly. That variable was only ever declared on
.genroot{...} below, so every one of those selectors silently lost its
rounding -- rendering with square corners instead of a pill shape --
anywhere it appeared outside a .genroot ancestor (My Class's own
buttons, the homepage subject cards, etc., none of which are ever
wrapped in .genroot). Declaring it here makes var(--pill) resolve
everywhere, matching what every one of those selectors always visually
intended. .genroot's own redeclaration below is now redundant but
harmless (same value) -- left as-is rather than touched. */
--pill:999px;
--shadow-sm:0 1px 2px rgba(14,29,61,.05), 0 4px 14px -6px rgba(14,29,61,.12);
--shadow:0 2px 4px rgba(14,29,61,.04), 0 18px 40px -16px rgba(14,29,61,.22);
--shadow-lg:0 8px 30px -10px rgba(14,29,61,.18), 0 40px 80px -30px rgba(14,29,61,.35);
--maxw:1180px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
font-family:'Inter',system-ui,sans-serif;
color:var(--ink);
background:var(--cream);
line-height:1.6;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--gold-glow);color:var(--navy)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}
.accent{color:var(--gold)}
.accent-i{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--gold)}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-weight:550;font-size:.95rem;letter-spacing:-.01em;
padding:.82rem 1.4rem;border-radius:var(--r-pill);
border:1px solid transparent;cursor:pointer;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease;
white-space:nowrap;
}
.btn svg{transition:transform .35s var(--ease)}
.btn--gold{
background:linear-gradient(180deg,var(--gold-soft),var(--gold));
color:#3a2a00;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -10px rgba(212,147,4,.7), 0 2px 6px rgba(212,147,4,.25);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 18px 34px -12px rgba(212,147,4,.8),0 3px 10px rgba(212,147,4,.3)}
.btn--gold:hover svg{transform:translateX(3px)}
.btn--ghost{
background:rgba(255,255,255,.5);
color:var(--navy);
border-color:var(--line);
backdrop-filter:blur(8px);
}
.btn--ghost:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--shadow-sm)}
.btn--sm{padding:.5rem .95rem;font-size:.84rem}
/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:18px 20px;transition:padding .4s var(--ease)}
.nav.scrolled{padding:10px 20px}
.nav__inner{
width:100%;max-width:1080px;
display:flex;align-items:center;justify-content:space-between;
gap:24px;padding:10px 12px 10px 22px;
border-radius:var(--r-pill);
background:rgba(255,253,248,.62);
border:1px solid rgba(255,255,255,.7);
box-shadow:var(--shadow-sm), 0 1px 0 rgba(255,255,255,.6) inset;
backdrop-filter:blur(18px) saturate(1.4);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
transition:box-shadow .4s var(--ease), background .4s var(--ease), max-width .4s var(--ease);
}
.nav.scrolled .nav__inner{box-shadow:var(--shadow), 0 1px 0 rgba(255,255,255,.6) inset;background:rgba(255,253,248,.8)}
.nav__brand img{height:26px;width:auto}
.nav__links{display:flex;gap:6px}
.nav__links a{
font-size:.92rem;font-weight:500;color:var(--muted);
padding:.5rem .85rem;border-radius:var(--r-pill);
transition:color .2s ease, background .2s ease;
}
.nav__links a:hover{color:var(--navy);background:rgba(14,29,61,.045)}
.nav__cta{padding:.6rem 1.15rem;font-size:.9rem}
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:10px;border-radius:50%;transition:background .2s}
.nav__burger:hover{background:rgba(14,29,61,.05)}
.nav__burger span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.on span:nth-child(2){opacity:0}
.nav__burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__sheet{position:fixed;inset:0;z-index:99;background:rgba(14,29,61,.18);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.nav__sheet.open{opacity:1;pointer-events:auto}
.nav__sheet-in{position:absolute;top:84px;left:16px;right:16px;background:var(--warm-white);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-lg);padding:14px;display:flex;flex-direction:column;gap:4px;transform:translateY(-10px);transition:transform .28s var(--ease)}
.nav__sheet.open .nav__sheet-in{transform:translateY(0)}
.nav__sheet-in a{padding:.85rem 1rem;border-radius:14px;color:var(--ink);font-weight:500;font-size:1.02rem}
.nav__sheet-in a:hover{background:var(--soft-blue-2)}
.nav__sheet-in .btn{margin-top:8px;justify-content:center}
/* ============ HERO ============ */
.hero{position:relative;padding:176px 0 64px;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg::before{ /* warm radial wash */
content:"";position:absolute;inset:-20%;
background:
radial-gradient(60% 50% at 50% 0%, rgba(233,240,250,.9), transparent 70%),
radial-gradient(40% 40% at 85% 20%, rgba(212,147,4,.07), transparent 70%),
radial-gradient(50% 45% at 12% 30%, rgba(0,36,105,.05), transparent 70%);
}
.hero__inner{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:0 28px}
.eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.8rem;font-weight:550;letter-spacing:.02em;color:var(--navy);
background:rgba(255,255,255,.6);border:1px solid var(--line);
padding:.4rem .85rem;border-radius:var(--r-pill);margin-bottom:30px;
box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-glow)}
h1.hero__title{
font-family:'Fraunces',serif;font-weight:500;
font-size:clamp(2.7rem,6.4vw,4.7rem);
line-height:1.04;letter-spacing:-.02em;color:var(--ink);
}
.hero__sub{
margin:26px auto 0;max-width:620px;
font-size:clamp(1.05rem,1.5vw,1.22rem);
color:var(--muted);line-height:1.65;font-weight:420;
}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero__note{margin-top:22px;font-size:.85rem;color:var(--muted-2);display:flex;align-items:center;justify-content:center;gap:.5rem}
.hero__note--copy{letter-spacing:.01em}
.hero__scroll{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:54px;
font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
background:none;border:0;cursor:pointer;transition:color .25s ease}
.hero__scroll:hover{color:var(--navy)}
.hero__scroll .mouse{width:24px;height:38px;border:1.5px solid rgba(14,29,61,.22);border-radius:999px;position:relative}
.hero__scroll .mouse::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);
width:3px;height:7px;border-radius:2px;background:var(--gold);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
/* ============ SECTION HEAD ============ */
.sec{position:relative;padding:96px 0}
section[id]{scroll-margin-top:96px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 18px}
.sec-eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
.sec-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.sec-head p{margin-top:16px;color:var(--muted);font-size:1.08rem}
/* ============ SEFORIM SHELF (SUBJECT EXPLORER) ============ */
#subjects{
background:
radial-gradient(78% 62% at 50% 0%, var(--soft-blue-2), transparent 62%),
linear-gradient(180deg,var(--cream),#fbf9f3 55%, var(--cream));
}
.shelf-scene{position:relative;max-width:860px;margin:78px auto 0;padding:34px 58px 6px}
.shelf-glow{position:absolute;left:50%;top:0;transform:translateX(-50%);
width:78%;height:130px;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at center, rgba(212,147,4,.13), transparent 70%);filter:blur(22px)}
.shelf-viewport{position:relative;z-index:2;display:flex;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;padding-top:92px;margin-top:-92px;scroll-behavior:smooth;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
.shelf-viewport::-webkit-scrollbar{display:none}
.shelf-row{position:relative;z-index:2;display:flex;align-items:flex-end;gap:7px;padding:0 18px;flex:0 0 auto;margin:0 auto;perspective:1400px}
.shelf-row::after{content:"";position:absolute;left:4%;right:4%;bottom:-3px;height:24px;z-index:-1;
background:radial-gradient(ellipse at center, rgba(20,12,4,.32), transparent 72%);filter:blur(7px)}
.shelf-nav{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:8;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(212,147,4,.55);background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#fff;
box-shadow:0 8px 18px -6px rgba(212,147,4,.8),0 1px 0 rgba(255,255,255,.45) inset;
display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.shelf-nav:hover{transform:translateY(-50%) scale(1.09);box-shadow:0 12px 24px -8px rgba(212,147,4,.95),0 1px 0 rgba(255,255,255,.5) inset}
.shelf-nav:active{transform:translateY(-50%) scale(1.02)}
.shelf-nav.left{left:7px}
.shelf-nav.right{right:7px}
.sefer{position:relative;width:var(--w,66px);height:var(--h,270px);border:0;padding:0;cursor:pointer;background:none;
transform-origin:bottom center;transition:transform .45s var(--ease), filter .45s var(--ease)}
.sefer__spine{position:absolute;inset:0;border-radius:3px 6px 6px 3px;overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 8%, rgba(255,255,255,0) 22%, rgba(0,0,0,.08) 68%, rgba(0,0,0,.2) 86%, rgba(0,0,0,.36) 100%),
var(--c1,#13346b);
box-shadow:inset 1.5px 0 0 rgba(255,255,255,.22), inset -2.5px 0 7px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.08)}
/* ---- real, worn, tooled-leather look (see the app owner's reference photo
of antique gilt-tooled spines) — four stacked layers instead of one flat
color: uneven dark/light dye blotching, fine grain, a soft light sheen,
and a burned-edge vignette top & bottom. Same set of layers is mirrored
on the flying cover (.bl-cover) in the open animation, so the sefer never
"changes look" mid-transition. ---- */
.sefer__mottle{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.95;
background:
radial-gradient(ellipse 60% 26% at 10% 6%, rgba(0,0,0,.58), transparent 70%),
radial-gradient(ellipse 50% 24% at 88% 18%, rgba(0,0,0,.4), transparent 70%),
radial-gradient(ellipse 64% 32% at 26% 46%, rgba(0,0,0,.28), transparent 72%),
radial-gradient(ellipse 52% 28% at 82% 58%, rgba(0,0,0,.44), transparent 70%),
radial-gradient(ellipse 62% 34% at 34% 80%, rgba(0,0,0,.48), transparent 70%),
radial-gradient(ellipse 48% 24% at 90% 94%, rgba(0,0,0,.4), transparent 68%),
radial-gradient(ellipse 44% 22% at 6% 92%, rgba(0,0,0,.36), transparent 68%),
radial-gradient(ellipse 90% 30% at 50% 0%, rgba(0,0,0,.32), transparent 60%),
radial-gradient(ellipse 90% 30% at 50% 100%, rgba(0,0,0,.36), transparent 60%)}
/* fine leather-pore grain, plus a coarser crackle of hairline creases —
the crackle is drawn with repeating-linear-gradient (vector, not a
raster noise tile) specifically so it stays crisp and visible even on
the narrowest ~64px spines, where a fine noise PNG/SVG tile would just
wash out into mush once the browser downsamples it. */
.sefer__grain{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:34px 34px}
.sefer__crackle{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
background:
repeating-linear-gradient(96deg, rgba(0,0,0,.24) 0px, transparent 1px, transparent 5px, rgba(255,255,255,.05) 6px, transparent 7px),
repeating-linear-gradient(-8deg, rgba(0,0,0,.16) 0px, transparent 1px, transparent 9px)}
.sefer__sheen{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.2) 44%, rgba(255,255,255,.04) 58%, transparent 76%)}
.sefer__vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.62) 100%)}
/* clean page-head at the very top */
.sefer__top{position:absolute;top:0;left:3px;right:3px;height:4px;border-radius:5px 5px 0 0;z-index:5;
background:linear-gradient(180deg,#f6efdc,#e0d4b6)}
/* the gilt-bordered title panel near the top — every antique bound sefer
has one; ours holds the small emblem (the vertical title running the
full spine below stays as the actual identifier — far more legible on a
66-78px-wide spine than trying to cram a title sideways into a small
box). Sized in %, so it scales cleanly across every subject's own h/w. */
.sefer__panel{position:absolute;left:14%;right:14%;top:8%;height:13%;z-index:3;border-radius:2px;pointer-events:none;
border:1.5px solid var(--foil,#eccd82);opacity:.85;display:flex;align-items:center;justify-content:center;
box-shadow:0 1px 0 rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.2)}
.sefer__panel::before{content:"";position:absolute;inset:2.5px;border:1px solid var(--foil,#eccd82);opacity:.55;border-radius:1px}
.sefer__mark{width:36%;height:60%;border-radius:50%;border:1.3px solid var(--foil,#eccd82);opacity:.8}
/* three raised binding bands (real hand-bound spines have cords under the
leather at roughly these heights) — each a gently embossed ridge with a
thin double gilt line, exactly like the reference photo. */
.sefer__band{position:absolute;left:1.5px;right:1.5px;height:7px;z-index:2;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0) 34%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.32) 62%, rgba(0,0,0,0) 78%, rgba(0,0,0,.24) 100%)}
.sefer__band::before,.sefer__band::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--foil,#eccd82);opacity:.55}
.sefer__band::before{top:1px}
.sefer__band::after{bottom:1px}
.sefer__band--1{top:38%}
.sefer__band--2{top:61%}
.sefer__band--3{top:83%}
/* full title, running vertically up the spine — fits any length, sits
above the bands (a real stamped title often runs right across them) */
.sefer__title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;
writing-mode:vertical-rl;text-orientation:mixed;
font-family:'Fraunces',serif;font-weight:700;
/* the real bug behind "still hard to read": every spine used the SAME
fixed gold fill (#caa04a) no matter what color the leather under it
was -- fine against navy/slate/teal, but gold-on-gold and gold-on-
cream (two of the five covers) had almost no contrast at all, no
matter how the shadow was tuned. Each cover already carries its own
--foil value chosen for contrast against its own leather (dark navy
foil on the light gold/cream covers, light gold foil on the dark
navy/slate/teal covers) -- using that as the actual text color, not
just the accent border, is what makes every spine legible. */
color:var(--foil,#eccd82);
font-size:calc(var(--w,66px) * .3);letter-spacing:.03em;
-webkit-text-stroke: .5px rgba(0,0,0,.4);
text-shadow:
-.03em -.03em 0 rgba(255,255,255,.4),
.04em .04em .03em rgba(0,0,0,.55),
0 .03em .1em rgba(0,0,0,.35)}
.sefer__hint{position:absolute;top:-42px;left:50%;transform:translateX(-50%) translateY(6px);white-space:nowrap;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
padding:.4rem .85rem;border-radius:var(--r-pill);font-family:'Fraunces',serif;font-size:.86rem;font-weight:500;color:var(--navy);
opacity:0;pointer-events:none;transition:opacity .35s var(--ease), transform .35s var(--ease);z-index:20}
.sefer__hint::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);
width:8px;height:8px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sefer:hover{transform:translateY(-22px) scale(1.02);z-index:10;
filter:brightness(1.04) drop-shadow(0 24px 24px rgba(20,12,4,.28))}
.sefer:hover .sefer__hint{opacity:1;transform:translateX(-50%) translateY(0)}
.sefer.launching{opacity:0}
/* book pulls off the shelf, flips to show its COVER, the cover opens, the page zooms to the generator */
.book-launch-layer{position:fixed;inset:0;z-index:9999;pointer-events:auto;overflow:hidden;perspective:1700px}
.bl-scrim{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
background:radial-gradient(ellipse 80% 70% at 50% 46%, rgba(10,8,4,.28) 0%, rgba(8,7,10,.6) 68%, rgba(6,5,8,.74) 100%)}
.bl-stage{position:fixed;transform-style:preserve-3d;will-change:transform}
.bl-cover,.bl-page{position:absolute;left:50%;top:50%}
/* the front cover of the sefer — the SAME antique gilt-tooled leather
system as the shelf spine (.sefer__mottle/__grain/__sheen/__vignette/
__panel/__band), rebuilt at cover proportions so the sefer never visibly
"changes look" the instant it lifts off the shelf. */
.bl-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
transform-origin:left center;will-change:transform;z-index:2;border-radius:5px 10px 10px 5px;backface-visibility:hidden;overflow:hidden;
background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 40%, rgba(0,0,0,.10) 100%), var(--c1,#13346b);
box-shadow:0 40px 80px -22px rgba(20,12,4,.62), inset 0 0 0 1px rgba(255,255,255,.08), inset 2px 0 6px rgba(0,0,0,.18)}
.bl-cover::before{content:"";position:absolute;inset:11px;border:1.5px solid var(--foil,#eccd82);opacity:.5;border-radius:4px;pointer-events:none;z-index:2}
.bl-mottle{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.88;
background:
radial-gradient(ellipse 46% 20% at 14% 8%, rgba(0,0,0,.42), transparent 72%),
radial-gradient(ellipse 40% 18% at 82% 14%, rgba(0,0,0,.3), transparent 72%),
radial-gradient(ellipse 50% 22% at 24% 40%, rgba(0,0,0,.22), transparent 72%),
radial-gradient(ellipse 44% 20% at 78% 52%, rgba(0,0,0,.34), transparent 72%),
radial-gradient(ellipse 50% 24% at 30% 72%, rgba(0,0,0,.38), transparent 72%),
radial-gradient(ellipse 40% 18% at 84% 84%, rgba(0,0,0,.3), transparent 72%),
radial-gradient(ellipse 38% 18% at 12% 90%, rgba(0,0,0,.26), transparent 72%)}
.bl-grain{position:absolute;inset:0;z-index:1;opacity:.42;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:46px 46px}
.bl-crackle{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.42;
background:
repeating-linear-gradient(96deg, rgba(0,0,0,.22) 0px, transparent 1px, transparent 6px, rgba(255,255,255,.05) 7px, transparent 8px),
repeating-linear-gradient(-8deg, rgba(0,0,0,.14) 0px, transparent 1px, transparent 11px)}
.bl-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.22) 44%, rgba(255,255,255,.05) 58%, transparent 76%)}
.bl-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 16%, transparent 78%, rgba(0,0,0,.5) 100%),
linear-gradient(90deg, rgba(0,0,0,.3) 0%, transparent 12%, transparent 88%, rgba(0,0,0,.38) 100%)}
.bl-panel{position:absolute;left:17%;right:17%;top:9%;height:11%;z-index:2;border-radius:3px;pointer-events:none;
border:1.5px solid var(--foil,#eccd82);opacity:.85;display:flex;align-items:center;justify-content:center;
box-shadow:0 1px 0 rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.2)}
.bl-panel::before{content:"";position:absolute;inset:3px;border:1px solid var(--foil,#eccd82);opacity:.5;border-radius:2px}
.bl-mark{width:30%;height:56%;border-radius:50%;border:1.3px solid var(--foil,#eccd82);opacity:.8}
.bl-band{position:absolute;left:7%;right:7%;height:8px;z-index:2;pointer-events:none;border-radius:1px;
background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 34%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.3) 62%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%)}
.bl-band::before,.bl-band::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--foil,#eccd82);opacity:.55}
.bl-band::before{top:1px}
.bl-band::after{bottom:1px}
.bl-band--1{bottom:16%}
.bl-band--2{bottom:9%}
.bl-emblem,.bl-title{position:relative;z-index:3}
.bl-emblem{width:38px;height:38px;border-radius:50%;border:2px solid var(--foil,#eccd82);opacity:.7}
.bl-title{font-family:'Fraunces',serif;font-weight:700;text-align:center;line-height:1.12;
letter-spacing:.01em;padding:0 16px;
/* same per-cover --foil fill as the shelf spine's title, for the same
reason: a fixed gold fill vanished against the gold/cream covers. */
color:var(--foil,#eccd82);
-webkit-text-stroke: .5px rgba(0,0,0,.4);
text-shadow:
-.03em -.03em 0 rgba(255,255,255,.4),
.04em .04em .03em rgba(0,0,0,.55),
0 .03em .1em rgba(0,0,0,.35)}
/* the inner page revealed when the cover opens, then zoomed to fill the screen */
.bl-page{transform-origin:center center;background:#fbf7ef;will-change:transform;z-index:1;opacity:0;border-radius:6px 10px 10px 6px;
box-shadow:0 30px 80px -20px rgba(20,12,4,.5), inset 0 0 0 1px rgba(0,0,0,.03)}
/* wooden shelf board */
.shelf-board{position:relative;z-index:1}
.shelf-board__top{height:13px;border-radius:3px 3px 0 0;
background:linear-gradient(180deg,#d6b78a,#b8966a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.shelf-board__front{position:relative;height:26px;border-radius:0 0 7px 7px;overflow:hidden;
background:linear-gradient(180deg,#9c7a52,#6f5436);
box-shadow:0 24px 36px -14px rgba(20,12,4,.4), inset 0 1px 0 rgba(255,255,255,.18)}
.shelf-board__front::after{content:"";position:absolute;inset:0;opacity:.4;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.06) 2px 5px)}
.subjects-note{text-align:center;margin-top:28px;color:var(--muted-2);font-size:.9rem}
/* ============ HOW IT WORKS ============ */
#how{background:var(--warm-white)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.step{
position:relative;padding:30px 26px 28px;border-radius:var(--r-lg);
background:linear-gradient(180deg,#fff,var(--cream));
border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step__n{font-family:'Fraunces',serif;font-style:italic;font-size:1rem;color:var(--gold-deep);
width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;
background:var(--gold-glow);margin-bottom:18px}
.step h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.35rem;color:var(--ink);margin-bottom:8px}
.step p{color:var(--muted);font-size:.97rem}
.step .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{font-size:.78rem;font-weight:500;color:var(--navy);background:var(--soft-blue);
border:1px solid rgba(0,36,105,.07);padding:.28rem .65rem;border-radius:var(--r-pill)}
/* ============ WHY / COMPARISON ============ */
#why{background:linear-gradient(180deg,var(--cream),#f5eee0)}
.cmp{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1.06fr;
max-width:860px;margin:58px auto 0}
/* shadow plate behind the gold column — absolute so it doesn't consume a grid track */
.cmp__hl{position:absolute;top:0;bottom:0;left:70%;right:0;z-index:0;border-radius:18px;
box-shadow:0 26px 50px -20px rgba(212,147,4,.5)}
/* every cell is a real grid cell, so rows are shared and always aligned */
.cmp__hd,.cmp__cell{position:relative;z-index:1;border-bottom:1px solid var(--line)}
.cmp__hd{min-height:98px;padding:20px 18px;display:flex;flex-direction:column;justify-content:center}
.cmp__cell{min-height:62px;padding:13px 20px;display:flex;align-items:center}
/* FEATURE column (white) */
.cmp__hd--feat{align-items:flex-start;border-bottom-color:transparent}
.cmp__feattitle{font-family:'Fraunces',serif;font-weight:500;font-size:1.18rem;color:var(--ink);line-height:1.2}
.cmp__featsub{font-size:.82rem;color:var(--muted);margin-top:5px}
.cmp__cell--feat{color:var(--ink);font-size:.97rem;font-weight:450;line-height:1.4;border-color:var(--line)}
/* OTHER AI column — stronger gray */
.cmp__hd--ai,.cmp__cell--ai{background:#e7eaee;text-align:center}
.cmp__hd--ai{align-items:center}
.cmp__cell--ai{flex-direction:column;justify-content:center;gap:6px;border-color:rgba(14,29,61,.07)}
.cmp__name--ai{font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem;color:#5d6573}
.cmp__tag--ai{font-size:.76rem;color:#949ba6;margin-top:4px}
/* REBBISDESK column — stronger gold, bordered, no spill */
.cmp__hd--rd,.cmp__cell--rd{background:linear-gradient(180deg,#fff8e8,#fdf1d4);text-align:center;
border-left:2px solid var(--gold);border-right:2px solid var(--gold)}
.cmp__hd--rd{align-items:center;border-top:2px solid var(--gold);border-bottom:0;
border-radius:17px 17px 0 0;background:linear-gradient(180deg,var(--gold-soft),var(--gold))}
.cmp__cell--rd{flex-direction:column;justify-content:center;gap:6px;border-bottom-color:rgba(212,147,4,.2)}
.cmp__cell--rd:last-child{border-bottom:2px solid var(--gold);border-radius:0 0 17px 17px}
.cmp__name--rd{font-family:'Fraunces',serif;font-weight:600;font-size:1.16rem;color:#3a2a00}
.cmp__tag--rd{font-size:.76rem;color:#6b4e07;margin-top:4px;font-weight:500}
.cmp__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
background:var(--navy);color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:.32rem .8rem;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--shadow-sm);z-index:4}
.mark{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mark svg{width:14px;height:14px}
.mark--x{background:#ccd1d8;color:#727a87}
.mark--check{background:var(--gold);color:#fff;box-shadow:0 5px 12px -3px rgba(212,147,4,.8)}
.cmp__sub{font-size:.77rem;line-height:1.25}
.cmp__sub--ai{color:#8b929d}
.cmp__sub--rd{color:#6b4e07;font-weight:550}
@media (max-width:680px){
.cmp{grid-template-columns:1.4fr .9fr .96fr;font-size:.88rem}
.cmp__cell,.cmp__hd{padding-left:12px;padding-right:12px}
.cmp__sub{display:none}
.cmp__name--ai,.cmp__name--rd{font-size:.92rem}
.cmp__feattitle{font-size:1rem}
}
/* ============ VISION / THE REBBE ============ */
#vision{background:linear-gradient(180deg,#012c78,#001433);color:#dde5f5;position:relative;overflow:hidden}
#vision::before{content:"";position:absolute;top:-25%;right:-8%;width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle,rgba(212,147,4,.2),transparent 65%);pointer-events:none}
#vision::after{content:"";position:absolute;bottom:-30%;left:-10%;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(59,90,134,.4),transparent 68%);pointer-events:none}
.vision-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
/* portrait */
.vision-figure{margin:0}
.vision-frame{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(160deg,#0a3a8a,#022156);
border:1px solid rgba(236,205,130,.45);
box-shadow:0 30px 70px -28px rgba(0,0,0,.7), inset 0 0 0 6px rgba(255,255,255,.03);}
.vision-frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(236,205,130,.4);border-radius:16px;pointer-events:none;z-index:3}
.vision-img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
/* respectful edge treatment — soft gold light + navy feather into the section, never over the face */
.vision-veil{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
background:
radial-gradient(130% 80% at 50% -8%, rgba(236,205,130,.22), transparent 46%),
radial-gradient(125% 120% at 50% 42%, transparent 60%, rgba(1,18,46,.5) 100%);
box-shadow:inset 0 0 60px 8px rgba(1,18,46,.45)}
.vision-cap{margin-top:18px;text-align:center;font-size:.84rem;color:#8fa3c8;line-height:1.55}
.vision-cap b{display:block;color:#eef3fb;font-family:'Fraunces',serif;font-weight:500;font-size:1rem;margin-bottom:3px}
.vision-cap-heb{display:block;color:var(--gold-soft);font-size:1.02rem;margin-bottom:4px}
/* content */
.vision-eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.vision-content h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.1;letter-spacing:-.02em;color:#fff}
.vision-content > p{margin-top:20px;color:#c2cfe6;font-size:1.08rem;line-height:1.7;max-width:560px}
.vision-cta{margin-top:28px}
.vision-quote{display:block;position:relative;margin:34px 0 0;padding:28px 30px 24px 34px;border-radius:var(--r);
background:rgba(255,255,255,.05);border:1px solid rgba(236,205,130,.25);border-left:3px solid var(--gold);
text-decoration:none;color:inherit;cursor:pointer;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, border-color .3s ease}
.vision-quote:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(236,205,130,.5);
box-shadow:0 24px 50px -22px rgba(0,0,0,.6)}
.vision-quote .mark{position:absolute;top:-16px;left:18px;font-family:'Fraunces',serif;font-size:4rem;color:var(--gold);opacity:.5;line-height:1}
.vision-quote p{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:1.16rem;line-height:1.6;color:#f3f6fc}
.vision-quote p [lang=he]{font-style:normal;font-size:1.12em}
.vision-cite{display:block;margin-top:16px;font-size:.84rem;color:#9fb1d0;line-height:1.5}
.vision-cite-name{display:block;color:var(--gold-soft);font-size:1.04rem;margin-bottom:2px}
.vision-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:16px;
font-family:'Inter';font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--gold-soft)}
.vision-more svg{transition:transform .35s var(--ease)}
.vision-quote:hover .vision-more svg{transform:translateX(4px)}
.vision-src{margin-top:22px;font-size:.84rem;color:#8298bf;line-height:1.65}
.vision-src b{color:#b7c6e2;font-weight:600}
.vision-src [lang=he]{color:var(--gold-soft);font-size:1.08em}
[lang=he]{font-family:'Frank Ruhl Libre','Fraunces',serif;font-weight:500}
@media (max-width:820px){
.vision-grid{grid-template-columns:1fr;gap:36px}
.vision-figure{max-width:360px;margin:0 auto}
}
/* ============ SOURCE OVERLAY (in-page) ============ */
#srcOverlay{position:fixed;inset:0;z-index:300;background:var(--cream);overflow-y:auto;
opacity:0;visibility:hidden;transition:opacity .35s var(--ease)}
#srcOverlay.open{opacity:1;visibility:visible}
.so-bar{position:sticky;top:0;background:rgba(251,247,238,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:2}
.so-bar__in{max-width:760px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.so-bar__in img{height:24px}
.so-close{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:500;color:var(--muted);padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;transition:.2s}
.so-close:hover{color:var(--navy);box-shadow:var(--shadow-sm)}
.so-close svg{transition:transform .3s var(--ease)}.so-close:hover svg{transform:translateX(-3px)}
.so-wrap{max-width:760px;margin:0 auto;padding:0 28px}
.so-head{padding:56px 0 8px;text-align:center}
.so-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
.so-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.so-head p{margin-top:12px;color:var(--muted);font-size:1.02rem}
.so-q{margin:40px 0 10px;padding:36px 34px;border-radius:var(--r-lg);position:relative;background:linear-gradient(165deg,#fff,#fbf4e4);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(14,29,61,.3)}
.so-q::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:3px;background:linear-gradient(var(--gold-soft),var(--gold))}
.so-q .heb{font-family:'Frank Ruhl Libre',serif;font-size:1.45rem;line-height:1.7;color:var(--navy);direction:rtl;text-align:right;margin-bottom:16px}
.so-q .en{font-family:'Fraunces',serif;font-style:italic;font-size:1.22rem;line-height:1.5;color:var(--ink)}
.so-q .en b{font-style:normal;font-weight:600}
.so-label{margin:44px 0 16px;font-family:'Fraunces',serif;font-size:1.35rem;font-weight:500;color:var(--ink)}
.so-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.so-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.so-card.full{grid-column:1/-1}
.so-card h4{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px;font-weight:600}
.so-card p{font-size:.96rem;color:var(--ink)}
.so-card .he{font-family:'Frank Ruhl Libre',serif;color:var(--navy);font-size:1.12rem}
.so-card a{color:var(--gold-deep);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(212,147,4,.4)}
.so-note{font-size:.85rem;color:var(--muted-2);margin-top:6px;font-style:italic}
.so-refs{display:flex;flex-direction:column;gap:14px}
.so-ref{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.so-ref .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.so-ref .name{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;color:var(--ink)}
.so-ref .loc{font-size:.8rem;color:var(--gold-deep);font-weight:600;white-space:nowrap}
.so-ref .he{font-family:'Frank Ruhl Libre',serif;font-size:1.18rem;color:var(--navy);direction:rtl;text-align:right;margin:6px 0 10px;line-height:1.7}
.so-ref .en{color:var(--muted);font-size:.95rem}
.so-closing{margin:40px 0;padding:24px 28px;border-radius:var(--r);background:#fff8ea;border:1px solid rgba(212,147,4,.3)}
.so-closing h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.2rem;color:var(--ink);margin-bottom:8px}
.so-closing p{color:var(--muted)}
.so-foot{padding:24px 0 70px;text-align:center;color:var(--muted-2);font-size:.85rem}
@media (max-width:560px){.so-grid{grid-template-columns:1fr}.so-q{padding:28px 24px}}
/* ============ FAQ ============ */
#faq{background:var(--cream)}
.faq{max-width:780px;margin:46px auto 0}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:24px 4px;font-family:'Fraunces',serif;font-weight:500;font-size:1.22rem;color:var(--ink)}
.faq__q .ic{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--gold-deep);transition:transform .4s var(--ease),background .3s}
.faq__item.open .faq__q .ic{transform:rotate(45deg);background:var(--gold-glow)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.faq__a p{padding:0 4px 26px;color:var(--muted);font-size:1.02rem;max-width:90%}
/* ============ FOOTER ============ */
footer{background:linear-gradient(180deg,#002469,#001230);color:#cdd6e8;padding:74px 0 30px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(212,147,4,.16),transparent 65%);pointer-events:none}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{height:30px;margin-bottom:18px}
.foot-brand p{color:#9fb0cf;font-size:.96rem;max-width:300px}
.foot-wait{margin-top:22px;display:flex;gap:8px;max-width:330px}
.foot-wait input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-pill);padding:.7rem 1rem;color:#fff;font-family:inherit;font-size:.9rem;outline:none}
.foot-wait input::placeholder{color:#7e8eae}
.foot-wait input:focus{border-color:var(--gold-soft)}
.foot-col h5{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#7e8eae;margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:#cdd6e8;font-size:.95rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--gold-soft)}
.foot-bottom{margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:#7e8eae;font-size:.85rem}
/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ============ RESPONSIVE ============ */
@media (max-width:860px){
.nav__links{display:none}
.nav__cta{display:none}
.nav__burger{display:flex}
.steps{grid-template-columns:1fr}
.compare{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr 1fr;gap:30px}
.foot-brand{grid-column:1/-1}
.shelf-viewport{justify-content:flex-start;-webkit-overflow-scrolling:touch}
.shelf-row{padding:0 16px 4px;gap:9px}
.sefer{flex:0 0 auto;transform:scale(.92)}
.sefer:hover{transform:translateY(-14px) scale(.94)}
.shelf-nav{display:none}
}
@media (max-width:520px){
.hero{padding:150px 0 80px}
.foot-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{animation:none !important}
html{scroll-behavior:auto}
}
/* ===== sound toggle (was injected by JS in the concept) ===== */
.sfx-toggle{position:fixed;right:20px;bottom:20px;z-index:200;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(255,255,255,.7);background:rgba(255,253,248,.7);backdrop-filter:blur(14px) saturate(1.3);
-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 2px 4px rgba(14,29,61,.06),0 14px 30px -12px rgba(14,29,61,.3);
cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0e2a63;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,color .2s}
.sfx-toggle:hover{transform:translateY(-2px) scale(1.04)}
.sfx-toggle.off{color:#9aa1ac}
.sfx-toggle svg{width:19px;height:19px}
/* ===================== GENERATE FLOW (scoped under .genroot) ===================== */
.genroot{--soft:#EAF0F9;--soft-2:#f3f7fd;--line-2:rgba(14,29,61,.16);--pill:999px;background:var(--cream);min-height:100vh;display:block}
.genroot .gnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;background:rgba(251,247,238,.82);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.genroot .gnav__l{display:flex;align-items:center;gap:16px}
.genroot .gnav__l img{height:24px}
.genroot .gnav__crumb{display:flex;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.genroot .gnav__crumb .c{color:var(--muted-2)}
.genroot .gnav__crumb .c.on{color:var(--navy);font-weight:600}
.genroot .gnav__crumb .sep{color:var(--line-2)}
.genroot .gback{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:var(--pill);padding:.45rem .9rem;background:#fff;transition:.2s}
.genroot .gback:hover{color:var(--navy);box-shadow:var(--shadow-sm)}
.genroot .gwrap{max-width:1200px;margin:0 auto;padding:34px 26px 120px;display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start}
.genroot .ghead{margin-bottom:26px}
.genroot .gkick{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:10px}
.genroot .ghead h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2rem,4vw,2.7rem);letter-spacing:-.02em;color:var(--ink)}
.genroot .ghead p{margin-top:8px;color:var(--muted);font-size:1.02rem;max-width:34rem}
.genroot .gstep{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm);transition:opacity .4s var(--ease),filter .4s var(--ease)}
.genroot .gstep.locked{opacity:.45;pointer-events:none;filter:saturate(.6)}
.genroot .gstep__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.genroot .gstep__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--navy);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.genroot .gstep.done .gstep__n{background:var(--gold);color:#3a2a00}
.genroot .gstep__t{font-family:'Fraunces',serif;font-weight:500;font-size:1.3rem;color:var(--ink)}
.genroot .gstep__hint{margin-left:auto;font-size:.82rem;color:var(--muted-2)}
.genroot .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.genroot .opt{border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;background:var(--warm-white);transition:.22s var(--ease);display:flex;flex-direction:column;gap:4px;text-align:left;font-family:inherit}
.genroot .opt:hover{border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.genroot .opt.sel{border-color:var(--gold);background:linear-gradient(180deg,#fff,#fdf6e7);box-shadow:0 0 0 1px var(--gold) inset}
.genroot .opt .nm{font-weight:600;color:var(--navy);font-size:1rem}
.genroot .opt .nm .he{font-family:'Frank Ruhl Libre',serif;font-weight:500;font-size:1.15rem}
.genroot .opt .ds{font-size:.8rem;color:var(--muted-2)}
/* Chumash's "Choose a Sefer" step — the Five Books get a bigger, more
ceremonial hero-card treatment than a generic .opt: a real, clearly-visible
symbolic illustration (ChumashMotif in GenerateFlow.tsx) sitting in its own
space ABOVE the Hebrew/English title — not a faded watermark behind it. */
.sefer-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:16px}
.sefer-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
border:1.5px solid var(--line);border-radius:18px;padding:20px 16px 18px;cursor:pointer;font-family:inherit;text-align:center;
background:radial-gradient(120% 100% at 50% -10%, rgba(212,147,4,.08), transparent 60%), linear-gradient(180deg,#fff,var(--cream-2));
transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.sefer-card:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 22px 40px -22px rgba(20,12,4,.28)}
.sefer-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 22px 40px -20px rgba(212,147,4,.4);
background:radial-gradient(120% 100% at 50% -10%, rgba(212,147,4,.16), transparent 60%), linear-gradient(180deg,#fff,#fdf6e7)}
.sefer-card__motif{position:relative;width:100%;height:64px;display:flex;align-items:center;justify-content:center;
color:var(--gold-deep);opacity:.92;pointer-events:none;transition:opacity .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}
.sefer-card__motif svg{width:100%;height:100%}
.sefer-card__motif img{width:auto;height:100%;max-width:100%;object-fit:contain}
.sefer-card:hover .sefer-card__motif{opacity:1;transform:translateY(-2px)}
.sefer-card.sel .sefer-card__motif{opacity:1;color:var(--gold)}
.sefer-card__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.sefer-card__he{font-family:'Frank Ruhl Libre',serif;font-weight:600;font-size:1.55rem;color:var(--gold-deep);line-height:1.15}
.sefer-card__en{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:1.08rem;color:var(--ink);letter-spacing:.01em}
.sefer-card__perek{margin-top:4px;font-size:.72rem;font-weight:600;letter-spacing:.03em;color:var(--muted-2);
border:1px solid var(--line);border-radius:var(--pill);padding:.18rem .65rem;background:#fff}
.sefer-card.sel .sefer-card__perek{border-color:rgba(212,147,4,.4);color:var(--gold-deep)}
@media (max-width:560px){.sefer-card-grid{grid-template-columns:1fr 1fr}.sefer-card{min-height:168px}.sefer-card__motif{height:52px}}
/* .gchip/.gchips are shared pill-button primitives -- used inside the
generator flow (.genroot) but also by My Class (assign homework's
material-mode chips, the note/milestone toggle) and the Tools tab, none
of which sit under .genroot. Kept unscoped so every one of those actually
picks up real RebbisDesk styling instead of rendering as bare, unstyled
buttons (which is what a rebbi was seeing on the assign-homework page). */
.gchips{display:flex;flex-wrap:wrap;gap:9px}
.gchip{border:1.5px solid var(--line);border-radius:var(--pill);padding:.5rem 1rem;font-size:.92rem;color:var(--navy);background:var(--warm-white);cursor:pointer;transition:.18s var(--ease);font-family:inherit}
.gchip:hover{border-color:var(--gold-soft);background:#fff}
.gchip.sel{border-color:var(--gold);background:var(--gold);color:#3a2a00;font-weight:600}
/* "Coming soon" — Rebbe/sefer not yet backed by a verified source
(lib/ai/sources.ts). Visible but inert: no hover lift, no click. */
.genroot .opt.soon,.gchip.soon{cursor:not-allowed;opacity:.5;background:var(--soft);color:var(--muted-2)}
.genroot .opt.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.gchip.soon:hover{border-color:var(--line);background:var(--soft)}
.genroot .soon-tag{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted-2);background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:.15rem .5rem;margin-top:2px;display:inline-block;width:fit-content}
.gchip .soon-tag{margin-top:0;margin-inline-start:.5em}
/* ============ CHASSIDUS GENERATOR — a deliberately different flow ============
Everything else in /create/[subject] shares one neutral look across every
subject. Chassidus gets its own moment: a warm wash on the page itself,
a candle in the kicker, gold-tinted chips for sefer/section picking, and
-- the centerpiece -- a real portrait-framed "name card" per Rebbe (see
lib/rebbeim.ts + the RebbeCard component in GenerateFlow.tsx). A Rebbe
with no photo on file yet still gets the full gold-framed treatment,
just with a monogram instead of a photo -- never a broken image, never
a half-finished-looking card. */
.genroot--chassidus{background:radial-gradient(1100px 380px at 50% -140px, rgba(212,147,4,.11), transparent 62%), var(--cream)}
.genroot--chassidus .gkick{display:flex;align-items:center;gap:.4em}
.gkick__flame{font-size:1em;filter:drop-shadow(0 1px 1px rgba(212,147,4,.35))}
/* deeper chassidus levels (sefer, section, ...) — same chip shape as
everywhere else, just warmed up to feel like part of this flow rather
than a generic picker. */
.genroot .chassidus-step .gchip{border-color:rgba(212,147,4,.3);background:linear-gradient(180deg,#fff,var(--cream-2));font-family:'Frank Ruhl Libre','Fraunces',serif;font-size:.96rem}
.genroot .chassidus-step .gchip:hover{border-color:var(--gold)}
.genroot .chassidus-step .gchip.sel{background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-color:var(--gold-deep);box-shadow:0 8px 20px -10px rgba(212,147,4,.55)}
/* the Rebbe step itself -- normal RebbisDesk colors, same plain white
card + gold-accent treatment as every other .gstep in the generator
(no separate dark panel). */
.genroot .gstep.rebbe-step{position:relative}
/* Each card is its own small "hero" -- a big glowing gold-framed portrait
on top, Hebrew title + English name below -- loosely inspired by the app
owner's own rough mockup (a large glowing portrait over a seforim list),
scaled down to fit seven of these in one grid rather than one per screen. */
.rebbe-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px}
.rebbe-card{
position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;
padding:22px 14px 18px; text-align:center; cursor:pointer; font-family:inherit;
border-radius:20px; border:1.5px solid var(--line);
background:linear-gradient(180deg,#fff,var(--cream-2));
transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.rebbe-card:hover{transform:translateY(-4px); border-color:var(--gold-soft); box-shadow:var(--shadow-sm)}
.rebbe-card.sel{border-color:var(--gold); background:linear-gradient(180deg,#fff,#fdf6e7); box-shadow:0 0 0 1px var(--gold) inset}
.rebbe-card__portrait{position:relative; flex:none; width:104px; height:104px}
.rebbe-card__glow{position:absolute; inset:-26px; border-radius:50%; background:radial-gradient(circle, rgba(232,179,74,.5), rgba(232,179,74,0) 68%); filter:blur(12px); opacity:.55; transition:opacity .3s var(--ease)}
.rebbe-card:hover .rebbe-card__glow,.rebbe-card.sel .rebbe-card__glow{opacity:1}
.rebbe-card__ring{position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(232,179,74,.4); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); transform:scale(.92)}
.rebbe-card:hover .rebbe-card__ring,.rebbe-card.sel .rebbe-card__ring{opacity:1; transform:scale(1)}
.rebbe-card__portrait img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;border:2.5px solid var(--gold-soft);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 18px rgba(14,29,61,.14);display:block}
.rebbe-card__mono{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:2.1rem;color:#3a2a00;background:linear-gradient(160deg,var(--gold-soft),var(--gold));border:2.5px solid rgba(255,255,255,.6)}
/* "plate" variant — a real sefer title page standing in for a portrait
(lib/rebbeim.ts) reads as a small framed book cover, not a circular
crop that would slice into its own ornamental border. */
.rebbe-card__portrait--plate .rebbe-card__glow{border-radius:14px}
.rebbe-card__portrait--plate .rebbe-card__ring{border-radius:14px}
.rebbe-card__portrait--plate img{border-radius:8px;object-position:center}
.rebbe-card__portrait--plate .rebbe-card__mono{border-radius:8px}
.rebbe-card__names{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.rebbe-card__he{font-family:'Frank Ruhl Libre',serif;font-size:1rem;color:var(--gold-deep);line-height:1.25}
.rebbe-card__en{font-weight:600;color:var(--navy);font-size:.96rem;line-height:1.3}
.rebbe-card.sel .rebbe-card__en{color:var(--ink)}
@media (max-width:640px){
.rebbe-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.rebbe-card{padding:16px 8px 14px}
.rebbe-card__portrait{width:76px;height:76px}
}
@media (max-width:400px){
.rebbe-grid{grid-template-columns:1fr 1fr}
}
/* "Coming soon" Rebbe card -- a real, canonical Rebbe (lib/rebbeim.ts's
ALL_REBBEIM) with no real Library content uploaded yet. Shown, never
hidden, so a rebbi can see the full lineage -- but dimmed, unclickable,
and clearly labeled, never a fabricated or generatable source. */
.rebbe-card.locked{cursor:not-allowed;opacity:.55;filter:grayscale(.4)}
.rebbe-card.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.rebbe-card__soon{margin-top:3px}
.genroot .row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end}
.genroot .field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:7px;font-weight:500}
.genroot .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--pill);overflow:hidden;background:#fff}
.genroot .stepper button{border:0;background:none;width:38px;height:40px;font-size:1.2rem;color:var(--navy);cursor:pointer;transition:.15s;font-family:inherit}
.genroot .stepper button:hover{background:var(--soft)}
.genroot .stepper .val{width:54px;min-width:54px;text-align:center;font-weight:600;font-size:1rem;color:var(--navy);border:0;background:none;outline:none;font-family:inherit;padding:0;-moz-appearance:textfield}
.genroot .stepper .val::-webkit-outer-spin-button,.genroot .stepper .val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.genroot .stepper .val:focus{background:var(--soft)}
.genroot .mini{width:64px;height:40px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-family:inherit;font-size:1rem;color:var(--navy);outline:none}
.genroot .mini:focus{border-color:var(--gold-soft)}
.genroot .field.grow{flex:1 1 100%;max-width:460px}
.genroot .textin{width:100%;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;font-family:inherit;font-size:1rem;color:var(--navy);background:#fff;outline:none;transition:.15s}
.genroot .textin::placeholder{color:var(--muted-2)}
.genroot .textin:focus{border-color:var(--gold-soft);box-shadow:0 0 0 4px rgba(212,147,4,.1)}
.genroot .tilde{color:var(--muted-2);padding-bottom:10px}
/* RebbisDesk-style search + dropdown (ChassidusSearchDropdown /
ChassidusChapterDropdown in GenerateFlow.tsx) -- deliberately NOT a
native