*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,Arial,sans-serif;color:#24174b;background:#fbf7f0;overflow-x:hidden}button,input{font:inherit}.hidden{display:none!important}.ambient-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 8% 18%,rgba(255,220,139,.55),transparent 24%),radial-gradient(circle at 90% 10%,rgba(225,242,255,.9),transparent 30%),radial-gradient(circle at 18% 88%,rgba(255,224,233,.62),transparent 26%),linear-gradient(118deg,#fffbf5 0%,#fff9fb 52%,#f7fcff 100%)}.bg-orb{position:absolute;border-radius:999px;filter:blur(22px);opacity:.35}.orb-1{width:260px;height:260px;background:#ffd77a;left:-70px;top:130px}.orb-2{width:280px;height:280px;background:#cbeefe;right:-80px;top:70px}.orb-3{width:240px;height:240px;background:#ffcddf;left:14%;bottom:5%}.spark{position:absolute;color:#f1bf4e;font-size:24px;opacity:.65;animation:twinkle 3s ease-in-out infinite}.s-1{top:29%;left:2%}.s-2{top:20%;left:45%;animation-delay:.8s}.s-3{right:6%;bottom:12%;animation-delay:1.4s}@keyframes twinkle{50%{transform:scale(1.25) rotate(12deg);opacity:1}}.site-header{width:min(1468px,calc(100% - 64px));margin:18px auto 0;padding:24px 40px;border-radius:22px;background:rgba(255,255,255,.86);border:1px solid rgba(105,76,124,.12);box-shadow:0 14px 34px rgba(86,63,103,.08);display:flex;align-items:center;justify-content:space-between;gap:28px;backdrop-filter:blur(18px)}.brand{text-decoration:none;color:#22154b;display:grid;gap:6px}.brand-word{display:flex;align-items:center;font-size:31px;font-weight:900;letter-spacing:.18em;line-height:1}.brand-word img{width:42px;height:42px;object-fit:contain;margin:0 3px}.brand small{text-transform:uppercase;letter-spacing:.5em;font-size:13px;font-weight:800;margin-left:36px}.main-nav{display:flex;align-items:center;gap:56px}.main-nav a{text-decoration:none;color:#30283d;font-size:15px;font-weight:700;padding:11px 0;position:relative}.main-nav a.active{color:#7d43d1}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#7d43d1}.header-login,.account-pill{height:50px;padding:0 28px;border:1px solid rgba(132,87,191,.17);border-radius:999px;background:rgba(255,255,255,.68);color:#7440c7;font-weight:800;display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}.header-login img,.account-pill img{width:22px;height:22px;object-fit:contain}.hero{width:min(1468px,calc(100% - 64px));min-height:700px;margin:0 auto;display:grid;grid-template-columns:.92fr .95fr .75fr;gap:18px;align-items:center;position:relative}.hero-copy{padding-left:58px;z-index:3}.hero-copy h1{font-family:"Playfair Display",serif;margin:0;font-size:clamp(56px,5.15vw,80px);line-height:1.08;font-weight:700;letter-spacing:-.025em}.hero-copy h1 span{color:#d8668c}.hero-copy p{max-width:520px;margin:25px 0 0;font-size:19px;line-height:1.55;color:#4f4960;font-weight:600}.hero-offers{display:flex;gap:14px;margin-top:36px}.hero-offers article{width:205px;height:72px;border:1px solid rgba(105,76,124,.12);border-radius:13px;background:rgba(255,255,255,.76);display:flex;align-items:center;gap:14px;padding:0 18px;box-shadow:0 10px 24px rgba(86,63,103,.05)}.hero-offers img{width:42px;height:42px;object-fit:contain}.hero-offers strong,.hero-offers small{display:block}.hero-offers strong{font-size:15px;font-weight:900}.hero-offers small{margin-top:5px;color:#6c6475;font-size:12px;font-weight:650}.short-note{display:flex;align-items:center;gap:18px;margin-top:42px}.short-note img{width:58px;height:58px;object-fit:contain}.short-note span{max-width:390px;font-size:15px;line-height:1.55;color:#4f4960;font-weight:700}.hero-art{position:relative;height:630px;display:flex;align-items:center;justify-content:center}.hero-art:before{content:"";position:absolute;left:8%;right:8%;bottom:62px;height:110px;border-radius:50%;background:rgba(255,203,222,.58)}.cloud{position:absolute;background:#ffdfe8;border-radius:999px;opacity:.85}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:999px}.cloud-a{width:310px;height:92px;left:12%;top:138px}.cloud-a:before{width:140px;height:140px;left:72px;bottom:22px}.cloud-a:after{width:95px;height:95px;right:48px;bottom:12px}.cloud-b{width:170px;height:58px;right:16%;top:195px;opacity:.55}.cloud-b:before{width:75px;height:75px;left:36px;bottom:12px}.book-stack{position:relative;width:575px;height:560px}.book-card{position:absolute;border-radius:8px;background:#fff;border:1px solid rgba(80,60,100,.08);box-shadow:0 22px 35px rgba(86,63,103,.12);overflow:hidden}.book-card h3{margin:0;color:#7d5686;font-family:"Playfair Display",serif;line-height:1.05}.book-card p{margin:7px 0 0;font-size:12px;color:#746e7b}.book-main{left:56px;top:178px;width:236px;height:245px;background:linear-gradient(145deg,#fff8f4,#fff);padding:52px 26px 20px;text-align:center}.book-main h3{font-size:24px}.book-main strong{font-size:35px;color:#d68176}.tiny-spark{position:absolute;right:28px;top:25px;color:#f3bf4d}.bear-face{position:absolute;left:77px;bottom:28px;width:90px;height:90px;border-radius:50%;background:#c99662}.bear-face:before,.bear-face:after{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:#c99662;top:-8px}.bear-face:before{left:5px}.bear-face:after{right:5px}.book-numbers{right:124px;top:165px;width:190px;height:240px;background:linear-gradient(145deg,#ffd3c3,#fff3ef);padding:62px 24px}.book-numbers h3{font-size:33px;color:#b85d65}.rainbow-mark{position:absolute;left:35px;bottom:42px;width:118px;height:78px;border-radius:100px 100px 0 0;border:18px solid #8d78b5;border-bottom:0;box-shadow:inset 0 0 0 14px #e6c383}.book-science{right:82px;top:95px;width:190px;height:180px;background:linear-gradient(145deg,#b6c7ec,#eef4ff);padding:40px 28px;z-index:-1}.book-science h3{font-size:25px;color:#4d456f}.planet-dot{position:absolute;left:24px;top:34px;width:32px;height:32px;border-radius:50%;background:#f6d8b8}.book-kindness{right:64px;bottom:62px;width:210px;height:170px;background:linear-gradient(145deg,#fff,#fff7fb);padding:28px;text-align:center;transform:rotate(4deg)}.book-kindness h3{font-size:22px;color:#b99be7}.bunny-line{width:92px;height:54px;border:3px solid #d9cfd7;border-top:0;border-radius:0 0 60px 60px;margin:20px auto 0;position:relative}.bunny-line:before,.bunny-line:after{content:"";position:absolute;width:18px;height:34px;border:3px solid #d9cfd7;border-bottom:0;border-radius:18px 18px 0 0;top:-28px}.bunny-line:before{left:15px;transform:rotate(-12deg)}.bunny-line:after{right:15px;transform:rotate(12deg)}.star-wand{position:absolute;left:238px;top:80px;width:16px;height:150px;background:#d3a65e;transform:rotate(-22deg);border-radius:999px;box-shadow:0 12px 18px rgba(86,63,103,.15)}.star-wand:before{content:"★";position:absolute;left:-40px;top:-50px;font-size:86px;color:#ddbd72;text-shadow:0 8px 18px rgba(86,63,103,.15)}.soft-rainbow{position:absolute;left:44px;bottom:60px;width:172px;height:105px;border-radius:120px 120px 0 0;border:22px solid #e9919d;border-bottom:0;box-shadow:inset 0 0 0 16px #e9bb61, inset 0 0 0 31px #8fd5d4;background:transparent}.smile-star{position:absolute;right:22px;bottom:188px;width:92px;height:92px;border-radius:20px;background:#edcc78;color:#9d6f1e;display:grid;place-items:center;font-size:62px;transform:rotate(15deg);box-shadow:0 18px 30px rgba(86,63,103,.12)}.access-panel{position:relative;z-index:5;width:435px;min-height:535px;border-radius:28px;background:rgba(255,255,255,.9);border:1px solid rgba(105,76,124,.12);box-shadow:0 24px 70px rgba(86,63,103,.12);padding:72px 38px 34px;text-align:center;backdrop-filter:blur(14px)}.register-panel{position:absolute;right:0;top:50%;transform:translateY(-50%);padding-top:40px}.access-star{position:absolute;top:-35px;left:50%;transform:translateX(-50%);width:98px;height:98px;border-radius:999px;background:radial-gradient(circle,#fff9d8,#ffe68c 60%,#fffdf5);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,224,126,.22),0 16px 30px rgba(230,173,61,.2)}.access-star img{width:64px;height:64px;object-fit:contain}.access-panel h2{font-family:"Playfair Display",serif;font-size:38px;line-height:1.08;margin:0}.access-panel p{max-width:315px;margin:21px auto 28px;color:#686070;line-height:1.55;font-weight:650}.email-form label{height:58px;display:flex;align-items:center;gap:13px;border:1px solid rgba(105,76,124,.16);border-radius:13px;background:#fff;padding:0 16px}.email-form label img{width:20px;height:20px;object-fit:contain}.email-form input{border:0;outline:0;flex:1;color:#24174b;font-weight:650}.btn-primary,.btn-secondary{width:100%;height:66px;border-radius:13px;font-size:17px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.16s ease}.btn-primary{margin-top:18px;border:0;background:linear-gradient(180deg,#ad6df4,#7431ca);color:#fff;box-shadow:0 14px 28px rgba(116,49,202,.28),inset 0 1px 0 rgba(255,255,255,.35)}.btn-secondary{border:1px solid rgba(116,49,202,.32);background:rgba(255,255,255,.7);color:#7541c9}.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}.btn-primary img,.btn-secondary img{width:22px;height:22px;object-fit:contain}.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#a89faa;font-size:13px}.divider span{height:1px;background:#e5dee8;flex:1}.divider em{font-style:normal}.secure-note{margin-top:22px;color:#a49bab;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}.secure-note img{width:18px;height:18px;object-fit:contain}.back-link{border:0;background:transparent;color:#7541c9;font-weight:900;margin:0 auto 16px;cursor:pointer}.register-form{display:grid;gap:14px;text-align:left}.register-form label{display:grid;gap:8px;color:#5e5666;font-weight:800}.register-form input{height:54px;border:1px solid rgba(105,76,124,.16);border-radius:13px;background:#fff;padding:0 14px;outline:0}.feature-row{width:min(1468px,calc(100% - 64px));margin:0 auto 34px;padding:24px 70px 20px;border-top:1px solid rgba(105,76,124,.10);display:grid;grid-template-columns:repeat(4,1fr);gap:38px}.feature-row article{display:flex;align-items:center;gap:18px}.feature-row img{width:62px;height:62px;object-fit:contain}.feature-row strong{display:block;font-weight:900;font-size:14px}.feature-row p{margin:8px 0 0;color:#7c7481;font-size:13px;line-height:1.45}.global-message,.message{position:fixed;z-index:100;top:18px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));padding:14px 18px;border-radius:16px;text-align:center;font-weight:800;box-shadow:0 16px 35px rgba(52,42,58,.13);background:#fff8ec;border:2px solid #ffd66f;color:#6a4b1b}.message{position:static;transform:none;width:100%;margin:0 0 16px}.message-success{background:#edfff2;border-color:#80d493;color:#2e6540}.message-error{background:#fff0f4;border-color:#e86690;color:#7a2d45}.message-info{background:#fff8ec;border-color:#ffd66f;color:#6a4b1b}.loading-dots:after{content:"";animation:dots 1.2s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}.success-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(255,250,242,.64);backdrop-filter:blur(8px)}.success-card{width:min(420px,calc(100vw - 36px));padding:34px 28px 30px;border-radius:32px;text-align:center;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffd66f,#c7f3d4,#bfe9ff,#ffb5c8) border-box;border:5px solid transparent;box-shadow:0 24px 60px rgba(52,42,58,.18)}.success-check{width:112px;height:112px;margin:0 auto 18px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fffbe0 0%,#ffe68a 38%,#76c985 100%);color:white;font-size:72px;font-weight:900}.success-card p{margin:0 0 6px;text-transform:uppercase;letter-spacing:.13em;color:#6c6179;font-weight:900;font-size:12px}.success-card h2{margin:0 0 8px;font-family:"Playfair Display",serif;font-size:34px}.library-view{padding-bottom:36px}.library-header{margin-bottom:20px}.account-pill em{font-style:normal;color:#7e7287}.library-shell{width:min(1468px,calc(100% - 46px));margin:0 auto;display:grid;grid-template-columns:282px minmax(0,1fr);gap:38px}.sidebar{background:rgba(255,255,255,.74);border:1px solid rgba(105,76,124,.10);border-radius:18px;padding:24px 14px;box-shadow:0 15px 35px rgba(86,63,103,.06);align-self:start;position:sticky;top:20px}.sidebar h3{margin:6px 4px 14px;display:flex;align-items:center;gap:10px;font-size:15px}.sidebar h3 img{width:22px;height:22px;object-fit:contain}.sidebar button{width:100%;height:42px;margin-bottom:6px;border:0;background:transparent;border-radius:9px;color:#5a5268;display:flex;align-items:center;gap:12px;padding:0 12px;font-weight:700;text-align:left;cursor:pointer}.sidebar button.active,.sidebar button:hover{background:#f0e7fb;color:#7441c8}.sidebar button img{width:22px;height:22px;object-fit:contain}.sidebar button span{margin-left:auto;font-size:12px;color:#8d8296}.filter-box{border-top:1px solid rgba(105,76,124,.10);margin-top:18px;padding:16px 8px 0}.filter-box label{display:flex;gap:10px;align-items:center;margin:14px 0;color:#5a5268;font-weight:700}.library-main{min-width:0}.library-hero{display:grid;grid-template-columns:1fr 660px;gap:34px;align-items:center;padding:14px 0 20px;border-bottom:1px solid rgba(105,76,124,.10)}.library-hero h1{font-family:"Playfair Display",serif;font-size:54px;line-height:1;margin:0;color:#24174b}.library-hero p{font-size:16px;line-height:1.6;color:#6c6475;margin:12px 0 0;font-weight:600}.mom-card{height:106px;border:1px solid rgba(105,76,124,.10);border-radius:16px;background:rgba(255,255,255,.72);display:flex;align-items:center;gap:18px;overflow:hidden;box-shadow:0 12px 28px rgba(86,63,103,.05);position:relative;padding:0 190px 0 28px}.mom-card>img{width:62px;height:62px;object-fit:contain}.mom-card strong{display:block;font-weight:900}.mom-card p{font-size:13px;margin:6px 0 0}.mini-bunny{position:absolute;right:118px;bottom:8px;width:70px;height:82px}.mini-bunny:before{content:"";position:absolute;left:18px;bottom:0;width:45px;height:55px;background:#fff;border-radius:24px 24px 18px 18px;box-shadow:0 10px 18px rgba(86,63,103,.08)}.mini-bunny:after{content:"";position:absolute;left:25px;top:0;width:12px;height:42px;border-radius:999px;background:#fff;box-shadow:22px 0 #fff;transform:rotate(-10deg)}.mini-rainbow{position:absolute;right:16px;bottom:18px;width:92px;height:58px;border-radius:90px 90px 0 0;border:15px solid #e9919d;border-bottom:0;box-shadow:inset 0 0 0 10px #e9bb61, inset 0 0 0 20px #8fd5d4}.library-actions{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.library-actions p{margin:0;color:#7c7481;font-size:13px;font-weight:700}.library-actions button{height:42px;border:1px solid rgba(105,76,124,.10);background:rgba(255,255,255,.75);border-radius:10px;padding:0 16px;color:#5a5268;font-weight:700}.live-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.live-toolbar h2{margin:0;font-size:24px}.breadcrumb{display:flex;gap:8px;flex-wrap:wrap}.breadcrumb button{border:1px solid rgba(116,49,202,.16);background:#fff;color:#7440cc;border-radius:999px;padding:8px 11px;font-weight:800;font-size:13px}.resource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:16px}.resource-card{border:1px solid rgba(105,76,124,.10);border-radius:16px;background:rgba(255,255,255,.82);overflow:hidden;box-shadow:0 12px 28px rgba(86,63,103,.06)}.resource-card:before{content:"";display:block;height:150px;background:linear-gradient(135deg,#fff0f5,#f3efff);position:relative}.resource-card:nth-child(1):before{background:linear-gradient(135deg,#fff5ef,#ffffff)}.resource-card:nth-child(2):before{background:linear-gradient(135deg,#ffd3c3,#fff1ee)}.resource-card:nth-child(3):before{background:linear-gradient(135deg,#fff,#f5efff)}.resource-card:nth-child(4):before{background:linear-gradient(135deg,#ffeef5,#fff8ea)}.resource-card:nth-child(5):before{background:linear-gradient(135deg,#fff0e2,#fff7ef)}.resource-card:nth-child(6):before{background:linear-gradient(135deg,#e9f8ff,#fff8ea)}.resource-card:nth-child(7):before{background:linear-gradient(135deg,#f4eaff,#eef8ff)}.resource-top{height:0;position:relative}.resource-icon{position:absolute;top:-135px;left:18px;width:58px;height:58px;border-radius:999px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(86,63,103,.08)}.resource-icon img{width:46px;height:46px;object-fit:contain}.resource-badge{position:absolute;top:-135px;right:16px;background:#f0e7fb;color:#7441c8;border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px}.resource-card h3{margin:20px 16px 8px;font-size:16px}.resource-card p{margin:0 16px 12px;color:#6c6475;font-size:13px;line-height:1.5;font-weight:600}.resource-meta,.price{margin:0 16px 12px;color:#7c7481;font-size:12px;font-weight:700}.price{color:#7441c8;font-size:14px}.card-actions{display:flex;gap:8px;justify-content:flex-end;padding:0 14px 14px}.card-actions button{height:38px;min-width:88px;border-radius:9px;border:1px solid rgba(116,49,202,.24);background:#fff;color:#7441c8;font-weight:900;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.card-actions button img{width:18px;height:18px;object-fit:contain}.card-actions button[data-unlock]{background:linear-gradient(180deg,#a96df4,#7431ca);color:#fff;border:0}@media(max-width:1180px){.site-header,.hero,.feature-row,.library-shell{width:min(100% - 28px,1468px)}.hero{grid-template-columns:1fr;gap:0;padding:40px 0}.hero-copy{padding-left:0}.hero-art{height:560px}.access-panel{width:100%;max-width:470px;margin:0 auto 28px}.register-panel{position:relative;right:auto;top:auto;transform:none}.feature-row{grid-template-columns:repeat(2,1fr);padding-left:0;padding-right:0}.library-shell{grid-template-columns:1fr}.sidebar{position:relative;top:auto}.library-hero{grid-template-columns:1fr}.main-nav{gap:20px}}@media(max-width:720px){.site-header{padding:18px;flex-wrap:wrap}.main-nav{order:3;width:100%;justify-content:space-between}.brand-word{font-size:24px}.brand small{font-size:10px}.hero-copy h1{font-size:44px}.hero-offers{flex-direction:column}.hero-art{height:430px;transform:scale(.78);transform-origin:top center;margin-bottom:-80px}.feature-row{grid-template-columns:1fr}.resource-grid{grid-template-columns:1fr}.access-panel{padding-left:22px;padding-right:22px}.mom-card{padding-right:28px}.mini-bunny,.mini-rainbow{display:none}}
/* Desktop first-screen fit update */
@media (min-width: 1181px) {
body {
min-height: 100vh;
}
.site-header {
width: min(1420px, calc(100% - 76px));
margin-top: 14px;
padding: 18px 34px;
border-radius: 20px;
}
.brand-word {
font-size: 26px;
}
.brand-word img {
width: 34px;
height: 34px;
}
.brand small {
font-size: 11px;
margin-left: 30px;
}
.main-nav {
gap: 42px;
}
.header-login,
.account-pill {
height: 44px;
padding: 0 22px;
}
.hero {
width: min(1420px, calc(100% - 76px));
min-height: calc(100vh - 126px);
grid-template-columns: .84fr .92fr .72fr;
gap: 18px;
align-items: center;
padding-bottom: 6px;
}
.hero-copy {
padding-left: 48px;
align-self: center;
}
.hero-copy h1 {
font-size: clamp(46px, 4.05vw, 68px);
line-height: 1.055;
}
.hero-copy p {
max-width: 460px;
margin-top: 18px;
font-size: 16px;
line-height: 1.45;
}
.hero-offers {
margin-top: 24px;
gap: 12px;
}
.hero-offers article {
width: 174px;
height: 62px;
padding: 0 13px;
gap: 11px;
}
.hero-offers img {
width: 34px;
height: 34px;
}
.hero-offers strong {
font-size: 13px;
}
.hero-offers small {
font-size: 10.5px;
margin-top: 3px;
}
.short-note {
margin-top: 24px;
gap: 14px;
}
.short-note img {
width: 46px;
height: 46px;
}
.short-note span {
font-size: 13px;
line-height: 1.45;
max-width: 360px;
}
.hero-art {
height: min(560px, calc(100vh - 170px));
min-height: 450px;
transform: scale(.86);
transform-origin: center center;
}
.access-panel {
width: 382px;
min-height: 456px;
padding: 58px 30px 26px;
border-radius: 24px;
}
.access-star {
width: 82px;
height: 82px;
top: -28px;
}
.access-star img {
width: 54px;
height: 54px;
}
.access-panel h2 {
font-size: 31px;
}
.access-panel p {
margin: 16px auto 20px;
font-size: 13px;
line-height: 1.45;
}
.email-form label {
height: 50px;
}
.btn-primary,
.btn-secondary {
height: 56px;
font-size: 15px;
}
.btn-primary {
margin-top: 14px;
}
.divider {
margin: 16px 0;
}
.secure-note {
margin-top: 15px;
font-size: 11.5px;
}
.feature-row {
width: min(1420px, calc(100% - 76px));
margin-top: -18px;
margin-bottom: 10px;
padding: 16px 42px 12px;
gap: 26px;
}
.feature-row img {
width: 48px;
height: 48px;
}
.feature-row strong {
font-size: 13px;
}
.feature-row p {
font-size: 11.5px;
margin-top: 4px;
}
}
/* Larger desktop polish */
@media (min-width: 1500px) and (min-height: 850px) {
.hero-copy h1 {
font-size: clamp(56px, 4.7vw, 78px);
}
.hero-art {
transform: scale(.94);
}
.access-panel {
width: 420px;
min-height: 510px;
padding: 68px 36px 32px;
}
.access-panel h2 {
font-size: 36px;
}
}
/* Short laptop screens */
@media (min-width: 1181px) and (max-height: 780px) {
.site-header {
margin-top: 10px;
padding-top: 14px;
padding-bottom: 14px;
}
.hero {
min-height: calc(100vh - 100px);
}
.hero-copy h1 {
font-size: clamp(40px, 3.5vw, 58px);
}
.hero-copy p {
font-size: 14px;
margin-top: 14px;
}
.hero-art {
transform: scale(.74);
height: 470px;
}
.access-panel {
width: 360px;
min-height: 420px;
padding: 52px 26px 22px;
}
.access-panel h2 {
font-size: 28px;
}
.access-panel p {
margin: 12px auto 16px;
}
.feature-row {
display: none;
}
}
/* Responsive mobile/tablet refinement */
@media (max-width: 1180px) {
.hero {
align-items: start;
}
.hero-copy {
text-align: center;
}
.hero-copy p,
.short-note span {
margin-left: auto;
margin-right: auto;
}
.hero-offers {
justify-content: center;
}
.short-note {
justify-content: center;
}
.access-panel {
order: 3;
}
}
@media (max-width: 720px) {
.site-header {
width: min(100% - 20px, 1468px);
margin-top: 10px;
padding: 14px;
border-radius: 18px;
}
.brand-word {
font-size: 20px;
}
.brand-word img {
width: 28px;
height: 28px;
}
.brand small {
font-size: 8px;
letter-spacing: .38em;
margin-left: 24px;
}
.main-nav {
gap: 12px;
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 2px;
}
.main-nav a {
white-space: nowrap;
font-size: 13px;
}
.header-login,
.account-pill {
height: 38px;
padding: 0 14px;
}
.hero {
width: min(100% - 20px, 1468px);
padding-top: 24px;
}
.hero-copy h1 {
font-size: clamp(38px, 11vw, 52px);
line-height: 1.03;
}
.hero-copy p {
font-size: 15px;
}
.hero-offers {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.hero-offers article {
width: 100%;
height: 62px;
}
.hero-art {
height: 380px;
transform: scale(.68);
transform-origin: top center;
margin-bottom: -112px;
}
.access-panel {
max-width: 100%;
min-height: auto;
padding: 54px 18px 22px;
}
.access-panel h2 {
font-size: 30px;
}
.feature-row {
width: min(100% - 20px, 1468px);
}
.library-shell {
width: min(100% - 20px, 1468px);
}
}
/* Soft harmony + true first-screen desktop fit */
:root {
--ink: #35255f;
--ink-soft: #4a3a72;
--muted: #746b86;
--purple: #8a55d8;
--purple-deep: #6f36c6;
--rose: #d86f99;
--cream-card: rgba(255, 255, 255, .82);
}
/* Replace harsh dark colors */
body,
.hero-copy h1,
.access-panel h2,
.library-hero h1,
.brand-word,
.brand,
.logo,
.resource-card h3,
.sidebar h3,
.live-toolbar h2 {
color: var(--ink) !important;
}
.hero-copy h1 span {
color: var(--rose) !important;
}
.hero-copy p,
.access-panel p,
.short-note span,
.feature-row p,
.resource-card p,
.library-hero p,
.mom-card p,
.secure-note,
.hero-offers small {
color: var(--muted) !important;
}
.main-nav a,
.sidebar button,
.library-actions p,
.resource-meta {
color: var(--ink-soft) !important;
}
.main-nav a.active,
.header-login,
.account-pill,
.breadcrumb button,
.price,
.card-actions button,
.btn-secondary {
color: var(--purple) !important;
}
.main-nav a.active:after {
background: var(--purple) !important;
}
.btn-primary,
.card-actions button[data-unlock] {
background: linear-gradient(180deg, #b984ef, #7c42d0) !important;
}
.site-header,
.access-panel,
.hero-offers article,
.feature-row article,
.resource-card,
.sidebar,
.mom-card {
background: rgba(255, 255, 255, .78) !important;
}
/* Keep desktop hero fully visible above the fold */
@media (min-width: 1181px) {
#guestView {
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
.site-header {
width: min(1360px, calc(100% - 96px)) !important;
margin-top: 12px !important;
padding: 13px 28px !important;
min-height: 62px !important;
border-radius: 18px !important;
}
.brand-word {
font-size: 23px !important;
letter-spacing: .16em !important;
}
.brand-word img {
width: 29px !important;
height: 29px !important;
}
.brand small {
font-size: 9px !important;
letter-spacing: .42em !important;
margin-left: 26px !important;
}
.main-nav {
gap: 34px !important;
}
.main-nav a {
font-size: 13px !important;
padding: 8px 0 !important;
}
.header-login,
.account-pill {
height: 38px !important;
padding: 0 18px !important;
font-size: 13px !important;
}
.hero {
width: min(1360px, calc(100% - 96px)) !important;
min-height: 0 !important;
height: calc(100vh - 92px) !important;
grid-template-columns: .78fr .82fr .66fr !important;
gap: 14px !important;
align-items: center !important;
padding-bottom: 0 !important;
}
.hero-copy {
padding-left: 34px !important;
align-self: center !important;
transform: translateY(-4px);
}
.hero-copy h1 {
font-size: clamp(38px, 3.15vw, 54px) !important;
line-height: 1.04 !important;
letter-spacing: -.02em !important;
}
.hero-copy p {
max-width: 390px !important;
margin-top: 13px !important;
font-size: 13.5px !important;
line-height: 1.42 !important;
}
.hero-offers {
margin-top: 16px !important;
gap: 10px !important;
}
.hero-offers article {
width: 150px !important;
height: 52px !important;
border-radius: 12px !important;
padding: 0 10px !important;
gap: 8px !important;
}
.hero-offers img {
width: 28px !important;
height: 28px !important;
}
.hero-offers strong {
font-size: 11.5px !important;
line-height: 1.05 !important;
}
.hero-offers small {
font-size: 9px !important;
line-height: 1.1 !important;
margin-top: 2px !important;
}
.short-note {
margin-top: 15px !important;
gap: 10px !important;
}
.short-note img {
width: 36px !important;
height: 36px !important;
}
.short-note span {
font-size: 11.5px !important;
line-height: 1.35 !important;
max-width: 300px !important;
}
.hero-art {
height: min(415px, calc(100vh - 170px)) !important;
min-height: 360px !important;
transform: scale(.66) !important;
transform-origin: center center !important;
}
.access-panel {
width: 318px !important;
min-height: 366px !important;
padding: 44px 22px 18px !important;
border-radius: 22px !important;
transform: translateY(-2px);
}
.register-panel {
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.access-star {
width: 66px !important;
height: 66px !important;
top: -24px !important;
}
.access-star img {
width: 43px !important;
height: 43px !important;
}
.access-panel h2 {
font-size: 24px !important;
line-height: 1.06 !important;
}
.access-panel p {
margin: 10px auto 14px !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
max-width: 250px !important;
}
.email-form label {
height: 42px !important;
border-radius: 11px !important;
padding: 0 12px !important;
}
.email-form input {
font-size: 12px !important;
}
.email-form label img {
width: 15px !important;
height: 15px !important;
}
.btn-primary,
.btn-secondary {
height: 46px !important;
border-radius: 11px !important;
font-size: 13px !important;
}
.btn-primary {
margin-top: 12px !important;
}
.btn-primary img,
.btn-secondary img {
width: 17px !important;
height: 17px !important;
}
.divider {
margin: 10px 0 !important;
font-size: 10px !important;
}
.secure-note {
margin-top: 10px !important;
font-size: 10px !important;
}
.secure-note img {
width: 14px !important;
height: 14px !important;
}
.feature-row {
position: absolute !important;
left: 50% !important;
bottom: 8px !important;
transform: translateX(-50%) !important;
width: min(1260px, calc(100% - 110px)) !important;
margin: 0 !important;
padding: 10px 30px 6px !important;
gap: 20px !important;
background: rgba(255,255,255,.42);
border-radius: 20px;
border-top: 1px solid rgba(105,76,124,.06) !important;
backdrop-filter: blur(10px);
}
.feature-row article {
gap: 10px !important;
background: transparent !important;
}
.feature-row img {
width: 36px !important;
height: 36px !important;
}
.feature-row strong {
font-size: 10.5px !important;
color: var(--ink-soft) !important;
}
.feature-row p {
font-size: 9.2px !important;
line-height: 1.28 !important;
margin-top: 2px !important;
}
}
/* Ultra-short desktop screens */
@media (min-width: 1181px) and (max-height: 760px) {
.hero-copy h1 {
font-size: clamp(34px, 2.85vw, 48px) !important;
}
.hero-art {
transform: scale(.58) !important;
}
.access-panel {
width: 300px !important;
min-height: 340px !important;
padding-top: 40px !important;
}
.access-panel h2 {
font-size: 22px !important;
}
.feature-row {
display: grid !important;
padding-top: 6px !important;
padding-bottom: 4px !important;
}
.feature-row img {
width: 30px !important;
height: 30px !important;
}
.feature-row p {
display: none !important;
}
}
/* Mobile/tablet keeps natural scrolling and proportional layout */
@media (max-width: 1180px) {
#guestView {
height: auto;
overflow: visible;
}
.site-header {
background: rgba(255,255,255,.88) !important;
}
.hero-copy h1 {
color: var(--ink) !important;
}
}
@media (max-width: 720px) {
.hero-copy h1 {
font-size: clamp(34px, 10vw, 48px) !important;
}
.hero-copy p {
font-size: 14px !important;
}
.access-panel {
box-shadow: 0 18px 44px rgba(86,63,103,.10) !important;
}
.feature-row {
position: relative !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
}
}