/* learnfromcher.com — site components on top of /css/lfc-site.css.
   lfc-site.css is the design handoff file (tokens, type, nav, buttons, cards,
   facts grid, CHER tiles, clips, forms, footer, MENU pill, circular menu,
   opening). This file adds what the real pages need: desktop nav links,
   readable-contrast text tokens, the footer link grid, and the shared page
   blocks (big headings, dark cards, FAQ, step lists, prose).
   Brand colours only through the variables in lfc-site.css. */

:root{
  /* Electric palette contrast rules (Hannah, 25 Oct; checked with
     scripts/contrast-check.mjs):
     - hot orange (--red) and cyan (--yellow) are FILLS ONLY, always with
       #111 text; never a text colour.
     - small white text sits on --green-dk (#007A48); --green (#00995A) is
       for fills and large text only (white on it is ~3.6:1).
     - accent text on light backgrounds is ultraviolet (--blue); accent text
       on ink uses the violet wash (ultraviolet on ink is under 3:1).
     The handoff's #8A8A8A fails WCAG AA at 10–13px on cream, so small
     labels use a slightly deeper grey. */
  --mute-2:#666666;    /* passes 4.5:1 on cream, white and sand */
  --ink-mute:#B5B5B5;   /* secondary text on ink */
  --on-ink-accent:var(--violet-wash);  /* accent text on ink */
  --focus:var(--blue);  /* focus ring on light backgrounds (cyan is under 3:1 on cream) */
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* on ink, the cyan ring is the visible one */
.dark-card,.cta-band,.section.ink,.prog-cta,.lesson-stage{--focus:var(--yellow)}
.field input:focus,.field select:focus,.field textarea:focus{outline-color:var(--focus)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- nav ---- */
.site-head{background:var(--cream)}
.site-head.line{border-bottom:1px solid var(--line)}
.site-head.ink-line{border-bottom:1px solid var(--ink)}
.nav img{width:auto}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-links{display:none}
.nav-cta{display:none}
@media(min-width:900px){
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-links a{font-weight:700;font-size:15px;min-height:44px;display:flex;align-items:center}
  .nav-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .nav-cta{display:inline-flex;font-size:14px}
}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line)}
.site-foot .foot{flex-direction:column;align-items:stretch;gap:6px;padding:16px 18px 4px}
.foot .links{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;line-height:1.2}
.foot .links a{min-height:44px;display:flex;align-items:center;letter-spacing:.06em;cursor:pointer;white-space:nowrap}
.foot .streams{padding:4px 0 0}
.foot-legal{max-width:var(--wrap);margin:0 auto;padding:0 18px 100px;font-size:12px;color:var(--mute-2)}
.foot-legal a{color:var(--mute-2);text-decoration:underline;display:inline-flex;min-height:44px;align-items:center}
.nowrap{white-space:nowrap}
@media(min-width:900px){
  .site-foot .foot{flex-direction:row;justify-content:space-between;align-items:center;padding:28px 40px 8px}
  .foot .links{display:flex;flex-direction:row;gap:24px}
  .foot-legal{padding:0 40px 110px}
}

