/* Techluna | original static learning toolkit theme */
:root { --ink:#161629; --ink-soft:#4f5069; --violet:#4b36ee; --violet-dark:#3927c2; --lavender:#f0edff; --mint:#c5f4df; --peach:#ffdfcf; --yellow:#ffe9a5; --cream:#fbfaf7; --white:#fff; --line:#e7e5ee; --navy:#14152f; --shadow:0 20px 55px rgba(30,24,80,.09); --radius:26px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--cream); line-height:1.65; -webkit-font-smoothing:antialiased; }
body.no-scroll { overflow:hidden; }
::selection { background:#bdb3ff; color:var(--ink); }
a { color:inherit; text-decoration:none; } a:hover { color:var(--violet); }
button,input,textarea,select { font:inherit; } button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
:focus-visible { outline:3px solid #866dff; outline-offset:4px; }
img,svg { max-width:100%; } img { height:auto; } svg { display:block; }
.container { width:min(1192px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; top:-80px; left:18px; background:white; z-index:1000; padding:10px 15px; border-radius:12px; }
.skip-link:focus { top:12px; }
.announce { background:var(--navy); color:#e9e7ff; text-align:center; padding:7px 16px; font-size:.78rem; letter-spacing:.01em; }
.announce a { text-decoration:underline; text-underline-offset:3px; color:#c4f5df; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(251,250,247,.94); backdrop-filter:blur(18px); border-bottom:1px solid rgba(39,30,77,.075); }
.header-inner { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:1.4rem; font-weight:850; letter-spacing:-.075em; color:var(--ink); }
.brand:hover { color:var(--ink); }
.brand img { width:39px; height:39px; border-radius:13px; }
.brand .period { color:var(--violet); }
.desktop-nav { display:flex; align-items:center; gap:31px; }
.desktop-nav a { font-size:.9rem; font-weight:620; color:#45445c; transition:color .2s; }
.desktop-nav a:hover,.desktop-nav a[aria-current="page"] { color:var(--violet); }
.header-actions { display:flex; align-items:center; gap:12px; }
.mobile-menu { display:none; width:41px; height:41px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; background:white; font-size:1.4rem; }
.mobile-nav { display:none; padding:0 24px 22px; border-top:1px solid var(--line); background:var(--cream); }
.mobile-nav.open { display:flex; flex-direction:column; gap:12px; }
.mobile-nav a { padding:8px 4px; font-weight:700; }
.btn { border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-align:center; padding:13px 22px; min-height:48px; border-radius:999px; font-size:.92rem; font-weight:750; line-height:1.15; transition:transform .2s,box-shadow .2s,background .2s,color .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:var(--violet); box-shadow:0 10px 22px rgba(75,54,238,.18); }
.btn-primary:hover { background:var(--violet-dark); color:white; box-shadow:0 12px 30px rgba(75,54,238,.24); }
.btn-outline { border-color:#d9d5e6; color:var(--ink); background:white; }
.btn-outline:hover { border-color:#bdb4ff; color:var(--violet); }
.btn-dark { background:var(--navy); color:white; }
.btn-dark:hover { background:#2b2a58; color:white; }
.btn-small { padding:11px 18px; min-height:42px; font-size:.85rem; }
.btn-wide { width:100%; }
.icon-arrow { font-size:1.2em; line-height:1; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; font-weight:850; font-size:.73rem; letter-spacing:.14em; color:var(--violet); }
.eyebrow:before { content:""; width:20px; height:2px; background:currentColor; border-radius:3px; }
.section { padding:105px 0; }
.section-tight { padding:72px 0; }
.section-heading { max-width:695px; margin:0 auto 52px; text-align:center; }
.section-heading h2,.split-copy h2 { font-size:clamp(2.05rem,4.5vw,3.55rem); letter-spacing:-.065em; line-height:1.13; margin:14px 0 20px; font-weight:850; }
.section-heading p,.split-copy p { color:var(--ink-soft); font-size:1.06rem; margin:0; }
.hero { padding:80px 0 98px; overflow:hidden; position:relative; }
.hero:before { content:""; position:absolute; left:-250px; top:25%; width:470px; height:470px; border-radius:50%; background:#f0ebff; filter:blur(42px); opacity:.68; pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns: .99fr 1.01fr; align-items:center; gap:62px; }
.hero h1 { font-size:clamp(3.6rem,6vw,5.85rem); letter-spacing:-.077em; line-height:1.04; max-width:690px; font-weight:880; margin:22px 0 24px; }
.hero h1 em { color:var(--violet); font-style:normal; position:relative; white-space:nowrap; }
.hero h1 em:after { content:""; position:absolute; bottom:-8px; left:1%; width:96%; height:10px; background:var(--mint); border-radius:100%; transform:rotate(-3deg); z-index:-1; }
.hero p { font-size:1.1rem; max-width:520px; color:var(--ink-soft); margin:0 0 31px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.hero-note { display:flex; gap:8px; align-items:center; color:#656376; font-size:.82rem; }
.hero-note .dot { height:7px; width:7px; background:#35b785; border-radius:50%; }
.hero-art { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; }
.orb { position:absolute; border-radius:50%; z-index:0; }
.orb-large { height:490px; width:490px; right:-18px; top:30px; background:radial-gradient(circle at 42% 37%,#fdf0ce 0%,#f2eaff 46%,#dcd5ff 75%,#f1e8ff 100%); }
.orb-small { width:150px; height:150px; left:-23px; bottom:5px; background:var(--peach); filter:blur(2px); opacity:.7; }
.app-window { position:relative; z-index:2; width:min(100%,515px); min-height:460px; background:white; border-radius:25px; box-shadow:0 35px 85px rgba(35,22,110,.19); border:1px solid rgba(44,32,105,.08); overflow:hidden; transform:rotate(2deg); }
.window-top { background:#fcfbff; height:54px; display:flex; align-items:center; padding:0 20px; gap:8px; border-bottom:1px solid #efedf4; }
.window-dot { width:9px; height:9px; background:#e8e3ef; border-radius:50%; }
.window-dot:first-child { background:#ffb8a8; }.window-dot:nth-child(2) { background:#f5d790; }.window-dot:nth-child(3) { background:#b2e5c9; }
.window-title { margin-left:auto; font-size:.76rem; font-weight:750; color:#9995a8; }
.window-body { padding:25px 27px; }
.window-label { color:var(--violet); font-weight:800; font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; }
.window-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:9px 0 18px; }
.window-head strong { letter-spacing:-.045em; font-size:1.35rem; }
.tiny-circle { background:var(--lavender); color:var(--violet); height:34px; width:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; }
.progress { height:7px; background:#f0eef6; border-radius:99px; overflow:hidden; }.progress span { display:block; width:62%; height:100%; border-radius:99px; background:var(--violet); }
.progress-caption { display:flex; justify-content:space-between; font-size:.7rem; color:#8a879b; font-weight:600; margin:8px 0 22px; }
.preview-flashcard { background:linear-gradient(137deg,#f7f5ff,#edebff); border:1px solid #e2ddff; text-align:center; border-radius:20px; padding:34px 16px 28px; position:relative; min-height:174px; display:flex; align-items:center; flex-direction:column; justify-content:center; }
.preview-flashcard small { color:#9488c5; letter-spacing:.1em; font-weight:850; font-size:.65rem; }.preview-flashcard h3 { font-size:1.35rem; letter-spacing:-.045em; line-height:1.25; margin:11px 0 9px; max-width:295px; }.preview-flashcard p { font-size:.73rem; color:#766e99; margin:0; }
.window-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px; }.mini-tool { border:1px solid #efedf6; border-radius:12px; padding:14px 12px; display:flex; gap:9px; align-items:center; font-size:.72rem; font-weight:800; }.mini-emoji { font-size:1.25rem; }
.float-card { position:absolute; z-index:4; box-shadow:0 16px 34px rgba(24,23,70,.13); background:white; border:1px solid rgba(63,45,120,.07); border-radius:15px; padding:12px 16px; display:flex; gap:10px; align-items:center; font-size:.82rem; font-weight:800; }.float-card b { display:block; font-size:.73rem; font-weight:500; color:#89869b; }.float-left { left:-50px; top:87px; transform:rotate(-7deg); }.float-right { right:-31px; bottom:52px; transform:rotate(6deg); }.float-icon { width:36px; height:36px; border-radius:12px; background:var(--mint); display:grid; place-items:center; font-size:1.1rem; }.float-right .float-icon { background:var(--yellow); }
.proof-strip { padding:24px 0; background:#f4f2ff; border-block:1px solid #e9e5ff; }
.proof-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }.proof-label { font-size:.8rem; font-weight:750; color:#726d96; }.proof-item { display:flex; align-items:center; gap:10px; font-weight:780; font-size:.86rem; color:#403c67; }.proof-item i { font-size:1.2rem; font-style:normal; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }
.feature-card { background:white; border:1px solid #eae8ef; border-radius:28px; padding:24px 25px 30px; box-shadow:0 15px 40px rgba(32,25,64,.035); transition:transform .2s,box-shadow .2s; }.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.feature-art { height:184px; background:var(--lavender); border-radius:18px; padding:20px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }.feature-card:nth-child(2) .feature-art { background:#e7f8f0; }.feature-card:nth-child(3) .feature-art { background:#fff0e3; }.feature-icon { width:46px; height:46px; background:white; border-radius:14px; display:grid; place-items:center; box-shadow:0 10px 25px rgba(0,0,0,.05); font-size:1.35rem; }.feature-art-stack { display:flex; flex-direction:column; align-items:center; gap:7px; transform:rotate(-6deg); }.feature-art-stack .fake-card { height:52px; width:166px; background:white; border:1px solid #ded5ff; box-shadow:0 4px 13px rgba(75,54,238,.07); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--violet); font-size:.77rem; font-weight:800; }.feature-art-stack .fake-card:nth-child(2) { transform:translateX(17px); }.feature-art-stack .fake-card:nth-child(3) { transform:translateX(-10px); }.fake-quiz { width:100%; max-width:240px; display:grid; gap:8px; }.fake-quiz div { background:white; border:1px solid #d9eee4; border-radius:9px; padding:10px 12px; line-height:1; color:#447567; font-size:.75rem; font-weight:700; }.fake-quiz div:nth-child(2) { background:#b9efd7; border-color:#85dcb7; }.fake-timer { background:white; border:7px solid #f1c3ac; border-radius:50%; height:137px; width:137px; display:grid; place-items:center; font-size:1.7rem; font-weight:850; letter-spacing:-.04em; color:#9b583e; box-shadow:0 10px 25px rgba(126,62,36,.08); }.feature-card h3 { margin:24px 0 10px; font-size:1.35rem; letter-spacing:-.04em; }.feature-card p { color:var(--ink-soft); font-size:.94rem; margin:0 0 19px; }.text-link { display:inline-flex; gap:8px; align-items:center; color:var(--violet); font-weight:800; font-size:.88rem; }.text-link:hover { gap:12px; }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; }.split-copy h2 { max-width:520px; }.split-copy p { max-width:510px; }.checks { padding:0; list-style:none; margin:26px 0 32px; }.checks li { display:flex; gap:11px; align-items:flex-start; margin:13px 0; font-size:.93rem; font-weight:610; }.checks li:before { content:"✓"; height:24px; width:24px; background:#e6f8ee; color:#188a56; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:900; font-size:.8rem; }
.learning-illustration { background:#eae6fe; border-radius:35px; min-height:510px; padding:45px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }.learning-illustration:before { content:""; width:310px; height:310px; border-radius:50%; position:absolute; right:-100px; top:-130px; background:#d6ceff; }.learning-illustration:after { content:"✦"; position:absolute; right:45px; bottom:27px; color:#aea1ef; font-size:6rem; }.learning-illustration .ill-label { font-size:.7rem; letter-spacing:.1em; font-weight:850; color:#7665be; text-transform:uppercase; position:relative; z-index:1; }.learning-illustration .ill-title { font-size:2rem; letter-spacing:-.055em; font-weight:850; margin:8px 0 20px; position:relative; z-index:1; }.learning-illustration .step-line { position:relative; z-index:1; background:white; border-radius:13px; padding:16px 18px; display:flex; align-items:center; gap:14px; margin:7px 0; box-shadow:0 12px 22px rgba(73,52,151,.055); font-size:.88rem; font-weight:750; }.learning-illustration .step-num { background:#efebff; color:var(--violet); height:34px; width:34px; display:grid; place-items:center; border-radius:10px; font-weight:850; }
.steps-band { background:var(--navy); color:white; position:relative; overflow:hidden; }.steps-band:before { content:""; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(119,99,255,.27),transparent 66%); right:-220px; top:-250px; }.steps-band .section-heading h2 { color:white; }.steps-band .section-heading p { color:#bdbbd2; }.steps-band .eyebrow { color:#beb3ff; }.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; position:relative; }.step { border-top:1px solid rgba(255,255,255,.2); padding:27px 8px 0 0; }.step .number { color:#c1b6ff; font-size:.85rem; font-weight:850; margin-bottom:24px; }.step h3 { font-size:1.4rem; letter-spacing:-.035em; line-height:1.25; margin:0 0 12px; }.step p { color:#bebcd1; font-size:.94rem; margin:0; max-width:300px; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.why-card { background:#f3f1f9; border-radius:21px; padding:28px; }.why-card:nth-child(2) { background:#eaf8f1; }.why-card:nth-child(3) { background:#fff3e5; }.why-card .why-icon { display:grid; place-items:center; height:48px; width:48px; border-radius:15px; background:white; font-size:1.4rem; margin-bottom:20px; }.why-card h3 { letter-spacing:-.035em; font-size:1.15rem; margin:0 0 9px; }.why-card p { font-size:.91rem; color:var(--ink-soft); margin:0; }
.faq-wrap { max-width:835px; margin:auto; }.faq-wrap details { border-bottom:1px solid #e2dfe9; padding:0 4px; }.faq-wrap summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:1rem; font-weight:770; padding:24px 0; }.faq-wrap summary::-webkit-details-marker { display:none; }.faq-wrap summary:after { content:"+"; display:grid; place-items:center; font-size:1.6rem; font-weight:350; color:var(--violet); }.faq-wrap details[open] summary:after { content:"−"; }.faq-wrap details p { color:var(--ink-soft); margin:0 30px 22px 0; font-size:.95rem; }
.cta-panel { background:radial-gradient(circle at 85% 10%,#6055bf,transparent 40%),var(--violet); border-radius:35px; padding:77px 36px; text-align:center; color:white; overflow:hidden; position:relative; }.cta-panel:before,.cta-panel:after { content:"✳"; position:absolute; font-size:8rem; color:rgba(255,255,255,.12); }.cta-panel:before { left:55px; top:18px; }.cta-panel:after { right:45px; bottom:-65px; }.cta-panel h2 { font-size:clamp(2.1rem,4vw,3.55rem); letter-spacing:-.06em; line-height:1.15; max-width:650px; margin:0 auto 18px; }.cta-panel p { max-width:560px; margin:0 auto 27px; color:#dedaff; }.cta-panel .btn { background:white; color:var(--violet); position:relative; z-index:1; }.cta-panel .btn:hover { color:var(--violet-dark); }
.site-footer { background:#141427; color:#b5b4c6; padding:78px 0 25px; margin-top:55px; }.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:35px; padding-bottom:60px; }.footer-brand { color:white; }.footer-brand:hover { color:white; }.site-footer p { font-size:.9rem; max-width:310px; margin:17px 0 0; }.footer-heading { color:white; font-size:.85rem; font-weight:800; margin:2px 0 20px; }.footer-links { display:grid; gap:10px; }.footer-links a { font-size:.85rem; color:#b5b4c6; }.footer-links a:hover { color:white; }.footer-bottom { border-top:1px solid #2f2e46; padding-top:23px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; font-size:.78rem; }.footer-bottom a { color:#d3caff; }
/* Internal pages */
.page-hero { padding:82px 0 67px; background:radial-gradient(circle at 84% 32%,#ede7ff,transparent 32%); }.page-hero .container { max-width:1010px; }.page-hero h1 { font-size:clamp(2.65rem,5vw,4.55rem); letter-spacing:-.067em; line-height:1.1; font-weight:870; margin:15px 0 19px; max-width:840px; }.page-hero p { max-width:660px; font-size:1.05rem; color:var(--ink-soft); margin:0; }
.page-main { padding:35px 0 90px; }.narrow { max-width:835px; margin-inline:auto; }.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:0 12px 39px rgba(32,25,64,.035); }
.prose { color:#3e3d52; }.prose h2 { color:var(--ink); font-size:1.55rem; letter-spacing:-.04em; margin:37px 0 10px; line-height:1.3; }.prose h2:first-child { margin-top:0; }.prose h3 { color:var(--ink); font-size:1.15rem; margin:22px 0 7px; }.prose p { margin:0 0 14px; }.prose ul,.prose ol { padding-left:23px; margin:12px 0 22px; }.prose li { padding-left:2px; margin-bottom:8px; }.prose a { color:var(--violet); text-decoration:underline; text-underline-offset:3px; }.prose .note { background:#f3f0ff; border-left:3px solid var(--violet); padding:16px 19px; border-radius:0 12px 12px 0; margin:18px 0; font-size:.88rem; }.date-note { font-size:.85rem; color:#6c6883; margin-bottom:22px; }
.tool-shell { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:27px; }.tool-intro { background:white; border:1px solid var(--line); border-radius:25px; padding:29px; }.tool-intro h2 { font-size:1.4rem; letter-spacing:-.035em; margin:0 0 8px; }.tool-intro p { font-size:.91rem; color:var(--ink-soft); margin:0 0 20px; }.field-label { font-weight:750; display:block; font-size:.85rem; margin:15px 0 8px; }.field { width:100%; padding:14px 15px; color:var(--ink); background:#fff; border:1px solid #dedae6; border-radius:13px; outline:none; }.field:focus { border-color:var(--violet); box-shadow:0 0 0 3px #e9e5ff; }.field::placeholder { color:#9693a5; }.field-help { color:#777487; font-size:.75rem; margin:9px 0 17px; }.tool-tabs { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:27px; }.tool-tab { padding:12px 18px; background:#fff; border:1px solid var(--line); border-radius:999px; font-weight:770; font-size:.86rem; }.tool-tab[aria-selected="true"] { color:white; background:var(--violet); border-color:var(--violet); }.tool-view[hidden] { display:none; }.practice-panel { background:#eeebff; min-height:460px; border-radius:25px; padding:30px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }.practice-title { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; font-weight:850; color:#7d72ae; margin-bottom:15px; }.actual-card { background:#fff; min-height:250px; border-radius:23px; box-shadow:0 17px 42px rgba(68,50,150,.12); border:1px solid #ded8ff; width:100%; color:var(--ink); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; padding:25px 30px; text-align:center; transition:transform .23s; }.actual-card:hover { transform:translateY(-3px); }.actual-card .card-hint { color:var(--violet); text-transform:uppercase; letter-spacing:.1em; font-size:.67rem; font-weight:900; }.actual-card strong { font-size:1.35rem; line-height:1.35; letter-spacing:-.03em; }.actual-card small { color:#89869b; font-size:.77rem; }.practice-controls { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:19px; }.practice-controls .btn { min-width:95px; }.mini-message { font-size:.78rem; color:#625b88; margin:14px 0 0; text-align:center; min-height:22px; }.status-box { padding:14px 16px; border-radius:12px; background:#f1effe; color:#5c50a1; font-size:.87rem; margin-top:18px; }.quiz-question { font-size:1.28rem; letter-spacing:-.028em; line-height:1.35; margin:12px 0 24px; font-weight:820; }.quiz-options { display:grid; gap:10px; }.quiz-option { border-radius:13px; text-align:left; border:1px solid #e2ddf5; background:white; padding:14px 15px; font-weight:650; color:var(--ink); }.quiz-option:hover { border-color:var(--violet); }.quiz-option.correct { background:#d8f9e7; border-color:#78d6a9; }.quiz-option.wrong { background:#ffe8e2; border-color:#eea998; }.quiz-meta { font-size:.8rem; color:#7f76ac; font-weight:750; }.quiz-feedback { margin:17px 0 0; font-size:.9rem; font-weight:750; min-height:26px; }.quiz-feedback.good { color:#18724f; }.quiz-feedback.bad { color:#b34d3a; }.timer-panel { text-align:center; }.timer-clock { font-variant-numeric:tabular-nums; font-size:clamp(3.3rem,7vw,5.5rem); letter-spacing:-.07em; font-weight:850; margin:13px 0 22px; line-height:1.1; }.timer-mode { display:flex; justify-content:center; gap:8px; }.timer-mode button { padding:9px 18px; border-radius:20px; background:#fff; border:1px solid #d8d0f7; font-weight:800; font-size:.84rem; }.timer-mode button[aria-pressed="true"] { background:var(--violet); color:white; border-color:var(--violet); }
.contact-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:30px; }.contact-info { background:var(--navy); color:white; padding:40px; border-radius:25px; position:relative; overflow:hidden; }.contact-info:after { content:"✳"; font-size:12rem; position:absolute; color:rgba(255,255,255,.06); right:-35px; bottom:-130px; }.contact-info h2 { font-size:2rem; letter-spacing:-.05em; margin:0 0 12px; }.contact-info p { color:#c2c0d6; margin:0 0 31px; }.contact-info a { color:#bcf3db; text-decoration:underline; text-underline-offset:4px; }.contact-form { background:white; border:1px solid var(--line); border-radius:25px; padding:32px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.form-group { margin-bottom:15px; }.form-group .field-label { margin-top:0; }.form-check { display:flex; gap:10px; align-items:flex-start; font-size:.83rem; color:var(--ink-soft); margin:10px 0 20px; }.form-check input { margin-top:5px; flex-shrink:0; }.form-check a { color:var(--violet); text-decoration:underline; }
.guides-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; }.guide-card { border-radius:24px; background:white; border:1px solid var(--line); padding:24px; }.guide-card .tag { background:#f1eeff; display:inline-block; border-radius:100px; color:var(--violet); font-size:.7rem; font-weight:850; letter-spacing:.04em; padding:6px 12px; margin-bottom:16px; }.guide-card h2 { letter-spacing:-.04em; line-height:1.3; font-size:1.27rem; margin:0 0 12px; }.guide-card p { color:var(--ink-soft); font-size:.88rem; margin:0 0 16px; }.guide-article { border-top:1px solid var(--line); margin-top:60px; padding-top:40px; scroll-margin-top:105px; }.guide-article h2 { font-size:2rem; letter-spacing:-.055em; margin-bottom:14px; }
/* small consent notice for transparency, not a non-essential tracking opt-in */
.privacy-toast { position:fixed; bottom:22px; left:22px; z-index:120; width:min(410px,calc(100% - 44px)); background:white; border:1px solid #dfdbea; box-shadow:0 20px 65px rgba(27,25,72,.2); border-radius:20px; padding:20px; }.privacy-toast[hidden] { display:none; }.privacy-toast strong { font-size:.9rem; }.privacy-toast p { margin:7px 0 14px; font-size:.79rem; color:var(--ink-soft); }.privacy-toast a { color:var(--violet); text-decoration:underline; }.privacy-toast .btn { min-height:37px; padding:9px 17px; font-size:.78rem; }
@media(max-width:1050px) { .desktop-nav { gap:17px; }.hero-grid { gap:30px; }.float-left { left:-18px; }.float-right { right:-6px; }.split-grid { gap:48px; }.orb-large { right:-85px; }.footer-grid { grid-template-columns:1.5fr repeat(3,1fr); } }
@media(max-width:800px) { .desktop-nav,.header-actions>.btn { display:none; }.mobile-menu { display:flex; }.hero { padding:55px 0 65px; }.hero-grid { grid-template-columns:1fr; gap:26px; }.hero h1 { max-width:600px; }.hero p { max-width:560px; }.hero-art { min-height:495px; max-width:590px; width:100%; margin:auto; }.app-window { min-height:425px; }.orb-large { right:10px; }.feature-grid,.why-grid,.guides-grid { grid-template-columns:1fr 1fr; }.split-grid { grid-template-columns:1fr; }.learning-illustration { min-height:400px; }.step-grid { gap:17px; }.footer-grid { grid-template-columns:1.5fr 1fr 1fr; }.footer-grid>div:last-child { grid-column:2/4; }.tool-shell,.contact-layout { grid-template-columns:1fr; }.practice-panel { min-height:420px; } }
@media(max-width:590px) { .container { width:calc(100% - 34px); }.header-inner { min-height:70px; }.brand { font-size:1.3rem; }.hero h1 { font-size:clamp(3rem,13vw,4.05rem); }.hero p { font-size:1rem; }.hero-art { min-height:377px; }.app-window { transform:rotate(1deg) scale(.92); min-height:365px; }.window-body { padding:16px; }.preview-flashcard { min-height:145px; padding:20px 12px; }.window-tools { gap:5px; }.mini-tool { flex-direction:column; text-align:center; gap:3px; padding:9px 5px; }.float-card { display:none; }.orb-large { width:335px; height:335px; right:-55px; top:17px; }.orb-small { width:110px; height:110px; }.proof-inner { display:grid; grid-template-columns:1fr 1fr; column-gap:10px; }.proof-label { grid-column:1/3; }.proof-item { font-size:.72rem; }.section { padding:72px 0; }.section-tight { padding:53px 0; }.section-heading { margin-bottom:34px; }.section-heading h2,.split-copy h2 { font-size:2.24rem; }.feature-grid,.why-grid,.guides-grid,.step-grid { grid-template-columns:1fr; }.step { padding-bottom:12px; }.learning-illustration { padding:25px; min-height:375px; }.cta-panel { padding:55px 22px; }.footer-grid { grid-template-columns:1fr 1fr; gap:33px; }.footer-grid>div:first-child { grid-column:1/3; }.footer-grid>div:last-child { grid-column:auto; }.footer-bottom { flex-direction:column; }.page-hero { padding:57px 0 45px; }.page-hero h1 { font-size:2.85rem; }.panel,.tool-intro,.contact-form { padding:23px 19px; }.practice-panel { padding:19px; }.form-grid { grid-template-columns:1fr; gap:0; }.contact-info { padding:29px 24px; }.tool-tab { flex:1 1 auto; }.btn { font-size:.85rem; }.timer-clock { font-size:3.9rem; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.tool-anchor { display:inline-block; width:0; height:0; position:relative; top:-95px; }

/* Pricing page · modern subscription cards, no payment simulation */
.pricing-hero { min-height:390px; background:radial-gradient(circle at 86% 48%,#372a77 0%,#1f1c50 34%,#14152f 70%); color:white; padding:82px 0 86px; position:relative; overflow:hidden; }
.pricing-hero-inner { position:relative; z-index:2; text-align:center; max-width:870px; }
.pricing-hero .eyebrow { color:#c7ffdd; }
.pricing-hero .eyebrow:before { background:#98e9c0; }
.pricing-hero h1 { font-size:clamp(3.6rem,7vw,6.1rem); font-weight:900; line-height:1.04; letter-spacing:-.078em; margin:22px 0 21px; }
.pricing-hero h1 em { color:#c6b7ff; font-style:normal; }
.pricing-hero p { font-size:1.075rem; color:#d7d6ed; max-width:665px; margin:0 auto; }
.pricing-hero-points { display:flex; align-items:center; justify-content:center; gap:13px; flex-wrap:wrap; margin-top:30px; }
.pricing-hero-points span { font-size:.76rem; font-weight:750; background:rgba(255,255,255,.09); padding:8px 15px; border:1px solid rgba(255,255,255,.1); border-radius:99px; }
.pricing-spark { position:absolute; color:rgba(203,191,255,.19); pointer-events:none; }.spark-one { font-size:18rem; right:2%; top:-90px; transform:rotate(-20deg); }.spark-two { font-size:9rem; left:3%; bottom:-54px; }
.pricing-section { padding:78px 0 72px; }
.starter-banner { background:white; border:1px solid var(--line); display:flex; align-items:center; gap:23px; padding:25px 30px; border-radius:24px; box-shadow:0 11px 31px rgba(32,25,64,.04); }
.starter-icon { width:60px; height:60px; border-radius:19px; background:#ecf8ef; display:grid; place-items:center; flex-shrink:0; color:#256c4a; font-size:2.3rem; }
.starter-description { flex:1; min-width:0; }.starter-label { font-size:.65rem; font-weight:850; letter-spacing:.1em; color:#4a886e; }.starter-description h2 { font-size:1.25rem; margin:2px 0 1px; letter-spacing:-.035em; }.starter-description h2 span { color:#5c48dd; margin-left:8px; }.starter-description p { font-size:.84rem; color:var(--ink-soft); margin:0; }.starter-banner .btn { flex-shrink:0; }
.pricing-heading { text-align:center; margin:75px auto 49px; max-width:710px; }.pricing-heading h2 { font-size:clamp(2.1rem,4vw,3.2rem); letter-spacing:-.06em; line-height:1.12; margin:13px 0 15px; }.pricing-heading p { color:var(--ink-soft); margin:0; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.price-card { background:#fff; border:1px solid #e6e2f0; border-radius:27px; padding:34px 27px 30px; position:relative; display:flex; flex-direction:column; box-shadow:0 15px 40px rgba(36,31,80,.035); }
.price-card-featured { border:2px solid var(--violet); box-shadow:0 25px 65px rgba(75,54,238,.12); transform:translateY(-9px); padding:33px 26px 29px; }
.popular-flag { position:absolute; font-size:.65rem; letter-spacing:.1em; font-weight:900; background:var(--violet); color:white; border-radius:99px; padding:6px 15px; top:-16px; right:27px; box-shadow:0 10px 21px rgba(75,54,238,.24); }
.plan-tag { display:inline-block; color:var(--violet); background:#f0edff; border-radius:99px; padding:6px 11px; font-size:.64rem; font-weight:900; letter-spacing:.09em; }.mint-tag { color:#237e5b; background:#dcf8e9; }
.plan-head h3 { font-size:1.68rem; letter-spacing:-.055em; margin:15px 0 4px; line-height:1.2; }.plan-head p { font-size:.85rem; color:var(--ink-soft); margin:0; min-height:48px; }
.plan-price { display:flex; align-items:baseline; gap:2px; white-space:nowrap; margin:17px 0 1px; }.plan-price .currency { font-size:1.55rem; font-weight:900; align-self:flex-start; margin:10px 1px 0 0; }.plan-price .amount { font-weight:900; font-size:4.15rem; letter-spacing:-.09em; line-height:1.1; }.plan-price .price-period { color:#858197; font-size:.8rem; margin-left:9px; font-weight:650; letter-spacing:0; }
.plan-monthly { font-size:.82rem; color:#706b86; margin:6px 0 25px; }.plan-monthly strong { color:#3c365e; }
.price-card .btn { margin-bottom:0; }.price-divider { border-top:1px solid var(--line); margin:26px 0 21px; }.plan-benefits { list-style:none; padding:0; margin:0; display:grid; gap:12px; }.plan-benefits li { display:flex; align-items:baseline; gap:11px; color:#49455c; font-size:.84rem; }.plan-benefits li span { color:var(--violet); font-weight:900; font-size:.94rem; }.price-disclosure { font-size:.77rem; max-width:965px; margin:26px auto 0; color:#6d687f; text-align:center; }
.price-compare { background:#f0edff; }.comparison-scroll { border:1px solid #dfd9f4; border-radius:24px; overflow-x:auto; background:white; box-shadow:0 15px 30px rgba(42,29,104,.04); }.comparison-table { width:100%; border-collapse:collapse; text-align:center; min-width:600px; }.comparison-table th,.comparison-table td { padding:19px 28px; border-bottom:1px solid #edeaf5; }.comparison-table thead th { color:#4b3fb0; background:#f9f8ff; font-weight:850; font-size:.8rem; }.comparison-table th:first-child,.comparison-table tbody th { text-align:left; }.comparison-table tbody th { font-size:.88rem; font-weight:750; }.comparison-table td { font-size:.87rem; color:#55516d; }.comparison-table tr:last-child th,.comparison-table tr:last-child td { border-bottom:0; }.comparison-table .unlimited-cell { color:#2d9871; font-weight:850; }.comparison-note { font-size:.76rem; color:#716985; margin:18px 0 0; }
.price-faq { background:var(--cream); }.price-cta { background:linear-gradient(120deg,#4b36ee,#332281); }.price-cta .cta-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.btn-ghost-light { color:white; background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.55); }.btn-ghost-light:hover { background:rgba(255,255,255,.22); color:white; }
.home-pricing-teaser { background:#f3f0ff; }.home-pricing-inner { display:grid; grid-template-columns:1.6fr .8fr; align-items:center; gap:45px; background:#fff; padding:58px; border-radius:32px; border:1px solid #e6e2f3; }.home-pricing-inner h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.065em; line-height:1.12; margin:15px 0 16px; }.home-pricing-inner h2 span { color:var(--violet); }.home-pricing-inner p { max-width:520px; color:var(--ink-soft); margin:0 0 25px; }.home-pricing-ticket { background:#161537; color:white; border-radius:25px; padding:39px 28px; transform:rotate(3deg); min-height:235px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.home-pricing-ticket span { font-size:.65rem; font-weight:900; letter-spacing:.15em; color:#baf5d9; }.home-pricing-ticket strong { font-size:2.75rem; letter-spacing:-.06em; line-height:1.3; }.home-pricing-ticket small { color:#ccc8e8; }.home-pricing-ticket .ticket-dots { color:#e3d0ff; font-size:2rem; margin-top:6px; }
.inline-pricing-link,.tool-upgrade a { color:var(--violet); font-weight:780; text-decoration:underline; text-underline-offset:3px; }.tool-upgrade { font-size:.82rem; color:var(--ink-soft); margin:11px 0 0 !important; }
@media(max-width:1050px) { .desktop-nav { gap:21px; }.pricing-grid { gap:14px; }.price-card { padding:30px 21px; }.price-card-featured { padding:29px 20px; }.plan-price .amount { font-size:3.65rem; }.plan-price .price-period { font-size:.73rem; } }
@media(max-width:800px) { .pricing-grid { grid-template-columns:1fr; gap:25px; max-width:540px; margin-inline:auto; }.price-card-featured { transform:none; }.starter-banner { flex-wrap:wrap; }.starter-banner .btn { width:100%; }.home-pricing-inner { grid-template-columns:1fr; gap:30px; }.home-pricing-ticket { transform:rotate(0); min-height:200px; }.pricing-hero { padding:66px 0 69px; } }
@media(max-width:590px) { .pricing-hero h1 { font-size:clamp(3.05rem,12vw,4.4rem); }.pricing-hero-points { gap:7px; }.pricing-hero-points span { font-size:.68rem; padding:7px 10px; }.pricing-section { padding-top:43px; }.starter-banner { padding:21px; gap:13px; }.starter-icon { width:45px; height:45px; border-radius:14px; font-size:1.6rem; }.starter-description { flex-basis:calc(100% - 65px); }.pricing-heading { margin:58px auto 40px; }.price-card { padding:29px 25px; }.home-pricing-inner { padding:29px 24px; }.comparison-table th,.comparison-table td { padding:14px 16px; }.spark-one { font-size:10rem; } }


/* Login and account entry */
.header-login[aria-current="page"] { border-color:#aea2ff; color:var(--violet); background:#f3f0ff; }
.mobile-nav .mobile-login-btn { display:flex; margin-top:7px; justify-content:center; border-color:#d7d0f5; color:var(--violet); }
.login-main { padding:68px 0 96px; background:radial-gradient(circle at 81% 4%,#eeeaff 0%,transparent 37%),var(--cream); }
.login-layout { max-width:1085px; margin-inline:auto; display:grid; grid-template-columns:1.02fr 1fr; border:1px solid #e3dfed; border-radius:32px; background:#fff; overflow:hidden; box-shadow:0 28px 85px rgba(40,28,114,.095); min-height:625px; }
.login-showcase { padding:48px 47px 37px; background:linear-gradient(147deg,#23165e 0%,#4930df 62%,#6550ee 100%); color:#fff; position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; }
.login-showcase-glow { position:absolute; z-index:-1; background:radial-gradient(circle,rgba(184,169,255,.53),rgba(184,169,255,0) 68%); height:520px; width:520px; top:160px; right:-210px; pointer-events:none; }
.login-showcase:after { content:'✳'; position:absolute; font-size:17rem; opacity:.065; top:-94px; right:-66px; z-index:-1; }
.login-showcase-top { display:flex; align-items:center; gap:11px; font-weight:850; font-size:.67rem; letter-spacing:.18em; color:#d6cfff; }
.showcase-symbol { display:grid; place-items:center; width:39px; height:39px; color:#4b36ee; font-size:1.65rem; background:#d8ffe7; border-radius:13px; }
.login-showcase h1 { font-size:clamp(2.5rem,3.6vw,3.55rem); line-height:1.1; letter-spacing:-.065em; font-weight:850; margin:38px 0 18px; max-width:460px; }
.login-showcase h1 em { font-style:normal; color:#d6ffba; }
.login-showcase>p { max-width:370px; color:#e3ddff; margin:0 0 30px; font-size:.94rem; line-height:1.7; }
.login-preview { width:min(100%,370px); border:1px solid rgba(255,255,255,.32); padding:17px; border-radius:23px; transform:rotate(-3deg); background:rgba(255,255,255,.95); color:#272044; box-shadow:0 25px 50px rgba(15,7,79,.22); margin:2px auto 29px; }
.login-preview-header { display:flex; align-items:center; gap:5px; font-size:.65rem; font-weight:800; color:#938aab; margin:0 0 20px; }
.login-preview-header span:last-child { margin-left:auto; }
.preview-dot { width:7px; height:7px; border-radius:50%; background:#d8d1e6; }
.login-preview-label { font-size:.62rem; color:#756bb4; font-weight:900; letter-spacing:.12em; margin:0 4px 11px; }
.login-preview-card { border:1px solid #ebe6ff; border-radius:17px; background:#f5f3ff; text-align:center; padding:25px 14px; display:grid; gap:10px; }
.login-preview-card>span { font-size:.6rem; color:#877bc1; font-weight:850; letter-spacing:.15em; }
.login-preview-card strong { font-size:1.18rem; letter-spacing:-.04em; }
.preview-answer { padding:8px 13px; border-radius:10px; background:#d8f7e8; color:#206d4e; font-size:.67rem; font-weight:750; margin:0 auto; }
.login-preview-progress { display:flex; gap:13px; align-items:center; padding:17px 4px 0; }
.login-preview-progress>span { flex:1; background:#e9e6f2; height:7px; border-radius:99px; overflow:hidden; }
.login-preview-progress i { display:block; height:100%; width:65%; background:#5c43ea; border-radius:99px; }
.login-preview-progress small { font-size:.64rem; color:#8c85a8; }
.login-showcase-bottom { display:flex; align-items:center; gap:10px; color:#e0d9ff; font-size:.78rem; font-weight:600; margin-top:auto; }
.check-circle { width:21px; height:21px; border-radius:50%; background:#baf3d8; color:#276f4f; display:grid; place-items:center; font-size:.7rem; font-weight:900; }
.login-panel { padding:61px clamp(27px,4.6vw,68px) 37px; display:flex; flex-direction:column; justify-content:center; }
.login-panel-heading .eyebrow { font-size:.7rem; }
.login-panel-heading h2 { font-size:clamp(2rem,3.2vw,3rem); letter-spacing:-.065em; line-height:1.12; margin:18px 0 13px; }
.login-panel-heading p { color:var(--ink-soft); font-size:.92rem; margin:0 0 29px; }
.login-form .form-group { margin-bottom:18px; }
.login-form .field-label { margin:0 0 8px; font-size:.83rem; }
.login-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.login-help-link { color:var(--violet); font-size:.79rem; font-weight:750; margin-bottom:8px; }
.login-input-wrap { position:relative; display:flex; align-items:center; }
.login-input-wrap>svg { width:18px; height:18px; position:absolute; left:16px; pointer-events:none; color:#938cad; }
.login-input-wrap .field { padding:14px 67px 14px 46px; min-height:55px; background:#fcfbff; }
.login-input-wrap input[type=email] { padding-right:15px; }
.toggle-password { position:absolute; right:11px; padding:7px 8px; border:0; background:transparent; color:var(--violet); font-size:.76rem; font-weight:850; }
.login-submit { margin-top:12px; min-height:53px; }
.login-status { border-radius:12px; padding:13px 15px; color:#654f1b; border:1px solid #f5dfa2; background:#fffae9; font-size:.8rem; margin:15px 0 0; }
.login-status[hidden] { display:none; }
.login-status.error { color:#9b302c; border-color:#f5c3c2; background:#fff0f0; }
.login-status.success { color:#196343; border-color:#bce6d1; background:#e9fbf1; }
.login-provider-notice { background:#f5f2ff; border-radius:13px; display:flex; align-items:start; gap:10px; font-size:.74rem; line-height:1.55; color:#696083; padding:12px 13px; margin:18px 0 25px; }
.login-provider-notice>span:first-child { font-size:1.1rem; color:var(--violet); line-height:1.1; }
.login-alt { border-top:1px solid #e8e5ef; padding-top:20px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.82rem; }
.login-alt span { color:var(--ink-soft); }
.login-alt a { font-weight:800; color:var(--violet); }
.login-smallprint { font-size:.72rem; color:#777286; margin:18px 0 0; }
.login-smallprint a { color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
@media(max-width:980px) { .desktop-nav,.header-actions>.btn { display:none; } .mobile-menu { display:flex; } }
@media(max-width:850px) { .login-layout { grid-template-columns:1fr; max-width:550px; }.login-showcase { min-height:0; padding:32px; }.login-showcase h1 { font-size:2.55rem; margin:20px 0 10px; }.login-showcase>p { margin-bottom:0; }.login-preview { display:none; }.login-showcase-bottom { display:none; }.login-panel { padding:40px 32px 35px; } }
@media(max-width:590px) { .login-main { padding:27px 0 60px; }.login-layout { border-radius:23px; }.login-showcase { padding:28px 23px; }.login-showcase h1 { font-size:clamp(2.2rem,9vw,2.8rem); }.login-panel { padding:31px 23px 27px; }.login-panel-heading h2 { font-size:2rem; }.login-provider-notice { font-size:.72rem; } }
.login-provider-notice[hidden] { display:none; }