@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;1,500;1,600&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --board:#ffffff; --board-2:#f4f1e8; --board-3:#faf8f3;
  --chalk:#24261f; --chalk-dim:#6b6f68; --chalk-faint:#9ca098;
  --yellow:#32b852; --yellow-dim:rgba(50,184,82,0.12);
  --green-dark:#153c27;
  --pink:#d6685e; --pink-dim:rgba(214,104,94,0.12);
  --green-live:#32b852;
  --rule:rgba(20,20,10,0.09); --rule-strong:rgba(20,20,10,0.15);
  --radius:10px;
  --font-hand:'Fraunces',Georgia,serif; --font-mono:'JetBrains Mono',monospace; --font-ui:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:
    radial-gradient(ellipse 800px 500px at 10% -10%, rgba(50,184,82,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 95% 10%, rgba(50,184,82,0.05), transparent 55%),
    var(--board-3);
  color:var(--chalk); font-family:var(--font-ui);
  min-height:100vh;
}
a{color:var(--yellow);}
.wrap{max-width:1280px;margin:0 auto;padding:18px;}
.center-wrap{max-width:440px;margin:0 auto;padding:60px 18px;}

header.top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:2px dashed var(--rule-strong);padding-bottom:14px;margin-bottom:20px;
}
.brand{font-family:var(--font-hand);font-size:26px;color:var(--yellow);display:flex;align-items:center;gap:8px;}
.brand-icon{height:68px;width:auto;display:block;}
.brand small{font-family:var(--font-ui);font-size:11px;color:var(--chalk-dim);font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:-2px;}
.spacer{flex:1;}

button, .btn{
  font-family:var(--font-ui);font-weight:600;font-size:13px;border-radius:999px;
  padding:10px 20px;border:1.5px solid var(--rule-strong);background:transparent;color:var(--chalk);
  cursor:pointer;transition:all .18s ease;display:inline-block;text-decoration:none;
}
button:hover,.btn:hover{border-color:var(--chalk-dim);background:rgba(255,255,255,.04);transform:translateY(-1px);}
button:active,.btn:active{transform:translateY(0);}
button:disabled{opacity:.4;cursor:not-allowed;transform:none;}
button.primary,.btn.primary{background:var(--yellow);color:#153c27;border-color:var(--yellow);box-shadow:0 4px 16px rgba(50,184,82,0.25);}
button.primary:hover,.btn.primary:hover{background:#2a9f47;box-shadow:0 6px 22px rgba(50,184,82,0.35);}
button.ghost,.btn.ghost{border-color:transparent;color:var(--chalk-dim);}

.card{
  background:var(--board);border:1px solid var(--rule);border-radius:14px;
  padding:22px;box-shadow:0 4px 20px rgba(0,0,0,.25);
}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%;background:var(--board-2);border:1px solid var(--rule-strong);border-radius:8px;
  color:var(--chalk);font-family:var(--font-ui);font-size:14px;padding:10px 12px;
}
input:focus,textarea:focus{outline:none;border-color:var(--yellow);}
label{font-size:12px;color:var(--chalk-dim);display:block;margin:14px 0 6px;}
.field-error{color:var(--pink);font-size:13px;margin-top:10px;min-height:18px;}
h1,h2,h3{font-family:var(--font-hand);color:var(--chalk);font-weight:700;}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;}
@media (max-width:700px){.plans{grid-template-columns:1fr;}}
.plan-card{background:var(--board);border:1.5px solid var(--rule-strong);border-radius:14px;padding:24px;position:relative;transition:transform .2s ease, box-shadow .2s ease;}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.3);}
.plan-card.highlight{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow), 0 8px 30px rgba(50,184,82,.15);}
.plan-card.highlight:hover{box-shadow:0 0 0 1px var(--yellow), 0 12px 34px rgba(50,184,82,.25);}
.plan-badge{position:absolute;top:-12px;right:20px;background:var(--yellow);color:#153c27;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;}
.plan-price{font-family:var(--font-mono);font-size:34px;color:var(--chalk);margin:8px 0;}
.plan-price span{font-size:14px;color:var(--chalk-dim);}
.plan-list{list-style:none;padding:0;margin:16px 0;color:var(--chalk-dim);font-size:14px;line-height:1.9;}
.plan-list li::before{content:"✓ ";color:var(--yellow);}
.trial-note{font-size:12px;color:var(--chalk-faint);margin-top:10px;}

/* ---------- Study widgets (shared: flashcards, matching, blitz, quiz) ---------- */
.empty-state{color:var(--chalk-faint);font-size:13px;text-align:center;padding:30px 20px;line-height:1.6;}
.flashcard{background:var(--board-2);border:1px solid var(--rule-strong);border-radius:12px;padding:24px;min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;font-family:var(--font-hand);font-size:18px;position:relative;}
.flashcard .hint{position:absolute;bottom:8px;font-size:10px;font-family:var(--font-ui);color:var(--chalk-faint);}
.flash-wrap{position:relative;margin-bottom:12px;}
.flash-progress{text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--chalk-faint);margin-bottom:8px;}
.flash-mark-row{display:flex;gap:10px;margin-top:12px;}
.flash-mark{flex:1;padding:10px;border-radius:10px;font-weight:700;font-size:13px;}
.flash-mark-x{background:var(--pink-dim);border-color:var(--pink);color:var(--pink);}
.flash-mark-x:hover{background:var(--pink);color:#fff;}
.flash-mark-check{background:var(--yellow-dim);border-color:var(--yellow);color:var(--green-dark);}
.flash-mark-check:hover{background:var(--yellow);}
.flash-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--chalk-dim);}