/* ---- menu additions ---- */
.lfc-bubble-links{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.lfc-bubble-link{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;font-size:13px;font-weight:700}
.lfc-intro .inner-shell{position:absolute;left:60px;top:60px;width:200px;height:200px;border:1px solid rgba(17,17,17,.08);border-radius:50%}
.lfc-intro .logo img{position:relative;z-index:1}
.lfc-pill{min-height:56px}

/* ---- type helpers (mobile values from the 390px mocks) ---- */
.h-display{font-family:var(--f-head);font-weight:800;font-size:38px;line-height:.98;letter-spacing:-.035em}
.h-sec{font-family:var(--f-head);font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.h-sec-600{font-family:var(--f-head);font-weight:600;font-size:28px;line-height:1.05;letter-spacing:-.03em}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mute{color:var(--mute)}
.body-sm{font-size:14px;line-height:1.45;color:#3A3A3A}
@media(min-width:900px){
  .h-display{font-size:clamp(44px,5vw,68px)}
  .h-sec{font-size:clamp(30px,3vw,42px)}
  .h-sec-600{font-size:clamp(32px,3.4vw,52px)}
  .mono{font-size:12px}
}

/* ---- buttons ---- */
/* hot orange: fill only, dark text */
.btn-red{background:var(--red);color:var(--ink)}.btn-red:hover{background:var(--ink);color:#fff}
.btn-round{border-radius:10px;min-height:46px;font-size:15px}
.btn-block{display:flex;width:100%}
.btn-outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink);min-height:44px;font-size:14px}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.text-link{font-weight:700;font-size:14px;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}

/* ---- blocks ---- */
.pad{padding-left:16px;padding-right:16px}
.dark-card{background:var(--ink);color:#fff;border-radius:20px;padding:20px 16px;display:flex;flex-direction:column;gap:12px}
.dark-card .sub{font-size:13px;line-height:1.45;color:var(--ink-mute)}
.white-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ticks li{display:flex;gap:8px;font-size:13px;line-height:1.4;color:#3A3A3A}
.ticks li::before{content:"✓";font-weight:700;color:var(--tick,var(--blue))}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.meta-grid > div{padding:16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.meta-grid .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mute-2);text-transform:uppercase}
.meta-grid .v{font-family:var(--f-head);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.05}
.meta-grid .s{font-size:12px;color:var(--mute)}
@media(min-width:900px){.meta-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.meta-grid > div{padding:24px}.meta-grid .v{font-size:34px}}
.steps-list{display:flex;flex-direction:column}
.steps-list .st{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.steps-list .st .n{font-family:var(--f-head);font-weight:800;font-size:22px;color:var(--blue);width:28px;flex:none}
.steps-list .st .t{font-weight:700;font-size:15px}
.steps-list .st .d{font-size:13px;line-height:1.45;color:var(--mute);margin-top:3px}

/* FAQ — <details> (no JS) and the older .faq-item click pattern */
.faq{display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:6px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p,.faq details .a{font-size:14px;line-height:1.5;color:#3A3A3A;padding:4px 0 12px;margin:0}
.faq-item{border-top:1px solid var(--line);cursor:pointer}
.faq-item .faq-q{font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:8px 0}
.faq-item .faq-q .icon{color:var(--blue);font-size:20px;line-height:1;font-style:normal}
.faq-item .faq-a{display:none;font-size:14px;line-height:1.5;color:#3A3A3A;padding:0 0 14px}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}

/* CTA band (ink) */
.cta-band{background:var(--ink);color:var(--cream);padding:34px 22px;display:flex;flex-direction:column;gap:14px}
.cta-band .t{font-family:var(--f-head);font-weight:600;font-size:30px;line-height:1.02;letter-spacing:-.03em}
.cta-band .d{font-size:14px;line-height:1.45;color:var(--ink-mute)}
.cta-band .btn{min-height:46px}
.cta-band .text-link{color:var(--cream)}
@media(min-width:900px){
  .cta-band{padding:64px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
  .cta-band .t{font-size:48px;font-weight:800}
  .cta-band .d{font-size:17px}
  .cta-band .btn{min-height:58px;padding:0 28px;font-size:17px}
}

/* Prose (legal pages, long copy) */
.prose{max-width:720px}
.prose h2{font-family:var(--f-head);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:34px 0 10px}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:#3A3A3A;margin:0 0 10px}
.prose ul{padding-left:20px;margin:0 0 14px}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue);text-decoration:underline}
.prose .note{background:var(--sand);border-left:4px solid var(--ink);padding:12px 16px;margin:18px 0}

/* Pills / chips */
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;padding:5px 9px;display:inline-block}
.pill-out{padding:6px 10px;border:1px solid var(--ink);border-radius:999px;font-size:12px;font-weight:600;display:inline-block}

/* Page shell spacing so the fixed MENU pill never covers the last control */
main{display:block}

/* Back-to-top (kept from the old pages; sits bottom-left, clear of the MENU pill) */
.sq-top-btn{position:fixed;left:16px;bottom:26px;z-index:39;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.sq-top-btn.show{opacity:1;pointer-events:auto}