/* Palette v3 "Electric" (Hannah, 25 Oct): --red=hot orange (fills only, dark text), --blue=ultraviolet, --green=indicator, --yellow=cyan (fills only, dark text).
   learnfromcher.com — shared website styles (marketing pages + portal).
   Link once in every page's <head>, after the Google Fonts link:
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Hanken+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/css/lfc-site.css"> */
:root{
  --ink:#111111;--cream:#F6F5F1;--paper:#FFFFFF;--grey:#E8E6DF;--line:#E2E0D9;--sand:#F0EBDF;
  --red:#FF6A13;--blue:#5B2BFF;--green:#00995A;--green-dk:#007A48;--yellow:#00B3FF;--sky:#E4DCFF;--violet-wash:#E4DCFF;--cyan-wash:#D2F3FF;--orange-wash:#FFE4D1;
  --mute:#5A5A5A;--mute-2:#8A8A8A;
  /* CHER letters only — never use elsewhere */
  --cher-c:#1A7A8A;--cher-h:#7C6FAB;--cher-e:#C2185B;--cher-r:#92400E;
  --f-head:'Bricolage Grotesque',sans-serif;--f-body:'Hanken Grotesk',sans-serif;--f-mono:'IBM Plex Mono',monospace;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--blue)}
h1,h2,h3{font-family:var(--f-head);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7vw,84px);letter-spacing:-.04em;line-height:1}
h2{font-size:clamp(28px,4vw,48px)}
h3{font-size:clamp(20px,2.4vw,26px)}
p{margin:0;text-wrap:pretty}
em.accent{font-style:italic;color:var(--blue)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
@media(min-width:900px){.wrap{padding:0 40px}}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow.blue{color:var(--blue)}
.lead{font-size:17px;color:#4A4A4A;max-width:560px}
.stack{display:flex;flex-direction:column;gap:14px}
.section{padding:48px 0}@media(min-width:900px){.section{padding:96px 0}}
.section.white{background:var(--paper);border-top:1px solid var(--line)}
.section.ink{background:var(--ink);color:var(--cream)}

/* nav */
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px;max-width:var(--wrap);margin:0 auto}
.nav img{height:28px}
.nav-burger{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.nav-burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px}
@media(min-width:900px){.nav{height:76px;padding:0 40px}.nav img{height:34px}}

/* buttons — square-cornered, 44px min */
.btn{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-body);font-weight:700;font-size:15px;border:0;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.btn-ink{background:var(--ink);color:var(--cream)}.btn-ink:hover{background:var(--blue);color:#fff}
.btn-grey{background:var(--grey);color:var(--ink)}.btn-grey:hover{background:var(--yellow);color:var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-yellow:hover{background:#fff;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* cards + grids */
.card{background:var(--paper);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:4px}
.card .n{font-family:var(--f-mono);font-size:11px;color:var(--mute-2)}
.card .t{font-weight:700;font-size:16px}
.card .d{font-size:14px;color:var(--mute);line-height:1.45}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{padding:18px 18px 22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:30px}
.fact .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mute-2);text-transform:uppercase}
.fact .v{font-family:var(--f-head);font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.03em}
.fact .s{font-size:13px;color:var(--mute)}

/* CHER method tiles */
.cher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:900px){.cher-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* CHER tiles (Hannah 25 Oct 2026): periodic-table box + big faint letter + highlighter swipe; set 1 colours */
.cher-grid{counter-reset:cher}
.cher-tile{counter-increment:cher;position:relative;overflow:hidden;isolation:isolate;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;padding:34px 14px 16px;min-height:150px;display:flex;flex-direction:column;gap:6px}
.cher-tile::before{content:counter(cher);position:absolute;top:11px;left:14px;font:600 12px/1 var(--f-mono,'IBM Plex Mono',monospace);color:var(--ink)}
.cher-tile .l{position:absolute;right:-.06em;bottom:-.24em;z-index:-1;font-family:var(--f-head);font-weight:800;font-size:120px;line-height:1;pointer-events:none}
.cher-tile .t span{padding:0 4px;margin-left:-4px;border-radius:3px 10px 4px 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--hl),var(--hl)) 0 92%/100% .58em no-repeat}
.cher-tile.c{--hl:#9FD6DE}.cher-tile.h{--hl:#CFC6EC}.cher-tile.e{--hl:#F7B6CF}.cher-tile.r{--hl:#FFE07A}
.cher-tile.c .l{color:#D3ECEF}.cher-tile.h .l{color:#E6E1F4}.cher-tile.e .l{color:#FCDDE9}.cher-tile.r .l{color:#FFEDB3}
@media(min-width:900px){.cher-tile{padding:44px 22px 24px;min-height:210px;gap:8px}.cher-tile::before{top:16px;left:22px;font-size:14px}.cher-tile .l{font-size:170px}}

/* floating chemistry clips (home only) */
.clip{position:absolute;border-radius:16px;padding:12px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;animation:lfcFloat 7s ease-in-out infinite}
.clip .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.clip .v{font-family:var(--f-head);font-weight:800;line-height:1.05}
@keyframes lfcFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@media(prefers-reduced-motion:reduce){.clip{animation:none}}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.field input,.field select,.field textarea{min-height:48px;padding:12px 14px;border:1px solid var(--ink);background:#fff;font:inherit;font-size:16px;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--yellow);outline-offset:0}
.field .err{font-size:13px;color:#B42318}

/* footer */
.foot{padding:20px 18px 96px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;max-width:var(--wrap);margin:0 auto}
.foot .links{font-family:var(--f-mono);font-size:11px;line-height:1.9;display:flex;flex-direction:column}
.foot .streams{font-family:var(--f-mono);font-size:11px;color:var(--mute-2)}

/* MENU pill + circular menu (see lfc-menu.js) */
.lfc-pill{position:fixed;right:16px;bottom:20px;z-index:40;display:flex;align-items:center;gap:8px;height:56px;padding:0 6px 0 16px;background:var(--ink);color:#fff;border:0;border-radius:999px;box-shadow:0 8px 24px rgba(17,17,17,.3);cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
@media(max-width:600px){.lfc-pill{font-size:0;letter-spacing:0;gap:0;padding:0 6px}}
.lfc-pill .face{width:44px;height:44px;border-radius:50%;background:#DFF3EC url(/assets/mascot-cher-face.webp) center/cover;box-shadow:0 0 0 3px var(--yellow)}
.lfc-menu{position:fixed;inset:0;z-index:50;pointer-events:none}
.lfc-menu .scrim{position:absolute;inset:0;background:rgba(17,17,17,.45);opacity:0;transition:opacity .3s}
.lfc-menu.open{pointer-events:auto}.lfc-menu.open .scrim{opacity:1}
.lfc-menu .bubble{position:absolute;left:18px;right:18px;top:22px;max-width:420px;margin:0 auto;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(17,17,17,.25);opacity:0;transform:translateY(-8px);transition:.3s}
.lfc-menu.open .bubble{opacity:1;transform:none}
.lfc-menu .bubble .who{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--blue)}
.lfc-menu .bubble .line{font-family:var(--f-head);font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.02em}
.lfc-ring{position:absolute;left:50%;border-radius:50%;display:flex;justify-content:center;font-weight:800;line-height:1.2;color:var(--ink);transform:scale(0);transition:transform .55s cubic-bezier(.2,1.2,.35,1)}
.lfc-ring:hover{color:var(--blue)}
.lfc-menu.open .lfc-ring{transform:scale(1)}
.lfc-menu .centre{position:absolute;left:50%;bottom:24px;width:112px;height:112px;margin-left:-56px;border-radius:50%;background:#fff url(/assets/mascot-cher-face.webp) center/cover;box-shadow:0 0 0 7px var(--yellow);border:0;cursor:pointer;transform:scale(0);transition:transform .4s}
.lfc-menu.open .centre{transform:scale(1)}

/* opening (first visit only) */
.lfc-intro{position:fixed;inset:0;z-index:60;background:#F3EFE6;cursor:pointer;transition:opacity .5s}
.lfc-intro.leaving{opacity:0}
.lfc-intro .skip{position:absolute;right:18px;top:22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);background:none;border:0;cursor:pointer;min-height:44px}
.lfc-intro .orbit{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-190px 0 0 -160px}
.lfc-intro .shell{position:absolute;left:15px;top:15px;width:290px;height:290px;border:1.5px dashed rgba(17,17,17,.22);border-radius:50%}
.lfc-intro .logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.lfc-intro .logo img{width:52%}
.lfc-intro .spin{position:absolute;inset:0;animation:lfcSpin 36s linear infinite}
.lfc-intro .spin img{position:absolute;width:72px;height:72px;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 16px rgba(17,17,17,.15);animation:lfcSpinR 36s linear infinite}
.lfc-intro .tap{position:absolute;bottom:64px;left:0;right:0;text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.22em}
.lfc-intro .bar{position:absolute;bottom:44px;left:50%;width:120px;margin-left:-60px;height:3px;background:rgba(17,17,17,.12);overflow:hidden}
.lfc-intro .bar i{display:block;height:100%;background:var(--ink);animation:lfcFill 3s linear forwards}
@keyframes lfcSpin{to{transform:rotate(360deg)}}@keyframes lfcSpinR{to{transform:rotate(-360deg)}}@keyframes lfcFill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.lfc-intro .spin,.lfc-intro .spin img{animation:none}}

/* Real testimonials (testiSection in templates/_lib.mjs) */
.testi-wrap{max-width:var(--wrap);margin:0 auto;padding:36px 16px}
.testi-wrap .h-sec{margin:6px 0 16px}
.testi-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.testi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.testi-card{margin:0;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.testi-tag{align-self:flex-start;background:var(--violet-wash,#E4DCFF);color:var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:5px 10px;border-radius:999px;max-width:100%}
.testi-card blockquote{margin:0;font-size:17px;line-height:1.45;font-weight:500}
.testi-card figcaption{font-family:var(--f-mono);font-size:12px;color:var(--mute)}
.testi-note{font-size:13px;color:var(--mute);margin:14px 0 0}