.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.match-item{background:var(--board-2);border:1px solid var(--rule-strong);border-radius:8px;padding:10px 12px;font-size:13px;cursor:pointer;}
.match-item.selected{border-color:var(--yellow);}
.match-item.correct{border-color:var(--green-live);opacity:.5;pointer-events:none;}
.match-item.wrong{border-color:var(--pink);animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

.quiz-question{margin-bottom:16px;}
.quiz-options{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.quiz-option{background:var(--board-2);border:1px solid var(--rule-strong);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;text-align:left;font-family:var(--font-ui);color:var(--chalk);}
.quiz-option.correct{border-color:var(--green-live);}
.quiz-option.wrong{border-color:var(--pink);}
.quiz-difficulty-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 24px;min-width:110px;}
.quiz-difficulty-btn .tag{font-family:var(--font-mono);font-size:10px;color:var(--chalk-faint);background:rgba(20,20,10,0.06);padding:3px 8px;border-radius:5px;}
.blitz-top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--chalk-dim);margin-bottom:10px;}
.blitz-blank{color:var(--yellow);border-bottom:2px dashed var(--yellow);padding:0 2px;}

/* ---------- Tabs (study guide viewer) ---------- */
.tab-bar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px dashed var(--rule-strong);padding-bottom:10px;margin-bottom:16px;}
.tab-btn{background:transparent;border:1px solid var(--rule-strong);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--chalk-dim);cursor:pointer;}
.tab-btn.active{background:var(--yellow);color:#153c27;border-color:var(--yellow);}

/* ---------- Library / folders ---------- */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:16px 0;}
.folder-card{background:var(--board);border:1.5px solid var(--rule-strong);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s;}
.folder-card:hover{border-color:var(--yellow);}
.folder-card.active{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow);}
.folder-card .name{font-family:var(--font-hand);font-size:17px;}
.folder-card .count{font-size:11px;color:var(--chalk-faint);margin-top:4px;}
.note-row{display:flex;align-items:center;gap:12px;background:var(--board);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.note-row .note-info{flex:1;}
.note-row .note-title{font-family:var(--font-hand);font-size:16px;}
.note-row .note-meta{font-size:11px;color:var(--chalk-faint);font-family:var(--font-mono);margin-top:2px;}
.note-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--yellow);}
.home-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
@media (max-width:700px){.home-options{grid-template-columns:1fr;}}
.home-option{background:var(--board);border:1.5px solid var(--rule-strong);border-radius:16px;padding:32px;text-align:center;cursor:pointer;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;text-decoration:none;display:block;}
.home-option:hover{border-color:var(--yellow);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35);}
.home-option .icon{font-size:40px;margin-bottom:12px;}
.home-option h2{font-size:22px;margin:0 0 8px;}
.home-option p{color:var(--chalk-dim);font-size:13px;margin:0;}

