/* Feed Your Brain brand tokens, from "FYB Brand Identity & Voice Guide v3.0" (Sep 25, 2026), sections 09 to 11 */
:root{
 --sky:#0FA5DC;        /* FYB Sky Blue: headers, accents, rules, borders. Not for body-size text (2.8:1) */
 --sky-d:#0A87BE;      /* Sky Blue Dark: large display type, course image backgrounds */
 --sky-text:#0A7CAE;   /* Text-safe blue (guide 15, open decision 1: recommended, not yet approved). Links, buttons */
 --sky-t:#E3F6FD;      /* Sky Blue Tint: callouts, highlights, hover */
 --yellow:#F5C518;     /* Brain Yellow: accent bars, underlines, highlights only */
 --yellow-t:#FFF8E1;   /* Yellow Tint: quote and featured-content backgrounds */
 --ink:#1C1C1C;        /* Near Black: headlines, body */
 --gray:#464646;       /* Dark Gray: body and any caption a reader needs */
 --mute:#888888;       /* Medium Gray: decorative labels and placeholders only */
 --line:#E8E8E8;       /* Light Gray: dividers, borders, inputs */
 --white:#FFFFFF;
 --r:2px;              /* icons and small UI: 2px radius */
 --rc:12px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Lato",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--gray);background:var(--white);line-height:1.55;font-size:16px}
h1,h2,h3,h4,h5{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);line-height:1.2;margin:0 0 .45em}
h1{font-size:2.6rem;font-weight:700}h2{font-size:1.75rem;font-weight:600}h3{font-size:1.15rem;font-weight:500}h4{font-weight:600}
a{color:var(--sky-text)}p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.u{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-size:100% 4px;background-position:0 100%;padding-bottom:4px}
.rule{border:0;border-top:3px solid var(--sky);margin:0}
.label{font-family:"Lato",sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:700}
/* nav */
.nav{position:sticky;top:0;z-index:5;background:#fff;border-bottom:3px solid var(--sky)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:92px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:120px;height:auto;display:block}
.desc{font-family:"Lato",sans-serif;font-size:1rem;color:var(--ink)}.desc b{color:var(--sky-text);font-weight:400}
.nav nav{display:flex;gap:24px;margin-left:auto;font-size:.95rem}.nav nav a{text-decoration:none;color:var(--ink)}.nav nav a:hover{color:var(--sky-text)}
.btn{display:inline-block;border:0;border-radius:6px;padding:.8rem 1.4rem;font-family:"Poppins",sans-serif;font-weight:600;text-decoration:none;cursor:pointer;font-size:.98rem}
.btn-p{background:var(--sky-text);color:#fff}.btn-p:hover{background:#086a95}
.btn-o{background:#fff;color:var(--sky-text);border:2px solid var(--sky-text)}
.btn-sm{padding:.5rem 1rem;font-size:.88rem}
.mock-note{background:var(--yellow-t);border-bottom:1px solid var(--line);color:var(--ink);font-size:.82rem;text-align:center;padding:6px}
/* hero */
.hero{padding:64px 0 52px;background:#fff}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;margin-bottom:16px}
.lead{font-size:1.15rem;color:var(--gray);max-width:580px}
.beats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.beats li{border-left:3px solid var(--sky);padding:2px 12px;font-size:.95rem;color:var(--ink)}
.hero-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--yellow);border-radius:var(--rc);padding:22px}
.mini-b{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:.95rem;color:var(--gray)}
.mini-b s{color:var(--gray);text-decoration-thickness:2px}
.mini-a{background:var(--sky-t);border-left:4px solid var(--sky);border-radius:8px;padding:12px 14px;font-size:.95rem;margin-top:10px;color:var(--ink)}
.arrow{text-align:center;color:var(--gray);font-size:.8rem;margin:6px 0;text-transform:uppercase;letter-spacing:.08em}
.search{margin-top:26px;display:flex;gap:10px;max-width:580px}
.search input{flex:1;padding:.85rem 1.1rem;border-radius:6px;border:1.5px solid var(--line);font-size:1rem;background:#fff;font-family:inherit}
.search input:focus{outline:2px solid var(--sky);border-color:var(--sky)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.42rem .9rem;font-size:.9rem;cursor:pointer;font-family:inherit;color:var(--ink)}
.chip svg{width:16px;height:16px}
.chip.on{background:var(--sky-t);border-color:var(--sky);color:var(--ink);font-weight:700}
section{padding:56px 0}.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:10px}
.sec-head p{color:var(--gray);margin:0}
.cat{margin-top:34px}.cat h3{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:600}
.ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;border:2px solid var(--sky);color:var(--sky-d)}
.ic svg{width:20px;height:20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:20px;display:flex;flex-direction:column;gap:8px;transition:.15s;text-decoration:none;color:inherit;position:relative}
.card:hover{border-color:var(--sky);background:var(--sky-t)}
.card h4{margin:0;font-size:1.05rem}.card p{margin:0;color:var(--gray);font-size:.95rem}
.card .q{font-size:.85rem;color:var(--gray);margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.badge{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r);padding:.22rem .55rem;color:var(--ink)}
.live{background:var(--sky-t);box-shadow:inset 3px 0 0 var(--sky)}.next{background:var(--yellow-t);box-shadow:inset 3px 0 0 var(--yellow)}.soon{background:#f4f4f4;color:var(--gray)}
.band{background:var(--sky-t);border-left:6px solid var(--sky);border-radius:var(--rc);padding:40px}
.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:22px;color:var(--gray);text-decoration:none}
.quiz:hover{border-color:var(--sky)}.quiz h4{margin:.4rem 0;font-size:1.1rem}.quiz p{font-size:.95rem}
.quiz span{font-weight:700;color:var(--sky-text)}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:20px;margin-top:22px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:26px;display:flex;flex-direction:column;gap:10px;position:relative}
.plan.feat{border:2px solid var(--sky)}
.plan .tag{position:absolute;top:-12px;left:24px;background:var(--yellow);color:var(--ink);font-size:.75rem;font-weight:700;border-radius:var(--r);padding:.2rem .7rem;text-transform:uppercase;letter-spacing:.06em}
.amt{font-family:"Poppins",sans-serif;font-weight:700;font-size:2.3rem;color:var(--ink)}.amt small{font-size:1rem;color:var(--gray);font-family:"Lato",sans-serif;font-weight:400}
.plan ul{padding-left:1.1rem;margin:0 0 6px;color:var(--gray)}.plan li{margin:.3rem 0}
.plan .btn{margin-top:auto;text-align:center}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.course{border-radius:var(--rc);overflow:hidden;background:#fff;border:1px solid var(--line)}
.course .top{height:140px;display:grid;place-items:center;background:var(--sky-d)}
.course .top span{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.7rem;color:#fff;border-bottom:4px solid var(--yellow);padding-bottom:2px}
.course .body{padding:20px}.course h3{font-weight:600}.course p{color:var(--gray);font-size:.95rem}
.news{background:var(--yellow-t);border-top:4px solid var(--yellow);border-radius:var(--rc);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.news form{display:flex;gap:10px}.news input{flex:1;padding:.85rem 1rem;border-radius:6px;border:1.5px solid var(--line);font-size:1rem;font-family:inherit}
footer{background:var(--ink);color:var(--line);padding:48px 0 30px;margin-top:40px;border-top:4px solid var(--yellow)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}footer a{color:var(--line);text-decoration:none;display:block;margin:.3rem 0;font-size:.95rem}
footer a:hover{color:#fff;text-decoration:underline}
footer h5{color:#fff;margin:0 0 .6rem;font-size:.95rem;font-weight:600}
footer .flogo{width:150px;display:block}
.fine{border-top:1px solid #3a3a3a;margin-top:30px;padding-top:18px;font-size:.85rem;color:var(--line)}
/* tool page */
.crumbs{font-size:.88rem;color:var(--gray);padding:18px 0 0}.crumbs a{color:var(--gray)}
.tool-hero{padding:22px 0 10px}.tool-hero p.lead{max-width:780px}
.tool{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:22px}
.panel h3{font-size:1.05rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
textarea{width:100%;min-height:210px;border:1.5px solid var(--line);border-radius:8px;padding:14px;font:inherit;font-size:.98rem;color:var(--ink);background:#fff;resize:vertical}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.meta{font-size:.88rem;color:var(--gray)}
.check{display:flex;gap:8px;align-items:center;font-size:.93rem}
.out{white-space:pre-wrap;background:var(--sky-t);border-left:4px solid var(--sky);border-radius:8px;padding:16px;font-size:1rem;min-height:120px;color:var(--ink)}
.stat{display:inline-flex;gap:6px;align-items:center;background:var(--yellow-t);color:var(--ink);border-radius:var(--r);padding:.2rem .6rem;font-size:.8rem;font-weight:700;box-shadow:inset 3px 0 0 var(--yellow)}
.changes{list-style:none;padding:0;margin:0}.changes li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.changes .b{color:var(--gray);text-decoration:line-through;text-decoration-thickness:2px}.changes .a{color:var(--ink);font-weight:700;background:var(--sky-t);padding:0 4px}.changes .n{display:block;color:var(--gray);margin-top:3px}
.kept li{margin:.35rem 0;font-size:.95rem}
.habit{background:#fff;border:1px solid var(--line);border-top:4px solid var(--yellow);border-radius:var(--rc);padding:22px}
.callout{background:var(--sky-t);border-left:4px solid var(--sky);border-radius:0 var(--rc) var(--rc) 0;padding:20px 22px;margin-top:22px}
.callout h3{font-weight:600;margin-bottom:.5em}.callout p{color:var(--ink)}
.callout .src{font-size:.85rem;color:var(--gray);margin:0}.callout .src a{color:var(--sky-text)}
.cta-course{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:var(--rc);padding:20px 22px}
.pull{background:var(--yellow-t);border-radius:var(--rc);padding:20px 22px}
.pull q{font-family:"Lora",Georgia,serif;font-style:italic;font-size:1.08rem;color:var(--gray);quotes:"\201C" "\201D"}
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin:10px 0}
.faq summary{font-family:"Poppins",sans-serif;font-weight:500;color:var(--ink);cursor:pointer}.faq details p{margin:.6rem 0 0;color:var(--gray)}
.two{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin-top:22px}
.swap{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.swap td,.swap th{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;color:var(--gray)}.swap th{background:var(--sky-t);color:var(--ink);font-family:"Poppins",sans-serif;font-weight:500}
/* quiz */
.qcard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:var(--rc);padding:28px}
.opt{display:block;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;margin:8px 0;cursor:pointer;font-size:.97rem;color:var(--ink)}
.opt.sel{border-color:var(--sky);background:var(--sky-t)}
.prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:6px 0 18px}.prog i{display:block;height:100%;width:30%;background:var(--sky)}
.comp td:not(:first-child),.comp th:not(:first-child){text-align:center}
@media(max-width:900px){.hero .wrap,.tool,.two,.news{grid-template-columns:1fr}.grid,.quiz-grid,.price-grid,.course-grid{grid-template-columns:1fr 1fr}h1{font-size:2.1rem}}
.tonebar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;background:var(--yellow-t);border-radius:10px;font-size:.92rem;color:var(--ink)}
.tonebar[hidden]{display:none}
.tonenote b{color:var(--sky-text)}
.linkbtn{background:none;border:0;color:var(--sky-text);font:inherit;font-weight:600;cursor:pointer;padding:2px 4px}
.linkbtn:disabled{color:var(--gray);cursor:default;opacity:.6}
.btn:disabled{opacity:.55;cursor:default}
.card-soon,.quiz-soon{cursor:default}
.card-soon:hover,.quiz-soon:hover{transform:none;box-shadow:none}
.soon-label{display:inline-block;margin-top:auto;font-size:.85rem;font-weight:700;color:var(--gray);background:var(--yellow-t);border-radius:999px;padding:3px 10px;align-self:flex-start}
.fdead{display:block;opacity:.75;margin:6px 0}
.legal h2{font-size:1.25rem;margin:26px 0 8px}.legal p,.legal li{line-height:1.7}.legal ul{padding-left:20px}