/* ---------- Marketing pages: hero, features, steps, how-to ---------- */
.hero{text-align:center;padding:56px 20px 30px;}
.hero .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px;}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 18px;}
.hero h1 .accent{color:var(--yellow);}
.hero p.sub{color:var(--chalk-dim);font-size:16px;max-width:560px;margin:0 auto 28px;line-height:1.6;}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@media (max-width:600px){.hero h1{font-size:30px;}}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:40px 0;}
.feature-card{background:var(--board);border:1px solid var(--rule);border-radius:14px;padding:26px 22px;text-align:center;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
.feature-card:hover{transform:translateY(-4px);border-color:var(--yellow);box-shadow:0 10px 30px rgba(0,0,0,.3);}
.feature-card .icon{font-size:34px;margin-bottom:12px;}
.feature-card h3{font-size:17px;margin:0 0 8px;}
.feature-card p{color:var(--chalk-dim);font-size:13px;line-height:1.55;margin:0;}

.step-list{display:flex;flex-direction:column;gap:16px;margin:32px 0;}
.step-item{display:flex;gap:18px;background:var(--board);border:1px solid var(--rule);border-radius:14px;padding:22px;align-items:flex-start;}
.step-num{font-family:var(--font-hand);font-size:28px;color:var(--yellow);min-width:40px;}
.step-item h3{margin:0 0 6px;font-size:17px;}
.step-item p{margin:0;color:var(--chalk-dim);font-size:14px;line-height:1.6;}

.toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 36px;padding:16px;background:var(--board);border:1px solid var(--rule);border-radius:12px;}
.toc a{font-size:12px;color:var(--chalk-dim);border:1px solid var(--rule-strong);border-radius:999px;padding:6px 12px;text-decoration:none;}
.toc a:hover{color:var(--chalk);border-color:var(--yellow);}

.howto-section{margin-bottom:44px;scroll-margin-top:20px;}
.howto-section h2{font-size:22px;display:flex;align-items:center;gap:10px;}
.howto-section .desc{color:var(--chalk-dim);font-size:14px;line-height:1.7;margin-bottom:16px;}
.howto-list{list-style:none;padding:0;margin:0;}
.howto-list li{background:var(--board);border:1px solid var(--rule);border-radius:10px;padding:14px 18px;margin-bottom:10px;font-size:14px;line-height:1.6;}
.howto-list li strong{color:var(--yellow);}
.tip-box{background:var(--yellow-dim);border:1px solid var(--yellow);border-radius:10px;padding:14px 18px;font-size:13px;margin-top:16px;}

/* ---------- Generated notes: title, headers, nested lists ---------- */
.notes-doc-title{font-family:var(--font-ui);font-size:24px;font-weight:700;color:var(--chalk);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--rule-strong);}
.notes-section-head{font-family:var(--font-ui);font-size:17px;font-weight:700;color:var(--chalk);margin:26px 0 10px;}
.notes-section-head:first-child{margin-top:0;}
.notes-subhead{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--chalk-dim);margin:16px 0 6px;}
.notes-list{margin:8px 0 18px 22px;padding:0;}
.notes-list li{font-size:14px;line-height:1.7;margin-bottom:6px;font-family:var(--font-ui);}
.notes-list .notes-list{margin:4px 0 6px 20px;list-style-type:"– ";}
.notes-list-ordered{list-style-type:decimal;}
.notes-list strong{color:var(--chalk);font-weight:700;}

/* ---------- Legal footer ---------- */
.legal-footer{border-top:1px dashed var(--rule-strong);margin-top:50px;padding:18px 0 30px;text-align:center;}
.legal-footer p{color:var(--chalk-faint);font-size:11.5px;line-height:1.6;max-width:640px;margin:0 auto;}